/* ── DESIGN TOKENS (UI_UX_DESIGN.md) ── */
:root {
  --navy:#16277A; --navy2:#283C9D; --wrapped:#000B8C;
  --white:#FFFFFF;
  --gold:#BE9E74; --gold-d:#C18F59; --gold-l:#EFD9BB; --gold-p:#F9F4EE;
  --err:#EC0D40; --err-bg:#FDE7EC;
  --ok:#48A729; --ok2:#26BF4F;
  --warn:#FF9600; --yel:#F9DB10;
  --g50:#F7F9F9; --g100:#E5E5E5; --g200:#D4D4D4;
  --g300:#BDBDBD; --g400:#9E9E9E; --g600:#666; --g800:#333;
  /* radius scale */
  --rsm:8px; --rmd:14px; --rlg:20px; --rxl:28px; --rpill:100px;
  /* shadows */
  --sc:0 2px 8px rgba(22,39,122,.06);
  --sr:0 4px 16px rgba(22,39,122,.10);
  --sf:0 8px 28px rgba(22,39,122,.18);
  /* spacing 8px grid */
  --xs:4px;--sm:8px;--md:16px;--lg:24px;--xl:32px;--2xl:48px;
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
body{font-family:-apple-system,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;background:var(--g50);color:var(--g800);height:100vh;display:flex;overflow:hidden}

/* ── SIDEBAR ──
   Collapses to an icon-only rail by default and expands on hover, so the
   main content (flex:1, reflows automatically) gets the screen space back
   whenever the nav isn't actually in use. */
.sb{width:76px;min-width:76px;background:var(--navy);display:flex;flex-direction:column;padding:var(--lg) 0;box-shadow:var(--sf);z-index:10;overflow:hidden;transition:width .2s ease,min-width .2s ease}
.sb:hover{width:220px;min-width:220px}
.sb-brand{display:flex;align-items:center;gap:var(--sm);padding:0 var(--lg) var(--xl);border-bottom:1px solid rgba(255,255,255,.1);margin-bottom:var(--sm);transition:padding .2s ease}
.sb:not(:hover) .sb-brand{padding:0 0 var(--xl);justify-content:center}
/* ZUS Coffee "Z" app icon (gold-on-navy mark) */
.sb-ico{width:38px;height:38px;border-radius:var(--rmd);display:flex;align-items:center;justify-content:center;overflow:hidden;flex-shrink:0}
.sb-ico img{width:100%;height:100%;object-fit:contain}
.sb-brandtext{min-width:0;overflow:hidden;white-space:nowrap;opacity:1;transition:opacity .15s ease .05s}
.sb:not(:hover) .sb-brandtext{opacity:0;width:0}
.sb-name{font-size:16px;font-weight:700;color:var(--white);line-height:1.2}
.sb-sub{font-size:10px;font-weight:500;color:var(--gold-l)}
.sb-sec{font-size:9px;font-weight:700;color:rgba(255,255,255,.3);letter-spacing:1.4px;text-transform:uppercase;padding:var(--sm) var(--lg) var(--xs);margin-top:var(--sm);white-space:nowrap;overflow:hidden}
.nb{display:flex;align-items:center;gap:var(--sm);padding:10px var(--lg);color:rgba(255,255,255,.62);font-size:13px;font-weight:500;border:none;background:none;width:100%;text-align:left;font-family:-apple-system,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;cursor:pointer;position:relative;transition:background .15s,color .15s,padding .2s ease;overflow:hidden;white-space:nowrap}
.sb:not(:hover) .nb{justify-content:center;padding-left:0;padding-right:0}
.nb:hover{background:rgba(255,255,255,.07);color:var(--white)}
.nb.active{background:rgba(255,255,255,.12);color:var(--white)}
.nb.active::before{content:'';position:absolute;left:0;top:7px;bottom:7px;width:3px;background:var(--gold);border-radius:0 4px 4px 0}
.ni{font-size:15px;width:18px;text-align:center;flex-shrink:0}
.nb-label{opacity:1;transition:opacity .15s ease .05s}
.sb:not(:hover) .nb-label{opacity:0;width:0;overflow:hidden}
.nbadge{margin-left:auto;background:var(--err);color:#fff;font-size:9px;font-weight:700;padding:2px 6px;border-radius:var(--rpill)}
.sb:not(:hover) .nbadge{display:none}
.sb-foot{margin-top:auto;padding:var(--lg);border-top:1px solid rgba(255,255,255,.1);transition:padding .2s ease}
.sb:not(:hover) .sb-foot{padding:var(--md) 0}
.sb:not(:hover) .sb-foot button{display:none}
.sb-user{display:flex;align-items:flex-start;gap:var(--sm)}
.sb:not(:hover) .sb-user{justify-content:center}
.sb-av{width:32px;height:32px;border-radius:var(--rpill);background:var(--gold);color:var(--navy);display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;flex-shrink:0;margin-top:1px}
.sb-usertext{opacity:1;transition:opacity .15s ease .05s}
.sb:not(:hover) .sb-usertext{opacity:0;width:0;overflow:hidden}
.sb-un{font-size:13px;font-weight:600;color:var(--white)}
.sb-ur{font-size:10px;color:rgba(255,255,255,.5);line-height:1.4;margin-top:2px}
@media (prefers-reduced-motion: reduce){.sb,.sb-brand,.sb-foot,.nb,.nb-label,.sb-brandtext,.sb-usertext{transition:none}}

/* ── TEAM ACCESS (profile cards) ── */
.team-grid{display:flex;flex-wrap:wrap;gap:var(--lg)}
.team-card{position:relative;width:160px;background:var(--white);border-radius:var(--rlg);box-shadow:var(--sc);padding:var(--lg) var(--md);display:flex;flex-direction:column;align-items:center;text-align:center;gap:4px}
.team-card-remove{position:absolute;top:8px;right:8px;width:22px;height:22px;border-radius:50%;border:none;background:var(--g50);color:var(--g400);cursor:pointer;font-size:11px;display:flex;align-items:center;justify-content:center;transition:background .15s,color .15s}
.team-card-remove:hover{background:var(--err);color:#fff}
.team-avatar-wrap{position:relative;width:72px;height:72px;cursor:pointer;display:block}
.team-avatar{width:72px;height:72px;border-radius:50%;background-size:cover;background-position:center;background-color:var(--g100)}
.team-avatar-fallback{display:flex;align-items:center;justify-content:center;font-size:22px;font-weight:700;color:var(--navy);background:var(--gold)}
.team-avatar-edit{position:absolute;bottom:0;right:0;width:24px;height:24px;border-radius:50%;background:var(--navy);color:#fff;display:flex;align-items:center;justify-content:center;font-size:11px;border:2px solid #fff;opacity:0;transition:opacity .15s;cursor:pointer}
.team-avatar-wrap:hover .team-avatar-edit{opacity:1}
.team-card-name{font-size:12.5px;font-weight:700;color:var(--navy);margin-top:6px}
.team-card-title{font-size:11px}
.team-card-add{border:2px dashed var(--g200);box-shadow:none;background:var(--g50)}
.team-avatar-add{cursor:default;font-size:22px}
.team-add-input{width:100%;font-size:11.5px;padding:6px 8px;text-align:center}
@media (prefers-reduced-motion: reduce){.team-avatar-edit{transition:none}}

/* ── MAIN ── */
.main{flex:1;display:flex;flex-direction:column;overflow:hidden}
.topbar{background:var(--white);border-bottom:1px solid var(--g100);padding:0 var(--xl);height:62px;display:flex;align-items:center;justify-content:space-between;flex-shrink:0}
/* Poppins ExtraBold — "Hello, ZUSSie" display pattern */
#tbh{font-size:22px;font-weight:800;color:var(--navy)}
#tbp{font-size:11px;color:var(--g400)}
.tbr{display:flex;align-items:center;gap:var(--sm)}
.tb-ctl{display:flex;align-items:center;gap:6px;background:var(--g50);border:1px solid var(--g100);border-radius:var(--rmd);padding:5px 10px}
.tb-ctl-label{font-size:10px;font-weight:700;color:var(--g400);text-transform:uppercase;letter-spacing:.4px;white-space:nowrap}
.tb-ctl-value{font-size:11.5px;color:var(--navy);font-weight:600;max-width:180px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tb-ctl-btn{border:none;background:none;color:var(--gold-d);font-size:11px;font-weight:700;cursor:pointer;padding:0;white-space:nowrap}
.tb-ctl-btn:hover{text-decoration:underline}
.page{flex:1;overflow-y:auto;padding:var(--xl)}
.view{display:none}
.view.active{display:block}

/* ── BUTTONS — 4 variants (Primary/Outlined/Disabled/Ghost) ── */
.btn{display:inline-flex;align-items:center;gap:5px;font-family:-apple-system,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;font-weight:600;font-size:13px;border:none;cursor:pointer;transition:transform .1s,background .12s;white-space:nowrap;border-radius:var(--rpill)}
/* Primary — solid navy pill "Order Now" */
.bp{background:var(--navy);color:var(--white);padding:9px 20px}
.bp:hover{background:var(--navy2)}
.bp:active{transform:scale(.97)}
/* Outlined — navy border "Reorder" */
.bo{background:transparent;color:var(--navy);border:2px solid var(--navy);padding:8px 18px}
.bo:hover{background:rgba(22,39,122,.05)}
/* Disabled — gray "Unavailable" */
.bd{background:var(--g200);color:var(--g400);padding:9px 20px;cursor:not-allowed;opacity:.65}
/* Ghost — text link "Set up later ›" */
.bg{background:none;border:none;color:var(--navy);padding:6px 8px;font-size:12px}
.bg:hover{text-decoration:underline}
.sm{padding:6px 14px!important;font-size:11px!important}
.rad{border-radius:var(--rmd)!important}
.ib{width:32px;height:32px;border-radius:var(--rsm);background:var(--g50);color:var(--g600);border:1px solid var(--g100);display:inline-flex;align-items:center;justify-content:center;font-size:13px;cursor:pointer}
.ib:hover{background:var(--g100)}

/* ── KPI CARDS ── */
.kgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--md);margin-bottom:var(--xl)}
.kc{background:var(--white);border-radius:var(--rlg);box-shadow:var(--sc);padding:var(--lg);position:relative;overflow:hidden}
.kc::after{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:var(--kcc,var(--navy));border-radius:var(--rlg) var(--rlg) 0 0}
.cn{--kcc:var(--navy)}.ce{--kcc:var(--err)}.cs{--kcc:var(--ok)}.cg{--kcc:var(--gold-d)}.cw{--kcc:var(--warn)}
.kl{font-size:10px;font-weight:600;color:var(--g400);text-transform:uppercase;letter-spacing:.6px;margin-bottom:var(--sm)}
.kv{font-size:24px;font-weight:800;color:var(--navy);line-height:1.1;margin-bottom:3px;min-height:calc(1.1em * 2);display:flex;align-items:flex-end}
.kd{font-size:11px;font-weight:500;display:flex;align-items:center;gap:3px}
.up{color:var(--ok)}.dn{color:var(--err)}.nt{color:var(--g400)}
.ks{font-size:10px;color:var(--g300);margin-top:3px}
.kbg{position:absolute;bottom:var(--md);right:var(--md);font-size:30px;opacity:.07}

/* ── CHARTS ── */
.crow{display:grid;grid-template-columns:2fr 1fr;gap:var(--md);margin-bottom:var(--xl)}
.cc{background:var(--white);border-radius:var(--rlg);box-shadow:var(--sc);padding:var(--lg)}
.ct{font-size:13px;font-weight:700;color:var(--navy)}
.cs2{font-size:11px;color:var(--g400);margin-top:2px;margin-bottom:var(--md)}

/* ── SECTION HEADER ── */
.sh{display:flex;align-items:center;justify-content:space-between;margin-bottom:var(--md)}
.sht{font-size:14px;font-weight:700;color:var(--navy)}

/* Data Warehouse's Bronze/Gold cards, side by side at the top of the page —
   the two stages of the one local DuckDB file, shown as equal-weight peers. */
.ds-stage-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--lg);align-items:start}
@media (max-width:980px){.ds-stage-grid{grid-template-columns:1fr}}

/* ── TABLE ── */
.tw{background:var(--white);border-radius:var(--rlg);box-shadow:var(--sc);overflow:hidden}
.tbar{padding:var(--sm) var(--lg);border-bottom:1px solid var(--g100);display:flex;align-items:center;gap:var(--sm);flex-wrap:wrap}
.inp{padding:7px 12px;border:1px solid var(--g200);border-radius:var(--rmd);font-family:-apple-system,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;font-size:12px;color:var(--g800);outline:none;background:var(--white);transition:border-color .15s}
.inp:focus{border-color:var(--navy)}
.inp::placeholder{color:var(--g300)}
.isearch{flex:1;min-width:180px}
.sel{padding:7px 12px;border:1px solid var(--g200);border-radius:var(--rmd);font-family:-apple-system,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;font-size:12px;background:var(--white);outline:none;cursor:pointer}
.sel:focus{border-color:var(--navy)}
table{width:100%;border-collapse:collapse}
thead th{padding:9px var(--lg);font-size:10px;font-weight:600;color:var(--g400);text-transform:uppercase;letter-spacing:.5px;background:var(--g50);border-bottom:1px solid var(--g100);white-space:nowrap;cursor:pointer;user-select:none;text-align:left}
thead th:hover{color:var(--navy)}
.sa::after{content:' ▲';opacity:.7}
.sd::after{content:' ▼';opacity:.7}
tbody td{padding:12px var(--lg);font-size:12px;border-bottom:1px solid var(--g100);vertical-align:middle}
tbody tr:last-child td{border-bottom:none}
tbody tr:hover td{background:rgba(22,39,122,.015)}
.tr{text-align:right}
.perm-yes{color:var(--ok)}
.perm-no{color:var(--g400)}
.perm-cb{width:16px;height:16px;accent-color:var(--navy);cursor:pointer}
.mono{font-family:'Courier New',monospace;font-size:11px;letter-spacing:.3px}

/* ── BADGES (semantic colors from UI_UX_DESIGN.md) ── */
.badge{display:inline-flex;align-items:center;gap:3px;padding:3px 9px;border-radius:var(--rpill);font-size:10px;font-weight:700;white-space:nowrap}
.badge::before{content:'●';font-size:6px}
.bpaid{background:rgba(72,167,41,.12);color:var(--ok)}
.bovr{background:var(--err-bg);color:var(--err)}
.bpen{background:rgba(255,150,0,.12);color:var(--warn)}
.bdft{background:var(--g100);color:var(--g600)}
.bdis{background:rgba(249,219,16,.25);color:#7a5500}
.bvod{background:var(--g100);color:var(--g400)}
.bclr{background:rgba(38,191,79,.12);color:var(--ok2)}
.bhigh{background:var(--err-bg);color:var(--err)}
.bmed{background:rgba(255,150,0,.12);color:var(--warn)}
.blow{background:rgba(72,167,41,.12);color:var(--ok)}

/* ── AMOUNT COLORS ── */
.apos{color:var(--ok);font-weight:700}
.aneg{color:var(--err);font-weight:700}
.anav{color:var(--navy);font-weight:700}

/* ── PAGINATION ── */
.pager{display:flex;align-items:center;justify-content:space-between;padding:var(--md) var(--lg);border-top:1px solid var(--g100)}
.pi{font-size:11px;color:var(--g400)}
.pc{display:flex;gap:3px}
.pgb{width:28px;height:28px;border-radius:var(--rsm);border:1px solid var(--g200);background:none;font-family:-apple-system,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;font-size:11px;cursor:pointer;color:var(--g600)}
.pgb:hover,.pgb.active{background:var(--navy);color:#fff;border-color:var(--navy)}
.pgb:disabled{opacity:.4;cursor:default}

/* ── CUSTOMER TIER CARDS (Easy Goer/Rising Star/Super Addict/ZUS Elite pattern) ── */
.tgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--md);margin-bottom:var(--xl)}
.tcard{border-radius:var(--rlg);padding:var(--lg);box-shadow:var(--sc);cursor:pointer;transition:box-shadow .15s,transform .15s}
.tcard:hover{box-shadow:var(--sr);transform:translateY(-2px)}
.tnew{background:var(--g50);color:var(--g800)}
.treg{background:#E4EFF8;color:var(--navy)}
.tvip{background:#293881;color:#fff}
.tent{background:#051D3C;color:#fff}
.tci{font-size:22px;margin-bottom:var(--sm)}
.tcn{font-size:14px;font-weight:700}
.tcc{font-size:26px;font-weight:800;margin:3px 0}
.tch{font-size:10px;opacity:.55}
.tent .tcn{color:var(--gold-l)}
.tent .tcc{color:var(--gold)}

/* ── Startup person picker: hover profile card ── */
.person-pick-row{position:relative}
.person-popover{
  position:absolute; left:calc(100% + 20px); top:50%;
  transform:translateY(-50%) translateX(-6px) scale(.94);
  width:180px; background:#fff; border:1px solid var(--g100); border-radius:var(--rlg); box-shadow:var(--sr);
  padding:var(--lg); text-align:center;
  opacity:0; pointer-events:none;
  transition:opacity .16s ease, transform .16s ease;
  z-index:50;
}
.person-pick-row:hover .person-popover{opacity:1; transform:translateY(-50%) translateX(0) scale(1); pointer-events:auto}
.person-popover-avatar{
  width:64px; height:64px; border-radius:50%; margin:0 auto 10px;
  background-size:cover; background-position:center;
  display:flex; align-items:center; justify-content:center;
  font-size:20px; font-weight:700;
}
.person-popover-name{font-size:13px;font-weight:700;color:var(--navy)}
.person-popover-title{font-size:11.5px;color:var(--g600);margin-top:2px}
@media (prefers-reduced-motion: reduce){.person-popover{transition:none}}
.tvip .tcc{color:var(--gold-l)}

/* ── AGING ── */
.agrid{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--md);margin-bottom:var(--xl)}
.ac{background:var(--white);border-radius:var(--rlg);box-shadow:var(--sc);padding:var(--lg);text-align:center}
.ar{font-size:10px;font-weight:600;color:var(--g400);letter-spacing:.5px;margin-bottom:var(--sm);text-transform:uppercase}
.aa{font-size:20px;font-weight:800;margin-bottom:3px}
.an{font-size:11px;color:var(--g400)}
.prog{height:5px;background:var(--g100);border-radius:var(--rpill);overflow:hidden;margin-top:var(--sm)}
.progb{height:100%;border-radius:var(--rpill);transition:width .5s}

/* ── FORMS ── */
.fg2{display:grid;grid-template-columns:1fr 1fr;gap:var(--md)}
.fg{display:flex;flex-direction:column;gap:var(--xs)}
.full{grid-column:1/-1}
.fl{font-size:10px;font-weight:600;color:var(--g600);text-transform:uppercase;letter-spacing:.5px}
.fi,.fs,.ft{padding:9px 12px;border:1px solid var(--g200);border-radius:var(--rmd);font-family:-apple-system,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;font-size:13px;color:var(--g800);outline:none;background:var(--white);transition:border-color .15s,box-shadow .15s}
.fi:focus,.fs:focus,.ft:focus{border-color:var(--navy);box-shadow:0 0 0 3px rgba(22,39,122,.08)}
.fi.ef{border-color:var(--err)}
.ft{resize:vertical;min-height:68px}
.fe{font-size:10px;color:var(--err);margin-top:2px;min-height:14px}

/* ── MODAL ── */
.ov{position:fixed;inset:0;background:rgba(0,0,0,.4);display:none;align-items:center;justify-content:center;z-index:200}
.ov.open{display:flex}

/* ── USER SELECT (role/person picker) ANIMATIONS ── */
#user-select-overlay.open{animation:authBackdropIn .3s ease both}
#user-select-overlay.auth-closing{animation:authBackdropOut .22s ease both}
@keyframes authBackdropIn{from{opacity:0}to{opacity:1}}
@keyframes authBackdropOut{from{opacity:1;transform:scale(1)}to{opacity:0;transform:scale(.97)}}
#user-select-overlay .sb-ico{animation:authLogoIn .4s cubic-bezier(.34,1.56,.64,1) both}
@keyframes authLogoIn{from{transform:scale(.5);opacity:0}to{transform:scale(1);opacity:1}}
#user-select-overlay #role-pick-screen>div:first-child,
#user-select-overlay #person-pick-screen>div:first-child{animation:authFadeUp .4s .08s ease both}
@keyframes authFadeUp{from{transform:translateY(10px);opacity:0}to{transform:none;opacity:1}}
#user-select-overlay .tcard{animation:authFadeUp .4s ease both}
#user-select-overlay .tcard:nth-child(1){animation-delay:.15s}
#user-select-overlay .tcard:nth-child(2){animation-delay:.22s}
#user-select-overlay .tcard:active{transform:scale(.97);transition:transform .1s}
#user-select-overlay label{animation:authFadeUp .4s .3s ease both}
@keyframes authSlideOutLeft{from{transform:translateX(0);opacity:1}to{transform:translateX(-32px);opacity:0}}
@keyframes authSlideInRight{from{transform:translateX(32px);opacity:0}to{transform:translateX(0);opacity:1}}
@keyframes authSlideOutRight{from{transform:translateX(0);opacity:1}to{transform:translateX(32px);opacity:0}}
@keyframes authSlideInLeft{from{transform:translateX(-32px);opacity:0}to{transform:translateX(0);opacity:1}}
.auth-slide-out-left{animation:authSlideOutLeft .18s ease both}
.auth-slide-in-right{animation:authSlideInRight .3s .06s ease both}
.auth-slide-out-right{animation:authSlideOutRight .18s ease both}
.auth-slide-in-left{animation:authSlideInLeft .3s .06s ease both}
#user-select-overlay #person-pick-list>div{animation:authFadeUp .35s ease both}
#user-select-overlay #person-pick-list>div:nth-child(1){animation-delay:.08s}
#user-select-overlay #person-pick-list>div:nth-child(2){animation-delay:.14s}
#user-select-overlay #person-pick-list>div:nth-child(3){animation-delay:.2s}
#user-select-overlay #person-pick-list>div:nth-child(4){animation-delay:.26s}
@media (prefers-reduced-motion: reduce){
  #user-select-overlay.open,#user-select-overlay .sb-ico,#user-select-overlay #role-pick-screen>div:first-child,
  #user-select-overlay #person-pick-screen>div:first-child,#user-select-overlay .tcard,#user-select-overlay label,
  #user-select-overlay #person-pick-list>div,.auth-slide-out-left,.auth-slide-in-right,.auth-slide-out-right,.auth-slide-in-left{animation:none}
}
.modal{background:var(--white);border-radius:var(--rxl);box-shadow:var(--sf);width:600px;max-width:96vw;max-height:90vh;overflow-y:auto}
.mhd{padding:var(--md) var(--xl);border-bottom:1px solid var(--g100);display:flex;align-items:center;justify-content:space-between;position:sticky;top:0;background:var(--white);z-index:1}
.mtitle{font-size:16px;font-weight:700;color:var(--navy)}
.mclose{width:28px;height:28px;border-radius:var(--rsm);background:var(--g50);border:none;font-size:13px;cursor:pointer;color:var(--g600)}
.mclose:hover{background:var(--g100)}
.mbody{padding:var(--xl)}
.mft{padding:var(--md) var(--xl);border-top:1px solid var(--g100);display:flex;align-items:center;justify-content:flex-end;gap:var(--sm);position:sticky;bottom:0;background:var(--white)}

/* ── LINE ITEMS ── */
.lit{width:100%;border-collapse:collapse;margin:var(--md) 0}
.lit th{background:var(--g50);font-size:10px;font-weight:600;color:var(--g400);padding:8px var(--md);text-transform:uppercase;text-align:left}
.lit td{padding:7px var(--md);font-size:12px;border-bottom:1px solid var(--g100)}
.lit tfoot td{font-weight:700;color:var(--navy);border-bottom:none}
.lit .deli{cursor:pointer;color:var(--err);font-size:14px;border:none;background:none}

/* ── TABS ── */
.tabs{display:flex;border-bottom:1px solid var(--g100);margin-bottom:var(--lg)}
.tab{padding:8px var(--lg);border:none;background:none;font-family:-apple-system,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;font-size:12px;font-weight:500;color:var(--g400);cursor:pointer;border-bottom:2px solid transparent;margin-bottom:-1px}
.tab:hover{color:var(--navy)}
.tab.active{color:var(--navy);font-weight:700;border-bottom-color:var(--navy)}

/* ── TOAST ── */
.ttray{position:fixed;bottom:var(--xl);right:var(--xl);display:flex;flex-direction:column;gap:var(--sm);z-index:999}
.toast{display:flex;align-items:flex-start;gap:var(--sm);padding:9px var(--md);background:var(--white);border-radius:var(--rmd);box-shadow:var(--sr);border-left:4px solid var(--ok);font-size:12px;font-weight:500;min-width:250px;animation:tsIn .25s ease}
.toast.error{border-left-color:var(--err)}
.toast.warning{border-left-color:var(--warn)}
.toast.info{border-left-color:var(--navy)}
@keyframes tsIn{from{transform:translateX(110%);opacity:0}to{transform:none;opacity:1}}

/* ── UPLOAD ZONE ── */
.uzone{border:2px dashed var(--g200);border-radius:var(--rlg);padding:var(--2xl);text-align:center;background:var(--g50);cursor:pointer;transition:border-color .15s,background .15s}
.uzone:hover{border-color:var(--navy);background:rgba(22,39,122,.02)}

/* ── MISC UTILS ── */
.card{background:var(--white);border-radius:var(--rlg);box-shadow:var(--sc);padding:var(--lg)}

/* ── AUTOMATION: uniform square-ish tiles ── */
.auto-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--xl);align-items:stretch}
.auto-tile{display:flex;flex-direction:column;height:380px}
.auto-tile-title{font-size:13px;font-weight:700;color:var(--navy);margin-bottom:var(--md);flex-shrink:0}
.auto-tile-body{flex:1;min-height:0;display:flex;flex-direction:column;gap:var(--md);overflow-y:auto}
.row{display:flex;align-items:center}
.gsm{gap:var(--sm)}
.gmd{gap:var(--md)}
.mb-md{margin-bottom:var(--md)}
.mb-lg{margin-bottom:var(--lg)}
.mb-xl{margin-bottom:var(--xl)}
.muted{font-size:11px;color:var(--g400)}
/* Scheduling grid cell — 3-part layout matching the real roster
   (Operation/FOSS/FOSS Design/Screenshot 2026-07-23 181841.png): bold
   shift time, a thin divider bar, an italic bulleted footnote. */
.sched-time{width:100%;font-weight:700;text-align:center;color:var(--navy)}
.sched-time-pattern{font-weight:400;font-style:italic;color:var(--g400);background:var(--g100)}
.sched-divider{height:4px;border-radius:var(--rpill);background:var(--g100);margin:5px 2px 4px}
.sched-footnote{list-style:none;margin:0;padding:0;font-style:italic;font-size:10.5px;color:var(--navy2);line-height:1.5}
.sched-footnote li{padding-left:10px;position:relative}
.sched-footnote li::before{content:'•';position:absolute;left:0}

/* ── Roster CARD grid ────────────────────────────────────────────────
   One card per staff/day, sized to be READ: the labelled rows are the
   point of the card, so columns get a real minimum width and the grid
   scrolls sideways rather than shrinking type past legibility.
   Every card is the same fixed height in every state (worked / off /
   leave / error) — a grid whose cards resize by content can't be scanned
   across a row. */
:root{ --rc-h:92px; --rc-gap:6px; }

.rc-wrap{overflow-x:auto;overflow-y:visible;padding-bottom:var(--sm)}
.rc-grid{display:grid;gap:var(--rc-gap);align-items:stretch}
.rc-head{
  font-size:10.5px;font-weight:700;color:var(--g600);text-align:center;
  padding:4px 2px;border-radius:5px;line-height:1.15;
}
.rc-head.rc-flag{color:#e5484d;background:#FDECEA}
.rc-head .rc-dow{display:block;font-size:8.5px;font-weight:600;color:var(--g400)}
.rc-staff{
  position:sticky;left:0;z-index:2;background:var(--g50);
  padding:7px 9px;border-radius:10px;border:1px solid var(--g100);
  display:flex;flex-direction:column;gap:3px;justify-content:center;
  height:var(--rc-h);overflow:hidden;
}
.rc-staff-name{font-weight:800;font-size:12.5px;color:var(--navy);line-height:1.2;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rc-staff-meta{font-size:9.5px;color:var(--g400);font-weight:600;line-height:1.35;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rc-rest{
  font-size:9.5px;padding:1px 3px;height:19px;line-height:1.3;min-height:0;
  border-radius:4px;width:100%;border:1px solid var(--g200);background:#fff;
  color:var(--navy2);font-weight:700;cursor:pointer;text-align-last:center;
}
.rc-corner{position:sticky;left:0;z-index:4;background:#fff}

/* The whole card carries the session colour — the shift type is the first
   thing you need off a month grid, and a 4px band made you hunt for it.
   Middle is green rather than amber: amber sat too close to the plum and
   indigo in peripheral vision, and no amber dark enough for white text
   still reads as amber. Green separates cleanly from both at a glance,
   which is the whole point of colouring the card. All three clear 4.5:1
   against white text. */
.rc-card{
  cursor:pointer;height:var(--rc-h);display:flex;flex-direction:column;
  border:1px solid var(--g100);border-radius:10px;background:#fff;
  overflow:hidden;box-shadow:0 1px 2px rgba(22,39,122,.08);
  transition:box-shadow .12s ease, transform .12s ease;
}
.rc-card:focus-visible{outline:2px solid var(--navy2);outline-offset:2px}
.rc-card:hover,.rc-card:focus-within{
  box-shadow:0 6px 18px -6px rgba(22,39,122,.5);transform:translateY(-1px);
  position:relative;z-index:5;
}
@media (prefers-reduced-motion:reduce){.rc-card{transition:none}.rc-card:hover{transform:none}}

.rc-MORNING{background:#283C9D;border-color:#1D2E7D}
.rc-MIDDLE {background:#1F7047;border-color:#175838}
.rc-CLOSING{background:#6F4595;border-color:#5A3579}
/* Late closing — a Closing shift that runs past the standard close.
   Orange, so the person locking up after hours is findable in a month
   without reading end times. */
.rc-LATE{background:#C2410C;border-color:#9A340A}

/* everything inside a coloured card reads off the same white ramp */
.rc-MORNING .rc-sess,.rc-MIDDLE .rc-sess,.rc-CLOSING .rc-sess,.rc-LATE .rc-sess{color:rgba(255,255,255,.72)}
.rc-MORNING .rc-time,.rc-MIDDLE .rc-time,.rc-CLOSING .rc-time,.rc-LATE .rc-time{color:#fff}
.rc-MORNING .rc-k,.rc-MIDDLE .rc-k,.rc-CLOSING .rc-k,.rc-LATE .rc-k{color:rgba(255,255,255,.6)}
.rc-MORNING .rc-v,.rc-MIDDLE .rc-v,.rc-CLOSING .rc-v,.rc-LATE .rc-v{color:#fff}
.rc-MORNING .rc-time-pattern,.rc-MIDDLE .rc-time-pattern,.rc-CLOSING .rc-time-pattern,.rc-LATE .rc-time-pattern{color:rgba(255,255,255,.9)}
.rc-MORNING .rc-time::placeholder,.rc-MIDDLE .rc-time::placeholder,.rc-CLOSING .rc-time::placeholder,.rc-LATE .rc-time::placeholder{color:rgba(255,255,255,.5)}
.rc-MORNING .rc-time:focus,.rc-MIDDLE .rc-time:focus,.rc-CLOSING .rc-time:focus,.rc-LATE .rc-time:focus{outline-color:#fff}
.rc-MORNING .rc-role select,.rc-MIDDLE .rc-role select,.rc-CLOSING .rc-role select,.rc-LATE .rc-role select{
  background:rgba(255,255,255,.16);border-color:rgba(255,255,255,.34);color:#fff;
}
.rc-MORNING .rc-role select.rc-role-auto,.rc-MIDDLE .rc-role select.rc-role-auto,
.rc-CLOSING .rc-role select.rc-role-auto,.rc-LATE .rc-role select.rc-role-auto{color:rgba(255,255,255,.82)}
.rc-MORNING .rc-role select option,.rc-MIDDLE .rc-role select option,
.rc-CLOSING .rc-role select option,.rc-LATE .rc-role select option{color:var(--navy2);background:#fff}

/* only the leave card still uses a word here — every shift card is
   identified by its colour instead */
.rc-sess{
  font-size:8px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;
  text-align:center;padding:6px 2px 0;color:var(--g400);line-height:1.1;
}
.rc-time{
  cursor:text;width:100%;border:none;background:transparent;text-align:center;
  font-weight:800;font-size:12.5px;color:var(--navy);padding:8px 3px 3px;
  font-variant-numeric:tabular-nums;line-height:1.2;
}
.rc-time:focus{outline:1.5px solid var(--navy2);outline-offset:-2px;border-radius:5px}
.rc-time-pattern{font-weight:600;font-style:italic;color:var(--g400)}
.rc-time::placeholder{color:var(--g300);font-weight:400;font-style:normal}

.rc-rows{display:flex;flex-direction:column;gap:0;padding:0 7px;margin-top:auto}
.rc-row{display:flex;justify-content:space-between;align-items:baseline;gap:5px;line-height:1.45}
.rc-k{color:var(--g400);font-weight:600;text-transform:uppercase;letter-spacing:.03em;font-size:8px}
.rc-v{font-weight:700;color:var(--navy2);font-size:9.5px;font-variant-numeric:tabular-nums;white-space:nowrap}
.rc-v-off{color:var(--g300);font-weight:600}

.rc-role{padding:3px 7px 5px}
.rc-role select{
  width:100%;font-size:9px;padding:0 2px;border-radius:4px;line-height:1.4;
  border:1px solid var(--g100);background:var(--g50);color:var(--navy2);
  font-weight:800;height:17px;cursor:pointer;text-align-last:center;
}
.rc-role select.rc-role-auto{font-weight:500;font-style:italic;color:var(--g400)}

/* uncoloured states keep the same box so the row still scans */
.rc-off{background:var(--g50);border:1px dashed var(--g200);box-shadow:none}
.rc-off:hover{box-shadow:none;transform:none}
.rc-off .rc-time{color:var(--g400)}
.rc-leave{background:#F6E7B8;border-color:#DCBF62}
.rc-leave .rc-sess{color:#7A5B00}
.rc-leave .rc-time{color:#5C4400}
.rc-error{background:#C1291F;border-color:#9E1F17}
.rc-error .rc-sess,.rc-error .rc-k{color:rgba(255,255,255,.7)}
.rc-error .rc-time,.rc-error .rc-v{color:#fff}
.rc-err{font-size:9px;font-weight:800;color:#fff;text-align:center;padding:2px}

.rc-key{
  display:flex;flex-wrap:wrap;gap:4px 16px;align-items:center;
  margin-top:8px;font-size:10px;color:var(--g600);font-weight:600;
}
.rc-key span{display:inline-flex;align-items:center;gap:5px}
.rc-key i{width:11px;height:11px;border-radius:3px;display:inline-block}
.rc-key-m{background:#283C9D}
.rc-key-d{background:#1F7047}
.rc-key-c{background:#6F4595}
.rc-key-x{background:#C2410C}
.rc-key-t{background:repeating-linear-gradient(45deg,#EEF1F6,#EEF1F6 3px,#DCE1EA 3px,#DCE1EA 6px);border:1px solid var(--g200)}
.rc-key-o{background:var(--g50);border:1px dashed var(--g300)}
.rc-key-l{background:#F6E7B8;border:1px solid #DCBF62}

/* OL task list — a non-shift cell for OM/OL/OLIT. Deliberately colourless:
   the three session colours mean "this is bar coverage", and a task note
   is not coverage. */
.rc-tasknote{
  background:repeating-linear-gradient(45deg,#F7F8FB,#F7F8FB 5px,#EFF2F7 5px,#EFF2F7 10px);
  border:1px solid var(--g200);box-shadow:none;cursor:default;padding:4px 5px;gap:2px;
}
.rc-tasknote:hover{box-shadow:none;transform:none}
.rc-tasklbl{
  font-size:7.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;
  color:var(--g400);text-align:center;line-height:1.1;
}
.rc-tasktxt{
  flex:1;width:100%;resize:none;border:1px solid var(--g200);border-radius:5px;
  background:#fff;font:inherit;font-size:9px;line-height:1.3;padding:3px 4px;
  color:var(--navy2);font-family:inherit;
}
.rc-tasktxt:focus{outline:1.5px solid var(--navy2);outline-offset:-1px}
.rc-tasktxt::placeholder{color:var(--g300)}
/* The Outlet Leader's card (leader_bar.py): a staff card, its time on the
   bar on top and the task note under it — no box, the card is the box. The
   note sits at the bottom, so a card with no time on the bar still reads as
   an empty shift card with a task written in it. */
.rc-olcard .rc-olrows{margin-top:0}
.rc-olnote{
  margin-top:auto;width:100%;resize:none;border:0;outline:0;background:transparent;
  font:inherit;font-size:9px;line-height:1.3;padding:2px 7px 6px;color:var(--g600);
}
.rc-olnote::placeholder{color:var(--g300)}
.rc-olnote:focus{background:rgba(22,39,122,.04)}
:is(.rc-MORNING,.rc-MIDDLE,.rc-CLOSING) .rc-olnote{color:rgba(255,255,255,.9)}
:is(.rc-MORNING,.rc-MIDDLE,.rc-CLOSING) .rc-olnote::placeholder{color:rgba(255,255,255,.5)}
:is(.rc-MORNING,.rc-MIDDLE,.rc-CLOSING) .rc-olnote:focus{background:rgba(255,255,255,.1)}
.day-who-ol{font-size:8px;font-weight:800;color:var(--g400);letter-spacing:.04em}

/* Floating warning key — fixed to the viewport like the tab strip, so the
   legend is still reachable when you have scrolled deep into the month. */
.ac-legendbox{
  /* bottom-LEFT: the tab strip already owns the right edge, and a legend
     that covers the view switcher is worse than no legend. Collapsed by
     default so it reads as a floating button until it is wanted. */
  position:fixed;left:112px;bottom:16px;z-index:40;width:290px;max-width:calc(100vw - 130px);
  background:#fff;border:1px solid var(--g200);border-radius:12px;
  box-shadow:0 10px 30px -10px rgba(22,39,122,.45);overflow:hidden;
}
.ac-legendtoggle{
  width:100%;display:flex;justify-content:space-between;align-items:center;
  padding:9px 12px;border:none;background:var(--navy);color:#fff;cursor:pointer;
  font:inherit;font-size:11.5px;font-weight:800;letter-spacing:.02em;
}
.ac-legendtoggle:focus-visible{outline:2px solid #fff;outline-offset:-3px}
.ac-legendbody{max-height:min(58vh,460px);overflow-y:auto;padding:8px 10px 10px}
.ac-legendbox.is-collapsed{width:auto}
.ac-legendbox.is-collapsed .ac-legendbody{display:none}
.ac-legendtoggle span:first-child{white-space:nowrap}
.ac-legendsec{
  font-size:8.5px;font-weight:800;text-transform:uppercase;letter-spacing:.07em;
  color:var(--g400);margin:8px 2px 4px;
}
.ac-legendbody ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:5px}
.ac-legendbody li{display:grid;grid-template-columns:78px 1fr;gap:7px;align-items:start}
.ac-legendbody li em{font-style:normal;font-size:10px;line-height:1.35;color:var(--g600)}
.ac-legendbody .ac-ok{font-size:13px;text-align:center}

/* Calendar list (js/calendar.js). */
.cal-table{width:100%;border-collapse:collapse;font-size:11.5px}
.cal-table th{text-align:left;font-size:10px;font-weight:700;color:var(--g600);text-transform:uppercase;
  letter-spacing:.04em;padding:6px 8px;border-bottom:1px solid var(--g100)}
.cal-table td{padding:6px 8px;border-bottom:1px solid var(--g100);vertical-align:middle}
.cal-table .cal-when{font-weight:700;color:var(--navy);white-space:nowrap}
.cal-table .cal-month-row td{padding-top:12px;font-weight:800;color:var(--navy);border-bottom:2px solid var(--g100)}
.cal-table tr.is-past td{opacity:.5}
.cal-table td.num{text-align:right}

/* Top bar notices (js/notices.js). */
.tb-right{flex:1 1 auto;min-width:0;display:flex;align-items:center;justify-content:flex-end;gap:var(--md)}
.tb-right .tb-slot{flex:0 1 auto}   /* the notices sit left of it; it keeps its gap to the dock */
.tb-notes{display:flex;align-items:center;gap:6px}
.tb-note{position:relative;display:flex;align-items:center;gap:5px;height:32px;padding:0 10px;border-radius:16px;
  border:1px solid var(--g100);background:var(--white);color:var(--g400);font-size:11px;font-weight:700;cursor:pointer}
.tb-note svg{width:16px;height:16px;fill:currentColor}
.tb-note:hover{border-color:var(--navy2);color:var(--navy)}
.tb-note.has{color:var(--navy);border-color:var(--g200)}
.tb-note.is-red{color:var(--err);border-color:var(--err)}
.tb-note-n{min-width:18px;height:18px;padding:0 5px;border-radius:9px;background:var(--err);color:var(--white);
  font-size:10px;line-height:18px;text-align:center}
@media (max-width:900px){.tb-note-l{display:none}}


/* Shift availability: the staff card's mark, and the Assistant's grid. */
.rc-avail{font-size:9px;font-weight:700;color:var(--navy2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.av-grid{border-collapse:collapse;margin:6px 0;font-size:11px}
.av-grid th,.av-grid td{padding:3px 8px;text-align:center}
.av-grid tbody th{text-align:left;color:var(--navy);font-weight:700}
.av-grid thead th{color:var(--g600);font-size:10px;font-weight:700}
.av-who{font-size:11px;padding:4px 0;border-bottom:1px solid var(--g100);cursor:pointer}
.av-who b{color:var(--navy);margin-right:4px}

/* Open slots: a session still short after Auto-fill (api._open_slots). */
.rc-slotrow{
  min-height:28px;display:flex;flex-direction:column;gap:3px;justify-content:center;
}
.rc-slotrow-h{
  font-size:10.5px;font-weight:800;color:var(--err);padding-left:7px;justify-content:center;
}
.rc-slot{
  display:flex;align-items:center;justify-content:space-between;gap:4px;
  padding:3px 6px;border-radius:6px;font-size:10px;line-height:1.2;cursor:help;
  background:var(--err-bg);color:var(--err);border:1px dashed var(--err);
}
.rc-slot b{font-weight:800}
.rc-slot span{font-weight:700;font-size:9px;text-transform:uppercase;letter-spacing:.04em}
.rc-slot.is-ot{background:var(--err);color:var(--white);border-style:solid}

.rc-totrow{
  height:28px;display:flex;align-items:center;justify-content:center;
  font-size:10.5px;font-weight:800;color:var(--navy);background:var(--g50);
  border-radius:6px;font-variant-numeric:tabular-nums;
}

/* ── Daily ALERT cards ───────────────────────────────────────────────
   One card per day of the month, same 31-column rhythm as the roster
   below it, so a problem day lines up with its own roster column instead
   of living in a scrolling list of sentences. Severity is encoded in the
   card's own colour, and each issue is a one-word tag — the full sentence
   stays in the tooltip. A clean day is a flat green tick, so "which days
   are fine" is answerable at a glance too. */
.ac-wrap{margin-bottom:var(--md)}
.ac-title{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;margin-bottom:6px}
.ac-title b{font-size:12.5px;color:var(--navy)}
.ac-legend{display:flex;gap:10px;flex-wrap:wrap;font-size:9.5px;color:var(--g400)}
.ac-legend i{font-style:normal;display:inline-flex;align-items:center;gap:3px}
.ac-legend i::before{content:'';width:7px;height:7px;border-radius:2px;background:currentColor}
.ac-l-crit{color:#e5484d}.ac-l-warn{color:#B27400}.ac-l-ok{color:#2E7D52}

.ac-grid{display:grid;gap:var(--rc-gap);grid-auto-rows:minmax(0,auto)}
.ac-day{
  border-radius:8px;border:1px solid var(--g100);background:#fff;
  min-height:58px;padding:3px 2px;display:flex;flex-direction:column;
  align-items:center;gap:2px;overflow:hidden;
}
.ac-d{font-size:10.5px;font-weight:800;color:var(--g600);line-height:1.1;font-variant-numeric:tabular-nums}
.ac-tag{
  font-size:8.5px;font-weight:700;letter-spacing:.01em;
  padding:2px 4px;border-radius:4px;line-height:1.25;max-width:100%;
  white-space:normal;overflow-wrap:anywhere;text-align:center;
}
.ac-crit{background:#FDECEA;color:#C1291F;border:1px solid #F5C6C0}
.ac-warn{background:#FDF3E0;color:#8A5A00;border:1px solid #F0DCA6}
.ac-info{background:#EFF1FA;color:#3B4A9E;border:1px solid #D5DAF0}
.ac-day.ac-has-crit{border-color:#F0B4AD;background:#FFFAFA}
.ac-day.ac-has-warn{border-color:#EFDCAE;background:#FFFDF7}
.ac-day.ac-clean{background:#F4FAF6;border-color:#CFE7D8}
.ac-ok{font-size:12px;color:#2E7D52;font-weight:800;line-height:1}
.ac-more{font-size:7.5px;color:var(--g400);font-weight:700}

.cal-grid-head{display:grid;grid-template-columns:repeat(7,1fr);gap:6px;margin-bottom:6px}
.cal-grid-head div{text-align:center;font-size:10.5px;font-weight:700;color:var(--g400);text-transform:uppercase}
.cal-grid-body{display:grid;grid-template-columns:repeat(7,1fr);gap:6px}
.cal-cell{min-height:64px;border:1px solid var(--g100);border-radius:var(--rmd);padding:4px;overflow:hidden}
.cal-cell-blank{border:none;background:none}

/* Gantt tab — month coverage heatmap strip (31 clickable day-cells, 3 mini
   coverage bars each) + a single-day time-axis Gantt below it. Two-tier
   design: the strip answers "how do you Gantt a month" (you don't — you
   summarize it and zoom into one day). */
.gantt-strip{display:grid;grid-template-columns:repeat(auto-fill,minmax(34px,1fr));gap:4px}
.gantt-day-cell{border:1px solid var(--g100);border-radius:var(--rsm);padding:3px 2px;cursor:pointer;text-align:center;transition:border-color .12s}
.gantt-day-cell:hover{border-color:var(--navy2)}
.gantt-day-cell.active{border-color:var(--navy);border-width:2px}
.gantt-day-cell .gday-num{font-size:9.5px;font-weight:700;color:var(--g400)}
.gantt-day-mini{height:5px;border-radius:2px;margin-top:2px}
.gantt-axis{position:relative;height:22px;border-bottom:1px solid var(--g100);margin-bottom:6px}
.gantt-axis-tick{position:absolute;top:0;bottom:0;font-size:9px;color:var(--g400);border-left:1px dashed var(--g100);padding-left:2px}
.gantt-row{position:relative;height:30px;border-bottom:1px solid var(--g50)}
.gantt-row-label{position:absolute;left:0;top:0;bottom:0;width:150px;display:flex;align-items:center;font-size:11px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding-right:6px}
.gantt-track{position:absolute;left:150px;right:0;top:0;bottom:0}
.gantt-band{position:absolute;top:0;bottom:0;border-right:1px dashed var(--g100)}
.gantt-bar{position:absolute;top:4px;bottom:4px;border-radius:var(--rsm);font-size:9.5px;color:#fff;display:flex;align-items:center;padding:0 5px;overflow:hidden;white-space:nowrap;box-shadow:var(--sf)}
.bold{font-weight:700}
.nav{color:var(--navy)}
.hr{border:none;border-top:1px solid var(--g100);margin:var(--lg) 0}
.av{border-radius:var(--rpill);display:inline-flex;align-items:center;justify-content:center;font-weight:700;flex-shrink:0}
.amd{width:30px;height:30px;font-size:11px}
.asm{width:24px;height:24px;font-size:9px}
.an1{background:var(--navy);color:#fff}
.ao1{background:var(--ok);color:#fff}
.ae1{background:var(--err);color:#fff}
.aw1{background:var(--warn);color:#fff}
.ag1{background:var(--gold-d);color:#fff}
.ad1{background:var(--wrapped);color:#fff}
::-webkit-scrollbar{width:5px}
::-webkit-scrollbar-thumb{background:var(--g200);border-radius:3px}
::-webkit-scrollbar-track{background:transparent}

/* ── SKELETON LOADING ── */
.skel{background:linear-gradient(90deg,var(--g100) 25%,var(--g50) 37%,var(--g100) 63%);background-size:400% 100%;animation:skelShimmer 1.4s ease infinite}
@keyframes skelShimmer{0%{background-position:100% 50%}100%{background-position:0% 50%}}
@media (prefers-reduced-motion: reduce){.skel{animation:none;background:var(--g100)}}

/* ── ETL progress bar ── */
.etl-track{position:relative;height:24px;background:var(--g100);border-radius:var(--rpill);overflow:hidden}
.etl-fill{
  position:relative;height:100%;border-radius:var(--rpill);width:0%;
  background:linear-gradient(90deg,var(--navy),var(--navy2),var(--gold-d),var(--navy2),var(--navy));
  background-size:300% 100%;
  animation:etlShimmer 2.2s linear infinite;
  transition:width .6s cubic-bezier(.34,1.2,.4,1);
}
@keyframes etlShimmer{0%{background-position:0% 0}100%{background-position:300% 0}}

/* ── ETL CONTROL PANEL ── */
.rulecard{background:var(--white);border-radius:var(--rlg);box-shadow:var(--sc);padding:var(--lg);margin-bottom:var(--lg)}
.rulecard-h{font-size:13px;font-weight:700;color:var(--navy);margin-bottom:var(--md);padding-bottom:var(--sm);border-bottom:1px solid var(--g100)}
.rulefield{margin-bottom:var(--md)}
.rulefield:last-child{margin-bottom:0}
.rulehint{margin-top:3px;font-size:10.5px;color:var(--g400)}
.chiprow{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px}
.chip{background:var(--gold-p);color:var(--navy);border:1px solid var(--gold-l);border-radius:var(--rpill);padding:4px 8px 4px 12px;font-size:11px;font-weight:600;display:inline-flex;align-items:center;gap:6px}
.chip button{border:none;background:none;color:var(--navy);cursor:pointer;font-size:11px;line-height:1;opacity:.55;padding:2px}
.chip button:hover{opacity:1}
.chip-add{display:flex;gap:6px;margin-top:8px}
.ptest-result{margin-top:6px;font-size:11px;line-height:1.5}
.ptest-ok{color:var(--ok)}
.ptest-err{color:var(--err)}
.ptest-structure{margin-top:8px;padding:10px 12px;background:var(--g50);border-radius:var(--rmd);border:1px solid var(--g100)}
.ptest-structure-h{font-size:10.5px;font-weight:700;color:var(--navy);margin-bottom:8px}
.ptest-sheet{margin-bottom:8px}
.ptest-sheet:last-child{margin-bottom:0}
.ptest-sheet-h{display:flex;align-items:center;gap:8px;margin-bottom:5px;font-size:11px}
.ptest-cols{display:flex;flex-wrap:wrap;gap:4px}

/* ── DATA PIPELINES (Audit RAW table doubles as the pipeline list: click a
   row to select it, drag the handle to reorder) ── */
.pipe-row{cursor:pointer}
.pipe-row.active td{background:rgba(190,158,116,.14)}
.pipe-row.dragging{opacity:.4}
.pipe-row.drag-over-top td{box-shadow:inset 0 2px 0 0 var(--navy)}
.pipe-row.drag-over-bottom td{box-shadow:inset 0 -2px 0 0 var(--navy)}
.pipe-row-handle-cell{width:20px;padding-left:var(--lg);padding-right:0}
.pipe-row-handle{cursor:grab;color:var(--g300);font-size:13px;letter-spacing:-1px;user-select:none}
.pipe-row-handle:hover{color:var(--g400)}
.pipe-row.dragging .pipe-row-handle{cursor:grabbing}
.pov-load-badge{display:inline-block;margin-left:6px;font-size:11px;vertical-align:middle}
.pov-load-badge.spin{animation:pipeBirdFly .5s ease-in-out infinite}

/* ── PIPELINE OVERVIEW (BI-style summary of every pipeline's rows/sheets/columns) ── */
.pov-toggle{cursor:pointer}
.pov-row-cols{padding:10px var(--lg);background:var(--g50);border-bottom:1px solid var(--g100)}
.pov-chip{display:inline-block;padding:2px 8px;margin:2px;border-radius:var(--rpill);background:var(--white);border:1px solid var(--g100);font-family:'Courier New',monospace;font-size:10px;color:var(--g600)}
.pov-funnel{display:flex;align-items:center;gap:3px;flex-wrap:wrap}
.pov-funnel-step{display:inline-flex;align-items:center;gap:3px;font-size:10px;color:var(--g400)}
.pov-funnel-arrow{color:var(--g300);font-size:9px}
.pov-run-btn{padding:2px 8px;font-size:10px;border-radius:var(--rpill);border:1px solid var(--navy);background:none;color:var(--navy);cursor:pointer}
.pov-run-btn:hover{background:var(--navy);color:#fff}
.pov-run-btn:disabled{opacity:.5;cursor:default}
.pov-expand-btn{border:none;background:none;cursor:pointer;color:var(--g400);font-size:10px;padding:2px 4px}
.pov-expand-btn:hover{color:var(--navy)}

/* Load / Save Steps action bar — pinned so it's reachable even when
   Applied Steps or Preview grows tall (many steps, wide/huge result table) */
.pipe-action-bar{position:sticky;top:0;z-index:8;background:var(--g50);padding:var(--sm) 0 var(--md);margin-bottom:var(--md)}

.capy-btn{position:relative;transition:transform .15s ease;overflow:hidden}
.capy-btn:hover:not(:disabled){transform:translateY(-1px) scale(1.03)}
.capy-btn:active:not(:disabled){transform:translateY(0) scale(.98)}
.capy-icon{display:inline-flex;vertical-align:middle;margin-right:2px;animation:biCapyIdle 2.4s ease-in-out infinite}
.capy-btn.loading .capy-icon{animation:capyRun .45s ease-in-out infinite}
.capy-btn.loading{opacity:.9;cursor:wait}
@keyframes capyRun{0%,100%{transform:translateY(0) rotate(-8deg)}50%{transform:translateY(-3px) rotate(8deg)}}
@media (prefers-reduced-motion: reduce){.capy-icon{animation:none}}

/* Cache-hit Load — deliberately NOT the capybara "running to fetch files"
   animation, since nothing is being fetched from disk. A quick outward
   ripple around the store icon reads as "already here, just retrieving"
   instead of "working hard to go get it". */
.cache-pulse-icon{position:relative;display:none;align-items:center;justify-content:center;width:18px;height:16px;margin-right:2px;vertical-align:middle}
.capy-btn.from-cache .capy-icon{display:none}
.capy-btn.from-cache .cache-pulse-icon{display:inline-flex}
.cache-pulse-icon .ring{position:absolute;width:14px;height:14px;border-radius:50%;border:2px solid var(--gold-d);animation:cachePulseRing 1s cubic-bezier(.2,.6,.4,1) infinite}
.cache-pulse-icon .ring2{animation-delay:.35s}
.cache-pulse-icon .emoji{font-size:12px;line-height:1;z-index:1}
@keyframes cachePulseRing{0%{transform:scale(.5);opacity:.9}100%{transform:scale(2.1);opacity:0}}
@media (prefers-reduced-motion: reduce){.cache-pulse-icon .ring{animation:none;opacity:.6}}
@keyframes pipeBirdFly{0%,100%{transform:translateY(0) rotate(-10deg)}50%{transform:translateY(-3px) rotate(10deg)}}
.pipe-step{display:flex;align-items:center;gap:8px;padding:8px;border-radius:var(--rmd);cursor:pointer;margin-bottom:3px;font-size:12px;transition:background .15s}
.pipe-step:hover{background:var(--g50)}
.pipe-step.active{background:rgba(190,158,116,.14)}
.pipe-step-ico{font-size:13px;width:18px;text-align:center;flex-shrink:0}
.pipe-step-body{flex:1;min-width:0}
.pipe-step-label{font-weight:600;color:var(--navy);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pipe-step-sub{font-size:10px;color:var(--g400);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pipe-step-count{font-size:10px;color:var(--g400);flex-shrink:0;min-width:48px;text-align:right}
.pipe-step-actions{display:flex;gap:2px;flex-shrink:0;width:38px;justify-content:flex-end}
.pipe-step-edit,.pipe-step-del{border:none;background:none;cursor:pointer;font-size:11px;opacity:.5;flex-shrink:0;padding:2px}
.pipe-step-edit:hover{opacity:1}
.pipe-step-del:hover{opacity:1;color:var(--err)}
.pipe-step-explain{display:flex;gap:10px;align-items:flex-start;margin:var(--lg) var(--lg) 0;padding:10px 12px;background:rgba(190,158,116,.10);border:1px solid rgba(190,158,116,.35);border-radius:var(--rmd);font-size:12px;line-height:1.55;color:var(--g800)}
.pipe-step-explain-ico{font-size:14px;flex-shrink:0;line-height:1.55}
.pipe-checklist label{display:flex;align-items:center;gap:4px;font-size:11px;background:var(--g50);padding:4px 8px;border-radius:var(--rpill);cursor:pointer}
.pipe-rn-row,.pipe-agg-row{margin-bottom:6px}

/* ── BI SUITE ── */
.bi-mascot-card{background:linear-gradient(135deg,var(--gold-p),var(--white))}
.bi-capy-wrap{display:inline-block;flex-shrink:0;animation:biCapyIdle 2.4s ease-in-out infinite;filter:drop-shadow(0 2px 3px rgba(0,0,0,.15))}
@keyframes biCapyIdle{0%,100%{transform:translateY(0) rotate(-3deg)}50%{transform:translateY(-3px) rotate(3deg)}}
.mascot-idle{display:inline-block;animation:mascotBounce 2.6s ease-in-out infinite}
@keyframes mascotBounce{0%,100%{transform:translateY(0) rotate(-2deg)}50%{transform:translateY(-4px) rotate(2deg)}}
@media (prefers-reduced-motion: reduce){.bi-capy-wrap,.mascot-idle{animation:none}}

/* Dashboard Recall's brief initial-load placeholder — the capybara mascot
   nibbling a donut, so the wait reads as "something's chewing on this"
   instead of bare text. Both drawn as flat SVGs in the same brand palette
   as the mascot elsewhere in the app, not a mismatched 3D-emoji pairing. */
.donut-loader{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--md);padding:var(--xl) var(--lg)}
.donut-loader-scene{position:relative;width:96px;height:60px}
.donut-loader-emoji{position:absolute;left:2px;top:6px;filter:drop-shadow(0 2px 3px rgba(0,0,0,.15));animation:donutNibble 1.1s ease-in-out infinite}
.donut-loader-mouth{position:absolute;right:-2px;bottom:-2px;filter:drop-shadow(0 2px 3px rgba(0,0,0,.15));animation:donutChomp 1.1s ease-in-out infinite}
.donut-loader-caption{font-size:12px;font-weight:700;color:var(--navy);animation:donutCaptionPulse 1.1s ease-in-out infinite}
@keyframes donutNibble{0%,100%{transform:rotate(-6deg) scale(1)}50%{transform:rotate(4deg) scale(.88)}}
@keyframes donutChomp{0%,55%,100%{transform:translate(0,0) rotate(0deg) scale(1)}25%{transform:translate(-6px,3px) rotate(-14deg) scale(1.15)}}
@keyframes donutCaptionPulse{0%,100%{opacity:.55}50%{opacity:1}}
@media (prefers-reduced-motion: reduce){.donut-loader-emoji,.donut-loader-mouth,.donut-loader-caption{animation:none}}

/* Dashboard Recall's "recalling…" state — stretch both the flow/preview card
   and the step-checklist to the full page height (align-items:stretch) so
   they end at the same point, instead of two short, mismatched-height cards
   floating above a block of dead space. */
#v-dashboard-recall.active{height:100%}
#recall-shell{height:100%}
.recall-running-shell{display:flex;align-items:stretch;gap:var(--lg);height:100%}
.recall-running-main{flex:1;min-width:0;display:flex;flex-direction:column;min-height:0}
.recall-running-main>.card{flex:1;display:flex;flex-direction:column;min-height:0}
#recall-flow{flex:1;display:flex;flex-direction:column;min-height:0}
.recall-live-preview{flex:1;display:flex;flex-direction:column;min-height:0}
.recall-live-preview-scroll{flex:1;min-height:120px;overflow:auto}
.recall-running-steps{width:280px;flex-shrink:0;display:flex;flex-direction:column;min-height:0}
.recall-steps-card{display:flex;flex-direction:column;min-height:0}
.recall-running-steps>.recall-steps-card{flex:1;min-height:0}
.recall-steps-list{flex:1;overflow-y:auto;min-height:0;display:flex;flex-direction:column;gap:3px}
@media (max-width:980px){.recall-running-shell{flex-direction:column;height:auto}.recall-running-steps{width:100%}}

/* Target Month reload banner — a vertical progress bar fills bottom-to-top
   as the currently-loading pipeline works through its matched files, plus a
   subtle shimmer so it still reads as "active" between fill-height changes
   (which only move once per file, not continuously). */
.pipe-reload-banner{display:flex;align-items:center;gap:var(--md);padding:var(--md) var(--lg);background:var(--gold-p);border-radius:var(--rmd);margin-bottom:var(--md);max-width:100%}
.pipe-vbar{position:relative;width:10px;height:48px;flex-shrink:0;border-radius:var(--rpill);background:var(--g100);overflow:hidden}
.pipe-vbar-fill{position:absolute;left:0;right:0;bottom:0;height:6%;border-radius:var(--rpill);background:linear-gradient(180deg,var(--gold-d),var(--navy));transition:height .4s ease}
.pipe-vbar-fill::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(255,255,255,.35),transparent 60%);animation:pipeVbarShimmer 1.4s ease-in-out infinite}
@keyframes pipeVbarShimmer{0%,100%{opacity:.4}50%{opacity:1}}
@media (prefers-reduced-motion: reduce){.pipe-vbar-fill::after{animation:none}}
.cp{--kcc:var(--navy2)}
.cf{--kcc:var(--ok2)}
.ca{--kcc:var(--yel)}
.kc.cp{overflow:visible}
.bi-prefix-select{display:flex;align-items:flex-end;gap:6px;cursor:pointer;user-select:none}
.bi-prefix-select .kv{margin-bottom:0}
.bi-prefix-chevron{font-size:15px;color:var(--g300);transition:transform .2s cubic-bezier(.34,1.56,.64,1),color .15s}
.bi-prefix-select:hover .bi-prefix-chevron{color:var(--navy2)}
.bi-prefix-select.open .bi-prefix-chevron{transform:rotate(180deg);color:var(--navy2)}
.bi-prefix-menu{position:absolute;left:var(--lg);right:var(--lg);top:calc(100% - 8px);background:var(--white);border:1px solid var(--g100);border-radius:var(--rmd);box-shadow:var(--sf);overflow:hidden;opacity:0;transform:translateY(-6px);pointer-events:none;transition:opacity .16s ease,transform .16s cubic-bezier(.34,1.56,.64,1);z-index:5}
.bi-prefix-menu.open{opacity:1;transform:none;pointer-events:auto}
.bi-prefix-menu-item{padding:9px 14px;font-size:13px;font-weight:700;color:var(--g600);cursor:pointer;transition:background .1s}
.bi-prefix-menu-item:hover{background:var(--g50);color:var(--navy2)}
.bi-prefix-menu-item.active{color:var(--navy2);background:rgba(40,60,157,.08)}
@media (prefers-reduced-motion: reduce){.bi-prefix-chevron,.bi-prefix-menu{transition:none}}
tbody tr.bi-var-row{transition:background .2s}
.bi-layout{display:flex;align-items:flex-start;gap:var(--xl)}
.bi-main{flex:1;min-width:0}
/* Same navy "box" + icon-rail-collapses-on-hover treatment as the main left sidebar
   (.sb) — reuses its .ni/.nb-label classes so both panels animate identically. */
.bi-tabstrip-wrap{display:flex;flex-direction:column;gap:var(--md);width:220px;flex-shrink:0;background:var(--navy);border-radius:var(--rlg);padding:var(--lg) 0;box-shadow:var(--sf);overflow:hidden;transition:width .2s ease}
.bi-tabstrip-wrap:not(:hover){width:76px}
.bi-tabgroup{display:flex;flex-direction:column;gap:6px}
.bi-tabgroup-label{font-size:9px;font-weight:700;color:rgba(255,255,255,.3);text-transform:uppercase;letter-spacing:1.4px;padding:0 var(--lg);white-space:nowrap;overflow:hidden}
.bi-tabrow{display:flex;flex-direction:column;gap:2px;padding:0 var(--sm)}
.bi-tab{position:relative;display:flex;align-items:center;gap:var(--sm);width:100%;text-align:left;padding:8px var(--md);border:none;background:none;font-family:-apple-system,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;font-size:12.5px;font-weight:500;color:rgba(255,255,255,.62);cursor:pointer;border-radius:var(--rmd);transition:color .15s,background .15s,padding .2s ease;overflow:hidden;white-space:nowrap}
.bi-tabstrip-wrap:not(:hover) .bi-tab{justify-content:center;padding-left:0;padding-right:0}
.bi-tabstrip-wrap:not(:hover) .nb-label{opacity:0;width:0;overflow:hidden}
.bi-tabstrip-wrap:not(:hover) .bi-tabgroup-label{opacity:0}
.bi-tab:hover{background:rgba(255,255,255,.07);color:#fff}
.bi-tab.active{color:#fff;background:rgba(255,255,255,.12)}
.bi-tab.active::after{content:'';position:absolute;left:0;top:7px;bottom:7px;width:3px;background:var(--gold);border-radius:0 4px 4px 0;animation:biTabPop .22s cubic-bezier(.34,1.56,.64,1)}
@keyframes biTabPop{from{transform:scaleY(0)}to{transform:scaleY(1)}}
.bi-tab-flag{display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--err);margin-left:5px;vertical-align:middle;flex-shrink:0}
.bi-tabstrip-wrap:not(:hover) .bi-tab-flag{display:none}
#bi-tabcontent{animation:biContentIn .18s ease}
@keyframes biContentIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}
.bi-empty{border:2px dashed var(--g200);border-radius:var(--rlg);padding:var(--2xl);text-align:center;background:var(--g50)}
@media (max-width:980px){.bi-layout{flex-direction:column}.bi-tabstrip-wrap{width:100%!important;flex-direction:row;flex-wrap:wrap;border-radius:var(--rmd)}.bi-tabstrip-wrap .nb-label,.bi-tabstrip-wrap .bi-tabgroup-label{opacity:1;width:auto}.bi-tabrow{flex-direction:row;flex-wrap:wrap}.bi-tabstrip-wrap .bi-tab{justify-content:flex-start;padding:8px var(--md)}.bi-tab.active::after{left:10px;right:10px;top:auto;bottom:1px;width:auto;height:2px}}
@media (prefers-reduced-motion: reduce){.bi-tabstrip-wrap,.bi-tab,.nb-label{transition:none}}

.bi-search-wrap{position:relative;max-width:420px;width:100%;transition:max-width .25s cubic-bezier(.34,1.56,.64,1)}
.bi-search-wrap:focus-within{max-width:520px}
.bi-search-icon{position:absolute;left:16px;top:50%;transform:translateY(-50%);font-size:15px;color:var(--g400);pointer-events:none;transition:color .15s}
.bi-search-wrap:focus-within .bi-search-icon{color:var(--navy)}
.bi-search-input{width:100%;padding:12px 40px 12px 40px;border:2px solid var(--g200);border-radius:var(--rpill);font-family:-apple-system,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;font-size:13.5px;font-weight:600;color:var(--g800);outline:none;background:var(--white);box-shadow:0 1px 3px rgba(0,0,0,.06);transition:border-color .15s,box-shadow .15s,background .15s}
.bi-search-input:hover{border-color:var(--navy)}
.bi-search-input:focus{border-color:var(--navy);background:var(--white);box-shadow:0 0 0 4px rgba(22,39,122,.12)}
.bi-search-input::placeholder{color:var(--g400);font-weight:500}
.bi-search-clear{position:absolute;right:6px;top:50%;transform:translateY(-50%) scale(0);width:18px;height:18px;border:none;border-radius:50%;background:var(--g100);color:var(--g600);font-size:11px;line-height:1;cursor:pointer;transition:transform .18s cubic-bezier(.34,1.56,.64,1),background .15s;display:flex;align-items:center;justify-content:center;padding:0}
.bi-search-clear.show{transform:translateY(-50%) scale(1)}
.bi-search-clear:hover{background:var(--g200)}
.bi-search-count{font-size:10.5px;color:var(--g400)}
@keyframes biRowsIn{from{opacity:0;transform:translateY(3px)}to{opacity:1;transform:translateY(0)}}
.bi-rows-in{animation:biRowsIn .18s ease}
@media (prefers-reduced-motion: reduce){.bi-tab.active::after,#bi-tabcontent{animation:none}.bi-tab:hover{transform:none}.bi-search-wrap{transition:none}.bi-search-clear{transition:none}.bi-rows-in{animation:none}}

/* ── SQL editor: dark theme, syntax highlighting, autocomplete ── */
.sql-editor-wrap{position:relative;width:100%;min-height:110px;border:1px solid #263355;border-radius:var(--rmd);overflow:hidden;background:#0F172A;transition:border-color .15s,box-shadow .15s}
.sql-editor-wrap:focus-within{border-color:var(--gold-d);box-shadow:0 0 0 3px rgba(193,143,89,.18)}
.sql-editor-highlight,.sql-editor-input{position:absolute;inset:0;margin:0;padding:11px 12px;width:100%;height:100%;font-family:'Courier New',monospace;font-size:12px;line-height:1.6;letter-spacing:.2px;white-space:pre-wrap;word-wrap:break-word;overflow:auto;box-sizing:border-box}
.sql-editor-highlight{color:#CBD5E1;pointer-events:none;background:transparent}
.sql-editor-input{background:transparent;color:transparent;caret-color:#F2D9B1;border:none;outline:none;resize:vertical;min-height:110px;z-index:1}
.sql-editor-input::selection{background:rgba(193,143,89,.35)}
.sql-tok-kw{color:#E8B074;font-weight:700}
.sql-tok-fn{color:#82AAFF}
.sql-tok-str{color:#8BD5A0}
.sql-tok-num{color:#79C7E3}
.sql-tok-com{color:#64748B;font-style:italic}
.sql-tok-tbl{color:#F2D9B1;font-weight:700}
.sql-tok-punc{color:#7E8CAA}
.sql-autocomplete{position:absolute;z-index:20;min-width:180px;max-width:320px;max-height:220px;overflow-y:auto;background:#16213D;border:1px solid #2A3B5C;border-radius:var(--rmd);box-shadow:0 8px 24px rgba(0,0,0,.35);padding:4px}
.sql-ac-item{display:flex;align-items:baseline;gap:8px;padding:6px 9px;border-radius:var(--rsm);cursor:pointer;font-family:'Courier New',monospace;font-size:11.5px;color:#CBD5E1}
.sql-ac-item .sql-ac-kind{font-size:9px;text-transform:uppercase;letter-spacing:.5px;color:#64748B;margin-left:auto}
.sql-ac-item:hover,.sql-ac-item.sel{background:#22335E}
.sql-ac-item.sel{color:#F2D9B1}

/* ── GOLD BACKUP VIEWER: dark "inside the database" modal ── */
.gbk-modal{background:#0B1220;border:1px solid #263355;border-radius:var(--rlg);box-shadow:0 20px 60px rgba(0,0,0,.5);width:920px;max-width:96vw;max-height:88vh;display:flex;flex-direction:column;overflow:hidden;font-family:'Courier New',monospace}
.gbk-hd{padding:var(--md) var(--lg);border-bottom:1px solid #1E2A4A;display:flex;align-items:center;justify-content:space-between;background:linear-gradient(180deg,#111B34,#0B1220);flex-shrink:0}
.gbk-hd-title{display:flex;align-items:center;gap:10px}
.gbk-hd-ico{font-size:16px}
.gbk-hd-name{font-size:12.5px;font-weight:700;color:#F2D9B1;letter-spacing:.3px}
.gbk-hd-date{font-size:10.5px;color:#64748B;margin-top:2px}
.gbk-hd-badge{font-size:10px;color:#8BD5A0;background:rgba(139,213,160,.1);border:1px solid rgba(139,213,160,.3);border-radius:var(--rpill);padding:3px 10px;white-space:nowrap}
.gbk-close{width:26px;height:26px;border-radius:var(--rsm);background:#16213D;border:1px solid #263355;color:#CBD5E1;font-size:12px;cursor:pointer;flex-shrink:0}
.gbk-close:hover{background:#1E2A4A}
.gbk-toolbar{padding:var(--sm) var(--lg);border-bottom:1px solid #1E2A4A;display:flex;align-items:center;gap:var(--sm);background:#0F172A;flex-shrink:0}
.gbk-search{flex:1;max-width:280px;padding:7px 12px;border:1px solid #263355;border-radius:var(--rmd);background:#16213D;color:#CBD5E1;font-family:'Courier New',monospace;font-size:11.5px;outline:none}
.gbk-search::placeholder{color:#4B5A7A}
.gbk-search:focus{border-color:#F2D9B1}
.gbk-meta{font-size:10.5px;color:#64748B;margin-left:auto}
.gbk-body{flex:1;overflow:auto}
.gbk-body table{width:100%;border-collapse:collapse}
.gbk-body thead th{position:sticky;top:0;background:#111B34;color:#8FA3C7;font-size:9.5px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;padding:9px 14px;border-bottom:1px solid #263355;white-space:nowrap;cursor:pointer;user-select:none;text-align:left}
.gbk-body thead th:hover{color:#F2D9B1}
.gbk-body tbody td{padding:8px 14px;font-size:11px;color:#CBD5E1;border-bottom:1px solid #16213D;white-space:nowrap}
.gbk-body tbody tr:hover td{background:rgba(242,217,177,.04)}
.gbk-null{color:#4B5A7A;font-style:italic}
.gbk-ft{padding:var(--sm) var(--lg);border-top:1px solid #1E2A4A;display:flex;align-items:center;justify-content:space-between;background:#0F172A;flex-shrink:0}
.gbk-pg{font-size:10.5px;color:#64748B}
.gbk-glow{animation:gbkGlow 2.4s ease-in-out infinite}
@keyframes gbkGlow{0%,100%{opacity:.6}50%{opacity:1}}
@media (prefers-reduced-motion: reduce){.gbk-glow{animation:none}}

/* ── AUTOMATION FLOW PANEL (Finance Dashboard) ──
   Source Files -> ETL Pipelines -> Data Warehouse -> Finance Dashboard, live
   from GET /automation/flow_status. Node/segment "active" classes are toggled
   by JS polling — the CSS below only defines what active/idle/ready look like. */
.aflow-strip{display:flex;align-items:flex-start;overflow-x:auto;padding:var(--md) 2px}
.aflow-node{display:flex;flex-direction:column;align-items:center;gap:4px;flex-shrink:0;width:118px;text-align:center}
.aflow-dot{width:44px;height:44px;border-radius:50%;background:var(--g50);border:2px solid var(--g100);display:flex;align-items:center;justify-content:center;font-size:19px;transition:background .25s,border-color .25s}
.aflow-node.ready .aflow-dot{background:#EAF7E9;border-color:var(--ok)}
.aflow-node.active .aflow-dot{background:var(--gold-p);border-color:var(--gold-d);animation:aflowPulseDot 1.2s ease-in-out infinite}
.aflow-label{font-size:10.5px;font-weight:700;color:var(--navy)}
.aflow-state{font-size:9.5px;color:var(--g400);min-height:12px;max-width:110px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.aflow-node.active .aflow-state{color:var(--gold-d);font-weight:600}
.aflow-node.ready .aflow-state{color:var(--ok)}
.aflow-seg{position:relative;flex:1;min-width:32px;height:2px;background:var(--g100);margin-top:22px;transition:background .25s}
.aflow-seg .aflow-pulse{position:absolute;top:50%;left:0;opacity:0}
.aflow-seg.flowing{background:var(--gold-l)}
.aflow-seg.flowing .aflow-pulse{opacity:1;animation:aflowTravel 1.4s linear infinite}
.aflow-robot{display:inline-block;font-size:14px;transform:translate(-50%,-62%);animation:aflowBob .28s ease-in-out infinite alternate}
@keyframes aflowPulseDot{0%,100%{box-shadow:0 0 0 3px rgba(190,158,116,.28)}50%{box-shadow:0 0 0 7px rgba(190,158,116,.08)}}
@keyframes aflowTravel{from{left:0%}to{left:100%}}
@keyframes aflowBob{from{transform:translate(-50%,-62%) rotate(-4deg)}to{transform:translate(-50%,-72%) rotate(4deg)}}
@media (prefers-reduced-motion: reduce){.aflow-node.active .aflow-dot,.aflow-seg.flowing .aflow-pulse,.aflow-robot{animation:none}}