/* Spec build phase 1 (page-spec.md "Foundations"). Scoped to the new .sp-* pages. Uses the theme tokens so dark mode follows. */
#saverbro-r0 .sb-content { max-width:1440px; margin:0 auto; width:100%; box-sizing:border-box; }
#saverbro-r0 .sp-page { padding:32px; display:flex; flex-direction:column; gap:24px; color:var(--c-text); font-size:14px; }
#saverbro-r0 .sp-crumb { font-size:13px; color:var(--c-text-3); margin-bottom:4px; }
#saverbro-r0 .sp-crumb button { background:none; border:0; padding:0; color:var(--c-accent-text); cursor:pointer; font:inherit; }
#saverbro-r0 .sp-head-row { display:flex; align-items:center; gap:12px; }
#saverbro-r0 .sp-head-row h1 { font-size:28px; line-height:36px; font-weight:700; margin:0; flex:1; color:var(--c-text); }
#saverbro-r0 .sp-sub { margin:4px 0 0; color:var(--c-text-2); font-size:15px; }
#saverbro-r0 .sp-btn { height:40px; padding:0 16px; border-radius:8px; font-family:inherit; font-size:14px; font-weight:600; line-height:1; cursor:pointer; border:1px solid var(--c-border-strong); background:var(--c-surface); color:var(--c-text); display:inline-flex; align-items:center; gap:8px; white-space:nowrap; }
#saverbro-r0 .sp-btn:hover { border-color:var(--c-accent-text); }
#saverbro-r0 .sp-btn.primary { background:var(--c-accent-strong); border-color:var(--c-accent-strong); color:#fff; }
#saverbro-r0 .sp-btn.primary:hover { background:var(--c-accent); }
#saverbro-r0 .sp-btn.small { height:32px; padding:0 12px; font-size:13px; }
#saverbro-r0 .sp-btn.link { border:0; background:none; color:var(--c-accent-text); padding:0 4px; }
#saverbro-r0 .sp-btn.danger { color:var(--c-bad); }
#saverbro-r0 .sp-btn.danger-fill { background:var(--c-bad); border-color:var(--c-bad); color:#fff; }
#saverbro-r0 .sp-btn:disabled { opacity:.55; cursor:not-allowed; }
#saverbro-r0 .sp-btn:focus-visible, #saverbro-r0 .sp-tab:focus-visible, #saverbro-r0 .sp-seg button:focus-visible { outline:2px solid var(--c-accent-text); outline-offset:2px; }
#saverbro-r0 .sp-more { position:relative; }
#saverbro-r0 .sp-more > .sp-btn { width:40px; justify-content:center; padding:0; font-size:18px; }
#saverbro-r0 .sp-menu { position:absolute; right:0; top:44px; z-index:40; min-width:200px; background:var(--c-surface); border:1px solid var(--c-border); border-radius:10px; box-shadow:0 8px 24px var(--c-shadow); padding:6px; }
#saverbro-r0 .sp-menu button { display:block; width:100%; text-align:left; padding:9px 12px; border:0; background:none; border-radius:6px; font:inherit; color:var(--c-text); cursor:pointer; }
#saverbro-r0 .sp-menu button:hover { background:var(--c-surface-2); }
#saverbro-r0 .sp-menu button.danger { color:var(--c-bad); }
#saverbro-r0 .sp-tabs { display:flex; gap:24px; border-bottom:1px solid var(--c-border); margin-top:8px; }
#saverbro-r0 .sp-tab { background:none; border:0; border-bottom:2px solid transparent; padding:10px 0; font-family:inherit; font-size:14px; font-weight:500; color:var(--c-text-2); cursor:pointer; margin-bottom:-1px; }
#saverbro-r0 .sp-tab[aria-selected="true"] { color:var(--c-accent-text); border-bottom-color:var(--c-accent-strong); font-weight:600; }
#saverbro-r0 .sp-seg { display:inline-flex; border:1px solid var(--c-border-strong); border-radius:8px; overflow:hidden; height:40px; }
#saverbro-r0 .sp-seg button { border:0; background:var(--c-surface); padding:0 14px; font-family:inherit; font-size:14px; font-weight:500; color:var(--c-text-2); cursor:pointer; }
#saverbro-r0 .sp-seg button[aria-pressed="true"] { background:var(--c-accent-soft); color:var(--c-accent-text); font-weight:600; }
#saverbro-r0 .sp-seg.small { height:32px; } #saverbro-r0 .sp-seg.small button { font-size:13px; padding:0 10px; }
#saverbro-r0 .sp-grid { display:grid; grid-template-columns:repeat(12, minmax(0,1fr)); gap:24px; align-items:start; }
#saverbro-r0 .sp-tiles { display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:24px; }
#saverbro-r0 .sp-tiles.three { grid-template-columns:repeat(3, minmax(0,1fr)); }
#saverbro-r0 .sp-card { background:var(--c-surface); border:1px solid var(--c-border); border-radius:12px; padding:20px; box-sizing:border-box; min-width:0; }
#saverbro-r0 .sp-card.flush { padding:0; overflow:hidden; }
#saverbro-r0 .sp-card-head { display:flex; align-items:center; gap:12px; margin-bottom:16px; }
#saverbro-r0 .sp-card.flush .sp-card-head { padding:16px 20px 0; }
#saverbro-r0 .sp-card-head h2 { font-size:16px; font-weight:600; margin:0; flex:1; color:var(--c-text); }
#saverbro-r0 .sp-card-head .meta { color:var(--c-text-3); font-size:13px; }
#saverbro-r0 .sp-tile { background:var(--c-surface); border:1px solid var(--c-border); border-radius:12px; padding:16px 20px; }
#saverbro-r0 .sp-tile .lbl { font-size:13px; color:var(--c-text-2); }
#saverbro-r0 .sp-tile .num { font-size:28px; font-weight:700; line-height:36px; margin-top:4px; color:var(--c-text); font-variant-numeric:tabular-nums; }
#saverbro-r0 .sp-tile .sub { font-size:12px; color:var(--c-text-3); }
#saverbro-r0 .sp-tile.warn .num { color:var(--c-warn); } #saverbro-r0 .sp-tile.bad .num { color:var(--c-bad); }
#saverbro-r0 .sp-chip { display:inline-flex; align-items:center; gap:6px; font-size:13px; color:var(--c-text-2); white-space:nowrap; }
#saverbro-r0 .sp-chip::before { content:""; width:6px; height:6px; border-radius:50%; background:var(--dot, #8A9099); flex:none; }
#saverbro-r0 .sp-chip.green { --dot:#1E8E3E; } #saverbro-r0 .sp-chip.amber { --dot:#D98A00; } #saverbro-r0 .sp-chip.red { --dot:#C5221F; } #saverbro-r0 .sp-chip.blue { --dot:#1643b8; } #saverbro-r0 .sp-chip.grey { --dot:#8A9099; }
#saverbro-r0 .sp-tag { display:inline-block; font-size:12px; font-weight:600; padding:2px 8px; border-radius:999px; background:var(--c-surface-2); color:var(--c-text-2); }
#saverbro-r0 .sp-tag.green { background:var(--c-ok-bg); color:var(--c-ok); }
#saverbro-r0 .sp-tag.blue { background:var(--c-accent-soft); color:var(--c-accent-text); }
#saverbro-r0 .sp-tag.amber { background:var(--c-warn-bg); color:var(--c-warn); }
#saverbro-r0 .sp-avatar { width:32px; height:32px; border-radius:50%; background:var(--c-accent-soft); color:var(--c-accent-text); font-size:12px; font-weight:700; display:inline-flex; align-items:center; justify-content:center; flex:none; }
#saverbro-r0 .sp-avatar.lg { width:56px; height:56px; font-size:18px; }
#saverbro-r0 .sp-table { width:100%; border-collapse:collapse; font-size:14px; }
#saverbro-r0 .sp-table th { text-align:left; font-size:12px; font-weight:600; color:var(--c-text-3); padding:10px 12px; border-bottom:1px solid var(--c-border); white-space:nowrap; }
#saverbro-r0 .sp-table td { padding:12px; border-bottom:1px solid var(--c-border); vertical-align:middle; color:var(--c-text); }
#saverbro-r0 .sp-table tr:last-child td { border-bottom:0; }
#saverbro-r0 .sp-table .num, #saverbro-r0 .sp-table th.num { text-align:right; font-variant-numeric:tabular-nums; }
#saverbro-r0 .sp-table tr.sel td { background:var(--c-accent-soft); }
#saverbro-r0 .sp-table tbody tr[data-click] { cursor:pointer; }
#saverbro-r0 .sp-mono { font-family:ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size:12px; color:var(--c-text-3); }
#saverbro-r0 .sp-muted { color:var(--c-text-3); }
#saverbro-r0 .sp-empty { padding:32px 16px; text-align:center; color:var(--c-text-3); }
#saverbro-r0 .sp-error { padding:16px; color:var(--c-bad); }
#saverbro-r0 .sp-demo-note { font-size:12px; color:var(--c-text-3); margin:-8px 0 0; }
#saverbro-r0[data-mode="live"] .sp-demo-note, #saverbro-r0:not([data-mode]) .sp-demo-note { display:none; }
#saverbro-r0[data-mode="live"] .sb-safety-note, #saverbro-r0[data-mode="live"] [data-demo-only] { display:none !important; }
#saverbro-r0 .sp-filters { display:flex; gap:12px; align-items:center; padding:12px 20px; border-bottom:1px solid var(--c-border); }
#saverbro-r0 .sp-search { height:36px; border:1px solid var(--c-border-strong); border-radius:8px; padding:0 12px; min-width:240px; font:inherit; background:var(--c-surface); color:var(--c-text); }
#saverbro-r0 .sp-filters .count { margin-left:auto; color:var(--c-text-3); font-size:13px; }
#saverbro-r0 .sp-check { display:inline-flex; gap:6px; align-items:center; font-size:13px; color:var(--c-text-2); }
#saverbro-r0 .sp-board { display:grid; gap:16px; grid-auto-flow:column; grid-auto-columns:minmax(220px,1fr); }
#saverbro-r0 .sp-col { background:var(--c-surface-2); border-radius:12px; padding:12px; min-height:200px; display:flex; flex-direction:column; gap:10px; }
#saverbro-r0 .sp-col > header { display:flex; align-items:center; gap:8px; font-weight:600; font-size:14px; padding:2px 4px 4px; color:var(--c-text); }
#saverbro-r0 .sp-col > header .n { color:var(--c-text-3); font-weight:500; }
#saverbro-r0 .sp-col > header .sp-seg { margin-left:auto; }
#saverbro-r0 .sp-bcard { background:var(--c-surface); border:1px solid var(--c-border); border-radius:10px; padding:12px; display:flex; flex-direction:column; gap:6px; font-size:13px; color:var(--c-text-2); }
#saverbro-r0 .sp-bcard strong { font-size:14px; color:var(--c-text); }
#saverbro-r0 .sp-bcard .row { display:flex; align-items:center; gap:8px; }
#saverbro-r0 .sp-bcard .acts { display:flex; gap:6px; flex-wrap:wrap; margin-top:4px; }
#saverbro-r0 .sp-col .sp-empty { padding:16px 8px; font-size:13px; }
#saverbro-r0 .sp-bar { height:6px; border-radius:3px; background:var(--c-surface-3); overflow:hidden; width:80px; display:inline-block; vertical-align:middle; }
#saverbro-r0 .sp-bar > i { display:block; height:100%; background:var(--c-accent-strong); }
#saverbro-r0 .sp-field { display:flex; flex-direction:column; gap:6px; margin-bottom:16px; }
#saverbro-r0 .sp-field > span { font-size:13px; font-weight:600; color:var(--c-text); }
#saverbro-r0 .sp-field input, #saverbro-r0 .sp-field select, #saverbro-r0 .sp-field textarea { border:1px solid var(--c-border-strong); border-radius:8px; padding:9px 12px; font:inherit; background:var(--c-surface); color:var(--c-text); }
#saverbro-r0 .sp-field textarea { min-height:96px; resize:vertical; }
#saverbro-r0 .sp-field input:focus-visible, #saverbro-r0 .sp-field textarea:focus-visible, #saverbro-r0 .sp-field select:focus-visible, #saverbro-r0 .sp-search:focus-visible { outline:2px solid var(--c-accent-text); outline-offset:1px; }
#saverbro-r0 .sp-dialog-back { position:fixed; inset:0; background:rgba(0,0,0,.35); z-index:80; display:flex; align-items:center; justify-content:center; }
#saverbro-r0 .sp-dialog { background:var(--c-surface); border-radius:12px; padding:24px; width:440px; max-width:92vw; box-shadow:0 12px 40px rgba(0,0,0,.25); }
#saverbro-r0 .sp-dialog h2 { margin:0 0 8px; font-size:18px; color:var(--c-text); }
#saverbro-r0 .sp-dialog p { margin:0 0 20px; color:var(--c-text-2); }
#saverbro-r0 .sp-dialog .acts { display:flex; justify-content:flex-end; gap:8px; }
#saverbro-r0 .sp-list-row { display:flex; align-items:center; gap:12px; padding:12px 0; border-bottom:1px solid var(--c-border); }
#saverbro-r0 .sp-list-row:last-child { border-bottom:0; }
#saverbro-r0 .sp-list-row .grow { flex:1; min-width:0; }
#saverbro-r0 .sp-list-row .t { font-weight:600; color:var(--c-text); }
#saverbro-r0 .sp-list-row .m { font-size:13px; color:var(--c-text-3); }
#saverbro-r0 .sp-dot { width:6px; height:6px; border-radius:50%; background:var(--c-accent); display:inline-block; flex:none; }
#saverbro-r0 .sp-span-2 { grid-column:span 2; } #saverbro-r0 .sp-span-3 { grid-column:span 3; } #saverbro-r0 .sp-span-4 { grid-column:span 4; } #saverbro-r0 .sp-span-6 { grid-column:span 6; } #saverbro-r0 .sp-span-8 { grid-column:span 8; } #saverbro-r0 .sp-span-9 { grid-column:span 9; } #saverbro-r0 .sp-span-12 { grid-column:span 12; }
#saverbro-r0 .sp-selbar { display:flex; gap:8px; align-items:center; padding:12px 20px; border-bottom:1px solid var(--c-border); background:var(--c-surface-2); }
#saverbro-r0 .sp-selbar .meta { margin-right:auto; color:var(--c-text-2); font-size:13px; }

/* One shared primary-button style for every primary action.
   Navy blue accent, white text — WCAG AA contrast. Disabled only when really disabled: 40% opacity. */
#saverbro-r0 .sp-btn.primary, #saverbro-r0 .sb-primary, #saverbro-r0 .rd .rd-primary, #saverbro-r0 button.sb-btn-primary {
  background:var(--c-accent-strong) !important; border:1px solid var(--c-accent-strong) !important; color:#FFFFFF !important; height:40px; padding:0 16px; border-radius:8px;
  font-family:inherit; font-size:14px !important; font-weight:600 !important; line-height:1; cursor:pointer; opacity:1; display:inline-flex; align-items:center; justify-content:center; gap:8px; white-space:nowrap; }
#saverbro-r0 .sp-btn.primary:hover:not(:disabled), #saverbro-r0 .sb-primary:hover:not(:disabled), #saverbro-r0 .rd .rd-primary:hover:not(:disabled) { background:var(--c-accent) !important; border-color:var(--c-accent) !important; }
#saverbro-r0 .sp-btn.primary:focus-visible, #saverbro-r0 .sb-primary:focus-visible, #saverbro-r0 .rd .rd-primary:focus-visible { outline:2px solid var(--c-accent); outline-offset:2px; }
#saverbro-r0 .sp-btn.primary:disabled, #saverbro-r0 .sb-primary:disabled, #saverbro-r0 .rd .rd-primary:disabled { opacity:.4; cursor:not-allowed; }
#saverbro-r0 .sp-btn.primary.block { width:100%; }
#saverbro-r0 .sp-btn.quiet { border:0; background:none; color:var(--c-text-3); padding:0 8px; font-weight:500; }
#saverbro-r0 .sp-btn.quiet:hover { color:var(--c-text); }
#saverbro-r0 .sp-saved { font-size:13px; color:var(--c-ok); transition:opacity .4s ease; }
#saverbro-r0 .sp-saved.fade { opacity:0; }
/* Toasts: always readable text (the old style used the same colour for text and background). */
#saverbro-r0 .sb-toast { position:fixed; right:24px; bottom:24px; z-index:90; background:var(--c-surface) !important; color:var(--c-text) !important; border:1px solid var(--c-border-strong); border-left:4px solid #1E8E3E; }
#saverbro-r0 .sb-toast[data-kind="error"] { border-left-color:#C5221F; }
#saverbro-r0 .sb-toast:empty { display:none !important; }
#saverbro-r0 .sp-branch select { height:40px; border:1px solid var(--c-border-strong); border-radius:8px; padding:0 32px 0 12px; font-family:inherit; font-size:14px; font-weight:500; background:var(--c-surface); color:var(--c-text); cursor:pointer; }
#saverbro-r0 .sp-branch select:focus-visible { outline:2px solid var(--c-accent-text); outline-offset:2px; }
#saverbro-r0 .sp-group-head { font-size:13px; font-weight:700; color:var(--c-text-2); background:var(--c-surface-2); }

/* Sidebar (Cedric, 17 Oct 2026): pinned user card, only the menu scrolls; chevrons; indented sub-items. */
/* Fixed frame (Cedric, 17 Oct 2026): the window never scrolls; only the main area and the menu list do.
   Logo header and user card sit outside the scroller and never move. */
@media (min-width: 681px) {
  html, body { height:100%; overflow:hidden; }
  #saverbro-r0 { height:100dvh !important; min-height:0 !important; overflow:hidden; }
  #saverbro-r0 .sb-shell { height:100dvh !important; min-height:0 !important; padding-bottom:0 !important; }
  #saverbro-r0 .sb-main { height:100dvh !important; overflow-y:auto; overscroll-behavior:contain; }
  #saverbro-r0 .sb-sidebar { position:sticky !important; top:0; height:100dvh !important; display:flex !important; flex-direction:column; overflow:hidden !important; padding-bottom:0 !important; }
}
#saverbro-r0 .sb-sidebar .sb-brand { flex:none; }
#saverbro-r0 .sb-sidebar .sb-nav { flex:1 1 auto; min-height:0; overflow-y:auto; overflow-x:hidden; overscroll-behavior:contain; padding-right:2px; scrollbar-width:thin; scrollbar-color:transparent transparent; }
#saverbro-r0 .sb-sidebar .sb-nav:hover { scrollbar-color:#555 transparent; }
#saverbro-r0 .sb-sidebar .sb-nav::-webkit-scrollbar { width:4px; }
#saverbro-r0 .sb-sidebar .sb-nav::-webkit-scrollbar-track { background:transparent; }
#saverbro-r0 .sb-sidebar .sb-nav::-webkit-scrollbar-thumb { background:transparent; border-radius:2px; }
#saverbro-r0 .sb-sidebar .sb-nav:hover::-webkit-scrollbar-thumb { background:#555; }
#saverbro-r0 .sb-sidebar .sb-nav::-webkit-scrollbar-button { display:none; width:0; height:0; }
#saverbro-r0 .sb-sidebar .sb-sidebar-footer { flex:none; position:relative !important; top:auto !important; bottom:auto !important; margin-top:0 !important; border-top:1px solid rgba(255,255,255,.14) !important; padding:12px 8px 8px !important; background:var(--c-sidebar); }
#saverbro-r0 .sb-sidebar .sb-nav .sb-nav-group > button { min-height:40px; }
#saverbro-r0 .sb-nav-chevron { margin-left:auto; flex:none; width:16px; height:16px; display:inline-flex; color:#9AA3AD; transition:transform 150ms ease, color 150ms ease; }
#saverbro-r0 .sb-nav-chevron svg { width:16px; height:16px; }
#saverbro-r0 .sb-sidebar .sb-nav button[aria-expanded="true"] .sb-nav-chevron { transform:rotate(90deg); }
#saverbro-r0 .sb-sidebar .sb-nav button:hover .sb-nav-chevron { color:#FFFFFF; }
#saverbro-r0 .sb-sidebar .sb-nav button:focus-visible { outline:2px solid rgba(255,255,255,.7); outline-offset:-2px; }
@media (prefers-reduced-motion: reduce) { #saverbro-r0 .sb-nav-chevron { transition:none; } }
#saverbro-r0 .sb-sidebar .sb-subnav { margin:2px 0 6px 22px; padding-left:8px; border-left:1px solid rgba(255,255,255,.16); }
#saverbro-r0 .sb-sidebar .sb-nav .sb-subnav-item { padding:6px 12px 6px 14px !important; min-height:34px; }
#saverbro-r0 .sb-avatar { background:var(--c-accent-strong) !important; color:#FFFFFF !important; border:0 !important; width:32px; height:32px; border-radius:50%; display:grid; place-items:center; font-weight:700; font-size:13px; flex:none; }
#saverbro-r0 .sb-user { display:flex; align-items:center; gap:10px; border-radius:8px; padding:6px !important; }
#saverbro-r0 .sb-user:hover { background:rgba(255,255,255,.06) !important; }
#saverbro-r0 .sb-user:focus-visible { outline:2px solid rgba(255,255,255,.7); outline-offset:2px; }
#saverbro-r0 .sb-user-menu { position:absolute; left:0; right:0; bottom:calc(100% + 8px); background:#2A2A2A; border:1px solid rgba(255,255,255,.12); border-radius:10px; box-shadow:0 12px 30px rgba(0,0,0,.35); padding:4px 0 6px; z-index:60; }
#saverbro-r0 .sb-user-menu-item { display:flex; align-items:center; justify-content:space-between; width:100%; text-align:left; padding:9px 14px; border:0; background:none; color:#E9ECEF; font-family:inherit; font-size:13px; cursor:pointer; }
#saverbro-r0 .sb-user-menu-item:hover, #saverbro-r0 .sb-user-menu-item:focus-visible { background:rgba(255,255,255,.08); color:#fff; outline:none; }
#saverbro-r0 .sb-user-menu-hint { color:#9AA3AD; font-size:12px; }
/* Disabled Submit tooltip ('Fill in both fields'), visible on hover and keyboard focus of the card. */
#saverbro-r0 .sp-tipwrap { position:relative; }
#saverbro-r0 .sp-tipwrap[data-tip]:hover::after, #saverbro-r0 .sp-tipwrap[data-tip]:focus-within::after { content:attr(data-tip); position:absolute; left:50%; bottom:calc(100% + 8px); transform:translateX(-50%); background:#1F2933; color:#fff; font-size:12px; font-weight:600; padding:6px 10px; border-radius:6px; white-space:nowrap; box-shadow:0 4px 12px rgba(0,0,0,.2); pointer-events:none; z-index:20; }
#saverbro-r0 .sp-sr { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
/* Long sub-menu names (e.g. Staff Accounts Payroll) wrap instead of being cut off. */
#saverbro-r0 .sb-sidebar .sb-subnav-item .sb-nav-text { white-space:normal; overflow:visible; text-overflow:clip; line-height:1.3; }

/* "View only" / "View and archive" chip (grey lock) next to the page title; tooltip from page-rights.mjs. */
#saverbro-r0 .sp-viewchip { display:inline-flex; align-items:center; gap:5px; height:24px; padding:0 10px; border-radius:999px; background:#EEF0F2; color:#56606B; font:600 12px/1 'Open Sans',system-ui,sans-serif; vertical-align:middle; margin-left:10px; letter-spacing:0; text-transform:none; cursor:default; }
#saverbro-r0 .sp-viewchip .sp-tipwrap::after, #saverbro-r0 .sp-viewchip[data-tip]:hover::after, #saverbro-r0 .sp-viewchip[data-tip]:focus::after { left:0; transform:none; bottom:auto; top:calc(100% + 8px); white-space:normal; width:260px; font-weight:500; line-height:1.4; }
html[data-theme="dark"] #saverbro-r0 .sp-viewchip { background:#2F343A; color:#C9CED4; }
#saverbro-r0 .sp-ro input { border-color:transparent !important; background:transparent !important; padding-left:0 !important; box-shadow:none !important; }
#saverbro-r0 .sb-scope-switch label { display:flex; flex-direction:column; }
#saverbro-r0 .sb-scope-switch select { border:0; outline:none; background:transparent; font:600 14px 'Open Sans',system-ui,sans-serif; color:var(--c-text); padding:0; cursor:pointer; }
#saverbro-r0 .sb-scope-switch select:focus-visible { outline:2px solid var(--c-accent,#3b82f6); outline-offset:2px; border-radius:4px; }

/* Leave & attendance */
#saverbro-r0 .sp-balances { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; margin-bottom:24px; }
#saverbro-r0 .sp-balance { background:var(--c-surface); border:1px solid var(--c-border); border-radius:10px; padding:14px 16px; display:flex; flex-direction:column; gap:4px; }
#saverbro-r0 .sp-balance .l { font-size:13px; font-weight:600; color:var(--c-text-2); }
#saverbro-r0 .sp-balance .v { font-size:14px; color:var(--c-text-2); }
#saverbro-r0 .sp-balance .v strong { font-family:Montserrat,'Open Sans',sans-serif; font-size:28px; font-weight:700; color:var(--c-accent-text); background:none; margin-right:4px; }
#saverbro-r0 .sp-balance .s { font-size:12px; }
#saverbro-r0 .sp-chips { display:flex; gap:8px; flex-wrap:wrap; }
#saverbro-r0 .sp-filter { height:28px; padding:0 12px; border-radius:999px; border:1px solid var(--c-border); background:var(--c-surface); color:var(--c-text-2); font:600 13px 'Open Sans',sans-serif; cursor:pointer; display:inline-flex; gap:6px; align-items:center; }
#saverbro-r0 .sp-filter[aria-pressed="true"] { background:var(--c-accent-soft); border-color:var(--c-accent); color:var(--c-accent-text); }
#saverbro-r0 .sp-filter .n { color:var(--c-text-3); font-weight:500; }
#saverbro-r0 .sp-empty-line { padding:20px; color:var(--c-text-2); }
#saverbro-r0 .sp-inline-note { padding:10px 20px; color:var(--c-ok); font-size:13px; border-bottom:1px solid var(--c-border); }
#saverbro-r0 .sp-actions { white-space:nowrap; text-align:right; }
#saverbro-r0 .sp-actions .sp-btn + .sp-btn { margin-left:8px; }
#saverbro-r0 .sp-side-back { position:fixed; inset:0; background:rgba(17,24,39,.32); z-index:80; display:flex; justify-content:flex-end; }
#saverbro-r0 .sp-side { width:440px; max-width:100%; height:100%; background:var(--c-surface); display:flex; flex-direction:column; box-shadow:-8px 0 24px rgba(0,0,0,.15); }
#saverbro-r0 .sp-side header { display:flex; align-items:center; justify-content:space-between; padding:20px 24px; border-bottom:1px solid var(--c-border); }
#saverbro-r0 .sp-side header h2 { margin:0; font-size:18px; }
#saverbro-r0 .sp-side-body { flex:1; overflow-y:auto; padding:24px; }
#saverbro-r0 .sp-side footer { display:flex; justify-content:flex-end; gap:12px; padding:16px 24px; border-top:1px solid var(--c-border); }
#saverbro-r0 .sp-side .sp-field { display:flex; flex-direction:column; gap:6px; margin-bottom:16px; }
#saverbro-r0 .sp-side .sp-field input, #saverbro-r0 .sp-side .sp-field select, #saverbro-r0 .sp-side .sp-field textarea { width:100%; box-sizing:border-box; }
#saverbro-r0 .sp-field-row { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
#saverbro-r0 .sp-switch { display:flex; align-items:center; gap:8px; margin-bottom:16px; font-size:14px; }
#saverbro-r0 .sp-balance-line { padding:10px 12px; border-radius:8px; background:var(--c-surface-2); font-size:13px; color:var(--c-text-2); margin-bottom:12px; }

/* ── POS Support (page 37) and Page not found, 17 Oct 2026 ─────────────────────────────────────── */
#saverbro-r0 .sp-filters { min-height:56px; box-sizing:border-box; flex-wrap:wrap; }
#saverbro-r0 .sp-filters .sp-search { width:320px; min-width:0; }
#saverbro-r0 .sp-filters select { height:36px; border:1px solid var(--c-border-strong); border-radius:8px; padding:0 28px 0 10px; font:inherit; font-size:14px; background-color:var(--c-surface); color:var(--c-text); }
#saverbro-r0 .sp-toggle { display:inline-flex; align-items:center; gap:6px; font-size:14px; color:var(--c-text-2); white-space:nowrap; }
#saverbro-r0 .sp-chipbtn { cursor:pointer; border:0; display:inline-flex; align-items:center; gap:4px; font:inherit; }
#saverbro-r0 .sp-chipbtn:focus-visible { outline:2px solid var(--c-accent); outline-offset:2px; }
#saverbro-r0 .sp-chipmenu .sp-menu { left:0; right:auto; }
#saverbro-r0 .sp-rowacts { width:48px; text-align:right; }
#saverbro-r0 .sp-table tr.archived td { color:var(--c-text-3); }
#saverbro-r0 .sp-inline-save { display:inline-flex; align-items:center; gap:12px; }
#saverbro-r0 .sr-only { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
#saverbro-r0 .sp-notfound-card { padding:24px; display:flex; flex-direction:column; align-items:flex-start; gap:16px; max-width:560px; }
#saverbro-r0 .sp-notfound-card p { margin:0; color:var(--c-text-2); }

/* ── Sidebar rows (Cedric via Bob, 17 Oct 2026): 36px rows, 6px radius, 14px medium, 18px icons, 10px gap,
      2px between rows, 32px child rows, 11px section labels (16px above, 6px below). Active/hover fill the
      whole row (nav width minus 8px each side); 3px #009EE7 indicator inside the row, clipped by the radius. ── */
#saverbro-r0 .sb-sidebar .sb-nav { display:block; padding:0 0 8px !important; gap:0; }
#saverbro-r0 .sb-sidebar .sb-nav-section { display:flex; flex-direction:column; gap:2px; padding:0; margin:0; }
#saverbro-r0 .sb-sidebar .sb-nav-heading { font-size:11px; line-height:16px; margin:16px 0 6px; padding:0 20px; font-variant:normal; }
#saverbro-r0 .sb-sidebar .sb-nav-group { display:flex; flex-direction:column; gap:2px; margin:0; padding:0; }
#saverbro-r0 .sb-sidebar .sb-nav .sb-nav-group > button,
#saverbro-r0 .sb-sidebar .sb-nav .sb-subnav-item {
  display:flex !important; align-items:center; gap:10px; box-sizing:border-box; position:relative; overflow:hidden;
  width:calc(100% - 16px) !important; margin:0 8px !important; height:36px; min-height:36px !important; max-height:36px;
  padding:0 12px !important; border-radius:6px !important; font-size:14px; font-weight:500; line-height:20px; text-align:left;
  box-shadow:none !important; background:transparent; }
#saverbro-r0 .sb-sidebar .sb-nav .sb-subnav-item { height:32px; min-height:32px !important; max-height:32px; padding-left:calc(36px + (var(--depth, 1) - 1) * 12px) !important; font-size:13px; font-weight:400; }
#saverbro-r0 .sb-sidebar .sb-nav .sb-nav-group > button:hover,
#saverbro-r0 .sb-sidebar .sb-nav .sb-subnav-item:hover { background:rgba(255,255,255,.06); color:#fff; }
#saverbro-r0 .sb-sidebar .sb-nav .sb-nav-group > button[aria-pressed="true"],
#saverbro-r0 .sb-sidebar .sb-nav .sb-subnav-item[aria-pressed="true"] { background:rgba(255,255,255,.16); color:#fff; }
#saverbro-r0 .sb-sidebar .sb-nav .sb-subnav-item[aria-pressed="true"] { color:#FFFFFF; font-weight:500; }
#saverbro-r0 .sb-sidebar .sb-nav .sb-nav-group > button[aria-pressed="true"]::before,
#saverbro-r0 .sb-sidebar .sb-nav .sb-subnav-item[aria-pressed="true"]::before { content:""; position:absolute; left:0; top:0; bottom:0; width:3px; background:#009EE7; }
#saverbro-r0 .sb-sidebar .sb-nav-mark { flex:0 0 18px; width:18px; height:18px; }
#saverbro-r0 .sb-sidebar .sb-nav-mark svg { width:18px; height:18px; }
#saverbro-r0 .sb-sidebar .sb-nav-text { flex:1 1 auto; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; line-height:20px; }
#saverbro-r0 .sb-sidebar .sb-subnav-item .sb-nav-text { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; line-height:18px; }
#saverbro-r0 .sb-nav-chevron { margin-left:auto; }
/* Child list: thin guide line under the parent icon, behind the rows, clear of the 3px indicator at the row edge. */
#saverbro-r0 .sb-sidebar .sb-subnav { position:relative; display:flex; flex-direction:column; gap:2px; margin:0 !important; padding:0 !important; border:0 !important; }
#saverbro-r0 .sb-sidebar .sb-subnav > div { display:flex; flex-direction:column; gap:2px; }
#saverbro-r0 .sb-sidebar .sb-subnav::before { content:""; position:absolute; left:28px; top:2px; bottom:2px; width:1px; background:rgba(255,255,255,.14); pointer-events:none; }
#saverbro-r0 .sb-sidebar .sb-subnav .sb-subnav::before { display:none; }
/* Child rows (Cedric, 17 Oct 14:02): the row itself starts at the 36px indent, so its active fill and 3px indicator
   sit inside the indented row and are clipped by its radius. A parent whose child is active shows a lighter
   'open' state with no second indicator. */
#saverbro-r0 .sb-sidebar .sb-nav .sb-subnav-item {
  margin:0 8px 0 calc(36px + (var(--depth, 1) - 1) * 12px) !important;
  width:calc(100% - 44px - (var(--depth, 1) - 1) * 12px) !important;
  padding-left:12px !important; }
#saverbro-r0 .sb-sidebar .sb-nav .sb-subnav-item[aria-pressed="true"] { background:rgba(0,158,231,.18); color:#FFFFFF; }
#saverbro-r0 .sb-sidebar .sb-subnav::before { left:27px; }
#saverbro-r0 .sb-sidebar .sb-nav .sb-nav-group > button[aria-pressed="true"][aria-expanded="true"] { background:rgba(255,255,255,.06); }
#saverbro-r0 .sb-sidebar .sb-nav .sb-nav-group > button[aria-pressed="true"][aria-expanded="true"]::before { content:none; }
/* ui-standard.css loads later and resets child rows to transparent; these must win. */
#saverbro-r0 .sb-sidebar .sb-nav .sb-subnav-item:hover { background:rgba(255,255,255,.06) !important; }
#saverbro-r0 .sb-sidebar .sb-nav .sb-subnav-item[aria-pressed="true"] { background:rgba(255,255,255,.16) !important; color:#FFFFFF !important; }
/* Active row outline (Cedric, 17 Oct 14:07): a full 1px #009EE7 outline around the whole active row (inset
   box-shadow, so nothing shifts), 6px radius, keeping the fill. No separate left bar. Same for active child rows
   (from their indent). The parent of an active child gets only the lighter open state, no outline. */
#saverbro-r0 .sb-sidebar .sb-nav .sb-nav-group > button[aria-pressed="true"]::before,
#saverbro-r0 .sb-sidebar .sb-nav .sb-subnav-item[aria-pressed="true"]::before { content:none !important; }
#saverbro-r0 .sb-sidebar .sb-nav .sb-nav-group > button[aria-pressed="true"],
#saverbro-r0 .sb-sidebar .sb-nav .sb-subnav-item[aria-pressed="true"] { box-shadow:inset 0 0 0 1px rgba(255,255,255,.5) !important; }
#saverbro-r0 .sb-sidebar .sb-nav .sb-nav-group > button[aria-pressed="true"][aria-expanded="true"] { box-shadow:none !important; background:rgba(255,255,255,.06) !important; }

/* Quote of the Day (Cedric, 17 Oct 2026): flat card, real quote with attribution, no chips, no gradient.
   Light: white card with a border, quote #333333 (12.6:1), author and label #5F6670 (5.8:1).
   Dark: #2A2D31 card, quote #FFFFFF (13.8:1), author and label #B8BEC6 (7.4:1). */
#saverbro-r0 .rd .rd-hero.rd-quote { background:#FFFFFF !important; border:1px solid #E3E6EA; border-radius:12px; color:#333333; box-shadow:none;
  display:flex; flex-direction:column; align-items:flex-start; gap:8px; padding:24px 32px; margin:0 0 24px; min-height:0; max-height:none; height:auto; }
#saverbro-r0 .rd .rd-quote .rd-hero-eyebrow { color:#5F6670; font-size:12px; letter-spacing:.1em; margin:0; }
#saverbro-r0 .rd .rd-quote .rd-hero-quote { margin:0; font-family:Montserrat,system-ui,sans-serif; font-size:22px; line-height:1.35; font-weight:600; color:#333333; max-width:960px; }
#saverbro-r0 .rd .rd-quote .rd-quote-by { margin:0; font-size:14px; line-height:20px; color:#5F6670; }
html[data-theme="dark"] #saverbro-r0 .rd .rd-hero.rd-quote { background:#2A2D31 !important; border-color:#3A3E44; color:#FFFFFF; }
html[data-theme="dark"] #saverbro-r0 .rd .rd-quote .rd-hero-eyebrow { color:#B8BEC6; }
html[data-theme="dark"] #saverbro-r0 .rd .rd-quote .rd-hero-quote { color:#FFFFFF; }
html[data-theme="dark"] #saverbro-r0 .rd .rd-quote .rd-quote-by { color:#B8BEC6; }