/* Layout aliases and page-specific - rail/lpanel/kbar shorthands, sidebar toggle, iceberg and waterfall buttons
   Extracted from the original single-file index.html - rules and order unchanged. */

/* kbar = kpi-strip alias */
.kbar{background:linear-gradient(180deg,#1e2644 0%,#1a2035 100%);border-bottom:1px solid rgba(255,255,255,.08);display:flex;padding:0 20px;flex-shrink:0;overflow-x:auto;box-shadow:0 2px 12px rgba(0,0,0,.25);}
.ki{display:flex;flex-direction:column;justify-content:center;padding:14px 22px;border-right:1px solid rgba(255,255,255,.06);cursor:pointer;min-width:140px;position:relative;transition:background .15s;gap:2px;}
.ki:first-child{padding-left:0;}
.ki.on::after{content:'';position:absolute;bottom:0;left:0;right:0;height:3px;border-radius:3px 3px 0 0;background:var(--accent);}
.ki-l{font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.4);margin-bottom:3px;white-space:nowrap;}
.ki-v{font-size:26px;font-weight:800;color:#fff;line-height:1.05;letter-spacing:-.02em;}
.ki-u{font-size:15px;color:rgba(255,255,255,.45);margin-left:3px;font-weight:600;}
.ki-c{font-size:13px;font-weight:600;margin-top:3px;white-space:nowrap;}
.ki-c.up{color:#34d399;}.ki-c.dn{color:#f87171;}
/* theme dropdown aliases */
.tdrop{display:none;position:fixed;background:#1a2035;border:1px solid rgba(255,255,255,.1);border-radius:8px;padding:10px;z-index:999;width:232px;box-shadow:0 8px 28px rgba(0,0,0,.5);}
.tdrop.on{display:block;}
.tdrop-ttl{font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.3);margin-bottom:8px;}
.tgrid{display:grid;grid-template-columns:1fr 1fr;gap:4px;}
.tc{display:flex;align-items:center;gap:6px;padding:7px 9px;border-radius:6px;border:1.5px solid transparent;cursor:pointer;transition:all .15s;}
.tc:hover{border-color:rgba(255,255,255,.12);background:rgba(255,255,255,.04);}
.tc.on{border-color:var(--accent);}
.tpal{display:flex;gap:2px;}
.tdot{width:9px;height:9px;border-radius:50%;}
.tn{font-size:13px;font-weight:600;color:rgba(255,255,255,.45);}
/* rail shorthand */
.rail{width:56px;background:var(--nav-bg);display:flex;flex-direction:column;align-items:center;padding:10px 0;gap:2px;flex-shrink:0;z-index:30;}
.rail-logo{width:34px;height:34px;background:linear-gradient(135deg,#4f8ef7,#8b5cf6);border-radius:9px;display:flex;align-items:center;justify-content:center;font-size:17px;margin-bottom:10px;}
.ri{width:38px;height:38px;border-radius:9px;display:flex;align-items:center;justify-content:center;font-size:20px;cursor:pointer;color:rgba(255,255,255,.4);position:relative;transition:all .15s;}
.ri:hover,.ri.on{background:rgba(79,142,247,.22);color:#fff;}
.ri-tip{position:absolute;left:48px;background:#0d1225;color:#fff;font-size:13px;font-weight:600;padding:4px 8px;border-radius:5px;white-space:nowrap;opacity:0;pointer-events:none;transition:opacity .15s;z-index:100;border:1px solid rgba(255,255,255,.08);}
.ri:hover .ri-tip{opacity:1;}
.rail-sep{width:26px;height:1px;background:rgba(255,255,255,.08);margin:5px 0;}
.rail-btm{margin-top:auto;}
/* lpanel shorthand */
.lpanel{width:214px;background:var(--nav-bg);display:flex;flex-direction:column;flex-shrink:0;overflow-y:auto;overflow-x:hidden;}
.lp-hdr{padding:14px 14px 8px;border-bottom:1px solid rgba(255,255,255,.06);}
.lp-ttl{font-size:13px;font-weight:700;color:rgba(255,255,255,.5);text-transform:uppercase;letter-spacing:.08em;}
.lp-nav{display:flex;flex-direction:column;padding:6px 8px 0;}
.lp-gl{font-size:12px;font-weight:700;letter-spacing:.1em;color:rgba(255,255,255,.25);text-transform:uppercase;padding:8px 8px 3px;}
.lp-it{display:flex;align-items:center;gap:7px;padding:7px 10px;border-radius:7px;cursor:pointer;color:rgba(255,255,255,.5);font-size:14px;font-weight:500;transition:all .15s;margin-bottom:1px;}
.lp-it:hover{background:rgba(255,255,255,.06);color:rgba(255,255,255,.85);}
.lp-it.on{background:rgba(79,142,247,.18);color:#fff;font-weight:600;}
.lp-dot{width:6px;height:6px;border-radius:50%;flex-shrink:0;}
.lp-periods{padding:10px 14px;border-top:1px solid rgba(255,255,255,.06);margin-top:auto;}
.lp-pts{font-size:12px;font-weight:700;letter-spacing:.08em;color:rgba(255,255,255,.3);text-transform:uppercase;margin-bottom:7px;}
.p-row{display:flex;align-items:center;gap:5px;margin-bottom:5px;}
.pb{font-size:12px;font-weight:700;padding:2px 7px;border-radius:4px;flex-shrink:0;}
.pba{background:#4f8ef7;color:#fff;}.pbb{background:rgba(255,255,255,.1);color:rgba(255,255,255,.65);}
.pi{flex:1;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.09);border-radius:5px;padding:3px 6px;font-size:13px;color:rgba(255,255,255,.75);cursor:pointer;}
.ps{font-size:13px;color:rgba(255,255,255,.25);}
.lp-kt{margin:8px 14px 14px;padding:9px;background:rgba(245,158,11,.07);border:1px solid rgba(245,158,11,.18);border-radius:7px;}
.lp-kt-t{font-size:12px;font-weight:700;color:#f59e0b;margin-bottom:4px;}
.lp-kt-b{font-size:13px;color:rgba(255,255,255,.45);line-height:1.6;}
/* ── SIDEBAR TOGGLE HANDLE ── */
/* Anchored to the left panel's right edge. It is a sibling of .left-panel, not a
   child (the panel clips overflow-x), so `right:-18px` used to resolve against the
   viewport and park the handle 18px off the right of the screen — invisible and
   unclickable. It is positioned from the left instead; toggleSidebar() moves it
   between 276px (rail 56 + panel 220) and 56px when the panel collapses. */
#sidebarToggleBtn{
  position:fixed;
  left:276px;
  right:auto;
  top:50%;
  transform:translateY(-50%);
  width:18px;
  height:56px;
  background:var(--nav-bg);
  border-radius:0 8px 8px 0;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  z-index:1;
  border:1px solid rgba(255,255,255,.12);
  border-left:none;
  box-shadow:3px 0 12px rgba(0,0,0,.3);
}
#sidebarToggleBtn:hover{
  width:22px;
  background:#2a3460;
}
#sidebarToggleIcon{
  color:rgba(255,255,255,.85);
  font-size:16px;
  font-weight:700;
  line-height:1;
  user-select:none;
}
/* carea = content-area alias */
.carea{flex:1;overflow-y:auto;padding:16px;display:flex;flex-direction:column;gap:14px;}

/* Iceberg Analysis buttons */
.ice-btn{padding:5px 14px;border-radius:6px;border:1px solid var(--border);background:var(--card);color:var(--muted);font-size:11px;font-weight:600;cursor:pointer;transition:all .15s;}
.ice-btn:hover{border-color:#06b6d4;color:#06b6d4;}
.ice-btn.ice-active{border-color:#06b6d4;background:rgba(6,182,212,.12);color:#06b6d4;}

/* Waterfall button */
.wf-btn{padding:5px 12px;border-radius:6px;border:1px solid var(--border);background:var(--card);color:var(--muted);font-size:11px;font-weight:600;cursor:pointer;transition:all .15s;}
.wf-btn:hover{border-color:var(--accent);color:var(--accent);}
.wf-btn.wf-active{border-color:#a855f7;background:rgba(168,85,247,.1);color:#a855f7;}

/* ── DATA SOURCE / LOADING SCREEN ─────────────────────────────────────────── */
.src-screen{position:fixed;inset:0;z-index:5000;display:flex;align-items:center;justify-content:center;
  background:linear-gradient(140deg,#1a2035 0%,#1e2644 55%,#101527 100%);padding:24px;}
.src-card{width:min(560px,100%);background:var(--card,#fff);border-radius:16px;padding:28px 30px 24px;
  box-shadow:0 30px 70px rgba(0,0,0,.45);display:flex;flex-direction:column;gap:16px;max-height: calc(100vh - 40px);overflow: auto;}
.src-card-narrow{width:min(420px,100%);align-items:center;text-align:center;gap:18px;}
.src-head{text-align:center;}
.src-title{font-size:20px;font-weight:800;letter-spacing:.02em;color:var(--text,#1a1f2e);}
.src-sub{font-size:13px;color:var(--muted,#64748b);margin-top:4px;}
.src-tabs{display:flex;gap:8px;border-bottom:1px solid var(--border,#e5e8ef);}
.src-tab{flex:1;padding:9px 10px;border:0;background:none;font-size:14px;font-weight:700;cursor:pointer;
  color:var(--dim,#94a3b8);border-bottom:2px solid transparent;transition:all .15s;}
.src-tab:hover{color:var(--accent,#4f8ef7);}
.src-tab-on{color:var(--accent,#4f8ef7);border-bottom-color:var(--accent,#4f8ef7);}
.src-pane{display:flex;flex-direction:column;gap:12px;}
.src-label{font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--muted,#64748b);}
.src-range{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:10px;}
.src-range-col{display:flex;align-items:center;gap:6px;}
.src-range-tag{font-size:13px;font-weight:700;color:var(--muted,#64748b);width:28px;flex-shrink:0;}
.src-input{flex:1;min-width:0;padding:8px 10px;border:1px solid var(--border,#e5e8ef);border-radius:8px;
  font-size:14px;font-family:inherit;background:var(--surface,#fff);color:var(--text,#1a1f2e);}
.src-go{padding:11px;border:0;border-radius:9px;background:var(--accent,#4f8ef7);color:#fff;
  font-size:15px;font-weight:700;cursor:pointer;transition:filter .15s;}
.src-go:hover{filter:brightness(1.08);}
.src-hint{font-size:12px;color:var(--dim,#94a3b8);line-height:1.6;}
.src-drop{display:flex;flex-direction:column;align-items:center;gap:6px;padding:30px 20px;cursor:pointer;
  border:2px dashed var(--border,#e5e8ef);border-radius:12px;transition:all .15s;text-align:center;}
.src-drop:hover{border-color:var(--accent,#4f8ef7);background:rgba(79,142,247,.05);}
.src-drop-icon{font-size:34px;}
.src-drop-main{font-size:15px;font-weight:700;color:var(--text,#1a1f2e);}
.src-drop-sub{font-size:12px;color:var(--dim,#94a3b8);line-height:1.6;}
.src-sheets{display:flex;flex-wrap:wrap;gap:8px;}
.src-sheet-btn{padding:7px 14px;border:1px solid var(--border,#e5e8ef);border-radius:8px;
  background:var(--surface,#fff);color:var(--text,#1a1f2e);font-size:13px;font-weight:600;cursor:pointer;}
.src-sheet-btn:hover{border-color:var(--accent,#4f8ef7);color:var(--accent,#4f8ef7);}
.src-err{padding:10px 12px;border-radius:8px;background:rgba(239,68,68,.1);
  border:1px solid rgba(239,68,68,.3);color:#b91c1c;font-size:13px;line-height:1.6;}
.src-demo{border:0;background:none;color:var(--dim,#94a3b8);font-size:12px;cursor:pointer;
  text-decoration:underline;padding:2px;font-family:inherit;}
.src-demo:hover{color:var(--accent,#4f8ef7);}
.src-loading-msg{font-size:14px;font-weight:600;color:var(--text,#1a1f2e);min-height:20px;}
.src-track{width:100%;height:6px;border-radius:3px;background:var(--border,#e5e8ef);overflow:hidden;}
.src-fill{height:100%;width:0;background:var(--accent,#4f8ef7);border-radius:3px;transition:width .5s ease;}
.src-spinner{width:38px;height:38px;border-radius:50%;border:3px solid var(--border,#e5e8ef);
  border-top-color:var(--accent,#4f8ef7);animation:src-spin .8s linear infinite;}
@keyframes src-spin{to{transform:rotate(360deg);}}

/* Temporary Phase 2 notice — remove together with the sample datasets in Phase 3 */
.demo-banner{flex-shrink:0;padding:7px 16px;background:rgba(245,158,11,.12);
  border-bottom:1px solid rgba(245,158,11,.3);color:#92400e;font-size:12px;font-weight:600;}
.demo-banner code{font-family:var(--font-mono);background:rgba(245,158,11,.18);padding:1px 5px;border-radius:4px;}
.demo-banner-note{display:block;margin-top:3px;font-weight:500;opacity:.8;}

/* Aggregation notes strip — capped cubes, missing columns, dropped rows */
.data-note{flex-shrink:0;padding:5px 16px;background:rgba(79,142,247,.10);
  border-bottom:1px solid rgba(79,142,247,.25);color:var(--muted);font-size:11px;line-height:1.5;}

/* Login card — reuses the source-screen shell, adds full-width fields */
.src-card-login{width:min(400px,100%);}
.src-input-block{width:100%;margin-top:5px;}
.src-card-login .src-label{margin-bottom:0;}
.topbar-user{font-size:13px;font-weight:600;color:rgba(255,255,255,.75);padding:4px 10px;
  border-radius:6px;background:rgba(255,255,255,.07);max-width:200px;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap;}

/* ── TOPBAR ACTION MENU ───────────────────────────────────────────────────── */
/* The four topbar actions collapsed into one dropdown so the topbar stays narrow. */
/* Text size. The three glyphs are drawn at the sizes they select, so the control explains
   itself without a label — and the chosen one is the only one at full contrast. */
.fs-picker{display:flex;align-items:center;gap:2px;flex-shrink:0;padding:2px;
  border:1px solid rgba(255,255,255,.22);border-radius:9px;background:rgba(255,255,255,.05);}
.fs-btn{width:26px;height:26px;display:flex;align-items:center;justify-content:center;
  border:none;border-radius:7px;background:transparent;cursor:pointer;padding:0;
  font-family:Georgia,'Times New Roman',serif;font-weight:700;line-height:1;
  color:rgba(255,255,255,.45);transition:color .15s,background .15s;}
.fs-btn[data-fs="0"]{font-size:12px;}
.fs-btn[data-fs="1"]{font-size:15px;}
.fs-btn[data-fs="2"]{font-size:18px;}
.fs-btn:hover{color:rgba(255,255,255,.8);background:rgba(255,255,255,.08);}
.fs-btn.on{color:#fbbf24;background:rgba(255,255,255,.12);}

.tb-menu{position:relative;flex-shrink:0;}
.tb-menu-btn{display:flex;align-items:center;gap:7px;max-width:230px;padding:6px 10px;
  border-radius:8px;border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.07);
  color:rgba(255,255,255,.85);font-family:inherit;font-size:13px;font-weight:600;
  cursor:pointer;transition:background .15s,border-color .15s;}
.tb-menu-btn:hover{background:rgba(255,255,255,.13);border-color:rgba(255,255,255,.25);}
.tb-menu.open .tb-menu-btn{background:rgba(79,142,247,.22);border-color:rgba(79,142,247,.55);}
.tb-menu-avatar{font-size:14px;line-height:1;flex-shrink:0;}
.tb-menu-btn .topbar-user{background:none;padding:0;max-width:140px;}
.tb-menu-caret{font-size:10px;opacity:.6;flex-shrink:0;transition:transform .15s;}
.tb-menu.open .tb-menu-caret{transform:rotate(180deg);}

.tb-menu-drop{display:none;position:absolute;top:calc(100% + 6px);right:0;min-width:210px;
  background:#1a2035;border:1px solid rgba(255,255,255,.12);border-radius:10px;padding:6px;
  box-shadow:0 14px 36px rgba(0,0,0,.45);z-index:1200;}
.tb-menu.open .tb-menu-drop{display:block;}
.tb-menu-item{display:flex;align-items:center;gap:9px;width:100%;padding:9px 11px;
  border:0;border-radius:7px;background:none;color:rgba(255,255,255,.8);
  font-family:inherit;font-size:13px;font-weight:600;text-align:left;cursor:pointer;
  transition:background .12s,color .12s;}
.tb-menu-item:hover{background:rgba(255,255,255,.09);color:#fff;}
.tb-menu-item span{flex:1;}
.tb-menu-sep{height:1px;margin:5px 6px;background:rgba(255,255,255,.1);}
.tb-menu-danger{color:#fca5a5;}
.tb-menu-danger:hover{background:rgba(239,68,68,.16);color:#fecaca;}

/* ── PERIOD STRIP ─────────────────────────────────────────────────────────────
   The period bar (#perStrip, js/core/fisperiod.js): the four modes, the month/day/quarter/year
   pickers, the "กำลังแสดง …" line and the six comparison KPIs. It sits in the dark chrome between
   the topbar and the KPI strip. Below 992px only the head button shows (responsive.css), and it
   expands the rest — the strip never makes the page wider than the screen. */
.per-strip{flex-shrink:0;background:var(--hdr-bg);border-bottom:1px solid rgba(255,255,255,.08);color:rgba(255,255,255,.8);}
.per-toggle{display:none;}
.per-body{display:flex;flex-direction:column;gap:8px;padding:8px 20px 10px;}
.per-row{display:flex;align-items:center;flex-wrap:wrap;gap:8px 14px;min-width:0;}
.pd-bar{display:flex;align-items:center;gap:2px;flex-shrink:0;padding:2px;
  border:1px solid rgba(255,255,255,.22);border-radius:9px;background:rgba(255,255,255,.05);}
.pd-btn{height:26px;padding:0 10px;border:none;border-radius:7px;background:transparent;cursor:pointer;
  font-family:inherit;font-size:12px;font-weight:700;color:rgba(255,255,255,.62);white-space:nowrap;
  transition:color .15s,background .15s;}
.pd-btn:hover:not(:disabled){color:rgba(255,255,255,.9);background:rgba(255,255,255,.08);}
.pd-btn.on{color:#fbbf24;background:rgba(255,255,255,.12);}
.pd-btn:disabled{opacity:.35;cursor:not-allowed;}
.pd-btn:focus-visible,.per-sel select:focus-visible,.per-toggle:focus-visible{outline:2px solid #fbbf24;outline-offset:1px;}
.per-pick{display:flex;align-items:center;flex-wrap:wrap;gap:6px 10px;min-width:0;}
.per-sel{display:inline-flex;align-items:center;gap:6px;min-width:0;font-size:12px;font-weight:600;color:rgba(255,255,255,.55);}
.per-sel select{height:28px;min-width:0;max-width:100%;padding:0 6px;border-radius:7px;cursor:pointer;
  border:1px solid rgba(255,255,255,.22);background:rgba(255,255,255,.08);color:#fff;font:inherit;font-size:12.5px;}
.per-sel select option{color:#1a1f2e;background:#fff;}
.per-sel select option:disabled{color:#94a3b8;}
.per-now{flex:1 1 320px;min-width:0;font-size:12.5px;line-height:1.45;color:rgba(255,255,255,.62);}
.per-now b{color:#fff;font-weight:700;}
.per-warn{color:#fca5a5;font-weight:700;}
.per-note{display:block;font-size:11.5px;color:rgba(255,255,255,.45);}
.per-err{flex-basis:100%;font-size:12px;font-weight:600;color:#fca5a5;}
.per-err:empty{display:none;}
.per-cmp{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:6px;}
.pc{min-width:0;padding:5px 10px;border-radius:8px;border:1px solid rgba(255,255,255,.1);background:rgba(255,255,255,.04);}
.pc-l{font-size:11px;font-weight:700;color:rgba(255,255,255,.5);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.pc-l small{font-size:10px;font-weight:600;}
.pc-v{font-size:16px;font-weight:800;line-height:1.25;color:#fff;font-variant-numeric:tabular-nums;}
.pc-d{font-size:11px;line-height:1.35;font-variant-numeric:tabular-nums;}
.pc-pos{color:#34d399;font-weight:700;}
.pc-neg{color:#f87171;font-weight:700;}
.pc-flat{color:rgba(255,255,255,.65);font-weight:700;}
.pc-sub{color:rgba(255,255,255,.45);white-space:nowrap;}
body.embed-mode .per-strip,body.embed-mode .kpi-help{display:none!important;}

/* ── KPI strip: the report's eight KPIs with sparklines (fisperiod.js) ── */
.kpi-item.fis-kpi{flex:0 0 auto;min-width:172px;}
.kpi-item.fis-kpi .kpi-lbl{text-transform:none;letter-spacing:.02em;}
.kpi-item.fis-kpi:focus-visible{outline:2px solid #fbbf24;outline-offset:-2px;}
.kpi-chg.fl{color:#fbbf24;}
.kpi-spark{margin-top:5px;height:26px;}
.kpi-spark svg{display:block;width:100%;height:26px;}
/* the help a tapped KPI opens, right under the strip */
.kpi-help{flex-shrink:0;position:relative;padding:8px 44px 4px 20px;font-size:12.5px;color:var(--text);
  background:var(--surface);border-bottom:1px solid var(--border);}
.kpi-help[hidden]{display:none;}
.kpi-help-t{font-weight:800;margin-bottom:2px;}
.kpi-help-x{position:absolute;top:6px;right:12px;width:26px;height:26px;border-radius:50%;cursor:pointer;
  border:1px solid var(--border);background:transparent;color:var(--text);font-size:12px;line-height:1;}