html, body {
    height: 100%;
}

.font-weight-medium {
    font-weight: 500 !important;
}

/* ═══════════════════════════════════════════════════════════════
   DESIGN TOKEN SYSTEM
   Graphite shell · Neutral grey surfaces · Steel-blue accents
   ═══════════════════════════════════════════════════════════════ */
:root {
    --app-font-family: "Montserrat", "Segoe UI", system-ui, sans-serif;

    /* Core neutral background system */
    --app-bg:           #d4d8dd;
    --app-bg-soft:      #e3e6ea;
    --app-bg-muted:     #ccd2d8;

    /* Surfaces */
    --app-surface:        #eef1f4;
    --app-surface-2:      #e6eaee;
    --app-surface-3:      #dde2e7;
    --app-surface-strong: rgba(238, 241, 244, 0.96);

    /* Shell */
    --app-shell:        #25313f;
    --app-shell-2:      #2d3a49;
    --app-shell-3:      #344355;
    --app-shell-border: rgba(141, 168, 194, 0.16);

    /* Text */
    --app-ink:             #1f2a36;
    --app-ink-muted:       #5d6b79;
    --app-ink-soft:        #7a8794;
    --app-on-shell:        #f4f7fa;
    --app-on-shell-muted:  rgba(244, 247, 250, 0.72);

    /* Borders and dividers */
    --app-border:        rgba(37, 49, 63, 0.10);
    --app-border-strong: rgba(37, 49, 63, 0.18);
    --app-divider:       rgba(37, 49, 63, 0.08);

    /* Functional accents — steel-blue, restrained */
    --app-accent:        #4c6f91;
    --app-accent-hover:  #3f617f;
    --app-accent-strong: #35536d;
    --app-accent-soft:   rgba(76, 111, 145, 0.12);
    --app-info:          #6b93b7;

    /* Status */
    --app-success: #4d7b5f;
    --app-warning: #b2833f;
    --app-error:   #b15555;

    /* Effects */
    --app-shadow-soft: 0 2px 8px rgba(22, 30, 38, 0.07);
    --app-shadow-card: 0 4px 14px rgba(22, 30, 38, 0.08);
    --app-shadow-none: none;

    /* Radius */
    --app-radius-sm: 10px;
    --app-radius-md: 12px;
    --app-radius-lg: 16px;

    /* Spacing rhythm */
    --app-space-1: 4px;
    --app-space-2: 8px;
    --app-space-3: 12px;
    --app-space-4: 16px;
    --app-space-5: 20px;
    --app-space-6: 24px;
    --app-space-7: 32px;

    /* Typography scale */
    --app-fw-regular:  400;
    --app-fw-medium:   500;
    --app-fw-semibold: 600;
    --app-fw-bold:     700;

    --app-text-xs:  0.75rem;
    --app-text-sm:  0.875rem;
    --app-text-md:  1rem;
    --app-text-lg:  1.125rem;
    --app-text-xl:  1.25rem;
    --app-text-2xl: 1.5rem;
    --app-text-3xl: 1.875rem;

    --app-lh-tight:   1.15;
    --app-lh-snug:    1.25;
    --app-lh-normal:  1.45;
    --app-lh-relaxed: 1.6;

    --app-tracking-tight:  -0.02em;
    --app-tracking-soft:   -0.01em;
    --app-tracking-normal: 0em;
    --app-tracking-wide:    0.02em;
    --app-tracking-wider:   0.05em;
    --app-tracking-caps:    0.08em;
}

/* ═══════════════════════════════════════════════════════════════
   BASE
   ═══════════════════════════════════════════════════════════════ */
html, body {
    overflow: hidden;
    background: var(--app-bg);
    font-family: var(--app-font-family);
    font-size: var(--app-text-sm);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

.font-weight-bold {
    font-weight: 700 !important;
}

/* ═══════════════════════════════════════════════════════════════
   TYPOGRAPHY SCALE — MudBlazor class overrides
   Restrained, operational, enterprise-grade
   ═══════════════════════════════════════════════════════════════ */

/* Ensure font family propagates everywhere */
.mud-typography,
.mud-input-control,
.mud-button-root,
.mud-chip,
.mud-nav-link,
.mud-table-cell,
.mud-select-input {
    font-family: var(--app-font-family) !important;
}

/* Heading scale — controlled, no visual aggression */
.mud-typography-h1 {
    font-size: var(--app-text-3xl);
    font-weight: var(--app-fw-semibold);
    letter-spacing: var(--app-tracking-tight);
    line-height: var(--app-lh-tight);
}
.mud-typography-h2 {
    font-size: 1.75rem;
    font-weight: var(--app-fw-semibold);
    letter-spacing: var(--app-tracking-tight);
    line-height: var(--app-lh-tight);
}
.mud-typography-h3 {
    font-size: var(--app-text-2xl);
    font-weight: var(--app-fw-semibold);
    letter-spacing: var(--app-tracking-soft);
    line-height: var(--app-lh-snug);
}
.mud-typography-h4 {
    font-size: var(--app-text-xl);
    font-weight: var(--app-fw-semibold);
    letter-spacing: var(--app-tracking-soft);
    line-height: var(--app-lh-snug);
}
/* Page title — 24px / 600 */
.mud-typography-h5 {
    font-size: var(--app-text-2xl);
    font-weight: var(--app-fw-semibold);
    letter-spacing: var(--app-tracking-soft);
    line-height: var(--app-lh-snug);
}
/* Section title — 18px / 600 */
.mud-typography-h6 {
    font-size: var(--app-text-lg);
    font-weight: var(--app-fw-semibold);
    letter-spacing: var(--app-tracking-soft);
    line-height: var(--app-lh-snug);
}
.mud-typography-body1 {
    font-size: var(--app-text-md);
    font-weight: var(--app-fw-regular);
    line-height: var(--app-lh-normal);
}
.mud-typography-body2 {
    font-size: var(--app-text-sm);
    font-weight: var(--app-fw-regular);
    line-height: var(--app-lh-normal);
}
.mud-typography-subtitle1 {
    font-size: var(--app-text-sm);
    font-weight: var(--app-fw-medium);
    line-height: var(--app-lh-normal);
}
.mud-typography-subtitle2 {
    font-size: var(--app-text-sm);
    font-weight: var(--app-fw-semibold);
    line-height: var(--app-lh-normal);
}
/* Caption / metadata — 12px / 500 */
.mud-typography-caption {
    font-size: var(--app-text-xs);
    font-weight: var(--app-fw-medium);
    line-height: var(--app-lh-normal);
}
/* Overline — uppercase label style */
.mud-typography-overline {
    font-size: 0.6875rem;
    font-weight: var(--app-fw-semibold);
    letter-spacing: var(--app-tracking-caps);
    text-transform: uppercase;
    line-height: var(--app-lh-normal);
}

/* ═══════════════════════════════════════════════════════════════
   GLOBAL MUDBLAZOR OVERRIDES
   ═══════════════════════════════════════════════════════════════ */
.mud-paper {
    box-shadow: var(--app-shadow-soft);
}

.mud-paper:not(.mud-appbar):not(.app-footer-brand):not(.app-footer-user):not(.app-clock-pill) {
    box-shadow: var(--app-shadow-soft);
}

.mud-button-root {
    border-radius: 8px;
    font-size: var(--app-text-sm);
    font-weight: var(--app-fw-semibold);
    letter-spacing: var(--app-tracking-normal);
    text-transform: none;
}

.mud-button-filled.mud-button-filled-primary {
    background: var(--app-accent);
    box-shadow: 0 2px 8px rgba(37, 49, 63, 0.18);
}

.mud-button-filled.mud-button-filled-primary:hover {
    background: var(--app-accent-hover);
    box-shadow: 0 3px 10px rgba(37, 49, 63, 0.22);
}

.mud-button-outlined {
    border-width: 1px;
}

.mud-chip {
    border-radius: 8px !important;
    font-weight: 600;
}

.mud-chip.mud-chip-outlined {
    border-width: 1.5px;
    font-weight: 600;
}

.mud-input-control .mud-input-outlined-border,
.mud-input-control .mud-input-slot {
    border-radius: var(--app-radius-sm) !important;
}

.mud-input-control .mud-input-outlined-border {
    border-color: var(--app-border-strong) !important;
}

.mud-input-control:hover .mud-input-outlined-border,
.mud-input-control.mud-input-focused .mud-input-outlined-border {
    border-color: var(--app-accent) !important;
}

.mud-input-label {
    color: var(--app-ink-muted);
    font-size: var(--app-text-sm) !important;
    font-weight: var(--app-fw-medium) !important;
}
.mud-input-helper-text {
    color: var(--app-ink-muted);
    font-size: var(--app-text-xs) !important;
}

.mud-alert {
    border-radius: var(--app-radius-sm) !important;
    border: 1px solid var(--app-border-strong);
}

.mud-divider {
    border-color: var(--app-divider) !important;
}

/* ═══════════════════════════════════════════════════════════════
   SHARED SURFACE CLASSES
   ═══════════════════════════════════════════════════════════════ */
.app-surface-card {
    border-radius: var(--app-radius-md);
    border: 1px solid var(--app-border);
    background: var(--app-surface);
    box-shadow: var(--app-shadow-card);
}

/* AppSectionCard — integrated section, not floating window */
.app-surface-card-soft {
    border-radius: var(--app-radius-md);
    border: 1px solid var(--app-border);
    background: var(--app-surface);
    box-shadow: var(--app-shadow-soft);
}

.app-section-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    padding-bottom: 10px;
    margin-bottom: 2px;
    border-bottom: 1px solid var(--app-border);
}

.app-section-title {
    font-size: var(--app-text-lg);
    font-weight: var(--app-fw-semibold);
    letter-spacing: var(--app-tracking-soft);
    line-height: var(--app-lh-snug);
    color: var(--app-ink);
}

.app-section-subtitle {
    font-size: var(--app-text-sm);
    color: var(--app-ink-muted);
    line-height: var(--app-lh-normal);
}

/* ═══════════════════════════════════════════════════════════════
   KPI / METRIC CARDS
   ═══════════════════════════════════════════════════════════════ */
.app-kpi-label {
    font-size: var(--app-text-xs);
    font-weight: var(--app-fw-semibold);
    letter-spacing: var(--app-tracking-caps);
    text-transform: uppercase;
    color: var(--app-ink-muted);
}

.app-kpi-value {
    font-size: var(--app-text-2xl);
    font-weight: var(--app-fw-bold);
    letter-spacing: var(--app-tracking-tight);
    line-height: var(--app-lh-tight);
}

.app-kpi-meta {
    font-size: var(--app-text-xs);
    color: var(--app-ink-soft);
}

/* ═══════════════════════════════════════════════════════════════
   PAGE HEADER
   ═══════════════════════════════════════════════════════════════ */
.app-page-header {
    border-radius: var(--app-radius-md);
    border: 1px solid var(--app-border);
    background: var(--app-surface);
    box-shadow: var(--app-shadow-soft);
}

/* Flat variant — no card box */
.app-page-title-flat {
    padding-bottom: 4px;
    border-bottom: 1px solid var(--app-border-strong);
    margin-bottom: 20px;
}

.app-page-header__row {
    gap: 12px;
}

.app-page-header__left {
    gap: 12px;
}

.app-page-header__icon {
    width: 40px;
    height: 40px;
    border-radius: var(--app-radius-sm);
    background: var(--app-accent-soft);
    border: 1px solid var(--app-border-strong);
}

.app-page-header__title {
    font-size: var(--app-text-2xl);
    font-weight: var(--app-fw-semibold);
    letter-spacing: var(--app-tracking-soft);
    line-height: var(--app-lh-snug);
}

.app-page-header__title-accent {
    color: var(--app-ink);
}

.app-page-header__title-sep {
    opacity: 0.35;
    margin: 0 6px;
}

.app-page-header__title-rest {
    color: var(--app-accent);
}

.app-page-header__subtitle {
    font-size: var(--app-text-sm);
    color: var(--app-ink-muted);
    max-width: 72ch;
    line-height: var(--app-lh-relaxed);
}

.app-page-header__actions {
    gap: 8px;
}

/* ═══════════════════════════════════════════════════════════════
   TABLES — neutral grey, low-noise
   ═══════════════════════════════════════════════════════════════ */
.mud-table,
.mud-data-grid {
    border-radius: var(--app-radius-sm);
    border: 1px solid var(--app-border);
    background: var(--app-surface);
    overflow: hidden;
    box-shadow: var(--app-shadow-soft);
}

.mud-table .mud-table-container,
.mud-data-grid .mud-table-container,
.mud-data-grid .mud-data-grid-table-container {
    border-radius: inherit;
    background: var(--app-surface);
}

.mud-table .mud-table-head .mud-table-cell,
.mud-data-grid .mud-table-head .mud-table-cell,
.mud-data-grid .mud-data-grid-header {
    background: var(--app-surface-3);
    font-size: var(--app-text-xs);
    font-weight: var(--app-fw-semibold);
    letter-spacing: var(--app-tracking-wider);
    text-transform: uppercase;
    color: var(--app-ink-muted);
    border-bottom: 1px solid var(--app-border-strong);
    padding-top: 10px;
    padding-bottom: 10px;
}

.mud-table .mud-table-row .mud-table-cell,
.mud-data-grid .mud-table-row .mud-table-cell {
    background: transparent;
    border-bottom-color: var(--app-divider);
    padding-top: 13px;
    padding-bottom: 13px;
    vertical-align: top;
}

.mud-table-striped .mud-table-row:nth-child(even) .mud-table-cell,
.mud-data-grid .mud-table-striped .mud-table-row:nth-child(even) .mud-table-cell {
    background: rgba(37, 49, 63, 0.03);
}

.mud-table-hover .mud-table-row:hover .mud-table-cell,
.mud-data-grid .mud-table-row:hover .mud-table-cell {
    background: var(--app-accent-soft);
}

.mud-table .mud-table-pagination,
.mud-data-grid .mud-table-pagination {
    border-top: 1px solid var(--app-border);
    background: var(--app-surface-2);
}

/* Explicit opt-in table class */
.app-table-shell-table {
    border-radius: var(--app-radius-sm) !important;
    border: 1px solid var(--app-border) !important;
    background: var(--app-surface) !important;
    overflow: hidden;
}

.app-table-shell-table .mud-table-container {
    background: var(--app-surface) !important;
}

.app-table-shell-table .mud-table-head .mud-table-cell {
    background: var(--app-surface-3) !important;
    font-size: var(--app-text-xs) !important;
    font-weight: var(--app-fw-semibold) !important;
    letter-spacing: var(--app-tracking-wider) !important;
    text-transform: uppercase !important;
    color: var(--app-ink-muted) !important;
    border-bottom: 1px solid var(--app-border-strong) !important;
}

.app-table-shell-table .mud-table-row .mud-table-cell {
    background: transparent;
    border-bottom-color: var(--app-divider) !important;
}

.app-table-shell-table.mud-table-striped .mud-table-row:nth-child(even) .mud-table-cell {
    background: rgba(37, 49, 63, 0.03);
}

.app-table-shell-table .mud-table-cell:last-child {
    min-width: 260px;
    max-width: 340px;
    padding-top: 10px !important;
    padding-bottom: 10px !important;
    vertical-align: middle !important;
}

.app-table-shell-table .mud-table-cell:last-child .mud-button-root {
    border-radius: 7px;
    min-height: 30px;
    padding-left: 8px;
    padding-right: 8px;
}

.app-table-shell-table .mud-table-cell:last-child .mud-input-control {
    min-width: 140px;
}

.app-table-shell-table .mud-button-root.mud-button-text {
    border-radius: 7px;
    min-height: 30px;
    padding-left: 8px;
    padding-right: 8px;
}

.app-table-shell-table .mud-button-root.mud-button-text:not(.mud-button-text-error) {
    background: rgba(76, 111, 145, 0.07);
}

.app-table-shell-table .mud-button-root.mud-button-text:hover:not(.mud-button-text-error) {
    background: rgba(76, 111, 145, 0.14);
}

.app-table-shell-table .mud-button-root.mud-button-text.mud-button-text-error {
    background: rgba(177, 85, 85, 0.07);
}

.app-table-shell-table .mud-button-root.mud-button-text.mud-button-text-error:hover {
    background: rgba(177, 85, 85, 0.14);
}

.app-table-shell-table .mud-switch {
    margin-top: -2px;
}

/* Table within app-table-shell wrapper */
.app-table-shell .mud-table-container {
    border-radius: var(--app-radius-sm);
}

.app-table-shell .mud-table-head .mud-table-cell {
    background: var(--app-surface-3);
    font-weight: 700;
    border-bottom: 1px solid var(--app-border-strong);
}

/* ═══════════════════════════════════════════════════════════════
   SHELL — AppBar
   ═══════════════════════════════════════════════════════════════ */
.route-header {
    color: var(--app-on-shell);
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.20);
}

.app-shell-layout {
    height: 100vh;
    background: transparent;
}

.app-topbar {
    color: var(--app-on-shell) !important;
    border-bottom: 1px solid var(--app-shell-border);
    box-shadow: 0 1px 0 var(--app-shell-border);
}

.app-topbar.mud-appbar {
    background: var(--app-shell) !important;
    color: var(--app-on-shell) !important;
    border-bottom: 1px solid var(--app-shell-border) !important;
    box-shadow: 0 2px 8px rgba(22, 30, 38, 0.16) !important;
}

.app-topbar .mud-toolbar {
    min-height: 72px;
    padding-left: 20px;
    padding-right: 20px;
}

.app-topbar-brand {
    gap: 12px;
    min-width: 0;
}

.app-topbar-logo {
    display: block;
    height: 40px;
    width: auto;
    object-fit: contain;
}

.app-topbar__menu {
    margin-right: 8px;
}

.app-topbar-links {
    margin-left: 20px;
}

.app-topbar-links .mud-button-root {
    border-radius: 7px;
    padding-left: 14px;
    padding-right: 14px;
}

.app-topbar-chip {
    border-color: var(--app-shell-border) !important;
    background: rgba(255, 255, 255, 0.05);
}

.app-topbar-utilities {
    flex-shrink: 0;
}

.app-topbar .mud-button-root,
.app-topbar .mud-icon-button,
.app-footerbar .mud-button-root {
    color: var(--app-on-shell) !important;
}

/* ═══════════════════════════════════════════════════════════════
   SHELL — Drawer
   ═══════════════════════════════════════════════════════════════ */
.app-drawer {
    background: var(--app-shell-2) !important;
    border-right: 1px solid var(--app-shell-border);
    width: 260px !important;
}

.app-drawer.mud-drawer--closed {
    transform: translateX(-100%) !important;
    visibility: hidden;
}

.app-drawer .mud-drawer-content {
    padding: 72px 10px 72px 10px;
    background: var(--app-shell-2);
    display: flex;
    flex-direction: column;
}

.app-drawer .mud-drawer-content,
.app-nav {
    background: transparent !important;
}

/* Nav menu — transparent, no card treatment */
.app-drawer .mud-navmenu,
.app-nav.mud-navmenu {
    background: transparent !important;
    border: none !important;
    border-radius: 0;
    padding: 8px 4px;
    flex: 1 1 auto;
}

.app-drawer .mud-nav-link {
    color: var(--app-on-shell-muted) !important;
    border-radius: var(--app-radius-sm);
    margin: 2px 4px;
    padding: 10px 12px;
    min-height: 44px;
    transition: background 120ms ease, color 120ms ease;
    border: 1px solid transparent;
}

.app-drawer .mud-nav-link .mud-icon-root {
    color: rgba(180, 200, 220, 0.72);
}

.app-drawer .mud-nav-link:hover {
    background: rgba(244, 247, 250, 0.06);
    color: var(--app-on-shell) !important;
    border-color: transparent;
}

.app-drawer .mud-nav-link:hover .mud-icon-root {
    color: rgba(180, 200, 220, 0.92);
}

.app-drawer .mud-nav-link.mud-nav-link-active,
.app-drawer .mud-nav-link.active {
    background: rgba(76, 111, 145, 0.20);
    box-shadow: inset 3px 0 0 rgba(107, 147, 183, 0.80);
    border-color: transparent;
    color: var(--app-on-shell) !important;
}

.app-drawer .mud-nav-link.mud-nav-link-active .mud-icon-root,
.app-drawer .mud-nav-link.active .mud-icon-root {
    color: rgba(180, 210, 235, 0.90);
}

.app-drawer-header {
    padding: 14px 8px 12px 8px;
    border-bottom: 1px solid var(--app-shell-border);
    margin-bottom: 6px;
}

.app-nav {
    padding-top: 0;
}

.app-nav-group {
    padding: 2px 0;
}

.app-nav-divider {
    margin: 6px 8px 8px 8px;
    border-color: var(--app-shell-border) !important;
}

.app-shell-logo {
    display: block;
    max-width: 180px;
    width: 100%;
    height: auto;
    object-fit: contain;
}

.app-nav-section-label {
    margin: 8px 10px 4px 10px;
    padding: 0 4px;
    font-size: var(--app-text-xs);
    font-weight: var(--app-fw-semibold);
    letter-spacing: var(--app-tracking-caps);
    text-transform: uppercase;
    color: rgba(180, 200, 220, 0.45);
}

.app-nav-link-row {
    width: 100%;
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    min-width: 0;
}

.app-nav-link-text {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: var(--app-text-sm);
    font-weight: var(--app-fw-semibold);
    letter-spacing: var(--app-tracking-normal);
}

/* Drawer footer — flat, integrated */
.app-drawer-footer {
    padding: 10px 4px 4px 4px;
    border-top: 1px solid var(--app-shell-border);
    margin-top: 6px;
}

.app-drawer-status {
    padding: 8px 10px;
    border-radius: var(--app-radius-sm);
    background: rgba(255, 255, 255, 0.04);
}

.app-drawer-status__label {
    font-size: var(--app-text-xs);
    font-weight: var(--app-fw-medium);
    color: var(--app-on-shell-muted);
    text-transform: uppercase;
    letter-spacing: var(--app-tracking-caps);
}

.app-drawer-status__value {
    font-size: var(--app-text-xs);
    font-weight: var(--app-fw-semibold);
    color: var(--app-on-shell);
}

/* ═══════════════════════════════════════════════════════════════
   SHELL — Main content area
   ═══════════════════════════════════════════════════════════════ */
.app-main-scroll {
    height: 100vh;
    box-sizing: border-box;
    padding-top: 88px !important;
    padding-bottom: 80px !important;
    overflow-y: auto !important;
    overflow-x: hidden;
    scroll-behavior: smooth;
    background:
        linear-gradient(90deg, rgba(37, 49, 63, 0.18) 0, rgba(37, 49, 63, 0.06) 180px, transparent 300px),
        linear-gradient(180deg, rgba(37, 49, 63, 0.08) 0, transparent 100px),
        var(--app-bg);
}

/* ═══════════════════════════════════════════════════════════════
   SHELL — Footer
   ═══════════════════════════════════════════════════════════════ */
.app-footerbar {
    background: var(--app-shell) !important;
    color: var(--app-on-shell) !important;
    border-top: 1px solid var(--app-shell-border);
}

.app-footerbar.mud-appbar {
    background: var(--app-shell) !important;
    color: var(--app-on-shell) !important;
    border-top: 1px solid var(--app-shell-border) !important;
    box-shadow: 0 -1px 0 var(--app-shell-border) !important;
}

.app-footerbar .mud-toolbar {
    min-height: 60px;
    background: transparent !important;
    padding-left: 20px;
    padding-right: 20px;
}

.app-footer-shell {
    width: 100%;
    gap: 16px;
    justify-content: center !important;
    min-height: 44px;
}

.app-footer-shell > .mud-stack {
    justify-content: center;
}

.app-footer-meta {
    justify-content: center;
}

.app-footer-user {
    border-radius: 7px;
    border: 1px solid var(--app-shell-border);
    background: rgba(255, 255, 255, 0.05);
}

.app-footer-user__name {
    font-size: var(--app-text-xs);
    font-weight: var(--app-fw-semibold);
    color: var(--app-on-shell);
    max-width: 220px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.app-footer-user .mud-avatar {
    background: rgba(255, 255, 255, 0.10);
}

.app-footer-user .mud-icon-root {
    color: rgba(180, 210, 235, 0.80) !important;
}

.app-footer-brand {
    border-radius: 7px;
    border: 1px solid var(--app-shell-border);
    background: rgba(255, 255, 255, 0.05);
}

.app-footer-logo {
    display: block;
    height: 24px;
    width: auto;
    object-fit: contain;
}

.app-footer-brand__title {
    font-size: var(--app-text-xs);
    font-weight: var(--app-fw-semibold);
    letter-spacing: var(--app-tracking-wide);
    color: var(--app-on-shell);
}

.app-footer-brand__accent {
    color: var(--app-on-shell);
}

.app-footer-brand__sep {
    opacity: .35;
    margin: 0 4px;
}

.app-footer-brand__rest {
    color: var(--app-info);
}

/* Clock pill */
.app-clock-pill {
    border-radius: 7px;
    border: 1px solid var(--app-shell-border);
    background: rgba(255, 255, 255, 0.05);
}

.app-clock-pill__date {
    font-size: var(--app-text-xs);
    font-weight: var(--app-fw-medium);
    color: var(--app-on-shell-muted);
}

.app-clock-pill__sep {
    opacity: .35;
}

.app-clock-pill__time {
    font-size: var(--app-text-sm);
    font-weight: var(--app-fw-semibold);
    letter-spacing: var(--app-tracking-wide);
    color: var(--app-on-shell);
}

.app-clock-pill__tz {
    height: 22px;
    font-size: var(--app-text-xs);
    font-weight: var(--app-fw-semibold);
}

/* ═══════════════════════════════════════════════════════════════
   DIALOGS AND OVERLAYS
   ═══════════════════════════════════════════════════════════════ */
.custom-dialog-background {
    background-color: rgba(22, 30, 38, 0.50) !important;
    backdrop-filter: blur(4px);
    transition: background-color 0.2s ease;
}

.mud-snackbar-rounded {
    border-radius: var(--app-radius-sm) !important;
}

.mud-snackbar-shadow {
    box-shadow: 0 4px 16px rgba(22, 30, 38, 0.18) !important;
}

html[data-mud-theme="dark"] .mud-snackbar-backdrop {
    background-color: rgba(0, 0, 0, 0.55) !important;
}

html:not([data-mud-theme="dark"]) .mud-snackbar-backdrop {
    background-color: rgba(255, 255, 255, 0.65) !important;
}

.backdrop-blur-sm {
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}

/* ═══════════════════════════════════════════════════════════════
   TABS
   ═══════════════════════════════════════════════════════════════ */
.mud-tabs .mud-tabs-header {
    background: var(--app-surface-3);
    border-radius: var(--app-radius-sm) var(--app-radius-sm) 0 0;
    border-bottom: 1px solid var(--app-border-strong);
}

.mud-tabs .mud-tab {
    color: var(--app-ink-muted);
    font-weight: 600;
    letter-spacing: 0.01em;
    border-radius: var(--app-radius-sm) var(--app-radius-sm) 0 0;
    transition: background 120ms ease, color 120ms ease;
}

.mud-tabs .mud-tab:hover {
    background: var(--app-accent-soft);
    color: var(--app-accent);
}

.mud-tabs .mud-tab.mud-tab-active {
    color: var(--app-accent);
    background: rgba(76, 111, 145, 0.08);
}

.mud-tabs .mud-tab-slider {
    background-color: var(--app-accent) !important;
    height: 2px;
}

.mud-tabs .mud-tabs-panels {
    background: var(--app-surface);
    border: 1px solid var(--app-border);
    border-top: none;
    border-radius: 0 0 var(--app-radius-sm) var(--app-radius-sm);
    padding: 12px;
}

/* ═══════════════════════════════════════════════════════════════
   MAP AND ROUTE
   ═══════════════════════════════════════════════════════════════ */
.leaflet-tooltip.station-label {
    background: rgba(37, 49, 63, 0.88);
    border: 1px solid rgba(141, 168, 194, 0.18);
    border-radius: 4px;
    color: #f4f7fa;
    font-family: "Montserrat", "Segoe UI", system-ui, sans-serif;
    font-size: 11px;
    font-weight: 500;
    padding: 2px 7px;
    white-space: nowrap;
    box-shadow: 0 2px 8px rgba(22, 30, 38, 0.18);
}
.leaflet-tooltip.station-label::before {
    border-top-color: rgba(37, 49, 63, 0.88);
}

.route-root {
    height: 100%;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.route-body {
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
}

.route-map-paper, .route-stops-paper {
    height: 100%;
    min-height: 0;
    overflow: hidden;
    border-radius: var(--app-radius-sm);
}

.map-box {
    height: 100%;
    width: 100%;
}

.stops-header {
    padding: 12px 12px 8px 12px;
}

.stops-scroll {
    height: calc(100% - 52px);
    overflow-y: auto;
    overflow-x: hidden;
    padding: 6px 8px 10px 8px;
}

.dir-select {
    width: 110px;
    background: rgba(255, 255, 255, 0.06);
    border-radius: var(--app-radius-sm);
}

.route-stops-scroll {
    height: calc(600px - 56px);
    overflow-y: auto;
    overflow-x: hidden;
    padding-right: 6px;
}

.stop-card {
    width: 100%;
    padding: 10px 12px;
    border-radius: var(--app-radius-sm);
    cursor: pointer;
    transition: transform 120ms ease, background 120ms ease;
    background: var(--app-surface);
}

.stop-card:hover {
    transform: translateY(-1px);
    background: var(--app-accent-soft);
}

.stop-card-selected {
    background: var(--app-accent-soft);
    outline: 2px solid rgba(76, 111, 145, 0.22);
}

.stop-name {
    font-weight: 600;
}

.stop-sub {
    color: var(--app-accent);
    font-weight: 700;
    letter-spacing: 0.01em;
}

.stops-timeline {
    margin: 0;
    padding: 0;
}

.stop-item {
    margin-bottom: 6px;
}

/* Route page viewport */
.route-root {
    height: 100vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.route-body {
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
}

.route-body .mud-grid {
    height: 100%;
}

.route-map-paper, .route-stops-paper {
    height: 100%;
    min-height: 0;
    overflow: hidden;
    border-radius: var(--app-radius-sm);
}

.map-box {
    height: 100%;
    width: 100%;
}

.stops-scroll {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
}

/* ═══════════════════════════════════════════════════════════════
   LED PREVIEW
   ═══════════════════════════════════════════════════════════════ */
.led-preview-shell {
    display: inline-block;
    padding: 10px;
    border-radius: var(--app-radius-sm);
    background: #0b1220;
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.22);
}

.led-preview-canvas {
    display: block;
    background: #000;
    border-radius: 8px;
}

/* ═══════════════════════════════════════════════════════════════
   OPERATIONS MAP
   ═══════════════════════════════════════════════════════════════ */
.ops-map-section {
    min-height: 640px;
}

.ops-map-shell {
    position: relative;
    min-height: 560px;
}

.ops-station-map {
    width: 100%;
    height: 560px;
    border-radius: var(--app-radius-md);
    overflow: hidden;
    border: 1px solid var(--app-border-strong);
}

.ops-map-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    border-radius: var(--app-radius-md);
    background: rgba(238, 241, 244, 0.88);
    backdrop-filter: blur(4px);
}

.ops-detail-block,
.ops-preview-block,
.ops-alert-card {
    border-radius: var(--app-radius-sm);
    border: 1px solid var(--app-border);
    background: var(--app-surface);
}

/* ═══════════════════════════════════════════════════════════════
   RESPONSIVE
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 1279.98px) {
    .ops-map-section {
        min-height: auto;
    }

    .ops-map-shell,
    .ops-station-map {
        min-height: 420px;
        height: 420px;
    }
}

@media (max-width: 599.98px) {
    .app-topbar .mud-toolbar {
        min-height: 68px;
        padding-left: 12px;
        padding-right: 12px;
    }

    .app-topbar-logo {
        height: 34px;
    }

    .app-main-scroll {
        padding-top: 84px !important;
        padding-bottom: 88px !important;
    }

    .app-footerbar .mud-toolbar {
        padding-left: 12px;
        padding-right: 12px;
    }

    .app-footer-shell {
        flex-direction: column;
        align-items: center !important;
    }

    .app-footer-meta {
        justify-content: center;
    }

    .ops-map-shell,
    .ops-station-map {
        min-height: 340px;
        height: 340px;
    }
}

/* ═══════════════════════════════════════════════════════════════
   TRANSIT MAP — Custom status markers
   Graphite shell design system, Montserrat typography
   ═══════════════════════════════════════════════════════════════ */

/* --- Base marker pin --- */
.tmap-pin {
    width: 20px;
    height: 20px;
    position: relative;
    transition: transform 0.15s ease;
    /* Ensure the pin itself does not intercept clicks on the map */
    pointer-events: none;
}

.tmap-pin--selected {
    transform: scale(1.4);
    z-index: 1000;
}

/* Outer ring: graphite fill + status-colored border */
.tmap-pin__ring {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 2px solid currentColor;
    background: rgba(37, 49, 63, 0.65);
    box-sizing: border-box;
}

/* Inner dot: solid status color */
.tmap-pin__dot {
    position: absolute;
    inset: 5px;
    border-radius: 50%;
    background: currentColor;
}

/* --- Status palette (uses currentColor cascade) --- */
.tmap-pin--online        { color: #4d7b5f; }
.tmap-pin--stale         { color: #b2833f; }
.tmap-pin--offline       { color: #b15555; }
.tmap-pin--never-seen    { color: #5d6b79; }
.tmap-pin--unknown       { color: #5d6b79; }
.tmap-pin--warnings      { color: #b2833f; }
.tmap-pin--active-alerts { color: #b15555; }

/* Warnings: subtle ambient glow on the ring */
.tmap-pin--warnings .tmap-pin__ring {
    box-shadow: 0 0 0 3px rgba(178, 131, 63, 0.2);
}

/* Active alerts: repeating pulse ring */
.tmap-pin--active-alerts .tmap-pin__ring {
    animation: tmap-pulse 1.8s ease-out infinite;
}

@keyframes tmap-pulse {
    0%   { box-shadow: 0 0 0 0   rgba(177, 85, 85, 0.55); }
    70%  { box-shadow: 0 0 0 9px rgba(177, 85, 85, 0);    }
    100% { box-shadow: 0 0 0 0   rgba(177, 85, 85, 0);    }
}

/* ═══════════════════════════════════════════════════════════════
   TRANSIT MAP — Custom popup
   ═══════════════════════════════════════════════════════════════ */

.transit-popup .leaflet-popup-content-wrapper {
    background: #25313f;
    border: 1px solid rgba(141, 168, 194, 0.15);
    border-radius: 10px;
    box-shadow: 0 6px 28px rgba(22, 30, 38, 0.35);
    color: #f4f7fa;
    font-family: "Montserrat", "Segoe UI", system-ui, sans-serif;
    padding: 0;
    min-width: 240px;
}

.transit-popup .leaflet-popup-content {
    margin: 0;
    line-height: 1.45;
}

.transit-popup .leaflet-popup-tip-container {
    /* keep tip aligned */
}

.transit-popup .leaflet-popup-tip {
    background: #25313f;
    box-shadow: none;
}

.transit-popup .leaflet-popup-close-button {
    color: rgba(244, 247, 250, 0.45) !important;
    font-size: 18px !important;
    top: 8px !important;
    right: 10px !important;
    line-height: 1 !important;
    width: 20px !important;
    height: 20px !important;
}

.transit-popup .leaflet-popup-close-button:hover {
    color: #f4f7fa !important;
    background: transparent !important;
}

/* --- Popup internal layout --- */
.tp-popup {
    font-family: "Montserrat", "Segoe UI", system-ui, sans-serif;
    font-size: 13px;
}

.tp-popup__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 11px 16px 9px;
    border-bottom: 1px solid rgba(141, 168, 194, 0.10);
}

.tp-popup__name {
    font-size: 13px;
    font-weight: 600;
    color: #f4f7fa;
    letter-spacing: -0.01em;
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Status badge pill */
.tp-badge {
    flex-shrink: 0;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    padding: 2px 7px;
    border-radius: 4px;
}

.tp-badge--online        { background: rgba(77,  123, 95,  0.25); color: #7dbf96; }
.tp-badge--stale         { background: rgba(178, 131, 63,  0.25); color: #d4a96a; }
.tp-badge--offline       { background: rgba(177, 85,  85,  0.28); color: #d98888; }
.tp-badge--never-seen    { background: rgba(93,  107, 121, 0.25); color: #9aabb8; }
.tp-badge--unknown       { background: rgba(93,  107, 121, 0.25); color: #9aabb8; }
.tp-badge--warnings      { background: rgba(178, 131, 63,  0.28); color: #d4a96a; }
.tp-badge--active-alerts { background: rgba(177, 85,  85,  0.35); color: #e09595; }

/* Popup body rows */
.tp-popup__body {
    padding: 9px 16px 12px;
}

.tp-popup__row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    padding: 3px 0;
}

.tp-label {
    font-size: 11px;
    font-weight: 500;
    color: rgba(244, 247, 250, 0.46);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    flex-shrink: 0;
}

.tp-val {
    font-size: 12px;
    font-weight: 500;
    color: #f4f7fa;
    text-align: right;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tp-val--muted {
    color: rgba(244, 247, 250, 0.38);
    font-style: italic;
}

/* Message strip at bottom of popup */
.tp-popup__message {
    margin-top: 8px;
    padding: 6px 10px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 400;
    line-height: 1.45;
}

.tp-popup__message--empty {
    color: rgba(244, 247, 250, 0.36);
    background: rgba(255, 255, 255, 0.04);
    font-style: italic;
}

.tp-popup__message--alert {
    background: rgba(177, 85, 85, 0.18);
    color: #e09595;
    border-left: 2px solid #b15555;
    padding-left: 9px;
}

.tp-popup__message--warn {
    background: rgba(178, 131, 63, 0.18);
    color: #d4a96a;
    border-left: 2px solid #b2833f;
    padding-left: 9px;
}

.tp-popup__message--info {
    background: rgba(107, 147, 183, 0.12);
    color: #a0c0d8;
}