/* ExpenseIT components on top of the design system (styles.css). Theme layer: corporate navy & charcoal, light + dark.
   The only literal colours here re-point design tokens per theme; components use tokens only. */
:root{
  --navy-950:#0B1526; --navy-900:#0E1A2E; --navy-850:#111F36; --navy-800:#15243D; --navy-750:#1A2B47; --navy-700:#1C2E4C;
  --navy-650:#22385A; --navy-600:#2E4770; --navy-500:#5C7699; --navy-brand:var(--brand-primary,#1E3A66);
  --surface-page:#FFFFFF; --surface-page-alt:#F4F7FB; --surface-card:#FFFFFF; --surface-sunken:#EAF0F7; --surface-soft:#DCE6F2;
  --surface-hover:#F1F5FA; --surface-selected:#E4ECF6;
  --surface-brand:var(--navy-brand); --surface-brand-hover:#14284B; --surface-inverse:#14284B; --surface-inverse-alt:#1A2B47;
  --text-heading:#0F1F3A; --text-body:#24344F; --text-muted:#46606A; --text-link:#1E4E8C; --text-link-hover:#0F1F3A;
  --text-on-brand:#FFFFFF; --text-on-inverse:#FFFFFF; --text-on-inverse-muted:#C9D6E6;
  --border-subtle:#DCE3EC; --border-default:#C3CFDD; --border-strong:#6B7F99;
  --success-fg:var(--glow-800); --chip-bg:#FFFFFF;
  --hero-overlay:linear-gradient(100deg,rgba(11,21,38,.94) 0%,rgba(14,26,46,.86) 45%,rgba(20,40,75,.62) 100%);
  color-scheme:light;
}
[data-theme="dark"]{
  --surface-page:var(--navy-900); --surface-page-alt:var(--navy-850); --surface-card:var(--navy-800); --surface-sunken:var(--navy-950);
  --surface-soft:var(--navy-700); --surface-hover:var(--navy-750); --surface-selected:var(--navy-700);
  --surface-brand:#2D64B5; --surface-brand-hover:#3A74C8; --surface-inverse:var(--navy-950); --surface-inverse-alt:var(--navy-850);
  --text-heading:#F1F5FA; --text-body:#D5DEEA; --text-muted:#A9B8CC; --text-link:#9CC4F5; --text-link-hover:#FFFFFF;
  --border-subtle:var(--navy-650); --border-default:var(--navy-600); --border-strong:var(--navy-500);
  --success-bg:#0D2E22; --success-fg:#7FF2B3; --success-border:#1F5C41;
  --warning-bg:#33250A; --warning-fg:#F3D08C; --warning-border:#6A4E14;
  --danger-bg:#3A1612; --danger-fg:#F7B4AC; --danger-border:#7A2E26;
  --info-bg:#132845; --info-fg:#B7D3F5; --info-border:var(--navy-600);
  --chip-bg:#F1F5FA; --chart-grid:var(--navy-650); --chart-1:#5B8FD9; --chart-3:#8FA7C7;
  color-scheme:dark;
}
html{scroll-behavior:smooth}
[hidden]{display:none !important}
::placeholder{color:var(--text-muted);opacity:1}
body{background:var(--surface-page);color:var(--text-body);min-height:100vh;overflow-x:hidden}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0}
.skip{position:absolute;left:var(--space-8);top:-60px;background:var(--surface-brand);color:var(--text-on-brand);padding:var(--space-8) var(--space-16);z-index:var(--z-tooltip)}
.skip:focus{top:var(--space-8)}
.container{width:100%;max-width:var(--container-xl);margin:0 auto;padding:0 var(--space-20)}
.icon{width:20px;height:20px;flex:none;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.money,.num{white-space:nowrap;font-variant-numeric:var(--numeric-tabular)}
.muted{color:var(--text-muted)}
.eyebrow{font:var(--type-eyebrow);letter-spacing:var(--tracking-widest);text-transform:uppercase;color:var(--text-muted)}
.stack{display:grid;gap:var(--stack)}
.stack-tight{display:grid;gap:var(--stack-tight)}
.row{display:flex;gap:var(--inline-gap);align-items:center;flex-wrap:wrap}
.spread{display:flex;gap:var(--inline-gap);align-items:center;justify-content:space-between;flex-wrap:wrap}

/* Buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-8);min-height:var(--tap-target-min);padding:0 var(--control-pad-x-lg);border-radius:var(--radius-control);border:var(--border-width-hairline) solid transparent;font:var(--type-button);cursor:pointer;text-decoration:none;transition:var(--transition-control);background:var(--surface-brand);color:var(--text-on-brand)}
.btn:hover{background:var(--surface-brand-hover);color:var(--text-on-brand)}
.btn:focus-visible{outline:2px solid var(--border-focus);outline-offset:2px}
.btn[disabled],.btn[aria-busy="true"]{opacity:.65;cursor:not-allowed}
.btn-secondary{background:var(--surface-card);color:var(--text-heading);border-color:var(--border-default)}
.btn-secondary:hover{background:var(--surface-hover);color:var(--text-heading)}
.btn-ghost{background:transparent;color:var(--text-link);border-color:transparent}
.btn-ghost:hover{background:var(--surface-hover);color:var(--text-link-hover)}
.btn-danger{background:var(--danger-bg);color:var(--danger-fg);border-color:var(--danger-border)}
.btn-danger:hover{background:var(--danger-bg);color:var(--danger-fg);border-color:var(--danger-fg)}
.btn-highlight{background:var(--surface-highlight);color:var(--text-on-highlight)}
.btn-highlight:hover{background:var(--surface-highlight-hover);color:var(--text-on-highlight)}
.btn-sm{min-height:var(--tap-target-min);padding:0 var(--control-pad-x-md)}
.btn-block{width:100%}
.icon-btn{display:inline-flex;align-items:center;justify-content:center;width:var(--tap-target-min);height:var(--tap-target-min);border-radius:var(--radius-control);background:transparent;border:var(--border-width-hairline) solid var(--border-default);color:inherit;cursor:pointer}
.icon-btn:hover{background:var(--surface-hover)}

/* Cards, badges */
.card{background:var(--surface-card);border:var(--border-card);border-radius:var(--radius-card);padding:var(--gutter-card);box-shadow:var(--shadow-xs)}
.card-compact{padding:var(--gutter-card-compact)}
.card h2,.card h3{margin-bottom:var(--space-12)}
.grid{display:grid;gap:var(--grid-gap)}
.grid-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.grid-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.grid-4{grid-template-columns:repeat(4,minmax(0,1fr))}
.badge{display:inline-flex;align-items:center;gap:var(--space-4);padding:var(--space-2) var(--space-8);border-radius:var(--radius-badge);font:var(--type-caption);font-weight:var(--weight-semibold);border:var(--border-width-hairline) solid var(--info-border);background:var(--info-bg);color:var(--info-fg);white-space:nowrap}
.badge-ok{background:var(--success-bg);color:var(--success-fg);border-color:var(--success-border)}
.badge-warn{background:var(--warning-bg);color:var(--warning-fg);border-color:var(--warning-border)}
.badge-bad{background:var(--danger-bg);color:var(--danger-fg);border-color:var(--danger-border)}
.notice{border-radius:var(--radius-card);padding:var(--space-12) var(--space-16);border:var(--border-width-hairline) solid var(--info-border);background:var(--info-bg);color:var(--info-fg)}
.notice-warn{background:var(--warning-bg);color:var(--warning-fg);border-color:var(--warning-border)}
.notice-ok{background:var(--success-bg);color:var(--success-fg);border-color:var(--success-border)}
.notice-bad{background:var(--danger-bg);color:var(--danger-fg);border-color:var(--danger-border)}
.notice a{color:inherit}

/* Forms */
.field{display:grid;gap:var(--space-6)}
.field label,.label{font:var(--type-label);color:var(--text-heading)}
.field .hint{font:var(--type-caption);color:var(--text-muted)}
.input,.select,.textarea{width:100%;min-height:var(--tap-target-min);padding:var(--space-8) var(--space-12);border:var(--border-control);border-radius:var(--radius-input);background:var(--surface-card);color:var(--text-body);transition:var(--transition-control)}
.textarea{min-height:96px;resize:vertical}
.input:focus,.select:focus,.textarea:focus{border-color:var(--border-brand);box-shadow:var(--ring-focus);outline:none}
.field.invalid .input,.field.invalid .select,.field.invalid .textarea{border-color:var(--danger-fg)}
.field .err{font:var(--type-caption);color:var(--danger-fg);min-height:0}
.err-summary{border:var(--border-width-hairline) solid var(--danger-border);background:var(--danger-bg);color:var(--danger-fg);padding:var(--space-12) var(--space-16);border-radius:var(--radius-card)}
.err-summary a{color:inherit}
.segmented{display:inline-flex;border:var(--border-control);border-radius:var(--radius-control);overflow:hidden}
.segmented label{display:inline-flex;align-items:center;min-height:var(--tap-target-min);padding:0 var(--space-16);cursor:pointer;font:var(--type-label);color:var(--text-body);background:var(--surface-card)}
.segmented input{position:absolute;opacity:0;pointer-events:none}
.segmented input:checked+span{color:var(--text-on-brand)}
.segmented label:has(input:checked){background:var(--surface-brand);color:var(--text-on-brand)}
.segmented label:has(input:focus-visible){outline:2px solid var(--border-focus);outline-offset:-2px}
.check{display:flex;gap:var(--space-8);align-items:center;min-height:var(--tap-target-min)}
.check input{width:20px;height:20px}

/* Tables */
.table-wrap{overflow-x:auto;border:var(--border-card);border-radius:var(--radius-card);background:var(--surface-card)}
.table-wrap table{min-width:560px}
.table-wrap th{position:sticky;top:0;background:var(--surface-page-alt);z-index:1;white-space:nowrap}
.table-wrap th button{background:none;border:0;padding:0;font:inherit;color:inherit;cursor:pointer;display:inline-flex;gap:var(--space-4);align-items:center;min-height:32px}
.table-wrap td.r,.table-wrap th.r{text-align:right}
.table-wrap tr:hover td{background:var(--surface-hover)}
.table-tools{display:flex;gap:var(--space-12);align-items:end;flex-wrap:wrap;margin-bottom:var(--space-12)}
.pager{display:flex;gap:var(--space-8);align-items:center;justify-content:flex-end;padding:var(--space-12)}

/* States */
.skeleton{display:block;height:16px;border-radius:var(--radius-sm);background:linear-gradient(90deg,var(--surface-sunken),var(--surface-soft),var(--surface-sunken));background-size:200% 100%;animation:sk 1.2s linear infinite}
@keyframes sk{to{background-position:-200% 0}}
.empty{text-align:center;padding:var(--space-40) var(--space-16);display:grid;gap:var(--space-12);justify-items:center}
.empty p{color:var(--text-muted);max-width:var(--measure-narrow)}

/* Toast + dialog */
.toasts{position:fixed;right:var(--space-16);bottom:calc(var(--space-16) + env(safe-area-inset-bottom));z-index:var(--z-toast);display:grid;gap:var(--space-8);max-width:min(420px,calc(100vw - 32px))}
.toast{background:var(--surface-inverse);color:var(--text-on-inverse);padding:var(--space-12) var(--space-16);border-radius:var(--radius-card);box-shadow:var(--shadow-lg);display:flex;gap:var(--space-12);align-items:flex-start;animation:tmp-rise-in var(--duration-base) var(--ease-out)}
.toast.bad{border-left:var(--border-width-accent) solid var(--danger-solid)}
.toast.ok{border-left:var(--border-width-accent) solid var(--success-solid)}
dialog.dlg{border:var(--border-card);border-radius:var(--radius-dialog);background:var(--surface-card);color:var(--text-body);padding:var(--space-24);max-width:min(480px,calc(100vw - 32px));box-shadow:var(--shadow-xl)}
dialog.dlg::backdrop{background:var(--overlay-scrim)}

/* Public site */
.site-header{position:sticky;top:0;z-index:var(--z-header);background:var(--surface-inverse);color:var(--text-on-inverse);border-bottom:var(--border-width-hairline) solid var(--border-inverse)}
.site-header .bar{display:flex;align-items:center;gap:var(--space-12);min-height:64px}
.brand{display:inline-flex;align-items:center;gap:var(--space-8);text-decoration:none;color:var(--text-on-inverse)}
.brand .chip{display:inline-flex;align-items:center;background:var(--chip-bg);padding:var(--space-4) var(--space-8);border-radius:var(--radius-md)}
.brand img{height:28px;width:auto;display:block}
.site-nav{display:flex;gap:var(--space-4);margin-left:auto;align-items:center}
.site-nav a,.site-nav button.link{color:var(--text-on-inverse);text-decoration:none;padding:0 var(--space-12);min-height:var(--tap-target-min);display:inline-flex;align-items:center;border-radius:var(--radius-control);font:var(--type-label);background:none;border:0;cursor:pointer}
.site-nav a:hover,.site-nav button.link:hover,.site-nav a[aria-current="page"]{background:var(--surface-inverse-alt);color:var(--text-on-inverse)}
.site-header .icon-btn{color:var(--text-on-inverse);border-color:var(--border-inverse)}
.site-header .icon-btn:hover{background:var(--surface-inverse-alt)}
.hero{position:relative;background-color:var(--navy-950);background-image:var(--hero-overlay),url('/assets/stock-1.webp');background-size:cover;background-position:center;color:var(--text-on-inverse);padding:var(--space-96) 0 var(--space-80)}
.hero h1{color:var(--text-on-inverse);font-size:clamp(2.4rem,6vw,3.75rem);line-height:var(--leading-tight);letter-spacing:var(--tracking-tightest);max-width:16ch}
.hero p.lead{font:var(--type-body-lg);color:var(--text-on-inverse-muted);max-width:52ch;margin-top:var(--space-16)}
.hero .row{margin-top:var(--space-32)}
.hero .eyebrow{color:var(--text-on-inverse-muted)}
.hero .btn-secondary{background:transparent;color:var(--text-on-inverse);border-color:var(--text-on-inverse-muted)}
.hero .btn-secondary:hover{background:var(--surface-inverse-alt);color:var(--text-on-inverse)}
.trust-row{display:flex;flex-wrap:wrap;gap:var(--space-16);margin-top:var(--space-32);color:var(--text-on-inverse-muted);font:var(--type-body-sm)}
.trust-row span{display:inline-flex;gap:var(--space-8);align-items:center}
.section{padding:var(--section-y-compact) 0}
.section.alt{background:var(--surface-page-alt)}
.section h2{margin-bottom:var(--space-12)}
.section .intro{color:var(--text-muted);max-width:60ch;margin-bottom:var(--space-32)}
.step{display:grid;gap:var(--space-8);align-content:start}
.step .num-badge{width:40px;height:40px;border-radius:var(--radius-md);display:grid;place-items:center;background:var(--surface-brand);color:var(--text-on-brand);font-weight:var(--weight-bold)}
.split{display:grid;grid-template-columns:1.1fr 1fr;gap:var(--space-48);align-items:center}
.split img{width:100%;border-radius:var(--radius-media);aspect-ratio:4/3;object-fit:cover}
.cat-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:var(--space-12)}
.cat-list .card{display:grid;gap:var(--space-4)}
.site-footer{background:var(--surface-inverse);color:var(--text-on-inverse-muted);padding:var(--space-48) 0 var(--space-32);font:var(--type-body-sm)}
.site-footer a{color:var(--text-on-inverse)}
.site-footer h3{color:var(--text-on-inverse);font:var(--type-h4);margin-bottom:var(--space-8)}
.site-footer .cols{display:grid;grid-template-columns:2fr 1fr 1fr;gap:var(--space-32)}

/* App shell (customer) */
.app-main{padding:var(--space-24) 0 calc(var(--space-96) + env(safe-area-inset-bottom))}
.page-head{display:flex;justify-content:space-between;align-items:flex-end;gap:var(--space-16);flex-wrap:wrap;margin-bottom:var(--space-24)}
.page-head h1{font:var(--type-h2);font-size:clamp(1.6rem,4vw,2rem)}
.page-head p{color:var(--text-muted)}
.tabbar{display:none}
.kpi{display:grid;gap:var(--space-4)}
.kpi .v{font:var(--weight-bold) var(--text-3xl)/1.1 var(--font-core);color:var(--text-heading);white-space:nowrap;font-variant-numeric:var(--numeric-tabular)}
.kpi .l{font:var(--type-label);color:var(--text-muted)}
.bar-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:var(--space-4) var(--space-12);align-items:center}
.bar-track{grid-column:1/-1;height:8px;background:var(--surface-sunken);border-radius:var(--radius-pill);overflow:hidden}
.bar-fill{height:100%;background:var(--chart-1);border-radius:var(--radius-pill)}
.list{display:grid;gap:var(--space-8);margin:0;padding:0;list-style:none}
.list-item{display:grid;grid-template-columns:56px minmax(0,1fr) auto;gap:var(--space-12);align-items:center;padding:var(--space-12);border:var(--border-card);border-radius:var(--radius-card);background:var(--surface-card);text-decoration:none;color:inherit;min-height:var(--tap-target-min)}
.list-item:hover{background:var(--surface-hover);color:inherit}
.thumb{width:56px;height:56px;border-radius:var(--radius-md);object-fit:cover;background:var(--surface-sunken);border:var(--border-hairline)}
.list-item .t{font:var(--type-h4);color:var(--text-heading);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.list-item .s{font:var(--type-body-sm);color:var(--text-muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.capture-zone{display:grid;gap:var(--space-16);justify-items:center;text-align:center;padding:var(--space-40) var(--space-16);border:var(--border-width-thick) dashed var(--border-default);border-radius:var(--radius-panel);background:var(--surface-page-alt)}
.capture-zone .big{width:56px;height:56px}
.slip{width:100%;max-height:520px;object-fit:contain;border-radius:var(--radius-card);background:var(--surface-sunken);border:var(--border-card)}
.form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-16)}
.form-grid .full{grid-column:1/-1}
.two-col{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);gap:var(--space-24);align-items:start}
.chart svg{width:100%;height:auto;display:block}
.chart text{fill:var(--text-muted);font:var(--type-caption)}

/* Admin console */
.admin-shell{display:grid;grid-template-columns:var(--app-sidebar-w) minmax(0,1fr);min-height:100vh}
.admin-side{background:var(--surface-inverse);color:var(--text-on-inverse);padding:var(--space-16);display:flex;flex-direction:column;gap:var(--space-16);position:sticky;top:0;height:100vh}
.admin-side nav{display:grid;gap:var(--space-4)}
.admin-side nav a{display:flex;gap:var(--space-12);align-items:center;min-height:var(--tap-target-min);padding:0 var(--space-12);border-radius:var(--radius-control);color:var(--text-on-inverse);text-decoration:none;font:var(--type-label)}
.admin-side nav a:hover,.admin-side nav a[aria-current="page"]{background:var(--surface-inverse-alt);color:var(--text-on-inverse)}
.admin-side .tag{color:var(--text-on-inverse-muted);font:var(--type-caption)}
.admin-top{display:flex;align-items:center;gap:var(--space-12);min-height:var(--app-topbar-h);padding:0 var(--space-24);border-bottom:var(--border-hairline);background:var(--surface-card);position:sticky;top:0;z-index:var(--z-sticky)}
.admin-top .who{margin-left:auto;color:var(--text-muted);font:var(--type-body-sm);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:40vw}
.admin-body{padding:var(--space-24);background:var(--surface-page-alt);min-height:calc(100vh - var(--app-topbar-h))}
.admin-menu-btn{display:none}

@media (max-width:960px){
  .grid-4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .grid-3{grid-template-columns:repeat(2,minmax(0,1fr))}
  .split,.two-col{grid-template-columns:1fr}
  .site-footer .cols{grid-template-columns:1fr 1fr}
  .admin-shell{grid-template-columns:1fr}
  .admin-side{position:fixed;inset:0 auto 0 0;width:min(280px,85vw);transform:translateX(-100%);transition:transform var(--duration-panel) var(--ease-standard);z-index:var(--z-dialog)}
  .admin-side.open{transform:none}
  .admin-menu-btn{display:inline-flex}
}
@media (max-width:640px){
  .container{padding:0 var(--space-16)}
  .grid-2,.grid-3,.form-grid{grid-template-columns:1fr}
  .grid-4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .site-footer .cols{grid-template-columns:1fr}
  .site-nav .wide{display:none}
  .hero{padding:var(--space-64) 0 var(--space-48)}
  .card{padding:var(--gutter-card-compact)}
  .kpi .v{font-size:var(--text-2xl)}
  .admin-body{padding:var(--space-16)}
  .admin-top{padding:0 var(--space-12)}
  .admin-top .who,.admin-top .wide{display:none}
  .app-nav-links{display:none}
  .tabbar{display:grid;grid-template-columns:repeat(5,1fr);position:fixed;left:0;right:0;bottom:0;z-index:var(--z-header);background:var(--surface-card);border-top:var(--border-hairline);padding-bottom:env(safe-area-inset-bottom)}
  .tabbar a{display:grid;justify-items:center;gap:var(--space-2);padding:var(--space-8) 0;min-height:56px;color:var(--text-muted);text-decoration:none;font:var(--type-caption)}
  .tabbar a[aria-current="page"]{color:var(--text-link)}
  .tabbar a.cta{color:var(--text-heading);font-weight:var(--weight-semibold)}
}