/* ชุดสีกลางของหน้า IOC — ที่เดียวของทั้งระบบ (งาน 004 · ใบงานเรียก tokens.css แต่ชื่อนั้นชนด่านกันไฟล์ความลับของคิว *token* จึงใช้ theme.css)
 *
 * หน้าใหม่ห้ามตั้งสีเอง: ใช้ var(--ชื่อ) จากไฟล์นี้เท่านั้น (tests/test_color_tokens.py ตรวจ) · คู่มือ docs/ชุดสีและตัวอักษร.md
 * หน้าบัญชี (msp-deploy/ledger/ ของ msp-ledger) มีชุดสีของตัวเองใน ledger/style.css — ไฟล์นี้ไม่ได้ใช้ที่นั่น
 * โทนอุ่น (13 ก.ย. 2569): เทาอมน้ำตาลเข้ากับเขียวแบรนด์ · ค่าที่ต่างจากแบบเพราะไม่ผ่านความต่างของสี 4.5:1 ปรับตัวอักษรให้เข้มขึ้น (ไม่ปรับพื้น)
 */
:root {
  /* แบรนด์ — ห้ามแตะ */
  --primary: #0F3D2E;
  --primary-light: #1E6B5B;
  --primary-dark: #082A20;       /* ปุ่มเขียวตอนชี้ */
  --primary-bg: #E7F0EC;
  --brand-tint: #C7DDD5;         /* พื้นไล่สีหน้าเข้าสู่ระบบ */
  --on-primary: #FFFFFF;         /* ตัวอักษรบนปุ่มเขียว/แดง */

  /* พื้นและเส้น */
  --bg: #FAF8F4;                 /* พื้นหลังหน้า */
  --surface: #FFFFFF;            /* การ์ด */
  --surface-2: #F4F0E9;          /* หัวตาราง แถบเครื่องมือ แถวที่ชี้ */
  --border: #E6DFD3;             /* เส้นขอบทั่วไป */
  --border-soft: #EFE9DF;        /* เส้นคั่นแถวในตาราง */

  /* ตัวอักษร */
  --text: #241F1A;               /* หลัก */
  --text-muted: #6E6459;         /* รอง */
  --text-soft: #746B5F;          /* จาง — แบบให้ #9C9286 แต่ได้แค่ 2.7:1 จึงเข้มขึ้นให้ผ่าน 4.5:1 */

  /* สถานะ — ความหมายเดิม: เขียว = ดี · เหลือง = ต้องดู · แดง = เสีย */
  --ok: #2D794F;                 /* แบบ #2E7D51 → 4.4:1 บนพื้นเขียวอ่อน เข้มขึ้นเล็กน้อย */
  --ok-bg: #E7F2EB;
  --warn: #8D6512;               /* แบบ #9A6E14 → 4.0:1 บนพื้นเหลืองอ่อน เข้มขึ้น */
  --warn-bg: #F8F0DC;
  --danger: #A8412A;
  --danger-bg: #F7E9E4;
  --honey: #BA7F25;              /* ใกล้ครบกำหนด — ใช้กับจุด/แถบเท่านั้น ห้ามใช้เป็นสีตัวอักษร (ตัวอักษรใช้ --warn) */
  --info: #1E40AF;               /* ข้อมูลทั่วไป (ป้ายสีฟ้าเดิม ค่าเท่าเดิม) */
  --info-bg: #DBEAFE;
  --highlight: #FEF08A;          /* พื้นไฮไลต์ — คำที่ค้นเจอ · ช่องที่อ่านมาแล้วต้องดูซ้ำ (ตัวอักษรใช้สีเดิม) */

  /* งาน 168 — สีประจำสำนักงาน: สำนักงานที่ยังไม่มีโลโก้ ใช้ป้ายรหัสย่อ (SP · JAY · AUD) บนสีของตัวเอง
     เลือกสีจากรหัสสำนักงาน (firm-switch.js: firmColor) — รหัสเดิมได้สีเดิมทุกหน้า ทุกเครื่อง ไม่ผูกกับลำดับในรายการ
     ตัวอักษรบนป้ายเป็น --on-primary (ขาว) ทุกสีจึงต้องต่างจากขาวอย่างน้อย 4.5:1 (tests/test_color_tokens.py ตรวจ)
     MSP ไม่ใช้ชุดนี้ — ใช้โลโก้และเขียวแบรนด์เดิม (ห้ามเอาโลโก้/ชื่อ MSP ไปใส่สำนักงานอื่น) */
  --firm-1: #1F5C8B;             /* น้ำเงิน */
  --firm-2: #7A3E9D;             /* ม่วง */
  --firm-3: #A03A5E;             /* ชมพูเข้ม */
  --firm-4: #14657A;             /* ฟ้าอมเขียว */
  --firm-5: #8A4B12;             /* น้ำตาลส้ม */
  --firm-6: #3F4E9E;             /* คราม */
  --firm-7: #5F6B18;             /* เขียวมะกอก */
  --firm-8: #9B3226;             /* แดงอิฐ */

  /* ชื่อเดิมที่หน้าเก่าใช้ — ชี้ไปที่ชื่อใหม่ */
  --success: var(--ok);
  --success-bg: var(--ok-bg);
  --warning: var(--warn);
  --warning-bg: var(--warn-bg);

  --radius: 10px;
  --shadow: 0 1px 3px rgba(36,31,26,.06);
  --shadow-lg: 0 10px 25px -5px rgba(36,31,26,.1);

  /* งาน 066: ชุดออกแบบ Claude Design (design_handoff_msp_redesign) — เพิ่มอย่างเดียว ค่าเดิมข้างบนไม่แตะ
     ชื่อที่ชนกับของเดิม (--bg --border --text-muted --radius --success …) คงค่าเดิมไว้ ไม่ใช้ค่าจากแบบ */
  --nav-grad-top: #0F3D2E;       /* รางเมนู: ไล่สีบน → ล่าง */
  --nav-grad-bottom: #14523F;
  --nav-panel: rgba(12,52,40,.92);   /* แผงเมนูโปร่งแสง + backdrop-filter — แบบให้ .78 แต่ทับหน้าสีอ่อนแล้วตัวอักษรจางไม่ถึง 4.5:1 จึงทึบขึ้น */
  --nav-text: #A6C4BA;           /* ป้ายบนราง (บนพื้นเขียวเข้ม 7.1:1) */
  --nav-item: #DBE7E2;           /* รายการในแผง */
  --nav-sub: #A3BFB4;            /* หัวข้อย่อย · บทบาท — แบบ #8FADA3 ได้ 3.8:1 บนเขียวล่างของราง เข้มขึ้น(สว่างขึ้น)ให้ผ่าน */
  --nav-fold: #B7D9CD;           /* หมวดที่พับ */
  --nav-dim: #A3BFB4;            /* ตัวเลขจำนวนเมนู — แบบ #7FA094 ได้ 3.2:1 ใช้ค่าเดียวกับ --nav-sub */
  --nav-field: rgba(255,255,255,.10);   /* ช่องค้นหา / ปุ่มปักหมุดบนแผง */
  --mint: #6EE2C0;
  --mint-soft: rgba(110,226,192,.20);   /* พื้นหมวดที่กำลังอยู่ในราง */
  --mint-line: rgba(110,226,192,.28);   /* เส้นขอบแผงเมนู */
  --mint-text: #A9F0D8;
  --accent-yellow: #FFD24A;      /* ขีดบอกตำแหน่งในราง — เส้นเท่านั้น ไม่ใช่สีตัวอักษร */
  --border-strong: #DDE3E0;
  --table-head: #EAF5F0;
  --table-head-line: #D7E8E1;
  --row-line: #F0F3F2;
  --tint-ok: #EEF9F4;
  --tint-info: #E2F6EE;
  --tint-warn: #FFFDF7;
  --warn-line: #F2E4C3;
  --text-strong: #33403A;
  --text-mid: #3C4A44;
  --text-dim: #66756F;            /* แบบ #6B7A74 ได้ 4.25:1 บน --bg เข้มขึ้นเล็กน้อย */
  --radius-card: 11px;
  --radius-shell: 14px;
  --shadow-card: 0 1px 2px rgba(15,61,46,.05);
  --shadow-panel: 16px 0 34px -20px rgba(6,30,22,.5);
  --ease-nav: cubic-bezier(.22,.61,.36,1);
  --font-mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
}

/* ตัวเลขในตารางและช่องกรอกตัวเลข กว้างเท่ากันทุกตัว — ยอดเงิน/จำนวนเรียงตรงกันทุกแถว (งาน 004 ข้อ 11) */
table, input[type="number"], .num, .money, .amount { font-variant-numeric: tabular-nums; }

/* จอเล็ก: ปุ่ม/ช่องกรอก/แท็บทุกอันสูงอย่างน้อย 44px ให้นิ้วกดโดน (งาน 027 ข้อ 22) */
@media (max-width: 900px) {
  .btn, button, select, [role="button"], .tab, .chip,
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="hidden"]):not([type="color"]) { min-height: 44px; }
  a.btn { display: inline-flex; align-items: center; justify-content: center; }
}

/* งาน 036: กล่องแจ้งเตือน (toast) ลอยทับกลางล่างของจอ — เดิมรับคลิกแม้ตอนมองไม่เห็น (opacity 0)
   จึงบังปุ่มที่อยู่ข้างใต้ เช่น ปุ่มบันทึกในกล่องสิทธิ์ (กดลองใหม่หลังบันทึกล้มไม่ติด) */
.toast { pointer-events: none; }

/* งาน 037: ทุกคลิกต้องมีเสียงตอบ (คู่กับ /shell.js)
   - มีเซสชันในเครื่อง → ข้ามจอ "กำลังโหลด..." เต็มจอ วาดโครงหน้าทันที (เซสชันใช้ไม่ได้ หน้าเปิดจอเข้าสู่ระบบทับเอง)
   - แถบความคืบหน้าบางบนสุด · skeleton ระหว่างรอข้อมูล */
html.msp-shell .loading { display: none !important; }
/* งาน 145: กดเมนู (เปลี่ยนหน้าในโดเมนเดียวกัน) = ภาพหน้าเดิมค้างไว้จนหน้าใหม่วาดเสร็จ แล้วค่อยสลับ — ไม่มีจอขาวระหว่างหน้า
 *   Chrome/Edge 126+ · เบราว์เซอร์อื่นไม่รู้จักกฎนี้ = เหมือนเดิม · รางเมนูไม่ขยับ (มีชื่อของตัวเอง) · คนตั้งลดการเคลื่อนไหว = สลับทันที */
@view-transition { navigation: auto; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: 120ms; }
.msp-sidebar { view-transition-name: msp-nav; }
::view-transition-group(msp-nav), ::view-transition-old(msp-nav), ::view-transition-new(msp-nav) { animation: none; }
@media (prefers-reduced-motion: reduce) { ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; } }
html.msp-shell #app { display: block; }
html.msp-busy body::before {
  content: ""; position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 10000; pointer-events: none;
  background: linear-gradient(90deg, transparent 0, var(--primary) 35%, var(--primary) 65%, transparent 100%) no-repeat;
  background-size: 40% 100%; animation: msp-progress 1.1s ease-in-out infinite;
}
@keyframes msp-progress { from { background-position: -40% 0; } to { background-position: 140% 0; } }
@media (prefers-reduced-motion: reduce) {
  html.msp-busy body::before { animation: none; background: var(--primary); background-size: 100% 100%; opacity: .5; }
}
.msp-skel { color: transparent !important; position: relative; min-height: 150px; }
.msp-skel::before {
  content: ""; position: absolute; inset: 14px 16px; border-radius: 6px; pointer-events: none;
  background: repeating-linear-gradient(to bottom, var(--surface-2) 0 14px, transparent 14px 30px);
  animation: msp-skel 1.4s ease-in-out infinite;
}
@keyframes msp-skel { 50% { opacity: .55; } }
@media (prefers-reduced-motion: reduce) { .msp-skel::before { animation: none; } }

/* งาน 037: ไม่มีข้อมูล ≠ จอเปล่า (emptyHtml / failHtml ใน states.js) */
.msp-empty { display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; padding: 24px 16px; color: var(--text-muted); }
.msp-empty-icon { width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; font-size: 26px; line-height: 1; background: var(--surface-2); }
.msp-empty-text { font-size: 14px; line-height: 1.6; max-width: 46ch; }
.msp-fail .msp-empty-text { color: var(--text); }