/* Trailer Tracker · Dashboard · v0.9.1 · Pablo v0.8 SoT (light/dark) */
:root,
html[data-theme="light"]{
  --dash-teal:#0f766e; --dash-teal-soft:#ccfbf1; --dash-amber:#f59e0b;
  --dash-indigo:#6366f1; --dash-purple:#a855f7; --dash-red:#ef4444;
  --dash-orange:#f97316; --dash-blue:#3b82f6; --dash-pos:#065f46; --dash-neg:#991b1b;
  --dash-card:#fff; --dash-border:#e2e8f0; --dash-muted:#64748b; --dash-fg:#0f172a;
  --dash-bg:#f1f5f9; --dash-tab:#f8fafc; --dash-track:#e2e8f0;
  --dash-side-head:#f8fafc; --dash-future-bg:#fef3c7; --dash-future-fg:#92400e;
  --dash-chip-bg:#fff; --dash-chip-border:#cbd5e1; --dash-chip-fg:#475569;
  --dash-knob-track:#e2e8f0; --dash-empty:#e2e8f0;
  --dash-page:#cbd5e1;
}
html[data-theme="dark"],
body.dash-dark{
  --dash-teal:#14b8a6; --dash-teal-soft:#134e4a; --dash-amber:#f59e0b;
  --dash-indigo:#818cf8; --dash-purple:#a78bfa; --dash-red:#f87171;
  --dash-orange:#fb923c; --dash-blue:#60a5fa; --dash-pos:#34d399; --dash-neg:#f87171;
  --dash-card:#1e293b; --dash-border:#334155; --dash-muted:#94a3b8; --dash-fg:#f1f5f9;
  --dash-bg:#111827; --dash-tab:#0f172a; --dash-track:#334155;
  --dash-side-head:#0f172a; --dash-future-bg:#78350f; --dash-future-fg:#fde68a;
  --dash-chip-bg:#0f172a; --dash-chip-border:#475569; --dash-chip-fg:#94a3b8;
  --dash-knob-track:#0f766e; --dash-empty:#334155;
  --dash-page:#0b1220;
}
html[data-theme="dark"] body,
body.dash-dark{
  background:var(--dash-bg); color:var(--dash-fg);
}
html[data-theme="dark"] .crumbbar,
html[data-theme="dark"] .ident,
html[data-theme="dark"] .dash-head,
html[data-theme="dark"] .dash-tabs,
body.dash-dark .crumbbar,
body.dash-dark .ident,
body.dash-dark .dash-head,
body.dash-dark .dash-tabs{
  background:var(--dash-card); border-color:var(--dash-border); color:var(--dash-fg);
}
html[data-theme="dark"] .app-footer,
body.dash-dark .app-footer{
  background:var(--dash-card); color:var(--dash-muted); border-color:var(--dash-border);
}
body.dash-page .body{padding:.4rem .55rem .45rem; gap:.35rem}
body.dash-page .crumbbar{display:none}

.dash-head{
  background:var(--dash-card); border:1px solid var(--dash-border); border-radius:.45rem;
  padding:.4rem .65rem; display:flex; align-items:center; justify-content:space-between; gap:.6rem; flex-wrap:wrap;
  flex:0 0 auto;
}
.dash-head h1{margin:0; font-size:1.05rem; letter-spacing:-.02em; color:var(--dash-fg)}
.dash-controls{display:flex; align-items:center; gap:.35rem; flex-wrap:wrap}
.dash-chip{
  height:1.55rem; padding:0 .7rem; border-radius:999px; border:1px solid var(--dash-chip-border);
  background:var(--dash-chip-bg); color:var(--dash-chip-fg); font-size:.72rem; font-weight:650; text-decoration:none;
  display:inline-flex; align-items:center; cursor:pointer; font-family:inherit;
}
.dash-chip.on{background:#0f766e; border-color:#0f766e; color:#fff}
html[data-theme="dark"] .dash-chip.on,
body.dash-dark .dash-chip.on{background:#0f766e; border-color:#0f766e; color:#ecfdf5}
.dash-date{
  height:1.55rem; border:1px solid var(--dash-chip-border); border-radius:.3rem; padding:0 .4rem;
  font-size:.72rem; background:var(--dash-chip-bg); color:var(--dash-fg); font-family:inherit; width:7.2rem;
}
.dash-toggle{
  display:inline-flex; align-items:center; gap:.35rem; height:1.55rem; padding:0 .45rem;
  border:1px solid var(--dash-chip-border); border-radius:.35rem; background:var(--dash-chip-bg);
  font-size:.7rem; font-weight:650; color:var(--dash-chip-fg); cursor:pointer; user-select:none;
}
.dash-toggle button{
  border:0; background:transparent; font:inherit; font-weight:700; cursor:pointer; color:inherit; padding:0 .15rem;
}
.dash-toggle button.on{color:#0f766e}
html[data-theme="dark"] .dash-toggle button.on,
body.dash-dark .dash-toggle button.on{color:#5eead4}
.dash-knob{
  width:1.8rem; height:.85rem; border-radius:999px; background:var(--dash-knob-track); position:relative;
  border:1px solid var(--dash-chip-border); padding:0; margin:0; display:inline-block; flex:0 0 auto; cursor:pointer;
}
.dash-knob i{
  position:absolute; top:1px; left:2px; width:.65rem; height:.65rem; border-radius:50%; background:#fff;
  transition:left .15s;
}
.dash-knob.dark i{left:calc(100% - .7rem); background:#ccfbf1}
.dash-knob.dark{background:#0f766e; border-color:#0f766e}

.dash-tabs{
  display:flex; gap:.15rem; border-bottom:1px solid var(--dash-border); background:var(--dash-tab);
  border-radius:.35rem .35rem 0 0; padding:0 .25rem; flex:0 0 auto;
}
.dash-tabs a{
  padding:.45rem .85rem; font-size:.78rem; font-weight:650; color:var(--dash-muted);
  text-decoration:none; border-bottom:2px solid transparent; margin-bottom:-1px;
}
.dash-tabs a.on{color:#0f766e; border-bottom-color:#0f766e; font-weight:800}
html[data-theme="dark"] .dash-tabs a.on,
body.dash-dark .dash-tabs a.on{color:#5eead4; border-bottom-color:#14b8a6}

.dash-split{
  display:grid;
  grid-template-columns:minmax(0,1fr) var(--tbx-split-gutter,6px) minmax(280px,380px);
  gap:0; flex:1 1 auto; min-height:0; height:100%; overflow:hidden;
  align-items:stretch;
}
.dash-main,.dash-rail{min-width:0; min-height:0; overflow:auto; display:flex; flex-direction:column; gap:.45rem}
.dash-main{padding-right:.15rem}
@media (max-width:1100px){
  .dash-split{grid-template-columns:1fr}
  .dash-split > .tbx-split-gutter{display:none}
}

.dcard{
  background:var(--dash-card); border:1px solid var(--dash-border); border-radius:.5rem;
  padding:.55rem .65rem .5rem; display:flex; flex-direction:column; min-height:0;
  box-shadow:0 1px 2px rgba(15,23,42,.04);
}
html[data-theme="dark"] .dcard,
body.dash-dark .dcard{box-shadow:0 1px 2px rgba(0,0,0,.25)}
.dcard h3{
  margin:0 0 .35rem; font-size:.72rem; font-weight:700; color:var(--dash-muted);
  letter-spacing:0; text-transform:none;
}
.dcard .kpi{font-size:1.85rem; font-weight:800; color:var(--dash-fg); line-height:1.05; letter-spacing:-.02em}
.dcard .kpi.sm{font-size:1.35rem}
.dcard .kpi.pos{color:var(--dash-pos)}
.dcard .kpi.neg{color:var(--dash-neg)}
.dcard .sub{font-size:.68rem; color:var(--dash-muted); margin-top:.2rem}
.dcard .delta{font-size:.72rem; font-weight:700; margin-top:.25rem}
.dcard .delta.pos{color:var(--dash-pos)}
.dcard .delta.neg{color:var(--dash-neg)}
.dcard .chart-box{flex:1 1 auto; min-height:70px; position:relative}
.dcard .chart-box.tall{min-height:110px}
.dcard .chart-box.gauge{min-height:100px; max-height:130px}
.dcard .legend{display:flex; flex-direction:column; gap:.35rem; font-size:.72rem; font-weight:650; color:var(--dash-fg)}
.dcard .legend .muted{font-size:.62rem; font-weight:550; color:var(--dash-muted)}
.leg-dot{display:inline-block; width:.55rem; height:.55rem; border-radius:50%; margin-right:.35rem; vertical-align:middle}
.pill{
  display:inline-flex; align-items:center; font-size:.58rem; font-weight:700;
  padding:.08rem .35rem; border-radius:999px; border:1px solid transparent;
}
.pill-ok{background:#ecfdf5; color:#065f46; border-color:#a7f3d0}
.pill-warn{background:#fffbeb; color:#92400e; border-color:#fde68a}
.pill-danger{background:#fef2f2; color:#991b1b; border-color:#fecaca}
.pill-future{background:var(--dash-future-bg); color:var(--dash-future-fg); border-color:var(--dash-amber)}
html[data-theme="dark"] .pill-ok, body.dash-dark .pill-ok{background:#064e3b; color:#6ee7b7; border-color:#065f46}
html[data-theme="dark"] .pill-warn, body.dash-dark .pill-warn{background:#78350f; color:#fde68a; border-color:#b45309}
html[data-theme="dark"] .pill-danger, body.dash-dark .pill-danger{background:#7f1d1d; color:#fca5a5; border-color:#991b1b}

.dash-grid-4{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:.45rem}
.dash-grid-3{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:.45rem}
.dash-row-idle{display:grid; grid-template-columns:1.35fr .9fr 1fr; gap:.45rem}
.dash-fin-r2{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:.45rem}
@media (max-width:1200px){
  .dash-grid-4,.dash-fin-r2{grid-template-columns:repeat(2,minmax(0,1fr))}
  .dash-row-idle,.dash-grid-3{grid-template-columns:1fr}
}

.donut-wrap{display:flex; align-items:center; gap:.65rem; flex:1}
.donut-wrap .chart-box{width:110px; height:110px; flex:0 0 110px}
.gauge-center{position:relative}
.gauge-center .chart-box{height:120px}

.rail-card{flex:0 0 auto}
.rail-card.journal{flex:1 1 auto; min-height:0; display:flex; flex-direction:column}
.rail-card.journal .journal-list{overflow:auto; flex:1 1 auto; min-height:0}
.rail-head{
  display:flex; align-items:center; justify-content:space-between; gap:.4rem;
  padding:.35rem .15rem .4rem; border-bottom:1px solid var(--dash-border); margin-bottom:.3rem;
}
.rail-head h3{margin:0; font-size:.78rem; font-weight:750; color:var(--dash-fg)}
.rail-head .sub{font-size:.62rem; color:var(--dash-muted); font-weight:550}

.evt{padding:.32rem 0; border-bottom:1px solid #f1f5f9}
html[data-theme="dark"] .evt, body.dash-dark .evt{border-bottom-color:#334155}
.evt:last-child{border-bottom:0}
.evt-top{display:flex; align-items:center; gap:.4rem; margin-bottom:.12rem}
.evt-time{font-size:.62rem; font-weight:650; color:var(--dash-muted); width:2.2rem; flex:0 0 auto}
.evt-tag{
  font-size:.58rem; font-weight:700; padding:.06rem .32rem; border-radius:999px; border:1px solid;
}
.tag-pickup{background:#ecfdf5; color:#065f46; border-color:#a7f3d0}
.tag-drop{background:#fff7ed; color:#9a3412; border-color:#fed7aa}
.tag-lease{background:#eff6ff; color:#1e40af; border-color:#bfdbfe}
.tag-maint{background:#fef2f2; color:#991b1b; border-color:#fecaca}
.tag-yard{background:#f5f3ff; color:#6d28d9; border-color:#ddd6fe}
.tag-bill{background:#ecfdf5; color:#115e59; border-color:#99f6e4}
html[data-theme="dark"] .tag-pickup, body.dash-dark .tag-pickup{background:#064e3b; color:#6ee7b7; border-color:#065f46}
html[data-theme="dark"] .tag-drop, body.dash-dark .tag-drop{background:#7c2d12; color:#fdba74; border-color:#9a3412}
html[data-theme="dark"] .tag-lease, body.dash-dark .tag-lease{background:#1e3a8a; color:#93c5fd; border-color:#1d4ed8}
html[data-theme="dark"] .tag-maint, body.dash-dark .tag-maint{background:#7f1d1d; color:#fca5a5; border-color:#991b1b}
html[data-theme="dark"] .tag-yard, body.dash-dark .tag-yard{background:#4c1d95; color:#c4b5fd; border-color:#6d28d9}
html[data-theme="dark"] .tag-bill, body.dash-dark .tag-bill{background:#134e4a; color:#5eead4; border-color:#0f766e}
.evt-l1{font-size:.68rem; font-weight:600; color:var(--dash-fg); margin-left:2.6rem}
.evt-l2{font-size:.62rem; color:var(--dash-muted); margin-left:2.6rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}

.maint-table{width:100%; border-collapse:collapse; font-size:.68rem}
.maint-table th{
  text-align:left; font-size:.55rem; text-transform:uppercase; letter-spacing:.04em;
  color:var(--dash-muted); padding:.15rem .2rem; border-bottom:1px solid var(--dash-border); font-weight:700;
}
.maint-table td{padding:.22rem .2rem; border-bottom:1px solid #f1f5f9; color:var(--dash-fg); vertical-align:top}
html[data-theme="dark"] .maint-table td, body.dash-dark .maint-table td{border-bottom-color:#334155}
.maint-table td.overdue{color:var(--dash-neg); font-weight:700}

.yard-name{font-size:.85rem; font-weight:750; color:var(--dash-fg); margin:.1rem 0 .2rem}
.yard-foot{display:flex; justify-content:space-between; align-items:center; margin-top:.25rem; gap:.3rem}
.mix-row{display:flex; gap:1rem; align-items:center; flex-wrap:wrap}
.mix-row .chart-box{width:130px; height:130px; flex:0 0 130px}
.vendor-box{flex:1 1 220px; min-width:180px}
.empty-ops{font-size:.72rem; color:var(--dash-muted); padding:.35rem 0}