/* 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;
}
.mud-drawer .mud-nav-link.active {
    background-color: var(--mud-palette-primary-lighten) !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;
}

/* ── 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(0,51,102,0.15) 0%, rgba(0,51,102,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;
}