/* ============================================================
   CLASSIC WOODWORKING & VANITY — ERP THEME
   Brand: espresso ink, signature gold, warm cream, paper
   Type:  Sora (display) + Manrope (UI/body)
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Sora:wght@400;500;600;700;800&family=Manrope:wght@400;500;600;700;800&display=swap');

:root{
  /* Core brand — Caribbean Cleaning Solutions (navy structure + red accent) */
  --espresso:   #16224A;  /* primary navy / sidebar / ink */
  --walnut:     #1C2B57;  /* navy panel           */
  --walnut-2:   #233068;  /* raised navy panel    */
  --gold:       #C8102E;  /* accent (CCS red)     */
  --champagne:  #FF6B7C;  /* bright highlight on dark */
  --bronze:     #A50C20;  /* deep red (links/labels) */
  --cream:      #EEF1F8;  /* text on dark         */
  --taupe:      #93A0C2;  /* secondary            */
  --paper:      #F3F5F9;  /* light base           */

  /* Derived neutrals (cool) */
  --ink:        #14203F;
  --ink-2:      #3F4C6B;
  --ink-3:      #6B7693;
  --card:       #FFFFFF;
  --card-edge:  #E2E6EF;
  --line:       #DBE0EA;
  --line-soft:  #EAEDF4;
  --field:      #FFFFFF;

  /* Signature sweep — navy (primary fills) */
  --gold-sweep: linear-gradient(100deg,#16224A 0%,#1B2A6B 32%,#2E3F86 52%,#1B2A6B 70%,#16224A 100%);
  --gold-sweep-v: linear-gradient(180deg,#2E3F86 0%,#1B2A6B 50%,#16224A 100%);

  /* Status palette — warm, muted, harmonised with brand */
  --st-green:  oklch(0.56 0.085 150);   /* Paid / complete   */
  --st-green-bg: oklch(0.94 0.03 150);
  --st-blue:   oklch(0.55 0.075 245);   /* Production        */
  --st-blue-bg: oklch(0.94 0.025 245);
  --st-purple: oklch(0.53 0.085 305);   /* Ready for delivery*/
  --st-purple-bg: oklch(0.94 0.028 305);
  --st-orange: oklch(0.64 0.11 62);     /* Invoice sent      */
  --st-orange-bg: oklch(0.94 0.04 70);
  --st-red:    oklch(0.56 0.14 27);     /* Overdue           */
  --st-red-bg: oklch(0.94 0.04 30);
  --st-grey:   oklch(0.56 0.006 80);    /* Cancelled         */
  --st-grey-bg: oklch(0.93 0.004 80);
  --st-gold:   #C8102E;                  /* pending / draft   */
  --st-gold-bg: #FBE6E9;

  --shadow-sm: 0 1px 2px rgba(6,39,47,.05), 0 1px 1px rgba(6,39,47,.04);
  --shadow-md: 0 4px 14px rgba(6,39,47,.07), 0 1px 3px rgba(6,39,47,.05);
  --shadow-lg: 0 18px 48px rgba(6,39,47,.16), 0 4px 12px rgba(6,39,47,.08);
  --shadow-drawer: -28px 0 60px rgba(6,39,47,.20);

  --sidebar-w: 256px;
  --radius: 12px;
  --radius-sm: 8px;
}

*{ box-sizing:border-box; }
html,body{ margin:0; height:100%; }
body{
  font-family:'Manrope',system-ui,sans-serif;
  background:var(--paper);
  color:var(--ink);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
#root{ height:100%; }

/* Typographic helpers ------------------------------------------------ */
.serif{ font-family:'Sora',Georgia,serif; }
.label{
  font-family:'Manrope',sans-serif;
  text-transform:uppercase;
  letter-spacing:.26em;
  font-weight:700;
  font-size:10.5px;
  color:var(--ink-3);
}
.label-gold{ color:var(--bronze); }
.gold-text{
  background:var(--gold-sweep);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}
.eyebrow{
  font-family:'Manrope',sans-serif;
  text-transform:uppercase;
  letter-spacing:.3em;
  font-weight:700;
  font-size:10px;
  color:var(--gold);
}

::selection{ background:var(--champagne); color:var(--espresso); }

/* Scrollbar */
*::-webkit-scrollbar{ width:11px; height:11px; }
*::-webkit-scrollbar-thumb{ background:var(--line); border-radius:20px; border:3px solid transparent; background-clip:padding-box; }
*::-webkit-scrollbar-thumb:hover{ background:var(--taupe); border:3px solid transparent; background-clip:padding-box; }

/* ============================================================
   APP SHELL
   ============================================================ */
.app{ display:flex; height:100%; overflow:hidden; }

/* ---- Sidebar ---- */
.sidebar{
  width:var(--sidebar-w); flex:0 0 var(--sidebar-w);
  background:
    radial-gradient(120% 60% at 50% -10%, rgba(200,16,46,.12), transparent 60%),
    var(--espresso);
  border-right:1px solid #000;
  display:flex; flex-direction:column;
  position:relative; z-index:30;
}
.sidebar::after{ content:''; position:absolute; top:0; right:0; bottom:0; width:1px; background:linear-gradient(180deg,transparent,rgba(200,16,46,.40),transparent); }
.sb-brand{ padding:20px 18px 18px; border-bottom:1px solid rgba(238,241,248,.08); text-align:center; }
.sb-brand img{ width:100%; display:block; }
.sb-logo{ background:#fff; border-radius:12px; padding:13px 15px; box-shadow:0 6px 18px rgba(0,0,0,.28); }
.sb-brand .sub{ margin-top:11px; font-size:9px; letter-spacing:.34em; text-transform:uppercase; color:var(--taupe); font-weight:700; }

.sb-nav{ flex:1; overflow-y:auto; padding:14px 12px 20px; }
.sb-group{ margin-top:18px; }
.sb-group:first-child{ margin-top:4px; }
.sb-group-label{ display:flex; align-items:center; gap:7px; padding:6px 12px 8px; font-size:9px; letter-spacing:.28em; text-transform:uppercase; color:rgba(138,175,182,.65); font-weight:800; cursor:pointer; user-select:none; border-radius:7px; transition:color .15s, background .15s; }
.sb-group-label:hover{ color:rgba(234,247,248,.9); background:rgba(234,247,248,.04); }
.sb-grp-chev{ margin-left:auto; color:rgba(138,175,182,.55); transition:transform .2s; flex:0 0 auto; }
.sb-group-label:hover .sb-grp-chev{ color:var(--champagne); }
.sb-grp-dot{ width:6px; height:6px; border-radius:50%; background:var(--st-red); flex:0 0 6px; }
.sb-item{
  display:flex; align-items:center; gap:12px;
  padding:9px 12px; border-radius:9px; cursor:pointer;
  color:var(--cream); font-size:13.5px; font-weight:500;
  position:relative; transition:background .15s, color .15s;
  margin-bottom:1px;
}
.sb-item .ic{ width:17px; height:17px; flex:0 0 17px; color:var(--taupe); transition:color .15s; }
.sb-item:hover{ background:rgba(234,247,248,.055); }
.sb-item:hover .ic{ color:var(--champagne); }
.sb-item.active{ background:linear-gradient(90deg,rgba(200,16,46,.20),rgba(200,16,46,.04)); color:#fff; }
.sb-item.active .ic{ color:var(--champagne); }
.sb-item.active::before{ content:''; position:absolute; left:-12px; top:7px; bottom:7px; width:3px; border-radius:0 3px 3px 0; background:var(--gold); }
.sb-count{ margin-left:auto; font-size:11px; font-weight:700; color:var(--espresso); background:var(--taupe); border-radius:20px; padding:1px 7px; min-width:20px; text-align:center; }
.sb-item.active .sb-count{ background:var(--champagne); }
.sb-count.alert{ background:var(--st-red); color:#fff; }

.sb-foot{ padding:12px; border-top:1px solid rgba(234,247,248,.07); }
.sb-user{ display:flex; align-items:center; gap:11px; padding:8px 10px; border-radius:9px; cursor:pointer; }
.sb-user:hover{ background:rgba(234,247,248,.05); }
.sb-ava{ width:34px; height:34px; border-radius:50%; background:var(--gold-sweep); color:#fff; display:grid; place-items:center; font-weight:800; font-size:13px; flex:0 0 34px; }
.sb-user .nm{ color:var(--cream); font-size:13px; font-weight:600; line-height:1.2; }
.sb-user .rl{ color:var(--taupe); font-size:11px; }

/* ---- Main column ---- */
.main{ flex:1; display:flex; flex-direction:column; min-width:0; overflow:hidden; }

.topbar{
  height:64px; flex:0 0 64px; background:rgba(252,250,245,.85); backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line); display:flex; align-items:center; gap:18px; padding:0 26px; z-index:20;
}
.tb-title{ display:flex; flex-direction:column; min-width:0; }
.tb-title h1{ font-family:'Sora',serif; font-weight:600; font-size:25px; line-height:1.05; margin:0; color:var(--espresso); white-space:nowrap; }
.tb-title .crumb{ font-size:11px; letter-spacing:.04em; color:var(--ink-3); margin-top:2px; }
.tb-search{ margin-left:auto; position:relative; width:300px; max-width:34vw; }
.tb-search input{
  width:100%; height:38px; border-radius:9px; border:1px solid var(--line);
  background:var(--field); padding:0 12px 0 36px; font-family:inherit; font-size:13px; color:var(--ink);
  transition:border-color .15s, box-shadow .15s;
}
.tb-search input:focus{ outline:none; border-color:var(--gold); box-shadow:0 0 0 3px rgba(200,16,46,.15); }
.tb-search svg{ position:absolute; left:11px; top:50%; transform:translateY(-50%); width:16px; height:16px; color:var(--ink-3); }
.tb-icon{ width:38px; height:38px; border-radius:9px; border:1px solid var(--line); background:var(--field); display:grid; place-items:center; cursor:pointer; color:var(--ink-2); position:relative; transition:.15s; }
.tb-icon:hover{ border-color:var(--gold); color:var(--bronze); }
.tb-icon .dot{ position:absolute; top:7px; right:8px; width:7px; height:7px; border-radius:50%; background:var(--st-red); border:1.5px solid var(--card); }

.content{ flex:1; overflow-y:auto; padding:26px; scroll-behavior:smooth; }
.content-inner{ max-width:1320px; margin:0 auto; }

/* ============================================================
   PRIMITIVES
   ============================================================ */
.card{ background:var(--card); border:1px solid var(--card-edge); border-radius:var(--radius); box-shadow:var(--shadow-sm); }
.card-pad{ padding:20px 22px; }
.card-head{ display:flex; align-items:center; gap:12px; padding:16px 20px; border-bottom:1px solid var(--line-soft); }
.card-head h3{ font-family:'Sora',serif; font-size:21px; font-weight:600; margin:0; color:var(--espresso); white-space:nowrap; }

.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  height:38px; padding:0 16px; border-radius:9px; border:1px solid var(--line);
  background:var(--field); color:var(--ink); font-family:'Manrope',sans-serif; font-weight:600; font-size:13px;
  cursor:pointer; transition:.15s; white-space:nowrap; text-decoration:none;
}
.btn:hover{ border-color:var(--taupe); background:#fff; }
.btn svg{ width:16px; height:16px; }
.btn-gold{
  border:none; color:#fff; font-weight:700;
  background:var(--gold-sweep); background-size:160% 100%; background-position:0 0;
  box-shadow:0 2px 10px rgba(22,34,74,.30); transition:background-position .4s, box-shadow .2s, transform .1s;
}
.btn-gold:hover{ background-position:100% 0; box-shadow:0 4px 16px rgba(22,34,74,.42); }
.btn-gold:active{ transform:translateY(1px); }
.btn-dark{ background:var(--espresso); color:var(--cream); border:none; }
.btn-dark:hover{ background:var(--walnut); }
.btn-ghost{ background:transparent; border-color:transparent; }
.btn-ghost:hover{ background:rgba(6,39,47,.05); border-color:transparent; }
.btn-sm{ height:30px; padding:0 11px; font-size:12px; border-radius:8px; }
.btn-icon{ width:38px; padding:0; }

.uline{ text-transform:uppercase; letter-spacing:.16em; font-size:11px; font-weight:700; }

/* Status pill */
.pill{ display:inline-flex; align-items:center; gap:6px; height:23px; padding:0 10px; border-radius:20px; font-size:11px; font-weight:700; letter-spacing:.02em; white-space:nowrap; }
.pill .d{ width:6px; height:6px; border-radius:50%; background:currentColor; }
.pill.green{ color:var(--st-green); background:var(--st-green-bg); }
.pill.blue{ color:var(--st-blue); background:var(--st-blue-bg); }
.pill.purple{ color:var(--st-purple); background:var(--st-purple-bg); }
.pill.orange{ color:var(--st-orange); background:var(--st-orange-bg); }
.pill.red{ color:var(--st-red); background:var(--st-red-bg); }
.pill.grey{ color:var(--st-grey); background:var(--st-grey-bg); }
.pill.gold{ color:var(--st-gold); background:var(--st-gold-bg); }

.tag{ display:inline-flex; align-items:center; height:22px; padding:0 9px; border-radius:6px; background:var(--line-soft); color:var(--ink-2); font-size:11px; font-weight:600; letter-spacing:.02em; }
.tag-gold{ background:var(--st-gold-bg); color:var(--bronze); }

/* Tables */
.tbl{ width:100%; border-collapse:collapse; font-size:13px; }
.tbl thead th{ text-align:left; padding:11px 14px; font-size:9.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-3); font-weight:800; border-bottom:1px solid var(--line); white-space:nowrap; background:var(--card); position:sticky; top:0; z-index:1; }
.tbl tbody td{ padding:13px 14px; border-bottom:1px solid var(--line-soft); color:var(--ink); vertical-align:middle; }
.tbl tbody tr{ cursor:pointer; transition:background .12s; }
.tbl tbody tr:hover{ background:rgba(27,42,107,.05); }
.tbl tbody tr:last-child td{ border-bottom:none; }
.tbl .mono{ font-variant-numeric:tabular-nums; }
.tbl .num{ text-align:right; font-variant-numeric:tabular-nums; }
.tbl .strong{ font-weight:700; color:var(--espresso); }

.doc-link{ font-weight:700; color:var(--bronze); font-variant-numeric:tabular-nums; }
.doc-link:hover{ text-decoration:underline; }

/* Stat tiles */
.stat{ background:var(--card); border:1px solid var(--card-edge); border-radius:var(--radius); padding:18px 20px; box-shadow:var(--shadow-sm); position:relative; overflow:hidden; }
.stat .k{ font-size:9.5px; letter-spacing:.2em; text-transform:uppercase; color:var(--ink-3); font-weight:800; }
.stat .v{ font-family:'Sora',serif; font-size:36px; font-weight:600; color:var(--espresso); line-height:1; margin-top:9px; font-variant-numeric:tabular-nums; }
.stat .sub{ font-size:12px; color:var(--ink-3); margin-top:7px; display:flex; align-items:center; gap:5px; }
.stat .accent{ position:absolute; left:0; top:0; bottom:0; width:3px; }
.trend-up{ color:var(--st-green); font-weight:700; }
.trend-dn{ color:var(--st-red); font-weight:700; }

/* Field / form */
.fld{ display:flex; flex-direction:column; gap:6px; }
.fld > label{ font-size:9.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-3); font-weight:800; }
.fld input,.fld select,.fld textarea{
  height:38px; border-radius:8px; border:1px solid var(--line); background:var(--field);
  padding:0 11px; font-family:inherit; font-size:13px; color:var(--ink); width:100%;
}
.fld textarea{ height:auto; padding:9px 11px; resize:vertical; line-height:1.5; }
.fld input:focus,.fld select:focus,.fld textarea:focus{ outline:none; border-color:var(--gold); box-shadow:0 0 0 3px rgba(200,16,46,.14); }
.cellinput{ width:100%; height:32px; border:1px solid transparent; border-radius:6px; background:var(--field); padding:0 8px; font-family:inherit; font-size:12.5px; color:var(--ink); }
.cellinput:hover{ border-color:var(--line); }
.cellinput:focus{ outline:none; border-color:var(--gold); box-shadow:0 0 0 2px rgba(200,16,46,.14); }
.cellinput.num{ text-align:right; font-variant-numeric:tabular-nums; }
.kv{ display:flex; flex-direction:column; gap:3px; }
.kv .k{ font-size:9.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-3); font-weight:800; }
.kv .v{ font-size:14px; color:var(--espresso); font-weight:600; }

/* Drawer */
.scrim{ position:fixed; inset:0; background:rgba(6,39,47,.42); backdrop-filter:blur(2px); z-index:100; opacity:0; animation:fade .2s forwards; }
@keyframes fade{ to{ opacity:1; } }
.drawer{
  position:fixed; top:0; right:0; bottom:0; width:min(860px,94vw); background:var(--paper);
  box-shadow:var(--shadow-drawer); z-index:101; display:flex; flex-direction:column;
  transform:translateX(100%); animation:slidein .32s cubic-bezier(.22,1,.36,1) forwards;
}
@keyframes slidein{ to{ transform:translateX(0); } }
.drawer-head{ flex:0 0 auto; padding:20px 26px; border-bottom:1px solid var(--line); background:var(--card); display:flex; align-items:flex-start; gap:16px; }
.drawer-body{ flex:1; overflow-y:auto; padding:24px 26px; }
.drawer-foot{ flex:0 0 auto; padding:14px 26px; border-top:1px solid var(--line); background:var(--card); display:flex; align-items:center; gap:10px; }

/* Section block inside drawers */
.sec{ margin-bottom:24px; }
.sec-h{ display:flex; align-items:center; gap:10px; margin-bottom:13px; }
.sec-h .label{ color:var(--bronze); }
.sec-h .ln{ flex:1; height:1px; background:var(--line); }

/* Grid helpers */
.grid{ display:grid; gap:16px; }
.g2{ grid-template-columns:repeat(2,1fr); }
.g3{ grid-template-columns:repeat(3,1fr); }
.g4{ grid-template-columns:repeat(4,1fr); }
.row{ display:flex; align-items:center; gap:10px; }
.spread{ display:flex; align-items:center; justify-content:space-between; gap:14px; }
.muted{ color:var(--ink-3); }
.wrap{ flex-wrap:wrap; }

/* Stepper / workflow timeline */
.flow{ display:flex; align-items:stretch; gap:0; }
.flow-step{ flex:1; position:relative; padding:0 4px; text-align:center; }
.flow-step .dot{ width:30px; height:30px; border-radius:50%; display:grid; place-items:center; margin:0 auto 8px; background:var(--card); border:2px solid var(--line); color:var(--ink-3); position:relative; z-index:2; }
.flow-step .dot svg{ width:15px; height:15px; }
.flow-step.done .dot{ background:var(--gold-sweep); border-color:transparent; color:#fff; }
.flow-step.current .dot{ background:var(--espresso); border-color:var(--gold); color:var(--champagne); box-shadow:0 0 0 4px rgba(200,16,46,.18); }
.flow-step .nm{ font-size:10px; letter-spacing:.1em; text-transform:uppercase; font-weight:700; color:var(--ink-3); }
.flow-step.done .nm,.flow-step.current .nm{ color:var(--espresso); }
.flow-step .ln{ position:absolute; top:15px; left:-50%; width:100%; height:2px; background:var(--line); z-index:1; }
.flow-step.done .ln,.flow-step.current .ln{ background:var(--bronze); }
.flow-step:first-child .ln{ display:none; }

/* Misc */
.divline{ height:1px; background:var(--line); margin:18px 0; }
.empty{ text-align:center; padding:50px 20px; color:var(--ink-3); }
.empty .serif{ font-size:24px; color:var(--ink-2); }

.seg{ display:inline-flex; background:var(--line-soft); border-radius:9px; padding:3px; gap:2px; }
.seg button{ border:none; background:transparent; padding:6px 14px; border-radius:7px; font-family:inherit; font-size:12.5px; font-weight:600; color:var(--ink-2); cursor:pointer; transition:.15s; }
.seg button.on{ background:var(--card); color:var(--espresso); box-shadow:var(--shadow-sm); }

.chip-filter{ display:inline-flex; align-items:center; gap:7px; height:32px; padding:0 12px; border-radius:8px; border:1px solid var(--line); background:var(--field); font-size:12.5px; font-weight:600; color:var(--ink-2); cursor:pointer; transition:.15s; }
.chip-filter:hover{ border-color:var(--taupe); }
.chip-filter.on{ border-color:var(--gold); background:var(--st-gold-bg); color:var(--bronze); }
.chip-filter svg{ width:14px; height:14px; }

/* Toast */
.toast-wrap{ position:fixed; bottom:22px; left:50%; transform:translateX(-50%); z-index:200; display:flex; flex-direction:column; gap:10px; align-items:center; }
.toast{ display:flex; align-items:center; gap:12px; background:var(--espresso); color:var(--cream); padding:13px 18px; border-radius:11px; box-shadow:var(--shadow-lg); font-size:13px; font-weight:500; min-width:300px; border:1px solid rgba(200,16,46,.35); animation:toastin .35s cubic-bezier(.22,1,.36,1); }
@keyframes toastin{ from{ transform:translateY(16px); opacity:0; } }
.toast .ti{ width:30px; height:30px; border-radius:8px; background:var(--gold-sweep); color:#fff; display:grid; place-items:center; flex:0 0 30px; }
.toast .tx b{ color:#fff; font-weight:700; }
.toast .tx div{ color:var(--taupe); font-size:11.5px; }

/* Progress bar */
.bar{ height:7px; border-radius:20px; background:var(--line-soft); overflow:hidden; }
.bar > span{ display:block; height:100%; border-radius:20px; background:var(--gold-sweep); }

/* Mini sparkbars */
.spark{ display:flex; align-items:flex-end; gap:3px; height:38px; }
.spark > i{ flex:1; background:var(--line); border-radius:2px 2px 0 0; min-height:3px; transition:.2s; }
.spark > i.hi{ background:var(--gold-sweep-v); }

/* Animations for view mount */
.view-enter{ animation:viewin .34s cubic-bezier(.22,1,.36,1) both; }
@keyframes viewin{ from{ transform:translateY(9px); } to{ transform:none; } }
@keyframes slideup{ from{ transform:translateY(100%); } to{ transform:none; } }

/* Print — isolate the branded quote for Save-as-PDF */
@media print {
  @page { margin: 14mm; }
  body { background: #fff; }
  body * { visibility: hidden !important; }
  .quote-printable, .quote-printable * { visibility: visible !important; }
  .quote-printable { position: absolute !important; left: 0; top: 0; width: 100% !important; box-shadow: none !important; border: none !important; }
  .scrim { display: none !important; }
}

/* Document paper (printable look) */
.doc-paper{ background:#fff; border:1px solid var(--card-edge); border-radius:10px; box-shadow:var(--shadow-md); }

/* Responsive */
@media (max-width:1080px){
  .g4{ grid-template-columns:repeat(2,1fr); }
  .g3{ grid-template-columns:1fr 1fr; }
}
/* mobile nav toggle + backdrop are desktop-hidden by default */
.tb-menu{ display:none; }
.sb-backdrop{ display:none; }
@media (max-width:880px){
  .sidebar{ position:fixed; left:0; top:0; bottom:0; width:min(86vw,300px); transform:translateX(-100%); transition:transform .3s; z-index:60; box-shadow:18px 0 48px rgba(6,39,47,.28); }
  .sidebar.open{ transform:translateX(0); }
  .tb-menu{ display:inline-flex; align-items:center; justify-content:center; }
  .sb-backdrop{ display:block; position:fixed; inset:0; background:rgba(6,39,47,.38); z-index:55; }
  .tb-search{ display:none; }
  .g4,.g3,.g2{ grid-template-columns:1fr; }
  /* inline multi-column grids (set via style=) ignore the utility classes — force single column on small screens */
  .content-inner .grid{ grid-template-columns:1fr !important; }
  .content{ padding:16px; }
  .spread{ flex-wrap:wrap; }
}
@media (max-width:600px){
  /* topbar grows + wraps instead of overflowing off the right edge */
  .topbar{ height:auto; min-height:54px; flex:0 0 auto; flex-wrap:wrap; gap:8px 10px; padding:9px 12px; }
  .topbar .tb-title{ flex:1 1 130px; }
  .tb-title h1{ font-size:18px; white-space:normal; line-height:1.15; }
  .tb-title .crumb{ display:none; }
  .topbar .btn{ height:34px; padding:0 11px; font-size:12.5px; flex:0 0 auto; }
  .topbar .btn svg{ width:15px; height:15px; }
  .content{ padding:12px; }
  .content-inner{ max-width:100%; }
  .stat{ padding:14px 16px; }
  .stat .v{ font-size:28px; }
  /* wide tables scroll inside their card instead of being clipped/squashed */
  .card:has(table){ overflow:auto !important; -webkit-overflow-scrolling:touch; }
  .tbl{ font-size:12.5px; }
  .tbl thead th{ padding:9px 10px; }
  .tbl tbody td{ padding:10px 10px; }
  /* drawers + modals fill the screen */
  .drawer{ width:100vw; }
  .drawer-head{ padding:16px; }
  .drawer-body{ padding:16px; }
  .drawer-foot{ padding:12px 16px; flex-wrap:wrap; gap:8px; }
}