/* ===================================================================
   styles.css — SRDI-STAR: WORKFORCE 1.0 (Phase 3)
   ธีมตามสัญญา UI mockup_workforce_v1.html v1.2 (D19 — design tokens
   ล็อกแล้ว ห้ามแก้ค่าตัวแปรสี/ฟอนต์/มุมโค้ง · tokens ชุดเดียวกับ FISCAL v3)
   Phase 3: เพิ่มคลาสทำเนียบเต็ม/โปรไฟล์/dashboard จาก mockup ใต้บล็อก tokens
   =================================================================== */

/* ── Design tokens (D19 · โหมดสว่าง) — คัดลอกตรงจาก mockup v1.2 ── */
:root{
  --bg:#faf8f3; --dot:#e8e2d4; --card:#ffffff; --ink:#22312a; --mut:#6b7a70; --line:#e5e0d3;
  --green:#1d7a4f; --green2:#2e9e6b; --green-soft:#e7f4ec; --amber:#b97a1a; --amber-soft:#fcf1de;
  --red:#b3382f; --red-soft:#fbe9e5; --blue:#2c6a9e; --blue-soft:#e6f0f8; --purple:#6d5aa8; --purple-soft:#efeaf9;
  --gray:#7a8079; --gray-soft:#efeee8;
  --chip:#f2efe6; --shadow:0 2px 10px rgba(40,60,45,.07);
}
/* ── Design tokens (D19 · โหมดมืด) ── */
html[data-theme="dark"]{
  --bg:#0e1512; --dot:#182019; --card:#17211b; --ink:#e6efe8; --mut:#93a89a; --line:#26332b;
  --green:#3fbf82; --green2:#2e9e6b; --green-soft:#12281c; --amber:#e0a34e; --amber-soft:#2b2211;
  --red:#e4776b; --red-soft:#2e1613; --blue:#6aa5d8; --blue-soft:#132433; --purple:#a996e0; --purple-soft:#1e1930;
  --gray:#9aa79c; --gray-soft:#1d251f;
  --chip:#1f2a23; --shadow:0 2px 10px rgba(0,0,0,.35);
}

*{box-sizing:border-box; margin:0}
body{font-family:'Anuphan',sans-serif; background:var(--bg); background-image:radial-gradient(var(--dot) 1px, transparent 1px); background-size:22px 22px; color:var(--ink); font-size:15px; line-height:1.55}
h1,h2,h3,.num{font-family:'Prompt',sans-serif}
.wrap{max-width:1280px; margin:0 auto; padding:0 18px 90px}
.hidden{display:none!important}

/* ── Topbar ── */
.topbar{position:sticky; top:0; z-index:50; backdrop-filter:blur(10px); background:color-mix(in srgb, var(--bg) 82%, transparent); border-bottom:1px solid var(--line)}
.tb-in{max-width:1280px; margin:0 auto; padding:10px 18px; display:flex; align-items:center; gap:12px; flex-wrap:wrap}
.brand{font-family:'Prompt'; font-weight:600; font-size:18px}
.brand small{display:block; font-family:'Anuphan'; font-weight:400; font-size:11.5px; color:var(--mut)}
.brand .st{color:var(--green)}
.spacer{flex:1}

/* ── ปุ่ม/อินพุต ── */
.sel,.inp{font-family:'Anuphan'; font-size:14px; padding:7px 10px; border-radius:10px; border:1px solid var(--line); background:var(--card); color:var(--ink)}
.btn{cursor:pointer; font-family:'Prompt'; font-size:13.5px; padding:8px 14px; border-radius:10px; border:1px solid var(--line); background:var(--card); color:var(--ink)}
.btn:hover{border-color:var(--green2)}
.btn.pri{background:var(--green); border-color:var(--green); color:#fff}
.btn.sm{padding:4px 10px; font-size:12px}
.btn:disabled{opacity:.55; cursor:not-allowed}
.userchip{display:flex; align-items:center; gap:8px; background:var(--chip); border:1px solid var(--line); padding:6px 12px; border-radius:99px; font-size:13px}
.userchip b{font-weight:600}
.rolebadge{font-size:11px; padding:2px 8px; border-radius:99px; background:var(--green-soft); color:var(--green); font-weight:600}

/* ── กระดิ่งแจ้งเตือน ── */
.bellwrap{position:relative}
.bell{cursor:pointer; position:relative; font-size:16px; background:var(--card); border:1px solid var(--line); border-radius:10px; padding:7px 11px}
.bell:hover{border-color:var(--green2)}
.bell .bdg{position:absolute; top:-7px; right:-7px; background:var(--red); color:#fff; font-size:10.5px; font-family:'Prompt'; font-weight:600; border-radius:99px; padding:1px 6px}
.belldd{position:absolute; right:0; top:44px; width:360px; max-height:420px; overflow:auto; background:var(--card); border:1px solid var(--line); border-radius:14px; box-shadow:0 10px 30px rgba(0,0,0,.2); padding:12px; z-index:80}
.belldd h4{font-family:'Prompt'; font-size:13.5px; margin-bottom:6px; display:flex; justify-content:space-between; align-items:center}
.belldd .it{padding:9px 8px; border-radius:10px; font-size:12.5px; margin:4px 0}
.belldd .it.unread{background:var(--blue-soft)}
.belldd .it b{font-family:'Prompt'; font-size:12.5px}
.belldd .it .mini{display:block}

/* ── Statusbar + ป้าย ── */
.statusbar{display:flex; gap:10px; align-items:center; flex-wrap:wrap; margin:16px 0 6px; padding:12px 16px; background:var(--card); border:1px solid var(--line); border-radius:16px; box-shadow:var(--shadow)}
.pill{font-size:12.5px; padding:4px 12px; border-radius:99px; font-weight:600; font-family:'Prompt'}
.pill.open{background:var(--green-soft); color:var(--green)}
.pill.info{background:var(--blue-soft); color:var(--blue)}
.pill.warn{background:var(--amber-soft); color:var(--amber)}
.note{font-size:12.5px; color:var(--mut)}
.mini{font-size:12px; color:var(--mut)}
.src{font-size:10px; padding:1px 7px; border-radius:99px; background:var(--chip); color:var(--mut); border:1px dashed var(--line); font-family:'Prompt'; cursor:help; white-space:nowrap; vertical-align:middle}
.tag{display:inline-block; font-size:11px; padding:2px 8px; border-radius:99px; background:var(--green-soft); color:var(--green); margin:2px 3px 0 0; font-family:'Prompt'}
.tag.pend{background:var(--amber-soft); color:var(--amber); border:1px dashed var(--amber)}
.tag.mut{background:var(--chip); color:var(--mut)}
.tag.g{background:var(--green-soft); color:var(--green)} .tag.a{background:var(--amber-soft); color:var(--amber)} .tag.r{background:var(--red-soft); color:var(--red)} .tag.b{background:var(--blue-soft); color:var(--blue)} .tag.p{background:var(--purple-soft); color:var(--purple)} .tag.n{background:var(--gray-soft); color:var(--gray)}

/* ── การ์ด + หัวข้อ + grid ── */
.card{background:var(--card); border:1px solid var(--line); border-radius:16px; box-shadow:var(--shadow); padding:16px; margin-top:12px}
.card h3{font-size:15.5px; margin-bottom:10px; display:flex; align-items:center; gap:8px; flex-wrap:wrap}
.card h3 .note{font-weight:400}
h2.sect{font-size:17px; margin:22px 0 4px; display:flex; align-items:center; gap:10px; flex-wrap:wrap}
.grid{display:grid; gap:12px}
.g4{grid-template-columns:repeat(4,1fr)}
.g3{grid-template-columns:repeat(3,1fr)}
.g2{grid-template-columns:repeat(2,1fr)}

/* ── KPI ── */
.kpi{background:var(--card); border:1px solid var(--line); border-radius:16px; box-shadow:var(--shadow); padding:14px 16px}
.kpi .lb{font-size:12.5px; color:var(--mut)}
.kpi .num{font-size:28px; font-weight:600; line-height:1.2}
.kpi .sub{font-size:12px; color:var(--mut)}

/* ── ไฟจราจร + ชิป ── */
.tl{display:inline-block; width:10px; height:10px; border-radius:99px; vertical-align:middle}
.tl.g{background:#2e9e6b}.tl.y{background:#e0a34e}.tl.r{background:#e4776b}.tl.k{background:var(--ink)}.tl.b{background:#6aa5d8}
html:not([data-theme=dark]) .tl.g{background:#1d7a4f}
html:not([data-theme=dark]) .tl.y{background:#b97a1a}
html:not([data-theme=dark]) .tl.r{background:#b3382f}
html:not([data-theme=dark]) .tl.b{background:#2c6a9e}
.tlchip{display:inline-flex; align-items:center; gap:6px; font-size:12px; padding:3px 10px; border-radius:99px; background:var(--chip); border:1px solid var(--line); font-family:'Prompt'}
.cnt{font-family:'Prompt'; font-size:11.5px; padding:2px 8px; border-radius:99px; white-space:nowrap}
.cnt.g{background:var(--green-soft); color:var(--green)}
.cnt.y{background:var(--amber-soft); color:var(--amber)}
.cnt.r{background:var(--red-soft); color:var(--red)}
.cnt.k{background:var(--gray-soft); color:var(--gray)}

/* ── Avatar ── */
.avatar{width:44px; height:44px; border-radius:99px; display:flex; align-items:center; justify-content:center; font-family:'Prompt'; font-weight:600; font-size:15px; color:#fff; flex:none; overflow:hidden}
.avatar img{width:100%; height:100%; object-fit:cover}
.av-a{background:#1d7a4f}.av-b{background:#2c6a9e}.av-c{background:#6d5aa8}.av-d{background:#b97a1a}

/* ── ทำเนียบ: การ์ด + ตาราง ── */
.pcard{display:flex; gap:12px; align-items:flex-start; background:var(--card); border:1px solid var(--line); border-radius:16px; box-shadow:var(--shadow); padding:14px; cursor:pointer}
.pcard:hover{border-color:var(--green2)}
.pcard .nm{font-family:'Prompt'; font-weight:600; font-size:14.5px}
.pcard .ps{font-size:12.5px; color:var(--mut)}
.dir-cards{grid-template-columns:repeat(3,1fr)}
table.dir{width:100%; border-collapse:collapse; font-size:13.5px}
table.dir th{font-family:'Prompt'; font-size:12.5px; text-align:left; color:var(--mut); border-bottom:1px solid var(--line); padding:8px 6px; white-space:nowrap}
table.dir td{border-bottom:1px solid var(--line); padding:8px 6px; vertical-align:top}
table.dir tr.row{cursor:pointer}
table.dir tr.row:hover td{background:var(--chip)}
.dirtblwrap{overflow-x:auto}

/* ── ผังผู้บริหาร ── */
.exec-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:10px}
.exec{border:1px solid var(--line); border-radius:14px; padding:10px 12px; display:flex; gap:10px; align-items:center; cursor:pointer}
.exec:hover{border-color:var(--green2)}
.exec .nm{font-family:'Prompt'; font-weight:600; font-size:13px; line-height:1.3}
.exec .ps{font-size:11.5px; color:var(--mut)}

/* ── วงแหวนชำนาญการ ── */
.ring{width:120px; height:120px; border-radius:99px; display:flex; align-items:center; justify-content:center; flex:none; background:conic-gradient(var(--green) 0deg, var(--green) calc(var(--pct)*3.6deg), var(--chip) calc(var(--pct)*3.6deg))}
.ring .in{width:88px; height:88px; border-radius:99px; background:var(--card); display:flex; flex-direction:column; align-items:center; justify-content:center}
.ring .in b{font-family:'Prompt'; font-size:20px}

/* ── Timeline + กล่องเสี่ยง ── */
.tline .mo{font-family:'Prompt'; font-weight:600; font-size:13px; margin:10px 0 4px; color:var(--green)}
.tline .ev{display:flex; gap:8px; align-items:flex-start; padding:6px 8px; border-radius:10px; font-size:13px; cursor:pointer}
.tline .ev:hover{background:var(--chip)}
.tline .d{font-family:'Prompt'; font-size:12px; color:var(--mut); width:64px; flex:none; padding-top:1px}
.riskbox{border:1px solid; border-radius:14px; padding:10px 12px; font-size:13px}
.riskbox b{font-family:'Prompt'; display:block; font-size:12.5px; margin-bottom:4px}
.riskbox.r{background:var(--red-soft); border-color:var(--red); color:var(--ink)}
.riskbox.k{background:var(--gray-soft); border-color:var(--gray)}
.riskbox.a{background:var(--amber-soft); border-color:var(--amber)}
.riskbox.b{background:var(--blue-soft); border-color:var(--blue)}

/* ── แถบของฉัน / คิวรับรอง ── */
.mybar{border:1.5px solid var(--green); background:var(--green-soft); border-radius:16px; padding:14px 16px; margin-top:12px}
.mybar h3{font-family:'Prompt'; font-size:15.5px; margin-bottom:8px}
.mybar .card{margin-top:0}
.chk{display:flex; gap:8px; align-items:flex-start; padding:5px 0; font-size:13.5px}
.chk .st{font-family:'Prompt'; font-size:11px; padding:2px 8px; border-radius:99px; white-space:nowrap}
.chk .st.done{background:var(--green-soft); color:var(--green)}
.chk .st.wait{background:var(--amber-soft); color:var(--amber)}
.chk .st.late{background:var(--red-soft); color:var(--red)}

/* ── โปรไฟล์ ── */
.prow{display:flex; gap:10px; padding:7px 0; border-bottom:1px dashed var(--line); font-size:13.5px}
.prow .k{width:170px; flex:none; color:var(--mut); font-size:12.5px; padding-top:1px}
.lock{color:var(--mut); font-size:12px}

/* ── การ์ดแจ้ง error ── */
.errcard{display:flex; gap:12px; align-items:center; flex-wrap:wrap; margin:10px 0 4px; padding:12px 16px; border-radius:16px; background:var(--red-soft); border:1px solid var(--red); color:var(--red); font-size:13.5px}

/* ── จอสถานะว่าง ── */
.emptybox{text-align:center; padding:60px 20px}
.emptybox .big{font-family:'Prompt'; font-size:22px; font-weight:600; margin:10px 0}
.emptycard{border:1.5px dashed var(--line); border-radius:16px; padding:26px; margin-top:12px; text-align:center; color:var(--mut)}

/* ── Modal (login OTP + โปรไฟล์) ── */
.overlay{position:fixed; inset:0; z-index:100; background:rgba(20,30,24,.45); backdrop-filter:blur(4px); display:flex; align-items:center; justify-content:center; padding:16px}
.modal{background:var(--card); border-radius:18px; border:1px solid var(--line); padding:24px; width:100%; max-width:430px; max-height:88vh; overflow:auto; box-shadow:0 12px 40px rgba(0,0,0,.25)}
.modal.wide{max-width:640px}
.modal h3{font-size:17px; margin-bottom:6px}
.modal .fld{margin:12px 0}
.modal .fld label{font-size:12.5px; color:var(--mut); display:block; margin-bottom:4px}
.modal .inp{width:100%}

/* ── จอ loading ── */
.loadov{position:fixed; inset:0; z-index:140; background:color-mix(in srgb, var(--bg) 70%, transparent); backdrop-filter:blur(3px); display:flex; align-items:center; justify-content:center}
.loadbox{background:var(--card); border:1px solid var(--line); border-radius:16px; padding:24px 34px; text-align:center; font-family:'Prompt'; box-shadow:var(--shadow)}
.spin{width:36px; height:36px; border:4px solid var(--chip); border-top-color:var(--green); border-radius:50%; margin:0 auto 12px; animation:sp 1s linear infinite}
@keyframes sp{to{transform:rotate(360deg)}}

/* ── Toast ── */
.toast{position:fixed; right:16px; bottom:16px; z-index:130; background:var(--green); color:#fff; padding:12px 18px; border-radius:12px; font-family:'Prompt'; font-size:14px; box-shadow:var(--shadow); display:none}

/* ── Footer + อื่น ๆ ── */
.footer{margin-top:26px; padding-top:14px; border-top:1px solid var(--line); font-size:12.5px; color:var(--mut); display:flex; gap:10px; flex-wrap:wrap; justify-content:space-between}
.gapline{display:flex; gap:8px; align-items:center; flex-wrap:wrap; font-size:12.5px}
ul.plain{margin:6px 0 0 18px; font-size:13px}
ul.plain li{margin:3px 0}

/* ── Responsive (ตาม mockup) ── */
/* กัน canvas กราฟดันการ์ดกว้างเกินจอตอนย่อหน้าต่าง/หมุนมือถือ — Chart.js หดตาม parent ไม่ได้ถ้า parent ถูก canvas เดิมถ่างไว้ */
#trendChart{max-width:100%}
@media (max-width:900px){.g4{grid-template-columns:repeat(2,1fr)}.g3{grid-template-columns:repeat(2,1fr)}.exec-grid{grid-template-columns:repeat(2,1fr)}.dir-cards{grid-template-columns:repeat(2,1fr)}}
@media (max-width:640px){.g4,.g3,.g2{grid-template-columns:1fr}.exec-grid{grid-template-columns:1fr}.dir-cards{grid-template-columns:1fr!important}.prow .k{width:120px}}

/* ── Print (ตาม mockup + ซ่อนของ interactive) ── */
@media print{
  .topbar button,.topbar .userchip a,.bellwrap,.dirctl,.overlay,.toast,.loadov,#errcard{display:none!important}
  body{background:#fff!important; background-image:none!important}
  .card,.statusbar,.kpi,.pcard{box-shadow:none!important; break-inside:avoid}
  .wrap{padding-bottom:10px; max-width:100%}
}