/* ── Core Components ── */
/* LAYOUT */
.page{display:none;padding:24px;max-width:1500px;margin:0 auto;}
.page.on{display:block;}
.hero{background:linear-gradient(135deg,#141b3d,#2543c9 55%,#3a61f7);border-radius:var(--r-lg);padding:28px 32px;margin-bottom:22px;color:#fff;position:relative;overflow:hidden;box-shadow:var(--sh-md);}
.hero::after{content:'';position:absolute;top:-60px;right:-60px;width:240px;height:240px;border-radius:50%;background:rgba(255,255,255,.08);pointer-events:none;}
.hero::before{content:'';position:absolute;left:0;right:0;bottom:0;height:1px;background:linear-gradient(90deg,transparent,rgba(255,255,255,.18),transparent);}
.hlabel{font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;opacity:.7;margin-bottom:6px;}
.htitle{font-size:22px;font-weight:800;letter-spacing:-.025em;margin-bottom:4px;}
.hsub{font-size:12.5px;opacity:.75;}
.hamount{font-size:29px;font-weight:700;font-family:var(--mono);font-variant-numeric:tabular-nums;}

/* KPI */
.krow{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:12px;margin-bottom:22px;}
.kpi{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-md);padding:17px 19px;box-shadow:var(--sh);transition:transform .15s,box-shadow .15s,border-color .15s;}
.kpi:hover{transform:translateY(-2px);box-shadow:var(--sh-md);border-color:var(--border-strong);}
.klabel{font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin-bottom:8px;}
.kvalue{font-family:var(--mono);font-size:20px;font-weight:600;line-height:1;margin-bottom:5px;font-variant-numeric:tabular-nums;}
.kdelta{font-size:11px;font-weight:600;}
.kdelta.up{color:var(--green);}
.kdelta.dn{color:var(--red);}
.kpbar{background:var(--border);border-radius:99px;height:6px;margin-top:9px;overflow:hidden;}
.kpfill{height:100%;border-radius:99px;transition:width .4s;}
.kpfill.g{background:var(--green);}
.kpfill.a{background:var(--amber);}
.kpfill.r{background:var(--red);}

/* ── Manager Dashboard credit cards (Staff Credit / Jazz Cash /
   Patty-Expenses / Misc Sections) — visual redesign pass, Aug 2026.
   Each card gets a full colored border + a light tinted background (not
   just a left accent) so the four ledger types are distinguishable at a
   glance; content/markup is unchanged, only presentation. Tint is set
   once per card via --card-accent/--card-bg custom properties (see
   js/dashboard.js's sectionCard()/pattyCardHtml) — everything inside
   (icon badge, total chip) just reads var(--card-accent) so there's a
   single source of truth per card instead of repeating the color in
   three places. ── */
.mgr-card{background:var(--card-bg, var(--surface));border:1.5px solid var(--card-accent, var(--border));border-radius:var(--r-md);padding:14px 16px;box-shadow:var(--sh);transition:transform .15s ease,box-shadow .15s ease,border-color .15s ease;}
.mgr-card:hover{transform:translateY(-2px);box-shadow:var(--sh-md);}
.mgr-card-icon{display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;border-radius:7px;font-size:12px;margin-right:7px;vertical-align:-6px;background:var(--surface);border:1.5px solid var(--card-accent, var(--border));}
.mgr-card-total{font-size:15px;font-weight:800;font-family:var(--mono);padding:2px 9px;border-radius:8px;font-variant-numeric:tabular-nums;background:var(--surface);border:1.5px solid var(--card-accent, var(--border));}
.mgr-card-open{font-size:9px;font-weight:700;padding:2px 7px;border-radius:20px;margin-left:6px;cursor:pointer;letter-spacing:.02em;background:#dcfce7;color:#15803d;}
.mgr-card-row{display:flex;justify-content:space-between;align-items:center;padding:6px 4px;border-radius:6px;border-bottom:1px solid var(--border);transition:background .12s;}
.mgr-card-row:hover{background:rgba(0,0,0,.04);}
.mgr-card-row:last-child{border-bottom:none;}

/* GRID */
.g2{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:16px;}
@media(max-width:700px){.g2{grid-template-columns:1fr;}}

/* CARD */
.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-md);padding:19px 21px;box-shadow:var(--sh);}
.card + .card{margin-top:16px;}
.ctitle{font-size:11px;font-weight:700;color:var(--muted);letter-spacing:.08em;text-transform:uppercase;margin-bottom:15px;display:flex;align-items:center;gap:7px;}
.cdot{width:7px;height:7px;border-radius:50%;flex-shrink:0;}

/* TABLE */
.twrap{overflow-x:auto;}
table{width:100%;border-collapse:collapse;font-size:12px;}
th{background:var(--s2);color:var(--muted);font-weight:600;letter-spacing:.06em;font-size:10px;text-transform:uppercase;padding:9px 10px;text-align:right;border-bottom:2px solid var(--border);white-space:nowrap;position:sticky;top:0;z-index:2;}
th:first-child{text-align:left;}
td{padding:8px 10px;border-bottom:1px solid var(--border);text-align:right;font-family:var(--mono);font-size:11px;color:var(--t2);}
td:first-child{text-align:left;font-family:var(--sans);color:var(--text);font-weight:500;}
tr:last-child td{border-bottom:none;}
tr.cl{cursor:pointer;}
tr.cl:hover td{background:var(--alt)!important;color:var(--accent);}
tr.cl:hover td:first-child::before{content:'→ ';}
tfoot td{font-weight:700;color:var(--text);background:var(--s2);border-top:2px solid var(--border);}
.tscroll{max-height:440px;overflow-y:auto;}

/* FILTERS */
.frow{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:12px;align-items:center;}
.frow input,.frow select{background:var(--surface);border:1px solid var(--border);color:var(--text);border-radius:7px;padding:7px 11px;font-size:13px;font-family:var(--sans);outline:none;transition:border-color .15s;}
.frow input:focus,.frow select:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(37,99,235,.1);}
.frow input{flex:1;min-width:160px;}

/* FORM */
.fsec{margin-bottom:20px;}
.fsec-title{font-size:10px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--accent);border-bottom:2px solid var(--alt);padding-bottom:7px;margin-bottom:12px;}
.fgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(185px,1fr));gap:10px;}
.fg{display:flex;flex-direction:column;gap:4px;}
.fg label{font-size:10px;font-weight:600;color:var(--muted);text-transform:uppercase;letter-spacing:.06em;}
.fg input,.fg select{background:var(--s2);border:1px solid var(--border);color:var(--text);border-radius:7px;padding:8px 10px;font-size:13px;font-family:var(--sans);outline:none;transition:border-color .15s;}
.fg input:focus,.fg select:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(37,99,235,.1);}
.fg input.calc{background:#f0fdf4;border-color:#bbf7d0;font-weight:700;font-family:var(--mono);color:var(--green);}

/* BUTTONS */
.btn{padding:9px 18px;border-radius:var(--r-sm);border:1px solid transparent;cursor:pointer;font-size:13px;font-weight:600;font-family:var(--sans);transition:background .15s,border-color .15s,box-shadow .15s,transform .08s,color .15s;display:inline-flex;align-items:center;gap:6px;line-height:1.2;letter-spacing:-.01em;white-space:nowrap;}
.btn:active{transform:translateY(1px);}
.btn:focus-visible{box-shadow:var(--focus-ring);}
.btn-p{background:var(--accent);color:#fff;box-shadow:0 2px 8px -2px rgba(58,97,247,.55);}
.btn-p:hover{background:var(--accent-dk);box-shadow:0 4px 14px -3px rgba(58,97,247,.6);}
.btn-s{background:var(--surface);color:var(--t2);border:1px solid var(--border);}
.btn-s:hover{border-color:var(--accent);color:var(--accent);background:var(--alt);}
.btn-g{background:var(--green);color:#fff;box-shadow:0 2px 8px -2px rgba(14,169,104,.5);}
.btn-g:hover{background:#0a8a56;box-shadow:0 4px 14px -3px rgba(14,169,104,.55);}
.btn-d{background:var(--rlt);color:var(--red);border:1px solid #fbd2ce;}
.btn-d:hover{background:var(--red);color:#fff;border-color:var(--red);}
.btn-sm{padding:5px 11px;font-size:11.5px;border-radius:var(--r-xs);}
.brow{display:flex;gap:8px;margin-top:16px;flex-wrap:wrap;}

/* Manager section button colors — design pass (Aug 2026): the Manager
   pages had drifted into 5 unrelated button hues (teal Auto-Fill,
   green Save, orange Copy->Next Month, blue Print, dark-blue Save All)
   with no shared logic. One rule now: sky blue (--mgrblue, Manager's
   own accent) for the actual primary/save action on a panel, neutral
   outline for everything else (Auto-Fill, Copy -> Next Month, Print). */
.mgr-btn-primary{background:var(--mgrblue);color:#fff;box-shadow:0 2px 8px -2px rgba(3,105,161,.45);}
.mgr-btn-primary:hover{background:#025a86;box-shadow:0 4px 14px -3px rgba(3,105,161,.5);}
/* Instant autosave confirmation — briefly relabels a section's own Save
   button to "✓ Saved" after mgrAutosave() (js/manager-shared.js) commits
   in the background, without a toast firing on every keystroke pause. */
.mgr-btn-primary.mgr-autosaved{background:var(--green);transition:background .2s;}
.mgr-btn-secondary{background:var(--surface);color:var(--t2);border:1px solid var(--border);}
.mgr-btn-secondary:hover{border-color:var(--mgrblue);color:var(--mgrblue);background:var(--mgrblue-lt);}

/* Small icon-only actions (ledger row edit/delete/save/cancel) */
.btn-icon{background:var(--s2);border:1px solid var(--border);color:var(--t2);width:28px;height:28px;border-radius:var(--r-xs);cursor:pointer;font-size:12.5px;display:inline-flex;align-items:center;justify-content:center;transition:all .15s;}
.btn-icon:hover{border-color:var(--accent);color:var(--accent);background:var(--alt);}
.ledger-del-btn:hover{border-color:var(--red);color:var(--red);background:var(--rlt);}
.ledger-save-btn:hover{border-color:var(--green);color:var(--green);background:var(--glt);}

/* Toast notifications */
#toast{position:fixed;left:50%;bottom:24px;transform:translate(-50%,70px);z-index:10001;background:#0f172a;color:#fff;padding:10px 18px;border-radius:10px;font-size:13px;font-weight:600;box-shadow:0 8px 24px rgba(0,0,0,.25);opacity:0;pointer-events:none;transition:transform .25s ease,opacity .25s ease;max-width:min(92vw,420px);text-align:center;}
#toast.on{transform:translate(-50%,0);opacity:1;}
#toast.w{background:#92400e;}
#toast.e{background:#991b1b;}
#toast.record{background:linear-gradient(135deg,#b45309,#d97706);box-shadow:0 8px 28px rgba(217,119,6,.45);}

/* INDEX */
.ylabel{font-size:11px;font-weight:700;color:var(--muted);letter-spacing:.08em;text-transform:uppercase;margin:22px 0 10px;padding-bottom:6px;border-bottom:2px solid var(--border);}
.igrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:10px;}

/* Collapsible year group (Index) */
.yr-group{margin-bottom:14px;}
.yr-hdr{display:flex;align-items:center;justify-content:space-between;background:var(--s2);border:1px solid var(--border);border-radius:9px;padding:10px 16px;cursor:pointer;user-select:none;transition:background .15s;}
.yr-hdr:hover{background:var(--alt);border-color:var(--accent);}
.yr-hdr-left{display:flex;align-items:center;gap:10px;}
.yr-hdr-label{font-size:13px;font-weight:700;color:var(--text);}
.yr-hdr-total{font-family:var(--mono);font-size:13px;font-weight:700;color:var(--accent);}
.yr-hdr-meta{font-size:10px;color:var(--muted);}
.yr-chevron{font-size:12px;color:var(--muted);transition:transform .25s;}
.yr-chevron.open{transform:rotate(90deg);}
.yr-body{overflow:hidden;max-height:0;transition:max-height .35s ease;}
.yr-body.open{max-height:4000px;}
.yr-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:10px;padding:12px 0 4px;}

/* Collapsible month group (Data) */
.mon-group{margin-bottom:10px;}
.mon-hdr{display:flex;align-items:center;justify-content:space-between;background:var(--s2);border:1px solid var(--border);border-radius:9px;padding:10px 16px;cursor:pointer;user-select:none;transition:background .15s;}
.mon-hdr:hover{background:var(--alt);border-color:var(--accent);}
.mon-hdr-left{display:flex;align-items:center;gap:10px;}
.mon-hdr-label{font-size:13px;font-weight:700;color:var(--text);}
.mon-hdr-total{font-family:var(--mono);font-size:13px;font-weight:700;color:var(--accent);}
.mon-hdr-meta{font-size:10px;color:var(--muted);}
.mon-chevron{font-size:12px;color:var(--muted);transition:transform .25s;}
.mon-chevron.open{transform:rotate(90deg);}
.mon-body{overflow:hidden;max-height:0;transition:max-height .4s ease;}
.mon-body.open{max-height:6000px;}
.mon-tbl-wrap{overflow-x:auto;margin:4px 0 4px;}
.icard{background:var(--surface);border:1px solid var(--border);border-radius:11px;padding:16px 18px;cursor:pointer;transition:all .15s;box-shadow:var(--sh);}
.icard:hover{border-color:var(--accent);box-shadow:var(--sh-md);transform:translateY(-2px);}
.icmon{font-size:13px;font-weight:600;}
.icyr{font-size:10px;color:var(--muted);margin-bottom:8px;}
.ictot{font-family:var(--mono);font-size:18px;font-weight:700;color:var(--accent);margin-bottom:8px;}
.icmeta{display:flex;justify-content:space-between;font-size:10px;color:var(--muted);}
.icbar{height:3px;background:var(--border);border-radius:2px;margin-top:10px;overflow:hidden;}
.icfill{height:100%;border-radius:2px;background:linear-gradient(90deg,var(--accent),var(--purple));}
.ictgt{font-size:10px;color:var(--muted);margin-top:6px;}
.ictbar{height:3px;background:var(--border);border-radius:2px;margin-top:3px;overflow:hidden;}
.ictfill{height:100%;border-radius:2px;}

/* TOOLS */
.tcard{background:var(--surface);border:1px solid var(--border);border-radius:11px;padding:20px 22px;margin-bottom:12px;box-shadow:var(--sh);}
/* ── COLLAPSIBLE TOOL CARDS ─────────────────────────────────── */
.tcard{cursor:default;}
.tcard-hdr{display:flex;align-items:center;justify-content:space-between;cursor:pointer;user-select:none;padding-bottom:0;margin-bottom:0;}
.tcard-hdr:hover .ttitle{color:var(--accent);}
.tcard-chevron{font-size:13px;color:var(--muted);transition:transform .25s;flex-shrink:0;margin-left:8px;}
.tcard-body{overflow:hidden;max-height:0;transition:max-height .3s cubic-bezier(0,1,.3,1),padding-top .2s;padding-top:0;}
.tcard.open .tcard-body{max-height:4000px;padding-top:12px;}
.tcard.open .tcard-chevron{transform:rotate(90deg);}
.tcard-hdr .ttitle{margin-bottom:0;}

.ttitle{font-size:14px;font-weight:600;margin-bottom:5px;display:flex;align-items:center;gap:8px;}
.tdesc{font-size:12px;color:var(--muted);margin-bottom:14px;line-height:1.65;}

/* GITHUB LOG */
.ghlog{font-family:var(--mono);font-size:11px;color:var(--muted);background:var(--s2);border:1px solid var(--border);border-radius:7px;padding:10px 12px;max-height:140px;overflow-y:auto;line-height:2;margin-top:10px;}

/* BADGE */
.badge{display:inline-flex;align-items:center;padding:2px 7px;border-radius:5px;font-size:10px;font-weight:600;font-family:var(--mono);}
.bg-blue{background:var(--alt);color:var(--accent);}
.bg-green{background:var(--glt);color:var(--green);}
.bg-amber{background:var(--alt2);color:var(--amber);}
.bg-red{background:var(--rlt);color:var(--red);}

/* APPEARANCE TOGGLE (Tools > tc-appearance) */
.theme-opts{display:flex;gap:8px;}
.theme-opt{flex:1;padding:10px 8px;border:1.5px solid var(--border);border-radius:var(--r-sm);background:var(--s2);color:var(--t2);font-family:var(--sans);font-size:12.5px;font-weight:600;cursor:pointer;transition:border-color .15s,color .15s,background .15s;}
.theme-opt:hover{border-color:var(--border-strong);color:var(--text);}
.theme-opt.active{border-color:var(--accent);color:var(--accent);background:var(--alt);}

/* ══════════════════════════════════════════════════════════════════
   SHARED REPORT TABLE SHELL — design pass, Aug 2026
   Was three byte-identical 47-line blocks duplicated across
   stockledger.css / excess-working.css / reorder-report.css (each
   just swapping in its own .xxx-app class prefix) — a future tweak to
   one silently wouldn't reach the other two. Consolidated here as one
   rule targeting all three at once; behavior is unchanged, this is a
   pure dedup. Each page still defines its own --ink/--paper/--panel/
   --teal-dark aliases (scoped to its own .xxx-app root, all pointing
   at the same variables.css tokens) — custom-property resolution
   follows the DOM, not the stylesheet file, so those still apply
   correctly to the selectors below even though the rule itself now
   lives here instead of in each page's own file.
   ══════════════════════════════════════════════════════════════════ */
.stockledger-app thead th, .excessworking-app thead th, .reorder-app thead th {
    position:sticky; top:0;
    background:var(--ink);
    color:#EFEFEA;
    text-align:left;
    padding:10px 12px;
    font-family:var(--mono);
    font-weight:500;
    font-size:11px;
    letter-spacing:.04em;
    text-transform:uppercase;
    cursor:pointer;
    white-space:nowrap;
    user-select:none;
  }
.stockledger-app thead th:hover, .excessworking-app thead th:hover, .reorder-app thead th:hover {background:var(--teal-dark);}
.stockledger-app thead th .arrow, .excessworking-app thead th .arrow, .reorder-app thead th .arrow {opacity:.5; font-size:10px; margin-left:3px;}
.stockledger-app tbody td, .excessworking-app tbody td, .reorder-app tbody td {
    padding:9px 12px;
    border-bottom:1px solid var(--paper);
    white-space:nowrap;
    color:var(--ink);
  }
.stockledger-app tbody tr:hover, .excessworking-app tbody tr:hover, .reorder-app tbody tr:hover {background:var(--paper);}
.stockledger-app td.num, .stockledger-app th.num, .excessworking-app td.num, .excessworking-app th.num, .reorder-app td.num, .reorder-app th.num {text-align:right; font-family:var(--mono);}
.stockledger-app td.name-cell, .excessworking-app td.name-cell, .reorder-app td.name-cell {white-space:normal; min-width:200px; max-width:280px;}
.stockledger-app td.sub, .excessworking-app td.sub, .reorder-app td.sub {color:var(--ink-soft); font-size:11.5px;}
.stockledger-app .val, .excessworking-app .val, .reorder-app .val {font-weight:600;}
.stockledger-app tfoot td, .excessworking-app tfoot td, .reorder-app tfoot td {
    position:sticky; bottom:0;
    background:var(--ink); color:#fff;
    font-family:var(--mono);
    padding:10px 12px;
    font-weight:600;
    border-top:2px solid var(--teal);
  }
.stockledger-app .noresults, .excessworking-app .noresults, .reorder-app .noresults {padding:40px; text-align:center; color:var(--ink-soft); font-size:13.5px;}
.stockledger-app footer, .excessworking-app footer, .reorder-app footer {
    padding:20px clamp(16px,4vw,48px) 40px;
    font-size:11.5px;
    color:var(--ink-soft);
    font-family:var(--mono);
  }
@media (max-width:640px){
  .stockledger-app thead th, .stockledger-app tbody td,
  .excessworking-app thead th, .excessworking-app tbody td,
  .reorder-app thead th, .reorder-app tbody td {padding:8px 8px; font-size:12px;}
}