/* HaulFoundry Visual Polish Pass 1
   Presentation-only override. No operational logic or cloud behavior changes. */

:root{
  --hf-bg:#07111f;
  --hf-bg-deep:#050b14;
  --hf-panel:#0c1a2c;
  --hf-panel-2:#10233a;
  --hf-panel-3:#132942;
  --hf-line:rgba(100,174,242,.24);
  --hf-line-strong:rgba(103,190,255,.42);
  --hf-text:#f4f8ff;
  --hf-muted:#a9bad0;
  --hf-accent:#38a8ff;
  --hf-accent-2:#5be3ff;
  --hf-success:#43d9a3;
  --hf-warning:#ffc857;
  --hf-danger:#ff7285;
  --hf-shadow:0 16px 40px rgba(0,0,0,.23);
  --hf-radius:16px;
  --hf-radius-sm:12px;
}

html{background:var(--hf-bg-deep)}
body{
  color:var(--hf-text);
  background:
    radial-gradient(900px 460px at 15% -10%,rgba(34,126,218,.18),transparent 60%),
    radial-gradient(780px 440px at 92% 0%,rgba(45,205,255,.08),transparent 60%),
    linear-gradient(180deg,#081321 0%,#07111f 46%,#060e19 100%);
  min-height:100vh;
}

/* Keep the command area intentionally non-sticky. */
.top-dock,.command-head,.terminalbar{position:static!important;top:auto!important}
.top-dock{
  background:linear-gradient(180deg,rgba(8,20,36,.98),rgba(7,17,31,.96));
  border-bottom:1px solid var(--hf-line);
  box-shadow:0 12px 28px rgba(0,0,0,.16);
}
.command-head{
  min-height:76px;
  padding:14px 22px;
  border-bottom:1px solid rgba(107,175,236,.12);
}
.command-brand{gap:12px}
.brand-mark{
  filter:drop-shadow(0 0 12px rgba(57,171,255,.18));
}
.brand-lockup b{letter-spacing:-.02em;font-size:20px}
.brand-lockup .sub{color:var(--hf-muted);letter-spacing:.02em}

.topnav{gap:7px}
.toplink{
  min-height:40px;
  padding:0 13px;
  border:1px solid transparent;
  border-radius:11px;
  color:#b9c7d9;
  background:transparent;
  transition:background .16s ease,border-color .16s ease,color .16s ease,transform .16s ease;
}
.toplink:hover{
  color:#fff;
  border-color:var(--hf-line);
  background:rgba(62,142,218,.10);
  transform:translateY(-1px);
}
.toplink.on{
  color:#fff;
  border-color:rgba(65,176,255,.38);
  background:linear-gradient(180deg,rgba(40,145,233,.28),rgba(27,104,183,.20));
  box-shadow:inset 0 0 0 1px rgba(111,213,255,.05),0 8px 22px rgba(0,99,190,.13);
}
.user-menu{
  border:1px solid var(--hf-line);
  border-radius:14px;
  background:rgba(16,38,64,.78);
  box-shadow:0 8px 24px rgba(0,0,0,.12);
}
.user-initials{
  background:linear-gradient(135deg,#188de8,#52d8ff);
  color:#03101c;
  font-weight:800;
}

.terminalbar{
  padding:11px 22px 14px;
  background:rgba(7,17,31,.74);
  border-bottom:1px solid rgba(93,159,220,.13);
}
.terminal-switch{
  border:1px solid var(--hf-line);
  background:rgba(11,29,50,.72);
  border-radius:14px;
  padding:9px 12px;
}
.terminal-switch .tiny{color:#71c8ff;letter-spacing:.12em;font-weight:800}

/* Inputs and selects */
input,select,textarea{
  color:var(--hf-text)!important;
  background:#0b192a!important;
  border:1px solid rgba(108,168,221,.28)!important;
  border-radius:11px!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.02);
  transition:border-color .15s ease,box-shadow .15s ease,background .15s ease;
}
input:focus,select:focus,textarea:focus{
  outline:none!important;
  border-color:rgba(67,175,255,.72)!important;
  box-shadow:0 0 0 3px rgba(42,157,239,.13)!important;
  background:#0d1f34!important;
}
input::placeholder,textarea::placeholder{color:#6f829a}

/* Buttons */
.btn,.boardtabs button,.coveragebar button,.exportbar button,.actions button{
  min-height:40px;
  border-radius:11px!important;
  border:1px solid rgba(107,166,219,.30)!important;
  background:linear-gradient(180deg,#102640,#0d1d31)!important;
  color:#dce9f7!important;
  font-weight:700!important;
  letter-spacing:.005em;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.025),0 5px 14px rgba(0,0,0,.10);
  transition:transform .14s ease,border-color .14s ease,background .14s ease,box-shadow .14s ease;
}
.btn:hover,.boardtabs button:hover,.coveragebar button:hover,.exportbar button:hover,.actions button:hover{
  transform:translateY(-1px);
  border-color:rgba(79,184,255,.58)!important;
  background:linear-gradient(180deg,#153252,#10243b)!important;
  box-shadow:0 7px 18px rgba(0,0,0,.14);
}
.btn:active,.boardtabs button:active,.coveragebar button:active,.exportbar button:active,.actions button:active{transform:translateY(0)}
.btn.primary,
.actions .primary{
  color:#04111d!important;
  border-color:rgba(102,224,255,.75)!important;
  background:linear-gradient(135deg,#48d9ff 0%,#2a9fff 55%,#2b82e5 100%)!important;
  box-shadow:0 10px 24px rgba(30,148,232,.22),inset 0 1px 0 rgba(255,255,255,.34)!important;
}
.btn.primary:hover,.actions .primary:hover{
  background:linear-gradient(135deg,#69e3ff 0%,#47b3ff 55%,#3593ed 100%)!important;
}
.btn.danger,.danger{
  color:#ffdce1!important;
  border-color:rgba(255,103,126,.34)!important;
  background:rgba(112,31,49,.28)!important;
}

/* Main layout */
.view{
  padding:18px 22px 34px;
  max-width:1600px;
  margin:0 auto;
}
.view.on{animation:hfFadeIn .14s ease-out}
@keyframes hfFadeIn{from{opacity:.78;transform:translateY(2px)}to{opacity:1;transform:none}}

.section{
  margin-top:18px;
  padding:0;
}
.section h2{
  margin:0;
  font-size:20px;
  line-height:1.25;
  letter-spacing:-.02em;
  color:#f5f9ff;
}
.sub{color:var(--hf-muted)!important}
.tiny{color:#89a0bb}

.boardtabs{
  display:inline-flex;
  gap:5px;
  padding:4px;
  margin-bottom:14px;
  border:1px solid var(--hf-line);
  border-radius:14px;
  background:rgba(8,22,39,.72);
}
.boardtabs button{
  min-width:112px;
  min-height:38px;
  background:transparent!important;
  border-color:transparent!important;
  box-shadow:none!important;
}
.boardtabs button.on{
  color:#fff!important;
  border-color:rgba(76,184,255,.36)!important;
  background:linear-gradient(180deg,rgba(44,153,239,.34),rgba(30,102,178,.26))!important;
  box-shadow:0 7px 18px rgba(0,100,190,.14)!important;
}

.metrics{
  display:grid;
  gap:12px;
  margin:4px 0 16px;
}
.metric{
  min-height:88px;
  padding:16px 17px!important;
  border-radius:var(--hf-radius)!important;
  border:1px solid var(--hf-line)!important;
  background:
    linear-gradient(180deg,rgba(17,40,67,.93),rgba(11,28,48,.94))!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.025),0 10px 26px rgba(0,0,0,.12);
}
.metric b{
  font-size:26px!important;
  letter-spacing:-.035em;
  color:#f7fbff;
}
.metric span{
  margin-top:6px;
  color:#8ea7c2!important;
  letter-spacing:.095em!important;
  font-weight:800!important;
}

.coveragebar,.exportbar,.sortbar{
  gap:8px!important;
  padding:10px!important;
  margin:10px 0!important;
  border:1px solid rgba(89,151,210,.17);
  border-radius:14px;
  background:rgba(8,21,37,.52);
}
.coveragebar{align-items:center}
.coveragebar .btn{background:#0d2036!important}
.badge{
  border-radius:999px!important;
  padding:3px 7px!important;
  font-weight:800;
}
.badge.good{background:rgba(50,205,152,.14)!important;color:#6ce7b8!important;border:1px solid rgba(68,218,164,.22)}
.badge.bad{background:rgba(255,100,127,.13)!important;color:#ff9aaa!important;border:1px solid rgba(255,105,130,.24)}

/* Operational cards / list rows */
.item,.run,.card,
#workorders>div,#dvirs>div,#tires>div,#services>div,#assets>div,#drivers>div,#runs>div{
  border-radius:var(--hf-radius)!important;
}
.item,.run,.card{
  border:1px solid rgba(100,166,226,.20)!important;
  background:linear-gradient(180deg,rgba(14,32,54,.94),rgba(10,25,43,.96))!important;
  box-shadow:0 8px 22px rgba(0,0,0,.10);
  margin-bottom:10px!important;
  transition:border-color .15s ease,background .15s ease,transform .15s ease;
}
.item:hover,.run:hover,.card:hover{
  border-color:rgba(84,181,255,.39)!important;
  background:linear-gradient(180deg,rgba(17,39,65,.98),rgba(11,28,48,.98))!important;
}
.item.uncovered,.run.uncovered{
  border-color:rgba(255,104,126,.38)!important;
  box-shadow:inset 3px 0 0 rgba(255,101,124,.72),0 8px 22px rgba(0,0,0,.10);
}
.row b,.item b,.run b{color:#f4f8ff}

/* Maintenance command center gets the same premium surface language. */
.hf-maint-review-board,
.hf-maint-command,
.hf-maint-command-center,
.hf-maint-review-card,
.hf-maint-alert-card{
  border-radius:var(--hf-radius)!important;
}
.hf-maint-review-board{
  margin:12px 0 18px!important;
}
.hf-maint-review-card,.hf-maint-alert-card{
  border-color:rgba(99,168,229,.22)!important;
  background:linear-gradient(180deg,rgba(14,34,58,.96),rgba(10,26,44,.96))!important;
  box-shadow:0 8px 22px rgba(0,0,0,.10)!important;
}

/* Modals */
.modal{
  backdrop-filter:blur(10px);
  background:rgba(1,7,14,.68)!important;
}
.sheet{
  border:1px solid rgba(104,178,237,.30)!important;
  border-radius:20px!important;
  background:linear-gradient(180deg,#0d1f35 0%,#091727 100%)!important;
  box-shadow:0 28px 70px rgba(0,0,0,.44)!important;
}
.sheet h3{
  margin-top:0;
  color:#f6f9ff;
  font-size:20px;
  letter-spacing:-.02em;
}
.actions{
  padding-top:12px;
  margin-top:14px;
  border-top:1px solid rgba(100,160,215,.14);
}

/* Auth gate */
.hf-auth-gate{
  background:
    radial-gradient(750px 430px at 50% 15%,rgba(31,129,218,.20),transparent 62%),
    linear-gradient(180deg,#07111f,#050b14)!important;
}
.hf-auth-card{
  border-radius:22px!important;
  border:1px solid rgba(93,177,240,.30)!important;
  background:linear-gradient(180deg,rgba(13,31,52,.98),rgba(7,20,35,.98))!important;
  box-shadow:0 30px 80px rgba(0,0,0,.42)!important;
}

/* Scrollbars */
*{scrollbar-width:thin;scrollbar-color:#244b6e transparent}
*::-webkit-scrollbar{width:10px;height:10px}
*::-webkit-scrollbar-thumb{background:#244b6e;border-radius:10px;border:2px solid transparent;background-clip:padding-box}
*::-webkit-scrollbar-track{background:transparent}

@media (max-width:900px){
  .command-head{padding:12px 14px}
  .terminalbar{padding:10px 14px 12px}
  .view{padding:14px 12px 28px}
  .coveragebar,.exportbar,.sortbar{padding:8px!important;border-radius:12px}
  .metric{min-height:78px;padding:13px!important}
  .metric b{font-size:23px!important}
}

@media (max-width:640px){
  .command-head{min-height:66px}
  .brand-lockup b{font-size:18px}
  .toplink{border-radius:10px}
  .view{padding:11px 10px 24px}
  .metrics{gap:8px}
  .metric{border-radius:14px!important}
  .coveragebar,.exportbar,.sortbar{
    background:transparent;
    border-color:transparent;
    padding:3px 0!important;
  }
  .btn,.boardtabs button,.coveragebar button,.exportbar button,.actions button{min-height:42px}
  .sheet{border-radius:18px 18px 0 0!important}
}

/* =========================================================
   HaulFoundry Visual Polish Pass 2
   Calmer hierarchy, flatter surfaces, tighter dispatch layout.
   Presentation-only overrides. No operational logic changes.
   ========================================================= */

:root{
  --hf-panel:#0a1727;
  --hf-panel-2:#0d1d31;
  --hf-panel-3:#102238;
  --hf-line:rgba(104,166,220,.18);
  --hf-line-strong:rgba(88,180,246,.34);
  --hf-shadow:0 10px 26px rgba(0,0,0,.16);
}

/* Calmer overall canvas — less electric blue, more command-center navy. */
body{
  background:
    radial-gradient(900px 420px at 16% -10%,rgba(24,105,177,.13),transparent 62%),
    radial-gradient(700px 360px at 90% 2%,rgba(45,184,231,.055),transparent 64%),
    linear-gradient(180deg,#07111e 0%,#06101b 52%,#050c16 100%);
}

/* Keep all command/header surfaces static and slightly flatter. */
.top-dock,.command-head,.terminalbar{position:static!important;top:auto!important}
.top-dock{
  background:rgba(6,16,28,.97)!important;
  border-bottom:1px solid rgba(102,164,219,.13)!important;
  box-shadow:0 8px 22px rgba(0,0,0,.11)!important;
}
.command-head{
  min-height:70px!important;
  padding:11px 20px!important;
  background:linear-gradient(180deg,rgba(10,27,47,.96),rgba(7,19,33,.96))!important;
}
.brand-mark{filter:none!important}

.command-brand .brand-mark{
  width:230px!important;
  height:auto!important;
  max-height:52px!important;
  object-fit:contain;
  object-position:left center;
}

@media(max-width:900px){
  .command-brand .brand-mark{width:195px!important}
}

@media(max-width:650px){
  .command-brand .brand-mark{width:165px!important}
}
.toplink{
  min-height:37px!important;
  padding:0 12px!important;
  border-radius:10px!important;
  color:#aebed1!important;
}
.toplink:hover{
  background:rgba(42,104,159,.10)!important;
  border-color:rgba(104,171,230,.20)!important;
  box-shadow:none!important;
}
.toplink.on{
  color:#fff!important;
  border-color:rgba(64,173,247,.35)!important;
  background:#123153!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04)!important;
}
.user-menu{
  background:#0d2035!important;
  border-color:rgba(105,170,226,.21)!important;
  box-shadow:none!important;
}

.terminalbar{
  padding:9px 20px 11px!important;
  background:rgba(6,16,28,.88)!important;
}
.terminal-switch{
  padding:8px 11px!important;
  border-radius:12px!important;
  background:#0a1a2c!important;
  border-color:rgba(102,166,222,.18)!important;
  box-shadow:none!important;
}

/* Sidebar: quiet inactive items, clear active item. */
.nav{
  background:linear-gradient(180deg,#071322 0%,#06101b 100%)!important;
  border-right:1px solid rgba(102,166,222,.14)!important;
}
.nav button{
  border:1px solid transparent!important;
  background:transparent!important;
  color:#aebed1!important;
  border-radius:10px!important;
  box-shadow:none!important;
  transition:background .14s ease,border-color .14s ease,color .14s ease!important;
}
.nav button:hover{
  color:#f4f8ff!important;
  background:rgba(33,86,132,.12)!important;
  border-color:rgba(105,171,226,.13)!important;
}
.nav button.on{
  color:#fff!important;
  background:#12385e!important;
  border-color:rgba(65,177,250,.40)!important;
  box-shadow:inset 3px 0 0 #49bfff!important;
}
.nav-brand{
  background:rgba(13,35,58,.45)!important;
  border-color:rgba(93,170,231,.18)!important;
  box-shadow:none!important;
}

/* Tighter content spacing keeps more real dispatch data above the fold. */
.view{
  padding:14px 20px 30px!important;
}
#dispatch .boardtabs{margin:0 0 10px!important}
.metrics{
  gap:10px!important;
  margin:0 0 11px!important;
}
.metric{
  min-height:74px!important;
  padding:12px 14px!important;
  border-radius:14px!important;
  background:#0c1b2e!important;
  border-color:rgba(105,167,221,.18)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.018),0 5px 14px rgba(0,0,0,.08)!important;
}
.metric b{
  font-size:24px!important;
  color:#f4f8ff!important;
}
.metric span{
  margin-top:4px!important;
  color:#8198b1!important;
  letter-spacing:.085em!important;
}

/* Segmented board selector: compact and deliberate. */
.boardtabs{
  gap:3px!important;
  padding:3px!important;
  border-radius:12px!important;
  background:#081726!important;
  border-color:rgba(99,162,219,.17)!important;
  box-shadow:none!important;
}
.boardtabs button{
  min-width:108px!important;
  min-height:35px!important;
  border-radius:9px!important;
  color:#9eb0c4!important;
  background:transparent!important;
}
.boardtabs button.on{
  color:#fff!important;
  background:#163d64!important;
  border-color:rgba(74,183,255,.36)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.035)!important;
}

/* Default buttons are intentionally secondary. */
.btn,.coveragebar button,.exportbar button,.actions button{
  min-height:38px!important;
  border-radius:10px!important;
  color:#c7d6e7!important;
  background:#0d2034!important;
  border-color:rgba(106,166,217,.22)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.018)!important;
}
.btn:hover,.coveragebar button:hover,.exportbar button:hover,.actions button:hover{
  transform:none!important;
  color:#eff7ff!important;
  background:#112b46!important;
  border-color:rgba(85,181,247,.38)!important;
  box-shadow:none!important;
}
.btn.primary,.actions .primary{
  color:#03101a!important;
  background:linear-gradient(135deg,#63e4ff 0%,#43baff 50%,#2d91e8 100%)!important;
  border-color:rgba(104,224,255,.68)!important;
  box-shadow:0 7px 18px rgba(29,139,214,.18),inset 0 1px 0 rgba(255,255,255,.25)!important;
}

/* Action Center: visually grouped, but no longer nine glowing primary-looking buttons. */
.coveragebar{
  display:grid!important;
  grid-template-columns:repeat(5,minmax(0,1fr))!important;
  gap:7px!important;
  padding:9px!important;
  margin:0 0 13px!important;
  border-radius:13px!important;
  background:#081726!important;
  border-color:rgba(99,160,214,.15)!important;
  box-shadow:none!important;
}
.coveragebar button{
  min-height:38px!important;
  background:#0c1e32!important;
  border-color:rgba(100,160,210,.17)!important;
  box-shadow:none!important;
}
.coveragebar button:hover{
  background:#102840!important;
  border-color:rgba(74,174,241,.31)!important;
}
#coverageBtn{
  border-color:rgba(255,111,132,.28)!important;
}
#operationsBtn{
  border-color:rgba(255,195,82,.22)!important;
}
.badge{
  min-width:20px;
  text-align:center;
}

/* Dispatch section heading is the hand-off from overview to work. */
#dispatch .section{
  margin-top:8px!important;
  margin-bottom:7px!important;
}
#dispatch .section h2{
  font-size:19px!important;
}
#dispatch .section > .btn{
  min-height:38px!important;
  padding-inline:16px!important;
  color:#03101a!important;
  background:linear-gradient(135deg,#63e4ff 0%,#43baff 50%,#2d91e8 100%)!important;
  border-color:rgba(104,224,255,.68)!important;
  box-shadow:0 7px 18px rgba(29,139,214,.17)!important;
}

/* Export is a utility, not the main action. */
.exportbar{
  display:flex!important;
  align-items:center!important;
  justify-content:flex-start!important;
  flex-wrap:wrap!important;
  gap:7px!important;
  padding:7px 0!important;
  margin:0 0 7px!important;
  background:transparent!important;
  border:0!important;
  border-radius:0!important;
}
.exportbar .btn{
  flex:0 0 auto!important;
  width:auto!important;
  min-width:128px!important;
  padding:0 15px!important;
  min-height:36px!important;
  background:#0a1b2d!important;
  color:#aebfd2!important;
  border-color:rgba(102,163,216,.17)!important;
  box-shadow:none!important;
}
.exportbar .btn:hover{
  color:#eaf4ff!important;
  background:#0e263f!important;
}
.exportstatus{margin-left:4px}

.sortbar{
  padding:0!important;
  margin:0 0 10px!important;
  border:0!important;
  background:transparent!important;
}
.sortbar select{
  max-width:260px!important;
  min-height:36px!important;
  background:#091a2c!important;
}

/* List cards: flatter, denser, clearer separation. */
.item,.run,.card{
  border-radius:13px!important;
  background:#0a192a!important;
  border-color:rgba(98,157,208,.17)!important;
  box-shadow:0 4px 12px rgba(0,0,0,.075)!important;
  margin-bottom:8px!important;
}
.item:hover,.run:hover,.card:hover{
  transform:none!important;
  background:#0c1e32!important;
  border-color:rgba(78,176,242,.31)!important;
}
.item.uncovered,.run.uncovered{
  border-color:rgba(255,104,126,.33)!important;
  box-shadow:inset 3px 0 0 rgba(255,101,124,.65),0 4px 12px rgba(0,0,0,.07)!important;
}

/* Maintenance follows the same quieter visual language. */
.hf-maint-review-card,.hf-maint-alert-card{
  background:#0a192b!important;
  border-color:rgba(97,158,211,.18)!important;
  box-shadow:0 4px 12px rgba(0,0,0,.075)!important;
}

/* Inputs: less glow, crisp focus only when interacting. */
input,select,textarea{
  background:#091a2b!important;
  border-color:rgba(103,163,214,.22)!important;
  box-shadow:none!important;
}
input:focus,select:focus,textarea:focus{
  background:#0b2035!important;
  border-color:rgba(73,180,252,.58)!important;
  box-shadow:0 0 0 3px rgba(53,165,240,.085)!important;
}

/* Modals stay premium, but flatter than Pass 1. */
.sheet{
  background:linear-gradient(180deg,#0c1d31 0%,#081523 100%)!important;
  border-color:rgba(103,174,231,.24)!important;
  box-shadow:0 24px 64px rgba(0,0,0,.40)!important;
}

@media (max-width:1100px){
  .coveragebar{grid-template-columns:repeat(3,minmax(0,1fr))!important}
}

@media (max-width:900px){
  .command-head{padding:10px 14px!important}
  .terminalbar{padding:8px 14px 10px!important}
  .view{padding:12px 12px 26px!important}
  .coveragebar{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .metric{min-height:70px!important;padding:11px 12px!important}
}

@media (max-width:640px){
  .view{padding:10px 9px 22px!important}
  .coveragebar{
    grid-template-columns:1fr 1fr!important;
    gap:6px!important;
    padding:7px!important;
    background:#071523!important;
    border:1px solid rgba(99,160,214,.13)!important;
  }
  .coveragebar button{min-height:42px!important}
  .exportbar .btn{min-width:0!important;flex:1 1 0!important}
  .sortbar select{max-width:none!important;width:100%!important}
}

/* =========================================================
   HaulFoundry Visual Polish Pass 3
   Final hierarchy + cross-view consistency.
   Presentation-only overrides. No operational logic changes.
   ========================================================= */

/* Slightly quieter frame and overview surfaces. */
.terminalbar{
  padding:7px 20px 9px!important;
}
.terminal-switch{
  padding:7px 10px!important;
}
.metric{
  border-color:rgba(104,166,220,.135)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.014),0 3px 10px rgba(0,0,0,.055)!important;
}

/* Action Center: compact, useful, but visually subordinate to active work. */
.coveragebar{
  gap:6px!important;
  padding:7px!important;
  margin:0 0 10px!important;
  border-color:rgba(99,160,214,.11)!important;
  background:#071522!important;
}
.coveragebar button{
  min-height:35px!important;
  background:#0a1b2c!important;
  border-color:rgba(100,160,210,.14)!important;
  color:#afc0d3!important;
  font-size:12px!important;
  font-weight:700!important;
}
.coveragebar button:hover{
  color:#eef7ff!important;
  background:#0d2339!important;
  border-color:rgba(76,173,239,.27)!important;
}
/* Operations can indicate attention without reading like the primary CTA. */
#operationsBtn{
  color:#d8c79f!important;
  background:rgba(56,43,20,.22)!important;
  border-color:rgba(228,178,72,.28)!important;
  box-shadow:inset 3px 0 0 rgba(236,182,66,.58)!important;
}
#operationsBtn:hover{
  color:#ffe7ae!important;
  background:rgba(67,50,21,.30)!important;
  border-color:rgba(235,187,80,.38)!important;
}
#operationsBtn .badge,
#operationsCount{
  color:#ffd980!important;
  background:rgba(223,161,43,.13)!important;
  border-color:rgba(235,183,74,.24)!important;
}

/* Dispatch hand-off: tighter header spacing and stronger content separation. */
#dispatch .section{
  margin-top:6px!important;
  margin-bottom:5px!important;
}
#dispatch .section h2{
  font-size:18px!important;
  line-height:1.2!important;
}
.exportbar{
  padding:5px 0!important;
  margin:0 0 5px!important;
}
.sortbar{
  margin:0 0 7px!important;
}

/* Run/list rows get a clearer layer above the page without returning to heavy glow. */
.item,.run,.card{
  background:#0b1b2d!important;
  border-color:rgba(107,166,217,.19)!important;
  box-shadow:0 3px 10px rgba(0,0,0,.08)!important;
}
.item:hover,.run:hover,.card:hover{
  background:#0e2237!important;
  border-color:rgba(83,177,239,.31)!important;
}
#runs .run,#runs .item,#runs>div{
  margin-bottom:7px!important;
}
#runs .run{
  padding-top:10px!important;
  padding-bottom:10px!important;
}
#runs .run b,
#runs .run-title,
#runs .item b{
  font-weight:760!important;
  letter-spacing:-.008em!important;
  color:#f4f8ff!important;
}
#runs .sub,
#runs .tiny{
  color:#91a8c1!important;
  line-height:1.35!important;
}

/* Pills and status chips: quieter capsule treatment with crisp text. */
.badge{
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  min-height:20px!important;
  padding:2px 7px!important;
  border-radius:999px!important;
  font-size:10px!important;
  line-height:1!important;
  font-weight:850!important;
  letter-spacing:.045em!important;
  text-transform:uppercase;
  box-shadow:none!important;
}
.badge.good{
  color:#8cebc8!important;
  background:rgba(42,176,127,.11)!important;
  border:1px solid rgba(77,209,160,.20)!important;
}
.badge.bad{
  color:#ffabb7!important;
  background:rgba(214,67,90,.11)!important;
  border:1px solid rgba(245,101,124,.22)!important;
}
.badge.warn,
.badge.warning{
  color:#ffd98a!important;
  background:rgba(202,145,39,.11)!important;
  border:1px solid rgba(235,181,74,.21)!important;
}

/* Buttons across non-dispatch views share the same hierarchy. */
#driversView .section>.btn.primary,
#fleet .section>.btn.primary,
#maint .section>.btn.primary,
#costs .section>.btn.primary{
  color:#03101a!important;
  background:linear-gradient(135deg,#61ddfb 0%,#42b7f8 52%,#2f8fe1 100%)!important;
  border-color:rgba(99,216,249,.60)!important;
  box-shadow:0 5px 14px rgba(28,127,198,.13)!important;
}
#driversView .section,
#fleet .section,
#maint .section,
#costs .section{
  margin-top:13px!important;
}
#driversView .section h2,
#fleet .section h2,
#maint .section h2,
#costs .section h2{
  font-size:18px!important;
}

/* Generated operational cards across Drivers / Fleet / Maintenance / Costs. */
#drivers>div,
#assets>div,
#workorders>div,
#dvirs>div,
#tires>div,
#services>div,
#fuel>div,
#docs>div{
  background:#0b1b2d!important;
  border:1px solid rgba(104,164,215,.18)!important;
  border-radius:13px!important;
  box-shadow:0 3px 10px rgba(0,0,0,.07)!important;
}
#drivers>div:hover,
#assets>div:hover,
#workorders>div:hover,
#dvirs>div:hover,
#tires>div:hover,
#services>div:hover,
#fuel>div:hover,
#docs>div:hover{
  border-color:rgba(83,177,239,.29)!important;
  background:#0d2035!important;
}

/* Maintenance cards match the rest of the product family. */
.hf-maint-review-board{
  margin:9px 0 14px!important;
}
.hf-maint-review-card,.hf-maint-alert-card{
  background:#0b1b2d!important;
  border-color:rgba(103,164,216,.18)!important;
  box-shadow:0 3px 10px rgba(0,0,0,.07)!important;
}

/* Settings reads as a designed control surface rather than a stack of generic cards. */
#settings>.card{
  padding:16px!important;
  background:#0a192a!important;
  border:1px solid rgba(103,163,214,.17)!important;
  box-shadow:0 4px 12px rgba(0,0,0,.07)!important;
}
#settings>.card+.card{
  margin-top:12px!important;
}
.appearance-preview{
  border-color:rgba(99,165,220,.20)!important;
  background:#081726!important;
  border-radius:12px!important;
}

/* Cleaner control density throughout. */
input,select,textarea{
  border-radius:10px!important;
}
select{
  min-height:36px;
}
.btn{
  font-size:12px!important;
}

@media (max-width:900px){
  .terminalbar{padding:7px 14px 9px!important}
  .coveragebar{padding:6px!important;margin-bottom:9px!important}
  #runs .run{padding-top:9px!important;padding-bottom:9px!important}
}

@media (max-width:640px){
  .terminalbar{padding:6px 10px 8px!important}
  .coveragebar{
    gap:5px!important;
    padding:6px!important;
    margin-bottom:8px!important;
  }
  .coveragebar button{min-height:40px!important;font-size:11px!important}
  .metric{border-color:rgba(104,166,220,.14)!important}
  #settings>.card{padding:13px!important}
}