/* ============================================================
   SUPWILAI OS — Design Tokens + Components (os-tokens.css)
   คัดจาก mockups/os-kit.css (ตัด mock-only: .sheet-demo .phone-frame .map-ph)
   ⚠️ P2 (re-skin ระบบ port): ลิงก์ไฟล์นี้ "ก่อน" CSS เดิมของระบบเสมอ
   เพื่อให้ rule เดิมของระบบชนะ cascade — component class ในไฟล์นี้
   (.btn .card ฯลฯ) มีชื่อ generic ที่อาจชนกับ Bootstrap/ระบบเดิม
   ============================================================ */
:root{
  --paper:#f7faf9; --card:#ffffff; --ink:#0c1f1c; --ink-2:#4a5f5a; --ink-3:#8aa39b;
  --line:#dce7e3; --line-soft:#eef3f1;
  --mint:#0ea47e; --mint-deep:#059669; --mint-soft:#e6f5ef;
  --gold:#d4a537; --danger:#b91c1c; --danger-soft:#fdecec;
  --ok:#047857; --ok-soft:#e6f5ef; --wait:#a16207; --wait-soft:#fdf4e3;
  --info:#0369a1; --info-soft:#e3f2fb;
  --t-pt:#10b981;   --t-pt-soft:#e6f5ef;
  --t-hr:#6366f1;   --t-hr-soft:#eef0fe;
  --t-jr:#009e8f;   --t-jr-soft:#d9f6f1;
  --t-dms:#d4a537;  --t-dms-soft:#fbf3df;
  --t-stock:#0284c7;--t-stock-soft:#e3f2fb;
  --font-ui:'Anuphan','Noto Sans Thai',system-ui,sans-serif;
  --font-body:'Noto Sans Thai','Anuphan',system-ui,sans-serif;
  --font-mono:'IBM Plex Mono',ui-monospace,monospace;
  --r:12px; --r-lg:14px;
  --rail-w:64px; --subnav-w:216px;
}
/* Lucide icons render as inline <svg>; size + align them by context */
[data-lucide]{width:18px;height:18px;display:inline-block;vertical-align:-.16em}
svg.lucide{stroke-width:1.75}
.udot{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--c,#9aa7a2);vertical-align:middle;margin:0 3px;flex:none}
body[data-tint="pt"]{--tint:var(--t-pt);--tint-soft:var(--t-pt-soft)}
body[data-tint="hr"]{--tint:var(--t-hr);--tint-soft:var(--t-hr-soft)}
body[data-tint="jr"]{--tint:var(--t-jr);--tint-soft:var(--t-jr-soft)}
body[data-tint="dms"]{--tint:var(--t-dms);--tint-soft:var(--t-dms-soft)}
body[data-tint="stock"]{--tint:var(--t-stock);--tint-soft:var(--t-stock-soft)}

/* ---------- BASE (OS-authored pages เท่านั้น — หน้า P2 ของระบบ port
   ให้พึ่ง :root vars ข้างบน ไม่พึ่ง base/component ด้านล่าง) ---------- */
body.os-base{background:var(--paper);color:var(--ink);font-family:var(--font-body);font-size:14px;
  margin:0;padding:0;min-height:100vh;box-sizing:border-box;
  background-image:radial-gradient(circle,#dde9e3 1px,transparent 1px);background-size:26px 26px;}
body.os-base *,body.os-base *::before,body.os-base *::after{box-sizing:border-box}
body.os-base h1,body.os-base h2,body.os-base h3,body.os-base h4,
body.os-base b,body.os-base strong,body.os-base button,body.os-base label{font-family:var(--font-ui)}
body.os-base h1,body.os-base h2,body.os-base h3,body.os-base h4,body.os-base p{margin:0}
body.os-base a{color:inherit;text-decoration:none}

/* ---------- COMPONENTS ---------- */
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.grid-2>*,.grid-3>*,.grid-4>*{min-width:0}
@media(max-width:1023px){.grid-4,.grid-3{grid-template-columns:1fr 1fr}}
@media(max-width:520px){
  .grid-2{grid-template-columns:1fr}
  .qcard .v{font-size:18px;overflow-wrap:anywhere}
  .os-main{overflow-x:hidden}
}
.mb{margin-bottom:14px}

.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);padding:16px;box-shadow:0 1px 2px rgba(12,31,28,.04)}
.qcard{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:13px 14px}
.qcard .k{font-family:var(--font-ui);font-weight:600;font-size:11px;color:var(--ink-3);letter-spacing:.01em}
.qcard .v{font-family:var(--font-ui);font-size:22px;font-weight:700;margin-top:4px}
.qcard .v small{font-size:12px;color:var(--ink-2);font-weight:500}
.qcard .bar{height:5px;border-radius:3px;background:var(--line-soft);margin-top:9px;overflow:hidden}
.qcard .bar i{display:block;height:100%;border-radius:3px;background:var(--tint)}

.tbl{background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden}
.tbl .hd{display:flex;justify-content:space-between;align-items:center;padding:12px 16px;border-bottom:1px solid var(--line);gap:10px;flex-wrap:wrap}
.tbl .hd b{font-family:var(--font-ui);font-size:14px}
.tbl .scroll{overflow-x:auto}
.tbl table{width:100%;border-collapse:collapse;font-size:13px;min-width:520px}
.tbl th{font-family:var(--font-ui);font-size:11.5px;letter-spacing:0;color:var(--ink-3);
  text-align:left;padding:10px 16px;border-bottom:1px solid var(--line);font-weight:600;white-space:nowrap}
.tbl td{padding:10px 16px;border-bottom:1px solid var(--line-soft);vertical-align:middle}
.tbl tr:last-child td{border-bottom:0}

.st{font-family:var(--font-ui);font-size:11px;font-weight:600;padding:3px 10px;border-radius:999px;white-space:nowrap}
.st.ok{background:var(--ok-soft);color:var(--ok)} .st.wait{background:var(--wait-soft);color:var(--wait)}
.st.no{background:var(--danger-soft);color:var(--danger)} .st.info{background:var(--info-soft);color:var(--info)}
.st.tint{background:var(--tint-soft);color:var(--ink)}

.btn{display:inline-flex;align-items:center;gap:7px;border:1px solid var(--line);background:var(--card);
  border-radius:9px;font-family:var(--font-ui);font-weight:600;font-size:12.5px;padding:8px 14px;cursor:pointer;color:var(--ink-2)}
.btn.primary{background:var(--tint);border-color:var(--tint);color:#fff}
.btn.mint{background:linear-gradient(90deg,#14b8a6,#059669);border:0;color:#fff}
.btn.danger{background:var(--danger-soft);border-color:transparent;color:var(--danger)}
.btn.sm{padding:5px 10px;font-size:11.5px}
.toolbar{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-bottom:14px}
.toolbar .sp{flex:1}

.field{margin-bottom:12px}
.field label{font-size:12px;font-weight:600;display:block;margin-bottom:5px}
.field input,.field select,.field textarea{width:100%;border:1.5px solid var(--line);border-radius:10px;
  padding:10px 12px;font-family:var(--font-body);font-size:14px;background:#fbfdfc;color:var(--ink);box-sizing:border-box}
.field input:focus,.field select:focus,.field textarea:focus{outline:2px solid var(--tint);border-color:var(--tint)}
.field .hint{font-size:11px;color:var(--ink-3);margin-top:4px}

.chip{font-family:var(--font-mono);font-size:10.5px;color:var(--ink-2);border:1px solid var(--line);
  border-radius:999px;padding:3px 10px;background:var(--card)}

.case{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:11px 13px;margin-bottom:9px}
.case .r1{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-bottom:4px}
.case .rt{font-family:var(--font-ui);font-weight:600;font-size:13px}
.case .meta{font-size:11.5px;color:var(--ink-2)}
.case .price{font-family:var(--font-mono);font-weight:600;font-size:13px;white-space:nowrap}

.empty{padding:34px 16px;text-align:center;color:var(--ink-3)}
.empty .ic{font-size:30px;margin-bottom:8px}
.empty b{display:block;color:var(--ink-2);font-size:13.5px;margin-bottom:3px}
.empty p{font-size:12px}

.fab{position:fixed;right:16px;bottom:84px;width:52px;height:52px;border-radius:50%;border:0;
  background:var(--tint);color:#fff;font-size:22px;z-index:65;box-shadow:0 8px 20px rgba(12,31,28,.25);cursor:pointer;display:none}
@media(max-width:1023px){.fab.show{display:block}}

.kv{display:flex;justify-content:space-between;gap:10px;padding:8px 0;border-bottom:1px dashed var(--line-soft);font-size:13px}
.kv:last-child{border-bottom:0}
.kv .k{color:var(--ink-2)}
.kv .v{font-weight:600;font-family:var(--font-ui);text-align:right}
.money{font-family:var(--font-mono)}
.pos{color:var(--ok)} .neg{color:var(--danger)}

.note{border-left:3px solid var(--tint);background:var(--tint-soft);border-radius:0 10px 10px 0;
  padding:10px 13px;font-size:12.5px;color:var(--ink-2);margin-bottom:14px}
.note b{color:var(--ink)}

/* ---------- SUB-TABS (in-page views) ---------- */
.subtabs{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:14px;border-bottom:1px solid var(--line);padding-bottom:0}
.subtabs button{border:0;background:none;font-family:var(--font-ui);font-size:13px;font-weight:600;color:var(--ink-3);
  padding:9px 13px;cursor:pointer;border-bottom:2.5px solid transparent;margin-bottom:-1px;white-space:nowrap}
.subtabs button:hover{color:var(--ink-2)}
.subtabs button.on{color:var(--ink);border-bottom-color:var(--tint)}
.subtabs button .badge{font-family:var(--font-mono);font-size:10px;background:var(--tint-soft);color:var(--ink);
  border-radius:999px;padding:1px 7px;margin-left:5px}
.subview{display:none}
.subview.on{display:block;animation:os-fadein .16s ease}
.subtabs.scrollx{overflow-x:auto;flex-wrap:nowrap}

/* section divider label */
.divlbl{font-family:var(--font-mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);
  margin:20px 0 10px;padding-bottom:6px;border-bottom:1px dashed var(--line)}
.divlbl:first-child{margin-top:0}

/* avatar with photo (employee lists) */
.ava{width:38px;height:38px;border-radius:50%;object-fit:cover;background:var(--tint-soft);display:inline-grid;place-items:center;
  font-family:var(--font-ui);font-weight:600;font-size:13px;color:var(--ink-2);flex:none;overflow:hidden}
.ava.lg{width:64px;height:64px;font-size:20px}
.ava img{width:100%;height:100%;object-fit:cover}
.person{display:flex;align-items:center;gap:10px}
.person .nm{font-family:var(--font-ui);font-weight:600;font-size:13px}
.person .rl{font-size:11px;color:var(--ink-2)}

/* payslip / document preview sheet */
.doc-preview{background:#fff;border:1px solid var(--line);border-radius:10px;padding:22px;max-width:520px;
  box-shadow:0 4px 16px rgba(12,31,28,.08);font-size:12.5px}
.doc-preview .dh{display:flex;justify-content:space-between;align-items:flex-start;border-bottom:2px solid var(--ink);padding-bottom:12px;margin-bottom:12px}
.doc-preview .dh .co{font-family:var(--font-ui);font-weight:700;font-size:15px}
.doc-preview .dh .co small{display:block;font-weight:400;color:var(--ink-2);font-size:10.5px;margin-top:2px}
.doc-preview .drow{display:flex;justify-content:space-between;padding:5px 0;border-bottom:1px dotted var(--line-soft)}
.doc-preview .drow.tot{border-top:2px solid var(--ink);border-bottom:0;font-family:var(--font-ui);font-weight:700;font-size:14px;margin-top:6px;padding-top:8px}
.doc-preview .money{font-family:var(--font-mono)}

@keyframes os-fadein{from{opacity:0;transform:translateY(4px)}to{opacity:1}}