/* ============================================================
   YEPL Account Management Operations
   Design language matched to YEPL StockFlow:
     · warm paper ground, navy + teal, amber/blue accents
     · top bar with centred tabs, teal underline on active
     · editorial hero band, flat border-separated metrics
     · square-cornered workspace panels, navy table headers
     · Manrope (display) + DM Sans (body)
   ============================================================ */

@import url("../fonts/fonts.css");

:root{
  /* StockFlow palette */
  --ink:#17323b;
  --navy:#143c4a;
  --teal:#0f766e;
  --aqua:#d9f0eb;
  --paper:#f5f3ed;
  --line:#d9ddd8;
  --amber:#c77728;
  --blue:#276b9c;
  --red:#c62f3d;

  --surface:#fff;
  --surface-2:#fafbf9;
  --surface-3:#f1f3f2;
  --muted:#718085;
  --muted-2:#8a9598;

  --font-display:'Manrope';
  --font-body:'DM Sans';

  --ok:#18a277;
  --ok-soft:#e6f4ed;
  --warn:#9a5c18;
  --warn-soft:#fff0da;
  --danger:#9b3e2f;
  --danger-soft:#fff4f1;
  --info:#235f86;
  --info-soft:#dcecf6;
}

:root[data-theme="dark"]{
  --ink:#e7eeec;
  --navy:#0e2c37;
  --teal:#3fb5a6;
  --aqua:#123a37;
  --paper:#0e1a1f;
  --line:#25383f;

  --surface:#152229;
  --surface-2:#18272e;
  --surface-3:#1d2f37;
  --muted:#8ea0a4;
  --muted-2:#7c8e92;

  --ok:#3ddba0;      --ok-soft:#10312a;
  --warn:#e0aa4a;    --warn-soft:#2f2616;
  --danger:#f4837a;  --danger-soft:#341c1a;
  --info:#6fa6d8;    --info-soft:#14293a;
}

*{box-sizing:border-box}
[hidden]{display:none!important}
html,body{height:100%}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--font-body),'Segoe UI',system-ui,sans-serif;font-size:13px;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer}
h1,h2,h3,h4{margin:0;font-family:var(--font-display),sans-serif;font-weight:700}
.ic{width:16px;height:16px;flex:none;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.num{font-variant-numeric:tabular-nums}
.eyebrow{
  color:var(--teal);letter-spacing:.16em;font-size:10px;font-weight:800;
  margin:0 0 6px;text-transform:uppercase;
}

/* ---------- top bar ---------- */
.topbar{
  border-bottom:1px solid var(--line);background:var(--surface);z-index:20;
  display:grid;grid-template-columns:minmax(180px,auto) minmax(0,1fr) auto;
  align-items:center;gap:20px;height:68px;padding:0 2.4vw;position:sticky;top:0;
}
.brand{display:flex;align-items:center;gap:11px;min-width:0}
.brand>img{object-fit:contain;object-position:left center;width:116px;height:40px}
.brand strong,.brand small{display:block}
.brand strong{font:700 16px var(--font-display),sans-serif}
.brand small{color:#718087;letter-spacing:.04em;font-size:11px}

nav{
  display:flex;align-items:stretch;gap:0;height:100%;
  min-width:0;overflow-x:auto;scrollbar-width:none;
  /* centre when there is room, but fall back to the left edge when the
     tabs overflow — plain `center` would clip the first tabs */
  justify-content:flex-start;
}
nav::before,nav::after{content:"";margin:auto}
nav::-webkit-scrollbar{display:none}
nav button{
  color:#6c7b80;white-space:nowrap;background:0 0;border:0;padding:0 9px;
  font-size:11.5px;font-weight:700;position:relative;flex:none;
}
nav button.active:after{left:9px;right:9px}
nav button:hover{color:var(--navy)}
nav button.active{color:var(--navy)}
nav button.active:after{content:"";background:var(--teal);height:3px;position:absolute;bottom:0;left:12px;right:12px}
nav button span{background:#edf0ee;border-radius:12px;margin-left:5px;padding:1px 6px;font-size:11px;color:#5d6d72}
nav button.active span{background:var(--aqua);color:var(--teal)}
:root[data-theme="dark"] nav button span{background:#22343b;color:#93a5a9}
.navGroupTrigger{
  color:#6c7b80;white-space:nowrap;background:0 0;border:0;padding:0 9px;
  font-size:11.5px;font-weight:700;position:relative;flex:none;display:flex;align-items:center;gap:5px;
  height:100%;
}
.navGroupTrigger:hover{color:var(--navy)}
.navGroupTrigger.active{color:var(--navy)}
.navGroupTrigger.active:after{content:"";background:var(--teal);height:3px;position:absolute;bottom:0;left:9px;right:9px}
.navCaret{width:0;height:0;border-left:4px solid transparent;border-right:4px solid transparent;border-top:5px solid currentColor;opacity:.55;flex:none}
.navGroupTrigger.open .navCaret{transform:rotate(180deg)}
/* Lives at the end of <body>, positioned via JS (fixed, from the
   trigger's own getBoundingClientRect) - NOT nested inside nav, because
   nav's overflow-x:auto forces overflow-y to clip too, which silently
   swallowed an absolutely-positioned dropdown nested inside it. */
.navDropdown{
  display:flex;position:fixed;z-index:50;flex-direction:column;
  background:var(--surface);border:1px solid var(--line);border-radius:8px;box-shadow:0 12px 28px #1c2a2f26;
  padding:6px;min-width:168px;
}
.navDropdown button{
  color:#526066;background:0 0;border:0;text-align:left;padding:8px 10px;border-radius:6px;
  font-size:12px;font-weight:600;display:flex;align-items:center;justify-content:space-between;gap:10px;
}
.navDropdown button:hover{background:var(--surface-3)}
.navDropdown button.active{background:var(--aqua);color:var(--teal)}
:root[data-theme="dark"] .navDropdown{background:var(--surface-2)}
:root[data-theme="dark"] .navDropdown button:hover{background:var(--surface-3)}

.topTools{display:flex;align-items:center;gap:9px;justify-self:end}
.searchBox{
  display:flex;align-items:center;gap:7px;border:1px solid var(--line);
  background:var(--surface);border-radius:7px;padding:8px 11px;color:#889397;
}
.searchBox input{border:0;outline:0;background:0 0;width:180px;color:var(--ink)}
.iconBtn{
  width:36px;height:36px;display:grid;place-items:center;border:1px solid var(--line);
  background:var(--surface);border-radius:7px;color:#68777b;
}
.iconBtn:hover{background:var(--surface-3);color:var(--navy)}
:root[data-theme="light"] .theme-moon{display:none}
:root[data-theme="dark"] .theme-sun{display:none}

.userMenu{
  color:var(--navy);text-align:left;background:#f7faf8;border:1px solid #d8e2de;
  border-radius:8px;display:flex;align-items:center;gap:9px;min-width:165px;padding:6px 10px;
}
:root[data-theme="dark"] .userMenu{background:var(--surface-2);border-color:var(--line);color:var(--ink)}
.userAvatar{
  background:var(--navy);color:#fff;width:30px;height:30px;border-radius:50%;
  font:800 12px var(--font-display),sans-serif;display:grid;place-items:center;flex:none;
}
.userMenu b,.userMenu small{display:block;max-width:125px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.userMenu b{font-size:10px}
.userMenu small{text-transform:uppercase;letter-spacing:.08em;color:var(--teal);margin-top:2px;font-size:10px}

/* ---------- command bar ---------- */
.commandBar{
  background:var(--surface-2);border-bottom:1px solid #d8dfdb;display:flex;
  justify-content:space-between;align-items:center;gap:24px;min-height:58px;
  padding:8px 3vw;box-shadow:0 5px 16px #17323b08;flex-wrap:wrap;
}
:root[data-theme="dark"] .commandBar{border-bottom-color:var(--line);box-shadow:none}
.commandContext span,.commandContext b{display:block}
.commandContext span{letter-spacing:.17em;color:var(--teal);font-size:9px;font-weight:800}
.commandContext b{font:700 13px var(--font-display),sans-serif;margin-top:2px}
.commandActions{display:flex;align-items:center;gap:9px;flex-wrap:wrap}
.commandPrimary,.commandSecondary{border-radius:6px;height:36px;padding:0 12px;font-size:10px;font-weight:800}
.commandPrimary{background:var(--teal);color:#fff;border:0;box-shadow:0 4px 10px #0f766e20;display:inline-flex;align-items:center;gap:7px}
.commandPrimary>span{background:#ffffff20;border-radius:50%;display:inline-grid;place-items:center;width:18px;height:18px;font-size:7px}
.commandSecondary{color:var(--teal);background:var(--surface);border:1px solid #b8ccc6;display:inline-flex;align-items:center;gap:6px}
.commandSecondary:hover{background:#edf7f4}
:root[data-theme="dark"] .commandSecondary:hover{background:var(--surface-3)}
/* financial-year scope — drives every screen */
.fyPicker{
  display:flex;align-items:center;gap:8px;height:36px;padding:0 10px;
  background:var(--aqua);border:1px solid #a9c9c2;border-radius:6px;
}
.fyPicker>span{letter-spacing:.12em;color:var(--teal);font-size:9px;font-weight:800;white-space:nowrap}
.fyPicker select{
  border:0;background:0 0;outline:0;color:var(--navy);font:800 12px var(--font-display),sans-serif;
  padding:0;cursor:pointer;
}
:root[data-theme="dark"] .fyPicker{background:var(--surface-3);border-color:var(--teal)}
:root[data-theme="dark"] .fyPicker select{color:var(--ink)}
.fyChip{
  display:inline-block;background:var(--aqua);color:var(--teal);border-radius:12px;
  padding:3px 9px;font-size:9px;font-weight:800;letter-spacing:.06em;margin-left:8px;vertical-align:middle;
}
:root[data-theme="dark"] .fyChip{background:var(--surface-3)}

.commandGroup{
  background:var(--surface);border:1px solid #ccd8d4;border-radius:6px;
  display:flex;align-items:center;height:36px;overflow:hidden;
}
.commandGroup>span{letter-spacing:.1em;color:#7b898c;padding:0 9px;font-size:9px;font-weight:800}
.commandGroup button{height:100%;color:var(--teal);background:var(--surface);border:0;border-left:1px solid #dce3df;padding:0 9px;font-size:9px;font-weight:800}
.commandGroup button:hover{background:#edf7f4}
:root[data-theme="dark"] .commandGroup{border-color:var(--line)}
:root[data-theme="dark"] .commandGroup button{border-left-color:var(--line)}
:root[data-theme="dark"] .commandGroup button:hover{background:var(--surface-3)}

/* ---------- hero ---------- */
.hero{
  background:radial-gradient(circle at 72% 20%,#ffffff80 0 2px,#0000 3px) 0 0/24px 24px,
             linear-gradient(112deg,#edf6f3 0 64%,#f5f3ed 64%);
  border-bottom:1px solid #cfd8d4;display:flex;justify-content:space-between;
  align-items:center;gap:40px;min-height:64px;padding:11px 5vw;position:relative;overflow:hidden;
}
:root[data-theme="dark"] .hero{background:linear-gradient(112deg,#122b31 0 64%,#0e1a1f 64%);border-bottom-color:var(--line)}
.hero:after{content:"";background:#0f766e0b;width:170px;height:180px;position:absolute;top:-35px;right:31%;transform:skew(-24deg)}
.heroCopy{z-index:1;position:relative}
.hero h1{font:700 clamp(19px,1.6vw,24px)/1 var(--font-display),sans-serif;letter-spacing:-.03em;margin:0}
.hero h1 em{color:var(--teal);font-style:normal}
.heroCopy>p:last-child{color:#617176;max-width:620px;margin:4px 0 0;font-size:11px}
:root[data-theme="dark"] .heroCopy>p:last-child{color:var(--muted)}
.heroStatus{
  z-index:1;background:var(--surface);border:1px solid #bfd0cb;width:min(300px,30vw);
  position:relative;box-shadow:0 6px 16px #27424b0a;
}
:root[data-theme="dark"] .heroStatus{border-color:var(--line);box-shadow:none}
.liveState{
  letter-spacing:.12em;color:#65767b;border-bottom:1px solid #dde5e1;display:flex;
  align-items:center;gap:6px;padding:4px 9px;font-size:9px;font-weight:800;
}
:root[data-theme="dark"] .liveState{border-bottom-color:var(--line)}
.liveState i{background:var(--ok);border-radius:50%;width:6px;height:6px;box-shadow:0 0 0 3px #18a27717;flex:none}
.liveState i.off{background:var(--amber);box-shadow:0 0 0 3px #c7772817}
.statusFigures{display:grid;grid-template-columns:repeat(3,1fr)}
.statusFigures span{color:#78878a;border-right:1px solid #e0e6e3;padding:5px 9px;font-size:9px}
.statusFigures span:last-child{border:0}
:root[data-theme="dark"] .statusFigures span{border-right-color:var(--line)}
.statusFigures b{font:700 14px var(--font-display),sans-serif;color:var(--navy);margin-bottom:0;display:block}
:root[data-theme="dark"] .statusFigures b{color:var(--ink)}

/* ---------- metrics band ---------- */
.metrics{border-bottom:1px solid var(--line);background:var(--surface);display:grid;grid-template-columns:repeat(5,1fr)}
.metrics article{border-right:1px solid var(--line);padding:22px 20px}
.metrics article:first-child{padding-left:5vw}
.metrics article:last-child{border-right:0;padding-right:5vw}
.metrics span,.metrics small{color:#718085;font-size:11px;display:block}
.metrics strong{font:700 26px var(--font-display),sans-serif;color:var(--navy);margin:4px 0;display:block}
:root[data-theme="dark"] .metrics strong{color:var(--ink)}
.metrics .available strong{color:var(--teal)}
.metrics .pre strong{color:var(--amber)}
.metrics .confirmed strong{color:var(--blue)}
.metrics .risk strong{color:var(--red)}

/* ---------- workspace ---------- */
.workspace{
  border:1px solid var(--line);background:var(--surface);margin:28px 4vw 60px;
  box-shadow:0 12px 32px #27424b0b;
}
:root[data-theme="dark"] .workspace{box-shadow:none}
.workspace+.workspace{margin-top:-32px}
.sectionHead{
  border-bottom:1px solid var(--line);display:flex;justify-content:space-between;
  align-items:center;padding:22px 24px;gap:16px;flex-wrap:wrap;
}
.sectionHead h2{font:700 24px var(--font-display),sans-serif;margin:0}
.sectionHead .eyebrow{margin-bottom:4px}
.sectionHead p.sub{color:#718186;margin:4px 0 0;font-size:12px}

.tools{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.tools label{border:1px solid var(--line);color:#889397;border-radius:7px;padding:8px 11px;display:inline-flex;align-items:center;gap:7px}
.tools input{border:0;outline:0;width:240px;background:0 0;color:var(--ink)}
.tools>span.count{color:#718085;background:var(--surface-3);border-radius:6px;padding:7px 10px;font-size:11px}
.tools select{
  height:34px;color:var(--navy);background:var(--surface);border:1px solid #c8d5d1;
  border-radius:6px;padding:0 8px;font-size:11px;font-weight:700;
}
:root[data-theme="dark"] .tools select{color:var(--ink);border-color:var(--line)}

/* ---------- buttons ---------- */
.primary{
  background:var(--teal);color:#fff;border:0;border-radius:8px;padding:10px 16px;
  font-weight:700;box-shadow:0 4px 12px #0f766e25;display:inline-flex;align-items:center;gap:7px;font-size:12px;
}
.primary:hover{background:#0c635c}
.primary:disabled{opacity:.55;cursor:not-allowed}
.secondary{
  border:1px solid var(--line);background:var(--surface);border-radius:8px;padding:9px 16px;
  display:inline-flex;align-items:center;gap:7px;font-size:12px;
}
.secondary:hover{background:var(--surface-3)}
.danger{color:#fff;background:#a63e32;border:1px solid #a63e32;border-radius:8px;padding:9px 16px;font-weight:700;font-size:12px}
.danger:hover{background:#8e3429}
.small{padding:6px 10px;font-size:10px;font-weight:800;border-radius:6px}
.rowActions{display:flex;gap:6px;justify-content:flex-end}
.rowActions button{
  color:var(--teal);background:#edf8f5;border:1px solid #9fc3ba;border-radius:5px;
  padding:5px 8px;font-size:10px;font-weight:700;
}
.rowActions .poOpen,.poOpen{display:inline-flex;align-items:center;white-space:nowrap;padding:6px 9px;border:1px solid #a9d2c7;border-radius:6px;background:#edf8f5;color:#087b70;text-decoration:none;font-size:12px;font-weight:700}
.rowActions .poOpen:hover,.poOpen:hover{background:#dff1eb}
.poItems summary{cursor:pointer;color:#087b70;font-weight:700}.poItemList{min-width:520px;padding:8px 0}.poItemList>div{display:grid;grid-template-columns:42px minmax(220px,1fr) 90px 110px;gap:10px;padding:6px 0;border-bottom:1px solid var(--line);text-align:left}.poItemList em,.poItemList strong{font-style:normal;text-align:right}.poItemList span{white-space:normal}
.rowActions button:hover{background:#dff1eb}
.rowActions .release{color:#6f7c80;background:var(--surface);border-color:#d3dad7}
.rowActions .removeBtn{color:#a63e32;background:#fff4f2;border-color:#e1b8b2}
.rowActions .removeBtn:hover{background:#fde8e4}
:root[data-theme="dark"] .rowActions button{background:var(--surface-3);border-color:var(--line)}

/* ---------- tables ---------- */
.tableWrap{scrollbar-gutter:stable;max-height:calc(100vh - 210px);overflow:auto}
.tableWrap thead th{z-index:4;position:sticky;top:0;box-shadow:0 1px #244f5c}
table{border-collapse:separate;border-spacing:0;width:100%;font-size:13px}
th{
  background:var(--navy);color:#fff;text-align:left;letter-spacing:.04em;
  padding:10px 14px;font-size:11px;font-weight:700;white-space:nowrap;
}
th.sortable{cursor:pointer;user-select:none}
th.sortable:hover{background:#1b4c5c}
th .arrow{opacity:.45;margin-left:5px;font-size:9px}
th.sorted .arrow{opacity:1;color:var(--aqua)}
td{border-bottom:1px solid #e5e8e5;padding:10px 14px;vertical-align:middle}
:root[data-theme="dark"] td{border-bottom-color:var(--line)}
tbody tr{cursor:pointer}
tbody tr:hover{background:#f3f8f6}
:root[data-theme="dark"] tbody tr:hover{background:var(--surface-2)}
td strong,td small{display:block}
td small{color:#728085;margin-top:2px;font-size:11px}
td.num,th.num{text-align:right}
.mono{font-family:'Cascadia Mono',ui-monospace,Consolas,monospace}
.price{white-space:nowrap;font-variant-numeric:tabular-nums;text-align:right}
.amber{color:var(--amber)} .blue{color:var(--blue)} .tealtx{color:var(--teal)} .redtx{color:var(--red)}
.truncate{max-width:280px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:block}
/* Voucher descriptions are often a comma-separated part list - cut off with an ellipsis and a
   hover tooltip, the whole point (seeing what was actually bought) is lost. Wraps instead. */
.wrapText{max-width:280px;white-space:normal;word-break:break-word;display:block}
/* Long invoice descriptions: first line + "+N more lines"; click to open the rest. */
details.descMore summary{cursor:pointer;list-style:none;display:flex;gap:8px;align-items:baseline;flex-wrap:wrap}
details.descMore summary::-webkit-details-marker{display:none}
details.descMore summary>div{display:inline}
details.descMore .more{color:var(--teal);font-size:10.5px;white-space:nowrap}
details.descMore .more::before{content:"▸ "}
details.descMore[open] .more::before{content:"▾ "}
details.descMore[open] .more{opacity:.6}
tfoot td{background:var(--surface-3);font-weight:800;border-bottom:0;border-top:2px solid var(--line)}

/* status pills — StockFlow's .po / .status */
.status{border-radius:20px;padding:5px 8px;font-size:10px;font-weight:800;display:inline-block;white-space:nowrap}
.status.ongoing{color:#235f86;background:#dcecf6}
.status.complete{color:#19734f;background:#e6f4ed}
.status.cancelled{color:#6f7c80;background:#edf0ee}
.status.notinvoiced{color:#9b3e2f;background:#fff4f1}
.status.invoiced{color:#9a5c18;background:#fff0da}
.status.paid{color:#19734f;background:#e6f4ed}
:root[data-theme="dark"] .status{filter:brightness(1.6) saturate(.85)}
.tag{
  display:inline-block;padding:4px 7px;border-radius:12px;background:#e8f3ef;color:var(--teal);
  font-size:10px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;
}
:root[data-theme="dark"] .tag{background:var(--surface-3)}
.familyBadge{background:var(--navy);color:#fff;letter-spacing:.09em;border-radius:3px;padding:4px 7px;font-size:9px;font-weight:800;display:inline-block}

/* progress meter */
.meter{height:6px;border-radius:3px;background:#e8ece9;overflow:hidden;min-width:64px;display:block}
.meter>i{display:block;height:100%;border-radius:3px;background:var(--teal)}
:root[data-theme="dark"] .meter{background:var(--surface-3)}

/* ============================================================
   Folder master–detail  (StockFlow .allocationWorkspace)
   ============================================================ */
.folderWorkspace{display:grid;grid-template-columns:300px minmax(0,1fr);min-height:460px}
.folderList{border-right:1px solid var(--line);background:var(--surface-2);padding:14px;max-height:640px;overflow:auto}
.folderLabel{letter-spacing:.16em;color:#82908f;padding:4px 8px 10px;font-size:9px;font-weight:800}
.folderList>button{
  text-align:left;color:#506168;background:0 0;border:1px solid transparent;border-radius:7px;
  display:grid;grid-template-columns:22px 1fr auto;align-items:center;gap:9px;width:100%;
  margin-bottom:5px;padding:10px 9px;
}
.folderList>button:hover{background:var(--surface);border-color:#dbe1dd}
.folderList>button.selected{color:var(--navy);background:var(--surface);border-color:#a8c7bf;box-shadow:0 3px 10px #17323b0b}
:root[data-theme="dark"] .folderList>button.selected{color:var(--ink);border-color:var(--teal)}
.folderList strong,.folderList small{white-space:nowrap;text-overflow:ellipsis;display:block;overflow:hidden}
.folderList strong{font:700 11.5px var(--font-display),sans-serif}
.folderList small{color:#7c898c;margin-top:2px;font-size:10.5px}
.folderList button>b{background:#e8ece9;border-radius:10px;padding:3px 6px;font-size:10px;font-variant-numeric:tabular-nums}
.folderList button.selected>b{background:var(--aqua);color:var(--teal)}
:root[data-theme="dark"] .folderList button>b{background:var(--surface-3)}
.folderIcon{color:#c58a3b;font-size:16px;text-align:center}
.folderIcon.credit{color:var(--amber)} .folderIcon.debit{color:var(--teal)}

.folderPane{min-width:0;display:flex;flex-direction:column}
.listHead{
  border-bottom:1px solid var(--line);display:flex;justify-content:space-between;
  align-items:flex-start;gap:16px;min-height:96px;padding:18px 22px;flex-wrap:wrap;
}
.folderPath{color:var(--teal);font-size:10px;font-weight:800;letter-spacing:.06em}
.listHead h3{font:700 20px var(--font-display),sans-serif;margin:3px 0}
.listHead p{color:#738186;margin:0;font-size:12px}
.folderSummary{display:flex;gap:22px;flex-wrap:wrap}
.folderSummary span{color:#738186;font-size:10px}
.folderSummary b{color:var(--navy);font:700 19px var(--font-display),sans-serif;display:block}
:root[data-theme="dark"] .folderSummary b{color:var(--ink)}
.emptyFolder{color:#849093;text-align:center;display:grid;place-items:center;padding:64px 20px}
.emptyFolder strong{color:#526268;margin-top:8px}

/* ============================================================
   Expandable tree table  (StockFlow .stockFamilyRow)
   ============================================================ */
.treeToggle{
  width:20px;height:20px;color:var(--teal);font:800 13px/1 var(--font-display),sans-serif;
  background:var(--surface);border:1px solid #b9cec7;border-radius:4px;flex:0 0 20px;padding:0;
}
.treeToggle:hover{background:#e3f2ee}
.groupRow{background:#edf5f2;cursor:pointer}
.groupRow:hover{background:#e6f1ed}
.groupRow.expanded{background:#e6f1ed}
.groupRow td{border-top:1px solid #b8d0c8;border-bottom:1px solid #ccddd7;padding-top:10px;padding-bottom:10px}
:root[data-theme="dark"] .groupRow{background:var(--surface-3)}
:root[data-theme="dark"] .groupRow td{border-top-color:var(--line);border-bottom-color:var(--line)}
.groupTitle{display:flex;align-items:center;gap:10px}
.groupTitle strong{font:800 12.5px var(--font-display),sans-serif;letter-spacing:.03em;color:var(--navy);display:block}
.groupTitle small{color:#718187;margin-top:2px;font-size:10px;display:block}
:root[data-theme="dark"] .groupTitle strong{color:var(--ink)}
.childRow{background:var(--surface)}
.childRow:hover{background:#fafcfb}
:root[data-theme="dark"] .childRow:hover{background:var(--surface-2)}
.treeBranch{display:flex;align-items:center;padding-left:34px;position:relative}
.treeBranch>span:before{
  content:"";border-bottom:1px solid #a9c0b9;border-left:1px solid #a9c0b9;border-radius:0 0 0 5px;
  width:15px;height:34px;position:absolute;top:-22px;left:13px;
}
.treeBranch strong{color:var(--navy);font-size:10.5px;display:block}
.treeBranch small{color:#77878b;margin-top:3px;font-size:9.5px;display:block}
:root[data-theme="dark"] .treeBranch strong{color:var(--ink)}

/* ============================================================
   Stat summary strip  (StockFlow .checkSummary / .auditSummary)
   ============================================================ */
.statStrip{border-bottom:1px solid var(--line);display:grid;grid-template-columns:repeat(4,1fr)}
.statStrip.five{grid-template-columns:repeat(5,1fr)}
.statStrip.three{grid-template-columns:repeat(3,1fr)}
.statStrip article{border-right:1px solid var(--line);padding:16px 20px}
.statStrip article:last-child{border-right:0}
.statStrip span{color:#718085;font-size:10px;display:block;letter-spacing:.05em;text-transform:uppercase;font-weight:700}
.statStrip strong{font:700 24px var(--font-display),sans-serif;color:var(--navy);display:block;margin:5px 0 2px}
.statStrip small{color:#7b898d;font-size:10px}
:root[data-theme="dark"] .statStrip strong{color:var(--ink)}
.statStrip .good strong{color:var(--teal)}
.statStrip .warn strong{color:var(--amber)}
.statStrip .bad strong{color:var(--red)}
.statStrip .info strong{color:var(--blue)}

/* ============================================================
   Printable document  (StockFlow .slipPaper)
   ============================================================ */
.docShell{background:#e7ece9;border-radius:12px;width:min(920px,96vw);max-height:94vh;overflow:auto}
.docToolbar{border-bottom:1px solid #d3dcd8;display:flex;justify-content:flex-end;gap:8px;padding:12px 14px}
.docPaper{
  color:#17323b;background:#fff;border-top:5px solid var(--teal);margin:18px;padding:38px 42px;
  box-shadow:0 5px 24px #17323b12;
}
.docPaper>header{border-bottom:1px solid #bdcac5;display:flex;justify-content:space-between;align-items:center;padding-bottom:20px;position:relative}
.docPaper>header:after{content:"";background:var(--teal);width:110px;height:3px;position:absolute;bottom:-2px;left:0}
.docLogo{width:200px;height:70px;object-fit:contain;object-position:left center;display:block}
.docTitle{text-align:right}
.docTitle small{letter-spacing:.18em;color:#718085;font-size:10px;font-weight:800;display:block}
.docTitle h2{font:800 26px/1 var(--font-display),sans-serif;letter-spacing:.03em;color:var(--navy);margin:7px 0}
.docTitle span{color:var(--teal);font:700 10px monospace;display:block}
.docMeta{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:22px 0}
.docMeta div{background:#f7f9f7;border:1px solid #d5ded9;min-height:58px;padding:11px 12px}
.docMeta div:first-child{background:#edf6f3;border-color:#b9d3cc}
.docMeta small{letter-spacing:.09em;color:#7b898d;font-size:9px;font-weight:800;display:block;text-transform:uppercase}
.docMeta b{color:var(--navy);font-size:11px;line-height:1.35;display:block;margin-top:4px}
.docPaper table{border-collapse:collapse;width:100%;border:1px solid #cbd6d1}
.docPaper th{background:var(--navy);color:#fff;text-transform:uppercase;letter-spacing:.09em;padding:9px 11px;font-size:10px;text-align:left}
.docPaper td{border:1px solid #d8e0dc;padding:9px 11px;font-size:10px;color:#17323b}
.docPaper tbody tr:nth-child(2n){background:#f8faf8}
.docPaper .net{background:#edf6f3;font-weight:800}
.docNote{background:#faf6f4;border-left:3px solid var(--teal);margin:16px 0 0;padding:10px 12px;font-size:9px}
.docPaper>footer{color:#617176;border-top:1px solid #aebcb7;margin-top:56px;padding-top:9px;display:flex;justify-content:space-between;font-size:9px}
.docPaper>footer span{width:30%}
.docPaper>footer span:nth-child(2){text-align:center}
.docPaper>footer span:last-child{text-align:right}

/* Printing a document modal (payslip, statement). Zero page margin is what stops the browser
   adding its own URL / date / page-number header and footer; the paper's own padding supplies the
   margins instead. Everything except the modal host is removed from layout (display:none, not
   visibility:hidden - hidden content still takes up pages), the host and shell lose their
   fixed/scrolling geometry so the document prints from its top rather than from wherever the
   on-screen scroll box happened to be (a long statement printed mid-table first, letterhead
   on page 2), and table rows never split across a page. */
@media print{
  @page{size:A4;margin:0}
  body>*:not(#modalHost){display:none!important}
  #modalHost{display:block!important;position:static!important;inset:auto;padding:0;background:#fff;backdrop-filter:none}
  .docShell{background:#fff;width:auto;max-height:none;overflow:visible;box-shadow:none;border-radius:0}
  .docToolbar{display:none}
  .docPaper{margin:0;padding:16mm 17mm;box-shadow:none;border-top:0}
  .docMeta{grid-template-columns:repeat(3,1fr)}
  .docPaper tr{page-break-inside:avoid}
  .docPaper thead{display:table-header-group}
  .docPaper>footer{page-break-inside:avoid}
}

@media (max-width:900px){
  .folderWorkspace{grid-template-columns:1fr}
  .folderList{border-right:0;border-bottom:1px solid var(--line);display:flex;gap:6px;overflow-x:auto;max-height:none}
  .folderLabel{display:none}
  .folderList>button{min-width:210px}
  .statStrip,.statStrip.five,.statStrip.three{grid-template-columns:1fr 1fr}
  .statStrip article:nth-child(odd){border-right:1px solid var(--line)}
  .docMeta{grid-template-columns:1fr 1fr}
}

/* ---------- pager ---------- */
.pager{
  display:flex;align-items:center;gap:10px;padding:12px 18px;border-top:1px solid var(--line);
  flex-wrap:wrap;background:var(--surface-2);
}
.pager .info{font-size:11px;color:#718085;flex:1}
.pager button{
  border:1px solid var(--line);background:var(--surface);border-radius:5px;padding:6px 10px;
  font-size:10px;font-weight:800;color:var(--teal);
}
.pager button:disabled{opacity:.4;cursor:not-allowed;color:#8a9598}
.pager button:not(:disabled):hover{background:#edf7f4}

/* ---------- cards / grids ---------- */
.cardGrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;padding:22px}
.cardGrid.two{grid-template-columns:repeat(2,minmax(0,1fr))}
.panelCard{border:1px solid var(--line);background:var(--surface-2);padding:18px}
.panelCard h3{font:700 18px var(--font-display),sans-serif;margin:14px 0 6px}
.panelCard p{color:#65747a;margin:0;font-size:12px}
.panelCard footer{border-top:1px solid var(--line);display:flex;gap:20px;margin-top:18px;padding-top:14px;font-size:11px;align-items:center}
.panelCard footer b{margin-right:3px;font-size:15px}

.splitGrid{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1fr);gap:0}
.splitGrid>*+*{border-left:1px solid var(--line)}
.halfGrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}
.halfGrid>*+*{border-left:1px solid var(--line)}
.padBox{padding:22px 24px}

/* ledger list */
.ledger{width:100%;border-collapse:collapse;font-size:12px}
.ledger td{padding:8px 0;border-bottom:1px dashed var(--line);border-top:0}
.ledger td:last-child{text-align:right;font-variant-numeric:tabular-nums;font-weight:700}
.ledger tr:hover{background:none}
.ledger tr.total td{border-bottom:0;border-top:2px solid var(--line);padding-top:11px;font-weight:800;font-size:14px}

/* bar list */
.barlist{display:flex;flex-direction:column;gap:11px}
.barRow{display:grid;grid-template-columns:1fr auto;gap:4px 12px;align-items:center}
.barRow .nm{font-size:12px;font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.barRow .vl{font-size:12px;font-variant-numeric:tabular-nums;color:#5f6f74;font-weight:700}
.barRow .tr{grid-column:1/-1;height:6px;background:#e8ece9;overflow:hidden}
.barRow .tr>i{display:block;height:100%;background:var(--teal)}
:root[data-theme="dark"] .barRow .tr{background:var(--surface-3)}

/* data quality rows */
.dqRow{
  display:flex;gap:12px;align-items:flex-start;padding:12px 0;
  border-bottom:1px solid #e9ece9;flex-wrap:wrap;
}
:root[data-theme="dark"] .dqRow{border-bottom-color:var(--line)}
.dqRow:last-child{border-bottom:0}
.dqCount{
  min-width:44px;text-align:center;font:800 13px var(--font-display),sans-serif;
  padding:5px 8px;border-radius:4px;
}
.dqCount.warn{color:#9a5c18;background:#fff0da}
.dqCount.info{color:#235f86;background:#dcecf6}
.dqCount.danger{color:#9b3e2f;background:#fff4f1}

/* ---------- charts ---------- */
/* Charts are drawn on a 900-unit canvas (viewBox only, no intrinsic size), so width:100% alone let
   them scale up with the window - on a wide monitor a 235-unit-tall chart became 500px+ with
   giant labels. Capped at the native width: 1:1 on wide screens, still shrinks on narrow ones. */
svg.chart{display:block;width:100%;max-width:720px;height:auto;margin:0 auto;overflow:visible}
svg.chart text{font-family:var(--font-body),sans-serif;fill:#7d8b8f;font-size:10px}
svg.chart .grid-l{stroke:#e6eae7;stroke-width:1}
svg.chart .axis{stroke:#ccd5d1;stroke-width:1}
:root[data-theme="dark"] svg.chart .grid-l{stroke:#22343b}
:root[data-theme="dark"] svg.chart .axis{stroke:var(--line)}
.legend{display:flex;gap:14px;flex-wrap:wrap;margin-top:12px;font-size:11px;color:#5f6f74}
.legend i{width:9px;height:9px;display:inline-block;margin-right:6px}
:root[data-theme="dark"] .legend{color:var(--muted)}

/* ---------- modal ---------- */
.modalBackdrop{
  z-index:30;backdrop-filter:blur(4px);background:#102e36b8;display:grid;place-items:center;
  padding:20px;position:fixed;inset:0;
}
.modal{
  background:var(--surface);border-radius:12px;width:min(760px,100%);max-height:92vh;
  display:flex;flex-direction:column;overflow:hidden;box-shadow:0 28px 80px #0c202980;
}
.modal.wide{width:min(1000px,96vw)}
.modal.narrow{width:min(460px,100%)}
.modalHead{border-bottom:1px solid var(--line);display:flex;justify-content:space-between;padding:24px;gap:14px;align-items:flex-start}
.modalHead h2{font:700 26px var(--font-display),sans-serif;margin:0}
.modalHead p:last-child{color:#6f7c80;margin:5px 0 0;font-size:12px}
.modalHead>button.close{color:#68777b;background:0 0;border:0;font-size:24px;line-height:1}
.modalBody{overflow-y:auto;flex:1}
/* Some modals wrap everything in a <form> as .modal's one direct child (poDocForm, poForm) - the
   form must relay .modal's flex layout down to .modalBody, or .modalBody has no constrained
   height to actually scroll within and the form just renders full height, silently clipped by
   .modal's own overflow:hidden once it passes 92vh. Only shows up on a short enough screen for
   that to happen - confirmed missing on a smaller display, invisible on a taller one. */
.modal>form{display:flex;flex-direction:column;min-height:0;overflow:hidden}
.modal footer{
  background:var(--surface-2);display:flex;justify-content:flex-end;gap:10px;padding:16px 24px;
  border-top:1px solid var(--line);flex-wrap:wrap;align-items:center;
}
.formGrid{display:grid;grid-template-columns:1fr 1fr;gap:16px;padding:24px}
.formGrid label{color:#596a70;font-size:11px;font-weight:700;display:block}
.formGrid .wide{grid-column:1/-1}
.formGrid input,.formGrid select,.formGrid textarea{
  background:var(--surface);border:1px solid #cfd7d4;border-radius:7px;outline:0;width:100%;
  margin-top:6px;padding:10px;color:var(--ink);font-family:inherit;
}
.formGrid textarea{resize:vertical;line-height:1.5}
.formGrid input:focus,.formGrid select:focus,.formGrid textarea:focus{border-color:var(--teal);box-shadow:0 0 0 3px #0f766e16}
:root[data-theme="dark"] .formGrid input,:root[data-theme="dark"] .formGrid select,:root[data-theme="dark"] .formGrid textarea{border-color:var(--line)}
.formDivider{
  letter-spacing:.12em;color:#7a878b;border-top:1px solid var(--line);grid-column:1/-1;
  padding-top:13px;font-size:10px;font-weight:800;text-transform:uppercase;
}
.checkRow{display:flex;gap:18px;align-items:center;grid-column:1/-1;flex-wrap:wrap}
.checkRow label{display:flex;gap:7px;align-items:center;font-size:12px;font-weight:700;color:var(--ink);margin:0}
.checkRow input{width:auto;margin:0}

.setInput{
  background:var(--surface);border:1px solid #cfd7d4;border-radius:7px;outline:0;width:100%;
  margin-top:6px;padding:9px 10px;color:var(--ink);font-family:inherit;font-size:12px;font-weight:400;display:block;
}
.setInput:focus{border-color:var(--teal);box-shadow:0 0 0 3px #0f766e16}
:root[data-theme="dark"] .setInput{border-color:var(--line)}

.detailMeta{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;padding:22px 24px 0}
.detailMeta div{background:var(--surface-2);border:1px solid var(--line);min-height:62px;padding:11px 12px}
.detailMeta small{letter-spacing:.09em;color:#7b898d;font-size:9px;font-weight:800;display:block;text-transform:uppercase}
.detailMeta b{color:var(--navy);font-size:11px;line-height:1.35;display:block;margin-top:4px;word-break:break-word}
:root[data-theme="dark"] .detailMeta b{color:var(--ink)}
.noteBlock{background:#faf6f4;border-left:3px solid var(--teal);margin:18px 24px 0;padding:11px 13px;font-size:11px}
:root[data-theme="dark"] .noteBlock{background:var(--surface-2)}
.noteBlock b{letter-spacing:.1em;font-size:10px;color:#7b898d;display:block;margin-bottom:4px;text-transform:uppercase}
.availability{
  background:var(--aqua);color:var(--teal);display:flex;justify-content:space-between;
  align-items:center;margin:20px 24px;padding:12px 16px;
}
.availability strong{font:700 24px var(--font-display),sans-serif}

/* ---------- omni ---------- */
.omni{position:fixed;inset:0;z-index:35;background:#102e36a8;backdrop-filter:blur(4px);padding:80px 20px 20px;display:flex;justify-content:center}
.omniPanel{width:100%;max-width:640px;max-height:70vh;overflow-y:auto;background:var(--surface);border:1px solid var(--line);box-shadow:0 28px 80px #0c202980;padding:6px}
.omniItem{display:flex;gap:11px;align-items:center;padding:10px 12px;cursor:pointer}
.omniItem:hover{background:#eff6f4}
:root[data-theme="dark"] .omniItem:hover{background:var(--surface-3)}
.omniItem .nm{flex:1;min-width:0}
.omniItem .nm strong{display:block;font-size:13px}
.omniItem .nm small{color:#7b898d;font-size:11px;display:block}
.omniEmpty{padding:26px;text-align:center;color:#839095;font-size:12px}

/* ---------- toasts ---------- */
.toasts{position:fixed;right:18px;bottom:18px;z-index:60;display:flex;flex-direction:column;gap:9px;pointer-events:none}
.toast{
  display:flex;align-items:center;gap:10px;padding:11px 15px;background:var(--surface);
  border:1px solid var(--line);border-left:3px solid var(--teal);box-shadow:0 12px 30px #17323b24;
  font-size:12px;font-weight:700;min-width:240px;pointer-events:auto;animation:slide .2s ease;
}
@keyframes slide{from{opacity:0;transform:translateX(14px)}}
.toast.err{border-left-color:#c94a3b}
.toast.info{border-left-color:var(--blue)}
.toast .ic{width:15px;height:15px}
.toast.ok .ic{color:var(--teal)} .toast.err .ic{color:#c94a3b} .toast.info .ic{color:var(--blue)}

/* ---------- misc ---------- */
.empty{text-align:center;color:#839095;padding:50px 20px}
.empty strong{display:block;color:#526268;margin-bottom:5px;font-size:14px}
.hint{font-size:11px;color:#718085;line-height:1.55}
.stack{display:flex;flex-direction:column;gap:14px}
.rowFlex{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.drop{
  border:1px dashed #9bbcb5;background:#f5fbf9;color:var(--teal);border-radius:6px;
  padding:26px;text-align:center;cursor:pointer;font-weight:700;
}
.drop:hover,.drop.over{background:#e3f2ee}
:root[data-theme="dark"] .drop{background:var(--surface-2)}
code.k{font-family:'Cascadia Mono',ui-monospace,Consolas,monospace;font-size:11px;background:var(--surface-3);padding:1px 5px;border:1px solid var(--line)}
.error{color:#8b3828;background:#fff1ed;border:1px solid #e8b4a8;display:flex;justify-content:space-between;margin:18px 4vw 0;padding:12px 16px}
.foot{padding:16px 4vw 30px;color:#8a9598;font-size:10px;display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;letter-spacing:.04em}

/* ---------- responsive ---------- */
@media (max-width:1100px){
  .topbar{grid-template-columns:210px 1fr auto;gap:10px}
  .brand small{display:none}
  .searchBox{display:none}
  .commandBar{justify-content:flex-end}
}
@media (max-width:900px){
  .topbar{padding:0 18px}
  nav{
    border-top:1px solid var(--line);z-index:20;background:var(--surface);
    justify-content:space-around;height:58px;position:fixed;bottom:0;left:0;right:0;overflow-x:auto;
  }
  nav button.active:after{top:0;bottom:auto}
  .hero{padding:24px 22px}
  .heroStatus{display:none}
  .metrics{grid-template-columns:repeat(2,1fr)}
  .metrics article:first-child{padding-left:20px}
  .metrics article:last-child{padding-right:20px}
  .workspace{margin:18px 12px 90px}
  .workspace+.workspace{margin-top:-4px}
  .splitGrid,.halfGrid{grid-template-columns:1fr}
  .splitGrid>*+*,.halfGrid>*+*{border-left:0;border-top:1px solid var(--line)}
  /* A table dropped straight into a grid cell must scroll inside the cell, never push the
     page wider than the phone (the dashboard's latest-PO table did exactly that: the whole
     page zoomed out to two-thirds size to fit it). */
  .splitGrid>div,.halfGrid>div{min-width:0;max-width:100%}
  .cardGrid,.cardGrid.two{grid-template-columns:1fr}
  .formGrid{grid-template-columns:1fr}
  .formGrid .wide{grid-column:auto}
  .detailMeta{grid-template-columns:1fr 1fr}
  .userMenu{display:none}
}
@media (max-width:600px){
  .metrics{grid-template-columns:1fr 1fr}
  .metrics article{padding:15px}
  .metrics article:last-child{grid-column:1/-1}
  .sectionHead{flex-direction:column;align-items:flex-start;gap:14px}
  .tools{width:100%}
  .tools label{flex:1}
  .tools input{width:100%}
  .detailMeta{grid-template-columns:1fr}

  /* Wide data tables don't fit a phone screen even shrunk down - stack each row into a
     labeled card instead of forcing horizontal scroll. */
  /* min-width:0 is load-bearing, not decorative: width:100% does not beat a min-width,
     and a table that keeps one in card mode stays wider than the phone while the rule
     below removes its scroll wrapper - which pushes the whole page off the screen. */
  table.mobileCards{display:block;width:100%;min-width:0}
  table.mobileCards thead{display:none}
  table.mobileCards tbody{display:block}
  table.mobileCards tr{display:block;margin-bottom:10px;padding:10px 12px;border:1px solid var(--line);border-radius:10px;background:#fff}
  table.mobileCards td{display:flex!important;justify-content:space-between;align-items:flex-start;gap:12px;padding:5px 0!important;border-bottom:none!important;text-align:right;white-space:normal;min-width:0}
  table.mobileCards td[data-label]:not([data-label=""])::before{content:attr(data-label);font-weight:700;color:var(--muted);text-align:left;flex-shrink:0;font-size:9px;text-transform:uppercase;letter-spacing:.03em}
  table.mobileCards .rowActions{justify-content:flex-end}
  .tableWrap:has(table.mobileCards){overflow:visible;max-height:none}
  /* A nested vertical scroller inside a page that already scrolls is awkward on a touch
     screen, and its height was computed from desktop chrome (100vh - 210px). */
  .tableWrap{max-height:none}
  /* Invoice numbers, PO numbers and file names are single unbreakable tokens - one of
     them in a card cell is enough to widen the page. */
  td,.mono,.wrapText{overflow-wrap:anywhere}
  .modal{max-height:90dvh}
}
@media print{
  .topbar,.commandBar,nav,.toasts,.rowActions,.pager,.foot,.hero{display:none!important}
  .workspace{margin:0;border:0;box-shadow:none}
  body{background:#fff}
}

/* ---------- shared org sign-in screen (same design across every YEPL app) ---------- */
.ssoScreen{
  position:fixed;inset:0;z-index:60;display:flex;align-items:center;justify-content:center;
  background:linear-gradient(115deg,#e8f2ee 0 58%,#f3ede1 58%);
  background-image:radial-gradient(circle,#ffffff90 0 1.5px,#0000 2px),
                    linear-gradient(115deg,#e8f2ee 0 58%,#f3ede1 58%);
  background-size:22px 22px, 100% 100%;
}
:root[data-theme="dark"] .ssoScreen{background:linear-gradient(115deg,#0e1a1f 0 58%,#161310 58%)}
.ssoCard{width:min(400px,90vw);background:var(--surface);border-radius:10px;box-shadow:0 24px 60px #17323b26;overflow:hidden}
.ssoBar{height:5px;background:var(--teal)}
.ssoBody{padding:32px 36px 30px}
.ssoLogo{height:40px;display:block;margin-bottom:18px;object-fit:contain;object-position:left center}
.ssoEyebrow{color:var(--teal);font-size:11px;font-weight:800;letter-spacing:.12em;margin:0 0 6px}
.ssoBody h1{font:700 26px var(--font-display),sans-serif;letter-spacing:-.02em;margin:0 0 6px;color:var(--navy)}
.ssoSub{color:#65767b;font-size:12.5px;margin:0 0 22px}
.ssoBody form label{display:block;font-size:11.5px;font-weight:700;color:#526066;margin-bottom:14px}
.ssoBody form input{
  display:block;width:100%;margin-top:6px;padding:11px 13px;border:1px solid var(--line);
  border-radius:8px;font-size:13px;font-family:inherit;background:var(--surface);color:var(--ink);
}
.ssoBody form input:focus{outline:2px solid var(--aqua);border-color:var(--teal)}
.ssoBtn{
  width:100%;margin-top:6px;padding:13px;border:0;border-radius:8px;background:var(--teal);
  color:#fff;font-weight:700;font-size:13.5px;cursor:pointer;
}
.ssoBtn:hover{background:var(--navy)}
.ssoError{color:#c62f3d;font-size:11.5px;margin:-6px 0 12px}