/* TruckerProfit CRM — Dispatcher Console. Desktop-first. Dark theme default. */
.disp-page { padding: var(--sp-32) var(--content-pad-x); max-width: var(--page-max); margin: 0 auto; }
.disp-hero { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--sp-32); padding-bottom: var(--sp-32); border-bottom: 1px solid var(--border-subtle); margin-bottom: var(--sp-48); }
.disp-hero h1 { font-family: var(--font-display); font-weight: var(--fw-display-bold); font-size: var(--fs-40); letter-spacing: var(--ls-display); margin: 0; color: var(--text-primary); }
.disp-hero .disp-sub { margin-top: var(--sp-8); color: var(--text-muted); font-size: var(--fs-15); }
.disp-role-pill { display: inline-flex; align-items: center; gap: var(--sp-8); padding: 6px 14px; background: rgba(212,168,75,0.12); color: var(--gold); border: 1px solid rgba(212,168,75,0.32); border-radius: var(--radius-pill); font-family: var(--font-mono); font-size: var(--fs-12); letter-spacing: var(--ls-wide); text-transform: uppercase; }
.kpi-band { display: grid; grid-template-columns: repeat(6, 1fr); gap: var(--sp-24); margin-bottom: var(--sp-80); }
.kpi-card { padding: var(--sp-24); border: 1px solid var(--border-default); border-radius: var(--radius-lg); background: var(--bg-surface); display: flex; flex-direction: column; gap: var(--sp-8); }
.kpi-card .label { color: var(--text-muted); font-size: var(--fs-12); text-transform: uppercase; letter-spacing: var(--ls-wide); font-family: var(--font-mono); }
.kpi-card .value { font-family: var(--font-display); font-weight: var(--fw-display-bold); font-size: var(--fs-40); color: var(--text-primary); line-height: 1; }
.kpi-card .delta { color: var(--text-muted); font-size: var(--fs-13); }
.kpi-card.alert .value { color: var(--danger); }
.kpi-card.warn .value { color: var(--warning); }
@media (max-width:1280px){.kpi-band{grid-template-columns:repeat(3,1fr);}}
@media (max-width:720px){.kpi-band{grid-template-columns:1fr 1fr;gap:var(--sp-12);margin-bottom:var(--sp-32);}}
.disp-section { margin-bottom: var(--sp-80); }
.disp-section-head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: var(--sp-24); }
.disp-section-head h2 { font-family: var(--font-display); font-weight: var(--fw-display-bold); font-size: var(--fs-24); margin: 0; color: var(--text-primary); }
.disp-section-head .ctx { color: var(--text-muted); font-size: var(--fs-13); font-family: var(--font-mono); }
.disp-table { width: 100%; border-collapse: collapse; background: var(--bg-surface); border: 1px solid var(--border-default); border-radius: var(--radius-lg); overflow: hidden; }
.disp-table thead th { text-align: left; padding: var(--sp-12) var(--sp-16); font-family: var(--font-mono); font-size: var(--fs-12); text-transform: uppercase; letter-spacing: var(--ls-wide); color: var(--text-muted); border-bottom: 1px solid var(--border-default); background: rgba(255,255,255,0.02); }
.disp-table tbody td { padding: var(--sp-16); border-bottom: 1px solid var(--border-subtle); color: var(--text-primary); font-size: var(--fs-14); }
.disp-table tbody tr:last-child td { border-bottom: 0; }
.disp-table tbody tr:hover { background: var(--bg-hover); cursor: pointer; }
.cell-num { font-family: var(--font-mono); color: var(--gold); }
.cell-muted { color: var(--text-muted); font-size: var(--fs-13); }
.chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; font-size: var(--fs-12); font-family: var(--font-mono); text-transform: uppercase; letter-spacing: var(--ls-wide); border-radius: var(--radius-pill); border: 1px solid transparent; }
.chip.green { background: rgba(0,208,132,0.12); color: var(--success); border-color: rgba(0,208,132,0.32); }
.chip.amber { background: rgba(245,166,35,0.12); color: var(--warning); border-color: rgba(245,166,35,0.32); }
.chip.red { background: rgba(229,72,77,0.12); color: var(--danger); border-color: rgba(229,72,77,0.32); }
.chip.gold { background: rgba(212,168,75,0.12); color: var(--gold); border-color: rgba(212,168,75,0.32); }
.chip.muted { background: rgba(245,239,224,0.06); color: var(--text-muted); border-color: var(--border-default); }
.dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; }
.dot.green { background: var(--success); box-shadow: 0 0 6px rgba(0,208,132,0.6); }
.dot.amber { background: var(--warning); box-shadow: 0 0 6px rgba(245,166,35,0.6); }
.dot.red { background: var(--danger); box-shadow: 0 0 6px rgba(229,72,77,0.6); animation: pulse 1.6s infinite; }
@keyframes pulse { 0%,100%{opacity:1;}50%{opacity:0.4;} }
.fleet-shell { display: grid; grid-template-columns: 1fr 420px; gap: 0; height: calc(100vh - var(--header-h)); background: var(--bg-base); }
#fleet-map { height: 100%; background: var(--midnight); border-right: 1px solid var(--border-default); }
.fleet-panel { height: 100%; overflow-y: auto; padding: var(--sp-24); background: var(--bg-surface); }
.fleet-panel h2 { font-family: var(--font-display); font-size: var(--fs-20); margin: 0 0 var(--sp-16); color: var(--text-primary); }
.fleet-row { display: grid; grid-template-columns: auto 1fr auto; gap: var(--sp-12); align-items: center; padding: var(--sp-12); border: 1px solid var(--border-subtle); border-radius: var(--radius-md); margin-bottom: var(--sp-8); cursor: pointer; background: var(--bg-elevated); transition: border-color var(--dur-fast); }
.fleet-row:hover { border-color: var(--gold); }
.fleet-row .truck { font-family: var(--font-mono); color: var(--gold); font-size: var(--fs-13); }
.fleet-row .driver { font-size: var(--fs-14); color: var(--text-primary); }
.fleet-row .lane { font-size: var(--fs-12); color: var(--text-muted); }
.fleet-row .eta { font-family: var(--font-mono); font-size: var(--fs-12); color: var(--text-secondary); }
.leaflet-container { background: #0A1628; }
.leaflet-tile-pane { filter: invert(0.92) hue-rotate(180deg) brightness(0.85) contrast(0.95); }
.leaflet-control-attribution { background: rgba(3,13,28,0.6) !important; color: var(--text-muted) !important; }
.leaflet-control-attribution a { color: var(--gold) !important; }
.truck-marker { width: 22px; height: 22px; border-radius: 50%; border: 2px solid #fff; box-shadow: 0 2px 8px rgba(0,0,0,0.5); display: flex; align-items: center; justify-content: center; font-family: var(--font-mono); font-size: 9px; color: #fff; font-weight: bold; }
.truck-marker.green { background: var(--success); }
.truck-marker.amber { background: var(--warning); }
.truck-marker.red { background: var(--danger); animation: pulse 1.6s infinite; }
.drawer-backdrop { position: fixed; inset: 0; background: var(--bg-overlay); z-index: var(--z-modal-backdrop); display: none; }
.drawer-backdrop.open { display: block; }
.drawer { position: fixed; top: 0; right: 0; bottom: 0; width: 480px; background: var(--bg-surface); border-left: 1px solid var(--border-default); box-shadow: var(--shadow-xl); z-index: var(--z-modal); transform: translateX(100%); transition: transform var(--dur-base) var(--ease-out); overflow-y: auto; padding: var(--sp-24); }
.drawer.open { transform: translateX(0); }
.drawer-close { position: absolute; top: var(--sp-16); right: var(--sp-16); background: transparent; border: 0; color: var(--text-muted); cursor: pointer; font-size: var(--fs-20); }
.kanban { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: var(--sp-24); }
.kanban-col { background: var(--bg-surface); border: 1px solid var(--border-default); border-radius: var(--radius-lg); padding: var(--sp-16); min-height: 320px; }
.kanban-col h3 { display: flex; align-items: center; justify-content: space-between; font-family: var(--font-mono); font-size: var(--fs-12); text-transform: uppercase; letter-spacing: var(--ls-wide); color: var(--text-muted); margin: 0 0 var(--sp-16); }
.ex-card { background: var(--bg-elevated); border: 1px solid var(--border-subtle); border-radius: var(--radius-md); padding: var(--sp-12); margin-bottom: var(--sp-12); cursor: pointer; transition: border-color var(--dur-fast); }
.ex-card:hover { border-color: var(--gold); }
.ex-card .ex-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--sp-8); }
.ex-card .ex-num { font-family: var(--font-mono); color: var(--gold); font-size: var(--fs-13); }
.ex-card .ex-desc { color: var(--text-primary); font-size: var(--fs-14); line-height: var(--lh-snug); }
.ex-card .ex-meta { color: var(--text-muted); font-size: var(--fs-12); margin-top: var(--sp-8); font-family: var(--font-mono); }
.coverage-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: var(--sp-32); }
.coverage-grid .col { background: var(--bg-surface); border: 1px solid var(--border-default); border-radius: var(--radius-lg); padding: var(--sp-24); }
.coverage-grid h3 { font-family: var(--font-display); font-size: var(--fs-18); margin: 0 0 var(--sp-16); color: var(--text-primary); }
.msg-shell { display: grid; grid-template-columns: 320px 1fr; height: calc(100vh - var(--header-h)); background: var(--bg-base); }
.msg-threads { border-right: 1px solid var(--border-default); overflow-y: auto; }
.msg-thread { padding: var(--sp-16); border-bottom: 1px solid var(--border-subtle); cursor: pointer; }
.msg-thread:hover, .msg-thread.active { background: var(--bg-hover); }
.msg-thread .name { font-weight: var(--fw-medium); color: var(--text-primary); }
.msg-thread .last { color: var(--text-muted); font-size: var(--fs-12); margin-top: 4px; }
.msg-pane { display: flex; flex-direction: column; background: var(--bg-surface); }
.msg-history { flex: 1; overflow-y: auto; padding: var(--sp-24); }
.msg-bubble { padding: 10px 14px; border-radius: var(--radius-md); margin-bottom: var(--sp-8); max-width: 70%; line-height: var(--lh-snug); }
.msg-bubble.in { background: var(--bg-elevated); }
.msg-bubble.out { background: rgba(212,168,75,0.16); color: var(--gold-soft); margin-left: auto; }
.msg-compose { display: flex; gap: var(--sp-8); padding: var(--sp-16); border-top: 1px solid var(--border-default); }
.msg-compose textarea { flex: 1; resize: none; padding: 10px 12px; background: var(--bg-input); color: var(--text-primary); border: 1px solid var(--border-default); border-radius: var(--radius-md); font-family: var(--font-body); font-size: var(--fs-14); }
.btn-disp-gold { background: var(--gold); color: var(--navy); border: 0; padding: 10px 18px; border-radius: var(--radius-md); font-family: var(--font-body); font-weight: var(--fw-bold); font-size: var(--fs-14); cursor: pointer; transition: background var(--dur-fast); }
.btn-disp-gold:hover { background: var(--gold-soft); }
.btn-disp-ghost { background: transparent; color: var(--text-secondary); border: 1px solid var(--border-default); padding: 10px 18px; border-radius: var(--radius-md); font-family: var(--font-body); font-size: var(--fs-14); cursor: pointer; }
.btn-disp-ghost:hover { border-color: var(--gold); color: var(--gold); }
.mobile-banner { display: none; background: rgba(212,168,75,0.08); color: var(--gold); font-size: var(--fs-12); padding: var(--sp-8) var(--sp-16); text-align: center; font-family: var(--font-mono); letter-spacing: var(--ls-wide); text-transform: uppercase; border-bottom: 1px solid rgba(212,168,75,0.24); }
@media (max-width:720px){ .mobile-banner { display: block; } .disp-hero { flex-direction: column; align-items: flex-start; gap: var(--sp-16); } .disp-hero h1 { font-size: var(--fs-32); } .fleet-shell, .msg-shell { grid-template-columns: 1fr; height: auto; } .fleet-panel { max-height: 50vh; } #fleet-map { height: 45vh; } .kanban, .coverage-grid { grid-template-columns: 1fr; } }
.empty-state { text-align: center; padding: var(--sp-48) var(--sp-24); color: var(--text-muted); font-size: var(--fs-14); }
.empty-state h3 { color: var(--text-secondary); font-family: var(--font-display); margin: 0 0 var(--sp-8); }
.disp-spinner { width: 24px; height: 24px; border: 2px solid var(--border-default); border-top-color: var(--gold); border-radius: 50%; animation: disp-spin 0.8s linear infinite; display: inline-block; }
@keyframes disp-spin { to { transform: rotate(360deg); } }
.alerts-feed { background: var(--bg-surface); border: 1px solid var(--border-default); border-radius: var(--radius-lg); padding: var(--sp-24); }
.alerts-feed .item { display: grid; grid-template-columns: auto 1fr auto; gap: var(--sp-16); padding: var(--sp-16) 0; border-bottom: 1px solid var(--border-subtle); }
.alerts-feed .item:last-child { border-bottom: 0; padding-bottom: 0; }
.alerts-feed .item .when { font-family: var(--font-mono); color: var(--text-muted); font-size: var(--fs-12); }
.qa-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-16); margin-bottom: var(--sp-48); }
.qa-card { padding: var(--sp-24); background: var(--bg-surface); border: 1px solid var(--border-default); border-radius: var(--radius-lg); text-decoration: none; color: var(--text-primary); transition: border-color var(--dur-fast); }
.qa-card:hover { border-color: var(--gold); }
.qa-card .title { font-family: var(--font-display); font-size: var(--fs-18); margin-bottom: var(--sp-4); }
.qa-card .sub { color: var(--text-muted); font-size: var(--fs-13); }
@media (max-width:1024px){ .qa-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width:520px){ .qa-grid { grid-template-columns: 1fr; } }
.filter-bar { display: flex; gap: var(--sp-12); margin-bottom: var(--sp-24); flex-wrap: wrap; }
.filter-bar select, .filter-bar input { background: var(--bg-input); border: 1px solid var(--border-default); border-radius: var(--radius-md); padding: 8px 12px; color: var(--text-primary); font-family: var(--font-body); font-size: var(--fs-14); }
.bucket-tabs { display: flex; gap: var(--sp-4); margin-bottom: var(--sp-24); border-bottom: 1px solid var(--border-default); }
.bucket-tabs button { background: transparent; border: 0; padding: var(--sp-12) var(--sp-16); color: var(--text-muted); cursor: pointer; font-family: var(--font-mono); font-size: var(--fs-13); text-transform: uppercase; letter-spacing: var(--ls-wide); border-bottom: 2px solid transparent; }
.bucket-tabs button.active { color: var(--gold); border-bottom-color: var(--gold); }
.chart-card { background: var(--bg-surface); border: 1px solid var(--border-default); border-radius: var(--radius-lg); padding: var(--sp-24); margin-bottom: var(--sp-24); }