:root {
  color-scheme: light;
  --ink: #0a2431;
  --muted: #617480;
  --line: #d9e6eb;
  --panel: #ffffff;
  --wash: #eef7fa;
  --navy: #061d2b;
  --navy-2: #0a3447;
  --cyan: #20c8e5;
  --teal: #0fcf9d;
  --yellow: #ffbe42;
  --red: #ed4c5c;
  --violet: #8f70dc;
  --shadow: 0 20px 55px rgba(9, 42, 57, .13);
  --radius: 22px;
}

/* Phase 5 smart operations */
.smart-operations{max-width:1900px}.smart-health{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin:0 0 18px}.smart-health article,.smart-request-rail,.smart-builder,.smart-map-panel,.smart-command-strip article{background:var(--surface,#0c2735);border:1px solid rgba(137,189,210,.18);border-radius:18px;padding:16px}.smart-health article{display:grid;gap:7px}.smart-health small{color:var(--muted,#a8bdc8);text-transform:uppercase;letter-spacing:.08em}.smart-health strong{font-size:1.15rem}.smart-workspace{display:grid;grid-template-columns:minmax(250px,.7fr) minmax(440px,1.35fr) minmax(390px,1.1fr);gap:16px;align-items:start}.smart-request-rail{display:grid;gap:14px;max-height:78vh;overflow:auto}.smart-request-rail>header,.smart-builder>header,.smart-map-panel>header,.recommendation-results>header,.smart-command-strip header,.candidate-card>header{display:flex;align-items:center;justify-content:space-between;gap:12px}.smart-request-rail [data-request-list]{display:grid;gap:9px}.smart-rail-card,.smart-request-card{display:grid;gap:5px;width:100%;padding:12px;text-align:left;background:rgba(255,255,255,.035);color:inherit;border:1px solid rgba(255,255,255,.1);border-left:4px solid #4bc7ff;border-radius:12px;text-decoration:none}.smart-rail-card.priority-urgent,.smart-request-card.priority-urgent{border-left-color:#ff6b75}.smart-rail-card.priority-important,.smart-request-card.priority-important{border-left-color:#ffbb38}.smart-builder{display:grid;gap:14px}.smart-step{display:grid;grid-template-columns:34px 1fr;gap:12px;padding:16px 0;border-top:1px solid rgba(255,255,255,.09)}.smart-step:first-of-type{border-top:0}.smart-step>div{display:grid;gap:10px}.smart-search-results{display:grid;gap:7px;position:relative}.selected-customer{display:grid;grid-template-columns:1fr auto;gap:6px 12px;padding:14px;border:1px solid rgba(53,229,161,.35);background:rgba(53,229,161,.07);border-radius:12px}.selected-customer strong{font-size:1.1rem}.selected-customer .button{grid-column:1/-1;justify-self:start}.request-item-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}.request-item{display:grid;grid-template-columns:1fr 110px;gap:9px;align-items:center;padding:10px;background:rgba(255,255,255,.035);border-radius:10px}.recommendation-results{display:grid;gap:12px;padding-top:20px;border-top:2px solid rgba(75,199,255,.25)}.recommendation-results [data-candidate-list]{display:grid;gap:12px}.candidate-card{padding:15px;border:1px solid rgba(255,255,255,.12);border-radius:14px;background:rgba(255,255,255,.035)}.candidate-card.eligible:first-child{border-color:rgba(53,229,161,.65);box-shadow:0 0 0 1px rgba(53,229,161,.18)}.candidate-card.ineligible{opacity:.8;border-color:rgba(255,107,117,.3)}.candidate-score{font-size:1.25rem;font-weight:800;color:#35e5a1}.candidate-card.ineligible .candidate-score{color:#ff8e96}.candidate-facts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin:12px 0}.candidate-facts span{display:grid;gap:2px;padding:9px;background:rgba(0,0,0,.16);border-radius:9px}.candidate-facts small{color:var(--muted,#a8bdc8)}.candidate-reasons{display:grid;gap:4px;margin:10px 0;font-size:.9rem}.candidate-reasons p{margin:0}.candidate-reasons .positive{color:#a7f5d4}.candidate-reasons .negative{color:#ffc2c6}.candidate-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}.smart-map-panel{position:sticky;top:85px;padding:0;overflow:hidden}.smart-map-panel>header,.smart-map-panel>footer{padding:14px}.smart-map{height:min(68vh,720px);min-height:460px;background:#071d2a}.smart-map-panel.smart-map-fullscreen{position:fixed;inset:0;z-index:5000;border-radius:0;display:grid;grid-template-rows:auto 1fr auto}.smart-map-panel.smart-map-fullscreen .smart-map{height:auto;min-height:0}.smart-command-strip{margin-top:16px}.smart-command-strip article{display:grid;gap:14px}.smart-request-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:9px}.adhoc-map-pin,.candidate-map-pin{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:#ffbb38;color:#071d2a;border:3px solid #fff;font-weight:900;box-shadow:0 4px 16px rgba(0,0,0,.42)}.adhoc-map-pin.priority-urgent{background:#ff6b75}.candidate-map-pin{background:#4bc7ff}.candidate-map-pin.rank-1{background:#35e5a1}.map-legend .adhoc:before{background:#ffbb38}.error-text{color:#ff9ca3}.compact-stop.ad_hoc,.compact-stop.ad-hoc{border-left-color:#ffbb38}
@media(max-width:1250px){.smart-workspace{grid-template-columns:minmax(240px,.65fr) minmax(430px,1.35fr)}.smart-map-panel{grid-column:1/-1;position:relative;top:auto}.smart-map{height:520px}.smart-health{grid-template-columns:repeat(2,1fr)}}
@media(max-width:760px){.smart-health,.smart-workspace{grid-template-columns:1fr}.smart-request-rail{max-height:none}.request-item-grid,.candidate-facts{grid-template-columns:1fr}.smart-map{height:420px;min-height:360px}.selected-customer{grid-template-columns:1fr}.smart-step{grid-template-columns:28px 1fr}}
.smart-health article,.smart-request-rail,.smart-builder,.smart-map-panel,.smart-command-strip article{background:var(--panel);border-color:var(--line);color:var(--ink)}.candidate-reasons .positive{color:#087d5e}.candidate-reasons .negative{color:#b82f3c}
.insight-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}.insight-grid article{padding:14px;background:var(--wash);border:1px solid var(--line);border-radius:14px}.insight-grid [data-load-suggestion-list]{display:grid;gap:8px;margin:10px 0}@media(max-width:760px){.insight-grid{grid-template-columns:1fr}}
.driver-stop-card.ad-hoc{border:2px solid var(--yellow);box-shadow:0 10px 28px rgba(255,190,66,.16)}.adhoc-badge{background:var(--yellow)!important;color:var(--navy)!important}.adhoc-request-meta{font-weight:750;color:#8a5900}.adhoc-request-items{display:flex;gap:7px;flex-wrap:wrap;margin:.45rem 0}.adhoc-request-items span{padding:6px 9px;border-radius:999px;background:#fff3d2;color:#704600;font-weight:750}
.route-variation-summary{display:grid;gap:5px;padding:10px 14px;border:1px solid var(--line);border-radius:12px;background:var(--panel)}.route-variation-summary [data-variation-explanations]{display:flex;gap:8px;flex-wrap:wrap}.route-variation-summary [data-variation-explanations] span{font-size:.82rem;color:var(--muted)}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { min-height: 100%; background: var(--wash); }
body { min-height: 100vh; margin: 0; color: var(--ink); background: radial-gradient(circle at 85% 0, #d9f6fb 0, transparent 30rem), var(--wash); font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
button, input, select, textarea { color: inherit; font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
a { color: #06718f; }
:focus-visible { outline: 3px solid #48d5ee; outline-offset: 3px; }
h1, h2, h3, p { margin-top: 0; overflow-wrap: anywhere; }
h1 { margin-bottom: .5rem; font-size: clamp(2rem, 4vw, 4.3rem); line-height: .98; letter-spacing: -.045em; }
h2 { margin-bottom: .5rem; font-size: clamp(1.35rem, 2vw, 2rem); letter-spacing: -.025em; }
h3 { margin-bottom: .45rem; }
.eyebrow { margin-bottom: .4rem; color: #187e98; font-size: .72rem; font-weight: 900; letter-spacing: .14em; text-transform: uppercase; }
.button { display: inline-flex; min-height: 48px; align-items: center; justify-content: center; gap: .45rem; padding: .72rem 1rem; border: 1px solid transparent; border-radius: 13px; background: #fff; color: var(--ink); font-weight: 850; line-height: 1; text-decoration: none; cursor: pointer; transition: transform .16s ease, border-color .16s ease, background .16s ease; }
.button:hover { transform: translateY(-1px); }
.button:disabled { opacity: .48; cursor: not-allowed; transform: none; }
.button.primary { background: linear-gradient(135deg, #087999, #0b9bb2); color: #fff; box-shadow: 0 10px 22px rgba(6, 125, 153, .22); }
.button.success { background: linear-gradient(135deg, #07896a, #10b888); color: #fff; box-shadow: 0 12px 28px rgba(8, 137, 106, .24); }
.button.danger { background: linear-gradient(135deg, #b7293b, #e34c59); color: #fff; }
.button.message { background: linear-gradient(135deg, #342b72, #6750b6); color: #fff; }
.button.ghost { border-color: var(--line); background: rgba(255, 255, 255, .86); }
.button.compact { min-height: 38px; padding: .5rem .75rem; border-radius: 10px; font-size: .82rem; }
.button.large { min-height: 56px; padding-inline: 1.35rem; }
.notice { padding: .9rem 1rem; border: 1px solid #acdce6; border-radius: 14px; background: #e8f9fc; color: #15596b; font-weight: 700; }
.notice.warning { border-color: #f6d68f; background: #fff7de; color: #795212; }
.notice.danger { border-color: #f1a3ab; background: #fff0f1; color: #8d2632; }
.notice.success { border-color: #9ddfc8; background: #ecfbf5; color: #17634e; }
.empty-copy { margin: 0; color: var(--muted); }

.app-nav { position: relative; z-index: 2000; display: flex; min-height: 72px; align-items: center; gap: 1.5rem; padding: .7rem clamp(1rem, 3vw, 2.5rem); border-bottom: 1px solid rgba(154, 215, 229, .22); background: rgba(5, 27, 40, .97); color: #eafaff; box-shadow: 0 8px 30px rgba(3, 22, 32, .18); }
.brand { display: inline-flex; align-items: center; gap: .65rem; color: #fff; font-size: 1rem; font-weight: 950; letter-spacing: .08em; text-decoration: none; }
.brand small { display: block; margin-top: .1rem; color: #9ed7e4; font-size: .58rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.brand-mark { display: grid; width: 42px; height: 42px; place-items: center; border: 1px solid rgba(136, 228, 244, .5); border-radius: 13px; background: linear-gradient(145deg, #0bb9d1, #08768f); color: #fff; font-weight: 950; letter-spacing: -.04em; box-shadow: inset 0 1px rgba(255,255,255,.35), 0 8px 18px rgba(0,0,0,.24); }
.brand-mark.large { width: 74px; height: 74px; border-radius: 23px; font-size: 1.6rem; }
.app-nav nav { display: flex; flex: 1; align-items: center; gap: .2rem; overflow: visible; }
.app-nav nav a { min-height: 42px; padding: .7rem .8rem; border-radius: 10px; color: #bfeaf3; font-size: .86rem; font-weight: 800; text-decoration: none; white-space: nowrap; }
.app-nav nav a:hover { background: rgba(118, 222, 241, .12); color: #fff; }
.nav-more { position: relative; flex: 0 0 auto; }
.app-nav nav .nav-more-trigger { display: flex; align-items: center; }
.nav-more-trigger::after { margin-left: .4rem; font-size: .65rem; content: "\25BE"; }
.nav-more-menu { position: absolute; z-index: 2200; top: calc(100% + .45rem); right: 0; width: min(520px, 85vw); display: none; grid-template-columns: repeat(2,minmax(0,1fr)); gap: .25rem; padding: .55rem; border: 1px solid rgba(154,215,229,.24); border-radius: 14px; background: #082432; box-shadow: 0 18px 45px #0008; }
.nav-more:hover .nav-more-menu, .nav-more:focus-within .nav-more-menu { display: grid; }
.nav-more-menu a { display: flex; align-items: center; }
.nav-user { display: flex; align-items: center; gap: .7rem; white-space: nowrap; }
.nav-user > span { color: #bfe4ec; font-size: .82rem; font-weight: 750; }

.login-page { display: grid; place-items: center; padding: clamp(1rem, 4vw, 4rem); background: radial-gradient(circle at 20% 15%, rgba(23, 201, 224, .24), transparent 28rem), linear-gradient(135deg, #041724, #0a3548); color: #effbff; }
.login-shell { display: grid; width: min(1080px, 100%); grid-template-columns: 1.25fr .85fr; overflow: hidden; border: 1px solid rgba(155, 224, 239, .24); border-radius: 30px; background: rgba(6, 29, 43, .86); box-shadow: 0 35px 100px rgba(0, 10, 18, .46); }
.login-brand { display: flex; min-height: 600px; flex-direction: column; justify-content: center; padding: clamp(2rem, 6vw, 5rem); background: linear-gradient(145deg, rgba(5, 28, 42, .1), rgba(6, 88, 105, .42)); }
.login-brand h1 { max-width: 10ch; margin: 1.5rem 0; color: #fff; }
.login-brand > p:not(.eyebrow) { max-width: 34rem; color: #b8e4ed; font-size: 1.08rem; line-height: 1.7; }
.truth-list { display: grid; gap: .65rem; margin-top: 2rem; color: #d8f6fb; font-size: .9rem; font-weight: 700; }
.truth-list span::before { margin-right: .6rem; color: var(--teal); content: "●"; }
.login-card { align-self: stretch; padding: clamp(2rem, 5vw, 4rem); background: #fff; color: var(--ink); }
.login-card h2 { margin-bottom: 2rem; }
.stack-form, .settings-grid section { display: grid; gap: 1rem; }
label { display: grid; gap: .42rem; color: #38515e; font-size: .83rem; font-weight: 850; }
input, select, textarea { width: 100%; max-width: 100%; min-height: 48px; padding: .75rem .85rem; border: 1px solid #c6d9df; border-radius: 11px; background: #fff; }
.login-shell > *, .login-card form, .login-card label { min-width: 0; }
textarea { min-height: 92px; resize: vertical; }
input:focus, select:focus, textarea:focus { border-color: #22a7c1; box-shadow: 0 0 0 3px rgba(32, 200, 229, .13); outline: 0; }
.fine-print { margin: 1.5rem 0 0; color: var(--muted); font-size: .78rem; line-height: 1.55; }

.driver-page { background: linear-gradient(180deg, #061d2b 0 15rem, #e9f5f8 15rem); }
.driver-shell { width: min(640px, 100%); min-height: calc(100vh - 72px); margin: auto; padding: 1rem 1rem 4rem; }
.driver-hero { display: flex; min-height: 130px; align-items: center; justify-content: space-between; gap: 1rem; color: #eefcff; }
.driver-hero h1 { margin-bottom: .3rem; font-size: clamp(2rem, 10vw, 3.5rem); }
.driver-hero .eyebrow { color: #88d9e9; }
.driver-clock { margin: 0; color: #bce4ec; font-variant-numeric: tabular-nums; }
.connection-pill { display: inline-flex; min-height: 42px; align-items: center; gap: .5rem; padding: .55rem .75rem; border: 1px solid rgba(164, 225, 237, .28); border-radius: 999px; background: rgba(227, 250, 255, .1); font-size: .75rem; font-weight: 900; text-transform: uppercase; }
.connection-pill i { width: 9px; height: 9px; border-radius: 50%; background: var(--yellow); box-shadow: 0 0 0 5px rgba(255, 190, 66, .12); }
.connection-pill[data-state="online"] i { background: var(--teal); box-shadow: 0 0 0 5px rgba(15, 207, 157, .12); }
.connection-pill[data-state="offline"] i { background: var(--red); box-shadow: 0 0 0 5px rgba(237, 76, 92, .12); }
.gps-requirement { margin-bottom: 1rem; }
.driver-status-card, .driver-action-card { margin-bottom: 1rem; padding: 1.15rem; border: 1px solid #cfe1e7; border-radius: var(--radius); background: #fff; box-shadow: var(--shadow); }
.driver-status-card { overflow: hidden; }
.driver-status-card header { display: flex; align-items: center; justify-content: space-between; }
.driver-status-card h2 { margin: 0; color: #435966; }
.driver-status-card.is-active { border-color: rgba(15, 207, 157, .6); background: linear-gradient(145deg, #f2fffa, #fff); box-shadow: 0 20px 55px rgba(5, 139, 105, .14); }
.driver-status-card.is-active h2 { color: #057253; }
.pulse-dot { width: 18px; height: 18px; border: 4px solid #fff; border-radius: 50%; background: #9aaab2; box-shadow: 0 0 0 3px #c9d4d8; }
.is-active .pulse-dot { background: var(--teal); box-shadow: 0 0 0 3px rgba(15, 207, 157, .2), 0 0 20px rgba(15, 207, 157, .5); animation: pulse 1.6s infinite; }
@keyframes pulse { 50% { transform: scale(1.14); } }
.driver-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .65rem; margin-top: 1rem; }
.driver-facts span { min-width: 0; padding: .8rem; border: 1px solid #e0ecef; border-radius: 13px; background: rgba(239, 248, 250, .72); color: var(--muted); font-size: .7rem; font-weight: 800; text-transform: uppercase; }
.driver-facts strong { display: block; margin-top: .25rem; overflow-wrap: anywhere; color: var(--ink); font-size: .9rem; text-transform: none; }
.driver-action-card p { color: var(--muted); line-height: 1.55; }
.driver-actions { display: grid; gap: .75rem; }
.driver-primary { width: 100%; min-height: 64px; font-size: .98rem; letter-spacing: .035em; }
.vehicle-picker { padding: 1rem; border: 1px solid #c8dce2; border-radius: 17px; background: #fff; }
.driver-event-log { position: sticky; bottom: .7rem; z-index: 30; margin-top: 1rem; padding: .85rem 1rem; border: 1px solid #b8d5dd; border-radius: 14px; background: rgba(255, 255, 255, .94); color: #31515e; box-shadow: 0 10px 30px rgba(4, 35, 48, .14); font-size: .83rem; font-weight: 750; backdrop-filter: blur(12px); }
.driver-event-log[data-type="danger"] { border-color: #ef9ea7; color: #8c2531; }
.driver-event-log[data-type="warning"] { border-color: #ecc56c; color: #745014; }
.driver-event-log[data-type="success"] { border-color: #84d7ba; color: #0d674c; }

dialog { max-width: calc(100vw - 2rem); padding: 0; border: 0; border-radius: 24px; box-shadow: 0 30px 100px rgba(0, 15, 24, .42); }
dialog::backdrop { background: rgba(1, 16, 25, .72); backdrop-filter: blur(5px); }
.message-dialog { width: min(600px, calc(100vw - 1rem)); max-height: 90vh; }
.dialog-shell { display: grid; max-height: 90vh; grid-template-rows: auto minmax(0, 1fr); padding: 1rem; }
.dialog-shell > header, .terminate-dialog header { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.message-thread { display: grid; gap: .75rem; overflow: auto; padding: .5rem; }
.message-card { padding: 1rem; border: 1px solid #d6e5e9; border-left: 5px solid #56b9ce; border-radius: 15px; background: #fff; }
.message-card.important { border-left-color: var(--yellow); background: #fffaf0; }
.message-card.urgent { border-left-color: var(--red); background: #fff2f3; }
.message-card.driver_to_command { margin-left: 1rem; border-left-color: var(--teal); background: #effcf7; }
.message-card p { margin: .5rem 0; line-height: 1.5; }
.message-card small { display: block; color: var(--muted); }
.message-priority { color: #395662; font-size: .68rem; font-weight: 950; letter-spacing: .12em; }
.message-actions { display: flex; flex-wrap: wrap; gap: .45rem; margin-top: .85rem; }
.urgent-overlay { position: fixed; z-index: 5000; inset: 0; display: grid; place-items: center; padding: 1rem; background: rgba(54, 4, 12, .91); color: #fff; }
.urgent-overlay > div { width: min(560px, 100%); padding: clamp(1.5rem, 6vw, 3.5rem); border: 2px solid #ff8c98; border-radius: 28px; background: linear-gradient(145deg, #9f1f32, #d63b4b); box-shadow: 0 30px 100px rgba(0, 0, 0, .5); text-align: center; }
.urgent-overlay .eyebrow { color: #ffdce0; }
.urgent-overlay h2 { font-size: clamp(2rem, 10vw, 4rem); }
.urgent-overlay p { font-size: 1.2rem; line-height: 1.5; }
.urgent-overlay time { display: block; margin-bottom: 1rem; color: #ffe4e7; }
.urgent-actions { display: grid; gap: .7rem; }

.command-page { overflow-x: hidden; background: #031723; color: #e8fbff; }
.command-shell { --rail: 330px; --inspector: 360px; min-height: calc(100vh - 72px); padding: clamp(.8rem, 1.5vw, 1.5rem); background: radial-gradient(circle at 55% 0, rgba(16, 143, 171, .18), transparent 45rem), linear-gradient(145deg, #031722, #062839); }
.command-header { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; padding: 1rem 1.2rem; border: 1px solid rgba(139, 220, 237, .22); border-radius: 20px; background: linear-gradient(120deg, rgba(4, 29, 43, .96), rgba(6, 62, 79, .92)); box-shadow: 0 20px 45px rgba(0, 9, 16, .3); }
.command-header h1 { margin: 0; color: #fff; font-size: clamp(1.8rem, 3vw, 3.4rem); }
.command-header .eyebrow { color: #83d6e7; }
.command-clock { margin: .5rem 0 0; color: #b9e6ef; font-variant-numeric: tabular-nums; }
.command-tools { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: .6rem; color: #bde5ed; font-size: .78rem; }
.command-tools .button { border-color: rgba(161, 224, 237, .32); background: rgba(232, 251, 255, .1); color: #eefcff; }
.kpi-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: .7rem; margin: .8rem 0; }
.kpi-grid article { padding: .85rem 1rem; border: 1px solid rgba(137, 214, 230, .18); border-radius: 16px; background: rgba(230, 250, 254, .07); }
.kpi-grid span { color: #9fcfda; font-size: .7rem; font-weight: 850; letter-spacing: .08em; text-transform: uppercase; }
.kpi-grid strong { display: block; margin-top: .2rem; color: #fff; font-size: clamp(1.6rem, 2.4vw, 2.8rem); font-variant-numeric: tabular-nums; }
.kpi-grid .money-kpi { font-size: clamp(1.15rem, 1.65vw, 2rem); }
.kpi-grid .attention-kpi { border-color: rgba(255, 184, 62, .4); background: rgba(255, 174, 39, .11); }.attention-kpi a { color: #ffdc94; font-size: .68rem; font-weight: 800; }
.command-grid { display: grid; min-height: 690px; grid-template-columns: var(--rail) minmax(500px, 1fr) var(--inspector); gap: .8rem; }
.fleet-rail, .map-panel, .inspector { min-width: 0; overflow: hidden; border: 1px solid rgba(139, 220, 237, .2); border-radius: 20px; background: rgba(6, 37, 51, .82); box-shadow: 0 20px 45px rgba(0, 8, 14, .25); }
.fleet-rail, .inspector { padding: .9rem; }
.fleet-rail > header, .inspector > header, .map-panel > header { display: flex; align-items: flex-start; justify-content: space-between; gap: .7rem; }
.fleet-rail h2, .inspector h2, .map-panel h2 { color: #fff; }
.fleet-rail > header > span { color: #92c9d5; font-size: .75rem; font-weight: 800; }
.fleet-list { display: grid; max-height: 610px; gap: .65rem; overflow: auto; padding: .2rem; }
.fleet-card { display: grid; width: 100%; gap: .65rem; padding: .85rem; border: 1px solid rgba(140, 210, 225, .18); border-left: 5px solid var(--status, #8493a1); border-radius: 15px; background: rgba(224, 248, 252, .06); color: #eefdff; text-align: left; cursor: pointer; }
.fleet-card.live { --status: var(--teal); } .fleet-card.recent { --status: #4bc7ff; } .fleet-card.stale { --status: var(--yellow); } .fleet-card.offline { --status: #8493a1; } .fleet-card.gps-unavailable { --status: var(--red); }
.fleet-card.selected { border-color: #b794f4; background: rgba(112, 76, 185, .28); box-shadow: 0 0 0 2px rgba(183, 148, 244, .14); }
.fleet-card > div:first-child { display: grid; grid-template-columns: auto 1fr; gap: .2rem .6rem; }
.fleet-card > div:first-child .status-badge { grid-row: 1 / 3; align-self: start; }
.fleet-card > div:first-child strong { color: #fff; font-size: 1rem; }
.fleet-card > div:first-child small { color: #a7d4de; }
.status-badge { display: inline-flex; min-height: 27px; align-items: center; width: fit-content; padding: .3rem .5rem; border: 1px solid currentColor; border-radius: 999px; color: #8bd9e8; font-size: .62rem; font-weight: 950; letter-spacing: .06em; text-transform: uppercase; }
.fleet-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .4rem; }
.fleet-facts span { padding: .5rem; border-radius: 9px; background: rgba(222, 249, 253, .06); }
.fleet-facts strong, .fleet-facts small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fleet-facts strong { color: #fff; font-size: .78rem; }.fleet-facts small { margin-top: .15rem; color: #8fbfca; font-size: .62rem; }
.awaiting-chip { padding: .5rem; border-radius: 9px; background: rgba(255, 173, 50, .15); color: #ffd58a; font-size: .7rem; font-weight: 800; }
.map-panel { position: relative; display: grid; grid-template-rows: auto minmax(550px, 1fr) auto; padding: .8rem; }
.map-panel > header { padding: .3rem .3rem .7rem; }
.map-legend { display: flex; flex-wrap: wrap; gap: .45rem; color: #b5dce5; font-size: .65rem; font-weight: 800; }
.map-legend span::before { display: inline-block; width: 8px; height: 8px; margin-right: .3rem; border-radius: 50%; background: #8493a1; content: ""; }
.map-legend .live::before { background: var(--teal); }.map-legend .recent::before { background: #4bc7ff; }.map-legend .stale::before { background: var(--yellow); }.map-legend .gps-unavailable::before { background: var(--red); }
.map-legend .customer::before { background: #aa8cff; }.command-customer-search { position: relative; margin-top: .5rem; }.command-customer-search input { min-height: 40px; padding: .45rem .65rem; background: rgba(244, 253, 254, .96); font-size: .72rem; }.command-customer-search > div { position: absolute; z-index: 1200; top: calc(100% + .25rem); right: 0; display: grid; width: min(360px, 75vw); max-height: 260px; overflow: auto; border-radius: 10px; background: #f4fbfc; box-shadow: 0 12px 32px rgba(0,0,0,.35); }.command-customer-search button, .command-customer-search p { padding: .55rem; border: 0; border-bottom: 1px solid #dae8eb; background: transparent; color: #29464f; font-size: .72rem; text-align: left; cursor: pointer; }
.map-canvas { min-height: 550px; overflow: hidden; border: 1px solid rgba(131, 211, 227, .28); border-radius: 15px; background: #0c2633; }
.map-panel > footer { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .7rem .2rem 0; color: #98c9d4; font-size: .72rem; }
.map-health { display: flex; align-items: center; justify-content: flex-end; gap: .5rem; margin-bottom: .45rem; color: #9bcbd5; font-size: .62rem; }.connection-pill.compact { min-height: 25px; padding: .2rem .45rem; font-size: .56rem; }
.map-control-panel { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: .35rem; }.map-control-panel .button { min-height: 34px; padding: .42rem .55rem; font-size: .62rem; }.map-control-panel .button.active { border-color: #67ebd0; background: rgba(27, 209, 168, .2); color: #dffff8; }.map-control-panel .button.follow-paused { border-color: rgba(255,187,56,.68); color: #ffe3a5; }.map-control-panel .button:disabled { opacity: .42; cursor: not-allowed; }.map-exit { display: none; }
.map-floating-inspector { position: absolute; z-index: 900; top: 104px; right: 1.15rem; display: grid; width: min(340px, calc(100% - 2rem)); gap: .35rem; padding: .85rem; border: 1px solid rgba(153, 228, 242, .3); border-radius: 15px; background: rgba(3, 28, 41, .92); color: #eafbff; box-shadow: 0 18px 45px rgba(0, 0, 0, .4); backdrop-filter: blur(14px); }.map-floating-inspector[hidden] { display: none; }.map-floating-inspector > strong { font-size: 1rem; }.map-floating-inspector > span { color: #9cced8; font-size: .7rem; }.map-floating-close { position: absolute; top: .35rem; right: .4rem; width: 30px; height: 30px; border: 0; border-radius: 50%; background: rgba(235, 251, 254, .1); color: #fff; font-size: 1.25rem; cursor: pointer; }.map-floating-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .35rem; margin: .35rem 0; }.map-floating-facts span { min-width: 0; padding: .42rem; border-radius: 8px; background: rgba(225, 249, 253, .07); }.map-floating-facts small, .map-floating-facts b { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }.map-floating-facts small { color: #8fbfca; font-size: .55rem; text-transform: uppercase; }.map-floating-facts b { margin-top: .12rem; color: #fff; font-size: .67rem; }
.map-panel:not(.map-fullscreen) .map-floating-inspector { display: none; }
.leaflet-container { font-family: inherit; }
.leaflet-control-attribution { font-size: 10px; }
.driver-pin-wrap { background: none !important; border: 0 !important; }
.driver-pin { position: relative; display: block; width: 46px; height: 46px; }
.driver-pin-core { display: grid; width: 46px; height: 46px; place-items: center; border: 4px solid #eaffff; border-radius: 50%; background: var(--pin, #8493a1); color: #071d29; font-size: .76rem; font-weight: 950; box-shadow: 0 6px 18px rgba(0, 0, 0, .35); }
.driver-pin.live { --pin: var(--teal); }.driver-pin.recent { --pin: #4bc7ff; }.driver-pin.stale { --pin: var(--yellow); }.driver-pin.offline { --pin: #8493a1; }.driver-pin.gps-unavailable { --pin: var(--red); }
.driver-pin-label { position: absolute; top: 4px; left: 39px; display: grid; min-width: 130px; padding: .38rem .55rem .38rem .85rem; border: 1px solid rgba(218, 248, 253, .35); border-radius: 0 10px 10px 0; background: rgba(4, 30, 42, .88); color: #fff; box-shadow: 0 6px 18px rgba(0,0,0,.28); backdrop-filter: blur(8px); }
.driver-pin-label strong, .driver-pin-label small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }.driver-pin-label strong { font-size: .72rem; }.driver-pin-label small { color: #acd8e1; font-size: .6rem; }
.selected-driver-marker .driver-pin-core { outline: 7px solid rgba(183, 148, 244, .3); background: #b794f4; transform: scale(1.08); }.selected-driver-marker .driver-pin-label { border-color: rgba(210, 188, 255, .8); background: rgba(54, 32, 99, .94); }
.map-popup { display: grid; min-width: 180px; gap: .28rem; color: #16333e; }.map-popup strong { font-size: 1rem; }.map-popup span { color: #536c76; font-size: .76rem; }
.inspector { max-height: 690px; overflow-y: auto; }
.inspector-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem; margin: .8rem 0; }
.inspector-facts span { padding: .6rem; border: 1px solid rgba(137, 211, 226, .14); border-radius: 10px; background: rgba(225, 248, 252, .06); }.inspector-facts small, .inspector-facts strong { display: block; }.inspector-facts small { color: #90c0cb; font-size: .62rem; text-transform: uppercase; }.inspector-facts strong { margin-top: .22rem; overflow-wrap: anywhere; color: #fff; font-size: .78rem; }
.inspector section { margin-top: .9rem; padding-top: .9rem; border-top: 1px solid rgba(139, 211, 226, .14); }.inspector h3 { color: #eafbff; font-size: .92rem; }.inspector p { color: #a8d0d9; font-size: .76rem; }
.route-progress-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .4rem; margin-top: .55rem; }.route-progress-grid span { min-width: 0; padding: .5rem; border-radius: 8px; background: rgba(225, 249, 253, .07); }.route-progress-grid small, .route-progress-grid strong { display: block; }.route-progress-grid small { color: #8ebfca; font-size: .58rem; text-transform: uppercase; }.route-progress-grid strong { margin-top: .15rem; color: #fff; font-size: .8rem; }.compact-stop-list { display: grid; max-height: 180px; gap: .3rem; margin-top: .5rem; overflow: auto; }.compact-stop { padding: .45rem .55rem; border: 1px solid rgba(140, 214, 228, .15); border-left: 4px solid #ffb83e; border-radius: 8px; background: rgba(226, 249, 253, .06); color: #dff8fc; font-size: .7rem; text-align: left; cursor: pointer; }.compact-stop.arrived { border-left-color: #48c7ff; }.compact-stop.completed { border-left-color: #20d6a3; }.compact-stop.skipped { border-left-color: #8997a2; }.inventory-list { display: grid; gap: .3rem; margin-top: .5rem; }.inventory-row { display: flex; justify-content: space-between; gap: .6rem; padding: .45rem .55rem; border-radius: 8px; background: rgba(225, 250, 253, .07); color: #e8fcff; font-size: .72rem; }.awaiting-chip.block { display: block; margin-top: .5rem; text-decoration: none; }
.section-heading { display: flex; align-items: center; justify-content: space-between; gap: .5rem; }
.compact-thread { max-height: 210px; }.compact-thread .message-card { padding: .65rem; border-color: rgba(143, 211, 226, .2); background: rgba(229, 249, 253, .07); }.compact-thread .message-card p { color: #eafcff; }.compact-thread .message-card small { color: #96c5cf; }
.message-compose { display: grid; gap: .6rem; margin-top: .7rem; }.message-compose label { color: #b4dbe3; }.message-compose input, .message-compose select, .message-compose textarea { background: rgba(242, 252, 254, .96); }.message-compose span { color: #bce8f0; font-size: .75rem; }
.terminate-dialog { width: min(540px, calc(100vw - 2rem)); }.terminate-dialog form { display: grid; gap: 1rem; padding: 1.2rem; }
.reconnect-notice { position: fixed; z-index: 2500; right: 1rem; bottom: 1rem; width: min(500px, calc(100vw - 2rem)); }
.wallboard { position: fixed; z-index: 3000; inset: 0; overflow: auto; min-height: 100vh; padding: .8rem; }.wallboard + * { display: none; }.wallboard .app-nav { display: none; }.wallboard .command-grid { min-height: calc(100vh - 180px); }.wallboard .fleet-list, .wallboard .inspector { max-height: calc(100vh - 195px); }.wallboard .map-panel { grid-template-rows: auto minmax(0, 1fr) auto; }.wallboard .map-canvas { min-height: 0; }
.map-fullscreen-active { overflow: hidden; }
.map-panel.map-fullscreen { position: fixed; z-index: 5000; inset: 0; width: 100vw; height: 100dvh; grid-template-rows: minmax(0, 1fr); padding: 0; overflow: hidden; border: 0; border-radius: 0; background: #03141f; }
.map-panel.map-fullscreen > header { position: absolute; z-index: 850; top: .7rem; left: .7rem; right: .7rem; align-items: center; padding: .65rem .8rem; border: 1px solid rgba(144, 219, 235, .25); border-radius: 14px; background: rgba(3, 27, 40, .88); box-shadow: 0 12px 35px rgba(0,0,0,.3); backdrop-filter: blur(14px); }.map-panel.map-fullscreen > header h2 { font-size: 1.15rem; }.map-panel.map-fullscreen .command-customer-search { display: none; }.map-panel.map-fullscreen .map-health { margin-bottom: .25rem; }.map-panel.map-fullscreen .map-canvas { width: 100%; height: 100dvh; min-height: 100dvh; border: 0; border-radius: 0; }.map-panel.map-fullscreen > footer { position: absolute; z-index: 850; right: .7rem; bottom: .7rem; left: .7rem; align-items: center; padding: .55rem .65rem; border: 1px solid rgba(144, 219, 235, .25); border-radius: 14px; background: rgba(3, 27, 40, .88); backdrop-filter: blur(14px); }.map-panel.map-fullscreen > footer > span { max-width: 35rem; }.map-panel.map-fullscreen .map-exit { display: inline-flex; }.map-panel.map-fullscreen .map-floating-inspector { top: 7rem; right: 1rem; }.map-panel.map-fullscreen .leaflet-control-zoom { margin-bottom: 5.5rem; }.map-panel.map-fullscreen .leaflet-control-attribution { margin-bottom: 4.65rem; }
.command-financial-strip { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(320px, .6fr); gap: .8rem; margin-top: .8rem; }.command-financial-strip > article { min-width: 0; padding: .85rem; border: 1px solid rgba(139, 220, 237, .2); border-radius: 18px; background: rgba(6, 37, 51, .82); }.command-financial-strip header { display: flex; align-items: flex-start; justify-content: space-between; }.command-financial-strip h2 { color: #fff; }.no-payment-panel { border-color: rgba(255, 184, 62, .42) !important; }.no-payment-panel header > strong { display: grid; min-width: 34px; height: 34px; place-items: center; border-radius: 50%; background: #ffb83e; color: #372100; }.transaction-feed, [data-no-payment-feed] { display: grid; max-height: 230px; overflow-y: auto; }.transaction-feed-row { display: grid; grid-template-columns: 90px minmax(0, 1fr) auto; align-items: center; gap: .55rem; padding: .55rem; border-bottom: 1px solid rgba(143, 214, 228, .12); color: #eafcff; }.transaction-feed-row time, .transaction-feed-row span { color: #96c7d0; font-size: .65rem; }.transaction-feed-row strong, .transaction-feed-row span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }.transaction-feed-row strong, .transaction-feed-row b { font-size: .73rem; }.transaction-feed-row.cash_no_payment_now { border-left: 4px solid #ffb83e; background: rgba(255, 180, 48, .08); }
@media (max-width: 900px) { .command-financial-strip { grid-template-columns: 1fr; }.transaction-feed-row { grid-template-columns: 75px minmax(0, 1fr) auto; } }

@media (min-width: 1900px) and (min-height: 950px) { .command-grid { min-height: calc(100vh - 250px); }.map-panel { grid-template-rows: auto minmax(660px, 1fr) auto; }.map-canvas { min-height: 660px; }.fleet-list, .inspector { max-height: calc(100vh - 250px); } }
@media (min-width: 2500px) { .command-shell { --rail: 460px; --inspector: 470px; max-width: none; }.command-grid { min-height: calc(100vh - 235px); }.map-panel { grid-template-rows: auto minmax(760px, 1fr) auto; }.map-canvas { min-height: 760px; }.driver-pin-label { min-width: 150px; }.driver-pin-label strong { font-size: .82rem; }.driver-pin-label small { font-size: .68rem; } }
@media (max-width: 760px) { .map-control-panel { justify-content: flex-start; }.map-panel.map-fullscreen > header { align-items: flex-start; }.map-panel.map-fullscreen .map-legend { display: none; }.map-panel.map-fullscreen > footer { align-items: flex-start; flex-direction: column; }.map-panel.map-fullscreen > footer > span { display: none; }.map-panel.map-fullscreen .map-floating-inspector { top: 5.8rem; right: .55rem; left: .55rem; width: auto; max-height: 44vh; overflow: auto; }.map-panel.map-fullscreen .leaflet-control-zoom { margin-bottom: 9.5rem; }.map-panel.map-fullscreen .leaflet-control-attribution { max-width: calc(100vw - 1rem); margin-bottom: 9rem; } }

.content-shell { width: min(1500px, calc(100% - 2rem)); margin: 2rem auto 5rem; }.content-shell.narrow { max-width: 980px; }
.page-heading { display: flex; align-items: end; justify-content: space-between; margin-bottom: 1rem; }.page-heading h1 { font-size: clamp(2.2rem, 5vw, 4.4rem); }.page-heading p:not(.eyebrow) { max-width: 50rem; color: var(--muted); }
.filter-bar { display: grid; grid-template-columns: 1fr 1.3fr 1.3fr 1fr auto; gap: .7rem; align-items: end; margin-bottom: 1rem; padding: 1rem; border: 1px solid var(--line); border-radius: 18px; background: #fff; box-shadow: var(--shadow); }
.table-card { overflow: hidden; border: 1px solid var(--line); border-radius: 19px; background: #fff; box-shadow: var(--shadow); }.table-scroll { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; } th, td { padding: .85rem; border-bottom: 1px solid #e4edef; text-align: left; white-space: nowrap; } th { background: #f3f9fa; color: #607580; font-size: .68rem; letter-spacing: .08em; text-transform: uppercase; } td { color: #294651; font-size: .82rem; } tr:last-child td { border-bottom: 0; }.table-subtext { display: block; max-width: 260px; margin-top: .2rem; overflow: hidden; color: var(--muted); text-overflow: ellipsis; }
.settings-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }.settings-grid section { align-content: start; padding: 1.1rem; border: 1px solid var(--line); border-radius: 18px; background: #fff; box-shadow: var(--shadow); }.settings-grid .wide { grid-column: 1 / -1; }

.replay-page { overflow-x: hidden; background: #041824; color: #ecfbff; }
.replay-shell { min-height: calc(100vh - 72px); padding: 1rem; }
.replay-header { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: .8rem; padding: 1rem 1.2rem; border: 1px solid rgba(139, 218, 234, .2); border-radius: 19px; background: linear-gradient(125deg, #062334, #0a4357); }
.replay-header h1 { margin-bottom: .25rem; font-size: clamp(1.7rem, 3vw, 3.2rem); }.replay-header p { margin-bottom: 0; color: #a8d7e1; }.replay-header .eyebrow { color: #7ed4e5; }.back-link { display: inline-block; margin-bottom: .5rem; color: #bcebf3; font-size: .78rem; font-weight: 800; text-decoration: none; }
.replay-clock { min-width: 230px; padding: .7rem 1rem; border: 1px solid rgba(155, 224, 239, .2); border-radius: 14px; background: rgba(225, 249, 253, .08); }.replay-clock span, .replay-clock small, .replay-clock strong { display: block; }.replay-clock span { color: #99cbd5; font-size: .68rem; text-transform: uppercase; }.replay-clock strong { margin: .2rem 0; color: #fff; font-size: 1.2rem; font-variant-numeric: tabular-nums; }.replay-clock small { color: #b6dce4; }
.replay-grid { display: grid; min-height: 620px; grid-template-columns: minmax(0, 1fr) 300px; gap: .8rem; }.replay-map { min-height: 620px; overflow: hidden; border: 1px solid rgba(140, 218, 234, .22); border-radius: 19px; background: #0b2734; }.replay-events { max-height: 620px; overflow: auto; padding: .9rem; border: 1px solid rgba(140, 218, 234, .2); border-radius: 19px; background: rgba(224, 249, 253, .06); }.replay-events h2 { color: #fff; }
.replay-event { display: grid; width: 100%; gap: .18rem; margin-bottom: .5rem; padding: .7rem; border: 1px solid rgba(145, 214, 228, .17); border-left: 4px solid #6fc7d8; border-radius: 10px; background: rgba(226, 250, 253, .07); color: #eefcff; text-align: left; cursor: pointer; }.replay-event strong { font-size: .78rem; }.replay-event time { color: #9fcbd5; font-size: .68rem; }.replay-event.sent, .replay-event.seen, .replay-event.acknowledged, .replay-event.device_received { border-left-color: var(--violet); }
.replay-console { position: sticky; z-index: 800; bottom: .6rem; margin-top: .8rem; padding: .8rem; border: 1px solid rgba(150, 221, 235, .28); border-radius: 18px; background: rgba(4, 30, 43, .94); box-shadow: 0 20px 55px rgba(0, 8, 14, .36); backdrop-filter: blur(16px); }
.timeline-slider { width: 100%; min-height: 28px; padding: 0; border: 0; accent-color: var(--teal); }.replay-controls { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: .45rem; }.replay-button { min-height: 46px; padding: .65rem .8rem; border: 1px solid rgba(148, 218, 232, .26); border-radius: 11px; background: rgba(225, 249, 253, .08); color: #ecfbff; font-weight: 850; cursor: pointer; }.replay-button.primary { background: #078ba2; }.speed-control { display: flex; grid-auto-flow: column; align-items: center; gap: .4rem; color: #b6dde5; }.speed-control select { min-height: 44px; background: #fff; }
.gap-warning { margin-bottom: .6rem; padding: .6rem .8rem; border: 1px solid #d99a35; border-radius: 10px; background: rgba(255, 173, 50, .15); color: #ffd999; font-size: .76rem; font-weight: 750; }.replay-legend { display: flex; flex-wrap: wrap; justify-content: center; gap: .8rem; margin-top: .5rem; color: #9fcbd4; font-size: .66rem; }.replay-legend span::before { display: inline-block; width: 17px; height: 4px; margin-right: .35rem; border-radius: 2px; background: #728393; vertical-align: middle; content: ""; }.replay-legend .played::before { background: #1ee6c5; }.replay-legend .gap::before { background: #ffad32; }.replay-legend .event::before { width: 8px; height: 8px; border-radius: 50%; background: var(--violet); }
.replay-marker-wrap { background: none !important; border: 0 !important; }.replay-marker { display: grid; width: 44px; height: 44px; place-items: center; border: 4px solid #edffff; border-radius: 50%; background: #12d6ae; color: #04251e; font-size: .73rem; font-weight: 950; box-shadow: 0 8px 20px rgba(0,0,0,.4); }.route-endpoint { background: none !important; border: 0 !important; }.route-endpoint span { display: grid; width: 30px; height: 30px; place-items: center; border: 3px solid #fff; border-radius: 50%; background: #178ba4; color: #fff; font-size: .7rem; font-weight: 950; box-shadow: 0 6px 15px rgba(0,0,0,.3); }.route-endpoint.end span { background: #cf3d4d; }

.session-expired { position: fixed; z-index: 10000; top: 0; right: 0; left: 0; padding: .8rem 1rem; background: #a51e31; color: #fff; text-align: center; font-weight: 850; }.session-expired a { margin-left: .35rem; color: #fff; }

/* Phase 2 delivery operations */
.driver-tabs { position: sticky; z-index: 900; top: 76px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .45rem; margin: .3rem 0 1rem; padding: .4rem; border: 1px solid rgba(139, 218, 234, .24); border-radius: 16px; background: rgba(4, 31, 43, .94); box-shadow: 0 12px 35px rgba(0, 10, 16, .25); backdrop-filter: blur(14px); }
.driver-tabs button { min-height: 50px; padding: .55rem .4rem; border: 0; border-radius: 11px; background: transparent; color: #a9d4de; font-size: .72rem; font-weight: 900; letter-spacing: .04em; cursor: pointer; }
.driver-tabs button.active { background: linear-gradient(135deg, #098ca4, #08b7ba); color: #fff; box-shadow: 0 8px 18px rgba(0, 177, 188, .22); }
.prepared-run-card, .driver-panel { margin-bottom: 1rem; padding: 1rem; border: 1px solid #cfe1e7; border-radius: 19px; background: #fff; box-shadow: var(--shadow); }
.prepared-run-card h2, .driver-panel h2, .driver-panel h3 { color: #082936; }.prepared-run-card p, .driver-panel p { color: #58727c; }
.prepared-run-facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .55rem; margin: .8rem 0; }.prepared-run-facts span { padding: .7rem; border-radius: 11px; background: #eef8fa; color: #58727c; font-size: .68rem; text-transform: uppercase; }.prepared-run-facts strong { display: block; margin-top: .25rem; color: #082936; font-size: .88rem; text-transform: none; }
.driver-panel-heading { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: .8rem; }.driver-panel-heading > strong { color: #087e91; }
.driver-route-map { min-height: 310px; overflow: hidden; border: 1px solid rgba(142, 219, 233, .25); border-radius: 15px; background: #0b2835; }.map-truth-label { margin: .55rem 0 .8rem; font-size: .7rem; }
.driver-stop-list { display: grid; gap: .65rem; }.driver-stop-card { display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: .7rem; padding: .8rem; border: 1px solid #d8e7eb; border-left: 5px solid #e89917; border-radius: 14px; background: #f7fbfc; color: #173943; }.driver-stop-card.arrived { border-left-color: #1689b3; }.driver-stop-card.completed { border-left-color: #07926d; }.driver-stop-card.skipped { border-left-color: #8997a2; opacity: .78; }
.stop-sequence { display: grid; width: 44px; height: 44px; place-items: center; border-radius: 50%; background: #dff5f5; color: #087e91; font-size: 1.05rem; font-weight: 950; }.stop-card-heading, .stop-meta, .stop-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .45rem; }.stop-card-heading h3 { color: #082936; font-size: 1rem; }.stop-body > p { margin: .3rem 0; color: #365861; font-size: .78rem; }.stop-meta { justify-content: flex-start; color: #087e91; font-size: .7rem; }.stop-actions { justify-content: flex-start; margin-top: .7rem; }.stop-actions .button { min-height: 48px; }
.load-notice { margin-bottom: .8rem; padding: .75rem; border: 1px solid #e8c067; border-radius: 12px; background: #fff7df; color: #765114; font-size: .78rem; font-weight: 750; }
.product-tile-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: .7rem; }.product-tile { display: grid; gap: .4rem; padding: .9rem; border: 1px solid #d6e6ea; border-radius: 16px; background: linear-gradient(145deg, #f8fcfd, #edf7f8); text-align: center; }.product-tile h3 { color: #082936; font-size: 1.05rem; }.product-code { color: #087e91; font-size: .62rem; font-weight: 900; letter-spacing: .1em; }.product-tile small { color: #607b84; }.product-quantity { width: 100%; min-height: 62px; padding: .4rem; border-color: #8bcbd4; background: #fff; color: #062635; font-size: 1.7rem; font-weight: 950; text-align: center; }.quantity-controls { display: grid; grid-template-columns: 1fr 1fr; gap: .45rem; }.quantity-button { min-height: 54px; border: 1px solid #c6dce1; border-radius: 12px; background: #fff; color: #173943; font-size: 1.5rem; font-weight: 950; cursor: pointer; }.quantity-button.primary { background: #078fa5; color: #fff; }.quantity-clear { grid-column: 1 / -1; min-height: 42px; border: 0; background: transparent; color: #087e91; font-weight: 800; cursor: pointer; }
.truck-stock-card { margin-top: 1rem; padding: .9rem; border: 1px solid rgba(126, 219, 235, .22); border-radius: 17px; background: rgba(225, 249, 253, .07); }.truck-stock-card header { display: flex; align-items: flex-start; justify-content: space-between; gap: .75rem; }.truck-stock-card h2 { color: #fff; }.truck-stock-card header > strong { color: #66efcf; font-size: .78rem; }.truck-stock-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .5rem; margin-top: .65rem; }.truck-stock-grid > span { padding: .65rem; border-radius: 10px; background: rgba(224, 249, 253, .08); }.truck-stock-grid strong, .truck-stock-grid b { display: block; }.truck-stock-grid strong { color: #9dced8; font-size: .64rem; }.truck-stock-grid b { margin-top: .2rem; color: #fff; font-size: .92rem; }
.queue-review-dialog .transaction-shell { width: min(720px, 100%); grid-template-rows: auto minmax(0, 1fr); }.financial-queue-review { display: grid; gap: .7rem; overflow: auto; padding: .85rem; }.financial-queue-entry { display: grid; gap: .45rem; padding: .85rem; border: 1px solid var(--line); border-radius: 13px; background: rgba(5, 33, 46, .7); }.financial-queue-entry > div:first-child { display: flex; justify-content: space-between; gap: .75rem; }.financial-queue-entry > div:first-child span { color: #e08700; font-size: .68rem; font-weight: 900; }.financial-queue-entry small { overflow-wrap: anywhere; color: var(--muted); }.financial-queue-entry p { margin: 0; color: #ffd0b8; }.financial-queue-entry.superseded { opacity: .62; }.financial-queue-entry.superseded > div:first-child span { color: var(--muted); }.financial-queue-actions { display: flex; flex-wrap: wrap; gap: .45rem; }
.stop-balance { color: #72e8cb !important; font-weight: 900; }.stop-financial-activity { display: flex; flex-wrap: wrap; gap: .35rem; margin-top: .5rem; }.stop-financial-activity span { padding: .32rem .45rem; border-radius: 7px; background: #e6f8f4; color: #176354; font-size: .66rem; font-weight: 850; }.stop-financial-activity .payment-missed { background: #fff0d7; color: #9b5700; }
.transaction-dialog { width: min(960px, calc(100vw - 1rem)); max-height: calc(100dvh - 1rem); padding: 0; overflow: hidden; border: 1px solid #a9dce5; border-radius: 22px; background: #f4fbfc; box-shadow: 0 30px 90px rgba(0,0,0,.45); }.transaction-dialog::backdrop { background: rgba(1, 19, 29, .78); backdrop-filter: blur(6px); }.transaction-shell { display: grid; max-height: calc(100dvh - 1rem); grid-template-rows: auto auto auto minmax(0, 1fr) auto auto; gap: .75rem; overflow: hidden; padding: 1rem; }.transaction-shell > header { display: flex; align-items: flex-start; justify-content: space-between; gap: .7rem; }.transaction-shell > header > div { display: grid; }.transaction-shell > header h2 { color: #153e4b; }.transaction-shell > header strong { color: #194d5c; }.transaction-shell > header span { color: #63808a; font-size: .72rem; }.sale-type-picker { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .55rem; }.sale-type-picker button { min-height: 58px; padding: .6rem; border: 2px solid #a9cfd7; border-radius: 13px; background: #fff; color: #214d59; font-size: .85rem; font-weight: 950; cursor: pointer; }.sale-type-picker button.active { border-color: #048f9c; background: #dff8f8; color: #066d77; box-shadow: 0 0 0 3px rgba(7, 153, 165, .12); }.sale-type-picker button.warning.active { border-color: #e99a1c; background: #fff2d7; color: #984d00; }.no-payment-warning { display: grid; gap: .15rem; margin: 0; }.sale-item-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-content: start; gap: .65rem; overflow-y: auto; padding: .2rem; }.sale-item-tile { display: grid; gap: .55rem; padding: .75rem; border: 2px solid #d5e5e8; border-radius: 15px; background: #fff; }.sale-item-tile.selected { border-color: #19a8af; background: #effcfc; }.sale-item-tile > div:first-child { display: grid; }.sale-item-tile strong { color: #173d48; font-size: .95rem; }.sale-item-tile span { color: #048693; font-weight: 950; }.sale-item-tile small { color: #71868d; }.sale-quantity-controls { display: grid; grid-template-columns: 54px minmax(60px, 1fr) 54px; gap: .4rem; }.sale-quantity-controls button { min-height: 52px; border: 0; border-radius: 11px; background: #0b4858; color: #fff; font-size: 1.4rem; font-weight: 950; cursor: pointer; }.sale-quantity-controls input { min-width: 0; min-height: 52px; padding: .3rem; border: 1px solid #b8d4d9; border-radius: 10px; background: #fff; color: #173e49; font-size: 1.3rem; font-weight: 950; text-align: center; }.sale-checkout-dock { display: grid; grid-template-columns: 1fr minmax(180px, .4fr); gap: .7rem; padding: .75rem; border-radius: 14px; background: #082f3c; }.sale-checkout-dock > div { display: grid; }.sale-checkout-dock span, .sale-checkout-dock small { color: #a8d5dd; }.sale-checkout-dock strong { color: #fff; font-size: 1.6rem; }.transaction-feedback { min-height: 1.2rem; margin: 0; color: #285966; font-weight: 800; }.collection-dialog { width: min(660px, calc(100vw - 1rem)); }.collection-dialog .transaction-shell { grid-template-rows: auto auto auto auto auto; overflow-y: auto; }.collection-amount { display: grid; gap: .35rem; color: #345a64; font-weight: 900; }.collection-amount input { min-height: 76px; font-size: 2rem; font-weight: 950; text-align: center; }.collection-dialog .sale-type-picker { grid-template-columns: repeat(2, minmax(0, 1fr)); }.check-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .65rem; }.check-fields label { color: #345a64; font-weight: 800; }

@media (max-width: 560px) { .truck-stock-card header { flex-direction: column; }.truck-stock-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }.transaction-dialog { width: 100vw; max-width: none; height: 100dvh; max-height: none; border: 0; border-radius: 0; }.transaction-shell { height: 100dvh; max-height: none; padding: .65rem; }.sale-type-picker { gap: .35rem; }.sale-type-picker button { min-height: 52px; padding: .4rem; font-size: .72rem; }.sale-item-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .45rem; }.sale-item-tile { gap: .4rem; padding: .55rem; }.sale-item-tile strong { font-size: .78rem; }.sale-quantity-controls { grid-template-columns: 46px minmax(45px, 1fr) 46px; }.sale-quantity-controls button, .sale-quantity-controls input { min-height: 48px; }.sale-checkout-dock { grid-template-columns: 1fr minmax(125px, .65fr); position: sticky; bottom: 0; }.sale-checkout-dock strong { font-size: 1.25rem; }.check-fields { grid-template-columns: 1fr; }.stop-actions .button { flex: 1 1 42%; } }

.load-summary-card { position: sticky; z-index: 500; bottom: .5rem; display: grid; gap: .65rem; margin-top: 1rem; padding: .9rem; border: 1px solid rgba(80, 223, 197, .32); border-radius: 16px; background: rgba(4, 34, 45, .96); box-shadow: 0 18px 45px rgba(0, 8, 14, .4); backdrop-filter: blur(15px); }.driver-panel .load-summary-card h3 { color: #fff; }.driver-panel .load-summary-card p { color: #b9dce3; }.load-summary-row { display: flex; justify-content: space-between; gap: .8rem; padding: .35rem 0; border-bottom: 1px solid rgba(141, 213, 226, .12); color: #dffaff; }.load-history { margin-top: 1rem; }.load-history-card { margin-top: .6rem; padding: .75rem; border: 1px solid #d8e7eb; border-radius: 12px; background: #f7fbfc; color: #173943; }.load-history-heading { display: flex; justify-content: space-between; gap: .5rem; }.load-history-card small { color: #607b84; }.driver-panel .load-history-card p { margin: .25rem 0; color: #365861; }.corrected-line { color: #9a6208 !important; }.danger-text { color: #c42f45 !important; font-weight: 750; }

.operations-page { background: #eef5f6; }.operations-shell { max-width: 1600px; }.master-grid, .route-admin-grid, .load-office-grid { display: grid; grid-template-columns: minmax(300px, .75fr) minmax(0, 1.55fr); gap: 1rem; }.master-list-panel, .master-editor-panel, .prepare-run-card, .prepared-result, .pending-load-panel, .load-confirm-panel { min-width: 0; padding: 1rem; border: 1px solid var(--line); border-radius: 19px; background: #fff; box-shadow: var(--shadow); }.master-list-panel { align-self: start; }.master-search { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .5rem; margin-bottom: .7rem; }.master-list-panel [data-master-list], .pending-load-panel [data-pending-loads] { display: grid; max-height: 690px; gap: .5rem; overflow: auto; }
.master-list-card, .pending-load-card { display: grid; width: 100%; gap: .25rem; padding: .75rem; border: 1px solid #dce8eb; border-left: 4px solid #0ba9b5; border-radius: 12px; background: #f8fcfd; color: #23434e; text-align: left; cursor: pointer; }.master-list-card.selected, .pending-load-card.selected { border-color: #8970d4; background: #f2effc; }.master-list-card > div { display: flex; align-items: center; justify-content: space-between; gap: .4rem; }.master-list-card small, .pending-load-card small, .pending-load-card span { color: #6c828a; }
.master-editor-panel > form > header, .load-confirm-panel > header, .route-membership > header { display: flex; align-items: flex-start; justify-content: space-between; gap: .7rem; margin-bottom: .8rem; }.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .7rem; }.form-grid .wide { grid-column: 1 / -1; }.form-actions { display: flex; flex-wrap: wrap; align-items: center; gap: .65rem; margin-top: .9rem; }.observation-panel, .route-membership { margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--line); }.observation-row { display: grid; gap: .15rem; margin-top: .45rem; padding: .65rem; border-radius: 10px; background: #f3f8f9; }.observation-row span, .observation-row small { color: var(--muted); font-size: .72rem; }
.balance-admin-panel { margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--line); }.balance-admin-panel > header { display: flex; align-items: flex-start; justify-content: space-between; gap: .75rem; }.balance-admin-panel > header > strong { color: #087b8c; font-size: 1.5rem; }.balance-admin-panel > p { color: #a56300; font-size: .68rem; font-weight: 900; letter-spacing: .05em; }.balance-initialize-form { display: grid; grid-template-columns: 1fr 1fr auto; align-items: end; gap: .6rem; margin: .8rem 0; padding: .7rem; border-radius: 12px; background: #f1f8f9; }.balance-initialize-form > span { grid-column: 1 / -1; }.balance-history-list { display: grid; max-height: 310px; gap: .4rem; overflow-y: auto; }.balance-history-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .2rem .6rem; padding: .6rem; border: 1px solid #dce9eb; border-radius: 10px; }.balance-history-row strong, .balance-history-row span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }.balance-history-row span { color: #698087; font-size: .68rem; }.balance-history-row b { grid-row: 1 / 3; grid-column: 2; align-self: center; }.balance-history-row .debit { color: #a45e00; }.balance-history-row .credit { color: #087b65; }.balance-import-dialog { width: min(850px, calc(100vw - 1rem)); }.balance-import-dialog .dialog-shell { display: grid; gap: .75rem; padding: 1rem; }.balance-import-dialog header { display: flex; justify-content: space-between; }.balance-import-preview { display: grid; max-height: 260px; overflow-y: auto; }.balance-import-preview div { padding: .45rem; border-bottom: 1px solid #e1ebed; color: #31606b; font-size: .72rem; }.balance-import-preview .invalid { color: #b82f40; background: #fff1f2; }.balance-import-preview .valid { color: #08735d; background: #eefbf7; }
.transaction-admin-grid { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(340px, .65fr); gap: 1rem; }.transaction-admin-grid tbody tr { cursor: pointer; }.transaction-admin-grid tbody tr:hover { background: #edf8fa; }.transaction-detail-panel { align-self: start; padding: 1rem; border: 1px solid var(--line); border-radius: 18px; background: #fff; box-shadow: var(--shadow); }.inspector-facts.light { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); }.inspector-facts.light span { background: #f3f8f9; }.inspector-facts.light small { color: #6d858c; }.inspector-facts.light strong { color: #254d57; }.transaction-detail-panel section { margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--line); }
@media (max-width: 900px) { .transaction-admin-grid { grid-template-columns: 1fr; }.balance-initialize-form { grid-template-columns: 1fr; } }
.map-editor-dialog { width: min(850px, calc(100vw - 2rem)); }.map-editor-dialog .dialog-shell { display: grid; gap: .7rem; padding: 1rem; }.map-editor-dialog header { display: flex; justify-content: space-between; }.customer-location-map { min-height: 440px; overflow: hidden; border: 1px solid var(--line); border-radius: 14px; }.location-readout { padding: .55rem; border-radius: 9px; background: #e8f6f8; color: #25606e; font-size: .78rem; font-weight: 750; }
.route-sequence { display: grid; gap: .45rem; padding: 0; list-style: none; }.route-sequence-row { display: grid; grid-template-columns: 40px 1fr auto; align-items: center; gap: .55rem; padding: .6rem; border: 1px solid #dce8eb; border-radius: 11px; }.route-sequence-row > div { display: grid; }.route-sequence-row > div:last-child { display: flex; flex-direction: row; }.route-sequence-row small { color: var(--muted); }.sequence-number { display: grid; width: 34px; height: 34px; place-items: center; border-radius: 50%; background: #dff5f7; color: #087b8c; font-weight: 950; }.customer-search-results { display: grid; gap: .35rem; margin-bottom: .6rem; }.customer-search-card { padding: .55rem; border: 1px solid #dbe7e9; border-radius: 9px; background: #f6fbfc; color: #284852; text-align: left; cursor: pointer; }
.vehicle-master-search, .route-master-search { grid-template-columns: minmax(0, 1fr) minmax(130px, .45fr) auto; }
.vehicle-history-note, .route-history-note { margin-top: .8rem; padding: .7rem .8rem; border-left: 4px solid #25a8bd; border-radius: 8px; background: #eef8fa; color: #42616c; font-size: .78rem; line-height: 1.45; }
.customer-search-card { display: grid; width: 100%; gap: .2rem; }.customer-search-card small { color: var(--muted); }.location-missing { color: #a15f08 !important; font-weight: 850; }.location-recorded { color: #08745d !important; font-weight: 750; }
.route-sequence-row .button.compact { min-height: 44px; }.prepare-readiness { display: grid; gap: .55rem; margin-bottom: .8rem; }.operations-shell .page-heading h1 { font-size: clamp(2rem, 4vw, 3.35rem); }
.prepare-run-card { display: grid; gap: .9rem; }.prepared-result { margin-top: 1rem; }.prepared-result ol { display: grid; gap: .35rem; padding-left: 1.4rem; }.prepared-result li { padding: .5rem; border-bottom: 1px solid var(--line); }
.pending-load-panel h2 { margin-bottom: .7rem; }.load-confirm-panel table input { min-width: 130px; }.load-confirm-panel label { margin-top: .8rem; }
.customer-pin-wrap { background: none !important; border: 0 !important; }.customer-pin { display: grid; width: 28px; height: 28px; place-items: center; border: 3px solid #fff; border-radius: 50%; background: #ffb83e; color: #172e36; font-size: .62rem; font-weight: 950; box-shadow: 0 5px 13px rgba(0,0,0,.32); }.customer-pin.established, .customer-pin.office-verified { background: #24d3a3; }.customer-pin.arrived, .customer-pin.completed { background: #48c7ff; }

@media (min-width: 2200px) {
  .command-shell { --rail: 470px; --inspector: 500px; }.command-grid { min-height: max(760px, calc(100vh - 280px)); }.fleet-list, .inspector { max-height: calc(100vh - 280px); }.map-panel { grid-template-rows: auto minmax(650px, 1fr) auto; }.map-canvas { min-height: 650px; }.map-panel.map-fullscreen { grid-template-rows: minmax(0, 1fr); }.map-panel.map-fullscreen .map-canvas { min-height: 100dvh; }.fleet-card > div:first-child strong { font-size: 1.25rem; }.fleet-facts strong, .inspector-facts strong { font-size: 1rem; }
}
@media (max-width: 1250px) {
  .command-shell { --rail: 300px; --inspector: 330px; }.command-grid { grid-template-columns: var(--rail) minmax(450px, 1fr); }.inspector { grid-column: 1 / -1; max-height: none; }.inspector-facts { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .app-nav { flex-wrap: wrap; gap: .5rem; }.app-nav nav { order: 3; width: 100%; overflow-x: auto; overflow-y: hidden; }.nav-more { display: contents; }.nav-more-menu { display: contents !important; }.nav-more-trigger::after { display: none; }.nav-user > span { display: none; }
  .login-shell { grid-template-columns: 1fr; }.login-brand { min-height: auto; }.login-brand h1 { max-width: 15ch; }.login-card { padding-top: 2rem; }
  .command-header { align-items: flex-start; flex-direction: column; }.command-tools { justify-content: flex-start; }.kpi-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }.command-grid { grid-template-columns: 1fr; }.fleet-list { max-height: 420px; }.map-panel { grid-template-rows: auto minmax(520px, 1fr) auto; }.inspector-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .filter-bar { grid-template-columns: repeat(2, minmax(0, 1fr)); }.filter-bar .button { grid-column: 1 / -1; }.settings-grid { grid-template-columns: 1fr; }.settings-grid .wide { grid-column: auto; }
  .replay-grid { grid-template-columns: 1fr; }.replay-events { max-height: 300px; }.replay-header { align-items: flex-start; flex-direction: column; }.replay-clock { width: 100%; }.replay-controls { justify-content: flex-start; overflow-x: auto; flex-wrap: nowrap; }.replay-button { flex: 0 0 auto; }
  .master-grid, .route-admin-grid, .load-office-grid { grid-template-columns: 1fr; }.master-list-panel [data-master-list], .pending-load-panel [data-pending-loads] { max-height: 360px; }
}
@media (max-width: 560px) {
  .app-nav { min-height: 64px; padding: .55rem .75rem; }.brand small { display: none; }.brand-mark { width: 38px; height: 38px; }.app-nav nav a { padding-inline: .65rem; }.nav-user .button { min-height: 40px; }
  .driver-shell { min-height: calc(100vh - 64px); padding-inline: .75rem; }.driver-hero { min-height: 120px; }.connection-pill { max-width: 150px; }.driver-facts { gap: .45rem; }.driver-facts span { padding: .65rem; }
  .login-page { padding: .6rem; }.login-shell { width: 100%; border-radius: 20px; }.login-brand, .login-card { width: 100%; min-width: 0; padding: 1.5rem; }
  .command-shell { padding: .5rem; }.command-header { border-radius: 15px; }.command-tools > span:not(.connection-pill) { display: none; }.kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }.kpi-grid article:last-child { grid-column: 1 / -1; }.map-panel { padding: .5rem; }.map-panel > header { display: block; }.map-legend { margin-top: .5rem; }.map-canvas { min-height: 430px; }.driver-pin-label { display: none; }
  .content-shell { width: calc(100% - 1rem); margin-top: 1rem; }.filter-bar { grid-template-columns: 1fr; }.filter-bar .button { grid-column: auto; }.vehicle-master-search, .route-master-search { grid-template-columns: 1fr; }
  .replay-shell { padding: .5rem; }.replay-map { min-height: 470px; }.replay-grid { min-height: 470px; }.replay-console { bottom: .25rem; }
  .driver-tabs { top: 64px; gap: .25rem; margin-inline: -.15rem; padding: .3rem; }.driver-tabs button { min-width: 0; padding-inline: .2rem; font-size: .6rem; }.prepared-run-facts, .form-grid { grid-template-columns: 1fr; }.form-grid .wide { grid-column: auto; }.driver-panel { padding: .7rem; }.driver-panel-heading { align-items: flex-start; flex-direction: column; }.driver-route-map { min-height: 270px; }.driver-stop-card { grid-template-columns: 40px minmax(0, 1fr); padding: .65rem; }.stop-sequence { width: 38px; height: 38px; }.stop-actions .button { flex: 1 1 120px; }.product-tile-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem; }.product-tile { padding: .65rem; }.product-quantity { min-height: 58px; font-size: 1.4rem; }.quantity-button { min-height: 50px; }.master-search { grid-template-columns: 1fr; }.route-sequence-row { grid-template-columns: 34px 1fr; }.route-sequence-row > div:last-child { grid-column: 1 / -1; }.customer-location-map { min-height: 330px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
}

/* Phase 6 · authenticated driver portraits and intentional wallboard scale */
.driver-portrait { display:grid; flex:0 0 auto; place-items:center; overflow:hidden; border:3px solid rgba(255,255,255,.9); border-radius:50%; background:linear-gradient(145deg,#0c7789,#173f55); color:#fff; font-weight:950; letter-spacing:.04em; box-shadow:0 8px 24px rgba(5,34,48,.22); }
.tracker-mode-card { display:flex; align-items:center; justify-content:space-between; gap:1rem; margin:.8rem 0; padding:1rem; border:1px solid rgba(69,211,170,.35); border-radius:18px; background:linear-gradient(135deg,#092f3e,#0d5360); color:#fff; }.tracker-mode-card h2 { margin:.15rem 0; }.tracker-mode-card p:last-child { color:#bce2e4; }.tracker-mode-card [data-pairing-code] { display:block; padding:.75rem; border-radius:10px; background:#fff3c4; color:#603f00; letter-spacing:.08em; }
.readiness-seal { display:grid; min-width:280px; padding:1rem; border-radius:16px; background:#092f3e; color:#fff; }.readiness-seal span { color:#9acbd0; font-size:.7rem; font-weight:900; letter-spacing:.08em; }.readiness-seal strong { font-size:1.15rem; }.readiness-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:.7rem; }.readiness-card { display:grid; gap:.3rem; padding:.85rem; border:1px solid var(--line); border-left:5px solid #efac2d; border-radius:12px; background:#fff; }.readiness-card.ready,.readiness-card.verified,.readiness-card.complete,.readiness-card.passed { border-left-color:#16a878; }.readiness-card.disabled { border-left-color:#cc4256; }.readiness-card small { text-transform:uppercase; color:var(--muted); font-weight:900; }.readiness-card span { color:var(--muted); font-size:.72rem; }.setup-steps { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.8rem; margin-top:1rem; }.setup-steps>article { display:grid; grid-template-columns:42px minmax(0,1fr); gap:.8rem; padding:1rem; border:1px solid var(--line); border-radius:16px; background:#fff; }.setup-steps form { display:grid; gap:.55rem; }.danger-zone { border-color:#f0a8b2!important; background:#fff5f6!important; }
@media(max-width:900px){.setup-steps{grid-template-columns:1fr}.tracker-mode-card{align-items:flex-start;flex-direction:column}.readiness-seal{min-width:0;width:100%}}
.driver-portrait img,.driver-pin-core img { width:100%; height:100%; object-fit:cover; }
.driver-portrait.tiny { width:38px; height:38px; font-size:.68rem; }.driver-portrait.fleet { width:76px; height:76px; font-size:1.15rem; }.driver-portrait.selected { width:112px; height:112px; grid-column:span 2; font-size:1.5rem; }.driver-portrait.map { width:82px; height:82px; font-size:1.2rem; }.driver-portrait.candidate { width:84px; height:84px; font-size:1.15rem; }.driver-portrait.large { width:150px; height:150px; font-size:2rem; }.driver-portrait.replay { width:104px; height:104px; font-size:1.4rem; }
.fleet-card > div:first-child { grid-template-columns:auto minmax(0,1fr); align-items:center; }.fleet-identity { display:grid; gap:.22rem; min-width:0; }.fleet-identity .status-badge { justify-self:start; }.driver-pin-core { overflow:hidden; }.selected-driver-identity,.driver-profile-hero,.replay-driver-identity,.history-driver { display:flex; align-items:center; gap:1rem; }.selected-driver-identity>div:last-child { display:grid; }.candidate-card>header { display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center; gap:1rem; }.profile-detail-list { display:grid; gap:.5rem; }.profile-detail-row,.photo-upload-panel { padding:.8rem; border:1px solid var(--line); border-radius:12px; background:#f6fbfc; }.photo-upload-panel { display:grid; gap:.65rem; margin:1rem 0; }
@media (min-width:3000px) and (min-height:1700px) {
  html { font-size:19px; }.command-shell { --rail:580px; --inspector:600px; padding:1.35rem; }.command-grid { min-height:calc(100vh - 360px); gap:1.3rem; }.fleet-list,.inspector { max-height:calc(100vh - 360px); }.map-panel { grid-template-rows:auto minmax(980px,1fr) auto; }.map-canvas { min-height:980px; }.fleet-card { padding:1.15rem; }.driver-portrait.fleet { width:112px; height:112px; }.driver-pin-core { width:58px; height:58px; }.driver-pin-label { left:66px; min-width:190px; padding:.6rem .8rem; }.leaflet-popup-content { font-size:1rem; }.leaflet-control-zoom a { width:48px!important; height:48px!important; line-height:48px!important; }.map-panel footer,.map-panel>header { padding:1rem 1.2rem; }.kpi-grid strong { font-size:2rem; }
}
@media (max-width:560px) { .driver-portrait.fleet { width:62px; height:62px; }.driver-portrait.selected { width:88px; height:88px; }.driver-portrait.candidate { width:64px; height:64px; }.candidate-card>header { grid-template-columns:auto minmax(0,1fr); }.candidate-score { grid-column:1/-1; }.driver-profile-hero,.replay-driver-identity { align-items:flex-start; }.driver-portrait.large { width:104px; height:104px; } }

/* Live Command Center · map-native run inspectors and in-map dispatch */
.command-page .command-grid { grid-template-columns:var(--rail) minmax(540px,1fr); }
.command-page .command-grid>.inspector,.command-page .map-floating-inspector { display:none!important; }
.run-inspector-deck { position:absolute; z-index:910; inset:0; overflow:hidden; border-radius:15px; pointer-events:none; }
.run-inspector-card { --attention:#35e5a1; position:absolute; top:calc(112px + var(--deck-index)*76px); right:18px; width:min(320px,calc(100% - 36px)); overflow:hidden; border:1px solid color-mix(in srgb,var(--attention) 44%,rgba(195,237,245,.25)); border-left:4px solid var(--attention); border-radius:15px; color:#edfcff; box-shadow:0 14px 38px rgba(0,8,14,.22); pointer-events:auto; transition:background .2s ease,border-color .2s ease,box-shadow .2s ease,transform .2s ease; }
.run-inspector-card.idle { background:rgba(3,29,42,.24); backdrop-filter:blur(5px); box-shadow:0 8px 22px rgba(0,8,14,.12); }
.run-inspector-card.idle:hover,.run-inspector-card.idle:focus-within { background:rgba(3,29,42,.78); border-color:rgba(176,231,242,.7); box-shadow:0 15px 38px rgba(0,8,14,.32); }
.run-inspector-card.selected { z-index:5; width:min(470px,calc(100% - 36px)); max-height:min(72%,690px); overflow:auto; background:rgba(3,29,42,.97); border-color:rgba(177,232,243,.7); box-shadow:0 24px 65px rgba(0,7,13,.48); backdrop-filter:blur(16px); }
.run-inspector-card.attention { --attention:#ffbb38; background:rgba(57,39,8,.88); }
.run-inspector-card.freshness-offline { --attention:#8493a1; }.run-inspector-card.freshness-gps-unavailable { --attention:#ff6b75; }.run-inspector-card.attention.freshness-gps-unavailable { --attention:#ff6b75; }
.run-inspector-header { display:grid; grid-template-columns:auto minmax(0,1fr) auto; gap:.65rem; align-items:center; min-height:64px; padding:.55rem .62rem; cursor:grab; touch-action:none; }
.run-inspector-header:active { cursor:grabbing; }.run-inspector-header:focus-visible { outline:3px solid #7fe9d7; outline-offset:-3px; }
.run-inspector-identity { display:grid; min-width:0; gap:.08rem; }.run-inspector-identity strong,.run-inspector-identity span,.run-inspector-identity small { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }.run-inspector-identity strong { color:#fff; font-size:.84rem; }.run-inspector-identity span { color:#d0edf2; font-size:.68rem; }.run-inspector-identity small { color:#9fcbd4; font-size:.62rem; font-weight:800; text-transform:uppercase; }
.run-inspector-card.idle .run-inspector-identity { padding:.2rem .35rem; border-radius:8px; background:rgba(2,24,35,.46); }
.run-inspector-controls { display:flex; gap:.25rem; }.inspector-icon-button { min-width:42px; min-height:42px; padding:.3rem; border:1px solid rgba(188,231,239,.28); border-radius:9px; background:rgba(232,251,255,.09); color:#eefcff; font-size:.59rem; font-weight:850; cursor:pointer; }
.run-inspector-body { display:grid; gap:.65rem; padding:0 .72rem .72rem; }.run-inspector-facts { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.4rem; }.run-inspector-facts span { min-width:0; padding:.48rem; border-radius:9px; background:rgba(227,249,253,.07); }.run-inspector-facts small,.run-inspector-facts strong { display:block; }.run-inspector-facts small { color:#91c3cd; font-size:.56rem; text-transform:uppercase; }.run-inspector-facts strong { margin-top:.14rem; color:#fff; font-size:.69rem; overflow-wrap:anywhere; }
.run-inspector-section { padding-top:.55rem; border-top:1px solid rgba(153,217,230,.15); }.run-inspector-section h3 { margin:0 0 .42rem; color:#eefcff; font-size:.75rem; text-transform:uppercase; letter-spacing:.05em; }.run-inspector-chips { display:flex; flex-wrap:wrap; gap:.3rem; }.run-inspector-chips span { padding:.35rem .45rem; border-radius:999px; background:rgba(53,229,161,.11); color:#c5f8e9; font-size:.62rem; }
.run-inspector-stop-list,.run-inspector-events { display:grid; max-height:145px; gap:.28rem; overflow:auto; }.run-inspector-stop { min-height:36px; padding:.38rem .5rem; border:1px solid rgba(153,217,230,.16); border-left:3px solid #aa8cff; border-radius:8px; background:rgba(229,249,253,.06); color:#e9fbfe; font-size:.65rem; text-align:left; cursor:pointer; }.run-inspector-events span { padding:.3rem .4rem; border-left:3px solid #4bc7ff; color:#c3e4ea; font-size:.62rem; }
.run-inspector-message { display:grid; grid-template-columns:minmax(0,1fr) 100px auto; gap:.35rem; }.run-inspector-message input,.run-inspector-message select { min-height:38px; padding:.38rem .5rem; font-size:.66rem; }.run-inspector-message small { grid-column:1/-1; color:#9fd7cf; }
.run-inspector-actions { display:flex; flex-wrap:wrap; gap:.35rem; padding-top:.55rem; border-top:1px solid rgba(153,217,230,.15); }.run-inspector-actions a { text-decoration:none; }
.map-dispatch-drawer { position:absolute; z-index:930; top:108px; left:18px; display:grid; width:min(410px,calc(100% - 36px)); max-height:calc(100% - 175px); gap:.65rem; overflow:auto; padding:.85rem; border:1px solid rgba(80,218,197,.56); border-radius:16px; background:rgba(3,29,42,.96); color:#eefcff; box-shadow:0 24px 65px rgba(0,7,13,.48); backdrop-filter:blur(16px); }.map-dispatch-drawer[hidden]{display:none}.map-dispatch-drawer>header { display:flex; justify-content:space-between; gap:.6rem; }.map-dispatch-drawer h2 { color:#fff; font-size:1.05rem; }.map-dispatch-drawer form { display:grid; gap:.55rem; }.map-dispatch-drawer label { color:#b7dce4; font-size:.68rem; }.map-dispatch-drawer input,.map-dispatch-drawer select,.map-dispatch-drawer textarea { min-height:40px; padding:.45rem .55rem; }.map-dispatch-drawer .smart-search-results { max-height:180px; overflow:auto; }.map-dispatch-drawer .customer-search-card { width:100%; min-height:42px; padding:.5rem; border:0; border-bottom:1px solid #dbeaec; background:#f4fbfc; color:#294650; text-align:left; }.dispatch-candidate-list { display:grid; gap:.45rem; }.dispatch-candidate { display:grid; gap:.25rem; padding:.55rem; border:1px solid rgba(144,214,228,.2); border-left:4px solid #35e5a1; border-radius:10px; background:rgba(228,249,253,.06); }.dispatch-candidate.ineligible { border-left-color:#ff6b75; }.dispatch-candidate span,.dispatch-candidate small { color:#a9d0d8; font-size:.64rem; }.dispatch-candidate .button { justify-self:start; }
.field-customer-card { margin:.8rem 0; padding:.75rem; border:1px solid rgba(60,199,165,.34); border-radius:14px; background:rgba(8,91,84,.12); }.field-customer-card summary { min-height:44px; padding:.55rem; color:#087d6d; font-weight:900; cursor:pointer; }.field-customer-card form { display:grid; gap:.65rem; }.field-customer-card [data-field-customer-feedback] { color:#166d61; font-weight:800; }
.replay-mode-actions { display:flex; flex-wrap:wrap; align-items:center; gap:.5rem; margin-bottom:.4rem; }.replay-mode-badge { display:inline-flex; min-height:30px; align-items:center; padding:.3rem .6rem; border:1px solid #ffbd52; border-radius:999px; background:#ffad32; color:#382000; font-size:.68rem; font-weight:950; letter-spacing:.08em; }
.observation-row.rejected { border-left-color:#d44755; background:#fff5f6; }
@supports not (backdrop-filter:blur(5px)){.run-inspector-card.idle{background:rgba(3,29,42,.52)}.run-inspector-card.selected,.map-dispatch-drawer{background:#061f2c}}
@media(max-width:1000px){.command-page .command-grid{grid-template-columns:1fr}.command-page .fleet-rail{max-height:360px}.command-page .map-panel{grid-template-rows:auto minmax(620px,1fr) auto}}
@media(max-width:760px){.run-inspector-deck{display:flex;align-items:flex-end;gap:.4rem;inset:auto .5rem 4.6rem;overflow-x:auto;overflow-y:visible;max-width:calc(100% - 1rem)}.run-inspector-card{position:relative!important;top:auto!important;right:auto!important;left:auto!important;flex:0 0 min(286px,84vw);width:auto!important;max-height:29vh}.run-inspector-card.expanded{position:fixed!important;z-index:5400;right:.5rem!important;bottom:.5rem;left:.5rem!important;flex:none;width:auto!important;max-height:min(70vh,680px);border-radius:18px}.run-inspector-header{cursor:default;touch-action:auto}.map-dispatch-drawer{position:fixed;z-index:5400;top:auto;right:.5rem;bottom:.5rem;left:.5rem;width:auto;max-height:72vh;border-radius:18px}.run-inspector-message{grid-template-columns:1fr 92px}.run-inspector-message .button{grid-column:1/-1}.command-page .map-panel{grid-template-rows:auto minmax(520px,1fr) auto}.command-page .fleet-rail{display:none}}

/* Viewport notices: web build 2026.10.29.1, driver and command screens. */
.starice-runtime-notice{position:fixed;inset:0;margin:auto;width:min(460px,calc(100vw - 32px));max-height:calc(100dvh - 32px);overflow:auto;border:1px solid #48c7ff;border-radius:18px;background:#102d40;color:#fff;padding:24px;box-shadow:0 24px 80px #0009;z-index:2147483647}.starice-runtime-notice::backdrop{background:#0008}.starice-runtime-notice h2{font-size:1.35rem;margin:0 0 12px}.starice-runtime-notice p{white-space:pre-wrap;overflow-wrap:anywhere;line-height:1.55;margin:0 0 20px}.starice-runtime-notice button{min-height:44px;min-width:110px}.starice-runtime-notice button:focus-visible{outline:3px solid #fff;outline-offset:4px}.starice-web-build{display:block;font-size:11px;color:#92adba;text-align:right;margin:12px 4px}