/* ============================================================
   Kingwin Operation System — theme (compact)
   3-column app shell · light/dark · design-system palette
   ============================================================ */
:root{
  color-scheme: light;
  --surface-1:#fcfcfb; --surface-2:#ffffff; --page:#f9f9f7;
  --ink-1:#0b0b0b; --ink-2:#52514e; --ink-muted:#898781;
  --grid:#e1e0d9; --border:rgba(11,11,11,.10);
  --s-blue:#2a78d6; --s-green:#008300; --s-magenta:#e87ba4; --s-yellow:#eda100;
  --good:#0ca30c; --warning:#fab219; --serious:#ec835a; --critical:#d03b3b;
  --tint:rgba(42,120,214,.10);
  --asst-bubble:#eef4fd;
  /* compact metrics */
  --col-left:212px; --col-right:312px; --radius:10px;
}
@media (prefers-color-scheme: dark){
  :root:where(:not([data-theme="light"])){
    color-scheme: dark;
    --surface-1:#1a1a19; --surface-2:#161615; --page:#0d0d0d;
    --ink-1:#ffffff; --ink-2:#c3c2b7; --ink-muted:#898781;
    --grid:#2c2c2a; --border:rgba(255,255,255,.10);
    --s-blue:#3987e5; --s-green:#008300; --s-magenta:#d55181; --s-yellow:#c98500;
    --tint:rgba(57,135,229,.14); --asst-bubble:#20293a;
  }
}
:root[data-theme="dark"]{
  color-scheme: dark;
  --surface-1:#1a1a19; --surface-2:#161615; --page:#0d0d0d;
  --ink-1:#ffffff; --ink-2:#c3c2b7; --ink-muted:#898781;
  --grid:#2c2c2a; --border:rgba(255,255,255,.10);
  --s-blue:#3987e5; --s-green:#008300; --s-magenta:#d55181; --s-yellow:#c98500;
  --tint:rgba(57,135,229,.14); --asst-bubble:#20293a;
}
*{box-sizing:border-box;}
html,body{height:100%;}
body{margin:0; background:var(--page); color:var(--ink-1);
  font-family: system-ui,-apple-system,"Segoe UI",sans-serif; font-size:13px;}

/* ============ minimal grid + utilities (Bootstrap-compatible subset) ============ */
.row{display:flex; flex-wrap:wrap; margin-left:-4px; margin-right:-4px;}
.row > [class^="col"], .row > [class*=" col"]{padding-left:4px; padding-right:4px;}
.row.g-2{row-gap:8px;}
.col-12{flex:0 0 100%; max-width:100%;}
.col-6{flex:0 0 50%; max-width:50%;}
@media(min-width:992px){
  .col-lg-2{flex:0 0 16.6667%; max-width:16.6667%;}
  .col-lg-3{flex:0 0 25%; max-width:25%;}
  .col-lg-6{flex:0 0 50%; max-width:50%;}
}
@media(min-width:1400px){
  .col-xxl-8{flex:0 0 66.6667%; max-width:66.6667%;}
  .col-xxl-4{flex:0 0 33.3333%; max-width:33.3333%;}
}
.mt-1{margin-top:4px;} .mt-2{margin-top:8px;}
.d-flex{display:flex;} .flex-column{flex-direction:column;} .gap-2{gap:8px;}
.h-100{height:100%;} .flex-grow-1{flex-grow:1;}

/* ============ 3-COLUMN APP SHELL (page template) ============ */
.app-shell{display:grid; grid-template-columns: var(--col-left) minmax(0,1fr) var(--col-right);
  height:100vh; overflow:hidden;}
.app-shell > *{min-height:0;}
/* The mobile drawer scrim is injected into .app-shell by default.js at load.
   It is only *hidden* inside the <=820px media query, so at desktop widths it
   was a visible 4th child of a 3-column grid — creating an implicit second row.
   Both rows are auto-sized, so `height:100vh` got split between them and the
   sidebar stopped short of full height, worst on pages with little content.
   Hide it by default; the <=820px rules re-show it via a more specific selector. */
.nav-scrim{display:none;}

/* collapsible side columns */
.app-shell.hide-left{grid-template-columns: 0 minmax(0,1fr) var(--col-right);}
.app-shell.hide-right{grid-template-columns: var(--col-left) minmax(0,1fr) 0;}
.app-shell.hide-left.hide-right{grid-template-columns: 0 minmax(0,1fr) 0;}
.app-shell.hide-left .sidebar{display:none;}
.app-shell.hide-right .assistant{display:none;}

.icon-btn{width:30px; height:30px; border:1px solid var(--border); background:var(--surface-1); color:var(--ink-2);
  border-radius:8px; display:inline-flex; align-items:center; justify-content:center; font-size:15px; cursor:pointer; flex:none;}
.icon-btn:hover{border-color:var(--s-blue); color:var(--s-blue);}
.icon-btn.on{background:var(--s-blue); border-color:var(--s-blue); color:#fff;}

/* --- Column 1: left menu --- */
.sidebar{background:var(--surface-1); border-right:1px solid var(--border); display:flex; flex-direction:column; overflow:hidden;}
.side-brand{display:flex; align-items:center; gap:9px; padding:10px 13px; border-bottom:1px solid var(--border);}
.side-brand img{height:26px; width:auto; border-radius:5px;}
.side-brand .bt{line-height:1.1;}
.side-brand .bt b{font-size:13px; font-weight:700; display:block;}
.side-brand .bt span{font-size:9.5px; color:var(--ink-muted); text-transform:uppercase; letter-spacing:.05em;}
.side-nav{flex:1; overflow-y:auto; padding:6px;}
.nav-group{font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.06em; color:var(--ink-muted); padding:10px 8px 4px;}
.side-nav a{display:flex; align-items:center; gap:9px; padding:6px 9px; border-radius:8px; text-decoration:none;
  color:var(--ink-2); font-size:12.5px; font-weight:500;}
.side-nav a .bi{font-size:14px; width:17px; text-align:center; color:var(--ink-muted);}
.side-nav a:hover{background:var(--tint); color:var(--ink-1);}
.side-nav a.active{background:var(--s-blue); color:#fff;}
.side-nav a.active .bi{color:#fff;}
.side-nav a .count{margin-left:auto; font-size:10px; font-weight:700; background:var(--grid); color:var(--ink-2);
  border-radius:20px; padding:0 6px; font-variant-numeric:tabular-nums;}
.side-nav a.active .count{background:rgba(255,255,255,.22); color:#fff;}
.side-foot{border-top:1px solid var(--border); padding:9px 12px; display:flex; align-items:center; gap:9px; font-size:12px;}
.side-foot .av{width:28px; height:28px; border-radius:50%; background:var(--tint); color:var(--s-blue);
  display:flex; align-items:center; justify-content:center; font-weight:700;}
.side-foot .nm{line-height:1.2;}
.side-foot .nm b{display:block; font-size:12px;}
.side-foot .nm span{font-size:10.5px; color:var(--ink-muted);}

/* --- Column 2: center content --- */
.content{overflow-y:auto; display:flex; flex-direction:column;}
.content-head{position:sticky; top:0; z-index:5; background:var(--page); border-bottom:1px solid var(--border);
  padding:9px 18px; display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap;}
.content-head .ph-crumb{color:var(--ink-muted); font-size:11.5px; margin-bottom:1px;}
.content-head h1{font-size:17px; font-weight:700; margin:0; letter-spacing:-.01em; display:flex; align-items:center; gap:8px;}
.content-head .clock{font-size:11.5px; color:var(--ink-muted); font-variant-numeric:tabular-nums;}
.content-body{padding:14px 18px 30px; max-width:none; width:100%;}
.live-dot{width:8px; height:8px; border-radius:50%; background:var(--good); display:inline-block; animation:pulse 1.8s infinite;}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(12,163,12,.55);}70%{box-shadow:0 0 0 7px rgba(12,163,12,0);}100%{box-shadow:0 0 0 0 rgba(12,163,12,0);}}

/* --- Column 3: right chat assistant (agentic) --- */
.assistant{background:var(--surface-1); border-left:1px solid var(--border); display:flex; flex-direction:column; overflow:hidden;}
.asst-head{padding:10px 13px; border-bottom:1px solid var(--border); display:flex; align-items:center; gap:9px;}
.asst-head .bot{width:30px; height:30px; border-radius:8px; background:linear-gradient(135deg,#4a3aa7,#2a78d6); color:#fff;
  display:flex; align-items:center; justify-content:center; font-size:15px;}
.asst-head .ti b{font-size:13px; font-weight:700; display:flex; align-items:center; gap:6px;}
.asst-head .ti .tag{font-size:9px; font-weight:700; text-transform:uppercase; letter-spacing:.05em; background:var(--tint);
  color:var(--s-blue); padding:1px 5px; border-radius:5px;}
.asst-head .ti span{font-size:10.5px; color:var(--good); display:flex; align-items:center; gap:4px;}
.asst-head .ti span .d{width:6px; height:6px; border-radius:50%; background:var(--good);}
.asst-body{flex:1; overflow-y:auto; padding:13px; display:flex; flex-direction:column; gap:11px;}
.msg{display:flex; gap:8px; font-size:12px; line-height:1.5;}
.msg .ic{width:24px; height:24px; border-radius:7px; flex:none; display:flex; align-items:center; justify-content:center; font-size:12px;}
.msg.bot .ic{background:linear-gradient(135deg,#4a3aa7,#2a78d6); color:#fff;}
.msg.me{flex-direction:row-reverse;}
.msg.me .ic{background:var(--tint); color:var(--s-blue);}
.msg .bub{padding:8px 11px; border-radius:11px; max-width:210px;}
.msg.bot .bub{background:var(--asst-bubble); border-top-left-radius:3px;}
.msg.me .bub{background:var(--s-blue); color:#fff; border-top-right-radius:3px;}
.msg .bub .ref{display:inline-flex; align-items:center; gap:4px; font-size:10.5px; font-weight:600; background:var(--surface-1);
  border:1px solid var(--border); border-radius:6px; padding:1px 6px; margin-top:5px; color:var(--ink-2);}
.msg .bub b{font-weight:700;}
.tool-run{font-size:10.5px; color:var(--ink-muted); display:flex; align-items:center; gap:6px; padding-left:32px;}
.tool-run .bi{color:var(--s-green);}
.asst-suggest{padding:7px 12px; display:flex; gap:6px; flex-wrap:wrap; border-top:1px solid var(--border);}
.chip{font-size:11px; border:1px solid var(--border); background:var(--surface-2); border-radius:20px; padding:4px 10px;
  color:var(--ink-2); cursor:pointer; white-space:nowrap;}
.chip:hover{border-color:var(--s-blue); color:var(--s-blue);}
.asst-input{padding:10px 12px; border-top:1px solid var(--border);}
.asst-input .box{display:flex; align-items:flex-end; gap:8px; border:1px solid var(--border); border-radius:11px;
  padding:7px 9px; background:var(--surface-2);}
.asst-input textarea{flex:1; border:none; outline:none; resize:none; background:transparent; color:var(--ink-1);
  font-family:inherit; font-size:12.5px; max-height:76px; line-height:1.4;}
.asst-input .send{width:30px; height:30px; border:none; border-radius:8px; background:var(--s-blue); color:#fff;
  display:flex; align-items:center; justify-content:center; font-size:14px; cursor:pointer; flex:none;}
.asst-input .hintline{font-size:10px; color:var(--ink-muted); margin-top:5px; text-align:center;}

/* ============ shared content components ============ */
.kpi{background:var(--surface-1); border:1px solid var(--border); border-radius:var(--radius); padding:11px 13px; height:100%;}
.kpi .ic{width:30px; height:30px; border-radius:8px; display:flex; align-items:center; justify-content:center; font-size:15px;}
.kpi .val{font-size:22px; font-weight:700; margin-top:7px; font-variant-numeric:tabular-nums; line-height:1;}
.kpi .lbl{font-size:11px; color:var(--ink-muted); font-weight:600; text-transform:uppercase; letter-spacing:.04em; margin-top:3px;}
.kpi .sub{font-size:11px; color:var(--ink-2); margin-top:2px;}

.panel{background:var(--surface-1); border:1px solid var(--border); border-radius:var(--radius); padding:13px;}
/* Only stretch to fill when paired with a sibling in a grid row (e.g. two side-by-side
   cards) — a standalone panel directly in .content-body has no row to match, and inheriting
   height:100% there blows up to a large indefinite height (via the flex-column .content
   ancestor), leaving a huge dead-space gap below its actual content. */
.row .panel{height:100%;}
.panel h2{font-size:13px; font-weight:700; margin:0 0 9px; display:flex; align-items:center; gap:7px;}
.panel h2 .bi{color:var(--s-blue);}
.panel .hint{font-size:10.5px; color:var(--ink-muted); font-weight:400; margin-left:auto;}

.bar-row{display:grid; grid-template-columns:150px 1fr 44px; align-items:center; gap:10px; margin-bottom:9px; font-size:12px;}
.bar-row:last-child{margin-bottom:0;}
.bar-track{background:var(--grid); border-radius:5px; height:9px; overflow:hidden;}
.bar-fill{height:100%; border-radius:5px;}
.bar-row .n{text-align:right; font-variant-numeric:tabular-nums; color:var(--ink-2); font-weight:600;}

table.tbl{width:100%; border-collapse:collapse; font-size:12px;}
table.tbl th{text-align:left; font-size:10.5px; text-transform:uppercase; letter-spacing:.03em; color:var(--ink-muted);
  font-weight:600; padding:5px 7px; border-bottom:1px solid var(--grid);}
table.tbl td{padding:6px 7px; border-bottom:1px solid var(--grid); vertical-align:middle;}
table.tbl tr:last-child td{border-bottom:none;}
.mono{font-variant-numeric:tabular-nums;}

.badge-status{display:inline-flex; align-items:center; gap:5px; font-size:10.5px; font-weight:600; padding:2px 7px; border-radius:20px;}
.badge-status .dot{width:6px; height:6px; border-radius:50%;}
.b-good{background:rgba(12,163,12,.12); color:var(--good);} .b-good .dot{background:var(--good);}
.b-warning{background:rgba(250,178,25,.16); color:#8a5a00;} .b-warning .dot{background:var(--warning);}
.b-serious{background:rgba(236,131,90,.16); color:#a3431c;} .b-serious .dot{background:var(--serious);}
.b-critical{background:rgba(208,59,59,.14); color:var(--critical);} .b-critical .dot{background:var(--critical);}
.b-neutral{background:var(--grid); color:var(--ink-2);} .b-neutral .dot{background:var(--ink-muted);}

.type-chip{display:inline-flex; align-items:center; gap:6px; font-size:10.5px; font-weight:600; padding:2px 7px; border-radius:6px;}
.t-tour{background:rgba(42,120,214,.12); color:var(--s-blue);}
.t-school{background:rgba(0,131,0,.12); color:var(--s-green);}
.t-shuttle{background:rgba(232,123,164,.18); color:#9c2f5e;}
.t-offwork{background:rgba(237,161,0,.18); color:#8a5a00;}

.alert-item{display:flex; gap:9px; padding:8px 0; border-bottom:1px solid var(--grid);}
.alert-item:last-child{border-bottom:none; padding-bottom:0;}
.alert-item .aic{width:26px; height:26px; border-radius:7px; display:flex; align-items:center; justify-content:center; font-size:13px; flex:none;}
.alert-item .txt{font-size:12px; line-height:1.4;}
.alert-item .txt .t{font-weight:600;}
.alert-item .meta{font-size:10.5px; color:var(--ink-muted); margin-top:1px;}

.map-box{position:relative; height:210px; border-radius:9px; overflow:hidden; background:
  linear-gradient(var(--grid) 1px, transparent 1px) 0 0/24px 24px,
  linear-gradient(90deg, var(--grid) 1px, transparent 1px) 0 0/24px 24px, var(--page);
  border:1px solid var(--border);}
.map-pin{position:absolute; transform:translate(-50%,-100%); font-size:10.5px; text-align:center;}
.map-pin .bi{font-size:19px;}
.map-pin.on-trip .bi{color:var(--s-blue);}
.map-pin.alert .bi{color:var(--critical);}
.map-pin.depot .bi{color:var(--ink-muted);}
.map-pin .lbl{background:var(--surface-1); border:1px solid var(--border); border-radius:5px; padding:0 5px; font-size:9.5px;
  white-space:nowrap; margin-top:2px; display:inline-block; color:var(--ink-2);}

.foot-note{font-size:11px; color:var(--ink-muted); margin-top:18px; padding-top:12px; border-top:1px solid var(--grid);
  display:flex; align-items:flex-start; gap:6px;}

/* ============ toolbar · buttons · segmented control ============ */
.toolbar{display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:14px;}
.toolbar .spacer{flex:1;}
.btn-k{display:inline-flex; align-items:center; gap:6px; font-size:12px; font-weight:600; border-radius:8px;
  padding:7px 12px; cursor:pointer; border:1px solid var(--border); background:var(--surface-1); color:var(--ink-1);}
.btn-k:hover{border-color:var(--s-blue); color:var(--s-blue);}
.btn-k.primary{background:var(--s-blue); border-color:var(--s-blue); color:#fff;}
.btn-k.primary:hover{filter:brightness(1.05); color:#fff;}
.btn-k .bi{font-size:14px;}

.search{display:flex; align-items:center; gap:7px; border:1px solid var(--border); background:var(--surface-1);
  border-radius:8px; padding:6px 10px; min-width:210px;}
.search .bi{color:var(--ink-muted); font-size:14px;}
.search input{border:none; outline:none; background:transparent; color:var(--ink-1); font-family:inherit; font-size:12.5px; width:100%;}

.seg{display:inline-flex; background:var(--grid); border-radius:9px; padding:2px; gap:2px;}
.seg-btn{border:none; background:transparent; color:var(--ink-2); font-size:12px; font-weight:600; padding:5px 11px;
  border-radius:7px; cursor:pointer; display:inline-flex; align-items:center; gap:6px; white-space:nowrap;}
.seg-btn .bi{font-size:13px;}
.seg-btn.active{background:var(--surface-1); color:var(--ink-1); box-shadow:0 1px 2px rgba(0,0,0,.08);}
.seg-btn .count{font-size:10px; background:var(--surface-2); border:1px solid var(--border); border-radius:20px;
  padding:0 5px; font-variant-numeric:tabular-nums;}
.seg-btn.active .count{background:var(--tint); border-color:transparent; color:var(--s-blue);}

table.tbl tr.clickable{cursor:pointer;}
table.tbl tr.clickable:hover td{background:var(--tint);}

/* row visibility (search + tab filter compose) */
tr.filter-hidden, tr.search-hidden{display:none !important;}

/* transient toast for demo actions */
.toast-k{position:fixed; left:50%; bottom:24px; transform:translateX(-50%) translateY(8px);
  background:var(--ink-1); color:var(--page); font-size:12.5px; font-weight:500; padding:9px 15px;
  border-radius:9px; box-shadow:0 8px 24px rgba(2,6,23,.28); opacity:0; transition:.18s ease;
  z-index:100; pointer-events:none; max-width:80vw; text-align:center;}
.toast-k.show{opacity:1; transform:translateX(-50%) translateY(0);}

/* ============ booking calendar ============ */
.cal{border:1px solid var(--border); border-radius:var(--radius); overflow:hidden; background:var(--surface-1);}
.cal-head{display:grid; grid-template-columns:repeat(7,1fr); background:var(--surface-2); border-bottom:1px solid var(--border);}
.cal-head div{padding:8px 10px; font-size:10.5px; font-weight:700; text-transform:uppercase; letter-spacing:.04em;
  color:var(--ink-muted); text-align:center;}
.cal-body{display:grid; grid-template-columns:repeat(7,1fr);}
.cal-cell{min-height:104px; border-right:1px solid var(--grid); border-bottom:1px solid var(--grid); padding:6px; display:flex; flex-direction:column; gap:4px;}
.cal-cell:nth-child(7n){border-right:none;}
.cal-cell .dnum{font-size:11px; font-weight:600; color:var(--ink-2); font-variant-numeric:tabular-nums;}
.cal-cell.dim{background:var(--page);}
.cal-cell.dim .dnum{color:var(--ink-muted);}
.cal-cell.today .dnum{background:var(--s-blue); color:#fff; border-radius:20px; padding:0 6px; align-self:flex-start;}
.cal-ev{font-size:10.5px; font-weight:600; border-radius:5px; padding:2px 6px; color:#fff; cursor:pointer; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.ev-tour{background:var(--s-blue);}
.ev-school{background:var(--s-green);}
.ev-shuttle{background:var(--s-magenta);}
.ev-offwork{background:var(--s-yellow); color:#3a2a00;}
.cal-more{font-size:10px; color:var(--ink-muted); font-weight:600;}

/* ============ right-side drawer ============ */
.drawer{position:fixed; inset:0; z-index:50; display:none;}
.drawer.open{display:block;}
.drawer .scrim{position:absolute; inset:0; background:rgba(2,6,23,.42);}
.drawer .panel{position:absolute; top:0; right:0; height:100%; width:min(520px,94vw); background:var(--surface-1);
  border-left:1px solid var(--border); display:flex; flex-direction:column; box-shadow:-12px 0 40px rgba(2,6,23,.18);
  transform:translateX(12px); transition:transform .12s ease;}
.drawer.open .panel{transform:translateX(0);}
.drawer .dh{display:flex; align-items:center; gap:10px; padding:13px 16px; border-bottom:1px solid var(--border);}
.drawer .dh h3{font-size:15px; font-weight:700; margin:0;}
.drawer .dh .crumb{font-size:11px; color:var(--ink-muted);}
.drawer .db{flex:1; overflow-y:auto; padding:16px;}
.drawer .df{border-top:1px solid var(--border); padding:12px 16px; display:flex; gap:8px; justify-content:flex-end;}
body.drawer-open{overflow:hidden;}

/* ============ forms ============ */
.form-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:12px;}
.form-grid .full{grid-column:1 / -1;}
.field label{display:block; font-size:11px; font-weight:600; color:var(--ink-2); margin-bottom:4px;}
.field input, .field select, .field textarea{width:100%; border:1px solid var(--border); background:var(--surface-2);
  color:var(--ink-1); border-radius:8px; padding:7px 9px; font-family:inherit; font-size:12.5px; outline:none;}
.field input:focus, .field select:focus, .field textarea:focus{border-color:var(--s-blue);}
.field .req{color:var(--critical);}
.form-section{font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.05em; color:var(--ink-muted);
  margin:18px 0 10px; padding-bottom:6px; border-bottom:1px solid var(--grid);}
.form-section:first-child{margin-top:0;}

.type-picker{display:grid; grid-template-columns:repeat(4,1fr); gap:8px; margin-bottom:4px;}
.type-opt{border:1px solid var(--border); background:var(--surface-2); border-radius:9px; padding:9px; cursor:pointer;
  text-align:center; font-size:11.5px; font-weight:600; color:var(--ink-2);}
.type-opt .bi{display:block; font-size:18px; margin-bottom:4px; color:var(--ink-muted);}
.type-opt.active{border-color:var(--s-blue); background:var(--tint); color:var(--s-blue);}
.type-opt.active .bi{color:var(--s-blue);}

.detail-row{display:flex; justify-content:space-between; gap:14px; padding:7px 0; border-bottom:1px solid var(--grid); font-size:12.5px;}
.detail-row:last-child{border-bottom:none;}
.detail-row .k{color:var(--ink-muted);}
.detail-row .v{font-weight:600; text-align:right;}
.stop-item{display:flex; gap:10px; padding:8px 0; border-bottom:1px solid var(--grid);}
.stop-item:last-child{border-bottom:none;}
.stop-item .seq{width:22px; height:22px; border-radius:50%; background:var(--tint); color:var(--s-blue); font-size:11px;
  font-weight:700; display:flex; align-items:center; justify-content:center; flex:none;}
.stop-item .st{font-size:12.5px; font-weight:600;}
.stop-item .stt{font-size:11px; color:var(--ink-muted);}

/* ============ responsive collapse ============ */
@media (max-width:1200px){
  .app-shell{grid-template-columns: var(--col-left) minmax(0,1fr);}
  .assistant{display:none;}
}
@media (max-width:820px){
  .app-shell{grid-template-columns: 1fr; height:100dvh;}

  /* left menu becomes an off-canvas drawer, opened via the header hamburger
     (togglePanel('left') just flips .hide-left — same flag desktop uses to
     HIDE the sidebar now means SHOW it here, since the mobile baseline is closed) */
  .sidebar{
    position:fixed; top:0; left:0; bottom:0; z-index:60;
    width:min(272px,84vw);
    transform:translateX(-100%);
    transition:transform .2s ease;
    box-shadow:16px 0 32px rgba(2,6,23,.28);
  }
  .app-shell.hide-left .sidebar{display:flex; transform:translateX(0);}
  .nav-scrim{display:none;}
  .app-shell.hide-left .nav-scrim{
    display:block; position:fixed; top:0; right:0; bottom:0; left:min(272px,84vw);
    z-index:55; background:rgba(2,6,23,.4);
  }

  .content-head{padding:9px 14px;}
  .content-body{padding:12px 14px 24px;}
  .form-grid, .type-picker{grid-template-columns:1fr;}

  /* week calendar keeps readable column widths and scrolls horizontally
     instead of squeezing 7 columns into a phone-width viewport */
  .cal{overflow-x:auto;}
  .cal-head, .cal-body{min-width:640px;}
}

@media (max-width:420px){
  .kpi .val{font-size:19px;}
  .bar-row{grid-template-columns:100px 1fr 38px; gap:8px;}
}