/* ============================================================
   Business App — Azure Portal Design System
   Aesthetic: Microsoft Azure Control Panel
   Font: Segoe UI (system), fallback sans-serif
   Strategy: Use --mud-palette-* vars for dark mode.
             Azure sidebar is always dark.
             Warm off-white (#FAF9F8) content areas.
             Microsoft blue (#0078D4) accent throughout.
   ============================================================ */

/* ── CSS Variables ── */
:root {
    /* Font */
    --az-font: 'Segoe UI', system-ui, -apple-system, BlinkMacSystemFont,
               'Helvetica Neue', Arial, sans-serif;
    --az-font-mono: 'Cascadia Code', 'Consolas', 'Courier New', monospace;

    /* Microsoft Blue */
    --az-blue:       #0078D4;
    --az-blue-hover: #106EBE;
    --az-blue-press: #005A9E;
    --az-blue-light: rgba(0, 120, 212, 0.06);

    /* Sidebar — always dark, never changes with theme */
    --az-sidebar-bg:          #201F1E;
    --az-sidebar-hover:       rgba(255, 255, 255, 0.08);
    --az-sidebar-active-bg:   rgba(255, 255, 255, 0.1);
    --az-sidebar-text:        rgba(200, 198, 196, 0.85);
    --az-sidebar-text-active: #FFFFFF;
    --az-sidebar-accent:      #0078D4;
    --az-sidebar-section:     rgba(200, 198, 196, 0.4);
    --az-sidebar-border:      rgba(255, 255, 255, 0.06);

    /* Top bar */
    --az-topbar-bg: #1B2A3B;

    /* Warm neutral borders (Azure uses warm tones) */
    --az-border: #EDEBE9;

    /* Bottom nav */
    --app-bottom-nav-height: 52px;

    /* Transitions — Azure uses fast, purposeful motion */
    --t: 100ms ease;
    --t-med: 180ms ease;
}

/* ── Base Reset ── */
*, *::before, *::after { box-sizing: border-box; }

html, body {
    font-family: var(--az-font);
    font-size: 14px;
    line-height: 1.45;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overscroll-behavior: none;
}

/* ── Scrollbars — thin, Azure style ── */
::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
    background: var(--mud-palette-lines-default, #EDEBE9);
    border-radius: 0;
}
::-webkit-scrollbar-thumb:hover {
    background: var(--mud-palette-text-secondary, #605E5C);
}
* {
    scrollbar-width: thin;
    scrollbar-color: var(--mud-palette-lines-default, #EDEBE9) transparent;
}

/* ── Loading Screen ── */
.app-loading-screen {
    position: fixed;
    inset: 0;
    background: #1B2A3B;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
}
.app-loading-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
}
.app-loading-logo {
    width: 40px;
    height: 40px;
    background: #0078D4;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--az-font);
    font-size: 20px;
    font-weight: 600;
    color: #FFFFFF;
}
.app-loading-bar {
    width: 120px;
    height: 2px;
    background: rgba(255, 255, 255, 0.15);
    overflow: hidden;
}
.app-loading-progress {
    height: 100%;
    background: #0078D4;
    animation: loading-sweep 1.2s ease-in-out infinite;
}
@keyframes loading-sweep {
    0%   { transform: translateX(-100%); width: 50%; }
    50%  { transform: translateX(80%);   width: 50%; }
    100% { transform: translateX(250%);  width: 50%; }
}

/* ================================================================
   LAYOUT CHROME
   ================================================================ */

/* ── Sidebar ── */
.mud-drawer,
.mud-drawer-content {
    background: var(--az-sidebar-bg) !important;
    border-right: 1px solid var(--az-sidebar-border) !important;
}

/* ── AppBar — always dark (Azure top bar) ── */
.mud-appbar {
    box-shadow: none !important;
    border-bottom: none !important;
    background: var(--az-topbar-bg) !important;
}

/* ── Main Content ── */
.mud-main-content {
    background: var(--mud-palette-background) !important;
    min-height: 100vh;
}
.mud-container {
    background: transparent !important;
}

/* ── App Brand in Sidebar ── */
.app-brand {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    border-bottom: 1px solid var(--az-sidebar-border);
    user-select: none;
    height: 48px; /* Match appbar height */
}
.app-brand-icon {
    width: 24px;
    height: 24px;
    background: var(--az-blue);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--az-font);
    font-size: 13px;
    font-weight: 700;
    color: #FFFFFF;
    flex-shrink: 0;
    border-radius: 2px;
}
.app-brand-name {
    font-size: 14px;
    font-weight: 600;
    color: #FFFFFF;
    letter-spacing: 0;
}
.app-brand-badge {
    font-size: 10px;
    font-weight: 600;
    color: rgba(200, 198, 196, 0.6);
    background: rgba(255, 255, 255, 0.08);
    padding: 1px 5px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    margin-left: auto;
    flex-shrink: 0;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 2px;
}

/* ── AppBar Content ── */
.app-appbar-brand {
    font-size: 14px;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.9);
    letter-spacing: 0;
}
.app-appbar-actions {
    display: flex;
    align-items: center;
    gap: 4px;
}
/* Make appbar icons white against dark topbar */
.mud-appbar .mud-icon-button {
    color: rgba(255, 255, 255, 0.8) !important;
}
.mud-appbar .mud-icon-button:hover {
    background: rgba(255, 255, 255, 0.1) !important;
    color: #FFFFFF !important;
}

/* ── Sidebar Nav Section Labels ── */
.app-nav-section-label {
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--az-sidebar-section);
    padding: 12px 16px 2px;
    display: block;
}

/* ── Nav Links ── */
.mud-nav-link {
    border-radius: 0 !important;
    margin: 0 !important;
    padding: 7px 14px 7px 12px !important;
    font-size: 14px !important;
    font-weight: 400 !important;
    color: var(--az-sidebar-text) !important;
    transition: background var(--t), color var(--t) !important;
    border-left: 2px solid transparent !important;
}
.mud-nav-link:hover {
    background: var(--az-sidebar-hover) !important;
    color: #FFFFFF !important;
}
.mud-nav-link.active {
    background: var(--az-sidebar-active-bg) !important;
    color: var(--az-sidebar-text-active) !important;
    font-weight: 600 !important;
    border-left-color: var(--az-sidebar-accent) !important;
}
.mud-nav-link .mud-nav-link-icon {
    color: var(--az-sidebar-text) !important;
    font-size: 18px !important;
    opacity: 0.8;
    transition: color var(--t) !important;
}
.mud-nav-link:hover .mud-nav-link-icon,
.mud-nav-link.active .mud-nav-link-icon {
    color: #FFFFFF !important;
    opacity: 1;
}

.mud-drawer .mud-divider {
    border-color: var(--az-sidebar-border) !important;
    margin: 4px 0 !important;
}

/* ================================================================
   GLOBAL COMPONENT OVERRIDES
   Azure uses 2px border-radius almost everywhere (very slight)
   Only remove shadow; let MudBlazor palette handle colors
   ================================================================ */

/* Paper / Card — slight radius, no shadow, warm border */
.mud-paper {
    border-radius: 2px !important;
    box-shadow: none !important;
    border: 1px solid var(--mud-palette-lines-default) !important;
}
.mud-card {
    border-radius: 2px !important;
    box-shadow: none !important;
    border: 1px solid var(--mud-palette-lines-default) !important;
}
.mud-card-header {
    padding: 12px 16px 10px !important;
    border-bottom: 1px solid var(--mud-palette-lines-default) !important;
}
.mud-card-actions {
    padding: 8px 14px !important;
    border-top: 1px solid var(--mud-palette-lines-default) !important;
    gap: 8px;
}

/* Table */
.mud-table {
    border-radius: 2px !important;
    box-shadow: none !important;
    border: 1px solid var(--mud-palette-table-lines) !important;
}
.mud-table-head .mud-table-cell {
    font-size: 13px !important;
    font-weight: 600 !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
    padding: 9px 14px !important;
    border-bottom: 1px solid var(--mud-palette-lines-default) !important;
    color: var(--mud-palette-text-secondary) !important;
    background: var(--mud-palette-background-gray, var(--mud-palette-background)) !important;
}
.mud-table-body .mud-table-cell {
    font-size: 14px !important;
    padding: 8px 14px !important;
    border-bottom: 1px solid var(--mud-palette-table-lines) !important;
}
.mud-table-body .mud-table-row:last-child .mud-table-cell {
    border-bottom: none !important;
}
.mud-table-body .mud-table-row:hover .mud-table-cell {
    background: var(--mud-palette-table-hover) !important;
}
.mud-table-toolbar {
    padding: 8px 14px !important;
    border-bottom: 1px solid var(--mud-palette-lines-default) !important;
    background: var(--mud-palette-background-gray, var(--mud-palette-background)) !important;
}
.mud-table-pagination {
    border-top: 1px solid var(--mud-palette-lines-default) !important;
    font-size: 14px !important;
    background: var(--mud-palette-background-gray, var(--mud-palette-background)) !important;
}

/* ── Buttons — Azure uses Title Case, 2px radius, no shadow ── */
.mud-button-root {
    font-family: var(--az-font) !important;
    font-weight: 400 !important;
    font-size: 14px !important;
    letter-spacing: 0 !important;
    box-shadow: none !important;
    text-transform: none !important;
    border-radius: 2px !important;
}
.mud-button-filled { box-shadow: none !important; }
.mud-button-filled:hover {
    box-shadow: none !important;
    filter: brightness(0.9);
}
.mud-button-outlined {
    border-width: 1px !important;
}

/* ── Form Inputs ── */
.mud-input-outlined .mud-input-outlined-border {
    border-radius: 2px !important;
    border-color: var(--mud-palette-lines-inputs) !important;
}

/* ── Pivot Tabs (Azure style) ── */
.mud-tabs {
    border: 1px solid var(--mud-palette-lines-default) !important;
    box-shadow: none !important;
    border-radius: 2px !important;
}
.mud-tabs-tabbar {
    background: transparent !important;
    border-bottom: 1px solid var(--mud-palette-lines-default) !important;
    padding: 0 !important;
    min-height: 44px !important;
}
/* Azure Pivot: thin 2px bottom indicator — re-enable MudBlazor indicator */
.mud-tab-indicator {
    height: 2px !important;
    background-color: var(--az-blue) !important;
    border-radius: 0 !important;
    bottom: 0 !important;
}
.mud-tab {
    font-family: var(--az-font) !important;
    font-size: 14px !important;
    font-weight: 400 !important;
    letter-spacing: 0 !important;
    text-transform: none !important;   /* Azure uses sentence case */
    border-radius: 0 !important;
    min-height: 44px !important;
    padding: 0 16px !important;
    opacity: 1 !important;
    color: var(--mud-palette-text-secondary) !important;
    background: transparent !important;
    transition: background var(--t), color var(--t) !important;
}
.mud-tab:hover {
    background: var(--mud-palette-background-gray, rgba(0,0,0,0.03)) !important;
    color: var(--mud-palette-text-primary) !important;
}
.mud-tab.mud-tab-active {
    color: var(--mud-palette-text-primary) !important;
    font-weight: 600 !important;
}
.mud-tab-panel {
    padding: 0 !important;
}

/* ── Chips ── */
.mud-chip {
    font-size: 12px !important;
    font-weight: 400 !important;
    height: 24px !important;
    border-radius: 2px !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
}

/* ── Alert ── */
.mud-alert {
    font-size: 14px !important;
    border-radius: 2px !important;
}

/* ── Divider ── */
.mud-divider { border-color: var(--mud-palette-lines-default) !important; }

/* ── List ── */
.mud-list-item {
    border-bottom: 1px solid var(--mud-palette-lines-default) !important;
}
.mud-list-item:last-child { border-bottom: none !important; }

/* ── Simple Table ── */
.mud-simple-table td {
    font-size: 14px !important;
    padding: 8px 12px !important;
    border-bottom: 1px solid var(--mud-palette-lines-default) !important;
}
.mud-simple-table tr:last-child td { border-bottom: none !important; }

/* ── Expansion Panel ── */
.mud-expand-panel {
    border: 1px solid var(--mud-palette-lines-default) !important;
    box-shadow: none !important;
    border-radius: 2px !important;
    margin-bottom: -1px;
}

/* ── Dialog ── */
.mud-dialog {
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.18) !important;
    border-radius: 2px !important;
}
.mud-dialog-title {
    border-bottom: 1px solid var(--mud-palette-lines-default);
    padding: 14px 20px;
    font-size: 15px;
    font-weight: 600;
}
.mud-dialog-actions {
    border-top: 1px solid var(--mud-palette-lines-default);
    padding: 10px 16px;
}

/* ── Snackbar ── */
.mud-snackbar { box-shadow: 0 4px 16px rgba(0,0,0,0.16) !important; border-radius: 2px !important; }

/* ── Menu / Popover ── */
.mud-popover-content { border-radius: 2px !important; }
.mud-menu-popover .mud-list { border-radius: 2px !important; }

/* ── Typography ── */
.mud-typography-h1,
.mud-typography-h2,
.mud-typography-h3,
.mud-typography-h4,
.mud-typography-h5,
.mud-typography-h6 {
    font-family: var(--az-font) !important;
    font-weight: 600 !important;
    letter-spacing: -0.01em !important;
}
.mud-typography-h6 { font-size: 16px !important; }

/* ================================================================
   CUSTOM PAGE COMPONENTS
   Use --mud-palette-* so they shift with dark mode
   ================================================================ */

/* ── Page Header (Azure breadcrumb + title pattern) ── */
.page-header {
    margin-bottom: 16px;
    padding-bottom: 0;
    border-bottom: none;
}
.page-header-title {
    font-size: 22px;
    font-weight: 600;
    letter-spacing: -0.015em;
    line-height: 1.3;
    text-transform: none;
    color: var(--mud-palette-text-primary);
}
.page-header-sub {
    font-size: 14px;
    color: var(--mud-palette-text-secondary);
    margin-top: 2px;
}

/* ── Azure Command Bar ── */
/* Place below page-header for action buttons row */
.az-command-bar {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 8px 0 16px;
    flex-wrap: wrap;
}
.az-command-bar .mud-button-root {
    height: 30px !important;
    min-width: 0 !important;
    padding: 0 12px !important;
    font-size: 14px !important;
    border: 1px solid var(--mud-palette-lines-default) !important;
    background: var(--mud-palette-surface) !important;
    color: var(--mud-palette-text-primary) !important;
    border-radius: 2px !important;
}
.az-command-bar .mud-button-root:hover {
    background: var(--mud-palette-background-gray, rgba(0,0,0,0.04)) !important;
    filter: none !important;
}
.az-command-bar .mud-button-root.mud-button-filled-primary {
    background: var(--az-blue) !important;
    border-color: var(--az-blue) !important;
    color: #FFFFFF !important;
}
.az-command-bar .mud-button-root.mud-button-filled-primary:hover {
    background: var(--az-blue-hover) !important;
    border-color: var(--az-blue-hover) !important;
}

/* ── Stat Cards ── */
.stat-card {
    border: 1px solid var(--mud-palette-lines-default) !important;
    border-top: 2px solid var(--az-blue) !important;
    box-shadow: none !important;
    background: var(--mud-palette-surface) !important;
    border-radius: 2px !important;
    transition: border-top-color var(--t-med) !important;
}
.stat-card:hover {
    border-top-color: var(--az-blue-hover) !important;
}
.stat-card-content {
    padding: 14px 16px;
    flex: 1;
}
.stat-card-label {
    font-size: 13px;
    font-weight: 400;
    letter-spacing: 0;
    text-transform: none;
    color: var(--mud-palette-text-secondary);
    margin-bottom: 4px;
}
.stat-card-value {
    font-size: 28px;
    font-weight: 600;
    line-height: 1;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.02em;
}
.stat-card-icon {
    padding: 14px 16px 14px 0;
    display: flex;
    align-items: center;
    opacity: 0.15;
}
.stat-card-accent { width: 2px; align-self: stretch; flex-shrink: 0; }

/* ── Activity Feed ── */
.activity-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 9px 16px;
    border-bottom: 1px solid var(--mud-palette-lines-default);
    transition: background var(--t);
}
.activity-item:last-child { border-bottom: none; }
.activity-item:hover { background: var(--mud-palette-table-hover); }
.activity-item-name {
    font-size: 14px;
    font-weight: 400;
    color: var(--mud-palette-text-primary);
}
.activity-item-sub {
    font-size: 13px;
    color: var(--mud-palette-text-secondary);
    margin-top: 1px;
}

/* ── Quick Actions ── */
.quick-action-btn {
    border-radius: 2px !important;
    font-size: 14px !important;
    font-weight: 400 !important;
    height: 32px !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
    justify-content: flex-start !important;
}

/* ── Insights Panel ── */
.insights-panel {
    background: var(--mud-palette-background);
    border: 1px solid var(--mud-palette-lines-default);
    border-left: 2px solid var(--az-blue);
    padding: 0;
    border-radius: 2px;
    overflow: hidden;
}
.insights-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 7px 12px;
}
.insights-row + .insights-row {
    border-top: 1px solid var(--mud-palette-lines-default);
}
.insights-label {
    font-size: 14px;
    color: var(--mud-palette-text-secondary);
}
.insights-value {
    font-size: 15px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: var(--mud-palette-text-primary);
}

/* ── Section Label (Azure's group header style) ── */
.az-section-label {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--mud-palette-text-secondary);
    padding: 0 0 8px;
    opacity: 0.7;
}

/* ================================================================
   LOGIN PAGE
   Microsoft Sign-in style: white card, clean, centered
   ================================================================ */
.login-page-wrapper {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #F2F2F2;
    padding: 20px;
}
.login-card {
    width: 100%;
    max-width: 440px;
    background: #FFFFFF;
    border: 1px solid #D2D0CE;
    border-radius: 2px;
    padding: 44px 44px 36px;
    animation: login-enter 0.2s ease both;
}
@keyframes login-enter {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}
.login-brand {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 28px;
}
.login-brand-icon {
    width: 30px;
    height: 30px;
    background: var(--az-blue);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--az-font);
    font-size: 15px;
    font-weight: 700;
    color: #fff;
    flex-shrink: 0;
    border-radius: 2px;
}
.login-brand-text { display: flex; flex-direction: column; }
.login-brand-name { font-size: 15px; font-weight: 600; color: #201F1E; }
.login-brand-sub {
    font-size: 11px;
    color: #605E5C;
    letter-spacing: 0;
}
.login-heading { font-size: 22px; font-weight: 600; color: #201F1E; margin-bottom: 4px; letter-spacing: -0.01em; }
.login-subheading { font-size: 14px; color: #605E5C; margin-bottom: 24px; }
.login-error {
    background: #FDE7E9;
    border-left: 3px solid #A4262C;
    padding: 9px 12px;
    font-size: 14px;
    color: #A4262C;
    margin-bottom: 16px;
    display: flex;
    align-items: center;
    gap: 8px;
    border-radius: 0 2px 2px 0;
}
/* Sign in button: Azure blue, matches style */
.login-card .mud-button-filled-primary {
    border-radius: 2px !important;
    box-shadow: none !important;
    font-weight: 600 !important;
    font-size: 15px !important;
    text-transform: none !important;
    background: var(--az-blue) !important;
}
.login-card .mud-button-filled-primary:hover {
    background: var(--az-blue-hover) !important;
}
/* Input borders */
.login-card .mud-input-outlined .mud-input-outlined-border {
    border-color: #8A8886 !important;
    border-radius: 2px !important;
}
.login-card .mud-input-control:hover .mud-input-outlined-border {
    border-color: #605E5C !important;
}

/* Floating label — resting and shrunk states */
.login-card .mud-input-label,
.login-card .mud-input-label.mud-input-label-inputcontrol,
.login-card label.mud-input-label {
    color: #605E5C !important;
    font-size: 14px !important;
    background: transparent !important;
}

/* Input container — force light background so dark-mode theme doesn't bleed */
.login-card .mud-input.mud-input-outlined,
.login-card .mud-input-control-input-container {
    background: transparent !important;
}

/* Typed text — use both color and -webkit-text-fill-color to beat dark mode & autofill overrides */
.login-card .mud-input.mud-input-outlined input,
.login-card .mud-input.mud-input-outlined textarea,
.login-card input.mud-input-root,
.login-card textarea.mud-input-root {
    color: #201F1E !important;
    -webkit-text-fill-color: #201F1E !important;
    font-size: 15px !important;
    background: transparent !important;
    caret-color: #201F1E !important;
}

/* Autofill overrides (Chrome/Edge apply a yellow/dark tint on autofill) */
.login-card input:-webkit-autofill,
.login-card input:-webkit-autofill:hover,
.login-card input:-webkit-autofill:focus {
    -webkit-text-fill-color: #201F1E !important;
    -webkit-box-shadow: 0 0 0 1000px #fff inset !important;
    transition: background-color 5000s ease-in-out 0s;
}

/* Placeholder text */
.login-card .mud-input.mud-input-outlined input::placeholder,
.login-card .mud-input.mud-input-outlined textarea::placeholder {
    color: #A19F9D !important;
    opacity: 1 !important;
}

/* Adornment icons */
.login-card .mud-input-adornment .mud-icon-root {
    color: #8A8886 !important;
    font-size: 18px !important;
}

/* "Remember me" checkbox — label text and icon */
.login-card .mud-checkbox .mud-button-label,
.login-card .mud-input-control-label,
.login-card .mud-checkbox span.mud-typography {
    color: #201F1E !important;
    font-size: 14px !important;
}
.login-card .mud-checkbox .mud-icon-root {
    color: #605E5C !important;
}
.login-card .mud-checkbox.mud-checked .mud-icon-root {
    color: var(--az-blue) !important;
}

/* Helper / validation message text */
.login-card .mud-input-helper-text,
.login-card .mud-input-error .mud-input-helper-text {
    color: #605E5C !important;
}
.login-card .mud-input-error .mud-input-helper-text {
    color: #A4262C !important;
}

/* ================================================================
   BOTTOM NAVIGATION (mobile only — Azure icon rail)
   ================================================================ */
.app-bottom-nav {
    display: none;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: var(--app-bottom-nav-height);
    background: #201F1E;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    z-index: 1200;
    padding-bottom: env(safe-area-inset-bottom);
}
.app-bottom-nav-inner {
    display: flex;
    align-items: center;
    justify-content: space-around;
    height: 100%;
}
.app-bottom-nav-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding: 4px 8px;
    text-decoration: none;
    color: rgba(200, 198, 196, 0.7);
    cursor: pointer;
    background: none;
    border: none;
    border-top: 2px solid transparent;
    flex: 1;
    font-family: var(--az-font);
    transition: color var(--t), border-top-color var(--t);
}
.app-bottom-nav-item:hover,
.app-bottom-nav-item.active {
    color: #FFFFFF;
    border-top-color: var(--az-blue);
}
.app-bottom-nav-item .mud-icon-root { font-size: 20px !important; }
.app-bottom-nav-item span.nav-label {
    font-size: 10px;
    font-weight: 400;
    letter-spacing: 0;
    text-transform: none;
}

@media (max-width: 959px) {
    .app-bottom-nav {
        display: flex;
        flex-direction: column;
        justify-content: center;
    }
    .mud-main-content > .mud-container {
        padding-bottom: calc(var(--app-bottom-nav-height) + 12px) !important;
    }
}

/* ── Page transitions ── */
.mud-main-content .mud-container {
    animation: page-in 0.15s ease both;
}
@keyframes page-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* ── Validation ── */
.valid.modified:not([type=checkbox]) { outline: 2px solid #107C10; outline-offset: 0; }
.invalid { outline: 2px solid #A4262C; outline-offset: 0; }
.validation-message { color: #A4262C; font-size: 12px; margin-top: 2px; }

/* ── Blazor Error UI ── */
#blazor-error-ui {
    background: #FDE7E9;
    border-top: 2px solid #A4262C;
    color: #A4262C;
    bottom: 0;
    display: none;
    left: 0;
    padding: 10px 20px;
    position: fixed;
    width: 100%;
    z-index: 9999;
    font-family: var(--az-font);
    font-size: 14px;
}
#blazor-error-ui .dismiss {
    cursor: pointer;
    position: absolute;
    right: 16px;
    top: 10px;
}