/* Crystal Sidebar: shared chrome for every department. Operational panels keep
   opaque surfaces; only two bounded chrome layers use blur. The drawer responds
   to CSS viewport width, so browser zoom gets the same treatment as a small screen. */
:root {
  --sb-w:240px; --sb-rail:64px; --topbar-h:64px;
  --shell-gap:16px; --shell-inset:16px; --shell-radius:22px;
  --bg:#eff3f8; --panel-2:#f2f5f9; --ink:#202631; --ink-2:#566477; --ink-3:#647080;
  --line:#dce3ed; --line-2:#eaf0f6;
  --bg-grad:radial-gradient(ellipse at 0 0,#dceafa 0,transparent 55%),radial-gradient(ellipse at 100% 100%,#eee3ed 0,transparent 50%);
  --shell-glass:rgba(255,255,255,.78); --shell-edge:rgba(255,255,255,.95);
  --shell-shadow:0 8px 30px rgba(45,65,95,.07); --shell-scrim:rgba(22,32,48,.32);
  --shell-selected:rgba(255,255,255,.95); --shell-blur:blur(20px) saturate(130%);
}
[data-theme="dark"] {
  --bg:#151d2a; --panel:#202a39; --panel-2:#273244; --ink:#edf2fb; --ink-2:#bbc5d5; --ink-3:#a7b3c6;
  --line:#3b475a; --line-2:#303d50;
  --bg-grad:radial-gradient(ellipse at 0 0,#243c55 0,transparent 55%),radial-gradient(ellipse at 100% 100%,#352b42 0,transparent 50%);
  --shell-glass:rgba(32,43,61,.88); --shell-edge:rgba(205,223,255,.16);
  --shell-shadow:0 10px 32px rgba(0,0,0,.2); --shell-scrim:rgba(0,0,0,.5);
  --shell-selected:#2b394e;
}
body { background-attachment:scroll; }
.shell { padding:var(--shell-inset); gap:var(--shell-gap); align-items:flex-start; }
.sidebar { top:var(--shell-inset); height:calc(100vh - 2 * var(--shell-inset)); height:calc(100dvh - 2 * var(--shell-inset));
  border:1px solid var(--shell-edge); border-radius:var(--shell-radius); background:var(--shell-glass);
  backdrop-filter:var(--shell-blur); -webkit-backdrop-filter:var(--shell-blur); box-shadow:inset 0 1px 0 var(--glass-hi),var(--shell-shadow); z-index:60; }
.content { width:0; }
.sb-top { padding:19px 16px 13px; gap:12px; }
.sb-identity { display:flex; flex-direction:column; line-height:1.35; }
.sb-identity strong { font-size:16px; font-weight:650; }
.sb-identity small { font-size:12px; color:var(--ink-2); font-weight:400; }
.sb-toggle { padding:8px; border-radius:10px; color:var(--ink-2); min-height:34px; min-width:34px; align-items:center; justify-content:center; }
.sb-ic { width:18px; height:18px; stroke-width:1.35; color:var(--ink-2); }
.sb-nav { padding:0 10px 14px; scrollbar-gutter:stable; overscroll-behavior:contain; }
.sb-sec { color:var(--ink-2); font-size:11px; letter-spacing:.07em; text-transform:uppercase; padding:12px 11px 8px; }
.sb-ws { min-height:40px; padding:9px 11px; gap:10px; border-radius:11px; font-size:13px; color:var(--ink-2); margin-bottom:3px; }
.sb-lbl { white-space:normal; overflow:visible; text-overflow:clip; line-height:1.35; }
.sb-ws.on { background:var(--shell-selected); color:var(--ink); box-shadow:inset 0 1px 0 var(--glass-hi),var(--shell-shadow); }
.sb-ws.on .sb-ic { color:var(--accent); }
.sb-ws.on .sb-count { color:var(--ink-2); opacity:1; }
.sb-ws.on .sb-count.wn-unread { color:var(--red); }
.sb-kids { margin:5px 0 9px 20px; padding-left:10px; border-color:var(--line); }
.sb-tab { padding:7px 9px; min-height:34px; border-radius:8px; font-size:12.5px; line-height:1.45; overflow-wrap:anywhere; }
.sb-tab.on { color:var(--accent-deep); }
[data-theme="dark"] .sb-tab.on { color:var(--ink); }
.sb-tab .count-note,.sb-count { font-size:11px; }
.sb-foot { font:12px/1.5 var(--sans); padding:12px; border-top:1px solid var(--line); }
.sb-foot #adminBtn { width:100%; border:0; border-radius:12px; padding:9px; background:transparent; font-size:13px; justify-content:flex-start; min-height:42px; }
.sb-foot #adminBtn:hover { background:var(--fill-1); }
.sb-foot #adminBtn .acct-nm { max-width:none; flex:1; text-align:left; overflow-wrap:anywhere; white-space:normal; }
.sb-foot #adminBtn .acct-caret { margin-left:auto; }
.sb-foot .sb-status { color:var(--ink-2); font-size:11px; font-weight:400; margin:8px 8px 6px; }
#connDot { box-shadow:none; width:7px; height:7px; }
#connDot.off { box-shadow:none; }
#connDot[data-state="connecting"] { background:var(--ink-3); }
body.shell-offline #connDot { background:var(--red); }
.sb-support { display:flex; gap:6px; align-items:center; justify-content:space-between; margin:0 2px; }
.sb-support button { display:flex; align-items:center; gap:6px; border:0; border-radius:8px; padding:7px 6px; color:var(--ink-2); background:none; font:12px var(--sans); min-height:32px; }
.sb-support button:hover { color:var(--ink); background:var(--fill-1); }
.sb-support .sb-ic { width:15px; height:15px; }
.shell-header { top:var(--shell-inset); min-height:64px; height:auto; padding:12px 18px; gap:12px; flex-wrap:wrap;
  border:1px solid var(--shell-edge); border-radius:18px; background:var(--shell-glass); backdrop-filter:var(--shell-blur); -webkit-backdrop-filter:var(--shell-blur); box-shadow:inset 0 1px 0 var(--glass-hi),var(--shell-shadow); }
.shell-header .tb-title { flex:1 1 160px; gap:4px; }
.shell-header .brand { white-space:normal; font-size:13px; letter-spacing:.015em; }
.shell-header .tb-sub { font-size:11px; color:var(--ink-2); }
.shell-header .hdr-right { gap:6px; margin-left:auto; flex-wrap:wrap; font-family:var(--sans); }
.shell-header .hdr-btn { border-radius:10px; min-height:34px; }
.shell-header .td-workspace-switch { flex:0 1 215px; margin-left:0; min-width:135px; color:var(--ink-2); }
.shell-header .td-workspace-switch select { font-family:var(--sans); font-size:13px; border-radius:10px; min-height:34px; background:var(--panel); }
.shell-header .td-workspace-switch b { font-size:13px; }
.shell-header .td-workspace-switch~.hdr-right { margin-left:auto; }
.shell-header .tb-search { flex:1 1 200px; min-width:140px; height:36px; margin-left:0; backdrop-filter:none; -webkit-backdrop-filter:none; }
.shell-header #covGo,.shell-header #covClear { min-height:34px; height:auto; border-radius:10px; }
.shell-nav-toggle { display:none; flex:none; align-items:center; justify-content:center; border:1px solid var(--line); border-radius:10px; background:var(--panel); padding:8px; min-width:36px; min-height:36px; color:var(--ink); }
.shell-find { display:flex; align-items:center; justify-content:space-between; gap:8px; margin:0 12px 10px; width:calc(100% - 24px); border:1px solid var(--shell-edge); background:var(--fill-2); color:var(--ink-2); border-radius:10px; padding:8px 10px; font:12px var(--sans); min-height:36px; }
.shell-find .sb-word { flex:1; text-align:left; }
.shell-find kbd { font:10px var(--sans); }
.content>main { max-width:1840px; padding:24px 8px 40px; width:100%; }
.content>main>.tab { min-width:0; }
.content>main .panel,.content>main .card { min-width:0; }
.content>main .glass { background:var(--panel); backdrop-filter:none; -webkit-backdrop-filter:none; }
.content>main .glass-inset { backdrop-filter:none; -webkit-backdrop-filter:none; }
.content>main .kpi .v { overflow-wrap:anywhere; }
/* Currency values need room for the exact amount, not an abbreviated total. */
body[data-tower-department=plumbing] #td-meet-kpis { grid-template-columns:repeat(auto-fit,minmax(min(260px,100%),1fr)); }
.td-sales-report .rep-kpis { grid-template-columns:repeat(auto-fit,minmax(min(220px,100%),1fr)); }
.td-sales-report .rep-kpi .v { overflow-wrap:anywhere; }
.content>main .twrap { max-width:100%; overscroll-behavior-x:contain; }
.content>main .seg { max-width:100%; flex-wrap:wrap; }
.content>main .cov-hdr-segs { max-width:100%; flex-wrap:wrap; }
.content>main .bar .fld { min-width:0; max-width:100%; }
.content>main .bar input,.content>main .bar select { max-width:100%; }
.sb-peek { max-height:calc(100dvh - 24px); overflow:auto; border:1px solid var(--line); }
/* Preserve the existing desktop rail preference. Its controls keep accessible
   names even when their visible labels are collapsed. */
body.sb-rail .sidebar { width:var(--sb-rail); }
body.sb-rail .shell-find { margin:0 8px 10px; width:calc(100% - 16px); justify-content:center; padding:8px; }
body.sb-rail .shell-find kbd,body.sb-rail .sb-foot #adminBtn .acct-nm,body.sb-rail .sb-foot #adminBtn .acct-caret { display:none; }
body.sb-rail .sb-foot #adminBtn { justify-content:center; padding:5px; }
body.sb-rail .sb-foot #adminBtn:not(.acct) { font-size:11px; white-space:normal; }
body.sb-rail .sb-support { flex-direction:column; }
body.sb-rail .sb-support button { justify-content:center; }
body.sb-rail .sb-status { justify-content:center; }
body.sb-rail .sb-top { padding:15px 4px 10px; }
/* Shared dialogs use the native top layer, so map controls and an open drawer
   cannot cover them. Diagnostics retain their original IDs and refresh logic. */
.shell-dialog { padding:0; margin:auto; width:min(600px,calc(100vw - 32px)); max-height:calc(100vh - 32px); max-height:calc(100dvh - 32px); overflow:auto;
  color:var(--ink); background:var(--panel); border:1px solid var(--line); border-radius:22px; box-shadow:var(--shadow-lg); }
.shell-dialog::backdrop { background:var(--shell-scrim); }
.shell-dialog-head { display:flex; align-items:center; justify-content:space-between; gap:14px; padding:20px 22px 16px; border-bottom:1px solid var(--line-2); }
.shell-dialog-head h2 { font-size:21px; margin:0; }
.shell-close { flex:none; border:0; border-radius:9px; color:var(--ink-2); background:var(--fill-2); min-width:36px; min-height:36px; font:22px var(--sans); }
.shell-dialog-body { padding:20px 22px; font-size:14px; }
.shell-dialog-body p { margin:0 0 16px; color:var(--ink-2); }
.shell-dialog-body details { border-top:1px solid var(--line); padding-top:14px; margin-top:20px; }
.shell-dialog-body summary { cursor:pointer; font-weight:550; }
.shell-diagnostics { margin-top:14px; display:grid; gap:12px; }
.shell-diagnostics dt { color:var(--ink-2); font-size:12px; }
.shell-diagnostics dd { margin:3px 0 0; overflow-wrap:anywhere; font:12px/1.6 var(--mono); }
.shell-help-list { padding-left:20px; color:var(--ink-2); display:grid; gap:12px; }
.shell-command-input { display:block; width:100%; font:16px var(--sans); margin-bottom:14px; }
.shell-command-results { display:grid; gap:4px; }
.shell-command-result { border:0; border-radius:10px; display:flex; flex-direction:column; gap:3px; text-align:left; padding:11px 12px; background:transparent; color:var(--ink); font:14px var(--sans); }
.shell-command-result:hover { background:var(--accent-soft); }
.shell-command-result small { font-size:12px; color:var(--ink-2); }
.shell-command-empty { padding:18px 12px; font-size:13px; color:var(--ink-2); }
.shell-backdrop { display:none; }
.shell-skip { position:fixed; top:8px; left:50%; transform:translate(-50%,-150%); z-index:200; padding:10px 16px; border-radius:10px; background:var(--panel); color:var(--ink); }
.shell-skip:focus { transform:translate(-50%,0); }
.sidebar :focus-visible,.shell-header :focus-visible,.shell-dialog :focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
/* Form grids need a bounded scroller at desktop sizes: zoom/sidebars can leave
   less room than their fixed columns require, without reaching the legacy phone
   media query. The fields remain editable and retain their minimum widths. */
#tab-entry>.panel, #td-content .td-entry-panel { overflow-x:auto; }
@media (max-width:1279px) and (min-width:1101px) {
  :root { --sb-w:224px; --shell-gap:12px; --shell-inset:12px; }
  .sb-ws { padding:9px 8px; }
  .shell-header #hdrDate { display:none; }
}
@media (max-width:1100px) {
  :root { --shell-inset:12px; --shell-gap:0px; }
  .shell { display:block; }
  .content { width:100%; }
  .shell-nav-toggle { display:inline-flex; }
  .shell-header { top:12px; }
  .sidebar,body.sb-rail .sidebar { position:fixed; top:12px; left:12px; width:min(296px,calc(100vw - 24px)); height:calc(100vh - 24px); height:calc(100dvh - 24px); z-index:101;
    transform:translateX(calc(-100% - 24px)); visibility:hidden; pointer-events:none; transition:transform .18s ease,visibility .18s; background:var(--panel); backdrop-filter:none; -webkit-backdrop-filter:none; }
  body.shell-nav-open .sidebar { transform:none; visibility:visible; pointer-events:auto; }
  body.shell-nav-open { overflow:hidden; }
  body.shell-nav-open .shell-backdrop { display:block; position:fixed; inset:0; border:0; background:var(--shell-scrim); z-index:100; }
  body.sb-rail .sidebar .sb-word,body.sb-rail .sidebar .sb-lbl,body.sb-rail .sidebar .sb-count,body.sb-rail .sidebar .sb-sec { display:revert; }
  body.sb-rail .sidebar .sb-kids { display:block; }
  body.sb-rail .sidebar .sb-group:not(.open) .sb-kids { display:none; }
  body.sb-rail .sidebar .sb-ws { justify-content:flex-start; padding:9px 11px; gap:10px; }
  body.sb-rail .sidebar .sb-top { justify-content:flex-start; padding:19px 16px 13px; }
  body.sb-rail .sidebar .sb-nav { padding:0 10px 14px; }
  body.sb-rail .sidebar .sb-foot { padding:12px; text-align:left; }
  body.sb-rail .sidebar .sb-status { justify-content:flex-start; margin:8px; }
  body.sb-rail .sidebar .sb-support { flex-direction:row; }
  body.sb-rail .sidebar .shell-find { margin:0 12px 10px; width:calc(100% - 24px); justify-content:space-between; padding:8px 10px; }
  body.sb-rail .sidebar .shell-find kbd { display:block; }
  .sidebar #adminBtn .acct-nm,.sidebar #adminBtn .acct-caret,body.sb-rail .sidebar #adminBtn .acct-nm,body.sb-rail .sidebar #adminBtn .acct-caret { display:block; }
  body.sb-rail .sidebar #adminBtn { justify-content:flex-start; padding:9px; }
  .sb-peek { display:none!important; }
  .content>main { padding:20px 4px 32px; }
  .sidebar .td-navigation { display:block; }
  .sidebar .td-navigation .sb-tab { display:flex; width:100%; }
  .sidebar .td-navigation[hidden] { display:none; }
}
@media (max-height:650px) and (min-width:1101px) {
  .sb-top { padding:10px 12px 8px; }
  .sb-ws { min-height:36px; padding:7px 10px; }
  .sb-tab { min-height:32px; padding:6px 8px; }
  .sb-foot { padding:8px 12px; }
  .shell-find { margin-bottom:5px; }
}
/* Daily Entry keeps real labels with its original inputs, including at zoom.
   Desktop grids retain their established column alignment and local scrolling. */
#entryRows .entry-cell { display:block; min-width:0; }
#entryRows .entry-label { display:none; }
#entryRows .entry-cell :is(input,select) { width:100%; min-width:0; max-width:100%; }
@media (max-width:980px) {
  #entryRows { grid-template-columns:minmax(0,1fr); }
  #entryRows .entry-row { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; align-items:end; padding:14px 0; border-bottom:1px solid var(--line); }
  #entryRows .entry-label { display:block; font:600 11px/1.5 var(--sans); color:var(--ink-2); margin-bottom:5px; }
  #entryRows .entry-row>.rm { justify-self:end; min-width:36px; min-height:36px; }
}
@media (max-width:380px) {
  #entryRows .entry-row { grid-template-columns:minmax(0,1fr); }
  #td-content .td-entry-screen .td-entry-row { grid-template-columns:minmax(0,1fr); }
}
@media (max-width:700px) {
  :root { --shell-inset:8px; --shell-radius:18px; }
  .shell-header { top:8px; padding:10px; gap:8px; border-radius:14px; }
  .shell-header .tb-title { flex:1 1 120px; }
  .shell-header .hdr-right { gap:5px; flex-wrap:wrap; }
  .shell-header #hdrDate { display:none; }
  .shell-header .td-workspace-switch { order:3; flex:1 1 180px; min-width:0; max-width:none; }
  .shell-header .td-workspace-switch>span { display:block; font-size:11px; }
  .shell-header .td-workspace-switch select { font-size:14px; }
  .shell-header .tb-search { order:4; flex:1 1 100%; min-width:0; }
  .shell-header #covGo,.shell-header #covClear { order:5; }
  .shell-header .tb-key { display:none; }
  .shell-header .brand { font-size:12px; }
  .content>main { padding:18px 2px 28px; }
  .content>main .panel { padding:16px; }
  .content>main .bar { gap:10px; }
  .content>main .kpis { grid-template-columns:repeat(auto-fit,minmax(min(140px,100%),1fr)); }
  .content>main .bar .fld { flex:1 1 auto; }
  .content>main .bar .fld :is(input,select) { width:100%; }
  .toast { max-width:calc(100vw - 24px); right:12px; bottom:12px; }
  .shell-dialog-head,.shell-dialog-body { padding:16px; }
  .shell-dialog { border-radius:18px; }
}
/* Populated meeting rows have more columns in Plumbing (Jobs, Sales, ADL).
   Stack their figures below the identity on narrow screens instead of letting
   fixed statistic columns consume the name or spill out of the card. */
@media (max-width:620px) {
  #meetList .lb-row,body[data-tower-department] #td-meet-list .lb-row { grid-template-columns:repeat(6,minmax(0,1fr)); gap:12px 8px; padding:14px; }
  :is(#meetList,#td-meet-list) .lb-rank { display:none; }
  :is(#meetList,#td-meet-list) .lb-avatar { grid-column:1; grid-row:1; }
  :is(#meetList,#td-meet-list) .lb-main { grid-column:2/6; grid-row:1; }
  :is(#meetList,#td-meet-list) .lb-go { grid-column:6; grid-row:1; justify-self:end; }
  :is(#meetList,#td-meet-list) .lb-stat { display:block; grid-row:2; grid-column:span 2; min-width:0; text-align:left; }
  :is(#meetList,#td-meet-list) .lb-stat .v { font-size:clamp(13px,4vw,18px); overflow-wrap:anywhere; }
}
@media (max-width:420px) {
  .shell-header .hdr-right { width:100%; justify-content:flex-end; }
  .shell-header .tb-title { flex-basis:180px; }
  .shell-header .td-workspace-switch { flex-basis:100%; }
  .sidebar { top:8px; left:8px; height:calc(100dvh - 16px); width:calc(100vw - 16px); }
}
/* At extreme zoom/short windows there is no room for three fixed regions.
   Let the entire menu scroll, keeping its close control pinned and all pages
   and account actions reachable instead of squeezing the nav to zero height. */
@media (max-height:380px) {
  .sidebar { overflow-y:auto; overscroll-behavior:contain; }
  .sidebar .sb-top { position:sticky; top:0; z-index:2; background:var(--panel); }
  .sidebar .sb-nav { flex:none; overflow:visible; }
}
@media (pointer:coarse) {
  .sidebar button,.shell-header button,.shell-dialog button,.shell-dialog summary { min-height:44px; }
  .shell-dialog input,.shell-header input { font-size:16px; }
}
@media (prefers-reduced-motion:reduce) {
  .sidebar,.shell-header,.sidebar button { transition:none!important; }
}
@media (prefers-reduced-transparency:reduce) {
  .sidebar,.shell-header { background:var(--panel); backdrop-filter:none; -webkit-backdrop-filter:none; }
}
@supports not (backdrop-filter:blur(1px)) {
  .sidebar,.shell-header { background:var(--panel); }
}
@media print {
  .sidebar,.shell-header,.shell-dialog,.shell-backdrop,.shell-skip { display:none!important; }
  .shell { display:block; padding:0; }
  .content { width:100%; }
  .content>main { max-width:none; padding:0; }
}
