/* ===================================================================
   styles.css — SRDI-STAR: FISCAL 2.0 (Phase 2)
   ธีมตามสัญญา UI mockup_fiscal_v3.html (D27 — design tokens ล็อกแล้ว
   ห้ามแก้ค่าตัวแปรสี/ฟอนต์/มุมโค้ง) · Phase 3 จะเพิ่มส่วนกราฟ/ตาราง
   จากไฟล์ mockup เดิม โดยห้ามแตะบล็อกตัวแปรด้านบน
   =================================================================== */

/* ── Design tokens (D27 · โหมดสว่าง) — คัดลอกตรงจาก mockup v3 ── */
: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 (D27 · โหมดมืด) ── */
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}

/* ── 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}

/* ── ปุ่ม/อินพุต ── */
.fy-sel,.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.warn{background:var(--red); border-color:var(--red); color:#fff}
.btn:disabled{opacity:.55; cursor:wait}
.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}

/* ── 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}
.pill.open{background:var(--green-soft); color:var(--green)}
.pill.closed{background:var(--red-soft); color:var(--red)}
.pill.info{background:var(--blue-soft); color:var(--blue)}
.note{font-size:12.5px; color:var(--mut)}
.tag{display:inline-block; font-size:11.5px; font-weight:600; border-radius:99px; padding:2px 9px}
.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)}

/* ── การ์ดแจ้ง error (โครงตาม mockup — ของจริงแสดงเมื่อเรียก API ไม่สำเร็จ) ── */
.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}

/* ── KPI cards ── */
.kpis{display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:12px; margin:14px 0 12px}
.kpi{background:var(--card); border:1px solid var(--line); border-radius:16px; padding:14px 16px; box-shadow:var(--shadow)}
.kpi .lb{font-size:12.5px; color:var(--mut)}
.kpi .num{font-size:22px; font-weight:600; margin-top:2px}
.kpi .sub{font-size:12px; margin-top:4px; color:var(--mut)}
.kpi.hl{border-color:var(--green2)}

/* ── การ์ดทั่วไป ── */
.card{background:var(--card); border:1px solid var(--line); border-radius:16px; padding:16px; box-shadow:var(--shadow)}
.card h3{font-size:15.5px; font-weight:600; margin-bottom:10px}
.card h3 .note{font-weight:400}

/* ── จอสถานะปีที่ยังไม่มีข้อมูล ── */
.emptyfy{text-align:center; padding:60px 20px}
.emptyfy .big{font-family:'Prompt'; font-size:22px; font-weight:600; margin:10px 0}

/* ── 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; box-shadow:0 12px 40px rgba(0,0,0,.25)}
.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,.modal .sel{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}
.hidden{display:none!important}
.mini{font-size:11.5px; color:var(--mut)}

/* ═══════════════════════════════════════════════════════════════════
   ส่วนเพิ่ม Phase 3 — Dashboard เต็มหน้า (คัดลอกคลาสจาก mockup v3 ตาม D27
   ห้ามแตะบล็อก design tokens ด้านบน)
   ═══════════════════════════════════════════════════════════════════ */

/* ── กระดิ่งแจ้งเตือน (โครง Phase 3 — ข้อมูลจริงจาก Comments/Responses เปิด Phase 5) ── */
.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:340px; max-height:400px; 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}

/* ── L3: Alert banner ── */
.alertbar{display:flex; gap:12px; align-items:center; flex-wrap:wrap; margin:10px 0 4px; padding:12px 16px; border-radius:16px; border:1px solid; font-size:14px}
.alertbar b{font-family:'Prompt'}
.alertbar.crit{background:var(--red-soft); color:var(--red); border-color:color-mix(in srgb, var(--red) 35%, var(--line)); animation:blink 1.7s ease-in-out infinite}
.alertbar.ok{background:var(--green-soft); color:var(--green); border-color:color-mix(in srgb, var(--green) 30%, var(--line))}
@keyframes blink{0%,100%{opacity:1}50%{opacity:.66}}
.tag.blink{animation:blink 1.2s ease-in-out infinite}

/* ── Trend badge (ใช้จริง Phase 4 — เตรียมตาม mockup) ── */
.trend{font-size:11px; font-weight:600; border-radius:99px; padding:1px 7px; white-space:nowrap}
.trend.up{background:var(--green-soft); color:var(--green)} .trend.flat{background:var(--blue-soft); color:var(--blue)} .trend.dn{background:var(--amber-soft); color:var(--amber)}

/* ── L5: แถบตัวกรองเหนือ KPI (D10) ── */
.filters{background:var(--card); border:1px solid var(--line); border-radius:16px; padding:12px 16px; box-shadow:var(--shadow); display:flex; gap:9px; flex-wrap:wrap; align-items:center; margin:12px 0 0}
.filters label{font-size:12.5px; color:var(--mut)}
.qchips{display:flex; gap:6px; flex-wrap:wrap}
.qc{cursor:pointer; font-size:12.5px; padding:5px 12px; border-radius:99px; border:1px solid var(--line); background:var(--chip)}
.qc.on{background:var(--green); color:#fff; border-color:var(--green)}

/* ── โครงตาราง grid ของหน้า ── */
.grid2{display:grid; grid-template-columns:1.6fr 1fr; gap:12px; margin:12px 0}
.grid2.even{grid-template-columns:1fr 1fr}
.grid3{display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:12px; margin:12px 0}
@media(max-width:920px){.grid2,.grid2.even{grid-template-columns:1fr}}

/* ── กล่องตัวเลข + แถบสัดส่วน ── */
.fc-nums{display:grid; grid-template-columns:repeat(3,1fr); gap:8px; text-align:center; margin:10px 0}
.fc-nums .bx{background:var(--chip); border-radius:12px; padding:8px}
.fc-nums .bx .num{font-size:19px; font-weight:600}
.fc-nums .bx .lb{font-size:11px; color:var(--mut)}
.probrow{display:flex; align-items:center; gap:8px; margin:6px 0; font-size:13px}
.pbar{flex:1; height:8px; border-radius:99px; background:var(--chip); overflow:hidden}
.pbar i{display:block; height:100%; border-radius:99px}

/* ── L4: แถบ progress 3 กลุ่ม + เส้นเป้าปัก ── */
.progrp .row{display:grid; grid-template-columns:200px 1fr 150px; gap:12px; align-items:center; margin:12px 0}
@media(max-width:720px){.progrp .row{grid-template-columns:1fr; gap:4px}}
.progrp .lbg{font-size:13px}
.progrp .lbg .mini{display:block}
.pgbar{position:relative; height:18px; border-radius:99px; background:var(--chip)}
.pgbar i{display:block; height:100%; border-radius:99px; transition:width .3s}
.pgbar .pin{position:absolute; top:-5px; bottom:-5px; width:3px; background:var(--ink); opacity:.6; border-radius:2px}
.pgnum{font-size:12.5px; text-align:right}

/* ── L1+L8: ตารางหลัก ── */
table{width:100%; border-collapse:collapse; font-size:13.5px}
th{font-family:'Prompt'; font-weight:600; font-size:12.5px; color:var(--mut); text-align:left; padding:8px 8px; border-bottom:1px solid var(--line); white-space:nowrap; cursor:pointer}
td{padding:8px; border-bottom:1px solid var(--line); vertical-align:top}
tbody tr{cursor:pointer}
tbody tr:hover td{background:color-mix(in srgb, var(--green-soft) 45%, transparent)}
tfoot td{font-weight:600; background:var(--chip); border-top:2px solid var(--line); border-bottom:none; cursor:default}
.tblwrap{overflow:auto; max-height:600px}
.tblwrap thead th{position:sticky; top:0; background:var(--card); z-index:5}
.right{text-align:right} .nowrap{white-space:nowrap}
.bar{height:7px; border-radius:99px; background:var(--chip); min-width:70px; overflow:hidden}
.bar i{display:block; height:100%}
.star{cursor:pointer; background:none; border:none; font-size:15px; opacity:.3; padding:0}
.star.on{opacity:1}

/* ── L4: ตารางเป้ารายไตรมาส ── */
.tgt{width:auto; font-size:12.5px; margin-top:12px; border-collapse:collapse}
.tgt th,.tgt td{padding:5px 12px; text-align:center; cursor:default; border-bottom:1px solid var(--line)}
.tgt th:first-child,.tgt td:first-child{text-align:left}
.tgt .on{background:var(--green-soft); color:var(--green); font-weight:600}

/* ── L2: Heat Map ── */
.hm{display:grid; gap:4px; font-size:11.5px}
.hm .cell{border-radius:8px; padding:6px 4px; text-align:center; font-weight:600}

/* ── legend ใต้กราฟ + กราฟแท่งนอน ── */
.legend{display:flex; gap:12px; flex-wrap:wrap; font-size:11.5px; color:var(--mut); margin-top:6px}
.dotl{display:inline-block; width:10px; height:10px; border-radius:3px; margin-right:4px; vertical-align:-1px}
#hbarWrap{position:relative}

/* ── Drill modal (D24) ── */
.modal.wide{max-width:900px; max-height:92vh; overflow:auto}
.dgrid{display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:8px; margin:12px 0}
.dgrid .bx{background:var(--chip); border-radius:12px; padding:10px; text-align:center}
.dgrid .bx .num{font-size:18px; font-weight:600}
.dgrid .bx .lb{font-size:11px; color:var(--mut)}
.reco{background:var(--blue-soft); border-radius:12px; padding:10px 14px; font-size:13px; margin-top:12px}
.reco b{font-family:'Prompt'}
.reco ul{margin:6px 0 0 18px}
.reco li{margin:3px 0}

/* ── รายการติ๊กใน mail modal (ใช้จริง Phase 5 — เตรียมตาม mockup) ── */
.mailist{max-height:190px; overflow:auto; background:var(--chip); border-radius:10px; padding:8px 10px; font-size:12.5px}
.mailist label{display:flex; gap:7px; align-items:flex-start; margin:4px 0; cursor:pointer; color:var(--ink); font-size:12.5px}
.mailist input{margin-top:3px}

/* ── Scenario slider (ใช้จริง Phase 4 — เตรียมตาม mockup) ── */
.scen input[type=range]{width:100%}
.scen .vals{display:flex; justify-content:space-between; font-size:12px; color:var(--mut)}

/* ── Print เต็มรูปตาม mockup v3 (Phase 3) ── */
@media print{
  .topbar button,.topbar select,.topbar .bellwrap,.topbar .userchip a,.filters,.overlay,.toast,.loadov,.alertbar .btn,#errcard{display:none!important}
  body{background:#fff!important; background-image:none!important}
  .card,.statusbar,.alertbar{box-shadow:none!important; break-inside:avoid}
  .tblwrap{max-height:none; overflow:visible}
  .wrap{padding-bottom:10px; max-width:100%}
}