/* The shell in the prototype's look — overrides only, loaded last so the Hub's base / components /
   layout / responsive / access css stay as they were (and this diff stays reviewable).
   Tokens: --p-* from css/fis-theme.css (prototype light on light/forest/slate, prototype dark on
   midnight/ocean/aurora).
   The prototype pairs an ORANGE menu bar with its softened blue (manual: "เมนูสีส้มคู่กับโทนน้ำเงิน",
   prototype L154–162): the orange is the view bar (#navRailFis, the prototype's .tabs); the blue
   (--p-accent) stays the control accent.
   Layout = the prototype's page (markup ~265–311, CSS L14–22, L71–72, L116–123, L163–183): one
   scroller (#shellScroll) holding a centred .shell-wrap (its .wrap: max-width 1360px, padding
   20px 16px 48px) — the header (.fis-hdr = its <header>: .brand with .logoBox / title / "กำลังแสดง" /
   counts and, at its right end, the account block #fisUtil (not in the prototype), then .health +
   .gearBtn / .theme-toggle / .fzbox), the source .banner, the period bar, the sticky view bar, the views and the .foot.
   Text sizes are calc(Npx*var(--fz,1)) like the prototype's; --fz is set by layout.js (default 1.15).
   theme.js writes --bg/--card/--text/--accent inline on <html> and paints .topbar / .kpi-strip /
   the theme picker with inline styles; the variables are re-pointed on <body> (closer than <html>),
   and the painted elements need !important on background / border. */

:root{--fz:1.15;}

/* ── the Hub's variables, re-pointed at the prototype's tokens, app-wide ── */
body{
  --bg:var(--p-bg);--surface:var(--p-card);--card:var(--p-card);--border:var(--p-line);
  --text:var(--p-ink);--muted:var(--p-muted);--dim:color-mix(in srgb,var(--p-muted) 78%,var(--p-card));
  --accent:var(--p-accent);--green:var(--p-good);--amber:var(--p-warn);--red:var(--p-bad);--purple:var(--p-accent3);
  --hdr-bg:var(--p-bg);--nav-bg:var(--p-card);
  font-family:var(--p-font);background:var(--p-bg);color:var(--p-ink);
}
::-webkit-scrollbar-thumb{background:color-mix(in srgb,var(--p-muted) 40%,transparent);}

/* ── the page: one scroller, the prototype's centred .wrap inside it ── */
.shell-scroll{flex:1;min-height:0;overflow-y:auto;overflow-x:hidden;background:var(--p-bg);}
.shell-wrap{max-width:1360px;margin:0 auto;min-height:100%;display:flex;flex-direction:column;padding:8px 16px 48px;
  font-size:calc(14px*var(--fz,1));line-height:1.55;color:var(--p-ink);}
/* the views no longer scroll on their own — #shellScroll does, so the bar above them can stick. At
   least a screen tall, so a short view (or one still loading) can still sit under the pinned bar. */
.shell-wrap>.content-area{flex:1 0 auto;overflow:visible;min-height:calc(100vh - 90px);padding:0;}

/* ── the account block (company, then admin ⚙ · 🎨 · account) — inside the header's .brand, at its right
   end, stacked; on a phone a row above the logo (see the 640px block below) ── */
.topbar.fis-util{height:auto;min-height:0;padding:0;gap:6px;background:transparent!important;border:0!important;
  border-bottom:0!important;position:relative;z-index:60;flex-shrink:0;
  margin-left:auto;flex-direction:column;align-items:flex-end;}
.fis-util #tbTitleWrap{min-width:0;max-width:100%;overflow:hidden;flex:none;}
.fis-util .fis-util-co{padding-right:0;}
.fis-util-co{display:inline-flex;align-items:center;gap:4px;max-width:100%;padding:3px 8px;border:0;border-radius:8px;background:none;
  color:var(--p-muted);font:inherit;font-size:calc(12px*var(--fz,1));cursor:default;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
button.fis-util-co:hover{background:var(--p-soft);color:var(--p-ink);}
.fis-util-co #tbCompany{font-weight:600;color:var(--p-ink);overflow:hidden;text-overflow:ellipsis;}
.fis-util-sw{color:var(--p-accent);}
.fis-util .topbar-right{gap:6px;}
.tb-icon-btn{width:30px;height:30px;display:flex;align-items:center;justify-content:center;flex-shrink:0;padding:0;
  border:1px solid var(--p-line);border-radius:8px;background:var(--p-card);color:var(--p-ink);font-size:15px;line-height:1;cursor:pointer;}
.tb-icon-btn:hover,.tb-icon-btn[aria-expanded="true"]{background:var(--p-soft);border-color:var(--p-accent);}
.tb-sa-slot:empty{display:none;}
.sa-menu.sa-in-topbar{position:relative;top:auto;right:auto;z-index:auto;}
.sa-menu.sa-in-topbar .sa-btn{width:30px;height:30px;border-radius:8px;box-shadow:none;}
.sa-menu.sa-in-topbar .sa-btn svg{width:17px;height:17px;}
.sa-menu.sa-in-topbar .sa-drop{top:calc(100% + 6px);z-index:70;}
.tb-icon-btn:focus-visible,.tb-menu-btn:focus-visible,.fis-util-co:focus-visible,.sa-btn:focus-visible{outline:2px solid var(--p-accent);outline-offset:2px;}
.tb-menu-btn{padding:3px 8px;border:1px solid var(--p-line);background:var(--p-card);color:var(--p-ink);border-radius:8px;font-size:12px;}
.tb-menu-btn:hover{background:var(--p-soft);border-color:var(--p-accent);}
.tb-menu.open .tb-menu-btn{background:color-mix(in srgb,var(--p-accent) 10%,var(--p-card));border-color:var(--p-accent);}
.topbar-user{color:var(--p-ink);background:none;font-size:12px;padding:0;}
.tb-menu-drop{background:var(--p-card);border:1px solid var(--p-line);box-shadow:0 14px 36px -12px rgba(0,0,0,.35);z-index:80;}
.tb-menu-item{color:var(--p-ink);}
.tb-menu-item:hover{background:var(--p-soft);color:var(--p-ink);}
.tb-menu-sep{background:var(--p-line);}
.tb-menu-danger{color:var(--p-bad);}
.tb-menu-danger:hover{background:var(--p-bad-bg);color:var(--p-bad);}
/* theme picker (painted inline by theme.js) — opens under the account row, top right */
.theme-drop{top:44px;right:16px;bottom:auto;left:auto;z-index:1000;}
.theme-drop{background:var(--p-card)!important;border:1px solid var(--p-line);box-shadow:0 14px 36px -12px rgba(0,0,0,.35);}
.theme-drop-title{color:var(--p-muted);}
.theme-card:hover{border-color:var(--p-line);background:var(--p-soft);}
.theme-card.active-theme{border-color:var(--p-menu);}
.theme-name{color:var(--p-ink);}

/* ── the header = prototype <header> / .brand / .logoBox / .hdrNow / .health / .gearBtn ── */
.fis-hdr{display:flex;flex-wrap:wrap;gap:16px;align-items:center;justify-content:space-between;margin-bottom:12px;}
.fis-hdr .brand{display:flex;align-items:flex-start;gap:18px;min-width:0;flex:1 1 560px;}
.fis-hdr .logoBox{flex:0 0 auto;height:72px;min-width:72px;max-width:220px;padding:8px 12px;border:1px dashed var(--p-line);border-radius:12px;
  background:var(--p-card);display:flex;align-items:center;justify-content:center;color:var(--p-accent);}
.fis-hdr .logoBox.has{border:0;background:transparent;padding:0;}
.fis-hdr .tb-logo{height:72px;width:auto;max-width:220px;display:block;object-fit:contain;}
.fis-hdr .brandTxt{min-width:0;}
.fis-hdr h1{font-size:calc(22px*var(--fz,1));margin:0 0 4px;font-weight:700;line-height:1.55;color:var(--p-ink);}
.fis-hdr .hdrNow{font-size:calc(16px*var(--fz,1));line-height:1.55;color:var(--p-muted);margin-bottom:2px;}
.fis-hdr .hdrNow b{color:var(--p-ink);font-size:calc(17px*var(--fz,1));}
.fis-hdr .hdrNow .neg{color:var(--p-bad);}
.fis-hdr .sub,.health .sub{color:var(--p-muted);font-size:calc(13px*var(--fz,1));}
.fis-hdr .hdr-act{display:flex;gap:10px;align-items:center;flex-wrap:wrap;}
.health{display:flex;align-items:center;gap:12px;background:var(--p-card);border:1px solid var(--p-line);border-radius:14px;padding:10px 16px;}
.health .score{font-size:calc(28px*var(--fz,1));font-weight:700;line-height:1.55;color:var(--p-muted);}
.health .score span{font-size:calc(14px*var(--fz,1));color:var(--p-muted);font-weight:400;}
.health #riskScoreTxt{max-width:200px;}
.gearBtn{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--p-line);background:var(--p-card);color:var(--p-ink);border-radius:10px;
  padding:7px 11px;cursor:pointer;font:inherit;font-size:calc(13px*var(--fz,1));line-height:1.55;}
.gearBtn svg{color:var(--p-accent);transition:transform .4s;flex:none;}
.gearBtn:hover{border-color:var(--p-accent);}
.gearBtn:hover svg{transform:rotate(90deg);}
.theme-toggle{font:inherit;font-size:calc(12px*var(--fz,1));border:1px solid var(--p-line);background:var(--p-card);color:var(--p-muted);
  border-radius:8px;padding:6px 10px;cursor:pointer;line-height:1.55;}
.theme-toggle:hover{border-color:var(--p-accent);color:var(--p-ink);}
.theme-toggle.on{border-color:var(--p-accent);color:var(--p-accent);}
.fzbox{display:inline-flex;align-items:center;border:1px solid var(--p-line);border-radius:10px;background:var(--p-card);overflow:hidden;}
.fzbox button{border:0;background:transparent;color:var(--p-ink);font:inherit;font-weight:600;font-size:calc(13px*var(--fz,1));padding:7px 10px;cursor:pointer;line-height:1.55;}
.fzbox button:hover{background:var(--p-soft);}
.fzbox span{font-size:calc(12px*var(--fz,1));color:var(--p-muted);min-width:42px;text-align:center;cursor:pointer;
  border-left:1px solid var(--p-line);border-right:1px solid var(--p-line);padding:7px 4px;line-height:1.55;}
.gearBtn:focus-visible,.theme-toggle:focus-visible,.fzbox button:focus-visible,.fzbox span:focus-visible{outline:2px solid var(--p-accent);outline-offset:2px;}

/* the source banner (prototype .banner) and the footer (.foot) */
.banner{background:var(--p-warn-bg);color:var(--p-ink);border:1px solid var(--p-line);border-left:4px solid var(--p-warn);border-radius:10px;
  padding:10px 14px;font-size:calc(13px*var(--fz,1));margin-bottom:14px;line-height:1.55;}
.foot{color:var(--p-muted);font-size:calc(12px*var(--fz,1));margin-top:28px;text-align:center;}
.foot:empty{display:none;}

/* the "อยู่ระหว่างพัฒนา" notice of a button whose feature is not built yet */
.fis-notice .fis-notice-dlg{width:min(520px,100%);margin-top:12vh;}
.fis-notice-p{margin:0;font-size:calc(14px*var(--fz,1));}

/* ── the view bar = the prototype's orange .tabs (L23–25, L79, L158–162) ── */
.fis-tabs{position:sticky;top:0;z-index:50;flex-shrink:0;display:flex;gap:4px;margin:0 -16px 18px;padding:6px 16px 0;
  overflow-x:auto;overflow-y:hidden;scrollbar-width:none;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain;
  background:linear-gradient(110deg,var(--p-menu),var(--p-menu2));border-radius:12px 12px 0 0;transition:box-shadow .2s;}
.fis-tabs::-webkit-scrollbar{display:none;}
.fis-tabs.stuck{border-radius:0;box-shadow:0 6px 14px -8px rgba(160,70,20,.6);}
.fis-tab{flex:0 0 auto;white-space:nowrap;background:none;border:0;border-bottom:2px solid transparent;border-radius:10px 10px 0 0;padding:10px 14px;
  font:inherit;font-family:var(--p-font);font-size:calc(14px*var(--fz,1));font-weight:500;line-height:1.55;cursor:pointer;
  color:color-mix(in srgb,var(--p-menu-ink) 88%,transparent);transition:background .15s,color .15s;}
.fis-tab:hover{color:var(--p-menu-ink);background:rgba(255,255,255,.12);}
/* the open view is cut out of the bar in the page colour and joins the content below it */
.fis-tab.active{color:var(--p-accent);background:var(--p-bg);font-weight:700;}
.fis-tab:focus{outline:none;}
.fis-tab:focus-visible{outline:2px solid var(--p-menu-ink);outline-offset:-4px;}
.fis-tab.active:focus-visible{outline-color:var(--p-accent);}
/* the deep link shows one view and nothing to navigate with */
body.embed-mode .fis-tabs,body.embed-mode .fis-hdr,body.embed-mode .fis-util,body.embed-mode .banner,
body.embed-mode .foot,body.embed-mode #srcNotes{display:none!important;}
body.embed-mode .shell-wrap{padding-top:16px;}

/* ── the pre-dashboard screens: login, company / report / source pickers, loading, admin ── */
.src-screen{background:
  linear-gradient(120deg,color-mix(in srgb,var(--p-accent) 12%,var(--p-bg)),var(--p-bg) 55%,color-mix(in srgb,var(--p-menu) 10%,var(--p-bg)));}
.src-card{background:var(--p-card);border:1px solid var(--p-line);border-top:4px solid var(--p-menu);border-radius:16px;
  box-shadow:0 24px 60px -20px rgba(0,0,0,.35);color:var(--p-ink);}
.src-title{font-weight:700;letter-spacing:0;color:var(--p-ink);}
.src-sub{color:var(--p-muted);}
.src-label{color:var(--p-muted);font-weight:600;}
.src-input{border-color:var(--p-line);background:var(--p-card);color:var(--p-ink);}
.src-input:focus{outline:2px solid color-mix(in srgb,var(--p-accent) 45%,transparent);border-color:var(--p-accent);}
.src-go{background:var(--p-accent);color:var(--p-on-accent);font-weight:600;border-radius:10px;}
.src-tab{color:var(--p-muted);font-weight:600;}
.src-tab:hover{color:var(--p-accent);}
.src-tab-on{color:var(--p-accent);border-bottom-color:var(--p-accent);}
.src-drop{border-color:var(--p-line);}
.src-drop:hover{border-color:var(--p-accent);background:color-mix(in srgb,var(--p-accent) 6%,transparent);}
.src-err{background:var(--p-bad-bg);border-color:color-mix(in srgb,var(--p-bad) 35%,transparent);color:var(--p-bad);}
.rp-card{border-color:var(--p-line);border-radius:14px;}
.rp-card:hover{border-color:var(--p-accent);box-shadow:0 8px 22px -10px rgba(0,0,0,.3);}
.rp-ico{background:color-mix(in srgb,var(--p-menu) 14%,var(--p-card));}
.rp-title{font-weight:700;}
.rp-card-off .rp-detail{color:var(--p-warn);}
.src-logout:hover{border-color:var(--p-bad);color:var(--p-bad);}
/* the super-admin ⚙ sits on the screen background, which is light now in the light themes */
.sa-btn{border:1px solid var(--p-line);background:var(--p-card);color:var(--p-ink);box-shadow:var(--p-shadow);}
.sa-btn:hover,.sa-btn[aria-expanded="true"]{background:var(--p-soft);border-color:var(--p-accent);}
.sa-drop{background:var(--p-card);border:1px solid var(--p-line);box-shadow:0 18px 45px -16px rgba(0,0,0,.4);}
/* the Hub's shared table rows (admin screens) */
.tbl td{border-bottom-color:var(--p-line);}
.tbl tr:hover td{background:var(--p-soft);}
.tbl th{border-bottom-color:var(--p-line);}

/* prototype @media(max-width:640px) / (max-width:600px) */
@media (max-width:767.98px){
  .topbar.fis-util{height:auto;padding:0;}
  .tb-menu-btn .topbar-user{max-width:110px;}
  .theme-drop{top:44px;right:8px;}
  .fis-tabs{margin:0 -16px 14px;padding:5px 8px 0;border-radius:0;}
  .fis-tab{padding:9px 12px;}
}
@media (max-width:640px){
  .fis-hdr .brand{gap:12px;flex-wrap:wrap;}
  /* the account block becomes a full-width row above the logo: company left, buttons right */
  .topbar.fis-util{order:-1;width:100%;margin-left:0;flex-direction:row;align-items:center;justify-content:space-between;}
  .fis-util #tbTitleWrap{flex:1;}
  .fis-util .fis-util-co{padding-left:0;}
  .fis-hdr .logoBox{height:52px;min-width:52px;}
  .fis-hdr .tb-logo{height:52px;max-width:150px;}
  .fis-util-sw{display:none;}
  .fis-hdr .hdrNow{font-size:calc(14px*var(--fz,1));}
}
@media (max-width:600px){ .gearBtn span{display:none;} }
/* form controls do not inherit the font by default */
button,input,select,textarea{font-family:inherit;}
/* responsive.css hides the old topbar's logo below 768px; the header keeps it (prototype .logoBox at 52px) */
@media (max-width:767.98px){ .fis-hdr #tbLogo{display:block!important;} }