/* Components - cards, badges, segment cards, bars, tables, matrix, sparklines, class aliases
   Extracted from the original single-file index.html - rules and order unchanged. */

/* CARDS */
.card{background:var(--card);border:1px solid var(--border);border-radius:10px;padding:16px;box-shadow:0 1px 3px rgba(0,0,0,.04);}
.card-title{font-size:13px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--muted);margin-bottom:12px;display:flex;align-items:center;justify-content:space-between;}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:14px;}
.row3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:14px;}
.row4{display:grid;grid-template-columns:1fr 1fr 1fr 1fr;gap:14px;}
/* BADGE */
.badge{font-size:12px;padding:2px 7px;border-radius:20px;font-weight:700;text-transform:none;letter-spacing:0;}
.badge-blue{background:#dbeafe;color:#2563eb;}.badge-green{background:#dcfce7;color:#16a34a;}
.badge-amber{background:#fef3c7;color:#b45309;}.badge-red{background:#fee2e2;color:#dc2626;}
.badge-purple{background:#ede9fe;color:#7c3aed;}
/* SEGMENT CARDS */
.seg-cards{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;}
.seg-card{background:var(--card);border:1.5px solid var(--border);border-radius:10px;padding:14px;position:relative;overflow:hidden;transition:box-shadow .15s;}
.seg-card:hover{box-shadow:0 4px 12px rgba(0,0,0,.08);}
.seg-card::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;border-radius:10px 10px 0 0;}
.seg-card.s::before{background:#22c55e;}.seg-card.o::before{background:#f59e0b;}
.seg-card.g::before{background:#4f8ef7;}.seg-card.r::before{background:#ef4444;}
.seg-hdr{display:flex;align-items:center;gap:8px;margin-bottom:10px;}
.seg-icon{width:28px;height:28px;border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:17px;}
.seg-icon.s{background:#dcfce7;}.seg-icon.o{background:#fef3c7;}.seg-icon.g{background:#dbeafe;}.seg-icon.r{background:#fee2e2;}
.seg-label{font-size:14px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;}
.seg-label.s{color:#22c55e;}.seg-label.o{color:#f59e0b;}.seg-label.g{color:#4f8ef7;}.seg-label.r{color:#ef4444;}
.seg-count{font-size:28px;font-weight:800;color:var(--text);line-height:1;margin-bottom:2px;}
.seg-count-lbl{font-size:13px;color:var(--muted);margin-bottom:10px;}
.seg-metrics{display:flex;gap:16px;padding-top:10px;border-top:1px solid var(--border);}
.seg-metric{display:flex;flex-direction:column;gap:1px;}
.seg-metric-lbl{font-size:12px;color:var(--muted);font-weight:600;}
.seg-metric-val{font-size:15px;font-weight:700;color:var(--text);}
.seg-metric-sub{font-size:13px;font-weight:600;}
/* TOTALS BAR */
.seg-totals{background:var(--card);border:1px solid var(--border);border-radius:10px;padding:14px 20px;display:flex;align-items:center;box-shadow:0 1px 3px rgba(0,0,0,.04);}
.seg-total-item{display:flex;flex-direction:column;align-items:center;gap:2px;flex:1;border-right:1px solid var(--border);}
.seg-total-item:last-child{border-right:none;}
.seg-total-lbl{font-size:12px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.07em;}
.seg-total-val{font-size:20px;font-weight:800;color:var(--text);}
.seg-total-unit{font-size:13px;color:var(--muted);margin-left:2px;}
.seg-total-icon{font-size:21px;margin-top:2px;}
/* BAR CHART */
.bar-chart{display:flex;flex-direction:column;gap:7px;}
.bar-row{display:flex;align-items:center;gap:9px;}
.bar-lbl{width:110px;font-size:13px;color:var(--muted);flex-shrink:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.bar-track{flex:1;height:7px;background:#f0f2f7;border-radius:4px;overflow:hidden;}
.bar-fill{height:100%;border-radius:4px;transition:width .5s ease;}
.bar-val{width:58px;font-size:13px;font-weight:700;color:var(--text);text-align:right;}
.bar-pct{width:38px;font-size:13px;text-align:right;}
/* COMPARISON BAR */
.cbar-group{display:flex;flex-direction:column;gap:12px;}
.cbar-item{display:flex;flex-direction:column;gap:4px;}
.cbar-label{font-size:14px;font-weight:600;color:var(--text);}
.cbar-rows{display:flex;flex-direction:column;gap:3px;}
.cbar-row{display:flex;align-items:center;gap:8px;}
.cbar-period{font-size:12px;color:var(--muted);width:14px;}
.cbar-track{flex:1;height:12px;background:#f0f2f7;border-radius:3px;overflow:hidden;}
.cbar-fill{height:100%;border-radius:3px;}
.cbar-val{font-size:13px;font-weight:700;color:var(--text);width:70px;text-align:right;}
.cbar-delta{font-size:13px;font-weight:700;}
.cbar-delta.up{color:#22c55e;}.cbar-delta.dn{color:#ef4444;}
/* TABLE */
.tbl{width:100%;border-collapse:collapse;}
.tbl th{padding:8px 10px;text-align:left;font-size:12px;font-weight:700;color:var(--muted);letter-spacing:.06em;text-transform:uppercase;border-bottom:1.5px solid var(--border);}
.tbl td{padding:9px 10px;font-size:14px;color:var(--muted);border-bottom:1px solid #f4f6fb;vertical-align:middle;}
.tbl tr:last-child td{border-bottom:none;}
/* Numeric columns are right-aligned so digits line up down the column — applied by
   alignNumericCols() in render.js, which decides per column from the rendered text.
   Not scoped to .tbl: the cust×prod matrix and the drill modal build their own tables. */
th.num,td.num{text-align:right;}
.tbl tr:hover td{background:#fafbfd;}
.tbl .bold{font-weight:700;color:var(--text);}
.tbl .mono{font-family:var(--font-mono);font-size:15px;}
.mpill{display:inline-block;padding:2px 8px;border-radius:20px;font-size:13px;font-weight:700;}
.m-hi{background:#dcfce7;color:#16a34a;}.m-med{background:#dbeafe;color:#1d4ed8;}.m-low{background:#fee2e2;color:#dc2626;}
/* MIGRATION MATRIX */
.mat-tbl{width:100%;border-collapse:collapse;}
.mat-tbl th{padding:8px 10px;text-align:center;font-size:13px;font-weight:700;color:var(--muted);border-bottom:1.5px solid var(--border);}
.mat-tbl th:first-child{text-align:left;}
.mat-tbl td{padding:7px 10px;font-size:14px;text-align:center;border-bottom:1px solid #f0f2f7;vertical-align:middle;}
.mat-tbl td:first-child{text-align:left;font-weight:600;}
.mat-tbl tr:last-child td{border-bottom:none;color:var(--muted);font-size:15px;}
.mat-cell{display:inline-flex;align-items:center;justify-content:center;min-width:32px;height:26px;border-radius:5px;font-weight:700;font-size:14px;}
.mat-cell.diag{background:#dcfce7;color:#16a34a;}.mat-cell.move{background:#fef9c3;color:#b45309;}.mat-cell.empty{color:var(--muted);}.mat-cell.total{color:var(--muted);font-weight:600;}
/* MOVEMENTS */
.move-list{display:flex;flex-direction:column;gap:8px;}
.move-item{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:8px;background:#f8fafc;border:1px solid var(--border);}
.move-icon{font-size:18px;flex-shrink:0;}
.move-info{flex:1;}
.move-from-to{font-size:14px;font-weight:600;color:var(--text);}
.move-count{font-size:13px;color:var(--muted);}
/* BUBBLE TOOLTIP — hover detail for the five bubble charts (drill.js) */
.bubble-tip{position:fixed;z-index:10000;display:none;pointer-events:none;
  min-width:190px;max-width:280px;padding:9px 11px;border-radius:9px;
  background:var(--card);border:1px solid var(--border);
  box-shadow:0 10px 28px rgba(0,0,0,.22);font-size:12px;color:var(--muted);}
.bubble-tip .bt-h{font-weight:700;color:var(--text);font-size:12px;line-height:1.4;
  margin-bottom:6px;padding-bottom:5px;border-bottom:1px solid var(--border);
  word-break:break-word;}
.bubble-tip .bt-r{display:flex;justify-content:space-between;gap:14px;line-height:1.7;}
.bubble-tip .bt-r b{color:var(--text);font-variant-numeric:tabular-nums;}
.bubble-tip .bt-f{margin-top:6px;padding-top:5px;border-top:1px dashed var(--border);
  font-size:11px;color:var(--accent);}

/* SPARK */
.sparkline{display:flex;align-items:flex-end;gap:2px;height:22px;}
.spark-bar{width:4px;border-radius:2px 2px 0 0;opacity:.8;}
/* SCROLLBAR */
::-webkit-scrollbar{width:5px;height:5px;}
::-webkit-scrollbar-track{background:transparent;}
::-webkit-scrollbar-thumb{background:#dde1ea;border-radius:3px;}
/* PLACEHOLDER */
.ph-panel{display:none;flex:1;overflow-y:auto;padding:24px;flex-direction:column;gap:14px;background:var(--bg);}
.ph-panel.active{display:flex;}
.ph-hero{display:flex;flex-direction:column;align-items:center;justify-content:center;flex:1;text-align:center;gap:14px;min-height:360px;}
.ph-icon{font-size:52px;}.ph-title{font-size:20px;font-weight:800;color:var(--text);}
.ph-desc{font-size:15px;color:var(--muted);max-width:400px;line-height:1.7;}
.ph-chips{display:flex;flex-wrap:wrap;gap:7px;justify-content:center;margin-top:6px;}
.ph-chip{padding:4px 12px;border-radius:20px;border:1px solid var(--border);background:#fff;color:var(--muted);font-size:13px;font-weight:600;}
.coming-badge{display:inline-flex;align-items:center;gap:5px;padding:4px 12px;border-radius:20px;background:#dbeafe;border:1px solid #bfdbfe;color:#2563eb;font-size:13px;font-weight:700;}
@media(max-width:900px){.row2,.row3,.row4{grid-template-columns:1fr;}.seg-cards{grid-template-columns:1fr 1fr;}}

/* ── ALIASES: new shorthand classes used in HTML ── */
/* tab panels */
.tp{display:none;flex-direction:column;gap:14px;}
.tp.on,.tp.active{display:flex;}
/* bar chart shorthand */
.bc{display:flex;flex-direction:column;gap:7px;}
.br2{display:flex;align-items:center;gap:9px;}
.bl{width:110px;font-size:13px;color:var(--muted);flex-shrink:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.bt{flex:1;height:7px;background:#eef0f5;border-radius:4px;overflow:hidden;}
.bf{height:100%;border-radius:4px;transition:width .5s ease;}
.bv{width:58px;font-size:13px;font-weight:700;color:var(--text);text-align:right;}
.bp{width:38px;font-size:13px;text-align:right;}
/* comparison bar container = column, rows = flex-row via direct child selector */
.cbg{display:flex;flex-direction:column;gap:14px;}
.cbi{display:flex;flex-direction:column;gap:5px;}
.cbl{font-size:14px;font-weight:600;color:var(--text);}
.cbr{display:flex;flex-direction:column;gap:4px;}
.cbr>div,.cbr>span{display:flex;align-items:center;gap:8px;}
.cbp{font-size:12px;color:var(--muted);width:14px;flex-shrink:0;}
.cbt{flex:1;height:12px;background:#eef0f5;border-radius:3px;overflow:hidden;}
.cbf{height:100%;border-radius:3px;}
.cbv{font-size:13px;font-weight:700;color:var(--text);width:68px;text-align:right;flex-shrink:0;}
.cbd{font-size:13px;font-weight:700;flex-shrink:0;}
.cbd.up{color:#22c55e;}.cbd.dn{color:#ef4444;}
/* segment card shorthand */
.sc{background:var(--card);border:1.5px solid var(--border);border-radius:10px;padding:14px;position:relative;overflow:hidden;transition:box-shadow .15s;}
.sc:hover{box-shadow:0 4px 12px rgba(0,0,0,.08);}
.sc::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;border-radius:10px 10px 0 0;}
.sc.s::before{background:#22c55e;}.sc.o::before{background:#f59e0b;}
.sc.g::before{background:#4f8ef7;}.sc.r::before{background:#ef4444;}
.sc-hdr{display:flex;align-items:center;gap:8px;margin-bottom:10px;}
.sc-ico{width:28px;height:28px;border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:17px;}
.sc-ico.s{background:#dcfce7;}.sc-ico.o{background:#fef3c7;}.sc-ico.g{background:#dbeafe;}.sc-ico.r{background:#fee2e2;}
.sc-lbl{font-size:14px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;}
.sc-lbl.s{color:#22c55e;}.sc-lbl.o{color:#f59e0b;}.sc-lbl.g{color:#4f8ef7;}.sc-lbl.r{color:#ef4444;}
.sc-n{font-size:28px;font-weight:800;color:var(--text);line-height:1;margin-bottom:2px;}
.sc-nl{font-size:13px;color:var(--muted);margin-bottom:10px;}
.sc-m{display:flex;gap:16px;padding-top:10px;border-top:1px solid var(--border);}
.sc-mi{display:flex;flex-direction:column;gap:1px;}
.sc-ml{font-size:12px;color:var(--muted);font-weight:600;}
.sc-mv{font-size:15px;font-weight:700;color:var(--text);}
.sc-ms{font-size:13px;font-weight:600;}
.scards{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;}
/* totals strip shorthand */
.tots{background:var(--card);border:1px solid var(--border);border-radius:10px;padding:14px 20px;display:flex;align-items:center;box-shadow:0 1px 3px rgba(0,0,0,.04);}
.tot{display:flex;flex-direction:column;align-items:center;gap:2px;flex:1;border-right:1px solid var(--border);}
.tot:last-child{border-right:none;}
.tot-l{font-size:12px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.07em;}
.tot-v{font-size:20px;font-weight:800;color:var(--text);}
.tot-u{font-size:13px;color:var(--muted);}
.tot-i{font-size:20px;margin-top:1px;}
/* migration matrix shorthand */
.mt{width:100%;border-collapse:collapse;}
.mt th{padding:8px 10px;text-align:center;font-size:13px;font-weight:700;color:var(--muted);border-bottom:1.5px solid var(--border);}
.mt th:first-child{text-align:left;}
.mt td{padding:7px 10px;font-size:14px;text-align:center;border-bottom:1px solid #f2f4f9;vertical-align:middle;}
.mt td:first-child{text-align:left;font-weight:600;}
.mt tr:last-child td{border-bottom:none;font-size:13px;color:var(--muted);}
.mc{display:inline-flex;align-items:center;justify-content:center;min-width:32px;height:26px;border-radius:5px;font-weight:700;font-size:14px;}
.mc.diag,.mc.d{background:#dcfce7;color:#16a34a;}
.mc.move,.mc.m{background:#fef9c3;color:#b45309;}
.mc.total,.mc.t{color:var(--muted);font-weight:600;}
/* movement shorthand */
.mvl{display:flex;flex-direction:column;gap:8px;}
.mvi{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:8px;background:#f8fafc;border:1px solid var(--border);}
.mvi-ic{font-size:18px;flex-shrink:0;}
.mvi-ft{font-size:14px;font-weight:600;color:var(--text);}
.mvi-ct{font-size:13px;color:var(--muted);}
/* badge shorthand */
.badge.bg,.badge-green{background:#dcfce7;color:#16a34a;}
.badge.bb,.badge-blue{background:#dbeafe;color:#2563eb;}
.badge.ba,.badge-amber{background:#fef3c7;color:#b45309;}
.badge.br,.badge-red{background:#fee2e2;color:#dc2626;}
.badge.bpu,.badge-purple{background:#ede9fe;color:#7c3aed;}
/* mpill shorthand */
.mp,.mpill{display:inline-block;padding:2px 8px;border-radius:20px;font-size:13px;font-weight:700;}
.mp.mh,.m-hi{background:#dcfce7;color:#16a34a;}
.mp.mm,.m-med{background:#dbeafe;color:#1d4ed8;}
.mp.ml,.m-low{background:#fee2e2;color:#dc2626;}
/* card title shorthand */
.ct{font-size:13px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--muted);margin-bottom:12px;display:flex;align-items:center;justify-content:space-between;}
/* heatmap */
.hm{display:grid;grid-template-columns:repeat(8,1fr);gap:3px;}
.hc{aspect-ratio:1;border-radius:3px;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;color:rgba(255,255,255,.9);cursor:pointer;}
/* spark shorthand */
.sb{width:4px;border-radius:2px 2px 0 0;opacity:.8;}
/* bold/mono inside tables */
.bold{font-weight:700;color:var(--text);}
.mono{font-family:var(--font-mono);font-size:15px;}

/* ── ENTITY CELL ──────────────────────────────────────────────────────────── */
/* Cube rows are grouped by code, but a code alone means nothing to a reader —
   tables show the code with the real name underneath. */
.ent{min-width:0;}
.ent-code{font-weight:700;color:var(--text);line-height:1.25;}
.ent-name{font-size:11px;font-weight:400;color:var(--muted);line-height:1.3;margin-top:1px;
  max-width:230px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}

/* Drill modal: back link + clickable rows */
.drill-back{font-size:12px;font-weight:600;color:var(--accent);cursor:pointer;margin-right:6px;}
.drill-back:hover{text-decoration:underline;}
#drillTbody tr[onclick]:hover,#drillTbody tr[style*="cursor"]:hover{background:rgba(79,142,247,.07);}
/* Sortable headers + the search box above the table */
#drillThead th:hover{color:var(--accent);}
#drillThead th:hover .drill-sort-ind{opacity:1;}
#drillSearch:focus{border-color:var(--accent);}
#drillSearch::placeholder{color:var(--muted);opacity:.7;}
/* Clickable bar rows open the drill modal */
.br2-click{cursor:pointer;border-radius:6px;transition:background .12s;}
.br2-click:hover{background:rgba(79,142,247,.08);}

/* Panel titles that open the full data behind the panel */
.ct-click,.card-title.ct-click{cursor:pointer;}
.ct-click:hover{color:var(--accent);}
.ct-more{font-size:11px;font-weight:600;color:var(--accent);margin-left:8px;opacity:.75;
  text-transform:none;letter-spacing:0;white-space:nowrap;}
.ct-click:hover .ct-more{opacity:1;}

/* ── Executive Summary ──────────────────────────────────────────────────────
   The infographic cards each group's exec sub-tab is built from. Everything is
   plain HTML plus one inline SVG donut — deliberately no canvas, so the cards
   need no redraw on resize and no hit registry, and they scale by themselves.
   Colours come from the theme variables so all six themes work.            */
.exec-head{margin-bottom:14px;}
.exec-head .exec-h1{font-size:17px;font-weight:800;color:var(--text);
  display:flex;align-items:center;gap:8px;}
.exec-head .exec-sub{font-size:12px;color:var(--muted);margin-top:4px;line-height:1.55;}

.exec-card{height:100%;display:flex;flex-direction:column;}
/* The title wraps rather than being clipped: a card is only a quarter of the row wide and
   it shares that line with the traffic light and the "ดูทั้งหมด ›" affordance, so nowrap
   ate the end of every title ("ยอดบิล vs เงินสดเข้า" → "ยอดบิล VS"). */
.exec-card .ct{margin-bottom:10px;gap:6px 8px;flex-wrap:wrap;align-items:flex-start;}
.exec-card .ct .exec-t{flex:1 1 60%;min-width:0;line-height:1.4;white-space:normal;}
/* when the title wraps, the "ดูทั้งหมด ›" link drops to its own line — keep it under the
   badge on the right rather than trailing the title, where it reads as part of it */
.exec-card .ct .ct-more{margin-left:auto;}
.exec-light{display:inline-flex;align-items:center;gap:5px;flex:0 0 auto;
  text-transform:none;letter-spacing:0;font-size:11px;font-weight:700;
  padding:3px 9px;border-radius:999px;}
.exec-light .exec-dot{width:7px;height:7px;border-radius:50%;flex:0 0 auto;}

/* labelled value bars — "AR 668.5 / AP 307" in the reference */
.exec-bars{display:flex;flex-direction:column;gap:9px;}
.exec-bar-l{font-size:11px;color:var(--muted);margin-bottom:3px;}
.exec-bar-row{display:flex;align-items:center;gap:8px;}
.exec-track{flex:1 1 auto;min-width:0;height:15px;border-radius:5px;
  background:color-mix(in srgb,var(--muted) 14%,transparent);overflow:hidden;}
.exec-fill{height:100%;border-radius:5px;transition:width .35s ease;}
.exec-bar-v{flex:0 0 auto;font-size:12px;font-weight:800;white-space:nowrap;}

/* two-part stacked share bar — "37% / 63%" in the reference */
.exec-split{display:flex;height:20px;border-radius:5px;overflow:hidden;
  background:color-mix(in srgb,var(--muted) 14%,transparent);}
.exec-split span{display:flex;align-items:center;justify-content:center;
  font-size:10px;font-weight:800;color:#fff;min-width:0;overflow:hidden;
  transition:width .35s ease;}

/* donut gauges */
.exec-gauges{display:flex;justify-content:space-around;align-items:flex-start;
  gap:10px;flex-wrap:wrap;}
.exec-gauge{text-align:center;min-width:74px;}
.exec-gauge svg{display:block;margin:0 auto;}
.exec-gauge-cap{font-size:10px;color:var(--muted);margin-top:3px;line-height:1.35;}
.exec-gauge-v{font-size:14px;font-weight:800;}

/* a big single figure, when a card has one number worth reading first */
.exec-stat{display:flex;align-items:baseline;gap:6px;}
.exec-stat-v{font-size:25px;font-weight:800;line-height:1.1;}
.exec-stat-u{font-size:12px;font-weight:700;color:var(--muted);}
.exec-stat-cap{font-size:11px;color:var(--muted);margin-top:2px;}

/* the interpretation sentence under each card's visual */
.exec-note{font-size:11.5px;color:var(--muted);line-height:1.65;margin-top:11px;
  padding-top:10px;border-top:1px solid var(--border);}
.exec-note b{color:var(--text);}

/* recommendations */
.exec-advice{display:flex;flex-direction:column;gap:9px;}
.exec-adv{display:flex;gap:9px;align-items:flex-start;font-size:12.5px;
  color:var(--text);line-height:1.6;padding:9px 12px;border-radius:8px;
  border-left:3px solid var(--border);
  background:color-mix(in srgb,var(--muted) 6%,transparent);}
.exec-adv-i{flex:0 0 auto;font-size:13px;line-height:1.5;}
.exec-adv b{font-weight:800;}

/* ── AI assistant ───────────────────────────────────────────────────────────
   One floating panel for all 49 tabs (see js/core/ai.js for why it is not a card
   per tab). Fixed-position, so its place in source order does not matter.      */
#aiLaunch{position:fixed;right:20px;bottom:20px;z-index:1400;display:flex;
  align-items:center;gap:8px;padding:11px 17px;border:none;border-radius:999px;
  background:var(--accent);color:#fff;font-family:inherit;font-size:13px;
  font-weight:700;cursor:pointer;box-shadow:0 6px 20px rgba(0,0,0,.22);
  transition:transform .15s,box-shadow .15s;}
#aiLaunch:hover{transform:translateY(-2px);box-shadow:0 9px 26px rgba(0,0,0,.28);}
#aiLaunch .ai-l-i{font-size:16px;line-height:1;}

#aiPanel{position:fixed;top:0;right:0;bottom:0;width:430px;max-width:92vw;z-index:1401;
  display:flex;flex-direction:column;background:var(--surface);
  border-left:1px solid var(--border);box-shadow:-8px 0 28px rgba(0,0,0,.18);
  transform:translateX(100%);transition:transform .22s ease;visibility:hidden;}
#aiPanel.on{transform:translateX(0);visibility:visible;}

.ai-head{flex:0 0 auto;padding:13px 15px;border-bottom:1px solid var(--border);
  display:flex;align-items:flex-start;gap:10px;}
.ai-head-t{flex:1 1 auto;min-width:0;}
.ai-h1{font-size:13px;font-weight:800;color:var(--text);display:flex;align-items:center;gap:7px;}
.ai-h1 .ai-tab{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.ai-h2{font-size:10.5px;color:var(--muted);margin-top:3px;line-height:1.45;}
.ai-x{flex:0 0 auto;width:26px;height:26px;border:none;border-radius:7px;cursor:pointer;
  background:transparent;color:var(--muted);font-size:17px;line-height:1;font-family:inherit;}
.ai-x:hover{background:color-mix(in srgb,var(--muted) 14%,transparent);color:var(--text);}
#aiStubBadge{display:none;}

.ai-body{flex:1 1 auto;min-height:0;overflow-y:auto;padding:13px 15px;
  display:flex;flex-direction:column;gap:9px;}
.ai-empty{margin:auto 0;text-align:center;color:var(--muted);font-size:12px;line-height:1.6;}
.ai-empty-i{font-size:30px;margin-bottom:8px;}
.ai-empty-s{font-size:11px;margin-top:6px;}

.ai-turn{display:flex;}
.ai-ask{justify-content:flex-end;}
.ai-ans{justify-content:flex-start;}
.ai-bubble-q{max-width:82%;background:var(--accent);color:#fff;font-size:13px;line-height:1.55;
  padding:9px 13px;border-radius:12px 12px 2px 12px;white-space:pre-wrap;word-break:break-word;}
.ai-bubble-a{width:100%;background:color-mix(in srgb,var(--muted) 8%,transparent);
  border:1px solid var(--border);border-radius:12px 12px 12px 2px;padding:10px 12px;}
.ai-bubble-w,.ai-bubble-e{display:flex;align-items:center;gap:8px;font-size:12px;
  padding:9px 13px;border-radius:12px 12px 12px 2px;}
.ai-bubble-w{background:color-mix(in srgb,var(--muted) 10%,transparent);color:var(--muted);}
.ai-bubble-e{background:rgba(239,68,68,.1);color:#ef4444;}
.ai-frame{width:100%;border:none;display:block;min-height:40px;}
.ai-spin{width:13px;height:13px;flex:0 0 auto;border-radius:50%;
  border:2px solid color-mix(in srgb,var(--muted) 30%,transparent);
  border-top-color:var(--accent);animation:ai-sp .7s linear infinite;}
@keyframes ai-sp{to{transform:rotate(360deg)}}

.ai-foot{flex:0 0 auto;padding:11px 15px 13px;border-top:1px solid var(--border);}
#aiChips{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:9px;}
.ai-chip{padding:5px 10px;border-radius:999px;border:1px solid var(--border);
  background:transparent;color:var(--muted);font-family:inherit;font-size:11px;cursor:pointer;}
.ai-chip:hover{border-color:var(--accent);color:var(--accent);}
.ai-row{display:flex;gap:7px;align-items:center;}
#aiInput{flex:1 1 auto;min-width:0;padding:9px 12px;border-radius:9px;
  border:1.5px solid var(--border);background:var(--card);color:var(--text);
  font-family:inherit;font-size:13px;outline:none;}
#aiInput:focus{border-color:var(--accent);}
#aiInput:disabled{opacity:.5;}
#aiModel{flex:0 0 auto;padding:8px 7px;border-radius:9px;border:1.5px solid var(--border);
  background:var(--card);color:var(--text);font-family:inherit;font-size:11px;cursor:pointer;outline:none;}
#aiSend{flex:0 0 auto;padding:9px 17px;border:none;border-radius:9px;background:var(--accent);
  color:#fff;font-family:inherit;font-size:13px;font-weight:700;cursor:pointer;}
#aiSend:disabled{opacity:.45;cursor:default;}
.ai-note{font-size:10px;color:var(--muted);margin-top:8px;line-height:1.5;}

/* ── Report picker ──────────────────────────────────────────────────────── */
.src-card-wide{max-width:760px;}
.rp-grid{display:flex;flex-direction:column;gap:12px;}
.rp-card{display:flex;align-items:center;gap:15px;width:100%;text-align:left;cursor:pointer;
  padding:16px 18px;border-radius:12px;border:1.5px solid var(--border);background:var(--card);
  font-family:inherit;color:var(--text);transition:border-color .15s,transform .15s,box-shadow .15s;}
.rp-card:hover{border-color:var(--accent);transform:translateY(-2px);box-shadow:0 8px 22px rgba(0,0,0,.1);}
.rp-ico{flex:0 0 auto;width:46px;height:46px;border-radius:12px;display:flex;align-items:center;
  justify-content:center;font-size:23px;background:color-mix(in srgb,var(--accent) 12%,transparent);}
.rp-body{flex:1 1 auto;min-width:0;}
.rp-title{font-size:15px;font-weight:800;}
.rp-desc{font-size:12px;color:var(--muted);margin-top:3px;line-height:1.5;}
.rp-detail{font-size:11px;color:var(--accent);margin-top:5px;font-weight:600;}
.rp-go{flex:0 0 auto;font-size:22px;color:var(--muted);}
.src-back{margin-left:10px;padding:2px 9px;border-radius:6px;border:1px solid var(--border);
  background:transparent;color:var(--muted);font-family:inherit;font-size:11px;cursor:pointer;float: right;}
.src-back:hover{border-color:var(--accent);color:var(--accent);}
.src-drop-sm{padding:14px 16px;margin-bottom:10px;}
.src-drop-sm .src-drop-icon{font-size:22px;}

/* ── Cashflow Projection ────────────────────────────────────────────────── */
.cf-svg{width:100%;display:block;min-width:560px;}
.cf-head .cf-sub{margin-top:2px;}
.cf-sub{font-size:11.5px;color:var(--muted);line-height:1.6;margin-bottom:10px;}
.cf-note{font-size:11.5px;color:var(--muted);background:color-mix(in srgb,var(--accent) 8%,transparent);
  border-radius:7px;padding:7px 11px;margin-top:8px;}
.cf-kpi{padding:12px 14px;height:100%;}
.cf-kpi-l{font-size:10.5px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.05em;}
.cf-kpi-v{font-size:19px;font-weight:800;margin-top:5px;line-height:1.15;}
.cf-kpi-s{font-size:10.5px;color:var(--muted);margin-top:3px;}
.cf-bars{display:flex;flex-direction:column;gap:13px;margin-top:6px;}
.cf-hbar-top{display:flex;justify-content:space-between;align-items:baseline;gap:10px;margin-bottom:4px;}
.cf-hbar-l{font-size:12px;color:var(--muted);}
.cf-hbar-v{font-size:13px;font-weight:800;white-space:nowrap;}
.cf-hbar-track{height:9px;border-radius:5px;overflow:hidden;
  background:color-mix(in srgb,var(--muted) 14%,transparent);}
.cf-hbar-fill{height:100%;border-radius:5px;transition:width .4s ease;}
.cf-hbar-n{font-size:10.5px;color:var(--muted);margin-top:3px;}
.cf-filter{display:flex;gap:7px;flex-wrap:wrap;margin-bottom:11px;}
.cf-fbtn{padding:5px 13px;border-radius:999px;border:1px solid var(--border);background:transparent;
  color:var(--muted);font-family:inherit;font-size:11.5px;cursor:pointer;}
.cf-fbtn:hover{border-color:var(--accent);color:var(--accent);}
.cf-fbtn.on{background:var(--accent);border-color:var(--accent);color:#fff;font-weight:700;}
.cf-legend{display:flex;flex-wrap:wrap;gap:9px 16px;margin-top:11px;}
.cf-lg{display:flex;align-items:center;gap:6px;font-size:11px;color:var(--muted);}
.cf-lg i{width:11px;height:11px;border-radius:3px;flex:0 0 auto;}
.cf-ib-row{display:flex;justify-content:space-between;gap:12px;font-size:12px;color:var(--muted);
  padding:6px 0;border-bottom:1px solid var(--border);}
.cf-ib-row:last-of-type{border-bottom:none;}
.cf-ib-tot{font-weight:800;color:var(--text);}

/* Aging by Customer / Vendor — a wide grid of amounts per bucket */
.cf-ag-bar{display:flex;align-items:center;justify-content:space-between;gap:12px;
  flex-wrap:wrap;margin:10px 0 8px;}
.cf-search{flex:1 1 260px;max-width:340px;min-width:0;padding:7px 11px;border-radius:8px;
  border:1px solid var(--border);background:var(--card);color:var(--text);
  font-family:inherit;font-size:12px;outline:none;}
.cf-search:focus{border-color:var(--accent);}
.cf-ag-count{font-size:11.5px;color:var(--muted);white-space:nowrap;}
.cf-basis-note{font-size:10.5px;color:var(--muted);align-self:center;margin-left:4px;}
.cf-ag-tbl{min-width:900px;}
.cf-ag-tbl td,.cf-ag-tbl th{font-size:12.5px;white-space:nowrap;}
.cf-ag-tbl tbody tr:hover td{background:color-mix(in srgb,var(--accent) 7%,transparent);}
.cf-ag-zero{color:var(--muted);opacity:.45;}
.cf-ag-total td{font-weight:800;color:var(--text);
  border-top:1.5px solid var(--border);background:color-mix(in srgb,var(--muted) 7%,transparent);}
.cf-ag-total{cursor:default!important;}

/* Rows shaded by how late the party is — the oldest bucket they still hold money in.
   The three tints are fixed light colours, so the ink is pinned dark too: on the dark
   themes the inherited light text would be unreadable against them. */
.cf-ag-tbl tbody tr.cf-late-90 td{background:#fbe9e7;}
.cf-ag-tbl tbody tr.cf-late-60 td{background:#fff3e0;}
.cf-ag-tbl tbody tr.cf-late-30 td{background:#fffde7;}
.cf-ag-tbl tbody tr.cf-late-90 td,
.cf-ag-tbl tbody tr.cf-late-60 td,
.cf-ag-tbl tbody tr.cf-late-30 td{color:#334155;}
.cf-ag-tbl tbody tr.cf-late-90 td .bold,
.cf-ag-tbl tbody tr.cf-late-60 td .bold,
.cf-ag-tbl tbody tr.cf-late-30 td .bold,
.cf-ag-tbl tbody tr.cf-late-90 td.bold,
.cf-ag-tbl tbody tr.cf-late-60 td.bold,
.cf-ag-tbl tbody tr.cf-late-30 td.bold{color:#0f172a;}
.cf-ag-tbl tbody tr.cf-late-90 td .cf-ag-zero,
.cf-ag-tbl tbody tr.cf-late-60 td .cf-ag-zero,
.cf-ag-tbl tbody tr.cf-late-30 td .cf-ag-zero{color:#64748b;}
.cf-ag-tbl tbody tr.cf-late-90:hover td{background:#f8d7d2;}
.cf-ag-tbl tbody tr.cf-late-60:hover td{background:#ffe9c9;}
.cf-ag-tbl tbody tr.cf-late-30:hover td{background:#fdf9cf;}
/* the legend under the table */
.cf-late-key{display:flex;flex-wrap:wrap;gap:8px 16px;margin-top:10px;font-size:11px;color:var(--muted);}
.cf-late-key span{display:flex;align-items:center;gap:6px;}
.cf-late-key i{width:14px;height:12px;border-radius:3px;border:1px solid var(--border);flex:0 0 auto;}

/* The note under the Product Offer Journey */
.jn-how{margin-top:12px;padding:11px 13px;border-radius:8px;font-size:11.5px;line-height:1.75;
  color:var(--muted);background:color-mix(in srgb,var(--muted) 6%,transparent);
  border-left:3px solid var(--accent);}
.jn-how b{color:var(--text);}
.jn-how-t{font-weight:800;color:var(--text);font-size:12px;margin-bottom:3px;}

/* Customer × Product matrix — full names under the codes, so the grid is wide on purpose
   and its wrapper scrolls rather than the names being cut. */
.mx-tbl{border-collapse:collapse;font-size:13px;width:auto;min-width:100%;}
.mx-tbl .mx-h,.mx-tbl .mx-rh{padding:7px 10px;vertical-align:bottom;font-weight:700;
  border-bottom:1.5px solid var(--border);text-align:center;}
.mx-tbl .mx-rh{text-align:left;vertical-align:middle;border-bottom:1px solid var(--border);
  position:sticky;left:0;background:var(--card);z-index:1;}
.mx-tbl .mx-corner{text-align:left;position:sticky;left:0;background:var(--card);z-index:2;
  color:var(--muted);font-size:11.5px;white-space:nowrap;}
.mx-code{font-size:12px;color:var(--text);white-space:nowrap;}
.mx-name{font-size:10.5px;font-weight:600;color:var(--muted);white-space:nowrap;margin-top:2px;}
.mx-tbl .mx-c{padding:6px 10px;text-align:right;font-weight:700;white-space:nowrap;
  border-bottom:1px solid var(--border);font-variant-numeric:tabular-nums;}

/* the colour key */
.mx-key{display:flex;align-items:center;flex-wrap:wrap;gap:7px 10px;margin-top:12px;
  font-size:11.5px;color:var(--muted);}
.mx-key-t{font-weight:700;color:var(--text);}
.mx-key-ramp{display:flex;gap:2px;}
.mx-key-ramp i{width:26px;height:13px;border-radius:2px;border:1px solid var(--border);}
.mx-key-e{white-space:nowrap;}
.mx-key-note{margin-top:7px;font-size:11px;line-height:1.75;color:var(--muted);}
.mx-key-note b{color:var(--text);}

/* ── Customer Migration ─────────────────────────────────────────────────── */
.mg-head .cf-sub{margin-bottom:0;}
/* comparison bars: period A muted, period B in the segment's own colour */
.mg-bars{display:flex;align-items:flex-end;justify-content:center;gap:22px;}
.mg-bar-col{display:flex;flex-direction:column;align-items:center;justify-content:flex-end;height:100%;}
.mg-bar-v{font-size:10.5px;font-weight:800;margin-bottom:3px;white-space:nowrap;}
.mg-bar{width:30px;border-radius:4px 4px 0 0;transition:height .35s ease;}
.mg-bar-l{font-size:9.5px;color:var(--muted);margin-top:5px;white-space:nowrap;}

/* transition matrix */
.mg-mx{border-collapse:collapse;font-size:12px;width:100%;min-width:520px;}
.mg-mx .mg-mx-h{padding:7px 9px;text-align:center;font-size:11px;font-weight:700;
  color:var(--muted);border-bottom:1.5px solid var(--border);vertical-align:bottom;}
.mg-mx .mg-mx-h:first-child{text-align:left;}
.mg-mx-sub{font-weight:400;font-size:10px;color:var(--muted);}
.mg-mx .mg-mx-rh{padding:7px 9px;text-align:left;font-weight:700;
  border-bottom:1px solid var(--border);white-space:nowrap;}
.mg-mx .mg-mx-c{padding:7px 9px;text-align:center;font-weight:700;
  border-bottom:1px solid var(--border);}
.mg-mx-same{background:#dbeafe;color:#1e40af;}
.mg-mx-up{background:#bbf7d0;color:#166534;}
.mg-mx-down{background:#fee2e2;color:#991b1b;}
.mg-mx-0{color:var(--muted);font-weight:400;}
.mg-mx-tot{color:var(--muted);}
.mg-mx-foot .mg-mx-c,.mg-mx-foot .mg-mx-rh{border-top:1.5px solid var(--border);border-bottom:none;}
/* the three tints are fixed light colours — pin the ink dark so the four dark themes stay readable */
.mg-mx-same,.mg-mx-up,.mg-mx-down,.mg-key{color-scheme:light;}
.mg-key{display:inline-block;padding:1px 7px;border-radius:4px;font-weight:700;font-size:10.5px;}

/* top movements */
.mg-move{background:color-mix(in srgb,var(--muted) 7%,transparent);border:1px solid var(--border);
  border-radius:8px;padding:7px 10px;margin-bottom:6px;cursor:pointer;}
.mg-move:hover{border-color:var(--accent);}
.mg-move-t{font-size:11.5px;font-weight:700;color:var(--text);}
.mg-move-n{font-size:12px;font-weight:800;color:var(--text);margin-top:2px;}

/* sankey */
.mg-sk-wrap{min-width:520px;}
.mg-sankey{width:100%;display:block;}
.mg-net{display:flex;justify-content:space-between;align-items:center;gap:10px;
  padding:9px 2px;border-bottom:1px solid var(--border);font-size:12px;}
.mg-net:last-child{border-bottom:none;}
.mg-net:hover{background:color-mix(in srgb,var(--muted) 7%,transparent);border-radius:6px;}
.mg-net-x{font-size:11px;color:var(--muted);}
.mg-net-p{display:block;font-size:10px;color:var(--muted);margin-top:1px;}

/* Company picker — a tenant or a report the configuration cannot serve is drawn dead rather
   than hidden, so the user sees it exists and that it needs setting up. */
.rp-card-off{opacity:.5;cursor:not-allowed;}
.rp-card-off:hover{border-color:var(--border);transform:none;box-shadow:none;}
.rp-card-off .rp-detail{color:#f59e0b;}
.rp-chip{display:inline-block;padding:1px 8px;border-radius:20px;margin-right:5px;
  background:color-mix(in srgb,var(--accent) 14%,transparent);font-weight:700;}
.rp-loading,.rp-empty{padding:22px;text-align:center;font-size:13px;color:var(--muted);
  border:1px dashed var(--border);border-radius:12px;line-height:1.7;}
.tb-co{font-size:11.5px;font-weight:600;color:var(--dim);margin-left:8px;
  padding:1px 8px;border-radius:20px;border:1px solid var(--border);white-space:nowrap;}

/* Who is signed in, and the way out — on the company / report / source screens. Those three
   are shown before the shell exists, so the topbar's logout is not reachable from them.

   Its own row above the heading, not a corner overlay: the headings are centred and full
   width, so an absolutely-positioned chip lands on top of them — measured, the DEV BYPASS
   name printed straight through 'เลือกบริษัท'. */
.src-user{display: block;text-align: left;margin-bottom:2px;}
.src-user-name{font-size:11.5px;color:var(--muted);max-width:170px;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap;}
.src-logout{padding:3px 10px;border-radius:6px;border:1px solid var(--border);
  background:transparent;color:var(--muted);font-family:inherit;font-size:11px;
  cursor:pointer;white-space:nowrap;float: right;}
.src-logout:hover{border-color:#ef4444;color:#ef4444;}