/* =====================================================================
   Universal Tracking - shared theme (web app + mobile app)
   Loaded by UniversalTracking.Web (App.razor, Pages/_Layout.cshtml) and
   UniversalTracking.App (wwwroot/index.html) as
   _content/UniversalTracking.SharedUiLib/css/ut-theme.css.
   Brand tokens first; everything below reads from them. The navy -> plum
   gradient is the brand; the sky accent comes from the compass logo.
   App-specific styles live in each app (app.css / ut-web.css).

   Gradient role: the gradient marks brand surfaces only - the web sidebar,
   the mobile .ut-on-brand header, the login screens and the startup screen.
   Controls (buttons, pills, progress, floating buttons) are solid navy.

   Type: IBM Plex Sans for UI and text, IBM Plex Mono for machine identifiers
   (IMSI, coordinates, URLs). Chosen for its engineering/instrument lineage,
   true tabular figures for columns of readings, and a matching mono.
   ===================================================================== */
:root {
    --ut-navy: #0b2a5b;              /* unslop-ignore: brand */
    --ut-navy-hover: #081f45;
    --ut-indigo: #22195e;            /* unslop-ignore: brand */
    --ut-plum: #3a0647;              /* unslop-ignore: brand */
    --ut-gradient: linear-gradient(135deg, #0b2a5b 0%, #22195e 55%, #3a0647 100%);            /* unslop-ignore: brand surface only */
    --ut-gradient-vertical: linear-gradient(180deg, #0b2a5b 0%, #22195e 50%, #3a0647 100%);   /* unslop-ignore: brand surface only */

    --ut-accent: #0e7ab8;          /* interactive text/icons on light surfaces */
    --ut-accent-bright: #38bdf8;   /* highlights on the brand gradient */
    --ut-accent-soft: rgba(14, 122, 184, 0.10);
    --ut-accent-ring: rgba(14, 122, 184, 0.35);

    --ut-surface: #f3f4f8;
    --ut-card: #ffffff;
    --ut-text: #141a2e;
    --ut-text-secondary: #3d4560;
    --ut-text-muted: #6b7189;
    --ut-border: #e3e5ee;

    --ut-alarm: #d63b4f;
    --ut-warning: #e59f12;
    --ut-warning-text: #8a5a00;
    --ut-stale: #8b8fa3;
    --ut-ok: #1f9d6c;

    --ut-radius-card: 10px;
    --ut-radius-control: 8px;
    --ut-radius-modal: 12px;
    --ut-shadow-card: 0 1px 2px rgba(11, 42, 91, 0.08);
    --ut-shadow-float: 0 2px 8px rgba(11, 42, 91, 0.30);

    --ut-font: 'IBM Plex Sans', -apple-system, 'Segoe UI', Roboto, sans-serif;
    --ut-font-mono: 'IBM Plex Mono', ui-monospace, 'Cascadia Mono', Consolas, monospace;

    /* Bootstrap hooks */
    --bs-body-font-family: var(--ut-font);
    --bs-body-color: var(--ut-text);
    --bs-body-bg: var(--ut-surface);
    --bs-primary: var(--ut-navy);
    --bs-primary-rgb: 11, 42, 91;
    --bs-link-color: var(--ut-accent);
    --bs-link-color-rgb: 14, 122, 184;
    --bs-border-color: var(--ut-border);
    --bs-secondary-color: var(--ut-text-muted);
}

html, body {
    font-family: var(--ut-font);
    color: var(--ut-text);
    background-color: var(--ut-surface);
    -webkit-font-smoothing: antialiased;
}

/* Readings and counts line up in columns */
.table,
.ut-num {
    font-variant-numeric: tabular-nums;
}

code, kbd, samp, pre,
.ut-mono {
    font-family: var(--ut-font-mono);
}

h1, h2, h3, h4, h5, h6 {
    font-weight: 700;
    letter-spacing: -0.01em;
}

a, .btn-link {
    color: var(--ut-accent);
}

.text-primary {
    color: var(--ut-navy) !important;
}

.text-muted {
    color: var(--ut-text-muted) !important;
}

.spinner-border {
    color: var(--ut-indigo);
}

/* ---------- Buttons ---------- */
.btn {
    font-weight: 600;
    border-radius: var(--ut-radius-control);
}

.btn-primary,
.btn-primary:focus,
.btn-primary:disabled {
    color: #fff;
    background: var(--ut-navy);
    border: 1px solid var(--ut-navy);
}

.btn-primary:hover,
.btn-primary:active {
    color: #fff;
    background: var(--ut-navy-hover);
    border-color: var(--ut-navy-hover);
}

.btn-primary:disabled {
    opacity: 0.65;
}

.btn-outline-secondary {
    color: var(--ut-text-secondary);
    border-color: var(--ut-border);
    background: var(--ut-card);
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-select:focus, .form-check-input:focus {
    box-shadow: 0 0 0 0.2rem var(--ut-accent-ring);
}

/* ---------- Filter chips (the rounded-pill buttons on Home, Analytics, Incidents) ----------
   Filled Bootstrap variants (btn-primary/-danger/-warning/-secondary) mark the selected chip;
   btn-outline-* variants are the unselected ones. */
.btn.btn-sm.rounded-pill {
    font-size: 0.82rem;
    padding: 0.32rem 0.95rem;
    border: 1px solid var(--ut-border);
    background: var(--ut-card);
    color: var(--ut-text-secondary);
    box-shadow: none;
}

.btn.btn-sm.rounded-pill.btn-outline-danger { color: var(--ut-alarm); }
.btn.btn-sm.rounded-pill.btn-outline-warning { color: var(--ut-warning-text) !important; }
.btn.btn-sm.rounded-pill.btn-outline-secondary { color: var(--ut-text-muted); }
.btn.btn-sm.rounded-pill.btn-outline-info { color: #0a6f86 !important; }

.btn.btn-sm.rounded-pill.btn-primary { background: var(--ut-navy); border-color: var(--ut-navy); color: #fff; }
.btn.btn-sm.rounded-pill.btn-danger { background: var(--ut-alarm); border-color: var(--ut-alarm); color: #fff; }
.btn.btn-sm.rounded-pill.btn-warning { background: var(--ut-warning); border-color: var(--ut-warning); color: #fff !important; }
.btn.btn-sm.rounded-pill.btn-secondary { background: var(--ut-stale); border-color: var(--ut-stale); color: #fff; }
.btn.btn-sm.rounded-pill.btn-info { background: #0a6f86; border-color: #0a6f86; color: #fff !important; }

/* Chips sitting on the brand gradient header */
.ut-on-brand .btn.btn-sm.rounded-pill {
    background: rgba(255, 255, 255, 0.12);
    border-color: rgba(255, 255, 255, 0.24);
    color: #fff !important;
}

.ut-on-brand .btn.btn-sm.rounded-pill.btn-primary,
.ut-on-brand .btn.btn-sm.rounded-pill.btn-danger,
.ut-on-brand .btn.btn-sm.rounded-pill.btn-warning,
.ut-on-brand .btn.btn-sm.rounded-pill.btn-secondary,
.ut-on-brand .btn.btn-sm.rounded-pill.btn-info {
    background: #fff;
    border-color: #fff;
}

.ut-on-brand .btn.btn-sm.rounded-pill.btn-primary { color: var(--ut-navy) !important; }
.ut-on-brand .btn.btn-sm.rounded-pill.btn-danger { color: var(--ut-alarm) !important; }
.ut-on-brand .btn.btn-sm.rounded-pill.btn-warning { color: var(--ut-warning-text) !important; }
.ut-on-brand .btn.btn-sm.rounded-pill.btn-secondary { color: var(--ut-text-secondary) !important; }
.ut-on-brand .btn.btn-sm.rounded-pill.btn-info { color: #0a6f86 !important; }

/* ---------- Form controls ---------- */
.form-control,
.form-select {
    border-radius: var(--ut-radius-control);
    border-color: var(--ut-border);
    background-color: var(--ut-card);
    color: var(--ut-text);
}

.form-control:focus,
.form-select:focus {
    border-color: var(--ut-accent);
}

.ut-on-brand .form-control,
.ut-on-brand .form-select {
    border-color: transparent;
    background-color: rgba(255, 255, 255, 0.96);
}

.ut-on-brand label,
.ut-on-brand .text-muted {
    color: rgba(255, 255, 255, 0.8) !important;
}

/* ---------- Brand header (list pages + detail app bars) ---------- */
.ut-on-brand {
    background: var(--ut-gradient) !important;
    border-bottom: none !important;
    box-shadow: 0 4px 16px rgba(34, 25, 94, 0.25) !important;
    color: #fff;
}

.ut-on-brand h1,
.ut-on-brand h2 {
    color: #fff !important;
}

.ut-on-brand p {
    color: rgba(255, 255, 255, 0.75) !important;
}

.ut-on-brand .back-button {
    color: #fff !important;
}

/* ---------- Unit cards (shared TrackingUnitCard) ----------
   Rounded, borderless cards with the unit's status as a coloured left edge. */
.card.card-shelf-container {
    border-radius: var(--ut-radius-card);
    border: 1px solid var(--ut-border) !important;
    border-left: 4px solid #d9dcea !important;
    box-shadow: var(--ut-shadow-card);
    background: var(--ut-card);
}

.card.card-shelf-container.border-danger { border-left-color: var(--ut-alarm) !important; }
.card.card-shelf-container.border-warning { border-left-color: var(--ut-warning) !important; }
.card.card-shelf-container.border-secondary { border-left-color: var(--ut-stale) !important; }

.card.card-shelf-container.selected-card {
    border-color: var(--ut-accent) !important;
    border-left-color: var(--ut-accent) !important;
    box-shadow: 0 0 0 3px var(--ut-accent-soft), var(--ut-shadow-card) !important;
}

.card.card-shelf-container h6 {
    color: var(--ut-text);
}

.status-dot.bg-danger { background-color: var(--ut-alarm) !important; }
.status-dot.bg-warning { background-color: var(--ut-warning) !important; }
.status-dot.bg-secondary { background-color: var(--ut-stale) !important; }

/* ---------- Floating round buttons (menu, map style, recenter) ---------- */
.ut-fab {
    background: var(--ut-navy) !important;
    color: #fff !important;
    box-shadow: var(--ut-shadow-float) !important;
}

/* ---- Map legend (JS/mapLegend.js), shared by every Leaflet map ---- */
.map-legend {
    position: relative;
    font-family: var(--ut-font, inherit);
    font-size: 0.78rem;
}

.map-legend-toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.3rem 0.6rem;
    border: 1px solid var(--ut-border);
    border-radius: var(--ut-radius-control, 6px);
    background: var(--ut-card, #fff);
    color: var(--ut-text-secondary);
    font-weight: 500;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15);
    cursor: pointer;
}

    .map-legend-toggle:hover,
    .map-legend.open .map-legend-toggle {
        color: var(--ut-text);
    }

.map-legend-panel {
    display: none;
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    min-width: 210px;
    max-width: 270px;
    max-height: 280px;
    overflow-y: auto;
    padding: 0.5rem 0.65rem;
    border: 1px solid var(--ut-border);
    border-radius: var(--ut-radius-card, 8px);
    background: var(--ut-card, #fff);
    box-shadow: var(--ut-shadow-card, 0 4px 12px rgba(0, 0, 0, 0.12));
}

    /* Hover peeks; a click pins it open (touch screens have no hover). */
    .map-legend:hover .map-legend-panel,
    .map-legend.open .map-legend-panel {
        display: block;
    }

.map-legend-heading {
    margin: 0.4rem 0 0.2rem;
    padding-top: 0.4rem;
    border-top: 1px solid var(--ut-border);
    color: var(--ut-text-muted);
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

    .map-legend-panel > .map-legend-heading:first-child {
        margin-top: 0;
        padding-top: 0;
        border-top: 0;
    }

.map-legend-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.15rem 0;
    color: var(--ut-text);
}

.map-legend-label {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Every swatch sits in the same 20px slot so the labels line up. */
.map-legend-swatch {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    margin: 0 calc((20px - var(--sw, 20px)) / 2);
}

.map-legend-swatch-line {
    --sw: 20px;
    width: 20px;
    height: 0;
    border-top: 3px solid;
}

.map-legend-swatch-dot {
    --sw: 12px;
    width: 12px;
    height: 12px;
    border: 2px solid #fff;
    border-radius: 50%;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.2);
}

.map-legend-swatch-dot-small {
    --sw: 8px;
    width: 8px;
    height: 8px;
    border: 0;
    box-shadow: none;
}

.map-legend-swatch-handle {
    --sw: 14px;
    width: 14px;
    height: 14px;
    border: 2px solid;
    border-radius: 50%;
    background: #fff;
    font-size: 8px;
    font-weight: 700;
    line-height: 1;
}

.map-legend-swatch-ring {
    --sw: 16px;
    width: 16px;
    height: 16px;
    border: 2px solid;
    border-radius: 50%;
}

.map-legend-ring-centre {
    width: 6px;
    height: 6px;
    border-radius: 50%;
}

.map-legend-swatch-cluster {
    --sw: 20px;
    width: 20px;
    height: 20px;
    border: 2px solid;
    border-radius: 50%;
    font-size: 9px;
    font-weight: 700;
    line-height: 1;
}

.map-legend-swatch-area {
    --sw: 20px;
    width: 20px;
    height: 13px;
    border: 2px solid;
    border-radius: 2px;
}

.map-legend-swatch-pin {
    --sw: 12px;
    width: 12px;
    height: 12px;
    border: 2px solid #fff;
    border-radius: 50% 50% 50% 0;
    transform: rotate(-45deg);
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.25);
}