/* 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: views that 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);}
/* 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;}

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

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

/* 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;margin-bottom: 5px;}
.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;}

/* ── Embed mode ─────────────────────────────────────────────────────────────
   /{group}/{tab}?token=… shows one sub-tab's content and nothing else. Only the
   chrome is hidden — the content area and every chart behave
   exactly as they do in the full app, because they are the same code.

   #srcNotes is deliberately NOT hidden: it carries what the aggregation capped,
   dropped or substituted, and an embedded figure with its caveat removed is a
   figure that says more than the data supports. */
/* Set by the inline script in index.html's <head>, before the first paint. The markup shows
   #loginScreen by default — it is the one screen without display:none — and a deep link must
   never flash a login form at someone the link itself is signing in. Measured before this: the
   form was on screen from +165 ms to +196 ms, and a cold cache makes that far longer. */
html.embed-link .src-screen{display:none!important;}

/* The only thing on screen until embedBoot has something better to say. Its own class names,
   not the in-content message's: "still loading" and "here is why it stopped" are different
   statements, and sharing a class made anything looking for a failure find the splash. */
.embed-splash{display:none;}
html.embed-link .embed-splash{display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:10px;height:100vh;padding:24px;text-align:center;}
.embed-splash-t{font-size:15px;font-weight:800;color:var(--text);}
.embed-splash-d{font-size:12px;color:var(--muted);}

body.embed-mode .app-side,
body.embed-mode .topbar,
body.embed-mode .kpi-strip,
body.embed-mode #sidebarToggleBtn,
body.embed-mode #lpBackdrop,
body.embed-mode #themeDropdown,
body.embed-mode #periodBar{display:none!important;}

/* The shell is a flex column whose topbar and KPI strip are now gone, so the content
   area is the only child left and takes the height on its own. */
body.embed-mode #appRoot{height:100vh;}
body.embed-mode .content-area{padding:16px 8px;}

.embed-msg{display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:10px;min-height:60vh;padding:24px;text-align:center;}
.embed-msg-t{font-size:15px;font-weight:800;color:var(--text);}
.embed-msg-d{font-size:12px;color:var(--muted);line-height:1.7;max-width:640px;}