@import url(/fonts.css);
/* Simply Unified Fleet — design tokens the dashboard page uses, plus the login and admin pages. */
:root {
  --font-anthropic-sans: "Nunito Sans", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-anthropic-serif: "Nunito", "Nunito Sans", ui-rounded, system-ui, sans-serif; /* headings: rounded, like the wordmark */
  --color-bg: #f7f7fa; --color-panel: #ffffff; --color-fg: #1f1a24; --color-fg-muted: #6a6474;
  --color-border-line: #e4e1ea; --color-ok: #0b64a0; --color-warn: #8a5300; --color-bad: #b8460b;
  --cds-text-secondary: #4a4452; --cds-border: #e4e1ea; --cds-radius: 8px;
  --cds-chart-axis: #8d8796; --cds-chart-grid: #ece9f1; --cds-chart-muted: #d8d4de;
  --cds-surface-popover: #ffffff; --cds-shadow-popover: 0 8px 24px rgba(31, 26, 36, .16);
  --cds-dur-slow: .3s;
  --cds-font-size-caption: 12.5px; --cds-font-size-body: 15px; --cds-font-size-heading: 17.5px; --cds-font-size-title: 26px;
  --cds-font-weight-medium: 600;
  --cds-gap-xs: 4px; --cds-gap-sm: 8px; --cds-gap-md: 12px; --cds-gap-lg: 20px;
  --cds-pad-xs: 4px; --cds-pad-sm: 8px; --cds-pad-md: 12px; --cds-pad-lg: 18px;
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) {
    --color-bg: #16141b; --color-panel: #1f1c26; --color-fg: #efeaf4; --color-fg-muted: #a8a1b3;
    --color-border-line: #34303f; --color-ok: #7cc4f0; --color-warn: #f2c06b; --color-bad: #ff9a62;
    --cds-text-secondary: #c9c2d3; --cds-border: #34303f; --cds-chart-axis: #8d8796; --cds-chart-grid: #2a2633; --cds-chart-muted: #3b3645;
    --cds-surface-popover: #26222e; --cds-shadow-popover: 0 8px 24px rgba(0, 0, 0, .5);
  } }
:root[data-theme="dark"] {
    --color-bg: #16141b; --color-panel: #1f1c26; --color-fg: #efeaf4; --color-fg-muted: #a8a1b3;
    --color-border-line: #34303f; --color-ok: #7cc4f0; --color-warn: #f2c06b; --color-bad: #ff9a62;
    --cds-text-secondary: #c9c2d3; --cds-border: #34303f; --cds-chart-axis: #8d8796; --cds-chart-grid: #2a2633; --cds-chart-muted: #3b3645;
    --cds-surface-popover: #26222e; --cds-shadow-popover: 0 8px 24px rgba(0, 0, 0, .5);
  }
html, body { margin: 0; background: var(--color-bg); color: var(--color-fg); font-family: var(--font-anthropic-sans); font-size: var(--cds-font-size-body); }
#dash-root { max-width: 1480px; margin: 0 auto; padding: 20px clamp(12px, 3vw, 36px) 40px; line-height: 1.45; }
.dash-skeleton:empty { min-height: 1em; }
[data-dash-source-state="loading"] { opacity: .55; transition: opacity var(--cds-dur-slow); }
.sf-bar { max-width: 1480px; margin: 0 auto; padding: 8px clamp(12px, 3vw, 36px) 0; display: flex; justify-content: flex-end; gap: 14px; font-size: 12.5px; color: var(--color-fg-muted); }
.sf-bar a { color: inherit; }
.sf-bar { flex-wrap: wrap; row-gap: 6px; }
.sf-bar > * { white-space: nowrap; }
#sf-sync { margin-right: auto; }
@media (max-width: 640px) { #sf-sync { flex-basis: 100%; white-space: normal; } .sf-bar { justify-content: flex-start; } }

/* Login */
.su-login { min-height: 100vh; display: grid; place-items: center; }
.su-login form { background: var(--color-panel); border: 1px solid var(--color-border-line); border-radius: 14px; padding: 32px 30px; width: min(340px, 86vw); display: grid; gap: 14px; box-shadow: 0 10px 30px rgba(31, 26, 36, .08); }
.su-login h1 { margin: 0; font-family: var(--font-anthropic-serif); font-weight: 800; letter-spacing: -.01em; color: #632523; }
.su-login label { display: grid; gap: 6px; font-size: 13px; color: var(--color-fg-muted); }
.su-login input, .su-admin input { font: inherit; padding: 9px 11px; border: 1px solid var(--color-border-line); border-radius: 8px; background: var(--color-bg); color: var(--color-fg); }
.su-login button, .su-admin button { font: inherit; font-weight: 700; padding: 9px 14px; border-radius: 8px; border: 0; background: #5d56b0; color: #fff; cursor: pointer; }
.su-login .err { color: var(--color-bad); margin: 0; }
.su-login { margin: 0; padding: 16px; box-sizing: border-box; }
.su-login form { box-sizing: border-box; width: min(380px, 100%); }
.su-login input { min-width: 0; }
.su-login a { color: #5d56b0; }
/* Login page: photo on the left on wider screens; plain card on phones. */
.su-hero { display: none; }
@media (min-width: 860px) {
  .su-login.su-split { display: grid; grid-template-columns: 1fr 1fr; place-items: stretch; padding: 0; }
  .su-split .su-hero { display: flex; align-items: flex-end; min-height: 100vh; background: #1d1b22 url(/login-bg.jpg) 45% center / cover no-repeat; position: relative; }
  .su-split .su-hero p { position: relative; z-index: 1; margin: 0; padding: 0 44px 48px; color: #fff; font-family: var(--font-anthropic-serif); font-weight: 800; font-size: clamp(22px, 2.2vw, 30px); line-height: 1.3; text-shadow: 0 1px 3px rgba(0,0,0,.4); }
  .su-split form { align-self: center; justify-self: center; margin: 24px; }
}
.su-login .tag { margin: 0; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: #5d56b0; font-weight: 700; text-align: center; }

/* Admin */
.su-admin { max-width: 980px; margin: 0 auto; padding: 24px 18px; }
.su-admin header { display: flex; align-items: center; gap: 16px; margin-bottom: 18px; }
.su-admin header h1 { flex: 1; margin: 0; font-family: var(--font-anthropic-serif); font-weight: 800; letter-spacing: -.01em; color: #632523; }
.su-admin table { width: 100%; border-collapse: collapse; background: var(--color-panel); border: 1px solid var(--color-border-line); border-radius: 10px; overflow: hidden; }
.su-admin th, .su-admin td { padding: 9px 12px; border-bottom: 1px solid var(--color-border-line); text-align: left; }
.su-admin .n { text-align: right; }
.su-admin .bad { color: var(--color-bad); }
.su-admin .bad::before, .su-login .bad::before { content: "\2715\00a0"; }
/* Status: colour-blind-safe (blue / amber / vermillion) and never colour alone: every status also carries a symbol and a word. */
.pill.ok::before, .su-pill.ok::before { content: "\2713\00a0"; }
.pill.warn::before, .su-pill.warn::before { content: "\26A0\FE0E\00a0"; }
.pill.bad::before, .su-pill.bad::before { content: "\2715\00a0"; }

.su-admin .row { display: flex; gap: 8px; flex-wrap: wrap; }
.su-admin .note { color: var(--color-fg-muted); font-size: 13px; }
.su-admin a { color: #5d56b0; }
[hidden] { display: none !important; }

/* Privacy notice and terms of use */
body.su-legal { background: var(--color-bg, #f7f7fa); color: var(--color-fg); }
.su-legal main { max-width: 760px; margin: 0 auto; padding: 28px 20px 48px; line-height: 1.6; font-size: 15px; }
.su-legal h1 { font-family: var(--font-anthropic-serif); font-weight: 800; letter-spacing: -.01em; color: #632523; font-size: 30px; margin: 4px 0 2px; }
.su-legal h2 { color: #632523; font-size: 17px; margin: 26px 0 6px; }
.su-legal .tag { margin: 18px 0 0; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: #5d56b0; font-weight: 700; }
.su-legal .upd { margin: 0 0 18px; color: var(--color-fg-muted); font-size: 13px; }
.su-legal ul { padding-left: 20px; } .su-legal li { margin-bottom: 6px; }
.su-legal a { color: #5d56b0; }
.su-legal .links { margin-top: 32px; padding-top: 14px; border-top: 1px solid var(--color-border-line); font-size: 13px; }

/* Dark mode: white-lettered logo, light headings, and no browser auto-darkening. */
:root { color-scheme: light dark; } :root[data-theme="light"] { color-scheme: light; } :root[data-theme="dark"] { color-scheme: dark; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) img[src="/logo.png"] { content: url(/logo-dark.png); } html:not([data-theme="light"]) .su-login h1, html:not([data-theme="light"]) .su-admin header h1, html:not([data-theme="light"]) .su-legal h1, html:not([data-theme="light"]) .su-legal h2, html:not([data-theme="light"]) .in-head h1, html:not([data-theme="light"]) .card h2, html:not([data-theme="light"]) .kpi b, html:not([data-theme="light"]) .in-tabs button[aria-selected="true"] { color: #f2c6c1; } }
:root[data-theme="dark"] img[src="/logo.png"] { content: url(/logo-dark.png); } html[data-theme="dark"] .su-login h1, html[data-theme="dark"] .su-admin header h1, html[data-theme="dark"] .su-legal h1, html[data-theme="dark"] .su-legal h2, html[data-theme="dark"] .in-head h1, html[data-theme="dark"] .card h2, html[data-theme="dark"] .kpi b, html[data-theme="dark"] .in-tabs button[aria-selected="true"] { color: #f2c6c1; }

/* Staff/client logins: click a name to change it. */
.su-rename summary { cursor: pointer; list-style: none; }
.su-rename summary::-webkit-details-marker { display: none; }
.su-rename summary small { color: var(--color-fg-muted); }
.su-rename form { margin-top: 6px; }

/* Top bar: the four pages on the left (current one bold), the rest on the right. */
.sf-bar { align-items: center; }
.sf-nav { display: flex; gap: 14px; margin-right: auto; }
.sf-nav a[aria-current] { font-weight: 700; text-decoration: none; color: var(--color-fg); }
@media (max-width: 640px) { .sf-nav { width: 100%; margin-right: 0; } }
/* Long per-vehicle charts: Top 20 / Bottom 20 / All. */
.su-limit { display: flex; gap: 6px; margin: 0 0 8px; flex-wrap: wrap; }
.su-limit button { font: inherit; font-size: 12px; padding: 3px 10px; border-radius: 999px; border: 1px solid var(--color-border-line); background: var(--color-panel); color: var(--color-fg-muted); cursor: pointer; }
.su-limit button[aria-pressed="true"] { background: var(--color-fg); color: var(--color-bg); border-color: var(--color-fg); }
.su-asset-q { min-width: 220px; }

/* Tables: sort by clicking a heading; headings stay in view; Download CSV link. */
table.su-sortable thead th { position: sticky; top: 0; z-index: 1; background: var(--color-panel, var(--panel, #fff)); }
table.su-sortable thead th[tabindex]:hover { text-decoration: underline; }
.su-sort { font-size: .8em; }
.su-csv-row { display: flex; justify-content: flex-end; margin: 0 0 4px; }
.su-csv { font: inherit; font-size: 12px; background: none; border: 0; padding: 2px 0; color: var(--color-fg-muted, var(--muted, #6a6474)); text-decoration: underline; cursor: pointer; }