/* ============================================================
   Rainbow Ice — Design Foundation (shared tokens + base components)
   ที่มา: ui-ux-pro-max design system → ธีมน้ำแข็ง (tracking blue + ส้มส่ง)
   ใช้ร่วมกัน 2 frontend: คนขับ LIFF (มือถือ ปุ่มใหญ่ กลางแดด) + ออฟฟิศ (iPad/desktop)
   ============================================================ */

/* ── ฟอนต์: IBM Plex Sans Thai = ไทย+ละติน ชุดเดียว, มี tabular figures เหมาะข้อมูลเงิน ── */
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans+Thai:wght@400;500;600;700&display=swap');

:root {
  /* สี — น้ำเงิน tracking + ส้มส่งของ (CTA) + สถานะ ops */
  --c-primary: #2563EB;        /* น้ำเงินหลัก (แอคชัน/ลิงก์) */
  --c-primary-600: #1D4ED8;
  --c-primary-700: #1E40AF;    /* ตัวอักษรเข้มบนพื้นฟ้า */
  --c-on-primary: #FFFFFF;
  --c-accent: #EA580C;         /* ส้ม — ปุ่มยืนยัน/CTA สำคัญ (ผ่าน WCAG 3:1) */
  --c-accent-600: #C2410C;

  --c-bg: #F4F8FF;             /* พื้นฟ้าอ่อน เย็นตา */
  --c-surface: #FFFFFF;
  --c-surface-2: #EFF4FC;
  --c-fg: #0F2547;            /* ตัวอักษรหลัก contrast สูง (อ่านกลางแดด) */
  --c-fg-muted: #51607A;
  --c-border: #CFE0F5;

  /* สถานะ (ต้องมี icon/label คู่เสมอ — ห้ามสื่อด้วยสีอย่างเดียว) */
  --c-success: #15803D;  --c-success-bg: #DCFCE7;
  --c-warning: #B45309;  --c-warning-bg: #FEF3C7;
  --c-danger:  #DC2626;  --c-danger-bg:  #FEE2E2;
  --c-info:    #2563EB;  --c-info-bg:    #DBEAFE;

  /* spacing 4/8, radius, เงา (ระดับเดียวกันทั้งระบบ) */
  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 24px; --sp-6: 32px;
  --radius: 12px; --radius-sm: 8px; --radius-lg: 16px;
  --shadow-1: 0 1px 2px rgba(15,37,71,.08);
  --shadow-2: 0 4px 16px rgba(15,37,71,.10);

  /* type scale */
  --fs-xs: 12px; --fs-sm: 14px; --fs-base: 16px; --fs-lg: 18px; --fs-xl: 22px; --fs-2xl: 28px;

  /* เป้าแตะขั้นต่ำ 44px (คนขับใช้นิ้วโป้ง) */
  --tap: 44px;
}

* { box-sizing: border-box; }
html, body {
  margin: 0;
  font-family: 'IBM Plex Sans Thai', system-ui, -apple-system, sans-serif;
  font-size: var(--fs-base);
  line-height: 1.55;
  color: var(--c-fg);
  background: var(--c-bg);
  -webkit-text-size-adjust: 100%;
}

/* ตัวเลขเงิน/ปริมาณ — tabular ป้องกันคอลัมน์ขยับ */
.num, .money, td.num, .tabular { font-variant-numeric: tabular-nums; font-feature-settings: 'tnum'; }

/* ── ปุ่ม ── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2);
  min-height: var(--tap); padding: 0 var(--sp-4);
  border: 1px solid transparent; border-radius: var(--radius-sm);
  font: inherit; font-weight: 600; cursor: pointer;
  transition: background .16s ease, transform .1s ease;
  touch-action: manipulation;
}
.btn:active { transform: scale(.98); }
.btn:focus-visible { outline: 3px solid var(--c-primary); outline-offset: 2px; }
.btn-primary { background: var(--c-primary); color: var(--c-on-primary); }
.btn-primary:hover { background: var(--c-primary-600); }
.btn-accent  { background: var(--c-accent); color: #fff; }        /* CTA ยืนยันส่ง/เก็บเงิน */
.btn-accent:hover { background: var(--c-accent-600); }
.btn-ghost   { background: transparent; color: var(--c-primary); border-color: var(--c-border); }
.btn-danger  { background: var(--c-danger); color: #fff; }
.btn[disabled] { opacity: .45; cursor: not-allowed; }
.btn-lg { min-height: 56px; font-size: var(--fs-lg); width: 100%; }  /* ปุ่มหลักคนขับ เต็มกว้าง */

/* ── การ์ด ── */
.card {
  background: var(--c-surface); border: 1px solid var(--c-border);
  border-radius: var(--radius); box-shadow: var(--shadow-1); padding: var(--sp-4);
}

/* ── ป้ายสถานะ (icon + label) ── */
.badge {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 2px 10px; border-radius: 999px; font-size: var(--fs-sm); font-weight: 600;
}
.badge-success { background: var(--c-success-bg); color: var(--c-success); }
.badge-warning { background: var(--c-warning-bg); color: var(--c-warning); }
.badge-danger  { background: var(--c-danger-bg);  color: var(--c-danger); }
.badge-info    { background: var(--c-info-bg);    color: var(--c-info); }
.badge-muted   { background: var(--c-surface-2);  color: var(--c-fg-muted); }

/* ── ฟอร์ม ── */
label { display: block; font-weight: 500; font-size: var(--fs-sm); margin-bottom: 6px; color: var(--c-fg); }
.input, select, textarea {
  width: 100%; min-height: var(--tap); padding: 10px var(--sp-3);
  border: 1px solid var(--c-border); border-radius: var(--radius-sm);
  font: inherit; background: #fff; color: var(--c-fg);
}
.input:focus, select:focus, textarea:focus { outline: 2px solid var(--c-primary); border-color: var(--c-primary); }
.field { margin-bottom: var(--sp-4); }
.field .error { color: var(--c-danger); font-size: var(--fs-sm); margin-top: 4px; }

/* ── ตาราง (ออฟฟิศ) — เลื่อนแนวนอนในกรอบตัวเอง บน iPad ── */
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; border-radius: var(--radius); }
table.data { width: 100%; border-collapse: collapse; background: #fff; font-size: var(--fs-sm); }
table.data th, table.data td { padding: 10px var(--sp-3); text-align: left; border-bottom: 1px solid var(--c-border); white-space: nowrap; }
table.data th { background: var(--c-surface-2); font-weight: 600; color: var(--c-fg-muted); position: sticky; top: 0; }
table.data td.num, table.data th.num { text-align: right; }

/* ── หัวข้อ ── */
h1 { font-size: var(--fs-2xl); font-weight: 700; margin: 0 0 var(--sp-4); }
h2 { font-size: var(--fs-xl); font-weight: 600; margin: 0 0 var(--sp-3); }

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}