/* PlatinumMRF — Platinum Brink Technologies Design System
   ------------------------------------------------------------------
   Colour, radius and typography all come from PlatinumMrfTheme (MudBlazor), never from here.
   This file only carries the shared component classes that PlatinumWeigh, PlatinumPOS and
   PlatinumAuth also ship, so the three products stay visually identical.

   The previous version of this file hardcoded --mud-palette-* values (including a #003366 navy
   that appears nowhere in the design system) while the project had no MudBlazor reference at
   all — so every variable the markup used resolved to nothing. */

html, body {
    margin: 0;
    font-family: Inter, 'Segoe UI', system-ui, Roboto, Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
}

h1:focus { outline: none; }

/* ── Dashboard brand header ──────────────────────────────────────────── */
.rw-brand-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    padding-bottom: 8px;
}
.rw-brand-text { flex: 1 1 auto; min-width: 0; }
.rw-brand-logo { height: 40px; width: auto; opacity: 0.9; }

/* ── Dashboard action tiles ──────────────────────────────────────────── */
.w8-tile {
    cursor: pointer;
    transition: transform .2s, box-shadow .2s;
    border-radius: 24px;
    overflow: hidden;
}
.w8-tile:hover  { transform: translateY(-2px); box-shadow: 0 12px 24px rgba(0,0,0,.08); }
.w8-tile:active { transform: translateY(0);    box-shadow: 0 4px 12px rgba(0,0,0,.05); }
.w8-tile:focus-visible { outline: 2px solid var(--mud-palette-primary); outline-offset: 2px; }

/* ── KPI / summary stat cards ────────────────────────────────────────── */
.w8-stat-card {
    border-radius: 24px !important;
    border: 1px solid var(--mud-palette-lines-default);
    box-shadow: none !important;
}
.w8-stat-card.warning {
    background-color: var(--mud-palette-warning-lighten) !important;
    border-color: transparent !important;
}
.w8-stat-card.warning .mud-typography {
    color: var(--mud-palette-warning-darken) !important;
}

/* KPI figure: large, tight, and tabular so a changing number does not jitter the layout. */
.w8-stat-value {
    font-size: 2.75rem;
    font-weight: 800;
    letter-spacing: -1.5px;
    line-height: 1.05;
    font-variant-numeric: tabular-nums;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%;
}
.w8-stat-label {
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    opacity: 0.85;
}

/* ── Pill badge sitting on a saturated KPI tile ──────────────────────── */
/* Darkens the tile beneath it rather than lightening it. PlatinumWeigh's
   equivalent (.rw-pending-pill) uses rgba(255,255,255,.22), which lifts the
   background towards the white label and lands at 3.8–4.4:1 across the tile
   colours — under WCAG AA, and visibly hard to read on the violet tile.
   Going the other way keeps the same translucent-overlay look and measures
   8.1–9.1:1 on every tile in both themes. Asserted in TileContrastTests. */
.rw-tile-pill {
    display: inline-flex;
    align-items: center;
    padding: 4px 12px;
    border-radius: 999px;
    background: rgba(0, 0, 0, .22);
    color: #fff;
    font-size: 0.72rem;
    font-weight: 700;
    line-height: 1;
    white-space: nowrap;
}

/* ── Footprint code tag ──────────────────────────────────────────────── */
.pa-footprint {
    background: var(--mud-palette-background-gray, #F0F4F9);
    padding: 4px 10px;
    border-radius: 6px;
    font-size: 0.8125rem;
    font-weight: 500;
    font-family: 'JetBrains Mono', 'Cascadia Code', 'Fira Code', monospace;
    color: var(--mud-palette-text-primary);
    border: 1px solid var(--mud-palette-lines-default);
    /* Long unbroken footprint/key codes must wrap, not overflow a narrow mobile card. */
    overflow-wrap: anywhere;
}

/* ── Activity / content card ─────────────────────────────────────────── */
.rw-activity-card {
    border-radius: 24px !important;
    border: 1px solid var(--mud-palette-lines-default, #E3E3E3);
    box-shadow: none !important;
    background-color: var(--mud-palette-surface);
}

/* ── Page-level layout helpers ───────────────────────────────────────── */
.w8-page-content {
    padding-top: 16px;
    padding-bottom: 40px;
}

/* ── Nav drawer (Google pill shape) ──────────────────────────────────── */
.mud-drawer {
    border-right: none !important;
}
.mud-drawer .mud-nav-link {
    border-radius: 100px; /* MD3 pill shape */
    margin: 4px 12px;
    padding: 10px 16px;
    font-weight: 500;
    transition: background-color 0.2s ease, color 0.2s ease;
}
.mud-drawer .mud-nav-link:hover,
.mud-drawer .mud-nav-link:focus {
    background-color: var(--mud-palette-action-default-hover) !important;
}
/* A translucent tint of Primary itself, not PrimaryLighten: in the light theme PrimaryLighten is a
   near-white neutral (so it read fine), but in the dark theme it's just a LIGHTER SHADE OF THE SAME
   BLUE as Primary — active nav text ended up nearly the same colour as its own background. Same fix
   as PlatinumWeigh's identical bug (same dark palette, same rule, ported verbatim). Deriving the tint
   from Primary's own rgb triplet self-corrects in both themes with no separate dark-mode override. */
.mud-drawer .mud-nav-link.active {
    background-color: rgba(var(--mud-palette-primary-rgb), 0.16) !important;
    color: var(--mud-palette-primary) !important;
}
.mud-drawer .mud-nav-link.active .mud-icon-root {
    color: var(--mud-palette-primary) !important;
}

.rw-drawer-header { padding-left: 20px; }
.rw-drawer-nav { flex: 1 1 auto; overflow-y: auto; }
.rw-drawer-footer { padding: 12px 16px; color: var(--mud-palette-text-secondary); }

/* Section captions between nav groups. */
.rw-nav-section {
    display: block;
    padding: 10px 24px 4px;
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--mud-palette-text-secondary);
}

/* ── Page footer ─────────────────────────────────────────────────────── */
.rw-page-footer {
    padding: 16px;
    border-top: none;
    text-align: center;
}

/* ── Chart legends ───────────────────────────────────────────────────── */
.rw-legend-swatch {
    width: 12px;
    height: 12px;
    border-radius: 3px;
    flex-shrink: 0;
}

/* ── Vehicle Tracking page ───────────────────────────────────────────── */
.rw-mode-toggle {
    display: inline-flex;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 8px;
    overflow: hidden;
}
.rw-mode-toggle button {
    border: none;
    background: transparent;
    padding: 6px 14px;
    font-size: 0.8125rem;
    font-weight: 500;
    cursor: pointer;
    color: var(--mud-palette-text-secondary);
}
.rw-mode-toggle button.active {
    background: var(--mud-palette-primary);
    color: var(--mud-palette-primary-text);
}

.rw-vehicle-roster {
    max-height: 260px;
    overflow-y: auto;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 8px;
}
.rw-vehicle-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    cursor: pointer;
    border-bottom: 1px solid var(--mud-palette-lines-default);
}
.rw-vehicle-row:last-child { border-bottom: none; }
.rw-vehicle-row:hover { background: var(--mud-palette-action-default-hover); }
.rw-vehicle-row.selected { background: var(--mud-palette-primary-hover); }
.rw-vehicle-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.rw-vehicle-id { font-weight: 600; font-size: 0.875rem; flex: 1; }
.rw-vehicle-lastseen { font-size: 0.75rem; color: var(--mud-palette-text-secondary); }
/* Present but quiet until the row is actually being looked at, so the roster doesn't read as a
   list of delete buttons at rest. */
.rw-vehicle-delete { opacity: 0.35; flex-shrink: 0; }
.rw-vehicle-row:hover .rw-vehicle-delete { opacity: 1; }

/* ── Login / first-run password screen ───────────────────────────────── */
.rw-login-root {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: var(--mud-palette-background);
    padding: 24px 16px;
}
.rw-login-card {
    border-radius: 24px;
    border: 1px solid var(--mud-palette-lines-default);
    background-color: var(--mud-palette-surface);
    padding: 40px 40px 32px;
    width: 100%;
    max-width: 420px;
    display: flex;
    flex-direction: column;
    align-items: stretch;
}
.rw-login-logo {
    max-width: 160px;
    max-height: 120px;
    width: auto;
    height: auto;
    object-fit: contain;
    align-self: center;
    margin-bottom: 4px;
}
.rw-login-footer {
    margin-top: 24px;
    text-align: center;
}

/* ── Licence block screen ────────────────────────────────────────────── */
.rw-licence-block {
    border-radius: 24px !important;
    border: 1px solid var(--mud-palette-lines-default);
    background-color: var(--mud-palette-surface);
}

/* ── MudTable polish ─────────────────────────────────────────────────── */
.mud-table-container {
    border-radius: 0;
}
.mud-table-root .mud-table-head .mud-table-cell {
    font-weight: 600;
    color: var(--mud-palette-text-secondary);
    border-bottom: 1px solid var(--mud-palette-lines-default);
}
.mud-table-root .mud-table-body .mud-table-cell {
    border-bottom: 1px solid var(--mud-palette-lines-default);
}

/* Timestamps and measurements line up in columns. */
.rw-numeric { font-variant-numeric: tabular-nums; }

/* ── Dialog polish ───────────────────────────────────────────────────── */
.mud-dialog {
    border-radius: 28px !important;
    box-shadow: 0 24px 38px 3px rgba(0,0,0,0.14), 0 9px 46px 8px rgba(0,0,0,0.12), 0 11px 15px -7px rgba(0,0,0,0.2) !important;
}

/* ── Blazor error UI ─────────────────────────────────────────────────── */
#blazor-error-ui {
    color-scheme: light only;
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    box-sizing: border-box;
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}
#blazor-error-ui .dismiss {
    cursor: pointer;
    position: absolute;
    right: 0.75rem;
    top: 0.5rem;
}

/* ── Splash screen ───────────────────────────────────────────────────── */
#splash-screen {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
}
#splashCanvas {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
.splash-overlay {
    position: relative;
    z-index: 10;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.splash-logo-wrap {
    position: relative;
    width: 120px;
    height: 120px;
    margin-bottom: 2rem;
}
.splash-logo {
    width: 100%;
    height: 100%;
    position: relative;
    z-index: 2;
}
.splash-glow {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 140%;
    height: 140%;
    transform: translate(-50%, -50%);
    background: radial-gradient(circle, rgba(37,99,235,0.15) 0%, rgba(37,99,235,0) 70%);
    z-index: 1;
}
.splash-tagline {
    font-family: Inter, 'Segoe UI', system-ui, sans-serif;
    color: #64748b;
    font-size: 0.9rem;
    font-weight: 500;
    letter-spacing: 0.5px;
}