/* ============ ADMIN & DISPATCH PORTAL ============
   Loaded after app.css: reuses its tokens, .btn, .badge, .fld, .seg, .chip, .tally, .plate, .status, map styles. */

body.adm-body { background: var(--soft); overflow: hidden; }
.adm { display: grid; grid-template-columns: 248px minmax(0, 1fr); height: 100vh; }

/* ---------- sidebar ---------- */
.side { background: #fff; border-right: 1px solid var(--line); display: flex; flex-direction: column; padding: 22px 16px 18px; min-height: 0; }
.side .logo { padding: 0 8px; margin-bottom: 6px; }
.side .logo-word { font-size: 22px; }
.side-tag { padding: 0 10px; font-size: 12px; color: var(--muted); margin-bottom: 26px; }
.snav { display: flex; flex-direction: column; gap: 3px; }
.snav-l { font-size: 11.5px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: #9a9a96; padding: 0 12px; margin: 18px 0 8px; }
.snav a { display: flex; align-items: center; gap: 12px; height: 44px; padding: 0 12px; border-radius: 10px; font-weight: 500; font-size: 15px; color: var(--ink-2); transition: background .2s, color .2s; }
.snav a .ic { width: 19px; height: 19px; color: var(--muted); transition: color .2s; }
.snav a:hover { background: var(--soft); }
.snav a[aria-current="page"] { background: var(--butter); color: var(--ink); font-weight: 600; }
.snav a[aria-current="page"] .ic { color: var(--ink); }
.snav .n { margin-left: auto; min-width: 22px; height: 22px; padding: 0 7px; border-radius: 99px; background: var(--b-salmon); color: var(--b-salmon-t); font-size: 12px; font-weight: 700; display: grid; place-items: center; font-variant-numeric: tabular-nums; }
.snav .n.calm { background: var(--soft-2); color: var(--muted); }
.snav a[aria-current="page"] .n.calm { background: rgba(255, 255, 255, .6); }
.side .side-foot { margin-top: auto; display: grid; align-items: stretch; gap: 8px; padding: 0; border-top: 0; background: none; }
.side-site { display: grid; grid-template-columns: 1fr auto; align-items: start; gap: 4px 10px; padding: 14px; border-radius: 14px; background: var(--butter-bg); border: 1px solid #F0EAC8; font-size: 13.5px; line-height: 1.35; }
.side-site b { display: block; font-weight: 600; font-size: 14px; }
.side-site small { color: var(--muted); }
.side-site > .ic:first-child { display: none; }
.side-reset { font-size: 12.5px; color: var(--muted); text-align: left; padding: 4px 12px; }
.side-reset:hover { color: var(--ink); text-decoration: underline; }

/* ---------- topbar ---------- */
.main { display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.top { display: flex; align-items: center; gap: 14px; height: 76px; padding: 0 28px; background: #fff; border-bottom: 1px solid var(--line); flex: none; position: relative; z-index: 20; }
.top-burger { display: none; }
.top h1 { font-size: 22px; font-weight: 600; letter-spacing: -.02em; line-height: 1.15; }
.top h1 { min-width: 0; }
.top h1 small { display: block; font-size: 13px; color: var(--muted); font-weight: 400; letter-spacing: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gsearch { position: relative; margin-left: auto; width: min(340px, 30vw); }
.gsearch input { width: 100%; height: 42px; border: 1px solid var(--line-2); border-radius: 10px; padding: 0 14px 0 40px; font-size: 14.5px; background: var(--soft); transition: border-color .2s, background .2s; }
.gsearch input:focus { outline: none; border-color: var(--ink); background: #fff; }
.gsearch > .ic { position: absolute; left: 13px; top: 12px; color: var(--muted); }
.gsearch kbd { position: absolute; right: 10px; top: 10px; font: 600 11px var(--f); color: var(--muted); border: 1px solid var(--line-2); border-radius: 5px; padding: 2px 6px; background: #fff; }
.live-t { display: inline-flex; align-items: center; gap: 8px; height: 42px; padding: 0 14px; border-radius: 10px; border: 1px solid var(--line-2); font-size: 14px; font-weight: 600; font-variant-numeric: tabular-nums; }
.live-t .ml-dot { flex: none; }
.live-t[aria-pressed="false"] .ml-dot { background: #bbb; animation: none; }
.live-t[aria-pressed="false"] { color: var(--muted); }
.top .icon-btn { position: relative; width: 42px; height: 42px; }
.dot-n { position: absolute; top: 7px; right: 8px; width: 8px; height: 8px; border-radius: 50%; background: var(--err); box-shadow: 0 0 0 2px #fff; }
.me { display: flex; align-items: center; gap: 10px; padding: 4px 10px 4px 4px; border-radius: 12px; border: 1px solid transparent; text-align: left; }
.me:hover { border-color: var(--line-2); }
.me .ml-av { width: 38px; height: 38px; }
.me b { display: block; font-size: 14px; font-weight: 600; line-height: 1.2; white-space: nowrap; }
.me small { font-size: 12.5px; color: var(--muted); }

/* popovers */
.menu { position: absolute; top: calc(100% + 8px); right: 0; z-index: 60; min-width: 260px; background: #fff; border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--sh-3); padding: 8px; animation: pop .22s var(--ease) both; }
.menu-h { font-size: 12px; font-weight: 600; color: var(--muted); padding: 8px 10px 6px; }
.menu button, .menu a { width: 100%; display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 9px; font-size: 14px; text-align: left; }
.menu button:hover, .menu a:hover { background: var(--butter-bg); }
.menu button[aria-checked="true"] { background: var(--butter); font-weight: 600; }
.menu button small { margin-left: auto; color: var(--muted); font-size: 12px; }
.menu hr { border: 0; border-top: 1px solid var(--line); margin: 6px 0; }
.notif { width: 360px; max-height: 440px; overflow: auto; }
.notif li { list-style: none; display: grid; grid-template-columns: 30px 1fr; gap: 10px; padding: 10px; border-radius: 10px; font-size: 13.5px; line-height: 1.4; cursor: pointer; }
.notif li:hover { background: var(--soft); }
.notif ul { margin: 0; padding: 0; }
.notif time { display: block; color: var(--muted); font-size: 12px; }
.ev-ic { width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; background: var(--soft-2); }
.ev-ic .ic { width: 15px; height: 15px; }
.ev-ic.new { background: var(--b-yellow); color: var(--b-yellow-t); }
.ev-ic.done { background: var(--b-green); color: var(--b-green-t); }
.ev-ic.warn { background: var(--b-salmon); color: var(--b-salmon-t); }
.sres { left: 0; right: 0; width: auto; }
.sres .sr-g { font-size: 11.5px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: #9a9a96; padding: 8px 10px 4px; }
.sres button span { color: var(--muted); font-size: 12.5px; margin-left: auto; }
.sres .none { padding: 14px 10px; color: var(--muted); font-size: 14px; }

/* ---------- content ---------- */
.view { flex: 1; overflow: auto; padding: 26px 28px 60px; }
.page { display: none; }
.page.on { display: block; animation: up8 .4s var(--ease) both; }
@keyframes up8 { from { opacity: 0; transform: translateY(8px); } }
.ph { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 22px; flex-wrap: wrap; }
.ph h2 { font-size: 30px; letter-spacing: -.03em; line-height: 1.1; }
.ph h2 em { font-style: normal; color: var(--gold); }
.ph p { color: var(--muted); margin-top: 6px; font-size: 15px; }
.ph-act { display: flex; gap: 10px; flex-wrap: wrap; }

.card { background: #fff; border: 1px solid var(--line); border-radius: 18px; box-shadow: var(--sh-1); min-width: 0; }
.card-h { display: flex; align-items: center; gap: 12px; padding: 18px 20px 14px; }
.card-h h3 { font-size: 17px; font-weight: 600; letter-spacing: -.01em; }
.card-h p { font-size: 13px; color: var(--muted); }
.card-h .r { margin-left: auto; display: flex; gap: 8px; align-items: center; }
.card-b { padding: 0 20px 20px; }
.link { font-size: 13.5px; font-weight: 600; display: inline-flex; align-items: center; gap: 4px; }
.link:hover { color: var(--gold-dk); }
.link .ic { width: 14px; height: 14px; }

/* KPIs */
.kpis { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; margin-bottom: 18px; }
.kpi { padding: 18px 18px 16px; display: flex; flex-direction: column; gap: 4px; text-align: left; transition: box-shadow .25s, transform .25s var(--ease); }
button.kpi:hover { box-shadow: var(--sh-2); transform: translateY(-2px); }
.kpi-t { display: flex; align-items: center; gap: 8px; font-size: 13.5px; color: var(--muted); font-weight: 500; }
.kpi-ic { width: 32px; height: 32px; border-radius: 9px; display: grid; place-items: center; margin-left: auto; }
.kpi-ic .ic { width: 16px; height: 16px; }
.kpi b { font-size: 30px; font-weight: 600; letter-spacing: -.03em; line-height: 1.15; font-variant-numeric: tabular-nums; margin-top: 4px; }
.kpi small { font-size: 12.5px; color: var(--muted); }
.kpi small .up { color: var(--ok); font-weight: 600; }
.kpi.alert { background: #FFF7F4; border-color: #F6D5CB; }
.kpi.alert b { color: var(--b-salmon-t); }
.meter { height: 6px; border-radius: 6px; background: var(--soft-2); overflow: hidden; display: flex; margin-top: 8px; }
.meter i { display: block; height: 100%; }

.grid-o { display: grid; grid-template-columns: minmax(0, 1.75fr) minmax(320px, 1fr); gap: 18px; margin-bottom: 18px; }
.grid-3 { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1fr); gap: 18px; }

/* live map */
.lmap { position: relative; height: 470px; margin: 0 12px 12px; border-radius: 14px; overflow: hidden; background: #F3F2EE; }
.legend { display: flex; flex-wrap: wrap; gap: 6px; }
.legend button { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 10px; border-radius: 99px; border: 1px solid var(--line); font-size: 12.5px; font-weight: 500; background: #fff; transition: all .2s; }
.legend button[aria-pressed="false"] { opacity: .45; }
.legend i { width: 9px; height: 9px; border-radius: 50%; }
.st-available { --c: #22A257; } .st-ride { --c: #1A9BB0; } .st-external { --c: #E07A5F; } .st-break { --c: #D4A82B; } .st-off { --c: #9C9C98; }
.legend i, .sdot { background: var(--c); }
.sdot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; flex: none; }
.mk-drv .pin { fill: var(--c); stroke: #fff; stroke-width: 2.5; }
.mk-drv .pin-in { fill: #fff; }
.mk-drv .ring { fill: none; stroke: var(--c); stroke-width: 2; opacity: .5; }
.mk-drv { cursor: pointer; pointer-events: all; }
.mk-drv.st-ride .ring { animation: ring 2s var(--ease) infinite; transform-box: fill-box; transform-origin: center; }
@keyframes ring { 0% { transform: scale(.7); opacity: .7; } 100% { transform: scale(1.8); opacity: 0; } }
.mk-drv text { text-anchor: middle; font-size: 11px; font-weight: 700; fill: var(--ink); paint-order: stroke; stroke: #fff; stroke-width: 3.5px; stroke-linejoin: round; }
.mk-drv.dim { opacity: .18; }
.mk-drv.sel .pin { stroke: var(--ink); stroke-width: 3; }
.map-pop { position: absolute; z-index: 5; width: 270px; background: #fff; border-radius: 14px; box-shadow: var(--sh-2); padding: 14px; font-size: 13.5px; animation: pop .2s var(--ease) both; }
.map-pop .ml-who { margin-bottom: 10px; }
.map-pop .x { position: absolute; right: 8px; top: 8px; width: 28px; height: 28px; border-radius: 8px; display: grid; place-items: center; }
.map-pop .x:hover { background: var(--soft); }
.map-pop .x .ic { width: 14px; height: 14px; }
.map-pop p { color: var(--muted); margin-bottom: 10px; line-height: 1.4; }
.map-pop p b { color: var(--ink); font-weight: 600; }
.map-zoom { position: absolute; right: 12px; bottom: 12px; display: grid; gap: 6px; z-index: 4; }
.map-zoom button { width: 36px; height: 36px; border-radius: 10px; background: #fff; box-shadow: var(--sh-1); display: grid; place-items: center; border: 1px solid var(--line); }
.map-stat { position: absolute; left: 12px; top: 12px; z-index: 4; background: rgba(255, 255, 255, .94); backdrop-filter: blur(6px); border-radius: 12px; padding: 10px 14px; box-shadow: var(--sh-1); display: flex; gap: 18px; font-size: 12.5px; color: var(--muted); }
.map-stat b { display: block; font-size: 18px; color: var(--ink); font-weight: 600; font-variant-numeric: tabular-nums; }

/* attention list */
.att { list-style: none; margin: 0; padding: 0 12px 12px; display: grid; gap: 8px; max-height: 470px; overflow: auto; }
.att li { display: grid; grid-template-columns: 36px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 12px; border-radius: 12px; border: 1px solid var(--line); background: #fff; }
.att li.hot { background: #FFF7F4; border-color: #F6D5CB; }
.att .a-ic { width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; background: var(--soft-2); }
.att .a-ic .ic { width: 17px; height: 17px; }
.att li.hot .a-ic { background: var(--b-salmon); color: var(--b-salmon-t); }
.att li.tmw .a-ic { background: var(--b-yellow); color: var(--b-yellow-t); }
.att li.doc .a-ic { background: var(--b-cyan); color: var(--b-cyan-t); }
.att b { display: block; font-size: 14px; font-weight: 600; line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.att small { display: block; font-size: 12.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.att .empty { grid-template-columns: 1fr; text-align: center; color: var(--muted); padding: 26px; font-size: 14px; }
.btn-xs { height: 34px; padding: 0 12px; font-size: 13px; border-radius: 8px; }
.btn-xs .ic { width: 14px; height: 14px; }

/* schedule / timeline */
.sched { list-style: none; margin: 0; padding: 0 20px 16px; }
.sched li { display: grid; grid-template-columns: 54px 14px minmax(0, 1fr) auto; gap: 12px; align-items: start; padding: 10px 0; cursor: pointer; border-radius: 10px; }
.sched li:hover b { text-decoration: underline; text-underline-offset: 3px; }
.sched time { font-weight: 700; font-variant-numeric: tabular-nums; font-size: 14.5px; }
.sched .tl-d { position: relative; width: 12px; height: 12px; border-radius: 50%; border: 2px solid var(--line-2); background: #fff; margin-top: 4px; }
.sched li:not(:last-child) .tl-d::after { content: ''; position: absolute; left: 3px; top: 12px; width: 2px; height: 42px; background: var(--line); }
.sched li.live .tl-d { border-color: var(--gold); background: var(--gold); box-shadow: 0 0 0 4px rgba(201, 162, 39, .2); }
.sched li.done { opacity: .55; }
.sched li.done .tl-d { background: var(--ink); border-color: var(--ink); }
.sched b { display: block; font-size: 14px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sched small { display: block; color: var(--muted); font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* bars */
.bars { padding: 4px 20px 20px; display: grid; gap: 12px; }
.bar-r { display: grid; grid-template-columns: 110px minmax(0, 1fr) 40px; gap: 10px; align-items: center; font-size: 13.5px; }
.bar-r span:last-child { text-align: right; font-weight: 600; font-variant-numeric: tabular-nums; }
.bar-t { height: 10px; border-radius: 6px; background: var(--soft-2); overflow: hidden; }
.bar-t i { display: block; height: 100%; border-radius: 6px; background: var(--ink); transform-origin: left; animation: grow .9s var(--ease) both; }
.bar-r:nth-child(1) .bar-t i { background: var(--gold); }
@keyframes grow { from { transform: scaleX(0); } }
.spark { display: flex; align-items: flex-end; gap: 8px; height: 150px; padding: 8px 20px 0; }
.spark div { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 6px; height: 100%; justify-content: flex-end; font-size: 11.5px; color: var(--muted); }
.spark i { display: block; width: 100%; max-width: 34px; border-radius: 7px 7px 3px 3px; background: var(--butter); transform-origin: bottom; animation: growy .9s var(--ease) both; }
.spark div.today i { background: var(--ink); }
.spark div.today { color: var(--ink); font-weight: 600; }
.spark b { font-size: 11.5px; color: var(--ink); font-weight: 600; font-variant-numeric: tabular-nums; }
@keyframes growy { from { transform: scaleY(0); } }
.spark-f { display: flex; justify-content: space-between; padding: 14px 20px 18px; font-size: 13px; color: var(--muted); border-top: 1px dashed var(--line-2); margin-top: 14px; }
.spark-f b { color: var(--ink); font-size: 16px; display: block; font-variant-numeric: tabular-nums; }

/* ---------- toolbar / filters ---------- */
.tools { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; }
.tsearch { position: relative; flex: 1 1 240px; max-width: 340px; }
.tsearch input { width: 100%; height: 42px; border: 1px solid var(--line-2); border-radius: 10px; padding: 0 12px 0 38px; font-size: 14.5px; background: #fff; }
.tsearch input:focus { outline: none; border-color: var(--ink); }
.tsearch .ic { position: absolute; left: 12px; top: 12px; color: var(--muted); }
.sel { height: 42px; border: 1px solid var(--line-2); border-radius: 10px; padding: 0 34px 0 12px; font-size: 14px; background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23111' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 11px center / 14px; appearance: none; cursor: pointer; font-weight: 500; }
.sel:focus { outline: none; border-color: var(--ink); }
.tabs { display: flex; gap: 4px; background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 4px; flex-wrap: wrap; }
.tabs button { height: 34px; padding: 0 13px; border-radius: 8px; font-size: 14px; font-weight: 500; color: var(--muted); display: inline-flex; align-items: center; gap: 7px; transition: all .2s; }
.tabs button:hover { color: var(--ink); }
.tabs button[aria-selected="true"] { background: var(--butter); color: var(--ink); font-weight: 600; }
.tabs .c { font-size: 12px; font-weight: 700; background: var(--soft-2); border-radius: 99px; padding: 1px 7px; font-variant-numeric: tabular-nums; }
.tabs button[aria-selected="true"] .c { background: rgba(255, 255, 255, .7); }
.tools .sp { margin-left: auto; display: flex; gap: 10px; }
.bigtabs { display: flex; gap: 28px; border-bottom: 1px solid var(--line); margin-bottom: 18px; }
.bigtabs button { padding: 10px 0 14px; font-size: 15.5px; font-weight: 500; color: var(--muted); position: relative; display: inline-flex; gap: 8px; align-items: center; }
.bigtabs button::after { content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; border-radius: 2px; background: var(--gold); transform: scaleX(0); transition: transform .3s var(--ease); }
.bigtabs button[aria-selected="true"] { color: var(--ink); font-weight: 600; }
.bigtabs button[aria-selected="true"]::after { transform: scaleX(1); }
.bigtabs .c { font-size: 12px; background: var(--soft-2); border-radius: 99px; padding: 1px 8px; font-weight: 600; }

/* ---------- table ---------- */
.tbl-w { overflow: auto; }
.tbl { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 14px; }
.tbl th { position: sticky; top: 0; z-index: 1; background: #FAFAF8; text-align: left; font-size: 12px; font-weight: 600; color: var(--muted); letter-spacing: .04em; text-transform: uppercase; padding: 12px 12px; border-bottom: 1px solid var(--line); white-space: nowrap; }
.tbl th:first-child { border-top-left-radius: 18px; }
.tbl th:last-child { border-top-right-radius: 18px; }
.tbl td { padding: 13px 12px; border-bottom: 1px solid var(--line); vertical-align: middle; white-space: nowrap; }
.tbl tbody tr { cursor: pointer; transition: background .15s; }
.tbl tbody tr:hover { background: var(--butter-bg); }
.tbl tbody tr:last-child td { border-bottom: 0; }
.tbl td b { font-weight: 600; }
.tbl td.wrap { white-space: normal; min-width: 175px; }
.tbl td.wrap .rte { white-space: nowrap; }
.tbl td small { display: block; color: var(--muted); font-size: 12.5px; }
.tbl .num { text-align: right; font-variant-numeric: tabular-nums; }
.tbl tr.rt td:first-child { box-shadow: inset 3px 0 0 #E07A5F; }
.tbl tr.sch td:first-child { box-shadow: inset 3px 0 0 #1A9BB0; }
.tbl tr.flash { animation: flash 2.4s var(--ease); }
@keyframes flash { 0%, 30% { background: var(--butter); } }
.tbl-f { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 14px 18px; border-top: 1px solid var(--line); font-size: 13.5px; color: var(--muted); flex-wrap: wrap; }
.tbl-f .key { display: flex; gap: 16px; align-items: center; }
.tbl-f .key span { display: inline-flex; align-items: center; gap: 6px; }
.tbl-f .key i { width: 3px; height: 14px; border-radius: 2px; }
.ref { font-weight: 700; font-variant-numeric: tabular-nums; letter-spacing: .01em; }
.who { display: flex; align-items: center; gap: 10px; }
.av { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; font-size: 12px; font-weight: 700; flex: none; background: var(--b-yellow); color: var(--b-yellow-t); }
.av.c1 { background: var(--b-cyan); color: var(--b-cyan-t); } .av.c2 { background: var(--b-green); color: var(--b-green-t); } .av.c3 { background: var(--b-salmon); color: var(--b-salmon-t); } .av.c4 { background: var(--ink); color: var(--butter); }
.av.lg { width: 56px; height: 56px; font-size: 18px; }
.rte { display: flex; align-items: center; gap: 6px; font-size: 14px; }
.rte .ic { width: 14px; height: 14px; color: var(--muted); }
.b-grey { background: var(--soft-2); color: #555; }
.badge.b-ink { background: var(--ink); color: #fff; }
.badge .sdot { width: 7px; height: 7px; }
.badge.sm { height: 22px; font-size: 12px; padding: 0 7px; }
.plt { display: inline-flex; align-items: center; border: 1.5px solid var(--ink); border-radius: 5px; padding: 1px 7px; font-weight: 700; font-size: 12.5px; letter-spacing: .03em; font-variant-numeric: tabular-nums; }
.warn-t { color: var(--b-salmon-t); font-weight: 600; }
.ok-t { color: var(--ok); }
.more { width: 34px; height: 34px; border-radius: 8px; display: grid; place-items: center; color: var(--muted); }
.more:hover { background: #fff; color: var(--ink); box-shadow: var(--sh-1); }
.empty-row td { text-align: center; color: var(--muted); padding: 50px 14px; cursor: default; }
.stars-s { display: inline-flex; align-items: center; gap: 3px; font-weight: 600; font-variant-numeric: tabular-nums; }

/* switch */
.sw { position: relative; width: 40px; height: 24px; border-radius: 99px; background: #D9D9D5; transition: background .2s; flex: none; }
.sw::after { content: ''; position: absolute; left: 3px; top: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .25); transition: transform .25s var(--ease); }
.sw[aria-checked="true"] { background: var(--ink); }
.sw[aria-checked="true"]::after { transform: translateX(16px); }
.sw:disabled { opacity: .4; cursor: not-allowed; }

/* status select inside a table */
.ssel { height: 32px; border-radius: 8px; border: 1px solid var(--line); padding: 0 28px 0 10px; font-size: 13px; font-weight: 600; appearance: none; cursor: pointer; background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23666' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 8px center / 12px; }
.ssel.st-available { background-color: var(--b-green); color: var(--b-green-t); border-color: transparent; }
.ssel.st-ride { background-color: var(--b-cyan); color: var(--b-cyan-t); border-color: transparent; }
.ssel.st-external { background-color: var(--b-salmon); color: var(--b-salmon-t); border-color: transparent; }
.ssel.st-break { background-color: var(--b-yellow); color: var(--b-yellow-t); border-color: transparent; }
.ssel.st-off { background-color: var(--soft-2); color: #555; border-color: transparent; }

/* status summary chips (drivers) */
.sumchips { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; margin-bottom: 16px; }
.sumchips button { background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 14px 16px; text-align: left; display: grid; gap: 2px; transition: all .2s; }
.sumchips button:hover { box-shadow: var(--sh-1); }
.sumchips button[aria-pressed="true"] { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.sumchips span { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--muted); font-weight: 500; }
.sumchips b { font-size: 26px; font-weight: 600; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }

/* ---------- dispatch board ---------- */
.board { display: grid; grid-template-columns: repeat(5, minmax(205px, 1fr)); gap: 14px; overflow-x: auto; padding-bottom: 8px; align-items: start; }
.col { background: #F1F1EE; border-radius: 16px; padding: 10px; min-height: 300px; display: flex; flex-direction: column; gap: 8px; }
.col-h { display: flex; align-items: center; gap: 8px; padding: 6px 6px 8px; font-size: 14px; font-weight: 600; }
.col-h .c { margin-left: auto; font-size: 12px; font-weight: 700; background: #fff; border-radius: 99px; padding: 2px 9px; font-variant-numeric: tabular-nums; }
.col.c-pending .col-h .sdot { background: #E07A5F; }
.col.c-assigned .col-h .sdot { background: #1A9BB0; }
.col.c-enroute .col-h .sdot { background: #D4A82B; }
.col.c-ontrip .col-h .sdot { background: #22A257; }
.col.c-done .col-h .sdot { background: #9C9C98; }
.col-empty { text-align: center; color: var(--muted); font-size: 13px; padding: 30px 10px; border: 1.5px dashed #DCDCD8; border-radius: 12px; }
.rc { background: #fff; border-radius: 12px; padding: 12px; box-shadow: var(--sh-1); display: grid; gap: 9px; cursor: pointer; border: 1px solid transparent; transition: box-shadow .2s, transform .2s var(--ease), border-color .2s; }
.rc:hover { box-shadow: var(--sh-2); transform: translateY(-2px); }
.rc.rt { border-left: 3px solid #E07A5F; }
.rc.sch { border-left: 3px solid #1A9BB0; }
.rc-t { display: flex; align-items: center; gap: 8px; }
.rc-t time { font-weight: 700; font-size: 15px; font-variant-numeric: tabular-nums; }
.rc-t .ref { margin-left: auto; white-space: nowrap; font-size: 11.5px; color: var(--muted); font-weight: 600; }
.rc-r { display: grid; grid-template-columns: 12px 1fr; gap: 3px 8px; align-items: center; font-size: 13.5px; }
.rc-r .a { width: 9px; height: 9px; border-radius: 50%; background: var(--gold); justify-self: center; }
.rc-r .b { width: 9px; height: 9px; border-radius: 50%; border: 2.5px solid var(--ink); justify-self: center; }
.rc-r span:not(.a):not(.b) { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rc-m { display: flex; gap: 6px; flex-wrap: wrap; font-size: 12px; color: var(--muted); }
.rc-m span { display: inline-flex; align-items: center; gap: 4px; }
.rc-m .ic { width: 13px; height: 13px; }
.rc-f { display: flex; align-items: center; gap: 8px; padding-top: 9px; border-top: 1px dashed var(--line-2); }
.rc-d { display: flex; align-items: center; gap: 8px; min-width: 0; font-size: 13px; }
.rc-d .av { width: 28px; height: 28px; font-size: 10.5px; }
.rc-d b { display: block; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.2; }
.rc-d small { display: block; color: var(--muted); font-size: 11.5px; white-space: nowrap; }
.rc-f .btn { margin-left: auto; }
.prog-b { height: 4px; border-radius: 4px; background: var(--soft-2); overflow: hidden; }
.prog-b i { display: block; height: 100%; background: var(--gold); border-radius: 4px; transition: width 1s linear; }

/* ---------- drawer ---------- */
.dr { position: fixed; inset: 0; z-index: 70; }
.dr-bg { position: absolute; inset: 0; background: rgba(20, 20, 20, .32); animation: fadein .25s both; }
.dr-p { position: absolute; right: 0; top: 0; bottom: 0; width: min(560px, 100%); background: #fff; display: flex; flex-direction: column; box-shadow: var(--sh-3); animation: drin .45s var(--ease) both; }
@keyframes drin { from { transform: translateX(40px); opacity: 0; } }
.dr.closing .dr-bg { animation: fadeout .2s forwards; }
.dr.closing .dr-p { animation: drout .22s forwards; }
@keyframes drout { to { transform: translateX(40px); opacity: 0; } }
.dr-h { display: flex; align-items: flex-start; gap: 12px; padding: 22px 24px 16px; border-bottom: 1px solid var(--line); }
.dr-h h3 { font-size: 21px; font-weight: 600; letter-spacing: -.02em; line-height: 1.2; }
.dr-h p { font-size: 13.5px; color: var(--muted); margin-top: 3px; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.dr-h .icon-btn { margin-left: auto; }
.dr-b { flex: 1; overflow: auto; padding: 20px 24px 30px; }
.dr-f { display: flex; gap: 10px; padding: 14px 24px; border-top: 1px solid var(--line); background: #fff; flex-wrap: wrap; }
.dr-f .grow { margin-left: auto; }
.sec-t { font-size: 12px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; color: #9a9a96; margin: 22px 0 10px; display: flex; align-items: center; gap: 8px; }
.sec-t:first-child { margin-top: 0; }
.sec-t .link { margin-left: auto; text-transform: none; letter-spacing: 0; font-size: 13px; color: var(--ink); }
.dmap { position: relative; height: 210px; border-radius: 14px; overflow: hidden; background: #F3F2EE; margin-bottom: 14px; }
.route-c { display: grid; grid-template-columns: 16px 1fr auto; gap: 2px 12px; align-items: center; padding: 14px 16px; border: 1px solid var(--line); border-radius: 14px; font-size: 14.5px; }
.route-c .a { width: 11px; height: 11px; border-radius: 50%; background: var(--gold); justify-self: center; }
.route-c .b { width: 11px; height: 11px; border-radius: 50%; border: 3px solid var(--ink); justify-self: center; }
.route-c .ln { width: 2px; height: 16px; justify-self: center; background: repeating-linear-gradient(var(--line-2) 0 3px, transparent 3px 6px); }
.route-c b { font-weight: 600; }
.route-c small { color: var(--muted); font-size: 12.5px; }
.kv { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: 14px; overflow: hidden; }
.kv > div { background: #fff; padding: 11px 14px; font-size: 14px; min-width: 0; }
.kv > div.w { grid-column: 1 / -1; }
.kv span { display: block; font-size: 12px; color: var(--muted); margin-bottom: 2px; }
.kv b { font-weight: 600; }
.drv-box { display: flex; align-items: center; gap: 12px; padding: 14px; border: 1px solid var(--line); border-radius: 14px; }
.drv-box b { display: block; font-weight: 600; }
.drv-box small { color: var(--muted); font-size: 12.5px; }
.drv-box .btn { margin-left: auto; }
.drv-box.none { background: #FFF7F4; border-color: #F6D5CB; }
.alog { list-style: none; margin: 0; padding: 0; }
.alog li { position: relative; padding: 0 0 14px 24px; font-size: 13.5px; }
.alog li::before { content: ''; position: absolute; left: 4px; top: 6px; width: 8px; height: 8px; border-radius: 50%; background: var(--line-2); }
.alog li:not(:last-child)::after { content: ''; position: absolute; left: 7px; top: 16px; bottom: 0; width: 2px; background: var(--line); }
.alog li:last-child::before { background: var(--gold); box-shadow: 0 0 0 4px rgba(201, 162, 39, .2); }
.alog b { font-weight: 600; }
.alog small { display: block; color: var(--muted); font-size: 12.5px; }
.tally.sm td { padding: 6px 0; font-size: 14px; }
.tally.sm tr.tot td { font-size: 16px; }
.prof { display: flex; align-items: center; gap: 14px; margin-bottom: 16px; }
.prof b { display: block; font-size: 18px; font-weight: 600; }
.prof small { color: var(--muted); }
.mini-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 4px; }
.mini-stats div { border: 1px solid var(--line); border-radius: 12px; padding: 12px; }
.mini-stats span { display: block; font-size: 12px; color: var(--muted); }
.mini-stats b { font-size: 19px; font-weight: 600; font-variant-numeric: tabular-nums; }
.doc { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; margin-bottom: 8px; font-size: 14px; }
.doc .ic { color: var(--muted); }
.doc b { font-weight: 600; display: block; }
.doc small { color: var(--muted); font-size: 12.5px; }
.doc .badge { margin-left: auto; }
.trips-l { list-style: none; margin: 0; padding: 0; border: 1px solid var(--line); border-radius: 14px; overflow: hidden; }
.trips-l li { display: flex; align-items: center; gap: 12px; padding: 11px 14px; border-bottom: 1px solid var(--line); font-size: 13.5px; cursor: pointer; }
.trips-l li:hover { background: var(--butter-bg); }
.trips-l li:last-child { border-bottom: 0; }
.trips-l li > span:first-child { min-width: 0; flex: 1; }
.trips-l b { font-weight: 600; display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.trips-l small { color: var(--muted); font-size: 12px; }
.trips-l .amt { font-weight: 600; font-variant-numeric: tabular-nums; }
.pchips { display: flex; flex-wrap: wrap; gap: 6px; }
.pchips span { font-size: 12.5px; padding: 4px 10px; border-radius: 99px; background: var(--soft-2); font-weight: 500; }

/* forms in drawer */
.frm .fld input, .frm .fld select, .frm .fld textarea { width: 100%; height: 46px; border: 1px solid var(--line-2); border-radius: 10px; padding: 0 12px; font-size: 15px; background: #fff; transition: border-color .2s, box-shadow .2s; }
.frm .fld select { appearance: none; padding-right: 34px; background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23111' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 12px center / 14px; cursor: pointer; }
.frm .fld textarea { height: 80px; padding: 10px 12px; resize: vertical; }
.frm .fld input:focus, .frm .fld select:focus, .frm .fld textarea:focus { outline: none; border-color: var(--ink); box-shadow: 0 0 0 4px rgba(17, 17, 17, .06); }
.frm .fld.err input, .frm .fld.err select { border-color: var(--err); }
.frm .seg { grid-template-columns: repeat(4, 1fr); }
.frm .seg button { font-size: 13.5px; }
.frm .fld3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px; }
.chk { display: flex; align-items: center; gap: 10px; padding: 11px 12px; border: 1px solid var(--line); border-radius: 10px; margin-bottom: 8px; cursor: pointer; font-size: 14px; }
.chk input { width: 18px; height: 18px; accent-color: var(--ink); }
.chk span:last-child { margin-left: auto; color: var(--muted); font-size: 13px; }
.chk:has(input:checked) { background: var(--butter-bg); border-color: #E8DB91; }
.quote { background: var(--soft); border-radius: 14px; padding: 14px 16px; margin-top: 8px; }
.note { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border-radius: 12px; background: var(--butter-bg); border: 1px solid #F0EAC8; font-size: 13.5px; line-height: 1.45; margin-bottom: 14px; }
.note .ic { margin-top: 1px; flex: none; }
.note.bad { background: #FFF7F4; border-color: #F6D5CB; color: var(--b-salmon-t); }

/* ---------- assign modal ---------- */
.mdl { position: fixed; inset: 0; z-index: 85; display: grid; place-items: center; padding: 24px; }
.mdl-p { position: relative; width: min(640px, 100%); max-height: calc(100vh - 48px); background: #fff; border-radius: 20px; box-shadow: var(--sh-3); display: flex; flex-direction: column; animation: sheetin .4s var(--ease) both; }
.mdl .dr-b { padding-top: 16px; }
.dlist { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.dlist li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; gap: 12px; align-items: center; padding: 12px 14px; border: 1px solid var(--line); border-radius: 14px; transition: all .2s; }
.dlist li.ok { cursor: pointer; }
.dlist li.ok:hover { border-color: var(--ink); }
.dlist li[aria-checked="true"] { border-color: var(--ink); background: var(--butter-bg); box-shadow: inset 0 0 0 1px var(--ink); }
.dlist li.no { opacity: .55; background: #FAFAF8; }
.dlist b { display: block; font-weight: 600; font-size: 14.5px; }
.dlist small { display: block; color: var(--muted); font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dlist small.why { color: var(--b-salmon-t); font-weight: 500; }
.dlist .eta { text-align: right; font-size: 13px; color: var(--muted); }
.dlist .eta b { font-size: 16px; color: var(--ink); }
.best { font-size: 11px; font-weight: 700; padding: 2px 7px; border-radius: 6px; background: var(--b-green); color: var(--b-green-t); margin-left: 6px; vertical-align: 1px; }

/* role matrix */
.rmx { width: 100%; border-collapse: collapse; font-size: 14px; }
.rmx th, .rmx td { padding: 11px 14px; border-bottom: 1px solid var(--line); text-align: center; }
.rmx th:first-child, .rmx td:first-child { text-align: left; }
.rmx th { font-size: 12px; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; background: #FAFAF8; }
.rmx tr:last-child td { border-bottom: 0; }
.rmx .y { display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 7px; background: var(--b-green); color: var(--b-green-t); }
.rmx .y .ic { width: 14px; height: 14px; stroke-width: 2.4; }
.rmx .n { color: #c4c4c0; }
.rmx th.me-col, .rmx td.me-col { background: var(--butter-bg); }
.cred { min-width: 180px; }
.cred .bar-t { height: 8px; margin: 6px 0 3px; }
.cred .bar-t i { background: var(--ink); }
.cred.near .bar-t i { background: var(--gold); }
.cred.over .bar-t i { background: #E07A5F; }

.toast { z-index: 120; }
.locked { padding: 80px 20px; text-align: center; color: var(--muted); }
.locked b { display: block; color: var(--ink); font-size: 20px; margin: 12px 0 6px; font-weight: 600; }
.locked .ic { width: 34px; height: 34px; margin: 0 auto; }

/* ---------- compact density ---------- */
body.adm-body { font-size: 13px; line-height: 1.4; }
.adm { grid-template-columns: 196px minmax(0, 1fr); }
.ic { width: 15px; height: 15px; }

/* sidebar */
.side { padding: 12px 10px 10px; }
.side .logo { gap: 7px; }
.side .logo-mark { width: 24px; height: 24px; border-radius: 6px; }
.side .logo-mark svg { width: 15px; height: 15px; }
.side .logo-word { font-size: 17px; }
.side-tag { font-size: 11px; margin-bottom: 10px; }
.snav { gap: 1px; }
.snav-l { font-size: 10px; margin: 10px 0 4px; padding: 0 8px; }
.snav a { height: 31px; gap: 9px; padding: 0 8px; border-radius: 7px; font-size: 13px; }
.snav a .ic { width: 15px; height: 15px; }
.snav .n { min-width: 18px; height: 17px; font-size: 10.5px; padding: 0 5px; }
.side-site { width: 100%; padding: 8px 10px; border-radius: 9px; font-size: 11.5px; gap: 2px 8px; }
.side-site b { font-size: 12.5px; }
.side-reset { font-size: 11.5px; padding: 2px 8px; }

/* topbar */
.top { height: 52px; padding: 0 16px; gap: 8px; }
.top h1 { font-size: 16px; }
.top h1 small { font-size: 11.5px; }
.gsearch { width: min(270px, 26vw); }
.gsearch input { height: 32px; font-size: 12.5px; border-radius: 8px; padding-left: 32px; }
.gsearch > .ic { left: 11px; top: 9px; width: 14px; height: 14px; }
.gsearch kbd { top: 7px; font-size: 10px; padding: 1px 5px; }
.live-t { height: 32px; padding: 0 10px; font-size: 12px; border-radius: 8px; gap: 6px; }
.top .icon-btn { width: 32px; height: 32px; border-radius: 8px; }
.dot-n { top: 5px; right: 6px; width: 7px; height: 7px; }
.me { gap: 8px; padding: 2px 8px 2px 2px; border-radius: 9px; }
.me .ml-av { width: 28px; height: 28px; font-size: 10.5px; }
.me b { font-size: 12.5px; }
.me small { font-size: 11px; }
.menu { border-radius: 10px; padding: 5px; min-width: 220px; }
.menu-h { font-size: 11px; padding: 6px 8px 4px; }
.menu button, .menu a { padding: 6px 8px; font-size: 12.5px; border-radius: 7px; }
.notif { width: 330px; }
.notif li { font-size: 12px; padding: 7px; grid-template-columns: 26px 1fr; gap: 8px; }
.ev-ic { width: 26px; height: 26px; border-radius: 7px; }

/* page + cards */
.view { padding: 14px 16px 30px; }
.ph { margin-bottom: 10px; }
.ph h2 { font-size: 19px; }
.ph p { font-size: 12px; margin-top: 2px; }
.ph-act { gap: 6px; }
.card { border-radius: 11px; }
.card-h { padding: 10px 12px 8px; gap: 8px; }
.card-h h3 { font-size: 13.5px; }
.card-h p { font-size: 11.5px; }
.card-b { padding: 0 12px 12px; }
.link { font-size: 12px; }

/* buttons, badges, inputs */
.adm-body .btn-sm { height: 31px; padding: 0 11px; font-size: 12.5px; border-radius: 7px; gap: 5px; }
.adm-body .btn-sm .ic { width: 14px; height: 14px; }
.btn-xs { height: 25px; padding: 0 9px; font-size: 11.5px; border-radius: 6px; }
.btn-xs .ic { width: 12px; height: 12px; }
.adm-body .badge { height: 20px; padding: 0 6px; font-size: 11px; border-radius: 5px; gap: 3px; }
.adm-body .badge.sm { height: 17px; font-size: 10px; padding: 0 5px; }
.adm-body .icon-btn { width: 30px; height: 30px; border-radius: 7px; }
.plt { font-size: 11px; padding: 0 5px; border-radius: 4px; border-width: 1.25px; }

/* KPIs */
.kpis { gap: 8px; margin-bottom: 10px; }
.kpi { padding: 10px 12px 9px; gap: 1px; }
.kpi-t { font-size: 11.5px; }
.kpi-ic { width: 22px; height: 22px; border-radius: 6px; }
.kpi-ic .ic { width: 12px; height: 12px; }
.kpi b { font-size: 20px; margin-top: 1px; }
.kpi small { font-size: 11px; }
.meter { height: 4px; margin-top: 4px; }

/* overview blocks */
.grid-o { gap: 10px; margin-bottom: 10px; grid-template-columns: minmax(0, 1.75fr) minmax(290px, 1fr); }
.grid-3 { gap: 10px; }
.lmap { height: 340px; margin: 0 8px 8px; border-radius: 9px; }
.legend { gap: 4px; }
.legend button { height: 22px; padding: 0 7px; font-size: 11px; gap: 5px; }
.legend i { width: 7px; height: 7px; }
.map-stat { left: 8px; top: 8px; padding: 6px 10px; gap: 12px; font-size: 10.5px; border-radius: 9px; }
.map-stat b { font-size: 14px; }
.map-zoom button { width: 30px; height: 30px; border-radius: 8px; }
.map-pop { width: 230px; padding: 10px; font-size: 12px; border-radius: 11px; }
.att { padding: 0 8px 8px; gap: 5px; max-height: 340px; }
.att li { grid-template-columns: 26px minmax(0, 1fr) auto; gap: 8px; padding: 7px 8px; border-radius: 8px; }
.att .a-ic { width: 26px; height: 26px; border-radius: 7px; }
.att .a-ic .ic { width: 13px; height: 13px; }
.att b { font-size: 12.5px; }
.att small { font-size: 11px; }
.sched { padding: 0 12px 8px; }
.sched li { grid-template-columns: 40px 10px minmax(0, 1fr) auto; gap: 8px; padding: 5px 0; }
.sched time { font-size: 12.5px; }
.sched .tl-d { width: 9px; height: 9px; margin-top: 4px; border-width: 1.5px; }
.sched li:not(:last-child) .tl-d::after { left: 2px; top: 9px; width: 1.5px; height: 30px; }
.sched b { font-size: 12.5px; }
.sched small { font-size: 11px; }
.bars { padding: 0 12px 12px; gap: 7px; }
.bar-r { grid-template-columns: 92px minmax(0, 1fr) 28px; font-size: 12px; gap: 8px; }
.bar-t { height: 7px; }
.spark { height: 100px; padding: 4px 12px 0; gap: 5px; }
.spark div { font-size: 10.5px; gap: 4px; }
.spark b { font-size: 10.5px; }
.spark-f { padding: 8px 12px 10px; font-size: 11.5px; margin-top: 8px; }
.spark-f b { font-size: 13px; }

/* toolbars & tabs */
.tools { gap: 6px; margin-bottom: 8px; }
.tools .sp { gap: 6px; }
.tsearch { max-width: 270px; flex-basis: 200px; }
.tsearch input { height: 31px; font-size: 12.5px; border-radius: 7px; padding-left: 30px; }
.tsearch .ic { left: 10px; top: 8px; width: 14px; height: 14px; }
.sel { height: 31px; font-size: 12.5px; border-radius: 7px; padding: 0 26px 0 9px; background-position: right 9px center; background-size: 12px; }
.tabs { border-radius: 8px; padding: 2px; gap: 1px; }
.tabs button { height: 27px; padding: 0 9px; font-size: 12.5px; border-radius: 6px; gap: 5px; }
.tabs .c { font-size: 10.5px; padding: 0 5px; }
.bigtabs { gap: 18px; margin-bottom: 10px; }
.bigtabs button { padding: 4px 0 8px; font-size: 13px; gap: 6px; }
.bigtabs .c { font-size: 10.5px; padding: 0 6px; }
.sumchips { gap: 8px; margin-bottom: 8px; }
.sumchips button { padding: 7px 10px; border-radius: 9px; gap: 0; }
.sumchips span { font-size: 11.5px; gap: 6px; }
.sumchips b { font-size: 17px; }

/* tables */
.tbl { font-size: 12.5px; }
.tbl th { font-size: 10px; padding: 7px 9px; letter-spacing: .05em; }
.tbl th:first-child { border-top-left-radius: 11px; }
.tbl th:last-child { border-top-right-radius: 11px; }
.tbl td { padding: 6px 9px; line-height: 1.3; }
.tbl td small { font-size: 11px; }
.tbl td.wrap { min-width: 150px; }
.tbl-f { padding: 8px 12px; font-size: 11.5px; }
.who { gap: 7px; }
.av { width: 26px; height: 26px; font-size: 10px; }
.av.lg { width: 42px; height: 42px; font-size: 14px; }
.who .av[style] { width: 22px !important; height: 22px !important; font-size: 9px !important; }
.more { width: 24px; height: 24px; border-radius: 6px; }
.more .ic { width: 14px; height: 14px; }
.sw { width: 30px; height: 17px; }
.sw::after { width: 13px; height: 13px; left: 2px; top: 2px; }
.sw[aria-checked="true"]::after { transform: translateX(13px); }
.ssel { height: 24px; font-size: 11.5px; border-radius: 6px; padding: 0 22px 0 7px; background-position: right 6px center; background-size: 10px; }
.tbl .stars-s .ic.star { width: 11px; height: 11px; }
.rmx { font-size: 12.5px; }
.rmx th, .rmx td { padding: 6px 10px; }
.rmx th { font-size: 10px; }
.rmx .y { width: 18px; height: 18px; border-radius: 5px; }
.rmx .y .ic { width: 12px; height: 12px; }
.cred { min-width: 150px; }
.cred .bar-t { height: 6px; margin: 4px 0 2px; }

/* dispatch board */
.board { gap: 8px; grid-template-columns: repeat(5, minmax(180px, 1fr)); }
.col { border-radius: 10px; padding: 6px; gap: 5px; min-height: 200px; }
.col-h { font-size: 12.5px; padding: 3px 4px 4px; gap: 6px; }
.col-h .c { font-size: 10.5px; padding: 0 7px; }
.rc { padding: 8px 9px; gap: 5px; border-radius: 8px; }
.rc-t { gap: 6px; }
.rc-t time { font-size: 13px; }
.rc-t .ref { font-size: 10.5px; }
.rc-r { font-size: 12px; gap: 1px 6px; grid-template-columns: 10px 1fr; }
.rc-r .a, .rc-r .b { width: 8px; height: 8px; }
.rc-r .b { border-width: 2px; }
.rc-m { font-size: 11px; gap: 4px; }
.rc-m .ic { width: 11px; height: 11px; }
.rc-f { padding-top: 5px; gap: 5px; }
.rc-d { font-size: 11.5px; gap: 6px; }
.rc-d .av { width: 22px; height: 22px; font-size: 9px; }
.rc-d small { font-size: 10.5px; }
.prog-b { height: 3px; }
.col-empty { padding: 16px 6px; font-size: 11.5px; border-radius: 8px; }

/* drawer & modal */
.dr-p { width: min(460px, 100%); }
.dr-h { padding: 12px 16px 10px; gap: 10px; }
.dr-h h3 { font-size: 16px; }
.dr-h p { font-size: 12px; gap: 6px; margin-top: 2px; }
.dr-b { padding: 12px 16px 18px; }
.dr-f { padding: 9px 16px; gap: 6px; }
.sec-t { font-size: 10px; margin: 14px 0 6px; }
.dmap { height: 150px; border-radius: 9px; margin-bottom: 8px; }
.route-c { padding: 8px 11px; font-size: 12.5px; border-radius: 9px; gap: 1px 10px; }
.route-c small { font-size: 11px; }
.route-c .ln { height: 12px; }
.kv { border-radius: 9px; }
.kv > div { padding: 6px 10px; font-size: 12.5px; }
.kv span { font-size: 10.5px; margin-bottom: 1px; }
.drv-box { padding: 8px 10px; gap: 8px; border-radius: 9px; font-size: 12.5px; }
.drv-box small { font-size: 11px; }
.alog li { font-size: 12px; padding: 0 0 8px 20px; }
.alog li::before { left: 3px; top: 5px; width: 7px; height: 7px; }
.alog li:not(:last-child)::after { left: 6px; top: 14px; width: 1.5px; }
.alog small { font-size: 11px; }
.tally.sm td { padding: 3px 0; font-size: 12.5px; }
.tally.sm tr.tot td { font-size: 14px; padding-top: 8px; }
.prof { gap: 10px; margin-bottom: 10px; }
.prof b { font-size: 15px; }
.prof small { font-size: 11.5px; }
.mini-stats { gap: 6px; }
.mini-stats div { padding: 7px 9px; border-radius: 8px; }
.mini-stats span { font-size: 11px; }
.mini-stats b { font-size: 14px; }
.doc { padding: 7px 10px; font-size: 12.5px; border-radius: 8px; margin-bottom: 5px; gap: 10px; }
.doc small { font-size: 11px; }
.trips-l { border-radius: 9px; }
.trips-l li { padding: 6px 10px; font-size: 12px; gap: 10px; }
.trips-l small { font-size: 11px; }
.pchips { gap: 4px; }
.pchips span { font-size: 11px; padding: 2px 8px; }
.note { padding: 7px 10px; font-size: 12px; border-radius: 8px; margin-bottom: 8px; gap: 8px; }
.frm .fld { margin-bottom: 8px; }
.frm .fld label { font-size: 12px; margin-bottom: 3px; }
.frm .fld input, .frm .fld select { height: 33px; font-size: 13px; border-radius: 7px; padding: 0 10px; }
.frm .fld select { padding-right: 28px; background-position: right 10px center; background-size: 12px; }
.frm .fld textarea { height: 56px; font-size: 13px; border-radius: 7px; padding: 7px 10px; }
.frm .fld2, .frm .fld3 { gap: 8px; }
.adm-body .seg { padding: 3px; border-radius: 8px; margin-bottom: 10px; }
.adm-body .seg button { height: 28px; font-size: 12px; border-radius: 6px; }
.chk { padding: 6px 9px; font-size: 12.5px; border-radius: 7px; margin-bottom: 5px; gap: 8px; }
.chk input { width: 15px; height: 15px; }
.chk span:last-child { font-size: 11.5px; }
.quote { padding: 8px 10px; border-radius: 9px; }
.mdl-p { width: min(540px, 100%); border-radius: 14px; }
.dlist { gap: 5px; }
.dlist li { padding: 7px 10px; gap: 8px; border-radius: 9px; }
.dlist b { font-size: 12.5px; }
.dlist small { font-size: 11px; }
.dlist .eta { font-size: 11px; }
.dlist .eta b { font-size: 13px; }
.best { font-size: 10px; padding: 1px 5px; }
.adm-body .toast { font-size: 12.5px; padding: 8px 13px; border-radius: 10px; }

/* ---------- responsive ---------- */
@media (max-width: 1360px) {
  .kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .grid-3 { grid-template-columns: 1fr 1fr; }
  .grid-3 > :first-child { grid-column: 1 / -1; }
}
@media (max-width: 1100px) {
  .adm { grid-template-columns: 76px minmax(0, 1fr); }
  .side { padding: 22px 12px; align-items: center; }
  .side .logo-word, .side-tag, .snav-l, .snav a span, .side-site div, .side-reset { display: none; }
  .side .logo { padding: 0; }
  .snav a { width: 48px; justify-content: center; padding: 0; position: relative; }
  .snav .n { position: absolute; top: 2px; right: 0; min-width: 18px; height: 18px; font-size: 10.5px; padding: 0 5px; }
  .side-site { padding: 10px; } .side-site .ic { margin: 0; }
  .grid-o { grid-template-columns: 1fr; }
  .sumchips { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .me div { display: none; }
}
@media (max-width: 760px) {
  body.adm-body { overflow: auto; }
  .adm { grid-template-columns: 1fr; height: auto; min-height: 100vh; }
  .side { position: fixed; inset: 0 auto 0 0; width: 260px; z-index: 75; transform: translateX(-100%); transition: transform .35s var(--ease); align-items: stretch; padding: 22px 16px; }
  .side.open { transform: none; box-shadow: var(--sh-3); }
  .side .logo-word, .side-tag, .snav-l, .snav a span, .side-site div, .side-reset { display: revert; }
  .snav a { width: auto; justify-content: flex-start; padding: 0 12px; }
  .snav .n { position: static; }
  .top { padding: 0 12px; height: 52px; position: sticky; top: 0; }
  .top-burger { display: grid; }
  .top h1 small, .gsearch, .live-t { display: none; }
  .top h1 { font-size: 19px; }
  .kpi b { font-size: 19px; }
  .view { padding: 18px 16px 50px; overflow: visible; }
  .kpis { grid-template-columns: 1fr 1fr; }
  .grid-3 { grid-template-columns: 1fr; }
  .lmap { height: 300px; }
  .sumchips { grid-template-columns: 1fr 1fr; }
  .ph h2 { font-size: 25px; }
  .dr-p { width: 100%; }
  .kv { grid-template-columns: 1fr; }
  .frm .fld3 { grid-template-columns: 1fr; }
}