/* SORDER Web Portal — design system (approved shell + dashboard designs) */
:root {
    color-scheme: light;
    --brand: #042430;
    --brand-2: #0A3543;
    --brand-ink: #EAF4F6;
    --brand-dim: #8FAAB2;
    --brand-line: #12404F;
    --bg: #F2F5F6;
    --card: #FFFFFF;
    --line: #DCE4E7;
    --line-soft: #E8EEF0;
    --ink: #17272E;
    --muted: #5D7078;
    --faint: #8CA0A8;
    --accent: #0B7285;
    --accent-soft: #E0F1F4;
    --accent-ink: #085A69;
    --good: #2B8A3E;
    --good-bg: #E7F5EA;
    --warn: #D9770B;
    --warn-bg: #FCF0DD;
    --bad: #C0392B;
    --bad-bg: #FBE9E7;
    --purple: #5F5AA2;
    --purple-bg: #ECEBF7;
    --row-hover: #F4F8F9;
    --track: #EAEFF1;
    --shadow: 0 1px 3px rgba(4, 36, 48, .08);
    --shadow-lg: 0 12px 40px rgba(4, 36, 48, .18);
}

@font-face {
    font-family: "Digital7";
    src: url("../fonts/digital-7.ttf") format("truetype");
    font-display: swap;
}

* { box-sizing: border-box; }

html, body {
    margin: 0;
    height: 100%;
    background: var(--bg);
    color: var(--ink);
    font: 14px/1.45 "Segoe UI", system-ui, -apple-system, sans-serif;
}

#app { height: 100%; }

.num { font-family: Consolas, "Cascadia Mono", monospace; font-variant-numeric: tabular-nums; }

button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; }
a { color: var(--accent); text-decoration: none; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }


/* ---------- dark theme ---------- */
html[data-theme="dark"] {
    color-scheme: dark;
    --brand: #02171F;
    --brand-2: #07242F;
    --brand-ink: #DEEDF1;
    --brand-dim: #7E99A1;
    --brand-line: #0E3441;
    --bg: #0E1A1F;
    --card: #15242B;
    --line: #24363E;
    --line-soft: #1D2E35;
    --ink: #DAE6EA;
    --muted: #93A7AE;
    --faint: #6B8089;
    --accent: #3BAABF;
    --accent-soft: #123640;
    --accent-ink: #7ECFDD;
    --good: #5CBB6E;
    --good-bg: #12301B;
    --warn: #E9963B;
    --warn-bg: #3A2A10;
    --bad: #E06A5C;
    --bad-bg: #3B1913;
    --purple: #9B96D8;
    --purple-bg: #242240;
    --row-hover: #1A2C34;
    --track: #22343C;
    --shadow: 0 1px 3px rgba(0, 0, 0, .35);
    --shadow-lg: 0 12px 40px rgba(0, 0, 0, .55);
}
html[data-theme="dark"] .leaflet-tile { filter: brightness(.75) contrast(1.05); }
html[data-theme="dark"] .modal-back { background: rgba(0, 0, 0, .6); }

/* ---------- boot screen ---------- */
.boot-screen {
    height: 100%;
    display: grid;
    place-content: center;
    justify-items: center;
    gap: 14px;
    background: var(--brand);
}
.boot-logo { color: var(--brand-ink); font-size: 26px; font-weight: 700; letter-spacing: 4px; }
.boot-bar { width: 180px; height: 4px; border-radius: 2px; background: var(--brand-line); overflow: hidden; }
.boot-bar span { display: block; height: 100%; width: 40%; border-radius: 2px; background: var(--accent); animation: boot 1.2s infinite; }
@keyframes boot { 0% { margin-left: -40%; } 100% { margin-left: 100%; } }
.boot-text { color: var(--brand-dim); font-size: 12px; }

#blazor-error-ui {
    display: none;
    position: fixed;
    bottom: 0; left: 0; right: 0;
    background: var(--warn-bg);
    color: var(--warn);
    padding: 10px 16px;
    z-index: 999;
    box-shadow: var(--shadow-lg);
}
#blazor-error-ui .dismiss { float: right; cursor: pointer; }

/* ---------- app shell ---------- */
.shell { display: flex; height: 100vh; overflow: hidden; }

.sidebar {
    width: 216px;
    flex: none;
    background: var(--brand);
    color: var(--brand-ink);
    display: flex;
    flex-direction: column;
    transition: width .15s ease;
    overflow: hidden;
}
.sidebar.collapsed { width: 56px; }

.side-logo {
    padding: 15px 16px;
    font-weight: 700;
    letter-spacing: 2.5px;
    font-size: 15px;
    border-bottom: 1px solid var(--brand-line);
    display: flex;
    align-items: center;
    justify-content: space-between;
    white-space: nowrap;
}
.side-logo small { font-size: 10px; color: var(--brand-dim); letter-spacing: 0; }
.sidebar.collapsed .side-logo { justify-content: center; padding: 15px 8px; }
.sidebar.collapsed .side-logo span, .sidebar.collapsed .side-logo small { display: none; }

.side-scroll { flex: 1; overflow-y: auto; overflow-x: hidden; }

/* Everything that scrolls gets the same slim rail. Left alone, Chrome paints
   its default light scrollbar inside dark panels, which reads as a bright strip
   down the middle of the screen. */
* { scrollbar-width: thin; scrollbar-color: var(--line) transparent; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
    background: var(--line);
    border-radius: 6px;
    border: 3px solid transparent;
    background-clip: content-box;
}
::-webkit-scrollbar-thumb:hover { background: var(--faint); background-clip: content-box; }
::-webkit-scrollbar-corner { background: transparent; }

/* The sidebar is dark in both themes, so its scrollbar must be told as much —
   left to the page's colour scheme it renders as a pale rail on the navy. */
.sidebar { color-scheme: dark; }
.side-scroll { scrollbar-width: thin; scrollbar-color: var(--brand-line) transparent; }
.side-scroll::-webkit-scrollbar { width: 8px; }
.side-scroll::-webkit-scrollbar-track { background: transparent; }
.side-scroll::-webkit-scrollbar-thumb {
    background: var(--brand-line);
    border-radius: 4px;
    border: 2px solid transparent;
    background-clip: content-box;
}
.side-scroll::-webkit-scrollbar-thumb:hover { background: var(--brand-dim); background-clip: content-box; }

.side-group {
    font-size: 9px;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    color: var(--brand-dim);
    padding: 14px 16px 4px;
    white-space: nowrap;
}
.sidebar.collapsed .side-group { padding: 10px 0 2px; text-align: center; }
.sidebar.collapsed .side-group::after { content: "·"; }
.sidebar.collapsed .side-group { font-size: 0; }
.sidebar.collapsed .side-group::after { font-size: 14px; }

.side-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 14px;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--brand-dim);
    border-left: 3px solid transparent;
    white-space: nowrap;
    cursor: pointer;
}
.side-item:hover { color: var(--brand-ink); background: rgba(255, 255, 255, .04); }
.side-item.active { color: var(--brand-ink); border-left-color: var(--accent); background: rgba(255, 255, 255, .06); }
.side-item svg { width: 16px; height: 16px; flex: none; }
.sidebar.collapsed .side-item { justify-content: center; padding: 10px 0; }
.sidebar.collapsed .side-item .side-label { display: none; }

.side-sub { padding: 2px 0 6px 30px; }
.side-sub .side-subitem {
    display: block;
    padding: 5px 10px;
    font-size: 11.5px;
    color: var(--brand-dim);
    cursor: pointer;
    white-space: nowrap;
}
.side-sub .side-subitem:hover { color: var(--brand-ink); }
.side-sub .side-subitem.active { color: var(--accent-soft); font-weight: 600; }
.sidebar.collapsed .side-sub { display: none; }

.side-user {
    border-top: 1px solid var(--brand-line);
    padding: 12px 14px;
    display: flex;
    gap: 10px;
    align-items: center;
    font-size: 11.5px;
    white-space: nowrap;
}
.side-user small { display: block; color: var(--brand-dim); font-size: 10px; }
/* A scoped account lists its branches here and the rail is narrow; the full
   set stays in the tooltip. */
.side-user-info { min-width: 0; }
.side-user-info small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sidebar.collapsed .side-user { justify-content: center; padding: 12px 6px; }
.sidebar.collapsed .side-user .side-user-info { display: none; }

.avatar {
    width: 30px; height: 30px;
    border-radius: 50%;
    background: var(--accent);
    color: #fff;
    display: grid;
    place-items: center;
    font-size: 11.5px;
    font-weight: 700;
    flex: none;
}

.main { flex: 1; min-width: 0; display: flex; flex-direction: column; }

.topbar {
    background: var(--card);
    border-bottom: 1px solid var(--line);
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 16px;
    flex: none;
}
.topbar h1 { margin: 0; font-size: 15px; font-weight: 700; }
.spacer { flex: 1; }

.content { flex: 1; overflow-y: auto; padding: 14px 16px 40px; }

/* ---------- common components ---------- */
.chip {
    border: 1px solid var(--line);
    background: var(--card);
    border-radius: 5px;
    padding: 6px 12px;
    font-size: 12.5px;
    color: var(--ink);
    box-shadow: var(--shadow);
    display: inline-flex;
    align-items: center;
    gap: 7px;
}
.chip small { color: var(--faint); text-transform: uppercase; font-size: 9.5px; letter-spacing: .8px; }
.chip select, .chip input {
    border: none; background: none; outline: none; font: inherit; color: var(--ink);
}
/* Native dropdown popups follow the element's color-scheme, not the page
   CSS — pin it per theme and paint options explicitly so the list stays
   readable in dark mode. */
select { color-scheme: light; }
html[data-theme="dark"] select { color-scheme: dark; }
select option { background-color: var(--card); color: var(--ink); }

.btn {
    border: 1px solid var(--line);
    background: var(--card);
    border-radius: 5px;
    padding: 6px 12px;
    font-size: 12.5px;
    box-shadow: var(--shadow);
}
.btn:hover { background: var(--row-hover); }
.btn.primary { background: var(--accent); border-color: var(--accent); color: #fff; font-weight: 600; }
.btn.primary:hover { filter: brightness(1.06); }
.btn:disabled { opacity: .45; cursor: default; }

.live-badge { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 700; color: var(--good); }
.live-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--good); animation: pulse 1.6s infinite; }
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
@media (prefers-reduced-motion: reduce) { .live-dot { animation: none; } .boot-bar span { animation: none; } }

/* The page's own action bar rides along under the shell's top bar.

   Save and Discard are useless where they cannot be reached: an employee list
   is hundreds of rows deep and the edit that needs saving is usually near the
   bottom of it. .content is the scrolling element, so sticking to its top edge
   parks the bar directly beneath the menu bar. The negative margins let the
   background cover the full width of the content's padding, otherwise rows
   would show through the gap on either side as they pass underneath. */
.toolbar {
    position: sticky;
    top: -14px;                     /* cancels .content's top padding */
    z-index: 30;
    display: flex; gap: 8px; align-items: center; flex-wrap: wrap;
    margin: -14px -16px 14px;
    padding: 14px 16px 10px;
    background: var(--bg);
    box-shadow: 0 8px 14px -12px rgba(0, 0, 0, .55);
}
.toolbar .right { margin-left: auto; display: flex; gap: 8px; align-items: center; }
.toolbar .btn, .toolbar .chip { display: inline-flex; align-items: center; gap: 7px; height: 32px; }
.lbl-sm { color: var(--faint); text-transform: uppercase; font-size: 9.5px; letter-spacing: .8px; }
th.sortable { cursor: pointer; user-select: none; }
th.sortable:hover { color: var(--ink); }
th.sortable .sort-ind { color: var(--accent); margin-left: 3px; }
.grid-filter {
    border: 1px solid var(--line); background: var(--bg); border-radius: 5px;
    padding: 5px 10px; font: inherit; font-size: 12px; color: var(--ink);
    outline: none; min-width: 210px;
}
.grid-filter:focus { border-color: var(--accent); }

.kpi-cards { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(168px, 1fr)); margin-bottom: 14px; }
.kpi {
    background: var(--card);
    border: 1px solid var(--line-soft);
    border-radius: 8px;
    padding: 13px 15px;
    box-shadow: var(--shadow);
}
.kpi .lbl { font-size: 10px; text-transform: uppercase; letter-spacing: 1px; color: var(--muted); margin-bottom: 5px; }
.kpi .val { font-size: 23px; font-weight: 700; letter-spacing: -.3px; }
.kpi .val small { font-size: 13px; color: var(--faint); font-weight: 600; }
.kpi .sub { font-size: 11px; color: var(--muted); margin-top: 3px; }

.panel {
    background: var(--card);
    border: 1px solid var(--line-soft);
    border-radius: 8px;
    box-shadow: var(--shadow);
    margin-bottom: 14px;
    overflow: hidden;
}
.panel-h { display: flex; align-items: center; gap: 10px; padding: 11px 15px; border-bottom: 1px solid var(--line-soft); }
.panel-h h3 { margin: 0; font-size: 13px; font-weight: 700; }
.panel-h .cap { font-size: 11px; color: var(--faint); }

.tbl-wrap { overflow-x: auto; }
table.grid { width: 100%; border-collapse: collapse; font-size: 12.5px; }
table.grid th {
    padding: 9px 12px;
    text-align: left;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: .8px;
    color: var(--muted);
    border-bottom: 1px solid var(--line);
    background: var(--track);
    white-space: nowrap;
    position: sticky;
    top: 0;
}
table.grid td { padding: 9px 12px; border-bottom: 1px solid var(--line-soft); white-space: nowrap; vertical-align: middle; }
table.grid tbody tr:hover td { background: var(--row-hover); }
table.grid tr.clickable { cursor: pointer; }
td.r, th.r { text-align: right; }
td.id-col { color: var(--faint); font-size: 11px; }
td.id-col::before { content: "#"; opacity: .6; }
.strong { font-weight: 600; }
.sub-txt { font-size: 11px; color: var(--faint); }

.badge { display: inline-block; border-radius: 4px; padding: 2px 8px; font-size: 10.5px; font-weight: 700; letter-spacing: .4px; }
.b-good { background: var(--good-bg); color: var(--good); }
.b-warn { background: var(--warn-bg); color: var(--warn); }
.b-bad { background: var(--bad-bg); color: var(--bad); }
.b-purple { background: var(--purple-bg); color: var(--purple); }
.b-accent { background: var(--accent-soft); color: var(--accent-ink); }
.b-muted { background: var(--track); color: var(--muted); }

.bar { height: 6px; border-radius: 3px; background: var(--track); min-width: 90px; position: relative; overflow: hidden; }
.bar i { position: absolute; inset: 0 auto 0 0; border-radius: 3px; background: var(--accent); min-width: 0; }
/* sub-2% fills rendered as a 1px blob — hide them, the number carries it */
.bar i[style*="width:0%"], .bar i[style*="width:1%"] { display: none; }
.bar i.g { background: var(--good); }
.bar i.w { background: var(--warn); }
.bar i.b { background: var(--bad); }
.pct { display: inline-flex; align-items: center; gap: 8px; margin-left: 10px; }
.pct b { min-width: 50px; text-align: right; font-weight: 600; }

.gauge {
    --p: 0;
    --gc: var(--accent);
    width: 118px; height: 118px;
    border-radius: 50%;
    background: conic-gradient(var(--gc) calc(var(--p) * 1%), var(--track) 0);
    display: grid; place-items: center;
    margin: auto;
}
.gauge > div {
    width: 88px; height: 88px;
    border-radius: 50%;
    background: var(--card);
    display: grid; place-items: center;
    text-align: center;
}
.gauge b { font-size: 21px; display: block; }
.gauge span { font-size: 9.5px; text-transform: uppercase; letter-spacing: .7px; color: var(--muted); }

.stack { display: flex; height: 14px; border-radius: 4px; overflow: hidden; min-width: 120px; background: var(--track); }
.stack i { display: block; }
.legend { display: flex; gap: 16px; font-size: 11px; color: var(--muted); padding: 8px 15px; flex-wrap: wrap; }
.legend i { display: inline-block; width: 9px; height: 9px; border-radius: 2px; margin-right: 5px; }

/* Only the wrapper cell is flush — nested grids keep their own padding. */
.detail-row > td { background: var(--row-hover); padding: 0 !important; }
.detail-inner {
    padding: 10px 16px 14px 16px;
    margin-left: 26px;
    border-left: 3px solid var(--accent);
    background: color-mix(in srgb, var(--accent) 4%, var(--card));
}
.detail-inner table.grid th { background: color-mix(in srgb, var(--accent) 8%, var(--track)); }
.caret { color: var(--faint); display: inline-block; width: 14px; transition: transform .12s; }
.caret.open { transform: rotate(90deg); }
tr.dim td { color: var(--faint); }

/* full-screen load shield */
.load-overlay {
    position: fixed; inset: 0; z-index: 80;
    background: color-mix(in srgb, var(--bg) 55%, transparent);
    display: grid; place-items: center; cursor: progress;
}
.load-card {
    background: var(--card); border: 1px solid var(--line); border-radius: 10px;
    box-shadow: var(--shadow-lg); padding: 22px 30px; text-align: center;
    color: var(--muted); font-size: 13px;
    /* Whatever the message, the card stays a card: long text wraps inside it
       rather than stretching it past the window. */
    max-width: min(560px, calc(100vw - 48px));
    max-height: calc(100vh - 96px);
    overflow: auto;
    overflow-wrap: anywhere;
}
.cell-chip { min-width: 52px; display: inline-block; text-align: center; }
/* colored percent next to covered / productive counts (design C) */
.pcttxt { font-weight: 700; font-size: 11px; margin-left: 5px; }
.pcttxt.g { color: var(--good); }
.pcttxt.w { color: var(--warn); }
.pcttxt.b { color: var(--bad); }

/* location gradient cell (Live Orders) */
:root, html[data-theme="dark"] {
    --good-mid: color-mix(in srgb, var(--good) 38%, var(--good-bg));
    --warn-mid: color-mix(in srgb, var(--warn) 42%, var(--warn-bg));
    --bad-mid:  color-mix(in srgb, var(--bad) 42%, var(--bad-bg));
}
.grad-loc {
    position: relative; display: block; width: 170px; height: 20px;
    border-radius: 5px; overflow: hidden; border: 1px solid var(--line);
}
.grad-loc-text {
    position: absolute; inset: 0; display: grid; place-items: center;
    font-size: 11px; font-weight: 700; color: var(--ink);
}

/* compact density (Live Orders toggle) */
.density-compact table.grid td { padding: 4px 10px; font-size: 11.5px; }
.density-compact table.grid th { padding: 6px 10px; font-size: 9.5px; }
.density-compact .badge { padding: 1px 6px; font-size: 10px; }
.density-compact .loc-chip { padding: 1px 5px; font-size: 10px; min-width: 26px; }
.density-compact .grad-loc { width: 150px; height: 22px; }
.density-compact .grad-loc-text { font-size: 10px; }
.density-compact .att-badge { min-width: 70px; padding: 4px 6px; }
.density-compact .kpi { padding: 9px 12px; }
.density-compact .kpi .val { font-size: 19px; }
.density-compact .bar { min-width: 64px; }
.density-compact .icon-btn { font-size: 11.5px; padding: 1px 4px; }
tr.dim .badge, tr.dim .loc-chip, tr.dim .bar, tr.dim .strong { opacity: .45; }
tr.dim .strong { font-weight: 400; }

.empty-state { padding: 40px; text-align: center; color: var(--faint); font-size: 13px; }
.error-strip {
    background: var(--bad-bg); color: var(--bad);
    border-radius: 6px; padding: 9px 13px; font-size: 12.5px; margin-bottom: 12px;
}
.loading-strip { padding: 30px; text-align: center; color: var(--muted); }
.spin {
    width: 22px; height: 22px; margin: 0 auto 8px;
    border: 3px solid var(--track); border-top-color: var(--accent);
    border-radius: 50%;
    animation: spin .8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------- login ---------- */
.login-stage {
    min-height: 100vh;
    display: grid;
    place-items: center;
    padding: 30px 16px;
    background:
        radial-gradient(900px 500px at 15% -10%, var(--brand-2) 0%, transparent 60%),
        radial-gradient(700px 450px at 110% 110%, var(--brand-2) 0%, transparent 55%),
        var(--brand);
}
.login-card {
    display: grid;
    grid-template-columns: 340px 360px;
    background: var(--card);
    border-radius: 12px;
    overflow: hidden;
    box-shadow: var(--shadow-lg);
    max-width: 100%;
}
@media (max-width: 760px) {
    .login-card { grid-template-columns: 1fr; }
    .login-brand { display: none; }
}
.login-brand {
    background: linear-gradient(160deg, var(--brand) 0%, var(--brand-2) 100%);
    color: var(--brand-ink);
    padding: 34px 30px;
    display: flex;
    flex-direction: column;
}
.lb-logo { font-size: 24px; font-weight: 700; letter-spacing: 3px; }
.lb-tag {
    font-size: 11px; letter-spacing: 1.6px; text-transform: uppercase;
    color: var(--accent-ink); background: var(--accent-soft);
    border-radius: 3px; padding: 2px 8px; align-self: flex-start; margin-top: 8px;
}
.lb-copy { margin-top: auto; font-size: 12.5px; color: var(--brand-dim); line-height: 1.7; }
.login-form { padding: 34px 32px; }
.login-form h2 { margin: 0 0 2px; font-size: 19px; }
.login-form p { margin: 0 0 22px; font-size: 12.5px; color: var(--muted); }
.field { margin-bottom: 14px; }
.field label {
    display: block; font-size: 10.5px; text-transform: uppercase; letter-spacing: .9px;
    color: var(--muted); margin-bottom: 5px; font-weight: 600;
}
.field .inp {
    display: flex; align-items: center; gap: 9px;
    border: 1px solid var(--line); border-radius: 6px;
    padding: 9px 12px; background: var(--bg);
}
.field .inp:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.field input, .field select { border: none; background: none; outline: none; flex: 1; font: inherit; color: var(--ink); min-width: 0; }
.btn-login {
    width: 100%;
    background: var(--accent); color: #fff;
    border-radius: 6px; padding: 11px;
    font-size: 14px; font-weight: 700; letter-spacing: .3px;
}
.btn-login:hover { filter: brightness(1.06); }
.btn-login:disabled { opacity: .6; }
.login-foot { margin-top: 20px; font-size: 11px; color: var(--faint); text-align: center; }
.lb-credit {
    margin-top: 16px; padding-top: 13px;
    border-top: 1px solid var(--brand-line);
    font-size: 11px; line-height: 1.7; letter-spacing: .2px;
    color: var(--brand-dim);
}
.lb-credit b { color: var(--brand-ink); font-weight: 600; }

.login-err {
    display: flex; gap: 8px; align-items: flex-start;
    background: var(--bad-bg); color: var(--bad);
    border-radius: 6px; padding: 9px 12px; font-size: 12px; margin-bottom: 14px;
}


/* ---------- responsive: tablets and phones ----------
   The shell is a fixed sidebar + scrolling content on the desktop. Below
   1000px the sidebar becomes an off-canvas drawer, toolbars stack, and every
   grid keeps its own horizontal scroll so wide reports stay usable. */

.side-backdrop { display: none; }

@media (max-width: 1000px) {
    .shell { position: relative; }

    .sidebar {
        position: fixed;
        top: 0; bottom: 0; left: 0;
        z-index: 70;
        width: 232px;
        transform: translateX(-100%);
        transition: transform .18s ease;
        box-shadow: var(--shadow-lg);
    }
    /* On phones the ☰ button opens the drawer instead of narrowing it. */
    .sidebar.mobile-open { transform: translateX(0); }
    .sidebar.collapsed { width: 232px; }
    .sidebar.collapsed .side-label,
    .sidebar.collapsed .side-user-info { display: block; }
    .sidebar.collapsed .side-item { justify-content: flex-start; padding: 8px 14px; }
    .sidebar.collapsed .side-group { font-size: 9px; padding: 14px 16px 4px; text-align: left; }
    .sidebar.collapsed .side-group::after { content: none; }
    .sidebar.collapsed .side-logo { justify-content: space-between; padding: 15px 16px; }
    .sidebar.collapsed .side-logo span, .sidebar.collapsed .side-logo small { display: inline; }

    .side-backdrop {
        display: block;
        position: fixed; inset: 0;
        background: rgba(4, 36, 48, .45);
        z-index: 69;
    }

    .topbar { flex-wrap: wrap; padding: 8px 12px; gap: 8px; }
    .topbar .chip, .topbar .btn { height: 32px; }

    .content { padding: 12px 12px 40px; }

    .toolbar { position: static; margin: 0 0 14px; padding: 0; box-shadow: none; }
    .toolbar .right { margin-left: 0; width: 100%; flex-wrap: wrap; }
    .toolbar .chip, .toolbar .btn, .toolbar .grid-filter { flex: 1 1 auto; min-width: 0; }
    .toolbar .chip select, .toolbar .chip input { min-width: 0; width: 100%; }

    .kpi-cards { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 8px; }
    .kpi .val { font-size: 19px; }

    .panel-h { flex-wrap: wrap; gap: 4px 10px; }

    /* Detail grids indent less so nested levels still fit a phone screen. */
    .detail-inner { margin-left: 10px; padding: 8px 10px 10px 10px; }

    .modal-card, .map-card { width: 96vw !important; max-height: 88vh; overflow-y: auto; }
    .map-body { height: min(60vh, 420px); }
    .map-body .map-list { display: none; }

    .branch-pop, .branch-pop.align-right { left: 0; right: auto; width: min(300px, calc(100vw - 24px)); }
    .bs-pop { width: min(300px, calc(100vw - 24px)); }
    .bs-list, .branch-list { max-height: 40vh; }
}

@media (max-width: 620px) {
    .content { padding: 10px 10px 36px; }
    .topbar .btn { padding: 6px 9px; }
    /* Keep the essential controls; drop decorative labels. */
    .lbl-sm { display: none; }
    .kpi-cards { grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); }
    .kpi { padding: 9px 11px; }
    .kpi .val { font-size: 17px; }
    .kpi .sub { font-size: 10px; }
    .panel-h h3 { font-size: 12.5px; }
    .legend { flex-wrap: wrap; gap: 6px 12px; }
    table.grid { font-size: 11.5px; }
    .toolbar .right .btn { flex: 1 1 45%; justify-content: center; }
}

/* Touch input: bigger hit areas for the in-cell editors. The compact-density
   rules are more specific, so each selector is repeated under it. */
@media (hover: none) and (pointer: coarse) {
    .icon-btn, .density-compact .icon-btn { padding: 6px 8px; font-size: 15px; }
    .cell-check, .density-compact .cell-check { width: 18px; height: 18px; }
    .caret, .density-compact .caret { width: 20px; font-size: 14px; }
    table.grid td, .density-compact table.grid td { padding-top: 8px; padding-bottom: 8px; }
    .cell-select, .cell-text, .cell-num, .cell-date { min-height: 30px; }
}

/* geo-verification map pins */
.geo-pin-file {
    width: 20px; height: 20px; border-radius: 50%;
    background: #185FA5; border: 3px solid #fff; box-shadow: 0 0 0 2px #185FA5;
}
.geo-pin-order, .geo-pin-delivery {
    border-radius: 50%; color: #fff;
    display: grid; place-items: center;
    font: 700 11px/1 "Segoe UI", sans-serif;
    border: 2px solid #fff; box-shadow: 0 1px 4px rgba(0,0,0,.35);
}
.geo-pin-order { background: #C0392B; }
/* The delivery half of the evidence, in the in-transit purple. */
.geo-pin-delivery { background: #5F5AA2; }
.badge.b-purple { background: var(--purple-bg); color: var(--purple); border: 1px solid var(--purple); }

/* ---------- stacking order ----------
   Leaflet paints its panes at z-index 400-700 and its controls at 800, which
   sat above the shell chrome. Maps are pinned to their own stacking context,
   and the drawer, backdrop and dialogs are raised clear of them. */
.leaflet-container { z-index: 0; }
.geo-map, .map-body, #customer-map, #order-map, #coverage-map, #pair-map { position: relative; z-index: 0; }
body .modal-back { z-index: 1000; }

@media (max-width: 1000px) {
    .sidebar { z-index: 1200; }
    .side-backdrop { z-index: 1190; }
}


/* ---- fitted grids: columns share the width instead of overflowing ---- */
table.grid.fit-grid { table-layout: fixed; width: 100%; }
table.grid.fit-grid th, table.grid.fit-grid td {
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
table.grid.fit-grid th { position: relative; }
/* Headers wrap onto a second line rather than truncating: a column narrow
   enough for its data is often too narrow for its label. */
table.grid.fit-grid th { white-space: normal; line-height: 1.3; vertical-align: bottom; }
/* Tighter cells buy the width that keeps a wide report inside the panel. */
table.grid.fit-grid th, table.grid.fit-grid td { padding-left: 8px; padding-right: 8px; }
/* A floor for the squeeze: past it the columns are unreadable slivers, so the
   grid scrolls instead of pretending to fit. */
table.grid.fit-grid { min-width: 1180px; }
table.grid.fit-grid.mark-grid { min-width: 0; }

.col-resizer {
    position: absolute; top: 0; right: -3px; width: 7px; height: 100%;
    cursor: col-resize; user-select: none; touch-action: none; z-index: 2;
}
.col-resizer::after {
    content: ""; position: absolute; top: 20%; right: 3px; width: 1px; height: 60%;
    background: var(--line); opacity: 0; transition: opacity .12s;
}
table.grid.fit-grid th:hover .col-resizer::after { opacity: 1; }
.col-resizer:hover::after { opacity: 1; background: var(--accent); width: 2px; }
/* While dragging, nothing else on the page should react to the pointer. */
body.col-resizing { cursor: col-resize; user-select: none; }
body.col-resizing table.grid tbody tr:hover td { background: transparent; }


.warn-strip {
    background: var(--warn-bg); color: var(--warn);
    border-radius: 6px; padding: 9px 13px; font-size: 12.5px; margin-bottom: 12px;
}

/* ---- printing: the page content only, on white ---- */
@media print {
    .sidebar, .topbar, .no-print, .side-drawer-backdrop { display: none !important; }
    .shell { display: block; height: auto; overflow: visible; }
    .content { overflow: visible; padding: 0; }
    .panel { border: none; box-shadow: none; background: #fff; }
    body, .content, .panel { background: #fff !important; color: #000 !important; }
    @page { size: A4 portrait; margin: 10mm; }
}

/* ---- paginated print: pages this app lays out itself, so each carries a
   "Page i of N" footer that CSS alone cannot produce ---- */
#print-root { display: none; }
.print-bench {
    position: absolute; left: -10000px; top: 0; visibility: hidden;
    background: #fff; color: #000;
}
.print-page {
    /* 297mm − 20mm of margin. */
    height: 277mm; width: 190mm; display: flex; flex-direction: column;
    background: #fff; color: #000; overflow: hidden;
}
.print-page + .print-page { break-before: page; }
.print-page-body { flex: 1; overflow: hidden; }
.print-page-foot {
    display: flex; justify-content: space-between; gap: 12px; align-items: baseline;
    border-top: 1px solid #999; padding-top: 4px; margin-top: 6px;
    font-size: 8.5pt; color: #444;
}

@media print {
    body.printing > .shell { display: none !important; }
    body.printing #print-root { display: block; }
    body.printing #print-root, body.printing .print-page { background: #fff; color: #000; }
    /* The measuring bench must never reach paper. */
    .print-bench { display: none !important; }
}


/* Print progress: a long report spends real time laying out and then inside the
   printer driver, and a button that looks dead invites a second click. */
.print-progress {
    position: fixed; inset: 0; z-index: 2000; display: flex; align-items: center; justify-content: center;
    background: rgba(0, 0, 0, .45); backdrop-filter: blur(2px);
}
.print-progress-card {
    background: var(--card); border: 1px solid var(--line); border-radius: 12px;
    padding: 22px 26px; max-width: 380px; text-align: center;
    box-shadow: 0 24px 60px rgba(0, 0, 0, .35);
}
.print-progress-text { font-size: 13.5px; font-weight: 600; margin-top: 6px; }
.print-progress-detail { font-size: 11.5px; color: var(--muted); margin-top: 6px; line-height: 1.45; }
@media print { .print-progress { display: none !important; } }

/* ---- branch pickers (BranchSelect / BranchPicker) -------------------------
   Clients range from two branches to several hundred, so both controls search,
   cap their list height, and close on an explicit Done. */
.bs-chip { position: relative; }
.bs-button {
    display: inline-flex; align-items: center; gap: 6px; max-width: 260px;
    background: none; border: none; color: inherit; font: inherit; cursor: pointer; padding: 0;
}
.bs-button:disabled { opacity: .5; cursor: default; }
.bs-value { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bs-caret { color: var(--muted); font-size: 10px; }
.bs-pop {
    position: absolute; top: calc(100% + 6px); left: 0; z-index: 1300; width: 300px;
    background: var(--card); border: 1px solid var(--line); border-radius: 10px;
    box-shadow: var(--shadow-lg); overflow: hidden;
}
.bs-head { display: flex; align-items: center; gap: 6px; padding: 8px; border-bottom: 1px solid var(--line-soft); }
.bs-search {
    width: 100%; background: var(--bg); color: var(--ink); font: inherit; font-size: 12px;
    border: 1px solid var(--line); border-radius: 6px; padding: 5px 8px;
}
.bs-search:focus { outline: none; border-color: var(--accent); }
.bs-close {
    background: none; border: none; color: var(--muted); cursor: pointer; font-size: 13px;
    padding: 2px 5px; border-radius: 4px; line-height: 1;
}
.bs-close:hover { background: var(--row-hover); color: var(--ink); }
.bs-list, .branch-list { max-height: min(320px, 46vh); overflow-y: auto; padding: 4px 0; }
.bs-item { padding: 6px 10px; font-size: 12.5px; cursor: pointer; }
.bs-item:hover { background: var(--row-hover); }
.bs-item.on { color: var(--accent-ink); font-weight: 600; background: var(--row-hover); }
.bs-empty { padding: 10px; font-size: 12px; color: var(--muted); text-align: center; }
.bs-count { font-size: 11px; color: var(--muted); margin-right: auto; }
.bs-foot { display: flex; align-items: center; gap: 6px; padding: 6px 8px; border-top: 1px solid var(--line-soft); }
.bs-backdrop { position: fixed; inset: 0; z-index: 1200; }
/* .panel hides its overflow so inner grids keep the rounded corners — but a
   panel holding a picker must let the popover out, or the list is clipped at
   the panel edge. */
.panel:has(.bs-chip), .panel:has(.branch-multi) { overflow: visible; }
/* The organisation panels put controls in their header, so the header needs a
   spacer and a little more breathing room than a plain title bar. */
.panel-b { padding: 12px 16px 16px; }
/* Lists that run edge to edge say so, and pad their own rows instead. */
.panel-b.flush { padding: 0 0 6px; }
.panel-h .spacer { flex: 1; }
.panel-h .btn.mini { padding: 4px 9px; font-size: 11.5px; }
.btn.mini.primary { background: var(--accent); color: #fff; border-color: var(--accent); }

/* the multi-branch popover, shared by Live Orders / Delivery / Team Summary */
.branch-multi { position: relative; }
.branch-pop {
    position: absolute; top: 38px; z-index: 1300; width: 300px;
    background: var(--card); border: 1px solid var(--line); border-radius: 10px;
    box-shadow: var(--shadow-lg); padding: 0 0 0 0;
}
.branch-pop.align-right { right: 0; left: auto; }
.branch-pop.align-left { left: 0; right: auto; }
.branch-pop .branch-opt { margin: 0 6px; }
.branch-opt {
    display: flex; gap: 8px; align-items: center; padding: 5px 8px; font-size: 12.5px;
    cursor: pointer; border-radius: 5px; user-select: none;
}
.branch-opt:hover { background: var(--row-hover); }
.branch-opt .check {
    width: 16px; height: 16px; flex: none; border-radius: 4px;
    border: 1.5px solid var(--line); background: var(--bg);
    display: grid; place-items: center; font-size: 11px; color: #fff;
}
.branch-opt .check.on { background: var(--accent); border-color: var(--accent); }
.branch-pop-foot {
    display: flex; gap: 6px; align-items: center; justify-content: flex-end;
    border-top: 1px solid var(--line-soft); padding: 8px;
}

/* ---- FilterGrid: the portal's data grid ----------------------------------
   A filter under every heading, sticky while the body scrolls, values counted
   from the data itself. Sized to put many columns on screen without the reader
   losing the row. */
.fg { display: flex; flex-direction: column; min-width: 0; }

.fg-bar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 9px 12px;
    border-bottom: 1px solid var(--line-soft); }
.fg-bar .fg-spacer { flex: 1; }
.fg-count { display: inline-flex; align-items: baseline; gap: 6px; font-size: 12.5px; }
.fg-count b { font-size: 14px; }
.fg-chip { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--line);
    background: var(--card); border-radius: 7px; padding: 5px 10px; font-size: 12px; color: var(--muted);
    white-space: nowrap; }
.fg-chip:hover { color: var(--ink); }
.fg-chip.on { background: var(--accent); border-color: var(--accent); color: #fff; font-weight: 600; }
.fg-group { display: inline-flex; align-items: center; gap: 7px; border: 1px solid var(--line);
    background: var(--card); border-radius: 7px; padding: 3px 8px 3px 10px; font-size: 12px; }
.fg-group small { font-size: 9.5px; letter-spacing: 1.2px; text-transform: uppercase; color: var(--faint); }
.fg-group select { border: none; background: none; color: var(--ink); font: inherit; font-size: 12px; }
.fg-cols { position: relative; }

.fg-wrap { overflow: auto; max-height: calc(100vh - 330px); }
.fg-table { width: 100%; border-collapse: separate; border-spacing: 0; table-layout: fixed; font-size: 12.5px; }

.fg-table thead th { position: sticky; background: var(--bg); z-index: 2; }
.fg-table thead tr.fg-head th { top: 0; text-align: left; padding: 8px 10px; font-size: 10px;
    letter-spacing: 1px; text-transform: uppercase; color: var(--faint); white-space: nowrap;
    border-bottom: 1px solid var(--line); }
.fg-table thead tr.fg-filters th { top: 33px; padding: 5px 6px; border-bottom: 1px solid var(--line); }
.fg-sortable { cursor: pointer; user-select: none; }
.fg-sortable:hover { color: var(--ink); }
.fg-sort { color: var(--accent); margin-left: 3px; }

.fg-input { width: 100%; min-width: 0; box-sizing: border-box; border: 1px solid var(--line);
    background: var(--card); color: var(--ink); border-radius: 5px; padding: 3px 7px;
    font: inherit; font-size: 11px; }
.fg-input:focus { outline: none; border-color: var(--accent); }
.fg-input::placeholder { color: var(--faint); }
.fg-range { display: flex; gap: 4px; }

.fg-choice { position: relative; display: block; }
.fg-choice-btn { width: 100%; display: inline-flex; align-items: center; gap: 6px;
    border: 1px solid var(--line); background: var(--card); color: var(--muted);
    border-radius: 5px; padding: 3px 7px; font: inherit; font-size: 11px; cursor: pointer; }
.fg-choice-btn .fg-caret-icon { margin-left: auto; font-size: 9px; }
.fg-choice-btn.on { border-color: color-mix(in srgb, var(--accent) 50%, transparent);
    color: var(--accent-ink); background: var(--accent-soft); font-weight: 600; }

.fg-pop { position: absolute; top: calc(100% + 5px); left: 0; z-index: 1300; width: 260px;
    background: var(--card); border: 1px solid var(--line); border-radius: 10px;
    box-shadow: var(--shadow-lg); overflow: hidden; }
.fg-pop-head { display: flex; align-items: center; gap: 6px; padding: 7px 8px;
    border-bottom: 1px solid var(--line-soft); }
.fg-pop-head .fg-sp { flex: 1; }
.fg-pop-actions { display: flex; align-items: center; gap: 6px; padding: 6px 8px;
    border-bottom: 1px solid var(--line-soft); }
.fg-pop-actions .fg-sp { flex: 1; }
.fg-pop-body { max-height: 260px; overflow-y: auto; padding: 4px 0; }
.fg-search { width: 100%; border: 1px solid var(--line); background: var(--bg); color: var(--ink);
    border-radius: 6px; padding: 4px 8px; font: inherit; font-size: 12px; }
.fg-search:focus { outline: none; border-color: var(--accent); }
.fg-x { background: none; border: none; color: var(--muted); cursor: pointer; font-size: 12px;
    padding: 2px 5px; border-radius: 4px; line-height: 1; }
.fg-x:hover { background: var(--row-hover); color: var(--ink); }
.fg-opt { display: flex; align-items: center; gap: 8px; padding: 5px 10px; font-size: 12px; cursor: pointer; }
.fg-opt:hover { background: var(--row-hover); }
.fg-opt.on { color: var(--accent-ink); font-weight: 600; }
.fg-opt-text { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fg-opt-n { color: var(--faint); font-size: 11px; }
.fg-empty { padding: 10px; font-size: 12px; color: var(--muted); text-align: center; }
.fg-backdrop { position: fixed; inset: 0; z-index: 1200; }

.fg-table tbody td { padding: 7px 10px; border-bottom: 1px solid var(--line-soft);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fg-wrap.comfort tbody td { padding: 11px 10px; }
.fg-table tbody tr:hover td { background: var(--row-hover); }
.fg-clickable { cursor: pointer; }
.fg-table td.r, .fg-table th.r { text-align: right; }
.fg-table td.c, .fg-table th.c { text-align: center; }
.fg-caret { width: 26px; text-align: center; color: var(--faint); }
.fg-caret-icon { display: inline-block; font-size: 9px; transition: transform .12s; }
.fg-caret-icon.open { transform: rotate(90deg); }
.fg-detail td { background: var(--bg); white-space: normal; padding: 0; }
.fg-none { text-align: center; color: var(--muted); padding: 18px 10px; }

.fg-group-row td { background: var(--bg); border-bottom: 1px solid var(--line);
    font-size: 10px; letter-spacing: 1.4px; color: var(--faint); cursor: pointer; }
.fg-group-row b { color: var(--ink); letter-spacing: 1.4px; margin-left: 7px; }
.fg-group-n { margin-left: 9px; color: var(--faint); letter-spacing: 0; }