/* ==========================================================================
   Motello design system
   Tokens and component conventions follow the earlier design prototype
   (Fordonssystemet v5.dc.html) as a visual reference (spec section 5) —
   its sample data and simulated behavior were NOT reused, only the look.
   ========================================================================== */

:root {
  --bg: oklch(0.97 0.006 240);
  --surface: #fff;
  --surface-2: oklch(0.985 0.004 240);
  --surface-3: oklch(0.955 0.004 240);
  --line: oklch(0.91 0.006 240);
  --line-soft: oklch(0.945 0.004 240);
  --ink: oklch(0.22 0.012 250);
  --ink-2: oklch(0.36 0.012 250);
  --muted: oklch(0.52 0.012 250);
  --faint: oklch(0.72 0.01 250);
  --tint: 0.16;
  --fg-l: 0.42;

  --nav-bg: #fff;
  --nav-line: oklch(0.91 0.006 240);
  --nav-ink: oklch(0.4 0.012 250);
  --nav-active: oklch(0.42 0.11 230);
  --nav-tint: 0.12;

  --topbar-bg: oklch(0.16 0.025 255);
  --topbar-line: oklch(0.3 0.035 255);
  --topbar-field-bg: oklch(0.21 0.03 255);
  --topbar-ink-muted: oklch(0.72 0.025 250);

  --accent: oklch(0.64 0.13 225);
  --accent-soft: oklch(0.68 0.09 225 / var(--tint));
  --accent-ink: oklch(var(--fg-l) 0.11 230);

  --status-neutral-bg: oklch(0.68 0.09 240 / var(--tint));
  --status-neutral-fg: oklch(var(--fg-l) 0.09 240);
  --status-pending-bg: oklch(0.68 0.15 75 / var(--tint));
  --status-pending-fg: oklch(var(--fg-l) 0.12 75);
  --status-success-bg: oklch(0.68 0.15 150 / var(--tint));
  --status-success-fg: oklch(0.32 0.1 150);
  --status-danger-bg: oklch(0.68 0.15 25 / var(--tint));
  --status-danger-fg: oklch(var(--fg-l) 0.15 25);
  --status-inactive-bg: var(--line-soft);
  --status-inactive-fg: var(--muted);

  --radius: 12px;
  --radius-sm: 8px;
  --radius-pill: 100px;

  color-scheme: light;
}

:root[data-theme="dark"] {
  --bg: oklch(0.15 0.018 255);
  --surface: oklch(0.195 0.022 255);
  --surface-2: oklch(0.225 0.022 255);
  --surface-3: oklch(0.25 0.022 255);
  --line: oklch(0.31 0.025 255);
  --line-soft: oklch(0.26 0.022 255);
  --ink: oklch(0.96 0.005 250);
  --ink-2: oklch(0.85 0.01 250);
  --muted: oklch(0.7 0.015 250);
  --faint: oklch(0.5 0.015 250);
  --tint: 0.24;
  --fg-l: 0.82;

  --nav-bg: oklch(0.16 0.025 255);
  --nav-line: oklch(0.3 0.035 255);
  --nav-ink: oklch(0.72 0.025 250);
  --nav-active: #fff;
  --nav-tint: 0.22;

  color-scheme: dark;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: oklch(0.15 0.018 255);
    --surface: oklch(0.195 0.022 255);
    --surface-2: oklch(0.225 0.022 255);
    --surface-3: oklch(0.25 0.022 255);
    --line: oklch(0.31 0.025 255);
    --line-soft: oklch(0.26 0.022 255);
    --ink: oklch(0.96 0.005 250);
    --ink-2: oklch(0.85 0.01 250);
    --muted: oklch(0.7 0.015 250);
    --faint: oklch(0.5 0.015 250);
    --tint: 0.24;
    --fg-l: 0.82;
    --nav-bg: oklch(0.16 0.025 255);
    --nav-line: oklch(0.3 0.035 255);
    --nav-ink: oklch(0.72 0.025 250);
    --nav-active: #fff;
    --nav-tint: 0.22;
    color-scheme: dark;
  }
}

* { box-sizing: border-box; }

html, body {
  height: 100%;
  margin: 0;
}

body {
  background: var(--bg);
  color: var(--ink);
  font-family: 'Figtree', system-ui, sans-serif;
  font-size: 14px;
}

a { color: var(--accent); text-decoration: none; }
a:hover { color: oklch(0.54 0.13 225); text-decoration: underline; }

h1, h2, h3, h4 { margin: 0 0 8px; color: var(--ink); font-weight: 600; }
h1:focus { outline: none; }

input, select, textarea, button { font-family: inherit; font-size: 13px; }

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: var(--line); border-radius: var(--radius); }

.mono { font-family: 'IBM Plex Mono', ui-monospace, monospace; }

/* ---------- Layout shell ---------- */
.app-shell { height: 100vh; display: flex; flex-direction: column; overflow: hidden; }

.topbar {
  height: 56px; flex: 0 0 auto; display: flex; align-items: center; gap: 16px;
  padding: 0 20px; background: var(--topbar-bg); border-bottom: 1px solid var(--topbar-line);
  z-index: 5;
}
.topbar-brand { font-weight: 700; font-size: 16px; letter-spacing: 0.08em; color: #fff; white-space: nowrap; }
.topbar-brand .tagline {
  font-family: 'IBM Plex Mono', monospace; text-transform: uppercase; letter-spacing: 0.1em;
  font-weight: 500; color: oklch(0.8 0.13 210); font-size: 10px; margin-left: 6px;
}
.facility-picker, .topbar-search {
  border: 1px solid var(--topbar-line); border-radius: var(--radius); font-size: 13px;
  background: var(--topbar-field-bg); color: #fff;
}
.facility-picker { display: flex; align-items: center; gap: 6px; padding: 6px 10px; color: var(--topbar-ink-muted); }
.topbar-search { flex: 1; max-width: 420px; padding: 8px 12px; outline: none; }
.topbar-search::placeholder { color: var(--faint); }
.topbar-spacer { flex: 1; }
.topbar-user { display: flex; align-items: center; gap: 8px; padding-left: 12px; border-left: 1px solid var(--topbar-line); }
.avatar-chip {
  width: 32px; height: 32px; border-radius: 50%; background: var(--accent-soft); color: var(--accent-ink);
  display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 600;
}
.topbar-user-name { font-size: 13px; font-weight: 600; color: #fff; line-height: 1.2; }
.topbar-user-role { font-size: 11px; color: var(--muted); line-height: 1.2; }

.app-body { flex: 1; display: flex; overflow: hidden; }

.sidebar { width: 216px; flex: 0 0 auto; background: var(--nav-bg); border-right: 1px solid var(--nav-line); padding: 14px 8px; overflow-y: auto; }
.nav-item {
  display: flex; align-items: center; justify-content: space-between; gap: 6px;
  padding: 9px 12px; border-radius: var(--radius); font-size: 13px; cursor: pointer;
  margin-bottom: 2px; font-weight: 400; color: var(--nav-ink); text-decoration: none;
}
.nav-item:hover { background: var(--surface-3); text-decoration: none; }
.nav-item.active {
  font-weight: 600; color: var(--nav-active); background: oklch(0.64 0.13 225 / var(--nav-tint));
  box-shadow: inset 0 0 0 1px oklch(0.64 0.13 225 / 0.4), 0 0 18px oklch(0.64 0.13 225 / 0.15);
}
.nav-item .badge-soon {
  font-size: 10px; font-weight: 600; color: var(--muted); background: var(--line-soft);
  border-radius: var(--radius-pill); padding: 2px 7px;
}

.content { flex: 1; overflow-y: auto; padding: 24px; }

/* ---------- Cards / tiles ---------- */
.card {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 16px;
}
.kpi-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; }
.kpi-tile { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 16px; }
.kpi-label { font-size: 12px; color: var(--muted); margin-bottom: 6px; }
.kpi-value { font-size: 22px; font-weight: 700; color: var(--ink); }
.kpi-sub { font-size: 12px; margin-top: 4px; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border-radius: var(--radius);
  font-size: 13px; font-weight: 500; cursor: pointer; border: 1px solid transparent;
}
.btn-primary { background: var(--accent); color: #fff; }
.btn-primary:hover { background: oklch(0.58 0.13 225); }
.btn-secondary { background: var(--surface); color: var(--ink); border-color: var(--line); }
.btn-secondary:hover { background: var(--surface-3); }
.btn-danger { background: oklch(0.55 0.16 25); color: #fff; }
.btn:disabled { opacity: 0.5; cursor: not-allowed; }

/* ---------- Forms ---------- */
.field { display: flex; flex-direction: column; gap: 4px; margin-bottom: 14px; }
.field label { font-size: 12px; font-weight: 600; color: var(--ink-2); }
.field input, .field select, .field textarea {
  padding: 8px 10px; border: 1px solid var(--line); border-radius: var(--radius-sm);
  background: var(--surface); color: var(--ink);
}
.field input:focus, .field select:focus, .field textarea:focus { outline: 2px solid var(--accent); outline-offset: -1px; }
.field .hint { font-size: 11px; color: var(--muted); }
.field .error { font-size: 11px; color: oklch(0.55 0.16 25); }

/* ---------- Tables ---------- */
table.data-table { width: 100%; border-collapse: collapse; font-size: 13px; }
table.data-table th {
  text-align: left; font-size: 11px; text-transform: uppercase; letter-spacing: 0.04em;
  color: var(--muted); font-weight: 600; padding: 10px 12px; border-bottom: 1px solid var(--line);
}
table.data-table td { padding: 10px 12px; border-bottom: 1px solid var(--line-soft); }
table.data-table tbody tr:hover { background: var(--surface-2); }

/* ---------- Tabs / chips ---------- */
.tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--line); margin-bottom: 16px; }
.tab { padding: 10px 14px; font-size: 13px; cursor: pointer; font-weight: 400; color: var(--muted); border-bottom: 2px solid transparent; background: none; border-left: none; border-right: none; border-top: none; }
.tab.active { font-weight: 600; color: var(--accent-ink); border-bottom-color: var(--accent); }

.chip {
  padding: 6px 14px; border-radius: var(--radius-pill); font-size: 12px; cursor: pointer;
  border: 1px solid var(--line); background: var(--surface); color: var(--muted); font-weight: 400;
}
.chip.active { border-color: var(--accent); background: var(--accent-soft); color: var(--accent-ink); font-weight: 600; }

/* ---------- Status badges ----------
   Five semantic categories reused across every module's statuses
   (spec section 6/9/11/12/13/20/21/22/24/25 — every status shown with text + color):
   neutral = new/incoming, pending = in progress, success = done/ok,
   danger = failed/lost/needs attention, inactive = closed/no longer relevant. */
.status-badge {
  display: inline-flex; align-items: center; padding: 3px 10px; border-radius: var(--radius-pill);
  font-size: 12px; font-weight: 600; white-space: nowrap;
}
.status-neutral { background: var(--status-neutral-bg); color: var(--status-neutral-fg); }
.status-pending { background: var(--status-pending-bg); color: var(--status-pending-fg); }
.status-success { background: var(--status-success-bg); color: var(--status-success-fg); }
.status-danger { background: var(--status-danger-bg); color: var(--status-danger-fg); }
.status-inactive { background: var(--status-inactive-bg); color: var(--status-inactive-fg); }

/* ---------- Empty / loading / error states ---------- */
.empty-state, .loading-state, .error-state {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 8px; padding: 48px 24px; color: var(--muted); text-align: center;
}
.empty-state .title, .error-state .title { font-size: 14px; font-weight: 600; color: var(--ink-2); }
.error-state { color: oklch(0.55 0.16 25); }

/* ---------- Framework defaults (kept from scaffold) ---------- */
.valid.modified:not([type=checkbox]) { outline: 1px solid #26b050; }
.invalid { outline: 1px solid #e50000; }
.validation-message { color: #e50000; }

.blazor-error-boundary {
  background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
  padding: 1rem 1rem 1rem 3.7rem;
  color: white;
}
.blazor-error-boundary::after { content: "Ett fel har inträffat."; }

/* ==========================================================================
   Minimal Bootstrap-class compatibility shim
   ASP.NET Core's default Identity account pages (Login/Register/Manage/…)
   are scaffolded with Bootstrap grid/utility classes. Rather than pull in
   all of Bootstrap (a second design system) or rewrite ~30 generated Razor
   files, this covers just the classes those pages actually use, styled to
   match Motello's own tokens. See AuthLayout.razor for the surrounding shell.
   ========================================================================== */
.row { display: flex; flex-wrap: wrap; gap: 16px; margin: 0; }
[class^="col-"] { flex: 1 1 auto; min-width: 0; }
.mb-3 { margin-bottom: 14px; }
.mt-2 { margin-top: 8px; }
.mx-auto { margin-left: auto; margin-right: auto; }
.w-100 { width: 100%; }
.h-100 { height: 100%; }
.d-flex { display: flex; }
.flex-column { flex-direction: column; }
.text-danger { color: oklch(0.55 0.16 25); font-size: 12px; }
.text-info { color: var(--accent); font-size: 12px; }
.text-success { color: oklch(0.4 0.1 150); font-size: 12px; }
.text-secondary { color: var(--muted); }
.font-weight-bold { font-weight: 700; }
hr { border: none; border-top: 1px solid var(--line); margin: 16px 0; }

.form-floating, .form-horizontal .control-label { margin-bottom: 4px; }
.form-control, .form-select {
  width: 100%; padding: 8px 10px; border: 1px solid var(--line); border-radius: var(--radius-sm);
  background: var(--surface); color: var(--ink); margin-top: 4px;
}
.form-control:focus { outline: 2px solid var(--accent); outline-offset: -1px; }
.form-label, .control-label { font-size: 12px; font-weight: 600; color: var(--ink-2); }
.form-check-input { margin-right: 6px; }
.darker-border-checkbox.form-check-input { border-color: var(--line); }
.checkbox label { font-size: 13px; color: var(--ink-2); }
.input-group { display: flex; }
.input-group-append { display: flex; }
.input-group-text { padding: 8px 10px; border: 1px solid var(--line); background: var(--surface-2); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; }

.btn-lg { padding: 10px 16px; font-size: 14px; }
.btn-link { background: none; border: none; color: var(--accent); cursor: pointer; padding: 0; }
.btn-danger { background: oklch(0.55 0.16 25); color: #fff; border: none; padding: 8px 14px; border-radius: var(--radius); cursor: pointer; }

.alert { padding: 10px 14px; border-radius: var(--radius-sm); font-size: 13px; margin-bottom: 14px; }
.alert-danger { background: var(--status-danger-bg); color: var(--status-danger-fg); }
.alert-warning { background: var(--status-pending-bg); color: var(--status-pending-fg); }
.alert-info { background: var(--status-neutral-bg); color: var(--status-neutral-fg); }
.alert-success { background: var(--status-success-bg); color: var(--status-success-fg); }
.glyphicon-warning-sign::before { content: "⚠"; }

.nav-pills { display: flex; gap: 4px; list-style: none; padding: 0; margin: 0 0 16px; }
.nav-pills .nav-link { padding: 7px 14px; border-radius: var(--radius-pill); font-size: 13px; color: var(--muted); cursor: pointer; }
.nav-pills .nav-link.active { background: var(--accent); color: #fff; }

table:not(.data-table) { width: 100%; border-collapse: collapse; font-size: 13px; }
table:not(.data-table) td, table:not(.data-table) th { padding: 8px 10px; border-bottom: 1px solid var(--line-soft); text-align: left; }