/* ═══════════════════════════════════════════════════════════════════════
   P&L By Branch — งบกำไรขาดทุนและ Scorecard รายสาขา
   ธีมพาสเทลจากสีโลโก้ SLC  #2eaeca
   สีของกราฟผ่าน validator ของ skill dataviz แล้วทั้งโหมดสว่างและมืด
   แก้สีเมื่อไหร่ ต้องรัน validate_palette.js ใหม่ทั้งสองโหมด
   ═══════════════════════════════════════════════════════════════════════ */
:root{
  color-scheme:light;
  /* แบรนด์ */
  --brand:#2eaeca; --brand-deep:#1c7f96; --brand-ink:#125f72;
  --brand-50:#f2fbfd; --brand-100:#e2f5fa; --brand-200:#c8ebf3; --brand-300:#9fdcea;
  /* พื้น */
  --plane:#f4fafc; --surface:#fbfdfe; --surface-2:#f0f8fb; --surface-3:#e7f4f8;
  --ink:#0d2a31; --ink-2:#456a73; --muted:#7d99a1;
  --grid:#dceef3; --axis:#b9dbe4; --border:rgba(28,127,150,.14);
  /* กราฟ — light  (validated on surface #fbfdfe) */
  --s1:#2a8fb8; --s2:#eb6834; --s3:#0f9d8a; --s4:#eda100; --s5:#e87ba4;
  --ref:#8aa6ae;
  --good:#0ca30c; --warn:#e39a12; --crit:#d03b3b;
  --pos:#046b3f; --neg:#c2333a;
  /* เงาแบบนุ่ม เล่นแสงจากด้านบน */
  --sh-1:0 1px 2px rgba(18,95,114,.05), 0 2px 10px rgba(18,95,114,.05);
  --sh-2:0 2px 4px rgba(18,95,114,.06), 0 12px 32px -8px rgba(18,95,114,.16);
  --sh-glow:0 0 0 1px rgba(46,174,202,.16), 0 8px 28px -6px rgba(46,174,202,.30);
  --sheen:linear-gradient(180deg, rgba(255,255,255,.9), rgba(255,255,255,0) 62%);
  --r:16px; --r-sm:10px;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    color-scheme:dark;
    --brand:#4cc4de; --brand-deep:#2eaeca; --brand-ink:#a8e4f0;
    --brand-50:#0f1e22; --brand-100:#12262c; --brand-200:#17323a; --brand-300:#1f4650;
    --plane:#0a1416; --surface:#14201f; --surface-2:#1a2a2c; --surface-3:#213437;
    --ink:#eaf6f8; --ink-2:#a9c4cb; --muted:#7d99a1;
    --grid:#22353a; --axis:#31494f; --border:rgba(140,220,235,.13);
    --s1:#2f9ac6; --s2:#d95926; --s3:#0f9d8a; --s4:#c98500; --s5:#d55181;
    --ref:#7d99a1;
    --good:#0ca30c; --warn:#e0a33a; --crit:#e15b5b;
    --pos:#3fbf7a; --neg:#f0827f;
    --sh-1:0 1px 2px rgba(0,0,0,.35), 0 2px 10px rgba(0,0,0,.28);
    --sh-2:0 2px 4px rgba(0,0,0,.4), 0 14px 34px -10px rgba(0,0,0,.6);
    --sh-glow:0 0 0 1px rgba(76,196,222,.22), 0 8px 28px -6px rgba(46,174,202,.32);
    --sheen:linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,0) 62%);
  }
}
:root[data-theme="dark"]{
  color-scheme:dark;
  --brand:#4cc4de; --brand-deep:#2eaeca; --brand-ink:#a8e4f0;
  --brand-50:#0f1e22; --brand-100:#12262c; --brand-200:#17323a; --brand-300:#1f4650;
  --plane:#0a1416; --surface:#14201f; --surface-2:#1a2a2c; --surface-3:#213437;
  --ink:#eaf6f8; --ink-2:#a9c4cb; --muted:#7d99a1;
  --grid:#22353a; --axis:#31494f; --border:rgba(140,220,235,.13);
  --s1:#2f9ac6; --s2:#d95926; --s3:#0f9d8a; --s4:#c98500; --s5:#d55181;
  --ref:#7d99a1;
  --good:#0ca30c; --warn:#e0a33a; --crit:#e15b5b;
  --pos:#3fbf7a; --neg:#f0827f;
  --sh-1:0 1px 2px rgba(0,0,0,.35), 0 2px 10px rgba(0,0,0,.28);
  --sh-2:0 2px 4px rgba(0,0,0,.4), 0 14px 34px -10px rgba(0,0,0,.6);
  --sh-glow:0 0 0 1px rgba(76,196,222,.22), 0 8px 28px -6px rgba(46,174,202,.32);
  --sheen:linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,0) 62%);
}

*{box-sizing:border-box}
[hidden]{display:none!important}
html,body{margin:0;padding:0}
body{
  background:var(--plane); color:var(--ink);
  font:14px/1.55 system-ui,-apple-system,"Segoe UI","Noto Sans Thai",sans-serif;
  -webkit-font-smoothing:antialiased;
  background-image:
    radial-gradient(1100px 520px at 12% -8%, var(--brand-100) 0%, transparent 62%),
    radial-gradient(900px 460px at 92% 2%, color-mix(in srgb,var(--s5) 12%, transparent) 0%, transparent 58%);
  background-attachment:fixed;
}
.wrap{max-width:1560px;margin:0 auto;padding:0 22px 72px}

/* ── header ─────────────────────────────────────────────────────────── */
header{padding:26px 0 16px;display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.logo{height:42px;width:auto;display:block;filter:drop-shadow(0 2px 6px rgba(46,174,202,.28))}
.htxt h1{margin:0;font-size:20px;font-weight:680;letter-spacing:-.015em;color:var(--ink)}
.htxt .sub{margin:4px 0 0;color:var(--ink-2);font-size:13px}
.htxt .sub b{color:var(--brand-ink);font-weight:650}
.hrule{width:1px;align-self:stretch;background:linear-gradient(var(--border),transparent);margin:2px 0}
.spacer{flex:1}
.iconbtn{
  border:1px solid var(--border);background:var(--surface);color:var(--ink-2);
  height:36px;min-width:36px;padding:0 10px;border-radius:11px;cursor:pointer;font:inherit;font-size:13px;
  display:inline-flex;align-items:center;gap:7px;justify-content:center;
  box-shadow:var(--sh-1);transition:.16s
}
.iconbtn:hover{color:var(--brand-ink);border-color:var(--brand-300);box-shadow:var(--sh-glow);transform:translateY(-1px)}
.iconbtn.primary{
  background:linear-gradient(180deg,var(--brand) 0%,var(--brand-deep) 100%);
  color:#fff;border-color:transparent;font-weight:600;
  box-shadow:0 2px 4px rgba(18,95,114,.2),0 8px 20px -6px rgba(46,174,202,.55)
}
.iconbtn.primary:hover{color:#fff;filter:brightness(1.06)}

/* ── control bar ────────────────────────────────────────────────────── */
.bar{
  position:sticky;top:0;z-index:30;
  background:color-mix(in srgb,var(--plane) 86%,transparent);
  backdrop-filter:blur(14px) saturate(1.4);-webkit-backdrop-filter:blur(14px) saturate(1.4);
  padding:11px 14px;margin:0 -14px 18px;border-radius:var(--r);
  border:1px solid var(--border);box-shadow:var(--sh-1);
  display:flex;gap:20px;flex-wrap:wrap;align-items:flex-end
}
.grp{display:flex;flex-direction:column;gap:6px}
.grp>label{font-size:10.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.chips{display:flex;gap:3px;background:var(--surface-3);padding:3px;border-radius:12px;border:1px solid var(--border)}
.chip{
  border:0;background:transparent;color:var(--ink-2);cursor:pointer;
  padding:6px 14px;border-radius:9px;font:inherit;font-size:13px;font-weight:500;
  transition:.16s;white-space:nowrap
}
.chip:hover{color:var(--brand-ink)}
.chip[aria-pressed="true"]{
  background:var(--surface);color:var(--brand-ink);font-weight:650;
  box-shadow:0 1px 2px rgba(18,95,114,.10),0 2px 8px -2px rgba(46,174,202,.35)
}
select,input[type=text],input[type=number]{
  font:inherit;font-size:13px;padding:7px 11px;border-radius:10px;
  border:1px solid var(--border);background:var(--surface);color:var(--ink);
  box-shadow:var(--sh-1)
}
select{cursor:pointer}
select:focus-visible,input:focus-visible{outline:2px solid var(--brand);outline-offset:1px}

/* ── cards ──────────────────────────────────────────────────────────── */
.card{
  position:relative;background:var(--surface);border:1px solid var(--border);
  border-radius:var(--r);box-shadow:var(--sh-2);padding:18px 20px;margin-bottom:18px;overflow:hidden
}
.card::before{content:"";position:absolute;inset:0 0 auto;height:56%;background:var(--sheen);pointer-events:none}
.card>*{position:relative}
.card>h2{margin:0 0 3px;font-size:14.5px;font-weight:680;letter-spacing:-.005em}
.card>.cap{margin:0 0 14px;font-size:12px;color:var(--muted);line-height:1.65}
.card.accent{border-top:2px solid var(--brand)}

/* ── KPI ────────────────────────────────────────────────────────────── */
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(184px,1fr));gap:13px;margin-bottom:18px}
.kpi{
  position:relative;background:var(--surface);border:1px solid var(--border);
  border-radius:var(--r);box-shadow:var(--sh-2);padding:15px 17px;overflow:hidden;
  transition:.18s
}
.kpi::before{content:"";position:absolute;inset:0 0 auto;height:60%;background:var(--sheen);pointer-events:none}
.kpi::after{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--acc,var(--brand));opacity:.85}
.kpi:hover{transform:translateY(-2px);box-shadow:var(--sh-2),var(--sh-glow)}
.kpi>*{position:relative}
.kpi .k{font-size:10.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.kpi .v{font-size:22px;font-weight:660;letter-spacing:-.025em;margin:7px 0 3px;line-height:1.12}
.kpi .d{font-size:12px;color:var(--ink-2);display:flex;align-items:center;gap:5px;flex-wrap:wrap;min-height:18px}
.up{color:var(--pos);font-weight:650}
.down{color:var(--neg);font-weight:650}
.kpi .spark{margin-top:9px;display:block}

/* ── charts ─────────────────────────────────────────────────────────── */
.charts{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,520px),1fr));gap:18px;margin-bottom:18px}
.legend{display:flex;gap:15px;flex-wrap:wrap;margin:0 0 11px;font-size:12px;color:var(--ink-2)}
.legend span{display:inline-flex;align-items:center;gap:6px}
.sw{width:11px;height:11px;border-radius:3px;flex:none;box-shadow:0 1px 2px rgba(0,0,0,.12)}
.sw.line{height:2.5px;border-radius:2px;width:15px;box-shadow:none}
figure{margin:0}
svg{display:block;width:100%;height:auto;overflow:visible}
.gl{stroke:var(--grid);stroke-width:1}
.ax{stroke:var(--axis);stroke-width:1}
.tick{fill:var(--muted);font-size:10.5px}
.dlab{fill:var(--ink-2);font-size:10.5px;font-weight:650;paint-order:stroke;stroke:var(--surface);stroke-width:3.5px}
.hit{fill:transparent;cursor:crosshair}
.cross{stroke:var(--axis);stroke-width:1;pointer-events:none}

.tip{
  position:fixed;z-index:80;pointer-events:none;opacity:0;transition:opacity .12s;
  background:var(--surface);border:1px solid var(--border);border-radius:12px;
  box-shadow:var(--sh-2);padding:10px 12px;font-size:12px;min-width:160px
}
.tip .th{font-weight:680;margin-bottom:7px;font-size:12px;color:var(--brand-ink)}
.tip .tr{display:flex;align-items:center;gap:8px;justify-content:space-between;margin-top:3px}
.tip .tn{display:flex;align-items:center;gap:6px;color:var(--ink-2)}
.tip .tv{font-variant-numeric:tabular-nums;font-weight:650}

/* ── tables ─────────────────────────────────────────────────────────── */
.tblwrap{
  overflow-x:auto;border-radius:var(--r);border:1px solid var(--border);
  background:var(--surface);box-shadow:var(--sh-2);margin-bottom:18px
}
table{border-collapse:separate;border-spacing:0;width:max-content;min-width:100%;
  font-variant-numeric:tabular-nums;font-size:12.5px}
th,td{padding:7px 12px;text-align:right;white-space:nowrap}
thead th{
  position:sticky;top:0;z-index:3;background:var(--surface-3);color:var(--ink-2);
  font-weight:650;font-size:11.5px;border-bottom:1px solid var(--border)
}
thead th.y{font-size:9.5px;letter-spacing:.07em;color:var(--brand-ink);text-transform:uppercase;
  padding-bottom:2px;border-bottom:0;font-weight:700}
th.lbl,td.lbl{
  position:sticky;left:0;z-index:2;background:var(--surface);text-align:left;
  min-width:200px;border-right:1px solid var(--border)
}
thead th.lbl{z-index:4;background:var(--surface-3)}
tbody tr:hover td,tbody tr:hover td.lbl{background:var(--surface-2)}
.l1 .lbl{padding-left:28px;color:var(--ink-2)}
.l2 .lbl{padding-left:46px;color:var(--muted)}
.tot td{font-weight:680;border-top:1px solid var(--axis);background:var(--surface)}
.tot:hover td{background:var(--surface-2)}
.gap td{height:9px;padding:0;border:0;background:var(--surface-2)}
td.tt{border-left:1px solid var(--border);font-weight:680;background:var(--surface-2)}
tbody tr:hover td.tt{background:var(--surface-3)}
.neg{color:var(--neg)}
.rent td{background:color-mix(in srgb,var(--s4) 10%,transparent)}
.rent:hover td{background:color-mix(in srgb,var(--s4) 17%,transparent)}
.est{color:var(--warn);font-weight:800;cursor:help}
/* เดือนพยากรณ์ — ต้องแยกออกจากข้อมูลจริงด้วยตาเปล่าทันที */
td.fc{background:color-mix(in srgb,var(--brand) 7%,transparent)}
tbody tr:hover td.fc{background:color-mix(in srgb,var(--brand) 13%,transparent)}
thead th.fc{background:color-mix(in srgb,var(--brand) 16%,var(--surface-3));font-style:italic}
.fcb{display:inline-block;font-size:9px;font-weight:800;color:#fff;background:var(--brand-deep);
  border-radius:4px;padding:0 3px;vertical-align:1px;letter-spacing:.02em}
.pt{font-size:10px;color:var(--warn);font-weight:700}

/* ช่องที่แก้ได้ */
td.edit{cursor:cell;position:relative}
td.edit:hover{box-shadow:inset 0 0 0 1.5px var(--brand-300);border-radius:5px}
td.edit.dirty{background:color-mix(in srgb,var(--brand) 15%,transparent)!important;font-weight:650}
td.edit.dirty::after{content:"✎";position:absolute;left:3px;top:3px;font-size:8px;color:var(--brand-deep);opacity:.75}
td.edit[contenteditable="true"]{
  outline:2px solid var(--brand);border-radius:5px;background:var(--surface)!important;
  box-shadow:var(--sh-glow)
}

/* ── summary table ──────────────────────────────────────────────────── */
#sum table{font-size:13px}
#sum tbody td{padding:9px 12px}
#sum .head td{font-weight:700;font-size:13.5px}
#sum .sub td{color:var(--ink-2)}
#sum .band td{background:linear-gradient(90deg,var(--brand-100),transparent 70%)}
#sum .rn{display:block;font-size:10.5px;line-height:1.35;color:var(--muted);font-weight:400}
#sum tbody tr.big td{font-size:14px;font-weight:700}

/* ── การ์ดลูกค้า ─────────────────────────────────────────────────────── */
.custgrid{display:grid;grid-template-columns:1fr;gap:20px;margin-top:16px}
.custgrid figure{margin:0}
.custgrid h4{margin:0 0 2px;font-size:13px;font-weight:660;color:var(--ink)}
.custgrid .cap{margin:0 0 10px;font-size:11.5px;color:var(--muted);line-height:1.6}
@media(min-width:1100px){.custgrid{grid-template-columns:1fr 1fr}
  .custgrid figure:first-child{grid-column:1/-1}}
.hcell{cursor:crosshair}
.hlab{fill:var(--ink-2);font-size:10.5px;font-weight:600}
.hscale{display:flex;align-items:center;gap:7px;font-size:11px;color:var(--ink-2)}
.hscale i{width:19px;height:11px;display:inline-block;border-radius:2px}



/* ── แท็บสรุป: ตารางความร้อนเทียบเป้า + แนวโน้ม + สาขาเด่น ───────────── */
.sumrow{display:grid;grid-template-columns:1fr;gap:18px;align-items:start}
@media(min-width:900px){.sumrow{grid-template-columns:minmax(0,.85fr) minmax(0,1.3fr) minmax(0,.95fr)}}
#chGauge svg{max-width:330px;margin:0 auto}
.hscale{display:flex;align-items:center;gap:3px;flex-wrap:wrap;margin:0 0 12px;font-size:11px;color:var(--ink-2)}
.hscale i{width:17px;height:11px;display:inline-block;border-radius:2px;flex:none}
.hscale span{margin:0 5px}
.hscale .dim{color:var(--muted)}
.movers{display:grid;grid-template-columns:1fr;gap:14px}
/* บนจอ: ตารางความร้อนขึ้นก่อน (เป็นพระเอก)
   ตอนพิมพ์: ใช้ลำดับตาม DOM คือแถวเกจ/เทรนด์/สาขาเด่นขึ้นก่อน แล้วตารางความร้อนกินที่ที่เหลือ
   ต้องกลับเป็น display:block ตอนพิมพ์ ไม่งั้น Chrome แบ่งหน้ากลาง flex container ไม่ได้
   แล้วจะดันทั้งบล็อกไปหน้า 2 ทิ้งหน้าแรกไว้แค่การ์ด KPI (เจอจริง 29 ส.ค. 2026) */
.panel[data-tab="sum"]{display:flex;flex-direction:column}
#heatcard{order:1}
.sumrow{order:2}
.mv h4{margin:0 0 6px;font-size:11px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--muted)}
.mvrow{display:flex;align-items:center;gap:8px;padding:3px 5px;border-radius:7px;cursor:pointer;font-size:12.5px}
.mvrow:hover{background:var(--surface-2)}
.mvrow i{width:9px;height:16px;border-radius:3px;flex:none}
.mvn{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--ink-2)}
.mvn b{color:var(--ink)}
.mvv{font-variant-numeric:tabular-nums;font-weight:680}
.mv.up .mvv{color:var(--pos)}
.mv.dn .mvv{color:var(--neg)}

/* ── scorecard ──────────────────────────────────────────────────────── */
.scoregrid{display:grid;grid-template-columns:1fr;gap:20px;margin-top:6px}
@media(min-width:1100px){.scoregrid{grid-template-columns:minmax(0,1fr) 300px}}
.weights{display:flex;flex-direction:column;gap:9px;padding:14px 16px;border-radius:var(--r-sm);
  background:var(--surface-2);border:1px solid var(--border)}
.weights h4{margin:0 0 4px;font-size:12px;font-weight:700;color:var(--ink-2)}
.weights label{display:grid;grid-template-columns:1fr 64px;gap:8px;align-items:center;font-size:12px;color:var(--ink-2)}
.weights label small{display:block;color:var(--muted);font-size:10.5px;line-height:1.35}
.weights input{width:64px;text-align:right;padding:5px 8px}
.weights .wsum{font-size:11.5px;color:var(--muted);margin-top:4px}
.weights .wsum.bad{color:var(--crit);font-weight:650}
.sbar{fill:var(--s1)}
.sbar.dim{opacity:.45}
.slab{fill:var(--ink);font-size:11px;font-weight:600}
.slab.me{fill:var(--brand-ink);font-weight:750}
.snum{fill:var(--ink-2);font-size:10.5px;font-weight:650}
.stype{fill:var(--muted);font-size:9.5px}
.srow{cursor:pointer}
.srow:hover .sbar{opacity:1;filter:brightness(1.08)}
.grade{display:inline-block;min-width:38px;text-align:center;padding:2px 8px;border-radius:8px;font-weight:750;font-size:12.5px;
  color:#fff;background:var(--muted)}
.grade.g5{background:var(--pos)} .grade.g4{background:#3aa66a} .grade.g3{background:var(--warn)} .grade.g2{background:#e2762c} .grade.g1{background:var(--crit)}
#score th.lbl,#score td.lbl{min-width:230px}
#score tbody tr.me td{background:color-mix(in srgb,var(--brand) 12%,transparent)}
#score tbody tr{cursor:pointer}
#score td .sub{display:block;font-size:10.5px;color:var(--muted);font-weight:500}
.dim{color:var(--muted)}
.mini{font-size:10.5px;color:var(--muted)}
.tag{display:inline-block;font-size:9.5px;font-weight:750;padding:0 5px;border-radius:5px;
  background:var(--surface-3);color:var(--ink-2);vertical-align:1px;margin-left:4px}
.tag.A{background:color-mix(in srgb,var(--s1) 18%,transparent);color:var(--brand-ink)}
.tag.B{background:color-mix(in srgb,var(--s3) 18%,transparent);color:var(--s3)}
.tag.C{background:color-mix(in srgb,var(--s4) 22%,transparent);color:#8a5a00}

/* ── assumptions ────────────────────────────────────────────────────── */
.asm{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px}
.asm label{display:flex;flex-direction:column;gap:5px;font-size:11.5px;color:var(--ink-2);font-weight:600}
.asm input{width:100%;text-align:right;font-variant-numeric:tabular-nums}
.asm input.dirty{border-color:var(--brand);background:color-mix(in srgb,var(--brand) 10%,var(--surface));font-weight:650}
.asmbar{display:flex;gap:9px;flex-wrap:wrap;align-items:center;margin-top:15px;
  padding-top:14px;border-top:1px solid var(--border)}

/* หัวเรื่องประจำหน้าเวลาพิมพ์ — บนจอไม่แสดง */
.printhead,.printsrc{display:none}

/* ── misc ───────────────────────────────────────────────────────────── */
.note{font-size:12px;color:var(--muted);line-height:1.8}
.note b{color:var(--ink-2)}
.pill{display:inline-block;padding:1.5px 9px;border-radius:20px;font-size:11px;font-weight:650;
  border:1px solid var(--border);color:var(--brand-ink);background:var(--brand-100)}
.bench{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:20px;margin-top:6px}
.bench .k{font-size:10.5px;color:var(--muted);font-weight:700;text-transform:uppercase;letter-spacing:.06em}
.bench .v{font-size:19px;font-weight:660;margin-top:4px;letter-spacing:-.02em}
footer{margin-top:28px;padding-top:16px;border-top:1px solid var(--border);color:var(--muted);font-size:12px}
.toolbar{display:flex;gap:9px;flex-wrap:wrap;align-items:center}
.wmrow{display:flex;gap:9px;flex-wrap:wrap;align-items:center;margin-top:13px;
  padding-top:13px;border-top:1px solid var(--border)}
.wmrow input[type=text]{flex:1;min-width:280px}
.sw-toggle{display:inline-flex;align-items:center;gap:8px;font-size:13px;color:var(--ink-2);cursor:pointer}
.sw-toggle input{accent-color:var(--brand);width:16px;height:16px;cursor:pointer}

@media(max-width:680px){
  .wrap{padding:0 12px 44px}
  .charts{grid-template-columns:1fr}
  .bar{gap:14px}
  .htxt h1{font-size:17px}
}


/* ── แท็บ ────────────────────────────────────────────────────────────
   ผู้ใช้ขอ 29 ส.ค. 2026: แยกหน้าสรุป / Scorecard / P&L / กราฟ ออกจากกัน
   แท็บที่ไม่ได้เปิดใช้ attribute hidden — ทำให้ตอนพิมพ์ไม่ติดออกไปด้วยโดยอัตโนมัติ */
.tabs{
  display:flex;gap:4px;flex-wrap:wrap;margin:0 0 18px;padding:4px;
  background:var(--surface-3);border:1px solid var(--border);border-radius:14px;box-shadow:var(--sh-1)
}
.tab{
  border:0;background:transparent;color:var(--ink-2);cursor:pointer;font:inherit;font-size:13.5px;font-weight:550;
  padding:9px 18px;border-radius:10px;transition:.16s;white-space:nowrap;display:inline-flex;align-items:center;gap:7px
}
.tab:hover{color:var(--brand-ink);background:color-mix(in srgb,var(--surface) 60%,transparent)}
.tab[aria-selected="true"]{
  background:var(--surface);color:var(--brand-ink);font-weight:680;
  box-shadow:0 1px 2px rgba(18,95,114,.10),0 3px 10px -2px rgba(46,174,202,.38)
}
.tab i{font-style:normal;opacity:.85}
.panel{animation:fade .18s ease-out}
@keyframes fade{from{opacity:0;transform:translateY(3px)}to{opacity:1;transform:none}}
@media(max-width:680px){.tab{padding:8px 12px;font-size:12.5px}}

/* ═══ ลายน้ำ + หน้าพิมพ์ ═══════════════════════════════════════════════ */
/* ลายน้ำเป็น "กระเบื้อง" background ไม่ใช่ span วางตำแหน่ง
   เหตุผล: fixed จะขึ้นแค่หน้าแรกตอนพิมพ์ ส่วน absolute ที่กำหนดความสูงเป็น px
   จะยาวเกินเนื้อหาจนเกิดหน้าเปล่าท้ายไฟล์ — แบบกระเบื้องพอดีกับเนื้อหาเสมอ
   และปูซ้ำเองทุกหน้าของ PDF */
body{position:relative}
#wm{
  position:absolute;inset:0;z-index:5;pointer-events:none;display:none;
  background-image:var(--wm-img);background-repeat:repeat;background-position:center top
}
body.wm #wm{display:block}

/* โหมด "ส่งออกทุกแท็บ" — เปิดทุก panel ชั่วคราวตอนพิมพ์
   ต้องมี body.printall นำหน้าเพื่อให้ specificity ชนะ [hidden]{display:none!important} */
body.printall .panel[hidden]{display:block!important}

@media print{
  @page{size:A4 landscape;margin:10mm 8mm 12mm}
  /* html/body ต้องเป็น height:auto ไม่งั้นความสูงที่ค้างจากหน้าจอทำให้เกิดหน้าเปล่าท้ายไฟล์ */
  html,body{height:auto!important;min-height:0!important;overflow:visible!important}
  body{background:#fff!important;background-image:none!important;font-size:9.5pt}
  .wrap{max-width:none;padding:0;overflow:visible}
  /* .tip เป็น position:fixed opacity:0 — ยังกินพื้นที่ตอนพิมพ์ ทำให้เกิดหน้าเปล่าท้ายไฟล์
     (ไล่เจอด้วยการวัด bottom ของทุก element เทียบความสูงหน้า 188mm) */
  .bar,#theme,.toolbar,.asmbar,.wmrow,.noprint,footer,header,.tip{display:none!important}
  .card,.kpi,.tblwrap{
    box-shadow:none!important;border:1px solid #cfe3e9!important;
    break-inside:avoid;page-break-inside:avoid;margin-bottom:6px
  }
  .card::before,.kpi::before{display:none}
  .panel{animation:none}

  /* ── KPI: ขึ้นเฉพาะหน้าสรุป ────────────────────────────────────────
     หน้าอื่นต้องเป็น "หนึ่งตาราง หนึ่งหน้า" ห้ามมีอะไรติดมาด้วย */
  .kpis{display:none!important}
  body[data-tab="sum"]:not(.printall) .kpis,body.printall .kpis{
    display:grid!important;grid-template-columns:repeat(7,1fr);gap:5px;margin-bottom:7px
  }
  .kpi{padding:7px 9px}
  .kpi{padding:5px 8px}
  .kpi .k{font-size:6pt}
  .kpi .v{font-size:11pt;margin:3px 0 1px}
  .kpi .d{font-size:6pt;min-height:0}
  .kpi .spark{display:none}
  .charts{grid-template-columns:1fr 1fr;gap:7px}

  /* ── หนึ่งแท็บ หนึ่งหน้า ───────────────────────────────────────────
     ตอนส่งออกทีละแท็บ ไม่ต้องมี break เลย (แท็บอื่นถูกซ่อนอยู่แล้ว)
     ตอน "ส่งออกทุกแท็บ" ให้ขึ้นหน้าใหม่ทุกแท็บ ยกเว้นแท็บแรก */
  body.printall .panel+.panel{break-before:page;page-break-before:always}
  #sumcard,#plcard,#scorecard{padding:0;border:0!important;break-after:avoid}
  #sum,#pltbl,#scoretbl{break-before:avoid;break-inside:auto}
  #sumcard>h2,#plcard>h2,#scorecard>h2,#sumcard>.cap,#plcard>.cap,#scorecard>.cap{display:none}
  .scoregrid{grid-template-columns:1fr}
  /* แท็บสรุปต้องลงหน้าเดียว: 2 คอลัมน์เสมอ และคุมความสูงตารางความร้อน */
  /* ตอนพิมพ์ ยกแถวเกจ/เทรนด์/สาขาเด่นขึ้นบน แล้วให้ตารางความร้อนกินที่ที่เหลือ */
  .panel[data-tab="sum"]{display:block}
  .sumrow{grid-template-columns:.85fr 1.3fr .95fr;gap:6px;break-inside:avoid}
  /* สาขาเด่น/ต้องดู วางสองคอลัมน์ตอนพิมพ์ ไม่งั้นการ์ดสูงจนดันตารางความร้อนตกหน้า */
  .movers{grid-template-columns:1fr 1fr;gap:5px}
  .mvrow{line-height:1.28}
  .mvrow i{width:6px;height:11px}
  #heatcard,.sumrow .card{padding:7px 9px}
  #heatcard{margin-bottom:6px}
  /* หน้าสรุปต้องลงหน้าเดียว: heatmap + แถวล่างรวมกันต้องไม่เกินความสูงหน้า
     ตัวเลขพวกนี้จูนจากการพิมพ์จริง 31 สาขา × 19 เดือน — แก้แล้วต้องพิมพ์ทดสอบใหม่ */
  /* ห้ามใส่ max-height ให้ตารางความร้อน — จะโดน letterbox เหลือขอบข้างว่าง
     ความสูงคุมจาก viewBox ใน heatTarget() (โหมดพิมพ์ใช้แถวเตี้ยกว่า) */
  #chTrend svg{max-height:25mm}
  #chGauge svg{max-height:25mm}
  .sumrow .card>h2{font-size:7.5pt}
  .sumrow .card>.cap{font-size:5.8pt;margin-bottom:3px}
  #heatcard>.cap{font-size:5.9pt;margin-bottom:4px}
  #fccard{display:none!important}
  .hscale{font-size:6.5pt;margin-bottom:6px}
  .hscale i{width:12px;height:8px}
  .movers{gap:7px}
  .mvrow{font-size:7pt;padding:1px 3px}
  .mv h4{font-size:6.5pt;margin-bottom:2px}
  .card>h2{font-size:8.5pt}
  .card>.cap{font-size:6.4pt;margin-bottom:5px;line-height:1.45}
  #chScore svg{max-height:118mm}
  #scoretbl{break-before:page}

  .printhead{
    display:flex!important;align-items:center;gap:10px;
    padding:0 0 5px;margin:0 0 6px;border-bottom:1.5px solid #2eaeca
  }
  .printhead img{height:24px;width:auto}
  .printhead .pt1{font-size:11pt;font-weight:700;color:#125f72;line-height:1.25}
  .printhead .pt2{font-size:7.5pt;color:#456a73;line-height:1.3}
  .printhead .pu{margin-left:auto;padding-right:2px;text-align:right;font-size:7.5pt;color:#456a73;white-space:nowrap}
  .printhead .pu b{display:block;font-size:8.5pt;color:#125f72}
  .printsrc{display:block!important;margin:5px 0 0;font-size:6.8pt;color:#7d99a1;line-height:1.5}

  /* ── ทำให้ตารางกว้าง 19-20 คอลัมน์ลงหน้า A4 แนวนอนได้ ─────────────── */
  .tblwrap{overflow:visible!important}
  table{width:100%!important;table-layout:fixed;font-size:7pt}
  th,td{padding:2px 3px!important;overflow:hidden;text-overflow:ellipsis}
  th.lbl,td.lbl{position:static!important;min-width:0;width:118px;white-space:normal;line-height:1.25}
  #sum th.lbl,#sum td.lbl{width:150px}
  /* table-layout:fixed แบ่งคอลัมน์เท่ากันหมด แต่ยอดรวมช่วงตัวเลขยาวกว่าเดือน ต้องกว้างกว่า */
  thead th.tt{width:56px}
  #sum tbody td{padding:1.5px 3px!important}
  /* ตัวเลขในตารางสรุปต้องเป็น pt ทุกบรรทัด — เคยลืม .head/.big ที่กำหนดเป็น px
     ทำให้แถวยอดขายตัวโตจนเลขโดนตัดเป็น "16,..." */
  #sum table,#sum tbody td,#sum .head td,#sum tbody tr.big td{font-size:7pt}
  #sum .rn{display:none!important}
  /* ▲ (เป้าประมาณ) กินความกว้างจนเลขโดนตัด — ย้ายไปบอกในบรรทัดที่มา */
  .est{display:none!important}
  #score table{font-size:7.5pt}
  #score td .sub{font-size:6pt}
  #score th.lbl,#score td.lbl{width:150px}
  .weights{display:none!important}
  .l1 .lbl{padding-left:9px!important}
  .l2 .lbl{padding-left:17px!important}
  thead th{position:static!important;background:#eaf6fa!important;font-size:6.6pt;-webkit-print-color-adjust:exact;print-color-adjust:exact}
  thead th.y{font-size:5.8pt}
  td.tt,thead th.tt{background:#e7f4f8!important;-webkit-print-color-adjust:exact;print-color-adjust:exact}
  .rent td{background:#fdf4e0!important;-webkit-print-color-adjust:exact;print-color-adjust:exact}
  #sum .band td{background:#e6f5fa!important;-webkit-print-color-adjust:exact;print-color-adjust:exact}
  .grade{-webkit-print-color-adjust:exact;print-color-adjust:exact}
  .gap td{height:4px}
  .pill{display:none}

  body.wm-print #wm{display:block!important;-webkit-print-color-adjust:exact;print-color-adjust:exact}
  a[href]:after{content:""}
}