/* Fleet Tracker — "dispatch yard" theme: asphalt, safety-amber, hazard stripes, condensed signage type.
   Accent + light/dark are driven by <html data-accent> and data-bs-theme (Bootstrap 5.3). */
:root {
  --sidebar-w: 252px; --radius: 8px;
  --f-display: "Big Shoulders Display", "Barlow Condensed", "Arial Narrow", Impact, sans-serif;
  --f-body: "Schibsted Grotesk", "Segoe UI", system-ui, sans-serif;
  --f-brand: "Archivo", "Arial Black", Impact, sans-serif;
  --f-mono: "Spline Sans Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  /* default accent = company orange; the others override below */
  --accent: #f26a1b; --accent-rgb: 242,106,27; --accent-ink: #1f0d00;
}
html[data-accent=orange]  { --accent:#f26a1b; --accent-rgb:242,106,27; --accent-ink:#1f0d00; }
html[data-accent=amber]   { --accent:#f2b100; --accent-rgb:242,177,0;  --accent-ink:#1a1300; }
html[data-accent=cobalt]  { --accent:#3366ff; --accent-rgb:51,102,255; --accent-ink:#ffffff; }
html[data-accent=teal]    { --accent:#0b8478; --accent-rgb:11,132,120; --accent-ink:#ffffff; }
html[data-accent=crimson] { --accent:#d6264a; --accent-rgb:214,38,74;  --accent-ink:#ffffff; }

html[data-bs-theme=light] { --logo-navy:#1f2b3b; --logo-rust:#a4512c;
  --page-bg:#ece8dd; --dot:rgba(40,30,0,.09); --card-bg:#fbfaf5; --soft:#f2efe4; --line:#d8d1be; --ink-2:#6b6552;
  --link: color-mix(in srgb, var(--accent) 62%, #000); --mark: color-mix(in srgb, var(--accent) 86%, #000);
  --shadow: 0 1px 0 rgba(255,255,255,.7) inset, 0 1px 2px rgba(40,30,0,.08), 0 8px 22px -12px rgba(40,30,0,.25);
  --bs-body-bg:#ece8dd; --bs-body-color:#23201a; --bs-border-color:#d8d1be;
}
html[data-bs-theme=dark] {
  --page-bg:#0e0f11; --dot:rgba(255,255,255,.05); --card-bg:#17181c; --soft:#1f2126; --line:#2b2d33; --ink-2:#9a9788;
  --link: color-mix(in srgb, var(--accent) 80%, #fff); --mark: var(--accent);
  --shadow: 0 1px 0 rgba(255,255,255,.04) inset, 0 10px 26px -14px rgba(0,0,0,.8);
  --bs-body-bg:#0e0f11; --bs-body-color:#dedbd0; --bs-border-color:#2b2d33; --bs-secondary-color: #9a9788;
}
html { --bs-primary: var(--accent); --bs-primary-rgb: var(--accent-rgb); --bs-link-color: var(--link); --bs-link-color-rgb: var(--accent-rgb);
       --bs-link-hover-color: var(--bs-body-color); --bs-border-radius: 6px; --bs-body-font-family: var(--f-body); }
body { font-family: var(--f-body); font-size: .93rem; background-color: var(--page-bg);
  background-image: radial-gradient(1100px 520px at 85% -8%, rgba(var(--accent-rgb), .13), transparent 70%), radial-gradient(var(--dot) 1px, transparent 1.2px);
  background-size: auto, 20px 20px; background-attachment: fixed; }
a { text-decoration: none; }
a:where(:not(.btn):not(.side-link):not(.list-group-item):not(.stat-tile):not(.hbar):not(.brand):not(.ev):not(.dropdown-item)) { color: var(--link); }
a:hover { color: var(--bs-body-color) !important; }
.hazard { background: repeating-linear-gradient(-45deg, var(--accent) 0 9px, #101010 9px 18px); }
code { font-family: var(--f-mono); color: var(--link); }

/* ---------- sidebar ---------- */
.sidebar { position: fixed; inset: 0 auto 0 0; width: var(--sidebar-w); z-index: 1040; display: flex; flex-direction: column; padding: 0 .8rem 1rem;
  background: linear-gradient(180deg, #121316, #0a0b0d); color: #b9b6a8; overflow-y: auto; transition: transform .2s; border-right: 1px solid #23252a; }
.sidebar::before { content: ""; display: block; height: 7px; margin: 0 -.8rem 1rem; background: repeating-linear-gradient(-45deg, var(--accent) 0 9px, #0a0b0d 9px 18px); }
.sidebar .brand { display: flex; align-items: center; gap: .7rem; color: #fff; padding: .2rem .5rem 1rem; }
.sidebar .brand img { width: 46px; height: 46px; flex: none; }
.sidebar .brand span { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.sidebar .brand b { font-family: var(--f-brand); font-stretch: 125%; font-weight: 900; font-size: 1.12rem; letter-spacing: .01em; line-height: 1; color: #f4f1e8; text-transform: uppercase; }
.sidebar .brand small { font-family: var(--f-brand); font-stretch: 125%; font-weight: 700; font-size: .62rem; letter-spacing: .28em; text-transform: uppercase; color: #d9764a; line-height: 1; }
.nav-group { font-family: var(--f-mono); font-size: .64rem; letter-spacing: .16em; text-transform: uppercase; color: #6c6a5f; margin: 1.2rem .75rem .4rem; }
.side-link { position: relative; display: flex; align-items: center; gap: .7rem; padding: .52rem .75rem; border-radius: 6px; color: #b9b6a8; margin-bottom: 2px; transition: background .15s, color .15s, padding .15s; }
.side-link i { font-size: 1.05rem; width: 1.2rem; text-align: center; }
.side-link:hover { background: rgba(255,255,255,.06); color: #fff; padding-left: .95rem; }
.side-link.active { background: rgba(var(--accent-rgb), .14); color: #fff; }
.side-link.active::before { content: ""; position: absolute; left: 0; top: 7px; bottom: 7px; width: 3px; border-radius: 2px; background: var(--accent); }
.side-link.active i { color: var(--accent); }
.sidebar-backdrop { display: none; }
.content-wrap { margin-left: var(--sidebar-w); min-height: 100vh; }
@media (max-width: 991.98px) {
  .sidebar { transform: translateX(-100%); } body.sidebar-open .sidebar { transform: none; }
  body.sidebar-open .sidebar-backdrop { display: block; position: fixed; inset: 0; background: rgba(0,0,0,.55); z-index: 1030; }
  .content-wrap { margin-left: 0; }
}

/* ---------- topbar ---------- */
.topbar { position: sticky; top: 0; z-index: 1020; display: flex; align-items: center; gap: .75rem; padding: .65rem 1.5rem;
  background: color-mix(in srgb, var(--card-bg) 86%, transparent); backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); }
.topbar .search { position: relative; flex: 1; max-width: 540px; }
.topbar .search i { position: absolute; left: .85rem; top: 50%; transform: translateY(-50%); color: var(--ink-2); }
.topbar .search input { width: 100%; padding: .5rem .9rem .5rem 2.3rem; border-radius: 6px; border: 1px solid var(--line); background: var(--soft); color: inherit; font-family: var(--f-mono); font-size: .8rem; }
.topbar .search input:focus { outline: 0; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(var(--accent-rgb), .22); }
.btn-icon { border: 0; border-radius: 6px; color: var(--bs-body-color); } .btn-icon:hover { background: var(--soft); color: var(--bs-body-color); }
.user-chip { display: flex; align-items: center; gap: .5rem; border-radius: 6px; font-family: var(--f-mono); font-size: .8rem; } .user-chip:hover { background: var(--soft); }
.avatar { width: 30px; height: 30px; border-radius: 6px; background: var(--accent); color: var(--accent-ink); display: grid; place-items: center; font-family: var(--f-display); font-weight: 800; font-size: 1.05rem; }
.theme-menu { min-width: 260px; }
.swatch { width: 28px; height: 28px; border-radius: 6px; border: 3px solid var(--card-bg); box-shadow: 0 0 0 1px var(--line); cursor: pointer; transition: transform .12s; }
.swatch:hover { transform: scale(1.12) rotate(-4deg); } .swatch.on { box-shadow: 0 0 0 2px var(--bs-body-color); }
[data-mode].active { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }

/* ---------- page + typography ---------- */
.page { padding: 1.6rem 1.5rem 3rem; max-width: 1520px; }
.page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; margin-bottom: 1.4rem; flex-wrap: wrap; }
.page-head h1 { position: relative; font-family: var(--f-display); font-weight: 800; font-size: 2.35rem; line-height: 1; text-transform: uppercase; letter-spacing: .035em; margin: 0; padding-bottom: .55rem; }
.page-head h1::after { content: ""; position: absolute; left: 0; bottom: 0; width: 74px; height: 6px; background: repeating-linear-gradient(-45deg, var(--accent) 0 6px, transparent 6px 12px); }
.card { background: var(--card-bg); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); }
.card-header { background: transparent; border-bottom: 1px solid var(--line); font-family: var(--f-mono); font-size: .72rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-2);
  padding: .8rem 1.1rem; border-radius: var(--radius) var(--radius) 0 0 !important; }
.card-header a { text-transform: none; letter-spacing: 0; font-family: var(--f-body); font-weight: 500; font-size: .8rem; }
.card-body { padding: 1.1rem; }
.table { --bs-table-bg: transparent; --bs-table-color: var(--bs-body-color); margin-bottom: 0; }
.table > thead > tr > th { font-family: var(--f-mono); font-size: .66rem; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-2); font-weight: 600; background: var(--soft); border-bottom: 1px solid var(--line); padding: .65rem .85rem; white-space: nowrap; }
.table > tbody > tr > td { padding: .65rem .85rem; border-color: var(--line); }
.table td.text-end, .table th.text-end { font-family: var(--f-mono); font-size: .85em; font-variant-numeric: tabular-nums; }
.table-hover > tbody > tr:hover > * { --bs-table-hover-bg: rgba(var(--accent-rgb), .08); }
.table-hover > tbody > tr { transition: box-shadow .12s; } .table-hover > tbody > tr:hover { box-shadow: inset 3px 0 0 var(--accent); }
.card > .table:last-child, .card > .table-responsive:last-child { border-radius: 0 0 var(--radius) var(--radius); overflow: hidden; }
.form-control, .form-select { border-radius: 6px; border-color: var(--line); background-color: var(--card-bg); color: var(--bs-body-color); }
.form-control:focus, .form-select:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(var(--accent-rgb), .22); background-color: var(--card-bg); color: var(--bs-body-color); }
.form-label { font-family: var(--f-mono); font-size: .66rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-2); margin-bottom: .3rem; }
.form-check-input:checked { background-color: var(--accent); border-color: var(--accent); }
.btn { border-radius: 6px; font-weight: 600; letter-spacing: .01em; transition: transform .1s, box-shadow .15s, background .15s; }
.btn:active { transform: translateY(1px); }
.btn-primary { --bs-btn-color: var(--accent-ink); --bs-btn-hover-color: var(--accent-ink); --bs-btn-active-color: var(--accent-ink); --bs-btn-disabled-color: var(--accent-ink);
  --bs-btn-bg: var(--accent); --bs-btn-border-color: var(--accent); --bs-btn-hover-bg: color-mix(in srgb, var(--accent) 88%, #fff); --bs-btn-hover-border-color: color-mix(in srgb, var(--accent) 88%, #fff);
  --bs-btn-active-bg: color-mix(in srgb, var(--accent) 80%, #000); --bs-btn-active-border-color: color-mix(in srgb, var(--accent) 80%, #000); --bs-btn-disabled-bg: var(--accent); --bs-btn-disabled-border-color: var(--accent);
  box-shadow: 0 2px 0 color-mix(in srgb, var(--accent) 55%, #000); }
.btn-primary:hover { box-shadow: 0 4px 14px -4px rgba(var(--accent-rgb), .7), 0 2px 0 color-mix(in srgb, var(--accent) 55%, #000); transform: translateY(-1px); }
.btn-outline-primary { --bs-btn-color: var(--link); --bs-btn-border-color: var(--accent); --bs-btn-hover-bg: var(--accent); --bs-btn-hover-border-color: var(--accent); --bs-btn-hover-color: var(--accent-ink); --bs-btn-active-bg: var(--accent); --bs-btn-active-border-color: var(--accent); --bs-btn-active-color: var(--accent-ink); }
.btn-outline-secondary { --bs-btn-color: var(--bs-body-color); --bs-btn-border-color: var(--line); --bs-btn-hover-bg: var(--soft); --bs-btn-hover-color: var(--bs-body-color); --bs-btn-hover-border-color: var(--ink-2); --bs-btn-active-bg: var(--soft); --bs-btn-active-color: var(--bs-body-color); }
.text-bg-primary { background-color: var(--accent) !important; color: var(--accent-ink) !important; }
.badge { font-family: var(--f-mono); font-weight: 600; font-size: .66rem; letter-spacing: .07em; text-transform: uppercase; border-radius: 4px; padding: .4em .6em; }
.alert { border: 0; border-left: 4px solid currentColor; border-radius: 6px; box-shadow: var(--shadow); }
.list-group-item { background: transparent; border-color: var(--line); color: var(--bs-body-color); }
.list-group-item-action:hover { background: rgba(var(--accent-rgb), .08); color: var(--bs-body-color); }
dt { color: var(--ink-2); font-weight: 500; }
.text-muted { color: var(--ink-2) !important; }
.dropdown-menu { --bs-dropdown-bg: var(--card-bg); --bs-dropdown-border-color: var(--line); --bs-dropdown-link-hover-bg: var(--soft); --bs-dropdown-color: var(--bs-body-color); --bs-dropdown-link-color: var(--bs-body-color); --bs-dropdown-border-radius: 8px; box-shadow: var(--shadow); }
html[data-bs-theme=dark] .btn-close { filter: invert(1) grayscale(100%) brightness(200%); }
.popover-form { background: var(--card-bg); color: var(--bs-body-color); border: 1px solid var(--line) !important; border-radius: var(--radius) !important; }
details > summary { list-style: none; cursor: pointer; } details > summary::-webkit-details-marker { display: none; }

/* ---------- stat tiles ---------- */
.stat-tile { position: relative; display: flex; align-items: center; gap: .75rem; padding: .95rem .8rem .95rem 1.1rem; height: 100%; color: inherit; background: var(--card-bg); border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow); overflow: hidden; transition: transform .15s, box-shadow .15s, border-color .15s; }
.stat-tile::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 5px; background: rgb(var(--tone)); }
.stat-tile::after { content: ""; position: absolute; right: -28px; top: -28px; width: 90px; height: 90px; border-radius: 50%; background: radial-gradient(rgba(var(--tone), .22), transparent 70%); }
.stat-tile:hover { transform: translateY(-3px); border-color: rgba(var(--tone), .7); color: inherit; box-shadow: 0 14px 28px -14px rgba(var(--tone), .5); }
.stat-icon { width: 40px; height: 40px; border-radius: 6px; display: grid; place-items: center; font-size: 1.25rem; color: rgb(var(--tone)); background: rgba(var(--tone), .14); flex: none; }
.stat-label { font-family: var(--f-mono); font-size: .6rem; color: var(--ink-2); text-transform: uppercase; letter-spacing: .1em; white-space: nowrap; }
.stat-value { font-family: var(--f-display); font-size: 2.5rem; font-weight: 800; line-height: .95; font-variant-numeric: tabular-nums; }
.stat-go { margin-left: auto; color: var(--ink-2); opacity: 0; transform: translateX(-6px); transition: all .15s; } .stat-tile:hover .stat-go { opacity: 1; transform: none; }
.tone-primary { --tone: var(--accent-rgb); } .tone-warning { --tone: 217,119,6; } .tone-danger { --tone: 220,38,38; }
.tone-info { --tone: 14,165,233; } .tone-success { --tone: 22,163,74; } .tone-secondary { --tone: 120,113,108; }

/* ---------- charts ---------- */
.chart text { fill: var(--ink-2); font-size: 11px; font-family: var(--f-mono); } .chart .grid { stroke: var(--line); stroke-width: 1; stroke-dasharray: 3 4; }
.chart .bar { fill: var(--mark); opacity: .9; transition: opacity .1s, transform .2s; transform-box: fill-box; transform-origin: bottom; animation: grow .7s cubic-bezier(.2,.7,.2,1) backwards; }
.chart a:hover .bar, .chart a:focus .bar { opacity: 1; transform: scaleY(1.03); }
.chart .hit { fill: transparent; } .chart a:hover .hit { fill: rgba(var(--accent-rgb), .09); }
.hbar { display: block; color: inherit; padding: .45rem 0; } .hbar:hover { color: inherit; }
.hbar .track { height: 8px; background: var(--soft); border-radius: 2px; overflow: hidden; margin-top: .3rem; }
.hbar .fill { height: 100%; background: var(--mark); transform-origin: left; animation: sweep .8s cubic-bezier(.2,.7,.2,1) backwards .2s; } .hbar:hover .fill { filter: brightness(1.12); }

/* ---------- calendar ---------- */
.cal { display: grid; grid-template-columns: repeat(7, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); }
.cal .dow { background: var(--soft); padding: .5rem; font-family: var(--f-mono); font-size: .64rem; text-transform: uppercase; letter-spacing: .12em; color: var(--ink-2); font-weight: 600; }
.cal .day { background: var(--card-bg); min-height: 108px; padding: .35rem; } .cal .day.other { background: var(--soft); opacity: .55; }
.cal .day .n { font-family: var(--f-mono); font-size: .75rem; color: var(--ink-2); }
.cal .day.today { box-shadow: inset 0 0 0 2px var(--accent); } .cal .day.today .n { background: var(--accent); color: var(--accent-ink); border-radius: 4px; display: inline-grid; place-items: center; min-width: 22px; height: 22px; font-weight: 700; }
.cal .ev { display: block; font-size: .72rem; padding: 1px 6px; margin-top: 2px; border-radius: 3px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #fff; transition: transform .1s; } .cal .ev:hover { transform: translateX(2px); color: #fff; }
.ev.overdue { background: #dc2626; } .ev.soon { background: #d97706; } .ev.ok { background: #6b665a; } .ev.doc { background: #0ea5e9; }
@media (max-width: 767.98px) { .cal .day { min-height: 70px; } .cal .ev { font-size: .62rem; } }

/* ---------- auth ---------- */
body.auth { background: #0b0c0e; background-image: radial-gradient(900px 500px at 15% 0%, rgba(var(--accent-rgb), .25), transparent 65%), radial-gradient(rgba(255,255,255,.05) 1px, transparent 1.2px); background-size: auto, 20px 20px; min-height: 100vh; overflow: hidden; }
body.auth::before { content: "G"; position: fixed; right: 4vw; bottom: -14vh; font-family: var(--f-display); font-weight: 900; font-size: 85vh; line-height: .8; letter-spacing: .02em; color: transparent; -webkit-text-stroke: 2px rgba(var(--accent-rgb), .16); pointer-events: none; }
body.auth::after { content: ""; position: fixed; left: 0; right: 0; top: 0; height: 9px; background: repeating-linear-gradient(-45deg, var(--accent) 0 12px, #0b0c0e 12px 24px); }
.auth-wrap { position: relative; min-height: 100vh; display: grid; place-items: center; padding: 1rem; z-index: 1; }
.auth-card { width: 100%; max-width: 400px; padding: 2rem; color: var(--bs-body-color); box-shadow: 0 30px 60px -20px rgba(0,0,0,.7), 0 0 0 1px rgba(var(--accent-rgb), .25); }
.auth-card .logo img { width: 68px; height: 68px; } .auth-card h1 { font-family: var(--f-display); font-weight: 800; text-transform: uppercase; letter-spacing: .06em; font-size: 1.5rem !important; text-wrap: balance; }

/* ---------- motion: one staggered reveal on page load ---------- */
@keyframes rise { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
@keyframes grow { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@keyframes sweep { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.page-head, .page > .row > *, .page > .card, .page > form, .page > .cal, .page > p { animation: rise .6s cubic-bezier(.2,.7,.2,1) backwards; }
.page > .row > *:nth-child(2) { animation-delay: .06s; } .page > .row > *:nth-child(3) { animation-delay: .12s; } .page > .row > *:nth-child(4) { animation-delay: .18s; }
.page > .row > *:nth-child(5) { animation-delay: .24s; } .page > .row > *:nth-child(6) { animation-delay: .30s; } .page > .row > *:nth-child(n+7) { animation-delay: .36s; }
.page > .row:nth-of-type(2) > * { animation-delay: .32s; } .page > .row:nth-of-type(3) > * { animation-delay: .44s; } .page > .row:nth-of-type(4) > * { animation-delay: .56s; }
.page > .card { animation-delay: .1s; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }

@media print { .sidebar, .topbar, .btn, form, .page-head .d-flex { display: none !important; } .content-wrap { margin: 0; } .card { box-shadow: none; } body { background: #fff; } }
html[data-bs-theme=light] .text-warning { color: #a85a00 !important; }

.table .small.text-muted { white-space: nowrap; }

/* ---------- logo lockup (login / setup) ---------- */
.lockup { text-align: center; }
.lockup img { width: 84px; height: 84px; margin-bottom: .6rem; }
.lockup .word { font-family: var(--f-brand); font-stretch: 125%; font-weight: 900; font-size: 2.1rem; letter-spacing: .01em; line-height: 1; color: var(--logo-navy); }
.lockup .tag { font-family: var(--f-brand); font-stretch: 125%; font-weight: 700; font-size: .62rem; letter-spacing: .2em; text-transform: uppercase; color: var(--logo-rust); margin-top: .55rem; }
.lockup .sub { font-family: var(--f-mono); font-size: .72rem; color: var(--ink-2); margin-top: 1rem; }