/* Copyright (c) 2025-2026 Zunicor LLC. All rights reserved. */

/* Hexagon Font Stack - Applied globally */
html, body {
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
}

/* Override MudBlazor's default Roboto font */
.mud-typography, .mud-button, .mud-text-field, .mud-select, 
.mud-table, .mud-dialog, .mud-drawer, .mud-appbar,
.mud-form, .mud-input, .mud-input-control, .mud-input-label,
.mud-chip, .mud-link, .mud-nav-link, .mud-nav-menu,
.mud-expansion-panel, .mud-expansion-panels,
.mud-alert, .mud-snackbar, .mud-tooltip {
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji" !important;
}

/* Unearthed Logo Color Palette */
:root {
    --unearthed-red: #E53935;        /* Primary red from logo */
    --unearthed-green: #4CAF50;      /* Primary green from logo */
    --unearthed-black: #000000;      /* Black background */
    --unearthed-dark-gray: #1a1a1a;  /* Dark gray for surfaces */
    --unearthed-dark-surface: #2a2a2a; /* Dark surface color */
    --unearthed-divider: rgba(255, 255, 255, 0.1); /* Subtle divider */
}

/* Default light theme backgrounds for MudBlazor layout */
body:not(.dark-mode) .mud-layout,
body:not(.dark-mode) .mud-layout-content {
    background-color: #ffffff !important;
}

/* ============================================
   Sticky Footer Solution
   Formula: viewport = header + content + footer
   Content expands to fill: 100vh - header - footer
   ============================================ */

/* Make MudLayout a flex container that fills the page-wrapper */
.page-wrapper .mud-layout {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0; /* Allow shrinking */
}

/* Make MudMainContent grow to fill available space */
.page-wrapper .mud-main-content {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    background: var(--background, #f7f5f2);
}

/* Page containers should grow to fill available space */
.employee-page-container,
.dashboard-page-container {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
}

/* Ensure footer stays at bottom with margin-top: auto as fallback */
.minimal-footer,
.site-footer {
    flex-shrink: 0;
    margin-top: auto;
}

/* Glass Morphism Appbar - warm neutral theme (sitewide, matches homepage) */
.mud-appbar.unearthed-appbar {
    background-color: #f7f5f2;
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
    box-shadow: none !important;
    z-index: 1100;
}

/* Glass effect only on dashboard layout (drawer is temporary/overlay, not clipped) */
.dashboard-layout .mud-appbar.unearthed-appbar {
    background-color: rgba(247, 245, 242, 0.80);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

/* Appbar content: icons and text use theme foreground sitewide */
.unearthed-appbar .mud-icon-button,
.unearthed-appbar .mud-typography,
.unearthed-appbar .mud-text {
    color: var(--mud-palette-text-primary, #1e293b) !important;
}

.unearthed-appbar .mud-icon-button:hover,
.appbar-menu-button:hover,
.appbar-action-button:hover {
    background-color: rgba(0, 0, 0, 0.04) !important;
}

.appbar-menu-button,
.appbar-action-button {
    color: var(--mud-palette-text-primary, #1e293b) !important;
}

/* Emblem drawer-toggle button */
.appbar-emblem-button {
    background: none;
    border: none;
    cursor: pointer;
    padding: 8px;
    margin-right: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    flex-shrink: 0;
    transition: background-color 0.2s;
}
.appbar-emblem-button:hover {
    background-color: rgba(0, 0, 0, 0.06);
}
.appbar-emblem {
    width: 28px;
    height: 28px;
}

/* Appbar logo link — constrain to appbar height so nothing clips */
.appbar-logo-link {
    text-decoration: none;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    height: 48px;        /* match MudAppBar Dense height */
    overflow: hidden;
}

/* Desktop wordmark logo */
.appbar-logo-img {
    height: 30px;        /* leaves 9px breathing room top/bottom in 48px bar */
    width: auto;
    display: block;
    flex-shrink: 0;
}

/* Mobile emblem icon */
.appbar-logo-icon {
    height: 28px;
    width: auto;
    display: block;
    flex-shrink: 0;
}

.appbar-logo-text {
    font-size: 18px;
    font-weight: 700;
    line-height: 1.1;
    color: var(--mud-palette-tertiary, #2a9d8f);
}

/* Appbar: tighten spacing on mobile */
@media (max-width: 599.95px) {
    .mud-appbar.unearthed-appbar .mud-toolbar-root {
        padding-left: 4px;
        padding-right: 4px;
        gap: 0;
    }

    .unearthed-appbar .mud-icon-button {
        padding: 6px;
    }

    .appbar-logo-text {
        font-size: 16px;
    }

    .appbar-logo-text--desktop {
        display: none;
    }

    .appbar-logo-img {
        height: 24px;
    }

    .appbar-logo-icon {
        height: 24px;
        width: auto;
    }
}

/* User profile menu dropdown - match language selector z-index & styling */
.user-menu-popover {
    z-index: 9999 !important;
}

/* Glass Morphism Drawer - warm neutral theme (sitewide, matches homepage) */
.mud-drawer.unearthed-drawer {
    background-color: rgba(247, 245, 242, 0.95) !important;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-right: 1px solid rgba(0, 0, 0, 0.06) !important;
    box-shadow: 2px 0 12px rgba(0, 0, 0, 0.04) !important;
}

.mud-drawer.unearthed-drawer .mud-drawer-content {
    background-color: transparent !important;
}

/* Ensure drawer overlay works correctly */
.mud-overlay-drawer {
    backdrop-filter: blur(2px);
}

/* ============================================
   BLAZOR RECONNECTION MODAL
   ============================================ */

/* Modal overlay — hidden by default, full-screen themed background */
#components-reconnect-modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background:
        radial-gradient(800px 500px at 25% 30%, rgba(42,157,143,.07), transparent 60%),
        radial-gradient(800px 500px at 75% 60%, rgba(30,41,59,.04), transparent 60%),
        var(--background, #f7f5f2);
    z-index: 10000;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    box-sizing: border-box;
}

body.dark-mode #components-reconnect-modal {
    background:
        radial-gradient(800px 500px at 25% 30%, rgba(42,157,143,.10), transparent 60%),
        radial-gradient(800px 500px at 75% 60%, rgba(232,228,223,.03), transparent 60%),
        #141a24;
}

/* Show modal when Blazor adds reconnect classes */
#components-reconnect-modal.components-reconnect-show,
#components-reconnect-modal.components-reconnect-failed,
#components-reconnect-modal.components-reconnect-rejected {
    display: flex;
}

/* Force hide when reconnected */
#components-reconnect-modal.components-reconnect-hide {
    display: none !important;
}

/* Child divs hidden by default */
#components-reconnect-modal .show,
#components-reconnect-modal .failed,
#components-reconnect-modal .rejected {
    display: none;
}

/*
   !important is REQUIRED here to override the inline style="display:none"
   on the child divs. Without it, the reconnect UI will never appear.
*/
#components-reconnect-modal.components-reconnect-show > .show {
    display: flex !important;
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    align-items: center;
    justify-content: center;
    overflow-y: auto;
}

#components-reconnect-modal.components-reconnect-failed > .failed,
#components-reconnect-modal.components-reconnect-rejected > .rejected {
    display: flex !important;
    align-items: center;
    justify-content: center;
    width: 100%;
}

/* Canvas background for reconnect animation */
.reconnect-canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    opacity: .5;
    z-index: 0;
}

/* Reconnecting screen layout — transparent, floats over canvas */
.reconnect-screen {
    position: relative;
    z-index: 1;
    background: transparent;
    padding: 2rem 1.5rem;
    color: var(--foreground, #1e293b);
    width: 100%;
    max-width: 560px;
}

@media (min-width: 640px) {
    .reconnect-screen {
        padding: 2.5rem 2.5rem;
    }
}

.reconnect-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1.5rem;
}

.reconnect-brand {
    display: flex;
    align-items: center;
    gap: 0.625rem;
}

.reconnect-brand-icon {
    width: 2rem;
    height: 2rem;
    border-radius: 6px;
    background: rgba(42, 157, 143, 0.15);
    background-image: radial-gradient(circle at 50% 50%, var(--accent, #2a9d8f) 0%, transparent 70%);
}

.reconnect-brand-title {
    margin: 0;
    font-size: 0.875rem;
    font-weight: 600;
    letter-spacing: -0.02em;
    color: var(--foreground, #1e293b);
}

.reconnect-brand-subtitle {
    margin: 0;
    font-size: 0.75rem;
    color: var(--muted-foreground, #64748b);
}

.reconnect-status-badge {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    font-size: 0.75rem;
    font-weight: 500;
    color: #4CAF50;
}

.reconnect-status-badge.reconnect-offline {
    color: #E53935;
}

.reconnect-status-icon::before {
    content: "\25CF";
    font-size: 0.5rem;
}

.reconnect-radar {
    position: relative;
    height: 10rem;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1.5rem;
}

.reconnect-radar-ring {
    position: absolute;
    border-radius: 50%;
    border: 1px solid rgba(42, 157, 143, 0.1);
}

.reconnect-radar-ring-1 { width: 8rem; height: 8rem; margin: -4rem 0 0 -4rem; border-color: rgba(42, 157, 143, 0.1); }
.reconnect-radar-ring-2 { width: 6rem; height: 6rem; margin: -3rem 0 0 -3rem; border-color: rgba(42, 157, 143, 0.15); }
.reconnect-radar-ring-3 { width: 4rem; height: 4rem; margin: -2rem 0 0 -2rem; border-color: rgba(42, 157, 143, 0.2); }

.reconnect-radar-pulse {
    position: absolute;
    width: 5rem;
    height: 5rem;
    margin: -2.5rem 0 0 -2.5rem;
    border-radius: 50%;
    border: 2px solid rgba(42, 157, 143, 0.3);
    animation: reconnect-pulse-ring 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

.reconnect-radar-pulse-2 { animation-delay: 0.7s; border-color: rgba(42, 157, 143, 0.2); }
.reconnect-radar-pulse-3 { animation-delay: 1.4s; border-color: rgba(42, 157, 143, 0.1); }

@keyframes reconnect-pulse-ring {
    0% { transform: scale(0.8); opacity: 1; }
    100% { transform: scale(2.2); opacity: 0; }
}

.reconnect-radar-sweep {
    position: absolute;
    width: 8rem;
    height: 8rem;
    margin: -4rem 0 0 -4rem;
    animation: reconnect-radar-sweep 3s linear infinite;
}

.reconnect-radar-sweep-inner {
    position: absolute;
    left: 0;
    top: 0;
    width: 4rem;
    height: 4rem;
    border-top-left-radius: 9999px;
    background: conic-gradient(from 0deg, transparent, rgba(42, 157, 143, 0.15));
}

@keyframes reconnect-radar-sweep {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.reconnect-radar-center {
    position: relative;
    z-index: 2;
    width: 2rem;
    height: 2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(42, 157, 143, 0.2);
}

.reconnect-radar-dot {
    width: 0.75rem;
    height: 0.75rem;
    border-radius: 50%;
    background: var(--accent, #2a9d8f);
    animation: reconnect-status-dot 1.5s ease-in-out infinite;
}

@keyframes reconnect-status-dot {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.3; }
}

.reconnect-phase {
    text-align: center;
    margin-bottom: 1rem;
}

.reconnect-phase-label {
    margin: 0 0 0.25rem 0;
    font-size: 1.125rem;
    font-weight: 600;
    letter-spacing: -0.02em;
    color: var(--foreground, #1e293b);
}

.reconnect-phase-desc {
    margin: 0;
    font-size: 0.875rem;
    color: var(--muted-foreground, #64748b);
}

.reconnect-progress-wrap {
    margin-bottom: 1rem;
}

.reconnect-progress-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.5rem;
}

.reconnect-progress-title {
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--muted-foreground, #64748b);
}

.reconnect-progress-pct {
    font-size: 0.75rem;
    font-family: ui-monospace, monospace;
    color: var(--accent, #2a9d8f);
}

.reconnect-progress-bar {
    height: 6px;
    width: 100%;
    overflow: hidden;
    border-radius: 9999px;
    background: rgba(0, 0, 0, 0.08);
}

.reconnect-progress-fill {
    height: 100%;
    border-radius: 9999px;
    background: var(--accent, #2a9d8f);
    transition: width 1s ease-out;
}

.reconnect-cards {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem;
    margin-bottom: 1.25rem;
}

@media (min-width: 480px) {
    .reconnect-cards {
        grid-template-columns: repeat(4, 1fr);
    }
}

.reconnect-card {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    border-radius: 8px;
    border: 1px solid rgba(0, 0, 0, 0.08);
    background: rgba(255, 255, 255, 0.5);
    backdrop-filter: blur(8px);
}

.reconnect-card-icon {
    width: 2rem;
    height: 2rem;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    background: rgba(42, 157, 143, 0.1);
    font-size: 0.75rem;
    color: var(--accent, #2a9d8f);
}

.reconnect-card-content {
    min-width: 0;
}

.reconnect-card-label {
    margin: 0;
    font-size: 0.75rem;
    color: var(--muted-foreground, #64748b);
}

.reconnect-card-value {
    margin: 0;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--foreground, #1e293b);
}

.reconnect-timeline {
    margin-bottom: 1rem;
}

.reconnect-timeline-title {
    margin: 0 0 0.5rem 0;
    font-size: 0.75rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--muted-foreground, #64748b);
}

.reconnect-timeline-steps {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
}

.reconnect-timeline-step {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 0.5rem 0.75rem;
    border-radius: 8px;
    transition: all 0.3s ease;
}

.reconnect-timeline-step.reconnect-step-active {
    border: 1px solid rgba(42, 157, 143, 0.3);
    background: rgba(42, 157, 143, 0.05);
}

.reconnect-timeline-step.reconnect-step-complete {
    opacity: 0.6;
}

.reconnect-timeline-step.reconnect-step-pending {
    opacity: 0.35;
}

.reconnect-timeline-step-icon {
    width: 1.75rem;
    height: 1.75rem;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.06);
    font-size: 0;
    color: transparent;
}

.reconnect-timeline-step-icon.reconnect-step-done {
    background: rgba(76, 175, 80, 0.15);
    color: #4CAF50;
    font-size: 0.75rem;
}

.reconnect-timeline-step-icon.reconnect-step-done .reconnect-step-check {
    display: inline;
}

.reconnect-timeline-step-icon.reconnect-step-current {
    background: rgba(42, 157, 143, 0.2);
    animation: reconnect-status-dot 1.5s ease-in-out infinite;
}

.reconnect-timeline-step-content {
    min-width: 0;
}

.reconnect-timeline-step-label {
    margin: 0;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--foreground, #1e293b);
}

.reconnect-timeline-step-desc {
    margin: 0.25rem 0 0 0;
    font-size: 0.75rem;
    color: var(--muted-foreground, #64748b);
    display: none;
}

.reconnect-timeline-step.reconnect-step-active .reconnect-timeline-step-desc {
    display: block;
}

.reconnect-footer {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid rgba(0, 0, 0, 0.08);
}

.reconnect-footer-hint {
    margin: 0;
    font-size: 0.75rem;
    text-align: center;
    color: rgba(107, 114, 128, 0.7);
}

/* Failed / Rejected fallback */
.reconnect-fallback {
    background: rgba(255, 255, 255, 0.6);
    backdrop-filter: blur(12px);
    padding: 2rem;
    border-radius: 12px;
    border: 1px solid rgba(0, 0, 0, 0.08);
    text-align: center;
    max-width: 400px;
}

.reconnect-fallback-message {
    margin: 0 0 1rem 0;
    font-size: 1rem;
    color: var(--foreground, #1e293b);
}

.reconnect-fallback-btn {
    padding: 0.5rem 1.25rem;
    font-size: 0.875rem;
    font-weight: 500;
    color: white;
    background: var(--accent, #2a9d8f);
    border: none;
    border-radius: 8px;
    cursor: pointer;
}

.reconnect-fallback-btn:hover {
    background: #248f82;
}

#blazor-error-ui {
    background: #dc3545;
    color: white;
    padding: 1rem;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 10001;
    display: none;
}

#blazor-error-ui .reload {
    color: white;
    text-decoration: underline;
    margin-left: 1rem;
}

#blazor-error-ui .dismiss {
    cursor: pointer;
    margin-left: 1rem;
}

/* Modern rounded card styling */
.rounded-card {
    border-radius: 16px !important;
    overflow: hidden;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.rounded-button {
    border-radius: 8px !important;
}

/* Hover effect for cards */
.hover-card {
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.hover-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12) !important;
}

/* Smooth transitions for interactive elements */
.mud-paper {
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

/* Cleaner spacing and typography */
.mud-container {
    padding-left: 24px;
    padding-right: 24px;
}

@media (max-width: 600px) {
    .mud-container {
        padding-left: 16px;
        padding-right: 16px;
    }
}

/* iPhone-Style Menu */
.iphone-menu {
    width: 100%;
}

.iphone-menu-item {
    width: 100%;
    padding: 12px 16px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
    display: flex;
    align-items: center;
    min-height: 44px;
    color: rgba(0, 0, 0, 0.87);
    text-decoration: none;
    transition: background-color 0.2s ease;
    font-size: 16px;
    cursor: pointer;
    box-sizing: border-box;
}

.iphone-menu-item:hover {
    background-color: rgba(0, 0, 0, 0.05);
}

.iphone-menu-item.active {
    background-color: rgba(229, 57, 53, 0.10);
    border-left: 3px solid var(--unearthed-red);
    padding-left: 13px; /* Adjust for border */
}

.iphone-menu-item-icon {
    margin-right: 16px;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.iphone-menu-item-text {
    flex: 1;
}

.iphone-menu-section {
    margin-top: 8px;
}

.iphone-menu-section-header {
    padding: 12px 16px 8px 16px;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: rgba(0, 0, 0, 0.60);
}

/* Logo in drawer header — override MudBlazor defaults */
.unearthed-drawer .mud-drawer-header {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    min-height: auto !important;
    height: auto !important;
    padding: 24px 24px !important;
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

.drawer-logo-container {
    text-align: center;
}

.drawer-logo-img {
    width: 60px;
    height: auto;
    display: block;
}

/* Light theme overrides for MudBlazor in drawer */
.mud-drawer .mud-icon-root {
    color: rgba(0, 0, 0, 0.70) !important;
}

.mud-appbar {
    z-index: 1400 !important; /* Ensure AppBar stays above drawer */
}

/* Responsive drawer behavior */
.unearthed-drawer {
    width: 280px !important;
}

/* When drawer is closed (Temporary), ensure it takes no space - removes the thin strip */
.mud-drawer.unearthed-drawer.mud-drawer--closed {
    width: 0 !important;
    min-width: 0 !important;
    overflow: hidden;
}

/* Home page styling */
.home-page {
    width: 100%;
    max-width: 100%;
}

.home-header {
    padding: 24px 16px 12px 16px;
    background: white;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0;
}

.home-logo-container {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
}

.home-logo {
    max-width: 540px;
    max-height: 338px;
    width: 90%;
    height: auto;
    display: block;
    object-fit: contain;
}

.home-header-text {
    text-align: center;
}

.home-menu {
    width: 100%;
    background: white;
    margin-top: 0;
    margin-bottom: 80px;
    padding-top: 0;
}

.home-menu-item {
    width: 100%;
    padding: 20px 24px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 20px;
    cursor: pointer;
    transition: all 0.2s ease;
    background: rgba(255, 255, 255, 0.75);
    backdrop-filter: blur(10px);
    border-radius: 0;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
}

.home-menu-item:last-child {
    border-bottom: none;
}

.home-menu-item:hover {
    background-color: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(12px);
}

.home-menu-item:active {
    background-color: rgba(255, 255, 255, 0.9);
    transform: scale(0.98);
}

.home-menu-item:focus {
    outline: 2px solid rgba(229, 57, 53, 0.5);
    outline-offset: -2px;
}

.home-menu-item-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.home-menu-item-content {
    flex: 1;
    text-align: left;
}

/* Admin Dashboard Desktop Grid Layout - Aggressive Overrides */
/* DESKTOP VERSION - MUST BE DIFFERENT FROM MOBILE */
@media (min-width: 769px) {
    /* Force grid container to use CSS Grid - Max 4 columns */
    div.home-page div.home-menu.admin-dashboard-menu {
        display: grid !important;
        grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)) !important;
        justify-content: center !important;
        align-content: start !important;
        gap: 2rem !important;
        margin-left: auto !important;
        margin-right: auto !important;
        padding: 3rem 4rem !important;
        max-width: 1200px !important; /* Limit to ~4 tiles max per row */
        width: 100% !important;
        margin-top: 0 !important;
        padding-top: 3rem !important;
        background: transparent !important; /* Transparent to show dynamic background */
        box-sizing: border-box !important;
    }

    /* Force tiles to be square and stacked */
    div.home-page div.admin-dashboard-menu div.home-menu-item {
        width: 100% !important;
        min-width: 180px !important;
        max-width: 250px !important;
        aspect-ratio: 1 / 1 !important;
        padding: 2rem !important;
        border-bottom: none !important;
        border-radius: 16px !important;
        flex-direction: column !important;
        justify-content: center !important;
        align-items: center !important;
        gap: 1rem !important;
        box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08) !important;
        display: flex !important;
        background: rgba(255, 255, 255, 0.8) !important; /* Semi-transparent white */
        backdrop-filter: blur(10px) !important; /* Blur effect for frosted glass look */
        transition: all 0.2s ease !important;
    }

    div.home-page div.admin-dashboard-menu div.home-menu-item:last-child {
        border-bottom: none !important;
    }

    div.home-page div.admin-dashboard-menu div.home-menu-item:hover {
        background: rgba(255, 255, 255, 0.9) !important; /* Slightly more opaque on hover */
        backdrop-filter: blur(12px) !important;
        box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12) !important;
        transform: translateY(-2px) !important;
    }

    div.home-page div.admin-dashboard-menu div.home-menu-item:active {
        transform: scale(0.98) !important;
        background: rgba(255, 255, 255, 0.95) !important;
    }

    /* Icon styling */
    div.home-page div.admin-dashboard-menu div.home-menu-item div.home-menu-item-icon {
        flex-shrink: 0 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        margin-right: 0 !important;
    }

    div.home-page div.admin-dashboard-menu div.home-menu-item div.home-menu-item-icon svg {
        font-size: 2.5rem !important;
    }

    /* Text content styling */
    div.home-page div.admin-dashboard-menu div.home-menu-item div.home-menu-item-content {
        flex: 0 !important;
        text-align: center !important;
        width: 100% !important;
    }

    div.home-page div.admin-dashboard-menu div.home-menu-item div.home-menu-item-content * {
        font-size: 0.9rem !important;
        line-height: 1.3 !important;
        word-wrap: break-word !important;
        overflow-wrap: break-word !important;
        text-align: center !important;
        font-weight: 600 !important;
    }
}

/* Responsive adjustments */
@media (max-width: 600px) {
    .home-header {
        padding: 20px 16px 16px 16px;
    }
    
    .home-logo {
        max-width: 432px;
        max-height: 270px;
        width: 85%;
    }
    
    .home-menu-item {
        padding: 20px 16px;
    }
}

/* Ensure main content area has white background (light mode only) */
body:not(.dark-mode) .mud-main-content {
    background-color: #ffffff !important;
}

/* Pages that draw their own full-page background (canvas/gradient) need transparent main content */
.page-wrapper.page-with-own-bg .mud-main-content {
    background-color: transparent !important;
}

/* Page container for pages that need padding */
.page-container {
    padding: 16px;
}

/* Employee pages: bottom padding only on mobile for bottom nav */
.employee-page-container {
    padding-bottom: 80px;
}

@media (min-width: 960px) {
    .employee-page-container {
        padding-bottom: 16px;
    }
}

/* Asset Tracking Map Container */
.asset-tracking-map-container {
    width: 100%;
    border-radius: 12px;
    border: 1px solid rgba(0, 0, 0, 0.12);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    background: white;
    overflow: hidden;
    margin-bottom: 24px;
    position: relative; /* For fullscreen button positioning */
    transition: all 0.3s ease;
}

/* Fullscreen mode for map container */
.asset-tracking-map-container.fullscreen {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    z-index: 9999 !important;
    border-radius: 0 !important;
    margin: 0 !important;
    border: none !important;
}

.asset-tracking-map {
    width: 100%;
    min-height: 500px;
    height: 70vh;
    border-radius: 12px;
}

/* Fullscreen mode for map element */
.asset-tracking-map-container.fullscreen .asset-tracking-map {
    width: 100vw !important;
    height: 100vh !important;
    min-height: 100vh !important;
    border-radius: 0 !important;
}

/* Fullscreen button styling */
.map-fullscreen-button {
    position: absolute !important;
    top: 10px;
    right: 10px;
    z-index: 1000;
    background-color: white !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3) !important;
}

.map-fullscreen-button:hover {
    background-color: #f5f5f5 !important;
}

@media (max-width: 768px) {
    .asset-tracking-map {
        min-height: 400px;
        height: 60vh;
    }
    
    /* Add Item button - full width on mobile */
    .add-item-button {
        width: 100% !important;
    }
}

/* Desktop Sidebar Layout for Map Pages */
/* Mobile: Stacked layout (unchanged) */
.map-page-layout {
    display: flex;
    flex-direction: column;
    gap: 24px;
    width: 100%;
}

.map-page-sidebar {
    width: 100%;
    order: 2; /* Table appears after map on mobile */
}

.map-page-content {
    width: 100%;
    order: 1; /* Map appears first on mobile */
}

/* Desktop: Sidebar on left, map on right */
@media (min-width: 1024px) {
    .map-page-layout {
        flex-direction: row;
        align-items: flex-start;
        gap: 16px;
    }

    .map-page-sidebar {
        width: 25%;
        min-width: 300px;
        max-width: 400px;
        order: 1;
        height: 70vh;
        overflow-y: auto;
        overflow-x: hidden;
        padding-right: 8px;
    }
    
    .map-page-sidebar .mud-paper {
        height: 100%;
        display: flex;
        flex-direction: column;
        overflow: hidden;
    }
    
    .map-page-sidebar .mud-table-container {
        flex: 1;
        overflow: auto;
        min-height: 0;
    }
    
    .map-page-sidebar .mud-table {
        height: 100%;
    }

    .map-page-content {
        width: 75%;
        flex: 1;
        order: 2;
    }

    /* Adjust map container margin on desktop when in sidebar layout */
    .map-page-content .asset-tracking-map-container {
        margin-bottom: 0;
    }
}

/* Ensure mobile layout remains unchanged */
@media (max-width: 1023px) {
    .map-page-layout {
        flex-direction: column;
    }

    .map-page-sidebar {
        width: 100%;
        order: 2;
        height: auto;
        overflow: visible;
        padding-right: 0;
    }

    .map-page-content {
        width: 100%;
        order: 1;
    }

    .map-page-content .asset-tracking-map-container {
        margin-bottom: 24px;
    }
}

/* Login / Register page styling — DigitalOcean-style split layout */
/* Left 1/3: form | Right 2/3: hero/background */
.auth-page {
    flex: 1 1 auto;
    display: grid;
    grid-template-columns: 1fr 2fr;
    position: relative;
    overflow: hidden;
    background: var(--background, #f7f5f2);
}

.auth-bg-canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 0;
    opacity: 0.6;
}

@media (prefers-reduced-motion: reduce) {
    .auth-bg-canvas {
        display: none;
    }
}

.auth-page-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    background:
        radial-gradient(800px 600px at 20% 30%, hsla(168, 55%, 42%, 0.05), transparent 60%),
        radial-gradient(800px 600px at 80% 20%, hsla(220, 20%, 14%, 0.03), transparent 60%);
    pointer-events: none;
}

/* Left panel: form content */
.auth-page-form-panel {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    padding: 48px 40px 48px 48px;
    overflow-y: auto;
    min-width: 0;
}

/* Right panel: room for heading / background image */
.auth-page-hero-panel {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 48px 80px 48px 64px;
    /* Optional: uncomment to use a background image */
    /* background-image: url('/path/to/hero-image.jpg'); */
    /* background-size: cover; */
    /* background-position: center; */
}

.auth-page-hero {
    max-width: 480px;
}

.auth-hero-title {
    font-family: 'DM Sans', system-ui, sans-serif;
    font-size: 2rem;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -0.025em;
    color: var(--foreground, #1e293b);
    margin: 0 0 16px 0;
}

.auth-hero-subtitle {
    font-size: 1rem;
    line-height: 1.6;
    color: var(--muted-foreground, #64748b);
    margin: 0;
}


.auth-page-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 48px;
}

.auth-signup-link {
    color: var(--accent, #2a9d8f) !important;
    font-weight: 600;
    text-decoration: none !important;
    font-size: 0.9375rem;
}

.auth-signup-link:hover {
    opacity: 0.85;
}

.auth-container {
    position: relative;
    width: 100%;
    max-width: 380px;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 24px;
}

/* Wider variant for contact form */
.auth-container.auth-container--wide {
    max-width: none;
    width: 100%;
}

/* Contact page: wider form panel + FAQ section */
.auth-page--contact {
    grid-template-columns: 1.2fr 1fr;
}

.auth-page--contact .auth-page-form-panel {
    min-width: 0;
}

.auth-page--contact .auth-container--wide {
    max-width: none;
}

/* Register/Login page: content at top, background fills to footer */
.auth-page--register {
}

.auth-page--register .auth-page-form-panel {
    justify-content: flex-start;
}

.auth-page--register .auth-page-hero-panel {
    align-items: flex-start;
}

.auth-brand {
    display: flex;
    align-items: center;
    gap: 10px;
}

.auth-brand-icon {
    display: flex;
    height: 40px;
    width: 40px;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    background: var(--primary, #1e293b);
}

.auth-brand-name {
    font-family: 'DM Sans', system-ui, sans-serif;
    font-size: 1.5rem;
    font-weight: 700;
    letter-spacing: -0.025em;
    color: var(--foreground, #1e293b);
}

.auth-card {
    width: 100%;
    border-radius: 16px;
    background: var(--card, #fdfcfb);
    border: 1px solid var(--border, #e0dcd6);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
    padding: 32px;
}

/* Wider padding for wider cards */
.auth-container--wide .auth-card {
    padding: 32px 48px;
}

.auth-card-header {
    margin-bottom: 12px;
}

.auth-card-title {
    font-family: 'DM Sans', system-ui, sans-serif;
    font-size: 1.375rem;
    font-weight: 700;
    color: var(--foreground, #1e293b);
    margin-bottom: 4px;
    letter-spacing: -0.015em;
}

.auth-card-subtitle {
    font-size: 0.875rem;
    color: var(--muted-foreground, #64748b);
    line-height: 1.5;
    margin: 0;
}

/* Override MudBlazor form field styling inside auth cards */
.auth-card .mud-input-control {
    margin-bottom: 4px;
}

.auth-card .mud-input-outlined .mud-input-outlined-border {
    border-color: var(--border, #e0dcd6) !important;
    border-radius: 8px !important;
}

.auth-card .mud-input-outlined:hover .mud-input-outlined-border {
    border-color: var(--accent, #2a9d8f) !important;
}

.auth-card .mud-input-outlined.mud-focused .mud-input-outlined-border {
    border-color: var(--accent, #2a9d8f) !important;
}

.auth-card .mud-input-label {
    color: var(--foreground, #1e293b) !important;
    font-weight: 500 !important;
    font-size: 0.875rem !important;
}

.auth-card .mud-input-slot input,
.auth-card .mud-input-root input,
.auth-card .mud-input input {
    color: var(--foreground, #1e293b) !important;
    -webkit-text-fill-color: var(--foreground, #1e293b) !important;
}

.auth-card .mud-input-slot input::placeholder {
    color: var(--muted-foreground, #64748b) !important;
    -webkit-text-fill-color: var(--muted-foreground, #64748b) !important;
    opacity: 0.6;
}

.auth-actions {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 8px;
}

.auth-footer-text {
    text-align: center;
    font-size: 0.8125rem;
    color: var(--muted-foreground, #64748b);
    margin-top: 8px;
}

.auth-footer-text a,
.auth-footer-text .mud-link {
    color: var(--accent, #2a9d8f) !important;
    font-weight: 600;
    text-decoration: none !important;
}

.auth-footer-text a:hover,
.auth-footer-text .mud-link:hover {
    opacity: 0.8;
}

.auth-trust-line {
    text-align: center;
    font-size: 0.75rem;
    color: var(--muted-foreground, #64748b);
    opacity: 0.5;
    line-height: 1.5;
    margin-top: 8px;
}

.auth-divider {
    border-color: var(--border, #e0dcd6) !important;
    margin: 10px 0 !important;
}

/* Auth pages: mobile — stack vertically */
@media (max-width: 768px) {
    .auth-page {
        grid-template-columns: 1fr;
        grid-template-rows: auto 1fr;
    }

    .auth-page--contact {
        grid-template-columns: 1fr;
    }

    .auth-page-form-panel {
        padding: 32px 24px 24px;
        min-height: auto;
    }

    .auth-page-hero {
        max-width: 100%;
        text-align: center;
    }

    .auth-hero-title {
        font-size: 1.5rem;
    }

    .auth-hero-subtitle {
        font-size: 0.9375rem;
    }

    .auth-page-hero-panel {
        padding: 24px 24px 48px;
        align-items: center;
    }

    .contact-faq-section {
        text-align: center;
        max-width: 100%;
    }

    .auth-page-header {
        width: 100%;
        max-width: 420px;
        margin-bottom: 32px;
    }

    .auth-container {
        width: 100%;
    }
}

/* Contact page FAQ section */
.contact-faq-section {
    width: 100%;
    max-width: 420px;
}

.contact-faq-title {
    font-family: 'DM Sans', system-ui, sans-serif;
    font-size: 1.5rem;
    font-weight: 700;
    letter-spacing: -0.025em;
    color: var(--foreground, #1e293b);
    margin: 0 0 8px 0;
}

.contact-faq-subtitle {
    font-size: 0.9375rem;
    line-height: 1.5;
    color: var(--muted-foreground, #64748b);
    margin: 0 0 24px 0;
}

.contact-faq-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.contact-faq-list li {
    margin-bottom: 12px;
}

.contact-faq-link {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--accent, #2a9d8f) !important;
    text-decoration: none !important;
    font-size: 0.9375rem;
    font-weight: 500;
    padding: 8px 0;
    border-radius: 8px;
    transition: opacity 0.2s ease, background-color 0.2s ease;
}

.contact-faq-link:hover {
    opacity: 0.9;
    background-color: rgba(42, 157, 143, 0.08);
}

.contact-faq-link .mud-icon-root {
    color: var(--accent, #2a9d8f) !important;
    flex-shrink: 0;
}

.contact-faq-view-all {
    margin-top: 24px;
    padding-top: 20px;
    border-top: 1px solid var(--border, #e0dcd6);
}

.contact-faq-view-all .mud-button {
    text-transform: none !important;
    font-weight: 600 !important;
}

@media (max-width: 600px) {
    .auth-page-form-panel {
        padding: 24px 16px 16px;
    }

    .auth-page-hero-panel {
        padding: 16px 16px 32px;
    }

    .auth-page-header {
        margin-bottom: 24px;
    }

    .auth-card {
        padding: 24px;
    }
}

/* Barcode Scanner Styles */
.scanner-overlay {
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    height: 3px;
    background: #E53935;
    box-shadow: 0 0 15px rgba(229, 57, 53, 0.9), 0 0 30px rgba(229, 57, 53, 0.6);
    z-index: 10;
    transform: translateY(-50%);
    pointer-events: none;
}

/* Scanner overlay pulse animation */
.scanner-overlay::before {
    content: '';
    position: absolute;
    top: -2px;
    left: 0;
    right: 0;
    height: 7px;
    background: linear-gradient(to bottom, 
        rgba(229, 57, 53, 0.8), 
        rgba(229, 57, 53, 0.4), 
        rgba(229, 57, 53, 0));
    animation: scanner-pulse 2s ease-in-out infinite;
}

@keyframes scanner-pulse {
    0%, 100% {
        opacity: 0.6;
    }
    50% {
        opacity: 1;
    }
}

/* Flash effect animation for successful scan */
@keyframes flash {
    0%, 100% { 
        opacity: 1; 
    }
    50% { 
        opacity: 0.3; 
        background: rgba(76, 175, 80, 0.2);
    }
}

.scan-flash {
    animation: flash 0.3s ease-in-out;
}

/* Scan result modal content styles */
.scan-result-content {
    min-height: 200px;
}

/* Minimal Footer Styles (for authenticated users) */
.minimal-footer {
    background-color: var(--mud-palette-background, #f7f5f2);
    border-top: 1px solid var(--mud-palette-divider, #e0dcd6);
    padding: 16px 0;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.minimal-footer-content {
    width: 100%;
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 24px;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
}

.minimal-footer p {
    margin: 0;
    font-size: 0.875rem;
    color: var(--mud-palette-text-secondary, #64748b);
    text-align: center;
}

/* ============================================
   Marketing Footer Styles (for anonymous users and Home page)
   ============================================ */
.site-footer {
    background: #1a1a1a;
    color: rgba(255, 255, 255, 0.87);
    padding: 60px 20px 30px;
    margin-top: auto;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.footer-content {
    max-width: 1400px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr;
    gap: 50px;
    align-items: start;
}

.footer-section {
    display: flex;
    flex-direction: column;
}

.footer-links {
    min-width: 0;
}

.footer-company {
    min-width: 0;
    padding-top: 0;
    margin-top: 0;
}

.footer-description {
    font-size: 0.875rem;
    line-height: 1.6;
    margin: 0 0 16px 0;
    padding: 0;
    color: rgba(255, 255, 255, 0.75);
}

.footer-copyright {
    margin: 40px auto 0;
    padding: 20px 0;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    font-size: 0.85rem;
    opacity: 0.7;
    text-align: center;
    max-width: 1400px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.footer-copyright p {
    margin: 0;
}

.footer-copyright a {
    text-decoration: underline;
    opacity: 0.9;
}

.footer-copyright a:hover {
    opacity: 1;
}

.footer-heading {
    font-size: 0.9rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 20px;
    color: rgba(255, 255, 255, 0.95);
}

.footer-newsletter {
    min-width: 0;
}

/* Footer form inputs - dark theme styling */
.footer-input .mud-input-control {
    background-color: transparent !important;
}

.footer-input .mud-input-root {
    background-color: rgba(255, 255, 255, 0.05) !important;
}

.footer-input .mud-input-outlined-border {
    border-color: rgba(255, 255, 255, 0.2) !important;
}

.footer-input .mud-input-slot {
    background-color: transparent !important;
    padding: 12px 16px !important;
}

.footer-input .mud-input-outlined:hover .mud-input-outlined-border {
    border-color: rgba(255, 255, 255, 0.4) !important;
}

.footer-input .mud-input-outlined.mud-focused .mud-input-outlined-border {
    border-color: #DA161A !important;
}

.footer-input .mud-input-label {
    display: none !important;
}

.footer-input .mud-input-outlined-legend {
    display: none !important;
    width: 0 !important;
    padding: 0 !important;
}

.footer-input .mud-input-slot input,
.footer-input .mud-input > input {
    color: rgba(255, 255, 255, 0.9) !important;
    background-color: transparent !important;
}

.footer-input .mud-input-slot input::placeholder {
    color: rgba(255, 255, 255, 0.5) !important;
    opacity: 1;
}

.footer-link-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.footer-link-list li {
    margin-bottom: 12px;
}

.footer-link-list a {
    color: rgba(255, 255, 255, 0.8);
    text-decoration: none;
    font-size: 0.9rem;
    transition: color 0.2s ease;
    display: inline-block;
}

.footer-link-list a:hover {
    color: rgba(255, 255, 255, 1);
    text-decoration: underline;
}

/* Footer Responsive Styles */
@media (max-width: 1200px) {
    .footer-content {
        grid-template-columns: 2fr 1fr 1fr 1fr;
        gap: 40px;
    }
}

@media (max-width: 968px) {
    .footer-content {
        grid-template-columns: 1fr 1fr;
        gap: 40px;
    }

    .footer-company {
        grid-column: 1 / -1;
    }
}

@media (max-width: 768px) {
    .site-footer {
        padding: 40px 20px 20px;
    }

    .footer-content {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .footer-company,
    .footer-newsletter,
    .footer-links {
        grid-column: 1;
    }

    .footer-description {
        font-size: 0.85rem;
    }
}

@media (max-width: 640px) {
    .footer-copyright {
        flex-direction: column;
        gap: 12px;
    }
}

/* ============================================================
   DASHBOARD LAYOUT
   ============================================================ */

.dashboard-layout,
.dashboard-layout.mud-layout {
    display: flex;
    flex-direction: column;
    height: 100vh;
    overflow: hidden;
    background: var(--background, #f7f5f2);
}

/* Appbar user menu dropdown */
.appbar-user-menu {
    position: relative;
    display: inline-flex;
}

.appbar-user-dropdown {
    position: absolute;
    top: 100%;
    right: 0;
    min-width: 200px;
    background: var(--mud-palette-surface, #fdfcfb);
    border: 1px solid var(--mud-palette-divider, #e0dcd6);
    border-radius: 8px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
    padding: 6px 0;
    z-index: 1200;
    margin-top: 4px;
}

.appbar-user-dropdown-item {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 10px 16px;
    border: none;
    background: none;
    color: var(--mud-palette-text-primary, #1e293b);
    font-size: 0.875rem;
    font-family: inherit;
    cursor: pointer;
    text-decoration: none;
    transition: background-color 0.15s ease;
}

.appbar-user-dropdown-item:hover {
    background-color: var(--mud-palette-action-default-hover, rgba(0, 0, 0, 0.04));
}

.appbar-user-dropdown-divider {
    border: none;
    border-top: 1px solid var(--mud-palette-divider, #e0dcd6);
    margin: 4px 0;
}

.dashboard-main-content {
    display: flex;
    flex-direction: column;
    flex: 1;
    overflow: auto;
    /* MudMainContent adds its own padding-top for the AppBar */
}

.dashboard-bg-canvas {
    position: fixed;
    top: 48px;
    left: 0;
    width: 100%;
    height: calc(100vh - 48px);
    pointer-events: none;
    z-index: 0;
    opacity: 0.18;
}

@media (prefers-reduced-motion: reduce) {
    .dashboard-bg-canvas {
        display: none;
    }
}

/* Ensure page content sits above the background canvas */
.dashboard-main-content > .mud-container,
.dashboard-main-content > .profile-page-container,
.dashboard-main-content > .password-reset-page,
.dashboard-main-content > .onboarding-banner,
.dashboard-main-content > .minimal-footer {
    position: relative;
    z-index: 1;
}

/* Override MudMainContent's default padding to use our flex layout */
.dashboard-layout .mud-main-content.dashboard-main-content {
    padding-top: 48px;
    min-height: calc(100vh - 48px);
    box-sizing: border-box;
}

/* Stats Bar */
.dashboard-stats-bar {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--mud-palette-divider, #e0dcd6);
    background: var(--mud-palette-surface, #fdfcfb);
}

.dashboard-stat-card {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    border-radius: 8px;
    border: 1px solid var(--mud-palette-divider, #e0dcd6);
    background: var(--background, #f7f5f2);
}

.stat-icon-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 8px;
    flex-shrink: 0;
}

.stat-icon-green { background: rgba(76, 175, 80, 0.1); color: #4CAF50; }
.stat-icon-blue { background: rgba(30, 41, 59, 0.1); color: #1e293b; }
.stat-icon-amber { background: rgba(255, 152, 0, 0.1); color: #FF9800; }
.stat-icon-teal { background: rgba(42, 157, 143, 0.1); color: #2a9d8f; }

.stat-content {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.stat-label {
    font-size: 11px;
    color: var(--mud-palette-text-secondary, #64748b);
    line-height: 1.2;
}

.stat-value-row {
    display: flex;
    align-items: baseline;
    gap: 6px;
}

.stat-value {
    font-size: 1.25rem;
    font-weight: 600;
    font-family: monospace;
    color: var(--mud-palette-text-primary, #1e293b);
    line-height: 1.3;
}

.stat-change {
    font-size: 10px;
    font-family: monospace;
    color: var(--mud-palette-text-secondary, #64748b);
}

.stat-change-up { color: #4CAF50; }
.stat-change-amber { color: #FF9800; }

/* Dashboard Main Area */
.dashboard-main {
    display: flex;
    flex: 1;
    overflow: hidden;
}

/* Asset Sidebar */
.dashboard-sidebar {
    width: 280px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    border-right: 1px solid var(--mud-palette-divider, #e0dcd6);
    background: var(--mud-palette-surface, #fdfcfb);
    overflow: hidden;
}

.sidebar-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 14px;
    border-bottom: 1px solid var(--mud-palette-divider, #e0dcd6);
}

.sidebar-header-title {
    display: flex;
    align-items: center;
    gap: 8px;
}

.sidebar-search {
    padding: 8px 10px;
    border-bottom: 1px solid var(--mud-palette-divider, #e0dcd6);
}

.sidebar-search-field .mud-input-slot {
    font-size: 13px !important;
}

.sidebar-categories {
    flex: 1;
    overflow-y: auto;
    padding: 6px;
}

.sidebar-category {
    margin-bottom: 2px;
}

.sidebar-category-header {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 8px 10px;
    border: none;
    background: transparent;
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.15s;
    text-align: left;
    font-family: inherit;
}

.sidebar-category-header:hover {
    background: var(--mud-palette-background-grey, rgba(0,0,0,0.04));
}

.sidebar-category-header.expanded {
    background: var(--mud-palette-secondary, #ece8e1);
}

.category-icon-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 6px;
    background: var(--mud-palette-background-grey, rgba(0,0,0,0.06));
    color: var(--mud-palette-text-secondary, #64748b);
    flex-shrink: 0;
    transition: all 0.15s;
}

.category-icon-active {
    background: rgba(42, 157, 143, 0.15);
    color: #2a9d8f;
}

.category-info {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-width: 0;
}

.category-name {
    font-size: 13px;
    font-weight: 500;
    color: var(--mud-palette-text-primary, #1e293b);
}

.category-count {
    font-size: 11px;
    color: var(--mud-palette-text-secondary, #64748b);
}

.sidebar-category-items {
    margin-left: 16px;
    padding-left: 12px;
    border-left: 1px solid var(--mud-palette-divider, #e0dcd6);
    margin-top: 2px;
}

.sidebar-asset-item {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 6px 10px;
    background: transparent;
    border-radius: 6px;
    cursor: pointer;
    transition: background 0.15s;
}

.sidebar-asset-item:hover {
    background: var(--mud-palette-background-grey, rgba(0,0,0,0.04));
}

.sidebar-asset-item.selected {
    background: rgba(42, 157, 143, 0.1);
}

.asset-telemetry-icon {
    margin-left: auto;
    flex-shrink: 0;
    color: var(--mud-palette-tertiary, #2a9d8f);
    opacity: 0.7;
    transition: opacity 0.2s;
}

.asset-telemetry-icon:hover {
    opacity: 1;
}

.sidebar-asset-item:hover .asset-telemetry-icon {
    opacity: 1;
}

.asset-status-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}

.dot-active { background: #4CAF50; }
.dot-idle { background: #FF9800; }
.dot-offline { background: #EF5350; }
.dot-maintenance { background: #2196F3; }

.asset-item-info {
    display: flex;
    flex-direction: column;
    min-width: 0;
    flex: 1;
}

.asset-item-name {
    font-size: 12px;
    font-weight: 500;
    color: var(--mud-palette-text-primary, #1e293b);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.asset-item-location {
    font-size: 10px;
    color: var(--mud-palette-text-secondary, #64748b);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sidebar-legend {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 14px;
    border-top: 1px solid var(--mud-palette-divider, #e0dcd6);
    font-size: 10px;
    color: var(--mud-palette-text-secondary, #64748b);
}

.legend-item {
    display: flex;
    align-items: center;
    gap: 4px;
}

/* Map Wrapper */
.dashboard-map-wrapper {
    display: flex;
    flex-direction: column;
    flex: 1;
    overflow: hidden;
}

.dashboard-map-area {
    position: relative;
    flex: 1;
    min-height: 0;
    overflow: hidden;
}

#dashboard-map {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

/* Hide residual Google Maps controls that appear despite disableDefaultUI */
.gm-bundled-control,
.gm-style-cc,
.gm-control-active,
.gmnoprint:not(.gm-bundled-control-on-bottom) {
    display: none !important;
}

.dashboard-map-area .asset-tracking-map {
    width: 100%;
    height: 100%;
    min-height: 0;
    border-radius: 0;
}

/* Dashboard map fullscreen mode */
.dashboard-map-area.fullscreen {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    z-index: 9999 !important;
    border-radius: 0 !important;
    margin: 0 !important;
    border: none !important;
}

.dashboard-map-area.fullscreen #dashboard-map {
    width: 100vw !important;
    height: 100vh !important;
    border-radius: 0 !important;
}

/* Map Controls */
.dashboard-map-controls {
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 10;
}

.map-control-group {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.map-control-btn,
.map-control-btn.mud-icon-button,
.map-control-btn .mud-button-root {
    background: rgba(253, 252, 251, 0.92) !important;
    border: 1px solid var(--mud-palette-divider, #e0dcd6) !important;
    border-radius: 6px !important;
    backdrop-filter: blur(4px);
    width: 32px !important;
    height: 32px !important;
}

.map-control-btn:hover {
    background: var(--mud-palette-secondary, #ece8e1) !important;
}

/* Map Live Badge */
.dashboard-map-badge {
    position: absolute;
    top: 12px;
    left: 12px;
    z-index: 10;
    display: flex;
    align-items: center;
    gap: 8px;
}

.map-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: 6px;
    font-size: 11px;
    font-family: monospace;
    background: rgba(253, 252, 251, 0.92);
    border: 1px solid var(--mud-palette-divider, #e0dcd6);
    backdrop-filter: blur(4px);
}

.map-badge-live {
    color: #4CAF50;
}

.map-badge-count {
    color: var(--mud-palette-text-secondary, #64748b);
}

.live-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #4CAF50;
    animation: pulse-live 2s infinite;
}

@keyframes pulse-live {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.4; }
}

/* Bottom Panel */
.dashboard-bottom-panel {
    height: 200px;
    flex-shrink: 0;
    border-top: 1px solid var(--mud-palette-divider, #e0dcd6);
    background: var(--mud-palette-surface, #fdfcfb);
    overflow: hidden;
    transition: height 0.2s ease;
    position: relative;
}

.dashboard-bottom-panel.collapsed {
    height: 36px;
}

.bottom-panel-toggle {
    position: absolute;
    top: 4px;
    right: 12px;
    z-index: 5;
    background: transparent;
    border: none;
    cursor: pointer;
    color: var(--mud-palette-text-secondary, #64748b);
    padding: 2px;
    border-radius: 4px;
}

.bottom-panel-toggle:hover {
    background: var(--mud-palette-background-grey, rgba(0,0,0,0.04));
}

.bottom-panel-tabs {
    height: 100%;
}

.bottom-panel-tabs .mud-tabs-header {
    min-height: 32px !important;
}

.bottom-panel-tabs .mud-tab {
    min-height: 32px !important;
    font-size: 12px !important;
    padding: 0 12px !important;
}

.bottom-panel-content {
    height: calc(100% - 36px);
    overflow: hidden;
}

.bottom-panel-list {
    height: 100%;
    overflow-y: auto;
    padding: 4px 8px;
}

.bottom-panel-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 80px;
}

.bottom-panel-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 10px;
    border-radius: 6px;
    cursor: pointer;
    transition: background 0.15s;
}

.bottom-panel-row:hover {
    background: var(--mud-palette-background-grey, rgba(0,0,0,0.04));
}

.panel-row-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 6px;
    flex-shrink: 0;
    border: 1px solid;
}

.panel-icon-high {
    background: rgba(239, 83, 80, 0.1);
    color: #EF5350;
    border-color: rgba(239, 83, 80, 0.2);
}

.panel-icon-medium {
    background: rgba(255, 152, 0, 0.1);
    color: #FF9800;
    border-color: rgba(255, 152, 0, 0.2);
}

.panel-icon-low {
    background: rgba(33, 150, 243, 0.1);
    color: #2196F3;
    border-color: rgba(33, 150, 243, 0.2);
}

.panel-icon-activity {
    background: rgba(42, 157, 143, 0.1);
    color: #2a9d8f;
    border-color: rgba(42, 157, 143, 0.2);
}

.panel-row-content {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1;
    min-width: 0;
}

.panel-row-asset {
    font-size: 12px;
    font-weight: 500;
    color: var(--mud-palette-text-primary, #1e293b);
    white-space: nowrap;
}

.panel-row-detail {
    font-size: 12px;
    color: var(--mud-palette-text-secondary, #64748b);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.panel-row-time {
    font-size: 10px;
    font-family: monospace;
    color: var(--mud-palette-text-secondary, #64748b);
    white-space: nowrap;
    flex-shrink: 0;
}

/* Loading overlay */
.dashboard-loading {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 12px;
    z-index: 15;
    background: var(--mud-palette-background, #f7f5f2);
}

/* Responsive: Tablet */
@media (max-width: 1024px) {
    .dashboard-stats-bar {
        grid-template-columns: repeat(2, 1fr);
        gap: 8px;
        padding: 8px 12px;
    }

    .dashboard-sidebar {
        display: none;
    }

    .dashboard-bottom-panel {
        height: 160px;
    }
}

/* Responsive: Mobile */
@media (max-width: 768px) {
    .dashboard-stats-bar {
        grid-template-columns: repeat(2, 1fr);
        gap: 6px;
        padding: 8px;
    }

    .dashboard-stat-card {
        padding: 8px 10px;
    }

    .stat-value {
        font-size: 1rem;
    }

    .dashboard-bottom-panel {
        height: 140px;
    }

    .dashboard-bottom-panel.collapsed {
        height: 32px;
    }
}

/* ============================================
   MOBILE ASSET LIST (visible < 1024px only)
   ============================================ */

/* Hidden on desktop by default */
.ue-mobile-list {
    display: none;
}

@media (max-width: 1024px) {
    .ue-mobile-list {
        display: flex;
        flex-direction: column;
        max-height: 35vh;
        background: #fff;
        border-bottom: 1px solid var(--mud-palette-divider, #e0dcd6);
        flex-shrink: 0;
        transition: max-height .2s ease-out;
    }

    .ue-mobile-list--collapsed {
        max-height: none;
    }
}

/* Collapse toggle bar */
.ue-mobile-collapse-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 8px 12px;
    background: #fff;
    border: none;
    border-bottom: 1px solid var(--mud-palette-divider, #e0dcd6);
    cursor: pointer;
    font-family: inherit;
    flex-shrink: 0;
    transition: background .15s;
}

.ue-mobile-collapse-bar:hover {
    background: rgba(0, 0, 0, 0.02);
}

.ue-mobile-collapse-bar-info {
    display: flex;
    align-items: center;
    gap: 8px;
}

.ue-mobile-collapse-bar-text {
    font-size: 13px;
    font-weight: 600;
    color: var(--mud-palette-text-primary, #1a1a1a);
}

.ue-mobile-collapse-bar-count {
    font-size: 11px;
    font-weight: 600;
    color: #999;
    background: rgba(0, 0, 0, 0.05);
    padding: 1px 6px;
    border-radius: 10px;
    font-family: monospace;
}

.ue-mobile-header {
    padding: 10px 12px 8px;
    border-bottom: 1px solid var(--mud-palette-divider, #e0dcd6);
    flex-shrink: 0;
}

.ue-mobile-search-wrap {
    margin-bottom: 8px;
}

.ue-mobile-search {
    font-size: 13px;
}

/* Status filter pills */
.ue-pills {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

.ue-pill {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 10px;
    border-radius: 20px;
    border: 1px solid var(--mud-palette-divider, #e0e0e0);
    background: #fff;
    font-size: 11px;
    font-weight: 600;
    color: #666;
    cursor: pointer;
    transition: all .15s;
    font-family: inherit;
}

.ue-pill:hover { background: #f5f5f5; }

.ue-pill--active {
    background: var(--mud-palette-tertiary, #2a9d8f);
    color: #fff;
    border-color: var(--mud-palette-tertiary, #2a9d8f);
}

.ue-pill--active:hover { opacity: 0.9; }

.ue-pill--active-green {
    background: rgba(76, 175, 80, .12);
    color: #2e7d32;
    border-color: rgba(76, 175, 80, .3);
}

.ue-pill--active-amber {
    background: rgba(255, 160, 0, .12);
    color: #e65100;
    border-color: rgba(255, 160, 0, .3);
}

.ue-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    flex-shrink: 0;
}

.ue-dot--green  { background: #4CAF50; }
.ue-dot--amber  { background: #FFA000; }
.ue-dot--gray   { background: #9e9e9e; }

/* List header */
.ue-mobile-list-header {
    display: grid;
    grid-template-columns: 1fr 80px;
    gap: 8px;
    padding: 6px 12px;
    background: var(--mud-palette-background-grey, #f5f5f5);
    border-bottom: 1px solid var(--mud-palette-divider, #e0dcd6);
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: #999;
    flex-shrink: 0;
}

/* Scrollable list area */
.ue-mobile-list-scroll {
    flex: 1;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

/* List rows */
.ue-mobile-list-row {
    display: grid;
    grid-template-columns: 1fr 80px;
    gap: 8px;
    align-items: center;
    padding: 8px 12px;
    border: none;
    border-bottom: 1px solid rgba(0, 0, 0, 0.04);
    background: none;
    width: 100%;
    text-align: left;
    cursor: pointer;
    transition: background .1s;
    font-family: inherit;
}

.ue-mobile-list-row:hover { background: rgba(0, 0, 0, 0.02); }

.ue-mobile-list-row--selected {
    background: rgba(42, 157, 143, 0.06);
    border-left: 3px solid var(--mud-palette-tertiary, #2a9d8f);
}

.ue-mobile-list-cell-asset {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.ue-mobile-asset-name {
    font-size: 13px;
    font-weight: 600;
    color: var(--mud-palette-text-primary, #1a1a1a);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ue-mobile-asset-sub {
    font-size: 11px;
    color: var(--mud-palette-text-secondary, #999);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Status badges */
.ue-status-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 2px 8px;
    border-radius: 12px;
    font-size: 10px;
    font-weight: 700;
    border: 1px solid;
}

.ue-status-moving {
    background: rgba(76, 175, 80, .12);
    color: #2e7d32;
    border-color: rgba(76, 175, 80, .3);
}

.ue-status-idle {
    background: rgba(255, 160, 0, .12);
    color: #e65100;
    border-color: rgba(255, 160, 0, .3);
}

.ue-status-parked {
    background: #f5f5f5;
    color: #888;
    border-color: #e0e0e0;
}

.ue-status-unknown {
    background: #f5f5f5;
    color: #bbb;
    border-color: #e0e0e0;
}

/* Empty state */
.ue-mobile-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 24px 16px;
    gap: 8px;
    font-size: 13px;
    color: #999;
}

/* ============================================
   MOBILE FLOATING PANEL (visible < 1024px only)
   ============================================ */

/* Hidden by default on desktop */
.ue-fp-backdrop { display: none; }
.ue-fp { display: none; }
.gm-iw-detail-btn { display: none !important; }

@media (max-width: 1024px) {
    .gm-iw-detail-btn { display: inline-flex !important; }
}

@media (max-width: 1024px) {
    .ue-fp-backdrop {
        display: block;
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, .3);
        z-index: 1200;
        opacity: 0;
        pointer-events: none;
        transition: opacity .2s;
    }

    .ue-fp-backdrop--open {
        opacity: 1;
        pointer-events: auto;
    }

    .ue-fp {
        display: flex;
        flex-direction: column;
        position: fixed;
        bottom: 40px;
        left: 12px;
        right: 12px;
        background: #fff;
        border-radius: 16px;
        box-shadow: 0 4px 24px rgba(0, 0, 0, .15);
        z-index: 1300;
        overflow: hidden;
        animation: ue-fp-slide-in .25s ease-out;
        transition: max-height .3s ease-out;
        max-height: 85vh;
    }

    @keyframes ue-fp-slide-in {
        from { transform: translateY(20px); opacity: 0; }
        to   { transform: translateY(0); opacity: 1; }
    }

    /* Drag handle — 44px touch target with visual pill centered inside */
    .ue-fp-handle {
        width: 100%;
        height: 28px;
        flex-shrink: 0;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .ue-fp-handle::after {
        content: '';
        display: block;
        width: 40px;
        height: 4px;
        border-radius: 2px;
        background: #ddd;
    }

    /* Panel content — always visible when panel is shown */
    .ue-fp-expanded {
        display: flex;
        flex-direction: column;
    }

    .ue-fp-expanded-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 4px 16px 8px;
    }

    .ue-fp-expanded-header-info {
        display: flex;
        align-items: center;
        gap: 10px;
        min-width: 0;
        flex: 1;
    }

    /* Shared icon element */
    .ue-fp-icon {
        width: 36px;
        height: 36px;
        border-radius: 8px;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
    }

    .ue-fp-icon-moving { background: rgba(76, 175, 80, .12); color: #2e7d32; }
    .ue-fp-icon-idle   { background: rgba(255, 160, 0, .12); color: #e65100; }
    .ue-fp-icon-parked { background: #f5f5f5; color: #999; }
    .ue-fp-icon-unknown { background: #f5f5f5; color: #ccc; }

    .ue-fp-name {
        font-size: 14px;
        font-weight: 700;
        color: var(--mud-palette-text-primary, #1a1a1a);
        margin: 0;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .ue-fp-status-row {
        display: flex;
        align-items: center;
        gap: 6px;
        margin-top: 2px;
    }

    .ue-fp-status-text {
        font-size: 11px;
        font-weight: 600;
    }

    .ue-fp-status-moving { color: #2e7d32; }
    .ue-fp-status-idle   { color: #e65100; }
    .ue-fp-status-parked { color: #888; }
    .ue-fp-status-unknown { color: #bbb; }

    .ue-fp-plate {
        font-size: 11px;
        color: #999;
    }

    .ue-fp-close {
        background: none;
        border: none;
        cursor: pointer;
        width: 28px;
        height: 28px;
        border-radius: 6px;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #999;
        flex-shrink: 0;
    }

    .ue-fp-close:hover { background: #f5f5f5; color: #333; }

    /* Stats grid */
    .ue-fp-stats {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 8px;
        padding: 0 16px 12px;
    }

    .ue-fp-stat {
        padding: 10px;
        border-radius: 10px;
        border: 1px solid rgba(0, 0, 0, 0.06);
        background: var(--mud-palette-background, #fafafa);
    }

    .ue-fp-stat-label {
        display: flex;
        align-items: center;
        gap: 6px;
        font-size: 11px;
        color: #999;
        margin-bottom: 4px;
    }

    .ue-fp-stat-value {
        font-size: 13px;
        font-weight: 700;
        color: var(--mud-palette-text-primary, #1a1a1a);
    }

    /* Info rows */
    .ue-fp-info {
        padding: 0 16px 12px;
        display: flex;
        flex-direction: column;
        gap: 8px;
        border-top: 1px solid rgba(0, 0, 0, 0.06);
        padding-top: 12px;
    }

    .ue-fp-info-row {
        display: flex;
        align-items: center;
        gap: 8px;
        font-size: 12px;
        color: #666;
    }

    /* Actions */
    .ue-fp-actions {
        display: flex;
        gap: 8px;
        padding: 0 16px 16px;
    }
}

/* === PASSWORD RESET PAGE STYLES === */
.password-reset-page {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    background: transparent;
}

.password-reset-title-bar {
    border-bottom: 1px solid rgba(224, 220, 214, 0.4);
    background: var(--mud-palette-background, #f7f5f2);
    padding: 20px 24px;
}

.password-reset-page-title {
    font-size: 24px;
    font-weight: 600;
    color: var(--mud-palette-text-primary, #1e293b);
    margin: 0;
}

.password-reset-main {
    display: flex;
    flex: 1;
    align-items: center;
    justify-content: center;
    padding: 40px 16px;
}

@media (min-width: 768px) {
    .password-reset-main {
        padding: 64px 24px;
    }
}

.password-reset-card.mud-paper {
    width: 100%;
    max-width: 448px;
    border: 1px solid rgba(224, 220, 214, 0.6) !important;
    border-radius: 10px !important;
    background: var(--mud-palette-surface, #fdfcfb) !important;
    box-shadow: 0 4px 16px rgba(30, 41, 59, 0.06) !important;
    padding: 32px;
}

/* === FORM STATE === */
.password-reset-form {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.form-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    text-align: center;
}

.lock-icon-container {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 12px;
    background: rgba(42, 157, 143, 0.1);
}

.lock-icon {
    color: var(--mud-palette-tertiary, #2a9d8f);
}

.form-title {
    font-size: 20px;
    font-weight: 600;
    color: var(--mud-palette-text-primary, #1e293b);
    margin: 0;
}

.form-description {
    font-size: 14px;
    color: var(--mud-palette-text-secondary, #64748b);
    margin: 0;
}

.form-field {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.field-label {
    font-size: 14px;
    font-weight: 500;
    color: var(--mud-palette-text-primary, #1e293b);
}

.required-mark {
    color: #e53935;
}

.password-input-container {
    position: relative;
    display: flex;
    align-items: center;
}

.password-input-container .mud-input-control {
    flex: 1;
}

.password-input .mud-input-root,
.password-input .mud-input-outlined .mud-input-outlined-border {
    background: var(--mud-palette-background, #f7f5f2);
}

.password-input .mud-input-slot input {
    padding-right: 44px;
}

.password-input.input-error .mud-input-outlined .mud-input-outlined-border {
    border-color: #e53935 !important;
}

.password-toggle {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 1;
    color: var(--mud-palette-text-secondary, #64748b);
}

.password-toggle:hover {
    color: var(--mud-palette-text-primary, #1e293b);
}

/* === PASSWORD STRENGTH INDICATOR === */
.strength-indicator {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.strength-bars {
    display: flex;
    gap: 6px;
}

.strength-bar {
    height: 6px;
    flex: 1;
    border-radius: 999px;
    transition: all 0.5s ease;
}

.bar-empty {
    background: var(--mud-palette-secondary, #ece8e1);
}

.bar-weak {
    background: #e53935;
}

.bar-fair {
    background: #fb8c00;
}

.bar-good {
    background: var(--mud-palette-tertiary, #2a9d8f);
}

.bar-strong {
    background: #43a047;
}

.strength-label {
    font-size: 12px;
    font-weight: 500;
    margin: 0;
    transition: all 0.3s ease;
}

.text-weak {
    color: #e53935;
}

.text-fair {
    color: #fb8c00;
}

.text-good {
    color: var(--mud-palette-tertiary, #2a9d8f);
}

.text-strong {
    color: #43a047;
}

/* === PASSWORD RULES === */
.password-rules {
    display: flex;
    flex-direction: column;
    gap: 6px;
    list-style: none;
    padding: 0;
    margin: 0;
}

.password-rule {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    transition: all 0.3s ease;
}

.rule-not-passed {
    color: var(--mud-palette-text-secondary, #64748b);
}

.rule-passed {
    color: #43a047;
}

.rule-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    border-radius: 999px;
    flex-shrink: 0;
    transition: all 0.3s ease;
}

.icon-not-passed {
    background: var(--mud-palette-secondary, #ece8e1);
    color: var(--mud-palette-text-secondary, #64748b);
}

.icon-passed {
    background: #43a047;
    color: white;
}

.rule-icon .mud-icon-root {
    font-size: 10px;
}

.error-text {
    font-size: 12px;
    color: #e53935;
    margin: 0;
    animation: fadeIn 0.2s ease;
}

.success-text-small {
    display: flex;
    align-items: center;
    font-size: 12px;
    color: #43a047;
    margin: 0;
    animation: fadeIn 0.2s ease;
}

/* === FORM BUTTONS === */
.form-buttons {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding-top: 4px;
}

.submit-button,
.cancel-button {
    height: 44px !important;
    font-size: 14px !important;
    font-weight: 500 !important;
}

.submit-button.mud-button-root {
    background-color: var(--mud-palette-tertiary, #2a9d8f) !important;
    color: white !important;
}

.submit-button.mud-button-root:hover {
    background-color: #248f82 !important;
}

.submit-button.mud-button-root:disabled,
.submit-button.mud-button-root.mud-disabled {
    opacity: 0.4 !important;
    background-color: var(--mud-palette-tertiary, #2a9d8f) !important;
}

.cancel-button.mud-button-root {
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border: 1px solid var(--mud-palette-divider, #e0dcd6) !important;
    background: var(--mud-palette-background, #f7f5f2) !important;
    color: var(--mud-palette-text-primary, #1e293b) !important;
}

.cancel-button.mud-button-root:hover {
    background: var(--mud-palette-secondary, #ece8e1) !important;
}

/* === SUCCESS STATE === */
.password-reset-success {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 24px;
    padding: 16px 0;
}

.success-icon-container {
    position: relative;
}

.success-icon-outer {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 80px;
    height: 80px;
    border-radius: 999px;
    background: rgba(67, 160, 71, 0.1);
    animation: zoomIn 0.5s ease;
}

.success-icon-inner {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border-radius: 999px;
    background: rgba(67, 160, 71, 0.2);
}

.success-icon {
    color: #43a047;
    font-size: 32px;
    animation: zoomIn 0.7s ease;
}

.success-text {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    text-align: center;
}

.success-title {
    font-size: 20px;
    font-weight: 600;
    color: var(--mud-palette-text-primary, #1e293b);
    margin: 0;
}

.success-description {
    max-width: 320px;
    font-size: 14px;
    line-height: 1.5;
    color: var(--mud-palette-text-secondary, #64748b);
    margin: 0;
}

.success-button.mud-button-root {
    width: 100%;
    height: 44px !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    background-color: var(--mud-palette-tertiary, #2a9d8f) !important;
    color: white !important;
}

.success-button.mud-button-root:hover {
    background-color: #248f82 !important;
}

/* === FOOTER === */
.password-reset-footer {
    border-top: 1px solid rgba(224, 220, 214, 0.4);
    background: rgba(253, 252, 251, 0.5);
    padding: 16px;
}

.footer-text {
    text-align: center;
    font-size: 12px;
    color: var(--mud-palette-text-secondary, #64748b);
    margin: 0;
}

.footer-link {
    color: var(--mud-palette-tertiary, #2a9d8f);
    text-decoration: none;
    text-underline-offset: 4px;
}

.footer-link:hover {
    text-decoration: underline;
}

/* === ANIMATIONS === */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(-4px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes zoomIn {
    from {
        opacity: 0;
        transform: scale(0.5);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* ============================================================
   PROFILE PAGE STYLES
   ============================================================ */

.profile-page-container {
    max-width: 960px;
    margin: 0 auto;
    padding: 32px 16px;
}

@media (min-width: 600px) {
    .profile-page-container {
        padding: 32px 24px;
    }
}

/* Breadcrumb */
.profile-breadcrumb {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.8125rem;
    color: var(--mud-palette-text-secondary, #64748b);
    margin-bottom: 4px;
}

.profile-breadcrumb .mud-icon-root {
    font-size: 14px !important;
}

.profile-breadcrumb-link {
    display: inline-flex;
    align-items: center;
    color: var(--mud-palette-text-secondary, #64748b) !important;
    text-decoration: none !important;
    transition: color 0.15s ease;
}

.profile-breadcrumb-link:hover {
    color: var(--mud-palette-text-primary, #1e293b) !important;
}

/* Page title */
.profile-page-title {
    font-size: 1.75rem;
    font-weight: 700;
    letter-spacing: -0.025em;
    color: var(--mud-palette-text-primary, #1e293b);
    margin: 0;
}

/* Content grid */
.profile-content-grid {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

@media (min-width: 960px) {
    .profile-content-grid {
        display: grid;
        grid-template-columns: 3fr 2fr;
        gap: 24px;
        align-items: start;
    }
}

.profile-left-column {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

/* Profile Card with decorative header */
.profile-card {
    border-radius: 12px !important;
    overflow: hidden;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08) !important;
    border: none !important;
    background: white !important;
}

.profile-card-banner {
    height: 128px;
    background: var(--mud-palette-primary, #1e293b);
    position: relative;
    overflow: hidden;
}

.profile-card-banner svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0.2;
}

.profile-card-body {
    padding: 0 32px 32px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.profile-avatar-wrapper {
    margin-top: -48px;
    padding: 4px;
    background: white;
    border-radius: 50%;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
}

.profile-avatar-wrapper .mud-avatar {
    width: 96px !important;
    height: 96px !important;
    font-size: 2rem !important;
    font-weight: 700 !important;
    border: 4px solid white;
}

.profile-user-name {
    margin-top: 16px;
    font-size: 1.5rem;
    font-weight: 700;
    letter-spacing: -0.025em;
    color: var(--mud-palette-text-primary, #1e293b);
    text-align: center;
}

.profile-badge-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 8px;
}

.profile-id-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 12px;
    border-radius: 6px;
    background: var(--mud-palette-background-grey, rgba(0, 0, 0, 0.06));
    font-size: 0.75rem;
    font-family: 'SF Mono', 'Cascadia Code', monospace;
    color: var(--mud-palette-text-secondary, #64748b);
}

.profile-copy-btn {
    width: 24px !important;
    height: 24px !important;
    color: var(--mud-palette-text-secondary, #64748b) !important;
}

.profile-copy-btn:hover {
    color: var(--mud-palette-text-primary, #1e293b) !important;
}

/* Edit Profile Form Card */
.profile-form-card {
    border-radius: 12px !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08) !important;
    border: none !important;
    background: white !important;
    padding: 24px 28px !important;
}

.profile-form-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 24px;
}

.profile-form-icon-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 8px;
    background: rgba(42, 157, 143, 0.1);
    flex-shrink: 0;
}

.profile-form-icon-wrapper .mud-icon-root {
    color: var(--mud-palette-tertiary, #2a9d8f) !important;
    font-size: 18px !important;
}

.profile-form-title {
    font-size: 1rem;
    font-weight: 600;
    color: var(--mud-palette-text-primary, #1e293b);
    margin: 0;
}

.profile-form-subtitle {
    font-size: 0.875rem;
    color: var(--mud-palette-text-secondary, #64748b);
    margin: 0;
}

.profile-form-fields {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
    margin-bottom: 20px;
}

@media (min-width: 600px) {
    .profile-form-fields {
        grid-template-columns: 1fr 1fr;
    }
}

.profile-form-label {
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--mud-palette-text-secondary, #64748b);
    margin-bottom: 6px;
}

.profile-form-card .mud-input-outlined .mud-input-outlined-border {
    border-radius: 8px !important;
    border-color: rgba(0, 0, 0, 0.12) !important;
}

.profile-form-card .mud-input-root {
    background: rgba(0, 0, 0, 0.02) !important;
}

.profile-form-card .mud-input-root:focus-within {
    background: white !important;
}

.profile-save-btn.mud-button-root {
    height: 44px !important;
    border-radius: 8px !important;
    background-color: var(--mud-palette-tertiary, #2a9d8f) !important;
    color: white !important;
    font-weight: 500 !important;
    padding: 0 24px !important;
    align-self: flex-end;
}

.profile-save-btn.mud-button-root:hover {
    background-color: #248f82 !important;
}

.profile-security-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 20px;
    border-top: 1px solid var(--mud-palette-divider, #e0dcd6);
    margin-top: 20px;
}

.profile-security-label {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--mud-palette-text-primary, #1e293b);
    margin: 0;
}

.profile-security-sub {
    font-size: 0.75rem;
    color: var(--mud-palette-text-secondary, #64748b);
    margin: 0;
}

.profile-change-pw-btn.mud-button-root {
    height: 40px !important;
    border-radius: 8px !important;
    border-color: rgba(0, 0, 0, 0.12) !important;
    transition: all 0.2s ease;
}

.profile-change-pw-btn.mud-button-root:hover {
    border-color: var(--mud-palette-tertiary, #2a9d8f) !important;
    color: var(--mud-palette-tertiary, #2a9d8f) !important;
}

/* Status Card */
.profile-status-card {
    border-radius: 12px !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08) !important;
    border: none !important;
    background: white !important;
    padding: 20px 24px !important;
    overflow: hidden;
}

.profile-status-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
}

.profile-status-header-left {
    display: flex;
    align-items: center;
    gap: 12px;
}

.profile-status-icon-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 8px;
    background: rgba(42, 157, 143, 0.1);
    flex-shrink: 0;
}

.profile-status-icon-wrapper .mud-icon-root {
    color: var(--mud-palette-tertiary, #2a9d8f) !important;
    font-size: 18px !important;
}

.profile-status-title {
    font-size: 1rem;
    font-weight: 600;
    color: var(--mud-palette-text-primary, #1e293b);
    margin: 0;
}

.profile-status-badge {
    display: inline-flex;
    align-items: center;
    padding: 4px 12px;
    border-radius: 6px;
    font-size: 0.75rem;
    font-weight: 600;
}

.profile-status-badge.status-available {
    background: rgba(76, 175, 80, 0.12);
    color: #2e7d32;
}

.profile-status-badge.status-ontask {
    background: rgba(33, 150, 243, 0.12);
    color: #1565c0;
}

.profile-status-badge.status-break {
    background: rgba(255, 152, 0, 0.12);
    color: #e65100;
}

.profile-status-badge.status-offline {
    background: rgba(158, 158, 158, 0.12);
    color: #616161;
}

.profile-status-badge.status-admin {
    background: rgba(42, 157, 143, 0.12);
    color: #2a9d8f;
}

/* Status indicator with pulse */
.profile-status-indicator {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px;
    border-radius: 12px;
    border: 1px solid;
    margin-bottom: 16px;
}

.profile-status-indicator.status-available {
    background: rgba(76, 175, 80, 0.04);
    border-color: rgba(76, 175, 80, 0.1);
}

.profile-status-indicator.status-ontask {
    background: rgba(33, 150, 243, 0.04);
    border-color: rgba(33, 150, 243, 0.1);
}

.profile-status-indicator.status-break {
    background: rgba(255, 152, 0, 0.04);
    border-color: rgba(255, 152, 0, 0.1);
}

.profile-status-indicator.status-offline {
    background: rgba(158, 158, 158, 0.04);
    border-color: rgba(158, 158, 158, 0.1);
}

.profile-status-indicator.status-admin {
    background: rgba(42, 157, 143, 0.04);
    border-color: rgba(42, 157, 143, 0.1);
}

.profile-pulse-dot {
    position: relative;
    width: 12px;
    height: 12px;
    flex-shrink: 0;
}

.profile-pulse-dot-inner {
    width: 12px;
    height: 12px;
    border-radius: 50%;
}

.profile-pulse-dot-ping {
    position: absolute;
    inset: 0;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    animation: pulse-live 2s infinite;
    opacity: 0.3;
}

.status-available .profile-pulse-dot-inner,
.status-available .profile-pulse-dot-ping { background: #4CAF50; }
.status-ontask .profile-pulse-dot-inner,
.status-ontask .profile-pulse-dot-ping { background: #2196F3; }
.status-break .profile-pulse-dot-inner,
.status-break .profile-pulse-dot-ping { background: #FF9800; }
.status-offline .profile-pulse-dot-inner,
.status-offline .profile-pulse-dot-ping { background: #9E9E9E; }
.status-admin .profile-pulse-dot-inner,
.status-admin .profile-pulse-dot-ping { background: #2a9d8f; }

.profile-status-text-main {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--mud-palette-text-primary, #1e293b);
    margin: 0;
}

.profile-status-text-sub {
    font-size: 0.75rem;
    color: var(--mud-palette-text-secondary, #64748b);
    margin: 0;
}

/* Info rows in status card */
.profile-info-row {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 16px;
    border-radius: 12px;
    background: var(--mud-palette-background-grey, rgba(0, 0, 0, 0.03));
    margin-bottom: 8px;
}

.profile-info-row:last-child {
    margin-bottom: 0;
}

.profile-info-row .mud-icon-root {
    color: var(--mud-palette-text-secondary, #64748b) !important;
    font-size: 18px !important;
    margin-top: 2px;
    flex-shrink: 0;
}

.profile-info-label {
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--mud-palette-text-secondary, #64748b);
    margin: 0;
}

.profile-info-value {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--mud-palette-text-primary, #1e293b);
    margin: 4px 0 0;
}

.profile-info-sub {
    font-size: 0.75rem;
    color: var(--mud-palette-text-secondary, #64748b);
    margin: 2px 0 0;
}

/* Skills section */
.profile-skills-section {
    padding: 20px 24px;
    border-top: 1px solid var(--mud-palette-divider, #e0dcd6);
}

.profile-skills-label {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--mud-palette-text-primary, #1e293b);
    margin: 0 0 8px;
}

/* === RESET PASSWORD DIALOG === */
.reset-password-dialog .mud-dialog-content {
    padding: 24px 24px 0 !important;
}

.reset-password-dialog .mud-dialog-actions {
    padding: 0 !important;
}

.reset-password-dialog .form-buttons {
    padding: 0 24px 16px !important;
}

/* === VEHICLE TELEMETRY PAGE (theme from inspect example, Unearthed colors) === */
.vehicle-telemetry .telemetry-section-header {
    background-color: var(--mud-palette-primary, #1e293b);
    color: var(--mud-palette-primary-contrast, #fff);
    padding: 14px 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px;
}

.vehicle-telemetry .telemetry-section-header .telemetry-section-title {
    font-size: 0.875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    display: flex;
    align-items: center;
    gap: 12px;
}

.vehicle-telemetry .telemetry-section-header .telemetry-section-icon {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.2);
}

.vehicle-telemetry .telemetry-stat-card {
    border-radius: 12px;
    border: 1px solid var(--mud-palette-divider, #e0dcd6);
    background: var(--mud-palette-surface, #fdfcfb);
    padding: 16px;
}

.vehicle-telemetry .telemetry-stat-card .telemetry-stat-label {
    font-size: 0.75rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--mud-palette-text-secondary, #64748b);
}

.vehicle-telemetry .telemetry-stat-card .telemetry-stat-value {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--mud-palette-text-primary, #1e293b);
}

.vehicle-telemetry .telemetry-stat-card .telemetry-stat-value.accent {
    color: var(--mud-palette-tertiary, #2a9d8f);
}

/* Grid layout: 2 cols mobile, 4 cols desktop (AssetTracker pattern) */
.vehicle-telemetry .telemetry-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1px;
    background: var(--mud-palette-divider, #e0dcd6);
}

@media (min-width: 600px) {
    .vehicle-telemetry .telemetry-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

.vehicle-telemetry .telemetry-grid-cell {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    padding: 1rem;
    background: var(--mud-palette-surface, #fdfcfb);
}

.vehicle-telemetry .telemetry-grid-cell.wide {
    grid-column: 1 / -1;
}

.vehicle-telemetry .telemetry-grid-cell-label-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--mud-palette-text-secondary, #64748b);
}

.vehicle-telemetry .telemetry-grid-cell-label-row .mud-icon-root {
    font-size: 1rem !important;
    width: 16px !important;
    height: 16px !important;
}

.vehicle-telemetry .telemetry-grid-cell-label {
    font-size: 0.75rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.vehicle-telemetry .telemetry-grid-cell-value {
    font-size: 1rem;
    font-weight: 700;
    color: var(--mud-palette-text-primary, #1e293b);
    margin: 0;
}

@media (min-width: 600px) {
    .vehicle-telemetry .telemetry-grid-cell-value {
        font-size: 1.125rem;
    }
}

/* Legacy aliases for telemetry-value-cell (OBD uses ObdValueCell which builds similar structure) */
.vehicle-telemetry .telemetry-value-cell {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 1rem;
    background: var(--mud-palette-surface, #fdfcfb);
}

.vehicle-telemetry .telemetry-value-cell .telemetry-value-label {
    font-size: 0.75rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--mud-palette-text-secondary, #64748b);
    display: flex;
    align-items: center;
    gap: 8px;
}

.vehicle-telemetry .telemetry-value-cell .telemetry-value-value {
    font-size: 1rem;
    font-weight: 700;
    color: var(--mud-palette-text-primary, #1e293b);
}

/* Telemetry header: AssetTracker layout - column on mobile, row on desktop, no overflow */
.vehicle-telemetry .telemetry-header {
    border: 1px solid var(--mud-palette-divider, #e0dcd6);
    border-radius: 12px;
    overflow: hidden;
    background: var(--mud-palette-surface, #fdfcfb);
}

.vehicle-telemetry .telemetry-header-body {
    padding: 1rem 1.25rem;
}

@media (min-width: 600px) {
    .vehicle-telemetry .telemetry-header-body {
        padding: 1rem 1.5rem;
    }
}

.vehicle-telemetry .telemetry-back-link {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    margin-bottom: 0.75rem;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--mud-palette-text-secondary, #64748b);
    text-decoration: none;
    transition: color 0.2s;
}

.vehicle-telemetry .telemetry-back-link:hover {
    color: var(--mud-palette-text-primary, #1e293b);
}

.vehicle-telemetry .telemetry-header-row {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

@media (min-width: 640px) {
    .vehicle-telemetry .telemetry-header-row {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
    }
}

.vehicle-telemetry .telemetry-vehicle-identity {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    min-width: 0;
}

.vehicle-telemetry .telemetry-vehicle-badge {
    flex-shrink: 0;
    width: 56px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    background: var(--mud-palette-primary, #1e293b);
}

.vehicle-telemetry .telemetry-vehicle-info {
    min-width: 0;
}

.vehicle-telemetry .telemetry-vehicle-name {
    font-size: 1.25rem;
    font-weight: 700;
    line-height: 1.3;
    color: var(--mud-palette-text-primary, #1e293b);
    margin: 0;
    overflow-wrap: break-word;
}

@media (min-width: 640px) {
    .vehicle-telemetry .telemetry-vehicle-name {
        font-size: 1.5rem;
    }
}

.vehicle-telemetry .telemetry-vehicle-meta {
    margin-top: 0.25rem;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 1rem;
}

.vehicle-telemetry .telemetry-vehicle-meta span {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--mud-palette-primary, #1e293b);
}

.vehicle-telemetry .telemetry-connection-block {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
    min-width: 0;
}

@media (min-width: 640px) {
    .vehicle-telemetry .telemetry-connection-block {
        align-items: flex-end;
        flex-shrink: 0;
    }
}

.vehicle-telemetry .telemetry-timestamps {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem 1.5rem;
    font-size: 0.75rem;
    color: var(--mud-palette-text-secondary, #64748b);
}

.vehicle-telemetry .telemetry-timestamps strong {
    font-weight: 600;
    color: var(--mud-palette-text-primary, #1e293b);
}

.vehicle-telemetry .telemetry-status-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}

.vehicle-telemetry .telemetry-connection-badge.connected .telemetry-status-dot {
    background: var(--mud-palette-tertiary, #2a9d8f);
}

.vehicle-telemetry .telemetry-connection-badge.idle .telemetry-status-dot {
    background: var(--mud-palette-warning);
}

.vehicle-telemetry .telemetry-connection-badge.offline .telemetry-status-dot {
    background: var(--mud-palette-error);
}

.vehicle-telemetry .telemetry-connection-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    border-radius: 9999px;
    border: 1px solid;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.vehicle-telemetry .telemetry-connection-badge.connected {
    background: rgba(42, 157, 143, 0.1);
    border-color: rgba(42, 157, 143, 0.3);
    color: var(--mud-palette-tertiary, #2a9d8f);
}

.vehicle-telemetry .telemetry-connection-badge.idle {
    background: rgba(245, 158, 11, 0.1);
    border-color: rgba(245, 158, 11, 0.3);
    color: var(--mud-palette-warning);
}

.vehicle-telemetry .telemetry-connection-badge.offline {
    background: rgba(239, 68, 68, 0.1);
    border-color: rgba(239, 68, 68, 0.3);
    color: var(--mud-palette-error);
}

/* ============================================
   DARK MODE OVERRIDES
   Applied when body has .dark-mode class (toggled via JS interop)
   MudBlazor swaps CSS vars via MudThemeProvider, but our hardcoded
   !important colors in site.css override those vars.
   This block re-overrides them for dark mode.
   Brand colors from unearthed-dev-logo zip:
     bg: #141a24  surface: #1a2233  accent: #2a9d8f
     border: #283040  text: #e8e4df  muted: #8b9ab5
   ============================================ */

body.dark-mode .mud-layout,
body.dark-mode .mud-layout-content {
    background-color: #141a24 !important;
}

body.dark-mode .mud-appbar.unearthed-appbar {
    background-color: #141a24 !important;
    border-bottom-color: #283040 !important;
}

body.dark-mode .dashboard-layout .mud-appbar.unearthed-appbar {
    background-color: rgba(20, 26, 36, 0.80) !important;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

body.dark-mode .mud-drawer.unearthed-drawer {
    background-color: rgba(20, 26, 36, 0.95) !important;
    border-right-color: #283040 !important;
}

body.dark-mode .mud-drawer.unearthed-drawer .mud-drawer-content {
    background-color: transparent !important;
}

body.dark-mode .dashboard-stat-card {
    background: #1a2233 !important;
    border-color: #283040 !important;
}

body.dark-mode .stat-icon-blue {
    background: rgba(232, 228, 223, 0.1) !important;
    color: #e8e4df !important;
}

body.dark-mode .dashboard-bottom-panel {
    background: #1a2233 !important;
    border-top-color: #283040 !important;
}

body.dark-mode .bottom-panel-row {
    border-bottom-color: #283040 !important;
}

body.dark-mode .ue-mobile-list {
    background: #1a2233 !important;
}

body.dark-mode .ue-mobile-collapse-bar {
    background: #1a2233 !important;
    border-bottom-color: #283040 !important;
    color: #e8e4df !important;
}

body.dark-mode .ue-asset-item {
    border-bottom-color: #283040 !important;
}

body.dark-mode .ue-asset-item:hover,
body.dark-mode .ue-asset-item--selected {
    background: rgba(42, 157, 143, 0.1) !important;
}

body.dark-mode .ue-fp {
    background: #1a2233 !important;
}

body.dark-mode .ue-fp-name,
body.dark-mode .ue-fp-stat-value,
body.dark-mode .ue-fp-info-row span {
    color: #e8e4df !important;
}

body.dark-mode .ue-fp-status-text,
body.dark-mode .ue-fp-stat-label {
    color: #8b9ab5 !important;
}

body.dark-mode .ue-fp-handle::after {
    background: #283040 !important;
}

body.dark-mode .appbar-logo-text,
body.dark-mode .drawer-logo-text {
    color: #e8e4df !important;
}

body.dark-mode .drawer-logo-tagline {
    color: #8b9ab5 !important;
}

body.dark-mode .unearthed-appbar .mud-icon-button,
body.dark-mode .unearthed-appbar .mud-typography,
body.dark-mode .unearthed-appbar .mud-text {
    color: #e8e4df !important;
}

body.dark-mode .appbar-menu-button,
body.dark-mode .appbar-action-button {
    color: #e8e4df !important;
}

body.dark-mode .unearthed-appbar .mud-icon-button:hover,
body.dark-mode .appbar-menu-button:hover,
body.dark-mode .appbar-action-button:hover,
body.dark-mode .appbar-emblem-button:hover {
    background-color: rgba(255, 255, 255, 0.08) !important;
}

body.dark-mode .mud-nav-link {
    color: #e8e4df !important;
}

body.dark-mode .mud-nav-link:hover {
    background-color: rgba(42, 157, 143, 0.1) !important;
}

body.dark-mode .mud-nav-link .mud-nav-link-icon {
    color: #8b9ab5 !important;
}

body.dark-mode .mud-main-content {
    background-color: #141a24 !important;
}

/* ============================================
   DARK MODE — CSS Custom Variable Overrides
   These variables are used by Home.razor, auth pages,
   and site.css elements via var(--background), var(--card), etc.
   Dark values sourced from unearthed-dev-logo/app/globals.css
   ============================================ */
body.dark-mode {
    --background: #141a24;
    --foreground: #e8e4df;
    --card: #1a2233;
    --card-foreground: #e8e4df;
    --primary: #e8e4df;
    --primary-foreground: #141a24;
    --secondary: #1e293b;
    --secondary-foreground: #e8e4df;
    --accent: #2a9d8f;
    --accent-foreground: #141a24;
    --muted: #283040;
    --muted-foreground: #8b9ab5;
    --border: #283040;
    --input: #283040;
    --ring: #2a9d8f;
}

/* ============================================
   DARK MODE — iPhone / Drawer Nav Menu
   ============================================ */
body.dark-mode .iphone-menu-item {
    border-bottom-color: rgba(255, 255, 255, 0.08);
    color: #e8e4df;
}

body.dark-mode .iphone-menu-item:hover {
    background-color: rgba(255, 255, 255, 0.05);
}

body.dark-mode .iphone-menu-item.active {
    background-color: rgba(229, 57, 53, 0.15);
}

body.dark-mode .iphone-menu-section-header {
    color: rgba(255, 255, 255, 0.50);
}

body.dark-mode .drawer-logo-container {
    border-bottom-color: rgba(255, 255, 255, 0.08);
}

/* ============================================
   DARK MODE — Minimal Footer (authenticated users)
   ============================================ */
body.dark-mode .minimal-footer {
    background-color: #1a2233;
    border-top-color: #283040;
}

body.dark-mode .minimal-footer p {
    color: rgba(255, 255, 255, 0.5);
}

/* ============================================
   DARK MODE — Auth Pages (Login / Register / Password Reset)
   ============================================ */
body.dark-mode .auth-page {
    background: #141a24;
}

body.dark-mode .auth-card {
    background: #1a2233 !important;
    border-color: #283040 !important;
}

body.dark-mode .auth-card .mud-input-control .mud-input-slot,
body.dark-mode .auth-card .mud-input {
    color: #e8e4df !important;
}

body.dark-mode .auth-card .mud-input-label {
    color: #8b9ab5 !important;
}

body.dark-mode .auth-card .mud-input-underline::before {
    border-color: #283040 !important;
}

body.dark-mode .auth-form-divider {
    border-color: #283040 !important;
    color: #8b9ab5 !important;
}

body.dark-mode .auth-card .mud-checkbox .mud-typography {
    color: #8b9ab5 !important;
}

/* ============================================
   DARK MODE — Choose Us / FAQ / Learn About Pages
   ============================================ */
body.dark-mode .choose-us-page {
    background: #141a24 !important;
}

body.dark-mode .choose-us-page .content-section,
body.dark-mode .choose-us-page .mud-paper {
    background: rgba(26, 34, 51, 0.88) !important;
    border-color: #283040 !important;
}

body.dark-mode .choose-us-page .mud-typography {
    color: #e8e4df !important;
}

body.dark-mode .choose-us-page .mud-typography.mud-typography-body1 {
    color: #8b9ab5 !important;
}

body.dark-mode .choose-us-page h3.mud-typography,
body.dark-mode .choose-us-page h4.mud-typography,
body.dark-mode .choose-us-page h5.mud-typography {
    color: #e8e4df !important;
}

body.dark-mode .choose-us-cta {
    background: linear-gradient(135deg, rgba(26, 34, 51, 0.9), rgba(20, 26, 36, 0.88)) !important;
    border-color: #283040 !important;
}

body.dark-mode .choose-us-page .faq-category-section .mud-typography {
    color: #e8e4df !important;
}

body.dark-mode .choose-us-page .mud-expansion-panel {
    background: #1a2233 !important;
    border-color: #283040 !important;
}

body.dark-mode .choose-us-page .mud-expansion-panel .mud-expand-panel-header .mud-expand-panel-text {
    color: #e8e4df !important;
}

body.dark-mode .choose-us-page .mud-expansion-panel .mud-expand-panel-content {
    color: #8b9ab5 !important;
}

body.dark-mode .choose-us-page .mud-alert {
    background: rgba(42, 157, 143, 0.1) !important;
    color: #e8e4df !important;
}

/* ============================================
   DARK MODE — Home Page Menu / Header
   ============================================ */
body.dark-mode .home-header {
    background: #141a24;
}

body.dark-mode .home-menu {
    background: #1a2233;
}

body.dark-mode .home-menu-item {
    background: rgba(26, 34, 51, 0.75);
    color: #e8e4df;
    border-color: rgba(255, 255, 255, 0.08);
}

body.dark-mode .home-menu-item:hover {
    background: rgba(26, 34, 51, 0.85) !important;
}

body.dark-mode .home-menu-item:active {
    background: rgba(26, 34, 51, 0.95) !important;
}

body.dark-mode .home-menu-item:focus {
    outline-color: rgba(42, 157, 143, 0.5);
}

body.dark-mode .home-menu-section-header {
    color: rgba(255, 255, 255, 0.50);
}

body.dark-mode .home-menu-item-content,
body.dark-mode .home-menu-item-content * {
    color: #e8e4df !important;
}

/* ============================================
   DARK MODE — Reconnect Modal
   ============================================ */
body.dark-mode .reconnect-screen {
    background: transparent;
    color: #e8e4df;
}

body.dark-mode .reconnect-brand-title {
    color: #e8e4df;
}

body.dark-mode .reconnect-brand-subtitle,
body.dark-mode .reconnect-phase-desc,
body.dark-mode .reconnect-progress-title {
    color: #8b9ab5;
}

body.dark-mode .reconnect-phase-label {
    color: #e8e4df;
}

body.dark-mode .reconnect-progress-bar {
    background: rgba(255, 255, 255, 0.08);
}

body.dark-mode .reconnect-card {
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(8px);
}

body.dark-mode .reconnect-card-label,
body.dark-mode .reconnect-timeline-title,
body.dark-mode .reconnect-timeline-step-desc {
    color: #8b9ab5;
}

body.dark-mode .reconnect-card-value,
body.dark-mode .reconnect-timeline-step-label {
    color: #e8e4df;
}

body.dark-mode .reconnect-timeline-step-icon {
    background: rgba(255, 255, 255, 0.06);
}

body.dark-mode .reconnect-footer {
    border-top-color: rgba(255, 255, 255, 0.06);
}

body.dark-mode .reconnect-fallback {
    background: rgba(26, 34, 51, 0.7);
    border-color: rgba(255, 255, 255, 0.08);
}

body.dark-mode .reconnect-fallback-message {
    color: #e8e4df;
}

/* ============================================
   DARK MODE — MudBlazor Component Overrides
   ============================================ */
body.dark-mode .mud-card {
    background-color: #1a2233 !important;
    color: #e8e4df !important;
}

body.dark-mode .mud-paper {
    background-color: #1a2233 !important;
    color: #e8e4df !important;
}

body.dark-mode .mud-table {
    background-color: #1a2233 !important;
    color: #e8e4df !important;
}

body.dark-mode .mud-table .mud-table-head .mud-table-cell {
    color: #8b9ab5 !important;
    background-color: #1a2233 !important;
}

body.dark-mode .mud-table .mud-table-body .mud-table-cell {
    color: #e8e4df !important;
    border-bottom-color: #283040 !important;
}

body.dark-mode .mud-table .mud-table-row:hover {
    background-color: rgba(42, 157, 143, 0.05) !important;
}

body.dark-mode .mud-dialog .mud-dialog-content,
body.dark-mode .mud-dialog .mud-dialog-title,
body.dark-mode .mud-dialog .mud-dialog-actions {
    background-color: #1a2233 !important;
    color: #e8e4df !important;
}

body.dark-mode .mud-input,
body.dark-mode .mud-input-control .mud-input-slot {
    color: #e8e4df !important;
}

body.dark-mode .mud-input-label {
    color: #8b9ab5 !important;
}

body.dark-mode .mud-input-underline::before,
body.dark-mode .mud-input-outlined .mud-input-outlined-border {
    border-color: #283040 !important;
}

body.dark-mode .mud-select .mud-input {
    color: #e8e4df !important;
}

body.dark-mode .mud-popover {
    background-color: #1a2233 !important;
    color: #e8e4df !important;
}

body.dark-mode .mud-list-item {
    color: #e8e4df !important;
}

body.dark-mode .mud-list-item:hover {
    background-color: rgba(42, 157, 143, 0.08) !important;
}

body.dark-mode .mud-divider {
    border-color: #283040 !important;
}

body.dark-mode .mud-chip {
    background-color: rgba(42, 157, 143, 0.15) !important;
    color: #2a9d8f !important;
}

body.dark-mode .mud-expansion-panel {
    background-color: #1a2233 !important;
    color: #e8e4df !important;
}

body.dark-mode .mud-expansion-panel .mud-expand-panel-header {
    color: #e8e4df !important;
}

body.dark-mode .mud-snackbar {
    background-color: #1a2233 !important;
    color: #e8e4df !important;
}

/* ============================================
   DARK MODE — General page wrapper overrides
   ============================================ */
body.dark-mode .page-wrapper {
    background-color: #141a24;
}

body.dark-mode .page-container {
    background-color: #141a24;
}

/* Landing page / hero bg pattern for dark mode */
body.dark-mode .hero-bg-pattern {
    background:
        radial-gradient(800px 600px at 20% 30%, hsla(168, 55%, 42%, 0.08), transparent 60%),
        radial-gradient(800px 600px at 80% 20%, hsla(220, 40%, 60%, 0.06), transparent 60%);
}

body.dark-mode .auth-page-bg {
    background:
        radial-gradient(800px 600px at 20% 30%, hsla(168, 55%, 42%, 0.08), transparent 60%),
        radial-gradient(800px 600px at 80% 20%, hsla(220, 40%, 60%, 0.06), transparent 60%);
}

/* Feature card hover shadow in dark mode */
body.dark-mode .feature-card:hover,
body.dark-mode .pricing-card:hover {
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
}

/* CTA section dark mode — use teal instead of charcoal */
body.dark-mode .cta-section {
    background: #1a2233;
}

body.dark-mode .cta-subtitle {
    color: #8b9ab5;
}

/* ============================================
   DARK MODE — Terms of Service / Policy pages
   ============================================ */
body.dark-mode .tos-content,
body.dark-mode .policy-content {
    color: #e8e4df;
}

body.dark-mode .tos-content h1,
body.dark-mode .tos-content h2,
body.dark-mode .tos-content h3,
body.dark-mode .policy-content h1,
body.dark-mode .policy-content h2,
body.dark-mode .policy-content h3 {
    color: #e8e4df;
}

/* ============================================
   DARK MODE — Contact page
   ============================================ */
body.dark-mode .auth-page--contact {
    background: #141a24;
}

/* ============================================
   Agent Chat Widget — Restyle
   Warm neutrals, teal accent, consistent with Unearthed UI
   ============================================ */

/* ── Drawer (CreateAssetsDrawer) ──────────── */
.create-assets-drawer .mud-drawer-content {
    border-radius: 16px 0 0 16px;
    box-shadow: -4px 0 24px rgba(0, 0, 0, 0.10);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

/* ── Header ───────────────────────────────── */
.agent-chat-header {
    background: var(--primary, #1e293b);
    color: var(--primary-foreground, #ffffff);
    border-bottom: none !important;
}

.agent-chat-header .mud-typography {
    color: var(--primary-foreground, #ffffff) !important;
}

.agent-chat-header .mud-icon-button {
    color: var(--primary-foreground, #ffffff) !important;
}

.agent-chat-header .mud-toggle-group {
    background: rgba(255, 255, 255, 0.12);
    border-radius: 8px;
}

.agent-chat-header .mud-toggle-item.mud-toggle-item-selected {
    background: var(--accent, #2a9d8f) !important;
    color: #ffffff !important;
}

/* ── Messages Area ────────────────────────── */
.agent-chat-messages {
    background: var(--background, #f7f5f2);
}

.agent-chat-messages::-webkit-scrollbar {
    width: 6px;
}

.agent-chat-messages::-webkit-scrollbar-track {
    background: transparent;
}

.agent-chat-messages::-webkit-scrollbar-thumb {
    background: var(--border, #e0dcd6);
    border-radius: 3px;
}

.agent-chat-messages::-webkit-scrollbar-thumb:hover {
    background: var(--muted-foreground, #64748b);
}

/* ── User Bubbles ─────────────────────────── */
.agent-chat-bubble--user {
    background: var(--accent, #2a9d8f) !important;
    color: #ffffff !important;
    border-radius: 12px 12px 4px 12px !important;
}

.agent-chat-bubble--user .mud-typography {
    color: #ffffff !important;
}

/* ── Assistant Bubbles ────────────────────── */
.agent-chat-bubble--assistant {
    background: var(--card, #fdfcfb) !important;
    border: 1px solid var(--border, #e0dcd6) !important;
    border-radius: 12px 12px 12px 4px !important;
    color: inherit;
}

/* ── Streaming Indicator ──────────────────── */
.agent-chat-streaming {
    opacity: 0.85;
}

/* ── Input Bar ────────────────────────────── */
.agent-chat-input-bar {
    background: var(--card, #fdfcfb) !important;
    border-top: 1px solid var(--border, #e0dcd6) !important;
    box-shadow: none !important;
}

.agent-chat-textfield .mud-input-outlined-border {
    border-color: var(--border, #e0dcd6) !important;
    border-radius: 8px !important;
}

.agent-chat-textfield .mud-input.mud-input-outlined:hover .mud-input-outlined-border {
    border-color: var(--accent, #2a9d8f) !important;
}

.agent-chat-textfield .mud-input.mud-input-outlined.mud-focused .mud-input-outlined-border {
    border-color: var(--accent, #2a9d8f) !important;
    border-width: 2px;
}

/* ── Send Button ──────────────────────────── */
.agent-chat-send-btn {
    background: var(--accent, #2a9d8f) !important;
    color: #ffffff !important;
    border-radius: 50% !important;
    width: 40px;
    height: 40px;
    min-width: 40px;
    transition: opacity 0.2s ease;
}

.agent-chat-send-btn:hover {
    opacity: 0.85;
}

.agent-chat-send-btn.mud-disabled {
    background: var(--muted, #e2e0dd) !important;
    color: var(--muted-foreground, #64748b) !important;
    opacity: 0.6;
}

/* ── Onboarding Banner ──────────────────── */
.onboarding-banner {
    background: var(--accent, #2a9d8f);
    color: #ffffff;
    border-radius: 0;
}
.onboarding-banner .mud-link {
    color: #ffffff !important;
    font-weight: 600;
}
.onboarding-banner .mud-icon-button {
    color: #ffffff !important;
}
body.dark-mode .onboarding-banner {
    background: var(--accent, #2a9d8f);
    color: #ffffff;
}

/* ── Onboarding Chat Wrapper ──────────────── */
.agent-chat-wrapper {
    border-radius: 16px !important;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.08) !important;
    overflow: hidden;
}

/* ============================================
   Agent Chat Widget — Dark Mode Overrides
   ============================================ */

body.dark-mode .agent-chat-header {
    background: var(--primary, #e8e4df);
    color: var(--primary-foreground, #141a24);
}

body.dark-mode .agent-chat-header .mud-typography {
    color: var(--primary-foreground, #141a24) !important;
}

body.dark-mode .agent-chat-header .mud-icon-button {
    color: var(--primary-foreground, #141a24) !important;
}

body.dark-mode .agent-chat-header .mud-toggle-group {
    background: rgba(0, 0, 0, 0.15);
}

body.dark-mode .agent-chat-messages {
    background: var(--background, #141a24);
}

body.dark-mode .agent-chat-messages::-webkit-scrollbar-thumb {
    background: var(--border, #283040);
}

body.dark-mode .agent-chat-bubble--user {
    background: var(--accent, #2a9d8f) !important;
    color: #ffffff !important;
}

body.dark-mode .agent-chat-bubble--assistant {
    background: var(--card, #1a2233) !important;
    border-color: var(--border, #283040) !important;
    color: var(--card-foreground, #e8e4df) !important;
}

body.dark-mode .agent-chat-bubble--assistant .mud-typography {
    color: var(--card-foreground, #e8e4df) !important;
}

body.dark-mode .agent-chat-input-bar {
    background: var(--card, #1a2233) !important;
    border-top-color: var(--border, #283040) !important;
}

body.dark-mode .agent-chat-textfield .mud-input-outlined-border {
    border-color: var(--border, #283040) !important;
}

body.dark-mode .agent-chat-send-btn.mud-disabled {
    background: var(--muted, #283040) !important;
    color: var(--muted-foreground, #8b9ab5) !important;
}

body.dark-mode .agent-chat-wrapper {
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.25) !important;
}

body.dark-mode .create-assets-drawer .mud-drawer-content {
    box-shadow: -4px 0 24px rgba(0, 0, 0, 0.30);
}


/* ============================================================
   BILLING PAGE — Reference Theme
   Scoped to .billing-* prefix; does not affect appbar/sidebar
   ============================================================ */

/* Page container */
.billing-page-container {
    max-width: 900px;
    margin: 0 auto;
    padding: 24px 16px 64px;
}

/* Page heading block */
.billing-page-header {
    margin-bottom: 32px;
}

.billing-page-title {
    font-size: 1.5rem;
    font-weight: 600;
    line-height: 1.25;
    color: var(--foreground, #1e293b);
    margin: 0 0 4px;
}

.billing-page-subtitle {
    font-size: 0.875rem;
    color: var(--muted-foreground, #64748b);
    margin: 0;
}

/* ── Section label (all caps, tracked) ─────────────── */
.billing-section-label {
    font-size: 0.75rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--muted-foreground, #64748b);
    display: block;
    margin-bottom: 4px;
}

/* ── Card base ──────────────────────────────────────── */
.billing-card {
    background: var(--card, #fdfcfb) !important;
    border: 1px solid var(--border, #e0dcd6) !important;
    border-radius: var(--radius, 0.625rem) !important;
    box-shadow: none !important;
    padding: 0 !important;
}

.billing-card-inner {
    padding: 20px 24px;
}

/* ── 2-column plan grid ─────────────────────────────── */
.billing-plan-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

@media (max-width: 599px) {
    .billing-plan-grid {
        grid-template-columns: 1fr;
    }
}

/* ── Top-row: label + optional action ──────────────── */
.billing-section-toprow {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
}

.billing-section-desc {
    margin-bottom: 16px !important;
    display: block;
}

/* Upgrade button */
.billing-upgrade-btn {
    font-size: 0.75rem !important;
    height: 28px !important;
    min-width: 72px !important;
    padding: 0 10px !important;
    border-color: var(--border, #e0dcd6) !important;
    color: var(--foreground, #1e293b) !important;
}

/* ── Plan name row ──────────────────────────────────── */
.billing-plan-name-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 16px;
}

.billing-plan-name {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--foreground, #1e293b);
    line-height: 1.2;
}

/* ── Metadata icon-grid ─────────────────────────────── */
.billing-meta-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.billing-meta-item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
}

.billing-meta-icon-box {
    width: 32px;
    height: 32px;
    min-width: 32px;
    border-radius: 6px;
    background-color: var(--secondary, #ece8e1);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.billing-meta-icon {
    color: var(--muted-foreground, #64748b) !important;
    font-size: 1rem !important;
}

.billing-meta-label {
    font-size: 0.75rem;
    color: var(--muted-foreground, #64748b);
    line-height: 1.2;
    margin-bottom: 1px;
}

.billing-meta-value {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--foreground, #1e293b);
    line-height: 1.3;
}

/* ── Usage card specifics ───────────────────────────── */
.billing-usage-icon-box {
    width: 28px;
    height: 28px;
    min-width: 28px;
    border-radius: 6px;
    background-color: var(--accent, #2a9d8f);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.billing-usage-count-row {
    display: flex;
    align-items: baseline;
    gap: 6px;
    margin-bottom: 12px;
}

.billing-usage-count {
    font-size: 1.875rem;
    font-weight: 600;
    color: var(--foreground, #1e293b);
    line-height: 1;
}

.billing-usage-limit {
    font-size: 1rem;
    color: var(--muted-foreground, #64748b);
    font-weight: 400;
}

.billing-usage-bar {
    margin-top: 0 !important;
    margin-bottom: 8px !important;
    border-radius: 999px !important;
}

.billing-usage-remaining {
    font-size: 0.8125rem;
    color: var(--muted-foreground, #64748b);
    margin-top: 4px;
}

/* ── Expansion panels inside billing cards ──────────── */
.billing-expansion-panels .mud-expansion-panel {
    border: 1px solid var(--border, #e0dcd6) !important;
    border-radius: var(--radius, 0.625rem) !important;
    box-shadow: none !important;
    background: var(--card, #fdfcfb) !important;
}

.billing-expansion-panels .mud-expansion-panel::before {
    display: none !important;
}

/* ── Payment Methods ────────────────────────────────── */
.billing-alert {
    margin-bottom: 12px !important;
}

.billing-action-btn {
    width: 100% !important;
    margin-bottom: 8px !important;
}

.billing-action-btn--primary.mud-button-filled {
    background-color: var(--accent, #2a9d8f) !important;
    color: #ffffff !important;
}

.billing-action-btn--primary.mud-button-filled:hover {
    background-color: hsl(168, 55%, 36%) !important;
}

.billing-security-note {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-top: 8px;
}

.billing-security-icon {
    color: var(--muted-foreground, #64748b) !important;
    font-size: 0.875rem !important;
    flex-shrink: 0;
}

/* ── Combined History Card + MudTabs ────────────────── */
.billing-history-card .billing-card-inner {
    padding-bottom: 0;
}

.billing-history-tabs .mud-tabs-header {
    border-bottom: 1px solid var(--border, #e0dcd6) !important;
    background: transparent !important;
    box-shadow: none !important;
    padding: 0 !important;
}

.billing-history-tabs .mud-tab {
    font-size: 0.8125rem !important;
    font-weight: 500 !important;
    color: var(--muted-foreground, #64748b) !important;
    text-transform: none !important;
    border-radius: 0 !important;
    min-height: 40px !important;
    padding: 0 16px !important;
    border-bottom: 2px solid transparent !important;
    transition: color 0.15s, border-color 0.15s;
}

.billing-history-tabs .mud-tab.mud-tab-active,
.billing-history-tabs .mud-tab[aria-selected="true"] {
    color: var(--accent, #2a9d8f) !important;
    border-bottom-color: var(--accent, #2a9d8f) !important;
    font-weight: 600 !important;
}

.billing-history-tabs .mud-tab-slider {
    display: none !important;
}

.billing-history-panel {
    padding: 16px 0 20px !important;
}

/* ── Tables inside billing ──────────────────────────── */
.billing-table {
    box-shadow: none !important;
    border-radius: 0 !important;
}

.billing-table .mud-table-head .mud-table-cell {
    font-size: 0.75rem !important;
    font-weight: 500 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    color: var(--muted-foreground, #64748b) !important;
    border-bottom: 1px solid var(--border, #e0dcd6) !important;
    background: transparent !important;
    padding-top: 8px !important;
    padding-bottom: 8px !important;
}

.billing-table .mud-table-body .mud-table-cell {
    font-size: 0.875rem !important;
    border-bottom: 1px solid var(--border, #e0dcd6) !important;
    color: var(--foreground, #1e293b) !important;
}

.billing-table .mud-table-body .mud-table-row:last-child .mud-table-cell {
    border-bottom: none !important;
}

/* ── Empty state ────────────────────────────────────── */
.billing-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40px 16px;
    text-align: center;
}

.billing-empty-icon {
    font-size: 2.5rem !important;
    width: 40px !important;
    height: 40px !important;
    opacity: 0.4;
    color: var(--muted-foreground, #64748b) !important;
    margin-bottom: 12px;
}

.billing-empty-heading {
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--foreground, #1e293b);
    margin-bottom: 4px;
}

.billing-empty-desc {
    font-size: 0.8125rem;
    color: var(--muted-foreground, #64748b);
    max-width: 280px;
}

/* ── Footer ─────────────────────────────────────────── */
.billing-footer {
    margin-top: 32px;
    text-align: center;
}

.billing-footer-text {
    font-size: 0.8125rem;
    color: var(--muted-foreground, #64748b);
}

.billing-footer-link {
    color: var(--accent, #2a9d8f) !important;
    font-weight: 500;
    text-decoration: none;
}

.billing-footer-link:hover {
    text-decoration: underline;
}

/* ── Dark Mode Overrides ────────────────────────────── */
body.dark-mode .billing-page-title {
    color: #e8e4df;
}

body.dark-mode .billing-page-subtitle,
body.dark-mode .billing-section-label,
body.dark-mode .billing-meta-label,
body.dark-mode .billing-usage-remaining,
body.dark-mode .billing-usage-limit,
body.dark-mode .billing-footer-text,
body.dark-mode .billing-empty-desc {
    color: #8b9ab5;
}

body.dark-mode .billing-card {
    background: #1a2233 !important;
    border-color: #283040 !important;
}

body.dark-mode .billing-plan-name,
body.dark-mode .billing-meta-value,
body.dark-mode .billing-usage-count,
body.dark-mode .billing-empty-heading {
    color: #e8e4df;
}

body.dark-mode .billing-meta-icon-box {
    background-color: #1e293b;
}

body.dark-mode .billing-meta-icon {
    color: #8b9ab5 !important;
}

body.dark-mode .billing-upgrade-btn {
    border-color: #283040 !important;
    color: #e8e4df !important;
}

body.dark-mode .billing-expansion-panels .mud-expansion-panel {
    border-color: #283040 !important;
    background: #1a2233 !important;
}

body.dark-mode .billing-history-tabs .mud-tabs-header {
    border-bottom-color: #283040 !important;
}

body.dark-mode .billing-history-tabs .mud-tab {
    color: #8b9ab5 !important;
}

body.dark-mode .billing-history-tabs .mud-tab.mud-tab-active,
body.dark-mode .billing-history-tabs .mud-tab[aria-selected="true"] {
    color: var(--accent, #2a9d8f) !important;
    border-bottom-color: var(--accent, #2a9d8f) !important;
}

body.dark-mode .billing-table .mud-table-head .mud-table-cell {
    color: #8b9ab5 !important;
    border-bottom-color: #283040 !important;
    background: transparent !important;
}

body.dark-mode .billing-table .mud-table-body .mud-table-cell {
    color: #e8e4df !important;
    border-bottom-color: #283040 !important;
}

body.dark-mode .billing-table .mud-table-body .mud-table-row:last-child .mud-table-cell {
    border-bottom: none !important;
}


/* ============================================================
   PLATFORM ADMIN DASHBOARD — Reference Theme
   Scoped to .platform-* prefix; does not affect appbar/sidebar
   ============================================================ */

/* ── Page heading ──────────────────────────────────────────── */
.platform-page-header {
    margin-bottom: 28px;
}

.platform-page-title {
    font-size: 1.5rem;
    font-weight: 600;
    line-height: 1.25;
    color: var(--foreground, #1e293b);
    margin: 0 0 4px;
}

.platform-page-subtitle {
    font-size: 0.875rem;
    color: var(--muted-foreground, #64748b);
    margin: 0;
}

/* ── Stat card grid ────────────────────────────────────────── */
.platform-stat-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

@media (min-width: 1024px) {
    .platform-stat-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

/* ── Stat card ─────────────────────────────────────────────── */
.platform-stat-card {
    background: #ffffff !important;
    border: 1px solid #ccc6bc !important;
    border-radius: var(--radius, 0.625rem) !important;
    box-shadow: none !important;
    display: flex;
    flex-direction: column;
}

.platform-stat-card-top {
    padding: 16px 20px 14px;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    flex: 1;
    gap: 12px;
}

.platform-stat-label {
    font-size: 11px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--muted-foreground, #64748b);
    margin-bottom: 4px;
}

.platform-stat-value {
    font-size: 1.75rem;
    font-weight: 600;
    color: var(--foreground, #1e293b);
    line-height: 1.1;
    margin-bottom: 2px;
}

@media (min-width: 1024px) {
    .platform-stat-value {
        font-size: 2rem;
    }
}

.platform-stat-subtext {
    font-size: 0.75rem;
    line-height: 1.3;
}

.platform-stat-subtext--success {
    color: var(--success, #2a9d8f);
}

.platform-stat-subtext--warning {
    color: var(--warning-foreground, #92652a);
}

.platform-stat-subtext--destructive {
    color: var(--destructive, #e76f51);
}

.platform-stat-subtext--muted {
    color: var(--muted-foreground, #64748b);
}

/* Icon box: default (secondary bg) */
.platform-stat-icon-box {
    width: 36px;
    height: 36px;
    min-width: 36px;
    border-radius: 6px;
    background: var(--secondary, #ece8e1);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

/* Icon box: accent tint */
.platform-stat-icon-box--accent {
    background: hsl(168, 55%, 42%, 0.12);
}

/* Icon box: warning tint */
.platform-stat-icon-box--warning {
    background: hsl(37, 80%, 58%, 0.15);
}

/* ── Stat card footer link ─────────────────────────────────── */
.platform-stat-footer {
    border-top: 1px solid #ccc6bc;
}

.platform-stat-footer a {
    display: block;
    width: 100%;
    padding: 8px 20px;
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--foreground, #1e293b);
    text-decoration: none;
    text-align: center;
    transition: background 0.15s;
    box-sizing: border-box;
}

.platform-stat-footer a:hover {
    background: var(--secondary, #ece8e1);
    text-decoration: none;
}

/* ── Activity card ─────────────────────────────────────────── */
.platform-activity-card {
    background: #ffffff !important;
    border: 1px solid #ccc6bc !important;
    border-radius: var(--radius, 0.625rem) !important;
    box-shadow: none !important;
    margin-top: 24px;
    overflow: hidden;
}

.platform-activity-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    flex-wrap: wrap;
    gap: 12px;
    border-bottom: 1px solid #ccc6bc;
}

.platform-activity-title {
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--foreground, #1e293b);
    margin: 0;
}

.platform-activity-subtitle {
    font-size: 0.75rem;
    color: var(--muted-foreground, #64748b);
    margin-top: 1px;
}

/* ── Search input ──────────────────────────────────────────── */
.platform-search-wrapper {
    position: relative;
    display: inline-block;
}

.platform-search-icon {
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--muted-foreground, #64748b);
    pointer-events: none;
    font-size: 1rem !important;
    width: 16px !important;
    height: 16px !important;
}

.platform-search-input {
    padding: 6px 12px 6px 34px !important;
    font-size: 0.8125rem !important;
    border: 1px solid var(--border, #e0dcd6) !important;
    border-radius: var(--radius, 0.625rem) !important;
    background: var(--card, #fdfcfb) !important;
    color: var(--foreground, #1e293b) !important;
    width: 220px;
    outline: none;
    transition: border-color 0.15s, box-shadow 0.15s;
    font-family: inherit;
}

.platform-search-input:focus {
    border-color: var(--accent, #2a9d8f) !important;
    box-shadow: 0 0 0 1px var(--accent, #2a9d8f) !important;
}

.platform-search-input::placeholder {
    color: var(--muted-foreground, #64748b);
}

/* ── Platform table ────────────────────────────────────────── */
.platform-table-wrapper {
    overflow-x: auto;
}

.platform-table {
    width: 100%;
    border-collapse: collapse;
}

.platform-table th {
    padding: 8px 16px;
    text-align: left;
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--muted-foreground, #64748b);
    border-bottom: 1px solid #ccc6bc;
    white-space: nowrap;
    background: transparent;
}

.platform-table td {
    padding: 10px 16px;
    font-size: 0.875rem;
    color: var(--foreground, #1e293b);
    border-bottom: 1px solid #ccc6bc;
}

.platform-table tbody tr:last-child td {
    border-bottom: none;
}

.platform-table tbody tr:hover td {
    background: hsl(30, 12%, 92%, 0.4);
}

/* Sort button inside <th> */
.platform-sort-btn {
    background: none;
    border: none;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--muted-foreground, #64748b);
    padding: 0;
    white-space: nowrap;
    font-family: inherit;
}

.platform-sort-btn:hover {
    color: var(--foreground, #1e293b);
}

/* ── Status badges ─────────────────────────────────────────── */
.platform-status-badge {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: 500;
    border: 1px solid;
    white-space: nowrap;
}

.platform-status--active {
    background: hsl(168, 55%, 42%, 0.15);
    color: var(--success, #2a9d8f);
    border-color: hsl(168, 55%, 42%, 0.25);
}

.platform-status--suspended {
    background: hsl(0, 84%, 60%, 0.15);
    color: var(--destructive, #e76f51);
    border-color: hsl(0, 84%, 60%, 0.25);
}

.platform-status--cancelled {
    background: hsl(0, 84%, 60%, 0.15);
    color: var(--destructive, #e76f51);
    border-color: hsl(0, 84%, 60%, 0.25);
}

.platform-status--default {
    background: var(--secondary, #ece8e1);
    color: var(--muted-foreground, #64748b);
    border-color: var(--border, #e0dcd6);
}

.platform-status--pending {
    background: hsl(38, 92%, 50%, 0.15);
    color: hsl(38, 92%, 40%);
    border-color: hsl(38, 92%, 50%, 0.25);
}

.platform-status--refunded {
    background: hsl(207, 60%, 50%, 0.15);
    color: hsl(207, 60%, 40%);
    border-color: hsl(207, 60%, 50%, 0.25);
}

.platform-status--trial {
    background: hsl(207, 60%, 50%, 0.15);
    color: hsl(207, 60%, 40%);
    border-color: hsl(207, 60%, 50%, 0.25);
}

.platform-status--readonly {
    background: hsl(30, 20%, 50%, 0.15);
    color: hsl(30, 20%, 38%);
    border-color: hsl(30, 20%, 50%, 0.25);
}

/* ── Payments toolbar ──────────────────────────────────────── */
.payments-toolbar {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 16px 20px;
    border-bottom: 1px solid var(--border, #e0dcd6);
}

.payments-search-row {
    display: flex;
    align-items: center;
    gap: 12px;
}

.payments-filter-row {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.payments-count-chip {
    white-space: nowrap;
    flex-shrink: 0;
}

@media (min-width: 768px) {
    .payments-toolbar {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        flex-wrap: wrap;
    }

    .payments-search-row {
        flex: 1;
        min-width: 200px;
    }

    .payments-filter-row {
        flex-wrap: nowrap;
    }
}

/* ── Mobile org cards (shown below md, hidden md+) ─────────── */
.platform-mobile-cards {
    padding: 0;
}

.platform-mobile-card {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 12px 20px;
    border-bottom: 1px solid #ccc6bc;
}

.platform-mobile-card:last-child {
    border-bottom: none;
}

.platform-mobile-card-left {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.platform-mobile-card-name {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--foreground, #1e293b);
}

.platform-mobile-card-meta {
    font-size: 0.75rem;
    color: var(--muted-foreground, #64748b);
}

/* Responsive: desktop table / mobile cards */
.platform-desktop-only {
    display: none;
}

.platform-mobile-only {
    display: block;
}

@media (min-width: 768px) {
    .platform-desktop-only {
        display: block;
    }
    .platform-mobile-only {
        display: none;
    }
}

/* ── Page footer ───────────────────────────────────────────── */
.platform-footer {
    margin-top: 32px;
    border-top: 1px solid var(--border, #e0dcd6);
    padding: 24px 0 40px;
    text-align: center;
    font-size: 0.75rem;
    color: var(--muted-foreground, #64748b);
}

/* ── Dark Mode Overrides ────────────────────────────────────── */
body.dark-mode .platform-stat-card,
body.dark-mode .platform-activity-card {
    background: #1a2233 !important;
    border-color: #283040 !important;
}

body.dark-mode .platform-page-title,
body.dark-mode .platform-stat-value,
body.dark-mode .platform-activity-title,
body.dark-mode .platform-mobile-card-name {
    color: #e8e4df;
}

body.dark-mode .platform-page-subtitle,
body.dark-mode .platform-stat-label,
body.dark-mode .platform-stat-subtext--muted,
body.dark-mode .platform-activity-subtitle,
body.dark-mode .platform-sort-btn,
body.dark-mode .platform-footer,
body.dark-mode .platform-mobile-card-meta {
    color: #8b9ab5;
}

body.dark-mode .platform-stat-icon-box {
    background: #1e293b;
}

body.dark-mode .platform-stat-footer {
    border-color: #283040;
}

body.dark-mode .platform-stat-footer a {
    color: #e8e4df;
}

body.dark-mode .platform-stat-footer a:hover {
    background: #1e293b;
}

body.dark-mode .platform-activity-header {
    border-bottom-color: #283040;
}

body.dark-mode .platform-table th {
    color: #8b9ab5;
    border-bottom-color: #283040;
}

body.dark-mode .platform-table td {
    color: #e8e4df;
    border-bottom-color: #283040;
}

body.dark-mode .platform-table tbody tr:last-child td {
    border-bottom: none;
}

body.dark-mode .platform-table tbody tr:hover td {
    background: rgba(30, 41, 59, 0.4);
}

body.dark-mode .platform-mobile-card {
    border-color: #283040;
}

body.dark-mode .platform-search-input {
    background: #1a2233 !important;
    border-color: #283040 !important;
    color: #e8e4df !important;
}

body.dark-mode .platform-search-input::placeholder {
    color: #8b9ab5;
}

body.dark-mode .platform-footer {
    border-top-color: #283040;
}

body.dark-mode .platform-status--default {
    background: #1e293b;
    border-color: #283040;
    color: #8b9ab5;
}

body.dark-mode .platform-status--pending {
    background: hsl(38, 60%, 20%);
    border-color: hsl(38, 60%, 30%);
    color: hsl(38, 80%, 65%);
}

body.dark-mode .platform-status--refunded {
    background: hsl(207, 40%, 20%);
    border-color: hsl(207, 40%, 30%);
    color: hsl(207, 60%, 65%);
}

body.dark-mode .platform-status--trial {
    background: hsl(207, 40%, 20%);
    border-color: hsl(207, 40%, 30%);
    color: hsl(207, 60%, 65%);
}

body.dark-mode .platform-status--readonly {
    background: hsl(30, 15%, 20%);
    border-color: hsl(30, 15%, 30%);
    color: hsl(30, 25%, 65%);
}

body.dark-mode .subscriptions-toolbar,
body.dark-mode .orgs-toolbar {
    border-bottom-color: #283040;
}

body.dark-mode .payments-toolbar {
    border-bottom-color: #283040;
}