/* ═══════════════════════════════════════════════════════════════════════
   NVK Chart Theme — ธีมกลางสำหรับ dashboard/report ทุกหน้าในเว็บ
   คู่กับ /assets/js/nvk-chart.js   ·  สร้าง 2026-08-03

   วิธีใช้
     <link rel="stylesheet" href="/assets/css/nvk-chart.css?v=…">
     <script src="/assets/js/nvk-chart.js?v=…" defer></script>
     ครอบเนื้อหาหน้าด้วย  <div class="nvkc-root"> … </div>

   สีชุด categorical ผ่าน validator (CVD/contrast/lightness) ทั้งโหมดสว่าง
   และมืด บนพื้นผิวจริงของเว็บ (#fff / #1c1c1e) — ห้ามสลับลำดับ slot
   เพราะลำดับคือกลไกกันตาบอดสี ถ้าจะเพิ่มสีต้องรัน validator ใหม่

   หมายเหตุโหมดมืด: portal ทำ dark ด้วย filter:invert ทั้งหน้า (nvk-portal.css)
   .nvkc-root จึง invert กลับอีกชั้น (คืนสีจริง) แล้วใช้ token ชุดมืดที่
   ออกแบบไว้เอง — ไม่ใช่สีที่ถูกกลับด้าน
   ═══════════════════════════════════════════════════════════════════════ */

.nvkc-root{
  color-scheme:light;
  /* พื้นผิว */
  --nvkc-page:#f5f5f7;
  --nvkc-surface:#ffffff;
  --nvkc-surface-2:#f7f7f8;
  --nvkc-hero:#16233a;              /* การ์ด KPI ตัวเด่น (พื้นเข้ม) */
  --nvkc-hero-ink:#ffffff;
  /* ตัวอักษร */
  --nvkc-ink:#1d1d1f;
  --nvkc-ink-2:#5c5c61;
  --nvkc-muted:#86868b;
  /* เส้น */
  --nvkc-line:#e6e6ea;              /* gridline hairline */
  --nvkc-axis:#c7c7cc;
  --nvkc-border:rgba(0,0,0,.08);
  --nvkc-shadow:0 1px 2px rgba(0,0,0,.04),0 8px 24px rgba(0,0,0,.05);
  /* ชุดสี categorical — เรียงตามลำดับที่ validate แล้ว ห้ามสลับ */
  --nvkc-c1:#2a78d6;  /* blue   */
  --nvkc-c2:#eb6834;  /* orange */
  --nvkc-c3:#1baf7a;  /* aqua   */
  --nvkc-c4:#eda100;  /* yellow */
  --nvkc-c5:#e87ba4;  /* magenta*/
  --nvkc-c6:#008300;  /* green  */
  --nvkc-c7:#4a3aa7;  /* violet */
  --nvkc-c8:#e34948;  /* red    */
  /* ไล่เฉดค่าเดียว (heatmap / choropleth) — น้ำเงินอ่อน→เข้ม */
  --nvkc-s1:#cde2fb; --nvkc-s2:#9ec5f4; --nvkc-s3:#6da7ec; --nvkc-s4:#3987e5;
  --nvkc-s5:#256abf; --nvkc-s6:#184f95; --nvkc-s7:#0d366b;
  /* สถานะ — สงวนไว้ ห้ามเอาไปใช้เป็นสี series */
  --nvkc-good:#0ca30c; --nvkc-warn:#fab219; --nvkc-serious:#ec835a; --nvkc-crit:#d03b3b;
  --nvkc-up:#006300;                /* ตัวเลขบวก (ข้อความ) */
  --nvkc-down:#c0271a;              /* ตัวเลขลบ (ข้อความ) */
  --nvkc-brand:#9e1115;             /* แดง NVK — ใช้กับแบรนด์/ปุ่ม ไม่ใช่ series */
  font:14px/1.55 "IBM Plex Sans Thai","Archivo",-apple-system,system-ui,sans-serif;
  color:var(--nvkc-ink);
}
@media (prefers-color-scheme:dark){
  html:not([data-theme="light"]):not([data-theme="dark"]) .nvkc-root{
    color-scheme:dark;
    --nvkc-page:#141210; --nvkc-surface:#1c1c1e; --nvkc-surface-2:#242427;
    --nvkc-hero:#0f1826; --nvkc-ink:#f5f5f7; --nvkc-ink-2:#c3c2c7; --nvkc-muted:#8e8e93;
    --nvkc-line:#2c2c2e; --nvkc-axis:#48484a; --nvkc-border:rgba(255,255,255,.10);
    --nvkc-shadow:0 1px 2px rgba(0,0,0,.4);
    --nvkc-c1:#3987e5; --nvkc-c2:#d95926; --nvkc-c3:#199e70; --nvkc-c4:#c98500;
    --nvkc-c5:#d55181; --nvkc-c6:#008300; --nvkc-c7:#9085e9; --nvkc-c8:#e66767;
    --nvkc-up:#0ca30c; --nvkc-down:#e66767;
  }
}
/* โหมดมืด "สีจริง" — ต้องขอใช้เอง: <div class="nvkc-root nvkc-truecolor">
   portal ทำ dark ด้วย filter:invert ทั้ง html (nvk-portal.css) หน้าไหนที่ยังมี
   สี hard-code ใน SVG attribute อยู่ ให้ปล่อยตาม invert เดิม (อย่าใส่คลาสนี้)
   หน้าที่วาดกราฟด้วย NVKChart ล้วน ๆ ใส่ nvkc-truecolor ได้เลย จะได้ชุดสีมืด
   ที่ออกแบบและ validate มาเฉพาะ ไม่ใช่สีที่ถูกกลับด้าน */
html[data-theme="dark"] .nvkc-root.nvkc-truecolor{
  filter:invert(1) hue-rotate(180deg);
  color-scheme:dark;
  --nvkc-page:#141210; --nvkc-surface:#1c1c1e; --nvkc-surface-2:#242427;
  --nvkc-hero:#0f1826; --nvkc-ink:#f5f5f7; --nvkc-ink-2:#c3c2c7; --nvkc-muted:#8e8e93;
  --nvkc-line:#2c2c2e; --nvkc-axis:#48484a; --nvkc-border:rgba(255,255,255,.10);
  --nvkc-shadow:0 1px 2px rgba(0,0,0,.4);
  --nvkc-c1:#3987e5; --nvkc-c2:#d95926; --nvkc-c3:#199e70; --nvkc-c4:#c98500;
  --nvkc-c5:#d55181; --nvkc-c6:#008300; --nvkc-c7:#9085e9; --nvkc-c8:#e66767;
  --nvkc-up:#0ca30c; --nvkc-down:#e66767;
}

/* ── การ์ด ─────────────────────────────────────────────────────────── */
.nvkc-card{background:var(--nvkc-surface);border:1px solid var(--nvkc-border);border-radius:12px;
  padding:16px 18px;margin-bottom:14px;box-shadow:var(--nvkc-shadow)}
.nvkc-card.pad0{padding:0}
.nvkc-grid{display:grid;gap:14px}
.nvkc-g2{grid-template-columns:repeat(2,minmax(0,1fr))}
.nvkc-g3{grid-template-columns:repeat(3,minmax(0,1fr))}
.nvkc-g4{grid-template-columns:repeat(4,minmax(0,1fr))}
@media(max-width:980px){.nvkc-g3,.nvkc-g4{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:620px){.nvkc-g2,.nvkc-g3,.nvkc-g4{grid-template-columns:1fr}}

/* หัวข้อย่อยตัวพิมพ์ใหญ่ (SECTION LABEL) */
.nvkc-h{display:flex;align-items:center;gap:8px;margin:0 0 10px;
  font:700 11px/1.2 "IBM Plex Sans Thai",sans-serif;letter-spacing:.06em;text-transform:uppercase;color:var(--nvkc-ink)}
.nvkc-h .sub{font-weight:500;letter-spacing:.02em;text-transform:none;color:var(--nvkc-muted);font-size:10.5px}
.nvkc-h .grow{flex:1}
.nvkc-h2{margin:0 0 3px;font:700 15px/1.3 "Archivo","IBM Plex Sans Thai",sans-serif;letter-spacing:-.01em;color:var(--nvkc-ink)}
.nvkc-cap{color:var(--nvkc-muted);font-size:11.5px;margin-bottom:10px}

/* ── KPI / stat tile ───────────────────────────────────────────────── */
.nvkc-kpi{background:var(--nvkc-surface);border:1px solid var(--nvkc-border);border-radius:12px;
  padding:14px 16px;box-shadow:var(--nvkc-shadow);display:flex;gap:12px;align-items:flex-start;min-width:0}
.nvkc-kpi .ic{flex:0 0 auto;width:38px;height:38px;border-radius:50%;display:flex;align-items:center;
  justify-content:center;font-size:17px;line-height:1;background:var(--nvkc-c1);color:#fff}
.nvkc-kpi .bd{min-width:0;flex:1}
.nvkc-kpi .lb{font:700 10px/1.3 "IBM Plex Sans Thai";letter-spacing:.06em;text-transform:uppercase;color:var(--nvkc-muted)}
.nvkc-kpi .vl{font:700 24px/1.2 "Archivo","IBM Plex Sans Thai",sans-serif;letter-spacing:-.02em;margin-top:2px;color:var(--nvkc-ink)}
.nvkc-kpi .sm{font-size:11px;color:var(--nvkc-muted);margin-top:3px}
/* ตัวเด่น — พื้นเข้ม หนึ่งใบต่อหนึ่งหน้าจอ */
.nvkc-kpi.hero{background:var(--nvkc-hero);border-color:transparent}
.nvkc-kpi.hero .lb{color:rgba(255,255,255,.72)}
.nvkc-kpi.hero .vl{color:var(--nvkc-hero-ink);font-size:28px}
.nvkc-kpi.hero .sm{color:rgba(255,255,255,.66)}
.nvkc-kpi.hero .ic{background:rgba(255,255,255,.14)}
/* สีวงไอคอน — c0 = กลาง (ค่าฐาน/ปีก่อน ไม่ใช่ series) */
.nvkc-kpi.c0 .ic{background:var(--nvkc-axis)}
.nvkc-kpi.c1 .ic{background:var(--nvkc-c1)}.nvkc-kpi.c2 .ic{background:var(--nvkc-c2)}
.nvkc-kpi.c3 .ic{background:var(--nvkc-c3)}.nvkc-kpi.c4 .ic{background:var(--nvkc-c4)}
.nvkc-kpi.c5 .ic{background:var(--nvkc-c5)}.nvkc-kpi.c6 .ic{background:var(--nvkc-c6)}
.nvkc-kpi.c7 .ic{background:var(--nvkc-c7)}.nvkc-kpi.c8 .ic{background:var(--nvkc-c8)}

/* delta ▲▼ — สีบอกทิศทาง + มีลูกศรกำกับเสมอ (ไม่พึ่งสีอย่างเดียว) */
.nvkc-up{color:var(--nvkc-up);font-weight:700}
.nvkc-dn{color:var(--nvkc-down);font-weight:700}
.nvkc-flat{color:var(--nvkc-muted)}

/* ── ตาราง ─────────────────────────────────────────────────────────── */
.nvkc-tbl{width:100%;border-collapse:collapse;font-size:12.5px;color:var(--nvkc-ink)}
.nvkc-tbl th{text-align:left;font:600 10px/1.3 "IBM Plex Sans Thai";letter-spacing:.05em;text-transform:uppercase;
  color:var(--nvkc-muted);padding:7px 8px;border-bottom:1px solid var(--nvkc-border);white-space:nowrap}
.nvkc-tbl td{padding:7px 8px;border-bottom:1px solid var(--nvkc-line);vertical-align:middle}
.nvkc-tbl td.n,.nvkc-tbl th.n{text-align:right;font-family:"IBM Plex Mono",monospace;font-variant-numeric:tabular-nums;white-space:nowrap}
.nvkc-tbl tr.click{cursor:pointer}
.nvkc-tbl tr.click:hover td{background:var(--nvkc-surface-2)}
.nvkc-scroll{overflow-x:auto}

/* ── distribution (แถบแนวนอน + ค่า) ──────────────────────────────── */
.nvkc-dist{display:flex;flex-direction:column;gap:7px}
.nvkc-dist .row{display:grid;grid-template-columns:auto 1fr auto;gap:10px;align-items:center;font-size:11.5px}
.nvkc-dist .lb{color:var(--nvkc-ink-2);white-space:nowrap;min-width:46px}
.nvkc-dist .track{display:block;height:7px;border-radius:99px;background:var(--nvkc-line);overflow:hidden}
.nvkc-dist .fill{display:block;height:100%;min-width:3px;border-radius:99px;background:var(--nvkc-c1)}
.nvkc-dist .vl{font-family:"IBM Plex Mono",monospace;font-variant-numeric:tabular-nums;
  color:var(--nvkc-ink);font-weight:600;white-space:nowrap;min-width:44px;text-align:right}

/* ── legend ───────────────────────────────────────────────────────── */
.nvkc-lg{display:flex;flex-wrap:wrap;gap:6px 14px;margin-top:9px;font-size:11px;color:var(--nvkc-ink-2)}
.nvkc-lg span{display:inline-flex;align-items:center;gap:5px}
.nvkc-lg i{width:9px;height:9px;border-radius:2px;background:var(--nvkc-c1);flex:0 0 auto}
.nvkc-lg i.dot{border-radius:50%}

/* ── heatmap ──────────────────────────────────────────────────────── */
.nvkc-hm{overflow-x:auto}
.nvkc-hm table{border-collapse:separate;border-spacing:2px;font-size:10px}
.nvkc-hm th{font:600 9.5px/1.2 "IBM Plex Sans Thai";letter-spacing:.03em;color:var(--nvkc-muted);
  padding:3px 5px;text-align:center;white-space:nowrap;border:0;text-transform:uppercase}
.nvkc-hm td{border:0;border-radius:4px;text-align:center;min-width:42px;height:27px;padding:0 4px;
  font:600 10px/1 "IBM Plex Mono",monospace;font-variant-numeric:tabular-nums;color:var(--nvkc-ink)}
.nvkc-hm td.rowh{background:none;text-align:left;font:700 11.5px/1.25 "IBM Plex Sans Thai";
  min-width:130px;white-space:nowrap;padding-right:10px;color:var(--nvkc-ink)}
.nvkc-hm td.zero{color:var(--nvkc-muted)}
.nvkc-hm tr.tot td{background:var(--nvkc-hero);color:#fff}
.nvkc-hm tr.tot td.rowh{background:none;color:var(--nvkc-ink)}
/* แถบไล่สีบอกสเกล */
.nvkc-scale{display:flex;align-items:center;gap:8px;margin-top:9px;font-size:10.5px;color:var(--nvkc-muted)}
.nvkc-scale .bar{flex:0 0 150px;height:8px;border-radius:99px;
  background:linear-gradient(90deg,var(--nvkc-s1),var(--nvkc-s3),var(--nvkc-s5),var(--nvkc-s7))}

/* ── insight (ไอคอนกลม + หัวข้อสี + คำอธิบาย) ───────────────────── */
.nvkc-ins{display:flex;gap:11px;padding:9px 0;align-items:flex-start}
.nvkc-ins+.nvkc-ins{border-top:1px solid var(--nvkc-line)}
.nvkc-ins .ic{flex:0 0 auto;width:30px;height:30px;border-radius:50%;display:flex;align-items:center;
  justify-content:center;font-size:14px;background:color-mix(in srgb,var(--nvkc-c1) 14%,transparent);color:var(--nvkc-c1)}
.nvkc-ins .ttl{font:700 12px/1.35 "IBM Plex Sans Thai";text-transform:uppercase;letter-spacing:.03em;color:var(--nvkc-c1)}
.nvkc-ins .txt{font-size:11.5px;color:var(--nvkc-ink-2);margin-top:2px;line-height:1.5}
.nvkc-ins.c2 .ic{background:color-mix(in srgb,var(--nvkc-c2) 14%,transparent);color:var(--nvkc-c2)}.nvkc-ins.c2 .ttl{color:var(--nvkc-c2)}
.nvkc-ins.c3 .ic{background:color-mix(in srgb,var(--nvkc-c3) 14%,transparent);color:var(--nvkc-c3)}.nvkc-ins.c3 .ttl{color:var(--nvkc-c3)}
.nvkc-ins.c4 .ic{background:color-mix(in srgb,var(--nvkc-c4) 16%,transparent);color:var(--nvkc-c4)}.nvkc-ins.c4 .ttl{color:var(--nvkc-c4)}
.nvkc-ins.c7 .ic{background:color-mix(in srgb,var(--nvkc-c7) 14%,transparent);color:var(--nvkc-c7)}.nvkc-ins.c7 .ttl{color:var(--nvkc-c7)}
.nvkc-ins.c8 .ic{background:color-mix(in srgb,var(--nvkc-c8) 14%,transparent);color:var(--nvkc-c8)}.nvkc-ins.c8 .ttl{color:var(--nvkc-c8)}

/* อันดับ (TOP 3) */
.nvkc-rank{display:flex;gap:11px;align-items:baseline;padding:8px 0}
.nvkc-rank+.nvkc-rank{border-top:1px solid var(--nvkc-line)}
.nvkc-rank .no{font:700 13px/1 "Archivo",sans-serif;color:var(--nvkc-muted);width:14px}
.nvkc-rank .nm{flex:1;font-size:11.5px;color:var(--nvkc-ink-2)}
.nvkc-rank .vl{font:700 15px/1.1 "Archivo",sans-serif;color:var(--nvkc-c1)}

/* ── svg chart ────────────────────────────────────────────────────── */
.nvkc-svg{width:100%;height:auto;display:block;overflow:visible}
.nvkc-svg .grid{stroke:var(--nvkc-line);stroke-width:1}
.nvkc-svg .axis{stroke:var(--nvkc-axis);stroke-width:1}
.nvkc-svg .tick{fill:var(--nvkc-muted);font:500 9.5px/1 "IBM Plex Mono",monospace;font-variant-numeric:tabular-nums}
.nvkc-svg .xlab{fill:var(--nvkc-ink-2);font:600 10px/1.2 "IBM Plex Sans Thai"}
.nvkc-svg .vlab{fill:var(--nvkc-ink);font:700 10px/1 "IBM Plex Mono",monospace;font-variant-numeric:tabular-nums}
.nvkc-svg .ring{stroke:var(--nvkc-surface);stroke-width:2}   /* วงแหวนสีพื้น กันจุดทับเส้น */
.nvkc-svg .hit{fill:transparent;cursor:pointer}
.nvkc-svg .cross{stroke:var(--nvkc-axis);stroke-width:1;pointer-events:none;opacity:0}
.nvkc-donut-c{fill:var(--nvkc-ink);font:700 17px/1 "Archivo",sans-serif}
.nvkc-donut-l{fill:var(--nvkc-muted);font:600 9px/1 "IBM Plex Sans Thai";letter-spacing:.06em}

/* กล่อง callout จุดพีค */
.nvkc-peak{border-radius:8px;padding:7px 10px;color:#fff;background:var(--nvkc-c1);display:inline-block}
.nvkc-peak .k{font:700 8.5px/1.3 "IBM Plex Sans Thai";letter-spacing:.06em;text-transform:uppercase;opacity:.85}
.nvkc-peak .t{font:600 10.5px/1.3 "IBM Plex Sans Thai"}
.nvkc-peak .v{font:700 17px/1.15 "Archivo",sans-serif}
.nvkc-peak .u{font:500 9.5px/1.2 "IBM Plex Sans Thai";opacity:.85}

/* ── tooltip ──────────────────────────────────────────────────────── */
.nvkc-tip{position:fixed;z-index:9999;pointer-events:none;background:#16233a;color:#fff;border-radius:8px;
  padding:7px 10px;font:500 11.5px/1.45 "IBM Plex Sans Thai";box-shadow:0 8px 24px rgba(0,0,0,.22);
  max-width:260px;opacity:0;transition:opacity .1s;white-space:nowrap}
.nvkc-tip.on{opacity:1}
.nvkc-tip b{font-weight:700}
.nvkc-tip .n{font-family:"IBM Plex Mono",monospace;font-variant-numeric:tabular-nums}

/* ปุ่ม/ฟิลเตอร์แถวเดียวเหนือชาร์ต */
.nvkc-bar{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-bottom:12px}
.nvkc-btn{border:1px solid var(--nvkc-border);background:var(--nvkc-surface);border-radius:9px;
  padding:7px 13px;font:600 12.5px/1 "IBM Plex Sans Thai";cursor:pointer;color:var(--nvkc-ink-2)}
.nvkc-btn:hover{border-color:var(--nvkc-c1);color:var(--nvkc-c1)}
.nvkc-btn.on{background:var(--nvkc-hero);color:#fff;border-color:transparent}

@media print{
  .nvkc-root{--nvkc-shadow:none}
  .nvkc-card,.nvkc-kpi{break-inside:avoid;box-shadow:none}
  .nvkc-tip{display:none}
}
@media (prefers-reduced-motion:reduce){.nvkc-tip{transition:none}}