/* 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: Georgia, "Times New Roman", serif;
  --color-bg: #f7f7fa; --color-panel: #ffffff; --color-fg: #1f1a24; --color-fg-muted: #6a6474;
  --color-border-line: #e4e1ea; --color-ok: #0f7a3d; --color-warn: #a35d00; --color-bad: #b42318;
  --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: 14px; --cds-font-size-heading: 17px; --cds-font-size-title: 24px;
  --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 {
    --color-bg: #16141b; --color-panel: #1f1c26; --color-fg: #efeaf4; --color-fg-muted: #a8a1b3;
    --color-border-line: #34303f; --color-ok: #4cc27d; --color-warn: #e0a54a; --color-bad: #f07167;
    --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: 400; 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; }
.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: 400; 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 .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: 400; 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; }
@media (prefers-color-scheme: dark) {
  img[src="/logo.png"] { content: url(/logo-dark.png); }
  html .su-login h1, html .su-admin header h1, html .su-legal h1, html .su-legal h2,
  html .in-head h1, html .card h2, html .kpi b, html .in-tabs button[aria-selected="true"] { color: #f2c6c1; }
}