/* ==========================================================================
   TRADESYNC "CINEMATIC PRODUCTIVITY" THEME
   Premium SaaS Glassmorphic Design System
   
   🔒 LOCKED THEME - November 25, 2025
   ========================================================================== */

:root {
    /* ==========================================================================
       🔒 LOCKED COLOR PALETTE - Do Not Change
       ========================================================================== */
    
    /* Primary Brand */
    --ts-blue: #2196F3;              /* TradeSync Blue - Primary accent */
    --ts-blue-dark: #1976D2;         /* Darker blue for gradients */
    --ts-blue-light: #64B5F6;        /* Lighter blue for highlights */
    
    /* Core Backgrounds */
    --deep-void: #0B0D10;            /* Deepest background - PURE BLACK */
    --glass-charcoal: #121212;       /* Glass panel base */
    
    /* ==========================================================================
       TYPOGRAPHY SYSTEM - WCAG AA Compliant (Dec 31, 2025)
       All pages MUST use these variables - NO hardcoded values
       ========================================================================== */
    
    /* Text Colors - Contrast ratios on #0B0D10 background */
    --pure-white: #FFFFFF;           /* 18:1 - Primary content, values */
    --starlight-silver: #94A3B8;     /* 5.8:1 - Labels, secondary text (PASSES AA) */
    --text-muted: #64748B;           /* 3.8:1 - Placeholders ONLY (use sparingly) */
    --text-link: #64B5F6;            /* Links - always use this for clickable text */
    
    /* Font Sizes - rem-based for accessibility */
    --font-size-xs: 0.75rem;         /* 12px - Minimum for labels */
    --font-size-sm: 0.875rem;        /* 14px - Secondary text, metadata */
    --font-size-base: 1rem;          /* 16px - Body text, values */
    --font-size-lg: 1.125rem;        /* 18px - Subheadings */
    --font-size-xl: 1.25rem;         /* 20px - Section titles */
    --font-size-2xl: 1.5rem;         /* 24px - Page subtitles */
    --font-size-3xl: 2rem;           /* 32px - Dashboard stats */
    --font-size-4xl: 2.5rem;         /* 40px - Page titles */
    
    /* Font Weights */
    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
    
    /* Status Colors */
    --electric-amber: #FFD740;
    --success-green: #4CAF50;
    --error-red: #F44336;
    
    /* ==========================================================================
       🔒 LOCKED CHARCOAL GRADIENT SYSTEM - November 25, 2025
       Use these for ALL cards, panels, and containers
       ========================================================================== */
    --charcoal-gradient: linear-gradient(135deg, rgba(45, 45, 50, 0.7) 0%, rgba(15, 15, 18, 0.9) 100%);
    --charcoal-gradient-hover: linear-gradient(135deg, rgba(50, 50, 55, 0.75) 0%, rgba(18, 18, 22, 0.95) 100%);
    
    /* Glassmorphism System */
    --glass-bg: rgba(255, 255, 255, 0.05);        /* Subtle white overlay for glass effect */
    --glass-bg-hover: rgba(255, 255, 255, 0.08); /* Hover state - slightly more opaque */
    --glass-border: rgba(255, 255, 255, 0.1);    /* Subtle 1px border */
    --glass-border-hover: rgba(33, 150, 243, 0.5); /* Blue border on hover */
    --glass-blur: 12px;                          /* Backdrop blur for glassmorphism */
    
    /* Neon Glow System */
    --neon-glow: 0 0 20px rgba(33, 150, 243, 0.5),
                 0 0 40px rgba(33, 150, 243, 0.3),
                 0 0 60px rgba(33, 150, 243, 0.2);
    --neon-glow-intense: 0 0 20px rgba(33, 150, 243, 0.7),
                         0 0 40px rgba(33, 150, 243, 0.5),
                         0 0 80px rgba(33, 150, 243, 0.3),
                         0 0 120px rgba(33, 150, 243, 0.2);
    
    /* Shadows */
    --shadow-soft: 0 4px 24px rgba(0, 0, 0, 0.4);
    --shadow-elevated: 0 8px 32px rgba(0, 0, 0, 0.5);
    
    /* Typography */
    --font-stack: 'Inter', 'Segoe UI', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial, sans-serif;
}

/* ==========================================================================
   DECORATIVE GLOW SYSTEM - Brand Ambient Effects
   Use these globally for consistent glow behavior
   ========================================================================== */

/* ═══════════════════════════════════════════════════════════════════════════
   GLOBAL STAT/SUMMARY CARD INTERACTION (Feb 10, 2026 – unified v3)
   
   ONE pattern for ALL cards: .summary-card, .stat-card, .kpi-card,
   .activity-stat-card, and any card with .neon-hover-glow.
   
   Gold standard = Quotes list page:
     1. Default  = dark glassmorphic, KEEP per-page coloured left-border
     2. Hover    = neon blue glow + lift (card does NOT change colour)
     3. Selected = stronger persistent neon blue glow
   
   Coloured left borders (per-status) are PRESERVED on all cards.
   No coloured BACKGROUNDS. No coloured HOVER glows. No coloured SELECTED glows.
   Icons inside cards MAY be coloured – hover/selected glow is ALWAYS blue.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ==========================================================================
   GLOBAL USER AVATAR INITIALS (Feb 2026)
   Use class "avatar-initials" on MudAvatar for consistent two-initial display.
   Ensures same font weight/size/centering across Scheduling, Kanban, HR, etc.
   ========================================================================== */
.avatar-initials,
.mud-avatar.avatar-initials {
    font-weight: var(--font-weight-semibold);
    letter-spacing: 0.02em;
}
/* Optional: min-width so single-char fallback still aligns with two-char avatars */
.mud-avatar.avatar-initials {
    min-width: 2ch;
    justify-content: center;
}

/* Prevent clipped/partial halos */
.neon-hover-glow {
    position: relative;
    overflow: visible;
}

/* ── GLOBAL: Enforce blue-only hover/selected glow on ALL card types ─────
   Per-page coloured border-lefts are KEPT (each page defines its own).
   Only hover glow, selected glow, and detail-page ::before bars are
   forced to blue so no page can introduce coloured halos.               */

/* Per-page ::before accent bars keep their semantic colours (same as icons).
   Only the HOVER GLOW and SELECTED GLOW are forced to blue.               */

/* Enforce blue-only hover glow on activity-stat-cards (no coloured halos) */
.activity-stat-card:hover {
    box-shadow: var(--neon-glow) !important;
    border-color: rgba(33, 150, 243, 0.4) !important;
}

/* Enforce blue-only hover glow on activity-stat-card icon wraps */
.activity-stat-card:hover .stat-icon-wrap {
    box-shadow: 0 0 20px rgba(33, 150, 243, 0.5) !important;
    background: rgba(33, 150, 243, 0.25) !important;
}

/* ── 1) Hover: subtle neon blue glow + lift ────────────────────────────── */
.neon-hover-glow:hover,
.neon-hover-glow:focus-visible,
.summary-card.clickable:hover,
.summary-card.neon-hover-glow:hover,
.stat-card.clickable:hover,
.kpi-card.clickable:hover,
.activity-stat-card:hover {
    box-shadow: var(--neon-glow) !important;
    border-color: rgba(33, 150, 243, 0.4) !important;
    transform: translateY(-2px);
}

/* ── 2) Selected: stronger persistent neon blue glow ───────────────────── */
.summary-card.selected,
.stat-card.selected,
.kpi-card.selected,
.activity-stat-card.selected {
    box-shadow: var(--neon-glow-intense) !important;
    border-color: rgba(33, 150, 243, 0.6) !important;
}

/* ── 3) Selected + hover: keep selected glow, no extra lift ────────────── */
.summary-card.selected:hover,
.summary-card.selected:focus-visible,
.stat-card.selected:hover,
.stat-card.selected:focus-visible,
.kpi-card.selected:hover,
.kpi-card.selected:focus-visible,
.activity-stat-card.selected:hover,
.activity-stat-card.selected:focus-visible {
    box-shadow: var(--neon-glow-intense) !important;
    border-color: rgba(33, 150, 243, 0.6) !important;
    transform: none;
}

/* 2b) Persistent neon glow (use sparingly, e.g., dashboard hero card) */
.neon-persist-glow {
    box-shadow: var(--neon-glow);
    border-color: rgba(33, 150, 243, 0.30);
    position: relative;
    overflow: visible;
}

/* ==========================================================================
   GLOBAL STYLES
   ========================================================================== */

html, body {
    font-family: var(--font-stack);
    font-weight: 300;                            /* Lighter font weight for elegance */
    background: var(--deep-void);
    color: var(--pure-white);
    min-height: 100vh;
    margin: 0;
    /* Body scroll enabled - no overflow: hidden */
}

/* Premium Background - Charcoal to Midnight Blue Gradient */
.content-scroll-area {
    background: 
        linear-gradient(135deg, var(--glass-charcoal) 0%, var(--deep-void) 50%, var(--glass-charcoal) 100%),
        radial-gradient(ellipse at 20% 0%, rgba(33, 150, 243, 0.05) 0%, transparent 50%),
        radial-gradient(ellipse at 80% 100%, rgba(33, 150, 243, 0.05) 0%, transparent 40%);
}

/* Links */
a { color: var(--ts-blue); text-decoration: none; transition: all 0.2s ease; }
a:hover { color: var(--ts-blue-light); }

/* ==========================================================================
   PAGE HERO - Premium Title Section (Gold Standard from Data Import)
   ========================================================================== */

/* Page hero container - use at top of every page */
.page-hero {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    padding: 0 0 20px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    margin-bottom: 24px;
}

.page-hero-left {
    display: flex;
    flex-direction: column;
}

/* Breadcrumb navigation */
.page-breadcrumb {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--ts-blue);
    font-size: 0.85rem;
    margin-bottom: 8px;
}

.page-breadcrumb a,
.page-breadcrumb .breadcrumb-link {
    color: var(--ts-blue);
    cursor: pointer;
    text-decoration: none;
}

.page-breadcrumb a:hover,
.page-breadcrumb .breadcrumb-link:hover {
    text-decoration: underline;
}

.page-breadcrumb span:not(.breadcrumb-link) {
    color: var(--starlight-silver);
}

/* Main page title with blue gradient - Large elegant style */
.page-title {
    font-size: 2.5rem;
    font-weight: 300;
    color: var(--pure-white);
    margin: 0;
    letter-spacing: -0.5px;
}

/* Blue-to-cyan gradient text - the signature look */
.title-gradient {
    background: linear-gradient(135deg, #2196F3 0%, #00BCD4 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Alternative: Blue-to-purple gradient */
.title-gradient-purple {
    background: linear-gradient(135deg, #2196F3 0%, #9C27B0 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Page subtitle */
.page-subtitle {
    color: var(--starlight-silver);
    font-size: 0.95rem;
    margin: 10px 0 0 0;
}

/* Action buttons container (top right) */
.page-hero-actions {
    display: flex;
    align-items: center;
    gap: 16px;
}

/* Title with icon prefix */
.page-title-with-icon {
    display: flex;
    align-items: center;
    gap: 16px;
}

.page-title-icon {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, rgba(33, 150, 243, 0.3) 0%, rgba(33, 150, 243, 0.15) 100%);
    border: 1px solid rgba(33, 150, 243, 0.4);
    color: var(--ts-blue-light);
    box-shadow: 0 0 20px rgba(33, 150, 243, 0.2);
}

/* ==========================================================================
   CINEMATIC LAYOUT - Sidebar & Topbar
   ========================================================================== */

.cinematic-layout {
    display: flex;
    min-height: 100vh;
    width: 100%;
    /* Body scroll model - no overflow: hidden */
    background: linear-gradient(135deg, var(--glass-charcoal) 0%, var(--deep-void) 100%);
}

/* Glassmorphic Sidebar - Fixed position for body scroll model */
.cinematic-sidebar {
    width: 260px;
    height: 100vh;
    position: fixed;
    left: 0;
    top: 0;
    background: var(--glass-bg);
    backdrop-filter: blur(var(--glass-blur));
    -webkit-backdrop-filter: blur(var(--glass-blur));
    border-right: 1px solid var(--glass-border);
    display: flex;
    flex-direction: column;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 100;
    flex-shrink: 0;
}

.cinematic-sidebar.closed {
    width: 0;
    border: none;
    overflow: hidden;
    transform: translateX(-260px);
}

.sidebar-header {
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px 20px;
    border-bottom: 1px solid var(--glass-border);
}

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

.main-logo {
    height: 48px;
    width: auto;
    max-width: 200px;
    object-fit: contain;
}

/* Sidebar Close Button - Hidden on desktop, shown on tablet/laptop/mobile */
.sidebar-close-btn {
    display: none; /* Hidden by default on desktop */
    position: absolute;
    top: 20px;
    right: 16px;
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.6);
    cursor: pointer;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    z-index: 10;
}

.sidebar-close-btn:hover {
    background: rgba(255, 255, 255, 0.1);
    color: white;
    border-color: rgba(255, 255, 255, 0.2);
}

/* Show close button on tablet/laptop/mobile */
@media (max-width: 1400px) {
    .sidebar-close-btn {
        display: flex;
    }
    
    /* Adjust sidebar header to accommodate close button */
    .sidebar-header {
        position: relative;
    }
}

/* Sidebar Backdrop - Click to close (shown on tablet/laptop/mobile) */
.sidebar-backdrop {
    display: none; /* Hidden by default on desktop */
}

@media (max-width: 1400px) {
    .sidebar-backdrop {
        display: block;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(0, 0, 0, 0.5);
        z-index: 999;
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transition: opacity 0.3s ease, visibility 0.3s ease;
    }
    
    /* Show backdrop when sidebar is open */
    .cinematic-layout:not(.sidebar-collapsed) .sidebar-backdrop {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
    }
}

/* Nav Group Styling */
.mud-nav-group .mud-nav-link {
    padding-left: 48px !important;
}

.mud-navmenu .mud-nav-group-title {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: var(--text-muted);
    padding: 12px 16px 6px 16px;
}

/* Section divider styling */
.nav-section-label {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.4);
    padding: 16px 16px 8px 16px;
    margin-top: 8px;
}

/* AICR Module Special Styling */
.aicr-nav-group .mud-expand-panel-header {
    background: linear-gradient(135deg, rgba(33, 150, 243, 0.1) 0%, rgba(156, 39, 176, 0.1) 100%);
    border-left: 3px solid #2196F3;
}

.aicr-logo {
    width: 20px;
    height: 20px;
    margin-right: 8px;
}

.sidebar-content {
    flex: 1;
    padding: 16px 12px;
    overflow-y: auto;
    --glow-x: 50%;
    --glow-y: 50%;
    position: relative;
}

/* Global glow that follows cursor across entire sidebar */
.sidebar-content::before {
    content: '';
    position: fixed;
    left: 0;
    top: 0;
    width: 260px;
    height: 100%;
    background: radial-gradient(
        400px circle at var(--glow-x) var(--glow-y),
        rgba(33, 150, 243, 0.08) 0%,
        transparent 60%
    );
    pointer-events: none;
    z-index: 0;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.sidebar-content:hover::before {
    opacity: 1;
}

/* Glassmorphic Topbar - Sticky for body scroll model */
.cinematic-topbar {
    height: 70px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 24px;
    background: var(--glass-bg);
    backdrop-filter: blur(var(--glass-blur));
    -webkit-backdrop-filter: blur(var(--glass-blur));
    border-bottom: 1px solid var(--glass-border);
    z-index: 90;
    position: sticky;
    top: 0;
}

.topbar-left, .topbar-right {
    display: flex;
    align-items: center;
    gap: 8px;
}

.main-content-wrapper {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
    position: relative;
    margin-left: 260px; /* Offset for fixed sidebar */
    transition: margin-left 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* When sidebar is closed, remove the margin (class-based, no :has()) */
.cinematic-layout.sidebar-collapsed .main-content-wrapper {
    margin-left: 0;
}

.content-scroll-area {
    flex: 1;
    /* Body scroll model - no overflow-y: auto */
    padding: 28px;
    min-height: 0; /* Allow content to determine height */
}

/* ==========================================================================
   GLASS PANELS - The Core Component
   ========================================================================== */

/* ==========================================================================
   GLASS PANELS - LOCKED CHARCOAL GRADIENT THEME (Nov 25, 2025)
   ========================================================================== */
.glass-panel,
.stat-card,
.chart-panel,
.premium-table-card,
.cinematic-card {
    background: linear-gradient(135deg, rgba(45, 45, 50, 0.7) 0%, rgba(15, 15, 18, 0.9) 100%) !important;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-radius: 16px !important;
    box-shadow: var(--shadow-soft);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.glass-panel:hover,
.stat-card:hover,
.chart-panel:hover,
.cinematic-card:hover {
    background: linear-gradient(135deg, rgba(50, 50, 55, 0.75) 0%, rgba(18, 18, 22, 0.95) 100%) !important;
    border-color: rgba(33, 150, 243, 0.5) !important;
    box-shadow: var(--neon-glow), var(--shadow-elevated);
    transform: translateY(-2px);                 /* Subtle tactile lift */
}

/* ==========================================================================
   STAT CARDS - Dashboard KPIs
   ========================================================================== */

.stat-card {
    padding: 24px;
    display: flex;
    align-items: flex-start;
    gap: 16px;
    cursor: pointer;
    overflow: hidden;
}

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

.stat-icon.blue {
    background: linear-gradient(135deg, rgba(33, 150, 243, 0.3) 0%, rgba(33, 150, 243, 0.15) 100%);
    border: 1px solid rgba(33, 150, 243, 0.4);
    color: var(--ts-blue-light);
    box-shadow: 0 0 20px rgba(33, 150, 243, 0.2);
}

.stat-icon.green {
    background: linear-gradient(135deg, rgba(76, 175, 80, 0.3) 0%, rgba(76, 175, 80, 0.15) 100%);
    border: 1px solid rgba(76, 175, 80, 0.4);
    color: #81C784;
    box-shadow: 0 0 20px rgba(76, 175, 80, 0.2);
}

.stat-icon.amber {
    background: linear-gradient(135deg, rgba(255, 215, 64, 0.3) 0%, rgba(255, 215, 64, 0.15) 100%);
    border: 1px solid rgba(255, 215, 64, 0.4);
    color: #FFE082;
    box-shadow: 0 0 20px rgba(255, 215, 64, 0.2);
}

.stat-card:hover .stat-icon.blue { box-shadow: 0 0 30px rgba(33, 150, 243, 0.5); }
.stat-card:hover .stat-icon.green { box-shadow: 0 0 30px rgba(76, 175, 80, 0.5); }
.stat-card:hover .stat-icon.amber { box-shadow: 0 0 30px rgba(255, 215, 64, 0.5); }

.stat-content { flex: 1; }

.stat-label {
    color: var(--starlight-silver);
    display: block;
    margin-bottom: 6px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-size: 0.75rem;
    font-weight: 600;
}

.stat-value {
    color: var(--pure-white);
    font-weight: 600;
    margin-bottom: 10px;
    font-size: 2rem;
    line-height: 1;
}

.stat-trend {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.8rem;
    font-weight: 500;
}

.stat-trend.positive { color: var(--success-green); }
.stat-trend.warning { color: var(--electric-amber); }
.stat-trend.neutral { color: var(--starlight-silver); }

/* ==========================================================================
   CHART PANELS
   ========================================================================== */

.chart-panel {
    padding: 28px;
}

.chart-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 24px;
}

.chart-title {
    color: var(--pure-white);
    font-size: 1.1rem;
    font-weight: 500;
}

/* ==========================================================================
   DATA TABLES - High Density Enterprise Style
   ========================================================================== */

.premium-table-card {
    overflow: hidden;
}

.premium-table-card .mud-table-container {
    background: transparent !important;
    border: none !important;
}

.cinematic-table .mud-table-container {
    background: transparent !important;
    border: none !important;
}

.cinematic-table th {
    background: linear-gradient(135deg, rgba(33, 150, 243, 0.15) 0%, rgba(30, 41, 59, 0.6) 100%) !important;
    color: var(--pure-white) !important;
    font-weight: 600 !important;
    font-size: 0.8rem !important;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    border-bottom: 1px solid rgba(33, 150, 243, 0.2) !important;
    padding: 10px 16px !important;              /* Tighter padding for high density */
}

.cinematic-table td {
    border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
    color: rgba(255, 255, 255, 0.85) !important;
    padding: 10px 16px !important;              /* Tighter padding for high density */
    font-size: 0.85rem !important;              /* Smaller font for enterprise density */
    transition: all 0.2s ease;
}

.cinematic-table tr {
    transition: all 0.2s ease;
}

.cinematic-table tr:hover td {
    background: rgba(33, 150, 243, 0.08) !important;
}

/* Table Cell Helpers */
.client-cell { display: flex; flex-direction: column; line-height: 1.4; }
.client-name { font-weight: 500; color: var(--pure-white); font-size: 0.9rem; }
.site-name { font-size: 0.8rem; color: var(--starlight-silver); }

.engineer-cell { display: flex; align-items: center; gap: 10px; }
.engineer-avatar {
    background: rgba(33, 150, 243, 0.25) !important;
    color: var(--ts-blue-light) !important;
    font-size: 0.75rem !important;
    height: 32px !important;
    width: 32px !important;
    border: 1px solid rgba(33, 150, 243, 0.3);
}

/* Type Tag - Matches Engineer Avatar Blue */
.type-tag {
    background: rgba(33, 150, 243, 0.25);
    padding: 4px 10px;
    border-radius: 6px;
    font-size: 0.75rem;
    color: var(--ts-blue-light);
    border: 1px solid rgba(33, 150, 243, 0.3);
}

.date-cell { color: var(--starlight-silver); font-size: 0.875rem; }
.date-cell.overdue { color: var(--error-red); font-weight: 600; }

.font-mono {
    font-family: 'JetBrains Mono', 'Fira Code', monospace;
    color: var(--starlight-silver) !important;
    font-size: 0.8rem !important;
}

/* ==========================================================================
   BUTTONS - Premium with Glow
   ========================================================================== */

.btn-cinematic-primary {
    background: linear-gradient(135deg, var(--ts-blue) 0%, var(--ts-blue-dark) 100%) !important;
    color: var(--pure-white) !important;
    border: none;
    padding: 12px 28px;
    border-radius: 10px;
    font-weight: 600;
    font-size: 0.9rem;
    box-shadow: 0 4px 20px rgba(33, 150, 243, 0.4);
    transition: all 0.3s ease;
}

.btn-cinematic-primary:hover {
    transform: translateY(-2px);                 /* Subtle tactile lift */
    box-shadow: var(--neon-glow);
}

/* ==========================================================================
   SEARCH BOX - Glass Effect
   ========================================================================== */

.search-box {
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid var(--glass-border);
    border-radius: 10px;
    padding: 12px 18px;
    display: flex;
    align-items: center;
    gap: 12px;
    width: 320px;
    color: var(--starlight-silver);
    transition: all 0.3s ease;
}

.search-box:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.2);
}

.search-box:focus-within {
    background: rgba(33, 150, 243, 0.1);
    border-color: var(--glass-border-hover);
    box-shadow: var(--neon-glow);
}

.search-box input {
    background: transparent;
    border: none;
    color: var(--pure-white);
    outline: none;
    width: 100%;
    font-size: 0.9rem;
}

.search-box input::placeholder {
    color: var(--starlight-silver);
}

/* ==========================================================================
   LAYOUT HELPERS - Dashboard & List Pages
   DESIGN SYSTEM UNIFIED (Jan 29, 2026)
   premium-layout = premium-workspace, layout-header = page-hero
   ========================================================================== */

/* Page container - full height with dark background */
.premium-layout,
.premium-workspace {
    min-height: 100vh;
    background: var(--deep-void, #030305);
    display: flex;
    flex-direction: column;
    gap: 24px;
    width: 100%;
}

/* Page header - title and actions */
.layout-header,
.page-hero {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    padding: 0 0 20px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    margin-bottom: 24px;
}

/* Page title - Large elegant style (matches .page-title) */
.premium-h1 {
    font-weight: 300;
    font-size: 2.5rem;
    letter-spacing: -0.5px;
    color: var(--pure-white);
    margin: 0;
}

/* Add gradient effect to premium-h1 when used as page title */
.premium-h1.gradient,
.title-gradient {
    background: linear-gradient(135deg, #2196F3 0%, #00BCD4 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* section-panel and section-card are now identical */
.section-panel,
.section-card {
    background: linear-gradient(135deg, rgba(45, 45, 50, 0.7) 0%, rgba(15, 15, 18, 0.9) 100%);
    backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 16px;
    padding: 24px;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.4);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.section-panel:hover,
.section-card:hover {
    background: linear-gradient(135deg, rgba(50, 50, 55, 0.75) 0%, rgba(18, 18, 22, 0.95) 100%);
    border-color: rgba(33, 150, 243, 0.5);
    box-shadow: 0 0 20px rgba(33, 150, 243, 0.5), 0 0 40px rgba(33, 150, 243, 0.3), 0 0 60px rgba(33, 150, 243, 0.2), 0 8px 32px rgba(0, 0, 0, 0.5);
}

/* panel-header and section-header are now identical */
.panel-header,
.section-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 20px;
    padding-bottom: 16px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.panel-header h2,
.panel-header h3,
.section-header h2 {
    margin: 0;
    font-size: 1.1rem;
    font-weight: 500;
    color: #FFFFFF;
}

/* Feb 12, 2026: Global section-title standard — consistent card titles across all pages.
   Overrides page-level variants (.compact .section-title, etc.) so every card heading
   uses the same size, weight, and colour. */
.section-title,
h3.section-title,
.section-card .section-title,
.section-card.compact .section-title {
    font-size: 1rem !important;
    font-weight: 600 !important;
    color: #FFFFFF !important;
    margin: 0 !important;
    letter-spacing: 0.3px !important;
}

/* Feb 12, 2026: Global sidebar-title standard — consistent sidebar card headings.
   Overrides page-level .sidebar-title so every sidebar card (Quote Info, Assignees,
   Quick Actions, Notes, Tasks, Related, etc.) uses the same size as section-title. */
.sidebar-card .sidebar-title,
h4.sidebar-title {
    font-size: 1rem !important;
    font-weight: 700 !important;
    color: #FFFFFF !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    margin: 0 !important;
}

/* Sidebar info row labels — slightly larger for readability */
.sidebar-card .info-row .info-label {
    font-size: 0.85rem !important;
    color: #94A3B8 !important;
    font-weight: 500 !important;
}

.sidebar-card .info-row .info-value {
    font-size: 0.9rem !important;
    color: #FFFFFF !important;
    font-weight: 600 !important;
}

/* Section body for content */
.section-body {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* Form content container */
.form-content {
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 24px;
}

/* Helper text styling */
.helper-text {
    font-size: 12px;
    color: rgba(148, 163, 184, 0.7);
    margin: 8px 0 0 0;
}

/* ============================================================================ */

.premium-subtitle {
    color: var(--starlight-silver);
    margin: 6px 0 0 0;
    font-size: 0.95rem;
}

.header-meta {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 8px;
    color: var(--starlight-silver);
    font-size: 0.9rem;
}

.action-group {
    display: flex;
    align-items: center;
    gap: 16px;
}

/* Dashboard Grid */
.summary-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); /* Responsive grid as specified */
    gap: 24px;
}

.dashboard-grid {
    display: flex;
    flex-direction: column;
    gap: 28px;
}

.charts-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(480px, 1fr));
    gap: 24px;
}

/* ==========================================================================
   🔒 FORM INPUTS - UNIFIED PREMIUM STYLING (LOCKED Dec 18, 2025)
   All inputs across all pages MUST use this styling
   ========================================================================== */

/* --- BASE INPUT CONTAINER (Both Filled & Outlined) --- */
.mud-input-control {
    margin-bottom: 0 !important;
}

/* --- FILLED VARIANT --- */
.mud-input-filled,
.mud-input.mud-input-filled {
    background: rgba(255, 255, 255, 0.04) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 10px !important;
    transition: all 0.25s ease !important;
}

.mud-input-filled:hover,
.mud-input.mud-input-filled:hover {
    background: rgba(255, 255, 255, 0.06) !important;
    border-color: rgba(255, 255, 255, 0.15) !important;
}

.mud-input-filled.mud-input-focused,
.mud-focused .mud-input-filled,
.mud-input.mud-input-filled.mud-input-focused {
    background: rgba(33, 150, 243, 0.08) !important;
    border-color: var(--ts-blue) !important;
    box-shadow: 0 0 0 3px rgba(33, 150, 243, 0.15) !important;
}

/* Remove default filled underline */
.mud-input-filled .mud-input-underline::before,
.mud-input-filled .mud-input-underline::after {
    display: none !important;
}

/* --- OUTLINED VARIANT --- */
.mud-input-outlined,
.mud-input.mud-input-outlined,
.mud-input-outlined .mud-input-slot {
    background: rgba(255, 255, 255, 0.04) !important;
    border-radius: 10px !important;
}

.mud-input-outlined .mud-input-outlined-border {
    border-color: rgba(255, 255, 255, 0.1) !important;
    border-radius: 10px !important;
    transition: all 0.25s ease !important;
}

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

.mud-input-outlined.mud-input-focused .mud-input-outlined-border,
.mud-focused .mud-input-outlined .mud-input-outlined-border {
    border-color: var(--ts-blue) !important;
    border-width: 2px !important;
    box-shadow: 0 0 0 3px rgba(33, 150, 243, 0.15) !important;
}

/* --- LABELS - CONSISTENT ABOVE-FIELD STYLE --- */
.mud-input-label {
    color: rgba(255, 255, 255, 0.6) !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    letter-spacing: 0.3px !important;
}

/* Label when focused */
.mud-input-focused .mud-input-label,
.mud-focused .mud-input-label,
.mud-input-control.mud-input-control-focused .mud-input-label {
    color: var(--ts-blue) !important;
}

/* Shrunk/floated label - ensure visibility */
.mud-input-label.mud-input-label-animated.mud-shrink,
.mud-input-label-filled.mud-shrink,
.mud-input-label-outlined.mud-shrink {
    transform: translate(12px, -9px) scale(0.85) !important;
    background: var(--deep-void) !important;
    padding: 0 6px !important;
    color: rgba(255, 255, 255, 0.7) !important;
}

/* Label focused + shrunk */
.mud-input-focused .mud-input-label.mud-shrink,
.mud-focused .mud-input-label.mud-shrink {
    color: var(--ts-blue) !important;
}

/* --- INPUT TEXT --- */
/* Feb 2, 2026: Ensure consistent cursor (caret) color across ALL input types */
.mud-input-control input,
.mud-input-control textarea,
.mud-input-slot input,
.mud-input-slot textarea,
.mud-select-input,
textarea.mud-input-slot,
input.mud-input-slot {
    color: var(--pure-white) !important;
    font-size: 15px !important;
    caret-color: var(--pure-white) !important;
    padding-left: 14px !important;
    padding-right: 14px !important;
}

/* Explicit textarea styling for multiline fields (Lines > 1) */
.mud-input-outlined textarea,
.mud-input-filled textarea {
    caret-color: var(--pure-white) !important;
    color: var(--pure-white) !important;
    background: transparent !important;
    padding-left: 14px !important;
    padding-right: 14px !important;
    margin-left: 0 !important;
}

/* Ensure textarea container padding matches single-line inputs */
.mud-input-outlined .mud-input-slot:has(textarea),
.mud-input-filled .mud-input-slot:has(textarea) {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/* Feb 4, 2026: Fix two-tone appearance on multiline textarea fields */
/* Remove inner slot background when textarea is present - outer container handles it */
.mud-input-outlined .mud-input-slot:has(textarea),
.mud-input-control:has(textarea) .mud-input-slot {
    background: transparent !important;
}

/* Feb 4, 2026: Added textarea for multiline field consistency */
.mud-input-control input::placeholder,
.mud-input-slot input::placeholder,
.mud-input-control textarea::placeholder,
.mud-input-slot textarea::placeholder {
    color: rgba(255, 255, 255, 0.35) !important;
}

/* Feb 4, 2026: FormLabel consistency - ensure same height with/without tooltip icons */
.form-label-row {
    min-height: 24px !important;
    display: flex !important;
    align-items: center !important;
}

/* Feb 4, 2026: MudGrid side-by-side field alignment */
.mud-grid-item {
    display: flex;
    flex-direction: column;
}

/* --- SELECT DROPDOWNS --- */
.mud-select .mud-input-slot {
    background: rgba(255, 255, 255, 0.04) !important;
    border-radius: 10px !important;
}

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

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

.mud-select.mud-select-outlined.mud-input-focused .mud-input-outlined-border {
    border-color: var(--ts-blue) !important;
    box-shadow: 0 0 0 3px rgba(33, 150, 243, 0.15) !important;
}

/* Select dropdown icon */
.mud-select .mud-input-adornment svg {
    color: rgba(255, 255, 255, 0.5) !important;
}

.mud-select:hover .mud-input-adornment svg,
.mud-select.mud-input-focused .mud-input-adornment svg {
    color: var(--ts-blue) !important;
}

/* --- ADORNMENT ICONS --- */
.mud-input-adornment {
    color: rgba(255, 255, 255, 0.4) !important;
}

.mud-input-focused .mud-input-adornment,
.mud-focused .mud-input-adornment {
    color: var(--ts-blue) !important;
}

/* --- DATE PICKERS --- */
.mud-picker .mud-input-outlined-border {
    border-color: rgba(255, 255, 255, 0.1) !important;
    border-radius: 10px !important;
}

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

.mud-picker.mud-picker-open .mud-input-outlined-border {
    border-color: var(--ts-blue) !important;
    box-shadow: 0 0 0 3px rgba(33, 150, 243, 0.15) !important;
}

/* --- AUTOCOMPLETE --- */
.mud-autocomplete .mud-input-outlined-border {
    border-color: rgba(255, 255, 255, 0.1) !important;
    border-radius: 10px !important;
}

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

.mud-autocomplete.mud-input-focused .mud-input-outlined-border {
    border-color: var(--ts-blue) !important;
    box-shadow: 0 0 0 3px rgba(33, 150, 243, 0.15) !important;
}

/* --- NUMERIC FIELDS --- */
.mud-input-control-type-number .mud-input-outlined-border {
    border-color: rgba(255, 255, 255, 0.1) !important;
}

/* --- DISABLED STATE --- */
.mud-input-control.mud-disabled .mud-input-slot,
.mud-input-control.mud-disabled input {
    opacity: 0.5 !important;
    cursor: not-allowed !important;
}

/* --- ERROR STATE --- */
.mud-input-error .mud-input-outlined-border,
.mud-input-error .mud-input-filled {
    border-color: var(--error-red) !important;
}

.mud-input-error .mud-input-label {
    color: var(--error-red) !important;
}

/* --- HELPER TEXT --- */
.mud-input-helper-text {
    color: rgba(255, 255, 255, 0.5) !important;
    font-size: 12px !important;
}

.mud-input-error .mud-input-helper-text {
    color: var(--error-red) !important;
}

/* ==========================================================================
   BREADCRUMBS
   ========================================================================== */

.mud-breadcrumbs-item {
    color: var(--starlight-silver) !important;
    font-size: 0.9rem;
}

.mud-breadcrumbs-item:hover {
    color: var(--pure-white) !important;
}

/* ==========================================================================
   NAV MENU STYLING - Premium Cursor-Following Glow
   ========================================================================== */

/* ==========================================================================
   NAV GROUP - Active Module Highlighting (Jan 29, 2026)
   When a child nav link is active, highlight the parent group header
   ========================================================================== */

/* Nav group header that contains an active child - Use :has() selector */
.mud-nav-group:has(.mud-nav-link.active) > .mud-list-item {
    background: linear-gradient(90deg, rgba(33, 150, 243, 0.15) 0%, rgba(33, 150, 243, 0.05) 100%) !important;
    border-left: 3px solid var(--ts-blue) !important;
    border-radius: 0 10px 10px 0 !important;
}

/* Nav group header icon when active */
.mud-nav-group:has(.mud-nav-link.active) > .mud-list-item .mud-icon-root {
    color: var(--ts-blue-light) !important;
}

/* Nav group header text when active */
.mud-nav-group:has(.mud-nav-link.active) > .mud-list-item .mud-list-item-text {
    color: var(--pure-white) !important;
    font-weight: 600 !important;
}

/* Expanded nav group indicator - subtle glow on the entire group */
.mud-nav-group.mud-expanded:has(.mud-nav-link.active) {
    background: rgba(33, 150, 243, 0.03);
    border-radius: 12px;
    margin: 4px 0;
}

/* Fallback for browsers without :has() - use expanded state as visual cue */
.mud-nav-group.mud-expanded > .mud-list-item {
    background: rgba(255, 255, 255, 0.03) !important;
}

/* ==========================================================================
   NAV LINK STYLING
   ========================================================================== */

.mud-nav-link {
    position: relative;
    border-radius: 10px !important;
    margin: 2px 0;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    overflow: hidden;
    z-index: 1;
}

/* Nav item glow background that follows cursor */
.mud-nav-link::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(
        120px circle at var(--mouse-x, 50%) var(--mouse-y, 50%),
        rgba(33, 150, 243, 0.25) 0%,
        transparent 60%
    );
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
    border-radius: 10px;
}

.mud-nav-link:hover::before {
    opacity: 1;
}

/* Subtle border glow effect */
.mud-nav-link::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 10px;
    padding: 1px;
    background: linear-gradient(
        135deg,
        transparent 40%,
        rgba(33, 150, 243, 0.3) 50%,
        transparent 60%
    );
    background-size: 200% 200%;
    background-position: var(--mouse-x, 50%) var(--mouse-y, 50%);
    -webkit-mask: 
        linear-gradient(#fff 0 0) content-box, 
        linear-gradient(#fff 0 0);
    mask: 
        linear-gradient(#fff 0 0) content-box, 
        linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
}

.mud-nav-link:hover::after {
    opacity: 1;
}

/* Default nav link text - slightly muted for contrast with active */
.mud-nav-link .mud-nav-link-text {
    color: var(--starlight-silver) !important;
    font-weight: 400;
    transition: all 0.2s ease;
}

.mud-nav-link .mud-icon-root {
    color: var(--starlight-silver) !important;
    transition: all 0.2s ease;
}

/* Hover state - brighten but don't match active */
.mud-nav-link:hover {
    background: rgba(33, 150, 243, 0.1) !important;
    transform: translateX(4px);
}

.mud-nav-link:hover .mud-nav-link-text {
    color: var(--pure-white) !important;
}

.mud-nav-link:hover .mud-icon-root {
    color: var(--ts-blue-light) !important;
}

/* Active state with permanent glow - ENHANCED VISIBILITY (Jan 29, 2026) */
.mud-nav-link.active {
    background: linear-gradient(
        90deg,
        rgba(33, 150, 243, 0.25) 0%,
        rgba(33, 150, 243, 0.15) 50%,
        rgba(33, 150, 243, 0.08) 100%
    ) !important;
    border-left: 4px solid var(--ts-blue) !important;
    border-radius: 0 10px 10px 0 !important;
    box-shadow: 
        inset 0 0 25px rgba(33, 150, 243, 0.2),
        0 0 15px rgba(33, 150, 243, 0.15);
    transform: translateX(2px);
}

/* Active link text - make it white and bold */
.mud-nav-link.active .mud-nav-link-text {
    color: var(--pure-white) !important;
    font-weight: 600 !important;
}

/* Active link icon - make it blue */
.mud-nav-link.active .mud-icon-root {
    color: var(--ts-blue-light) !important;
}

.mud-nav-link.active::before {
    background: radial-gradient(
        120px circle at var(--mouse-x, 50%) var(--mouse-y, 50%),
        rgba(33, 150, 243, 0.35) 0%,
        transparent 60%
    );
    opacity: 0.5;
}

/* Nav Group Headers */
.mud-navmenu .mud-nav-group > .mud-collapse-wrapper > .mud-list-item-text {
    position: relative;
}

.mud-navmenu .mud-nav-group > .mud-collapse-wrapper > .mud-list-item-text::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(33, 150, 243, 0.3),
        transparent
    );
    opacity: 0;
    transition: opacity 0.3s ease;
}

.mud-navmenu .mud-nav-group:hover > .mud-collapse-wrapper > .mud-list-item-text::after {
    opacity: 1;
}

/* ==========================================================================
   CUSTOM SCROLLBAR
   ========================================================================== */

.custom-scroll::-webkit-scrollbar { width: 8px; height: 8px; }
.custom-scroll::-webkit-scrollbar-track { background: transparent; }
.custom-scroll::-webkit-scrollbar-thumb { 
    background: rgba(255, 255, 255, 0.15); 
    border-radius: 4px; 
}
.custom-scroll::-webkit-scrollbar-thumb:hover { 
    background: rgba(255, 255, 255, 0.25); 
}

/* ==========================================================================
   STATUS PILLS - Glowing Badges
   ========================================================================== */

.status-pill {
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.status-pill.active,
.status-pill.in-progress {
    background: rgba(33, 150, 243, 0.2);
    color: var(--ts-blue-light);
    border: 1px solid rgba(33, 150, 243, 0.4);
    box-shadow: 0 0 15px rgba(33, 150, 243, 0.3);
}

.status-pill.completed {
    background: rgba(76, 175, 80, 0.2);
    color: #81C784;
    border: 1px solid rgba(76, 175, 80, 0.4);
    box-shadow: 0 0 15px rgba(76, 175, 80, 0.3);
}

.status-pill.pending,
.status-pill.scheduled {
    background: rgba(255, 215, 64, 0.2);
    color: #FFE082;
    border: 1px solid rgba(255, 215, 64, 0.4);
    box-shadow: 0 0 15px rgba(255, 215, 64, 0.3);
}

/* Feb 2, 2026: Comprehensive status colors - consistent across all modules */

/* Draft - Orange/Amber */
.status-pill.draft {
    background: rgba(255, 152, 0, 0.2);
    color: #FFB74D;
    border: 1px solid rgba(255, 152, 0, 0.4);
    box-shadow: 0 0 15px rgba(255, 152, 0, 0.3);
}

/* Sent - Blue */
.status-pill.sent {
    background: rgba(33, 150, 243, 0.2);
    color: #64B5F6;
    border: 1px solid rgba(33, 150, 243, 0.4);
    box-shadow: 0 0 15px rgba(33, 150, 243, 0.3);
}

/* Review - Amber (needs attention) */
.status-pill.review {
    background: rgba(255, 193, 7, 0.2);
    color: #FFD54F;
    border: 1px solid rgba(255, 193, 7, 0.4);
    box-shadow: 0 0 15px rgba(255, 193, 7, 0.3);
}

/* Accepted, Paid, Completed - Green (success) */
.status-pill.accepted,
.status-pill.paid {
    background: rgba(76, 175, 80, 0.2);
    color: #81C784;
    border: 1px solid rgba(76, 175, 80, 0.4);
    box-shadow: 0 0 15px rgba(76, 175, 80, 0.3);
}

/* Rejected - Red */
.status-pill.rejected {
    background: rgba(244, 67, 54, 0.2);
    color: #EF9A9A;
    border: 1px solid rgba(244, 67, 54, 0.4);
    box-shadow: 0 0 15px rgba(244, 67, 54, 0.3);
}

/* Overdue - Red (warning) */
.status-pill.overdue {
    background: rgba(244, 67, 54, 0.2);
    color: #EF9A9A;
    border: 1px solid rgba(244, 67, 54, 0.4);
    box-shadow: 0 0 15px rgba(244, 67, 54, 0.3);
}

/* Cancelled, Voided, Expired, Archived - Gray */
.status-pill.cancelled,
.status-pill.voided,
.status-pill.expired,
.status-pill.archived,
.status-pill.closed {
    background: rgba(158, 158, 158, 0.2);
    color: #BDBDBD;
    border: 1px solid rgba(158, 158, 158, 0.4);
    box-shadow: 0 0 15px rgba(158, 158, 158, 0.2);
}

/* Part Paid - Amber (partial) */
.status-pill.part-paid,
.status-pill.partpaid {
    background: rgba(255, 152, 0, 0.2);
    color: #FFB74D;
    border: 1px solid rgba(255, 152, 0, 0.4);
    box-shadow: 0 0 15px rgba(255, 152, 0, 0.3);
}

/* Due - Blue */
.status-pill.due {
    background: rgba(33, 150, 243, 0.2);
    color: #64B5F6;
    border: 1px solid rgba(33, 150, 243, 0.4);
    box-shadow: 0 0 15px rgba(33, 150, 243, 0.3);
}

/* On Hold - Amber */
.status-pill.on-hold,
.status-pill.onhold {
    background: rgba(255, 152, 0, 0.2);
    color: #FFB74D;
    border: 1px solid rgba(255, 152, 0, 0.4);
    box-shadow: 0 0 15px rgba(255, 152, 0, 0.3);
}

/* ==========================================================================
   FILTER BAR - Uses Unified Input Styling Above
   ========================================================================== */

/* Filter bar layout */
.filter-bar {
    display: flex;
    gap: 16px;
    padding: 16px 24px;
    flex-wrap: wrap;
    align-items: flex-end;
}

.filter-bar .mud-input-control {
    min-width: 160px;
}

.filter-bar .search-field {
    flex: 1;
    min-width: 280px;
}

/* Force labels to float in filter bar (always show above) */
.filter-bar .mud-input-label,
.filter-bar .mud-select .mud-input-label {
    transform: translate(12px, -9px) scale(0.85) !important;
    background: var(--deep-void) !important;
    padding: 0 6px !important;
}

/* ==========================================================================
   MUD BLAZOR OVERRIDES
   ========================================================================== */

/* Ensure MudBlazor respects our theme */
.mud-theme-dark {
    --mud-palette-background: var(--deep-void) !important;
    --mud-palette-surface: var(--glass-charcoal) !important;
    --mud-palette-primary: var(--ts-blue) !important;
    --mud-palette-text-primary: var(--pure-white) !important;
    --mud-palette-text-secondary: var(--starlight-silver) !important;
}

/* ==========================================================================
   Feb 10, 2026: GLOBAL OVERLAY STYLING - Glassmorphic Gold Standard
   Covers ALL MudBlazor overlay components: Dialogs, Popovers, Menus,
   Pickers, Autocomplete dropdowns, Select dropdowns, MessageBoxes.
   This is the SINGLE SOURCE OF TRUTH - no per-page overrides needed.
   ========================================================================== */

/* --- POPOVER PANELS (Select dropdowns, Autocomplete, Menus, Pickers) --- */
.mud-popover-paper {
    background: linear-gradient(135deg, rgba(30, 35, 45, 0.95) 0%, rgba(15, 18, 25, 0.98) 100%) !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 12px !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5) !important;
    color: var(--pure-white) !important;
}

/* --- POPOVER LIST TEXT (ensure all text in dropdowns is white) --- */
.mud-popover-paper .mud-typography,
.mud-popover-paper .mud-list-item-text,
.mud-popover-paper .mud-list-item-text * {
    color: var(--pure-white) !important;
}

.mud-popover-paper .mud-list-item-text .mud-typography-body1 {
    color: var(--pure-white) !important;
}

/* --- MENU PANELS --- */
.mud-menu {
    color: var(--pure-white) !important;
}

/* --- LIST ITEMS in dropdowns/menus (hover + selected) --- */
.mud-list-item {
    border-radius: 8px !important;
    margin: 2px 4px !important;
    transition: all 0.15s ease !important;
    color: var(--pure-white) !important;
}

.mud-list-item:hover {
    background: rgba(33, 150, 243, 0.1) !important;
}

.mud-list-item.mud-selected {
    background: rgba(33, 150, 243, 0.2) !important;
}

.mud-list-item.mud-selected:hover {
    background: rgba(33, 150, 243, 0.25) !important;
}

/* --- PICKER CONTAINERS (Date/Time pickers popup panels) --- */
.mud-picker-container,
.mud-picker-paper,
.mud-picker .mud-popover-paper {
    background: linear-gradient(135deg, rgba(30, 35, 45, 0.95) 0%, rgba(15, 18, 25, 0.98) 100%) !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 12px !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5) !important;
    color: var(--pure-white) !important;
}

/* Picker header/toolbar */
.mud-picker-toolbar {
    background: rgba(33, 150, 243, 0.1) !important;
    color: var(--pure-white) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
}

.mud-picker-toolbar .mud-typography {
    color: var(--pure-white) !important;
}

/* Picker calendar/clock text */
.mud-picker-calendar-header .mud-typography,
.mud-picker-calendar-day,
.mud-picker-month,
.mud-picker-year,
.mud-picker-calendar .mud-button-label {
    color: var(--pure-white) !important;
}

/* Picker navigation buttons */
.mud-picker-nav-button-icon,
.mud-picker-calendar-header-switch .mud-button-label {
    color: var(--pure-white) !important;
}

/* Picker selected day/item */
.mud-picker-calendar-day.mud-current,
.mud-picker-calendar-day.mud-selected,
.mud-picker-month.mud-current,
.mud-picker-year.mud-current {
    background: var(--ts-blue) !important;
    color: var(--pure-white) !important;
}

/* Picker hover states */
.mud-picker-calendar-day:hover,
.mud-picker-month:hover,
.mud-picker-year:hover {
    background: rgba(33, 150, 243, 0.15) !important;
}

/* Picker action buttons */
.mud-picker-actions .mud-button-text {
    color: var(--ts-blue) !important;
}

/* Time picker clock face */
.mud-time-picker-clock {
    background: rgba(255, 255, 255, 0.04) !important;
}

.mud-time-picker-clock .mud-time-picker-minute,
.mud-time-picker-clock .mud-time-picker-hour {
    color: var(--pure-white) !important;
}

/* --- OVERLAY BACKDROP --- */
.mud-overlay {
    background-color: rgba(0, 0, 0, 0.6) !important;
}

/* --- MESSAGE BOX (used for ShowMessageBox confirmations) --- */
.mud-message-box .mud-dialog {
    background: linear-gradient(135deg, rgba(30, 35, 45, 0.95) 0%, rgba(15, 18, 25, 0.98) 100%) !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 16px !important;
}

.mud-message-box .mud-dialog-title,
.mud-message-box .mud-dialog-content .mud-typography {
    color: var(--pure-white) !important;
}

.mud-message-box .mud-dialog-content {
    color: rgba(255, 255, 255, 0.7) !important;
}

/* --- INPUTS INSIDE DIALOGS (ensure they match page-level input styling) --- */
.mud-dialog .mud-input-outlined .mud-input-outlined-border {
    border-color: rgba(255, 255, 255, 0.1) !important;
}

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

.mud-dialog .mud-input-outlined.mud-input-focused .mud-input-outlined-border,
.mud-dialog .mud-focused .mud-input-outlined .mud-input-outlined-border {
    border-color: var(--ts-blue) !important;
    box-shadow: 0 0 8px rgba(33, 150, 243, 0.25) !important;
}

.mud-dialog .mud-input-filled,
.mud-dialog .mud-input.mud-input-filled,
.mud-dialog .mud-input-outlined .mud-input-slot,
.mud-dialog .mud-input-outlined {
    background: rgba(255, 255, 255, 0.04) !important;
}

.mud-dialog .mud-input-filled:hover,
.mud-dialog .mud-input.mud-input-filled:hover {
    background: rgba(255, 255, 255, 0.06) !important;
}

.mud-dialog .mud-input-control input,
.mud-dialog .mud-input-control textarea,
.mud-dialog .mud-input-slot input,
.mud-dialog .mud-input-slot textarea,
.mud-dialog .mud-select-input {
    color: var(--pure-white) !important;
    caret-color: var(--pure-white) !important;
}

/* Feb 12, 2026: Reposition floating labels in dialogs — show above field, not on border
   Matches the visual style of form pages which use <FormLabel> above the field.
   Applied globally to all dialogs for consistency.
   MudBlazor renders label AFTER input in DOM, so we use flexbox order to move it above. */

/* Make the input control a flex column so we can reorder children */
.mud-dialog .mud-input-control {
    display: flex !important;
    flex-direction: column !important;
}

/* Move label to top (before input) using order */
.mud-dialog .mud-input-label,
.mud-dialog .mud-input-label.mud-input-label-animated,
.mud-dialog .mud-input-label-outlined {
    position: relative !important;
    transform: none !important;
    order: -1 !important;
    font-size: 0.75rem !important;
    color: var(--starlight-silver, #94A3B8) !important;
    font-weight: 600 !important;
    letter-spacing: 0.5px !important;
    text-transform: uppercase !important;
    margin-bottom: 6px !important;
    padding: 0 !important;
    background: none !important;
    display: block !important;
    pointer-events: none !important;
}

/* Override shrunk/animated states — keep label static above field */
.mud-dialog .mud-input-label.mud-shrink,
.mud-dialog .mud-input-label.mud-input-label-animated.mud-shrink,
.mud-dialog .mud-input-label-outlined.mud-shrink {
    transform: none !important;
    background: none !important;
    padding: 0 !important;
    font-size: 0.75rem !important;
}

/* Focused label in dialogs — blue highlight */
.mud-dialog .mud-input-focused .mud-input-label,
.mud-dialog .mud-focused .mud-input-label {
    color: var(--ts-blue) !important;
}

.mud-dialog .mud-input-control input::placeholder,
.mud-dialog .mud-input-slot input::placeholder,
.mud-dialog .mud-input-control textarea::placeholder {
    color: rgba(255, 255, 255, 0.35) !important;
}

/* Dialog select dropdown icon */
.mud-dialog .mud-select .mud-input-adornment svg {
    color: rgba(255, 255, 255, 0.5) !important;
}

.mud-dialog .mud-select:hover .mud-input-adornment svg,
.mud-dialog .mud-select.mud-input-focused .mud-input-adornment svg {
    color: var(--ts-blue) !important;
}

/* Dialog helper/error text */
.mud-dialog .mud-input-helper-text {
    color: rgba(255, 255, 255, 0.5) !important;
}

.mud-dialog .mud-input-error .mud-input-helper-text {
    color: var(--error-red) !important;
}

.mud-dialog .mud-input-error .mud-input-outlined-border {
    border-color: var(--error-red) !important;
}

/* --- AUTOCOMPLETE POPOVER (higher specificity for portal-rendered panels) --- */
.mud-popover-provider .mud-popover-paper,
.mud-popover-cascading-value .mud-popover-paper {
    background: linear-gradient(135deg, rgba(30, 35, 45, 0.95) 0%, rgba(15, 18, 25, 0.98) 100%) !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 12px !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5) !important;
}

/* No-matches text in autocomplete */
.mud-autocomplete-popover .mud-list-item-text,
.mud-popover-paper .mud-list-item-text {
    color: var(--pure-white) !important;
}

/* ==========================================================================
   GLOBAL STATUS/TYPE MENU ITEM COLORS - Reusable across all dropdowns
   ========================================================================== */

/* Generic menu item layout */
.status-menu-item,
.type-menu-item,
.priority-menu-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 4px 8px;
    font-weight: 500;
}

/* Job Types - Active work colors (no grey for active types) */
.type-menu-item.reactive { color: #64B5F6; }      /* Blue - reactive/callout */
.type-menu-item.ppm { color: #81C784; }           /* Green - planned maintenance */
.type-menu-item.eicr { color: #FFB74D; }          /* Orange - inspection */
.type-menu-item.remedial { color: #FF8A65; }      /* Coral - follow-up work */
.type-menu-item.install { color: #4DD0E1; }       /* Cyan - new installation */
.type-menu-item.survey { color: #BA68C8; }        /* Purple - survey/assessment */
.type-menu-item.pat { color: #F06292; }           /* Pink - PAT testing */
.type-menu-item.emergency-lighting { color: #FFF176; } /* Yellow - emergency lighting */
.type-menu-item.ev { color: #4DB6AC; }            /* Teal - EV charging */
.type-menu-item.minor-works { color: #90A4AE; }   /* Blue-grey - minor works */
.type-menu-item.project { color: #7986CB; }       /* Indigo - larger project */
.type-menu-item.quote { color: #90A4AE; }         /* Blue-grey - quote work */

/* Feb 4, 2026: Type chips for JobsList (match menu colors) */
.type-chip.reactive { background: rgba(100, 181, 246, 0.15) !important; color: #64B5F6 !important; }
.type-chip.ppm { background: rgba(129, 199, 132, 0.15) !important; color: #81C784 !important; }
.type-chip.eicr { background: rgba(255, 183, 77, 0.15) !important; color: #FFB74D !important; }
.type-chip.remedial { background: rgba(255, 138, 101, 0.15) !important; color: #FF8A65 !important; }
.type-chip.install { background: rgba(77, 208, 225, 0.15) !important; color: #4DD0E1 !important; }
.type-chip.survey { background: rgba(186, 104, 200, 0.15) !important; color: #BA68C8 !important; }
.type-chip.pat { background: rgba(240, 98, 146, 0.15) !important; color: #F06292 !important; }
.type-chip.emergencylighting { background: rgba(255, 241, 118, 0.15) !important; color: #FFF176 !important; }
.type-chip.ev { background: rgba(77, 182, 172, 0.15) !important; color: #4DB6AC !important; }
.type-chip.minorworks { background: rgba(144, 164, 174, 0.15) !important; color: #90A4AE !important; }

/* Priority Levels - Urgency colors */
.priority-menu-item.low { color: #81C784; }       /* Green - low priority */
.priority-menu-item.medium { color: #64B5F6; }    /* Blue - medium/normal */
.priority-menu-item.high { color: #FFB74D; }      /* Orange - high priority */
.priority-menu-item.critical { color: #EF5350; }  /* Red - critical */
.priority-menu-item.emergency { color: #F44336; } /* Bright red - emergency */
.priority-menu-item.urgent { color: #FF7043; }    /* Deep orange - urgent */

/* Priority Chip Colors (Feb 6, 2026) - Match status-pill pattern */
.priority-chip.low { background: rgba(129, 199, 132, 0.15) !important; color: #81C784 !important; }
.priority-chip.medium { background: rgba(100, 181, 246, 0.15) !important; color: #64B5F6 !important; }
.priority-chip.high { background: rgba(255, 183, 77, 0.15) !important; color: #FFB74D !important; }
.priority-chip.critical { background: rgba(239, 83, 80, 0.15) !important; color: #EF5350 !important; }
.priority-chip.emergency { background: rgba(244, 67, 54, 0.15) !important; color: #F44336 !important; }
.priority-chip.urgent { background: rgba(255, 112, 67, 0.15) !important; color: #FF7043 !important; }

/* Quote/Job Status Colors - Reusable */
.status-menu-item.draft { color: #90A4AE; }       /* Blue-grey for draft */
.status-menu-item.sent { color: #64B5F6; }        /* Blue */
.status-menu-item.review { color: #FFB74D; }      /* Orange */
.status-menu-item.accepted { color: #81C784; }    /* Green */
.status-menu-item.rejected { color: #EF5350; }    /* Red */
.status-menu-item.scheduled { color: #4DD0E1; }   /* Cyan */
.status-menu-item.in-progress { color: #64B5F6; } /* Blue */
.status-menu-item.completed { color: #81C784; }   /* Green */
.status-menu-item.cancelled { color: #EF5350; }   /* Red */
.status-menu-item.closed { color: #78909C; }      /* Blue-grey */

/* MudBlazor dropdown note: Dropdowns use position:fixed and close on click-outside */

/* Chips */
.mud-chip {
    background: rgba(255, 255, 255, 0.1) !important;
    border: 1px solid rgba(255, 255, 255, 0.15);
}

.mud-chip.mud-chip-color-primary {
    background: rgba(33, 150, 243, 0.2) !important;
    border-color: rgba(33, 150, 243, 0.4);
}

.mud-chip.mud-chip-color-success {
    background: rgba(76, 175, 80, 0.2) !important;
    border-color: rgba(76, 175, 80, 0.4);
}

.mud-chip.mud-chip-color-warning {
    background: rgba(255, 215, 64, 0.2) !important;
    border-color: rgba(255, 215, 64, 0.4);
}

.mud-chip.mud-chip-color-error {
    background: rgba(244, 67, 54, 0.2) !important;
    border-color: rgba(244, 67, 54, 0.4);
}

/* ==========================================================================
   KANBAN BOARD - Frosted Glass Columns & Draggable Cards
   ========================================================================== */

.kanban-board {
    display: flex;
    gap: 20px;
    overflow-x: auto;
    padding: 20px 0;
    min-height: calc(100vh - 200px);
}

.kanban-column {
    min-width: 320px;
    background: var(--glass-bg);
    backdrop-filter: blur(var(--glass-blur));
    -webkit-backdrop-filter: blur(var(--glass-blur));
    border: 1px solid var(--glass-border);
    border-radius: 16px;
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    transition: all 0.3s ease;
}

.kanban-column:hover {
    background: var(--glass-bg-hover);
    border-color: var(--glass-border-hover);
}

.kanban-column-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--glass-border);
    margin-bottom: 8px;
}

.kanban-column-title {
    color: var(--pure-white);
    font-weight: 600;
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.kanban-column-count {
    background: rgba(33, 150, 243, 0.2);
    color: var(--ts-blue-light);
    padding: 2px 8px;
    border-radius: 12px;
    font-size: 0.75rem;
    font-weight: 600;
}

.kanban-cards-container {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-height: 200px;
}

.kanban-card {
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid var(--glass-border);
    border-radius: 12px;
    padding: 16px;
    cursor: grab;
    transition: all 0.2s ease;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.kanban-card:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: var(--glass-border-hover);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.kanban-card:active {
    cursor: grabbing;
    opacity: 0.8;
}

.kanban-card.dragging {
    opacity: 0.5;
    transform: rotate(2deg);
}

.kanban-card-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 8px;
}

.kanban-card-client {
    font-weight: 500;
    color: var(--pure-white);
    font-size: 0.9rem;
    flex: 1;
}

.kanban-card-priority {
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.kanban-card-priority.high {
    background: rgba(244, 67, 54, 0.2);
    color: #EF9A9A;
    border: 1px solid rgba(244, 67, 54, 0.4);
}

.kanban-card-priority.medium {
    background: rgba(255, 215, 64, 0.2);
    color: #FFE082;
    border: 1px solid rgba(255, 215, 64, 0.4);
}

.kanban-card-priority.low {
    background: rgba(76, 175, 80, 0.2);
    color: #81C784;
    border: 1px solid rgba(76, 175, 80, 0.4);
}

.kanban-card-body {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.kanban-card-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: rgba(33, 150, 243, 0.25);
    border: 1px solid rgba(33, 150, 243, 0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--ts-blue-light);
    font-size: 0.75rem;
    font-weight: 600;
    flex-shrink: 0;
}

.kanban-card-due-date {
    color: var(--starlight-silver);
    font-size: 0.8rem;
    flex: 1;
}

.kanban-card-due-date.overdue {
    color: var(--error-red);
    font-weight: 600;
}

/* ==========================================================================
   SUMMARY CARDS - Glow Effect with Blue Gradients
   ========================================================================== */

.summary-card {
    background: var(--glass-bg);
    backdrop-filter: blur(var(--glass-blur));
    -webkit-backdrop-filter: blur(var(--glass-blur));
    border: 1px solid var(--glass-border);
    border-radius: 16px;
    padding: 24px;
    position: relative;
    overflow: hidden;
    transition: all 0.3s ease;
}

.summary-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, transparent 0%, var(--ts-blue) 50%, transparent 100%);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.summary-card:hover {
    background: var(--glass-bg-hover);
    border-color: var(--glass-border-hover);
    transform: translateY(-2px);
    box-shadow: var(--neon-glow), var(--shadow-elevated);
}

.summary-card:hover::before {
    opacity: 1;
}

.summary-card-glow {
    position: absolute;
    top: -50%;
    right: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(circle, rgba(33, 150, 243, 0.15) 0%, transparent 70%);
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
}

.summary-card:hover .summary-card-glow {
    opacity: 1;
}

/* ==========================================================================
   RESPONSIVE LAYOUT - Desktop, Laptop, Tablet, Mobile
   Updated: Feb 2, 2026 - Added laptop breakpoint with collapsed sidebar
   Single file, no page changes needed
   ========================================================================== */

/* Generic utility for card grids inside pages (no per-page changes needed) */
.card-grid {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}

/* ==========================================================================
   TABLET & LAPTOP (768px - 1400px) - OVERLAY SIDEBAR MODE
   Feb 5, 2026: Unified overlay sidebar for tablet/laptop screens
   
   Sidebar slides in as overlay with full labels (same look as desktop).
   Content gets full width. User toggles via hamburger menu.
   Same UX pattern as mobile, just for larger touch devices.
   ========================================================================== */
@media (min-width: 769px) and (max-width: 1400px) {
    /* Sidebar: overlay mode - hidden by default, slides in from left */
    .cinematic-sidebar {
        position: fixed;
        left: 0;
        top: 0;
        height: 100vh;
        width: 280px;
        transform: translateX(-100%);
        z-index: 1000;
        box-shadow: 4px 0 30px rgba(0, 0, 0, 0.4);
        transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    }
    
    /* When sidebar is open (not collapsed) */
    .cinematic-layout:not(.sidebar-collapsed) .cinematic-sidebar {
        transform: translateX(0);
    }
    
    /* When sidebar is closed/collapsed */
    .cinematic-sidebar.closed,
    .cinematic-layout.sidebar-collapsed .cinematic-sidebar {
        transform: translateX(-100%);
    }
    
    /* Main content takes full width - no sidebar margin */
    .main-content-wrapper {
        width: 100%;
        margin-left: 0 !important;
    }
    
    /* Backdrop is handled by .sidebar-backdrop element (see above) */
    
    /* Tables: horizontal scroll on narrow screens */
    .glass-table-card,
    .glass-table-wrapper,
    .premium-table-card {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    
    /* Reduce content padding slightly */
    .content-scroll-area {
        padding: 24px;
    }
    
    /* Charts responsive */
    .charts-row {
        grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
    }
    
    /* Stat cards */
    .stat-value {
        font-size: 1.75rem;
    }
    
    /* Kanban columns */
    .kanban-column {
        min-width: 280px;
    }
}

/* Tablet-specific adjustments (768px - 1024px) */
@media (min-width: 769px) and (max-width: 1024px) {
    /* Charts stack vertically on smaller tablets */
    .charts-row {
        grid-template-columns: 1fr;
    }
    
    /* Reduce content padding */
    .content-scroll-area {
        padding: 20px;
    }
}

/* ==========================================================================
   MOBILE (< 768px)
   ========================================================================== */
@media (max-width: 768px) {
    /* Sidebar: overlay mode on mobile */
    .cinematic-sidebar {
        position: fixed;
        left: 0;
        top: 0;
        height: 100vh;
        width: 280px;
        transform: translateX(-100%);
        z-index: 1000;
        box-shadow: 4px 0 20px rgba(0, 0, 0, 0.5);
    }
    
    .cinematic-sidebar.open {
        transform: translateX(0);
    }
    
    .cinematic-sidebar.closed {
        transform: translateX(-100%);
        width: 280px; /* Keep width, just slide off */
    }
    
    /* Main content takes full width - no sidebar margin on mobile */
    .main-content-wrapper {
        width: 100%;
        margin-left: 0 !important;
    }
    
    /* Topbar adjustments */
    .cinematic-topbar {
        padding: 0 16px;
        height: 60px;
    }
    
    .topbar-left {
        gap: 4px;
    }
    
    /* Hide breadcrumbs on mobile */
    .cinematic-breadcrumbs {
        display: none;
    }
    
    /* User profile - hide text, show avatar only */
    .user-profile-trigger .d-md-flex {
        display: none !important;
    }
    
    /* Further reduce content padding */
    .content-scroll-area {
        padding: 16px;
    }
    
    /* Stats cards: 2 columns, then 1 on very small */
    .summary-grid,
    .stats-row {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
    }
    
    /* Stat cards smaller */
    .stat-card {
        padding: 16px;
    }
    
    .stat-value {
        font-size: 1.5rem;
    }
    
    .stat-icon {
        width: 44px;
        height: 44px;
    }
    
    /* Smaller titles */
    .premium-h1, .analytics-title {
        font-size: 1.5rem;
    }
    
    .premium-subtitle {
        font-size: 0.85rem;
    }
    
    /* Header layout stacks */
    .layout-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 16px;
    }
    
    .header-actions,
    .action-group {
        width: 100%;
        flex-wrap: wrap;
    }
    
    /* Filter bar wraps */
    .filter-bar {
        padding: 12px 16px;
        gap: 12px;
    }
    
    .filter-bar .search-field {
        min-width: 100%;
        order: -1; /* Search first on mobile */
    }
    
    .filter-bar .mud-input-outlined,
    .filter-bar .mud-select-outlined {
        min-width: 140px;
        flex: 1;
    }
    
    /* Search box full width */
    .search-box {
        width: 100%;
    }
    
    /* Kanban horizontal scroll */
    .kanban-board {
        padding: 16px 0;
    }
    
    .kanban-column {
        min-width: 260px;
        padding: 16px;
    }
    
    /* Summary cards padding */
    .summary-card {
        padding: 16px;
    }
    
    /* Charts smaller */
    .chart-panel {
        padding: 16px;
    }
    
    /* Dialog full width on mobile */
    .mud-dialog {
        margin: 16px !important;
        max-width: calc(100vw - 32px) !important;
    }
}

/* ==========================================================================
   SMALL MOBILE (< 480px)
   ========================================================================== */
@media (max-width: 480px) {
    /* Stats cards: 1 column */
    .summary-grid,
    .stats-row {
        grid-template-columns: 1fr;
    }
    
    /* Even smaller padding */
    .content-scroll-area {
        padding: 12px;
    }
    
    .stat-card {
        padding: 14px;
    }
    
    .stat-value {
        font-size: 1.25rem;
    }
    
    .premium-h1 {
        font-size: 1.25rem;
    }
    
    /* Kanban single column view */
    .kanban-column {
        min-width: 100%;
    }
    
    /* Table cells tighter */
    .cinematic-table th,
    .cinematic-table td {
        padding: 8px 12px !important;
        font-size: 0.8rem !important;
    }
}

/* Sidebar backdrop is now handled by .sidebar-backdrop element (see above, covers all breakpoints ≤1400px) */

/* ===== GLOBAL SEARCH BAR (Phase 4.1 - Dec 5, 2025) ===== */

.global-search-container {
    display: flex;
    align-items: center;
}

.search-input-wrapper {
    display: flex;
    align-items: center;
    gap: 8px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 24px;
    padding: 4px 8px 4px 16px;
    transition: all 0.3s ease;
    animation: searchExpand 0.3s ease;
}

@keyframes searchExpand {
    from {
        width: 40px;
        opacity: 0;
    }
    to {
        width: 320px;
        opacity: 1;
    }
}

.search-input-wrapper:focus-within {
    border-color: var(--primary);
    background: rgba(33, 150, 243, 0.1);
    box-shadow: 0 0 20px rgba(33, 150, 243, 0.2);
}

.search-input-icon {
    color: rgba(255, 255, 255, 0.4);
}

.global-search-input {
    width: 240px;
    background: transparent;
    border: none;
    outline: none;
    color: white;
    font-size: 14px;
    padding: 8px 4px;
}

.global-search-input::placeholder {
    color: rgba(255, 255, 255, 0.4);
}

/* Mobile responsiveness for search */
@media (max-width: 768px) {
    .search-input-wrapper {
        position: fixed;
        top: 70px;
        left: 16px;
        right: 16px;
        width: auto !important;
        z-index: 100;
        background: var(--surface);
        border-radius: 12px;
        padding: 8px 12px;
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
    }
    
    @keyframes searchExpand {
        from {
            opacity: 0;
            transform: translateY(-10px);
        }
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }
    
    .global-search-input {
        width: 100%;
        flex: 1;
    }
}

/* ==========================================================================
   🔒 GLOBAL DESIGN SYSTEM - UNIFIED COMPONENTS (Dec 19, 2025)
   Single source of truth for all UI patterns
   ========================================================================== */

/* ==========================================================================
   TEXT HIERARCHY - WCAG AA Compliant (Dec 31, 2025)
   All pages MUST use these classes - NO hardcoded colors
   ========================================================================== */

/* Primary text - Names, titles, values, main content */
.text-primary,
.row-primary,
.card-title {
    color: var(--pure-white) !important;
    font-weight: var(--font-weight-medium);
    font-size: var(--font-size-base);
}

/* Secondary text - Metadata, descriptions, supporting info */
.text-secondary,
.row-secondary {
    color: var(--starlight-silver) !important;
    font-weight: var(--font-weight-normal);
    font-size: var(--font-size-sm);
}

/* Muted text - ONLY for placeholders, disabled states */
.text-muted,
.row-meta {
    color: var(--text-muted) !important;
    font-weight: var(--font-weight-normal);
    font-size: var(--font-size-sm);
}

/* Accent text - Only for interactive/clickable elements */
.text-accent {
    color: var(--ts-blue) !important;
}

/* ==========================================================================
   INFO LABELS & VALUES - Standard patterns for detail pages
   Use these instead of hardcoding in individual pages
   ========================================================================== */

/* Info List — horizontal label: value layout (global standard)
   Used on Job View, Client View, Quote View, etc.
   Feb 12, 2026: Moved from page-level CSS to global for consistency */
.info-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.info-list .info-item {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 8px;
    padding: 0;
    border-bottom: none;
}

.info-list .info-label {
    font-size: 0.75rem;
    color: var(--starlight-silver, #94A3B8);
    font-weight: 600;
    letter-spacing: 0.3px;
    text-transform: uppercase;
    min-width: 140px;
    flex-shrink: 0;
    text-align: left;
    padding-top: 2px;
    margin-bottom: 0;
    display: inline;
}

.info-list .info-label::after {
    content: ' -';
    color: #64748B;
}

.info-list .info-value {
    font-size: 0.9rem;
    color: var(--pure-white, #fff);
    text-align: left;
}

/* Labels - Category headers, field names (non-list context) */
.info-label,
.field-label,
.meta-label {
    font-size: var(--font-size-xs);        /* 12px minimum */
    color: var(--starlight-silver);        /* 5.8:1 contrast - PASSES AA */
    font-weight: var(--font-weight-semibold);
    letter-spacing: 0.8px;
    text-transform: uppercase;
    margin-bottom: 4px;
    display: block;
}

/* Values - Field values, data content */
.info-value,
.field-value {
    font-size: var(--font-size-base);      /* 16px for readability */
    color: var(--pure-white);              /* 18:1 contrast - PASSES AAA */
    font-weight: var(--font-weight-medium);
    line-height: 1.4;
}

/* Links within values */
.info-value.link,
.field-value.link {
    color: var(--text-link);
    text-decoration: none;
}

.info-value.link:hover,
.field-value.link:hover {
    text-decoration: underline;
    color: #90CAF9;
}

/* Warning state for values */
.info-value.warning,
.field-value.warning {
    color: #FFB74D !important;
}

/* Empty/not-set state */
.info-value.empty,
.field-value.empty {
    color: var(--text-muted);
    font-style: italic;
}

/* Job reference / secondary identifier styling - MUTED, not blue */
.job-ref,
.meta-ref {
    color: var(--starlight-silver);
    font-size: 0.85rem;
}

/* ==========================================================================
   FORM SECTION PANELS - Create/Edit Pages
   ========================================================================== */

.section-panel {
    background: linear-gradient(135deg, rgba(45, 45, 50, 0.7) 0%, rgba(15, 15, 18, 0.9) 100%) !important;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-radius: 16px !important;
    padding: 24px;
    margin-bottom: 0;
    transition: all 0.3s ease;
    position: relative;
    overflow: visible;
}

/* ALL section panels get full neon hover glow */
.section-panel:hover {
    background: linear-gradient(135deg, rgba(50, 50, 55, 0.75) 0%, rgba(18, 18, 22, 0.95) 100%) !important;
    border-color: rgba(33, 150, 243, 0.5) !important;
    box-shadow: var(--neon-glow), var(--shadow-elevated) !important;
    transform: translateY(-2px);
}

/* Clickable section panels get pointer cursor */
.section-panel.clickable,
.section-panel.interactive {
    cursor: pointer;
}

/* Panel Header with Icon */
.panel-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 20px;
    padding-bottom: 16px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.panel-header h3 {
    color: var(--pure-white);
    font-size: 1.1rem;
    font-weight: 600;
    margin: 0;
    letter-spacing: 0.3px;
}

/* Section Icons - Semantic Colors */
.section-icon {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.section-icon .mud-icon-root {
    font-size: 20px !important;
}

.section-icon.blue {
    background: linear-gradient(135deg, rgba(33, 150, 243, 0.25) 0%, rgba(33, 150, 243, 0.1) 100%);
    border: 1px solid rgba(33, 150, 243, 0.35);
    color: var(--ts-blue-light);
}

.section-icon.green {
    background: linear-gradient(135deg, rgba(76, 175, 80, 0.25) 0%, rgba(76, 175, 80, 0.1) 100%);
    border: 1px solid rgba(76, 175, 80, 0.35);
    color: #81C784;
}

.section-icon.orange {
    background: linear-gradient(135deg, rgba(255, 152, 0, 0.25) 0%, rgba(255, 152, 0, 0.1) 100%);
    border: 1px solid rgba(255, 152, 0, 0.35);
    color: #FFB74D;
}

.section-icon.purple {
    background: linear-gradient(135deg, rgba(156, 39, 176, 0.25) 0%, rgba(156, 39, 176, 0.1) 100%);
    border: 1px solid rgba(156, 39, 176, 0.35);
    color: #BA68C8;
}

.section-icon.cyan {
    background: linear-gradient(135deg, rgba(0, 188, 212, 0.25) 0%, rgba(0, 188, 212, 0.1) 100%);
    border: 1px solid rgba(0, 188, 212, 0.35);
    color: #4DD0E1;
}

.section-icon.red {
    background: linear-gradient(135deg, rgba(244, 67, 54, 0.25) 0%, rgba(244, 67, 54, 0.1) 100%);
    border: 1px solid rgba(244, 67, 54, 0.35);
    color: #EF5350;
}

.section-icon.amber {
    background: linear-gradient(135deg, rgba(255, 193, 7, 0.25) 0%, rgba(255, 193, 7, 0.1) 100%);
    border: 1px solid rgba(255, 193, 7, 0.35);
    color: #FFD54F;
}

/* Yellow/Gold - Softer tone for better icon visibility */
.section-icon.yellow {
    background: linear-gradient(135deg, rgba(212, 175, 55, 0.25) 0%, rgba(212, 175, 55, 0.1) 100%);
    border: 1px solid rgba(212, 175, 55, 0.4);
    color: #D4AF37; /* Muted gold - easier to see icon */
}

/* ==========================================================================
   LIST ROW STYLING - All list pages
   ========================================================================== */

/* Base list row */
.list-row {
    display: flex;
    align-items: center;
    padding: 12px 16px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    transition: all 0.2s ease;
    cursor: pointer;
    position: relative;
    overflow: visible;
}

.list-row:hover {
    background: rgba(33, 150, 243, 0.08);
}

/* Clickable list rows get neon glow */
.list-row.clickable:hover,
.list-row.neon-hover-glow:hover {
    box-shadow: var(--neon-glow);
    border-color: rgba(33, 150, 243, 0.3);
}

/* Row content layout */
.row-content {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1;
    min-width: 0;
}

.row-primary {
    font-weight: 500;
    color: var(--pure-white);
    font-size: 0.95rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.row-secondary {
    color: var(--starlight-silver);
    font-size: 0.85rem;
}

.row-meta {
    color: rgba(255, 255, 255, 0.5);
    font-size: 0.8rem;
}

/* ==========================================================================
   FILTER BAR - Standardized across all list pages
   ========================================================================== */

.filter-bar {
    display: flex;
    gap: 16px;
    padding: 16px 24px;
    flex-wrap: wrap;
    align-items: flex-end;
    background: transparent;
}

.filter-item {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 160px;
}

.filter-item.search-item {
    flex: 1;
    min-width: 280px;
}

.filter-label {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: rgba(255, 255, 255, 0.6);
}

/* ==========================================================================
   SUMMARY BAR (KPI Cards Container)
   ========================================================================== */

.summary-bar {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 16px;
    padding: 0 24px;
    margin-bottom: 24px;
}

/* ==========================================================================
   BUTTON UTILITIES
   ========================================================================== */

/* Primary action button */
.btn-primary-action,
.create-btn {
    background: linear-gradient(135deg, var(--ts-blue) 0%, var(--ts-blue-dark) 100%) !important;
    color: var(--pure-white) !important;
    box-shadow: 0 4px 20px rgba(33, 150, 243, 0.4);
    padding: 8px 24px !important;
    font-weight: 600;
    border-radius: 8px;
    transition: all 0.3s ease;
}

.btn-primary-action:hover,
.create-btn:hover {
    transform: translateY(-2px);
    box-shadow: var(--neon-glow);
}

/* Secondary/Cancel button */
.btn-secondary,
.cancel-btn {
    border-color: rgba(255, 255, 255, 0.2) !important;
    color: var(--starlight-silver) !important;
    background: transparent !important;
}

.btn-secondary:hover,
.cancel-btn:hover {
    border-color: rgba(255, 255, 255, 0.4) !important;
    background: rgba(255, 255, 255, 0.05) !important;
}

/* Back button */
.back-btn {
    margin-bottom: 8px;
    color: var(--starlight-silver) !important;
}

/* ==========================================================================
   LAYOUT UTILITIES - Create/Edit Pages
   ========================================================================== */

.header-left {
    display: flex;
    flex-direction: column;
}

.header-actions {
    display: flex;
    align-items: center;
    gap: 12px;
}

.title-icon {
    color: var(--success-green);
}

.loading-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 64px;
    color: var(--starlight-silver);
    gap: 16px;
}

/* ==========================================================================
   MODAL / DIALOG STYLING - Glassmorphic Gold Standard (Feb 10, 2026)
   This is the definitive dialog container styling. The overlay-level
   input/list rules are in the GLOBAL OVERLAY STYLING section above.
   ========================================================================== */

.mud-dialog {
    background: linear-gradient(135deg, rgba(30, 35, 45, 0.95) 0%, rgba(15, 18, 25, 0.98) 100%) !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 16px !important;
    box-shadow: 0 12px 48px rgba(0, 0, 0, 0.6) !important;
    color: var(--pure-white) !important;
}

.mud-dialog-title {
    color: var(--pure-white) !important;
    font-weight: var(--font-weight-semibold) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
    padding: 20px 24px !important;
    font-family: var(--font-stack) !important;
}

.mud-dialog-content {
    padding: 24px !important;
    color: var(--pure-white) !important;
}

.mud-dialog-content .mud-typography {
    color: var(--pure-white) !important;
}

.mud-dialog-content .mud-text-secondary,
.mud-dialog-content .mud-typography-body2 {
    color: rgba(255, 255, 255, 0.7) !important;
}

.mud-dialog-actions {
    padding: 16px 24px !important;
    border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
    gap: 12px !important;
}

/* Dialog action buttons - Primary (filled blue) */
.mud-dialog-actions .mud-button-filled.mud-button-filled-primary {
    background: var(--ts-blue) !important;
    color: var(--pure-white) !important;
    border-radius: 10px !important;
    text-transform: none !important;
    font-weight: var(--font-weight-medium) !important;
}

.mud-dialog-actions .mud-button-filled.mud-button-filled-primary:hover {
    background: var(--ts-blue-dark) !important;
    box-shadow: 0 0 12px rgba(33, 150, 243, 0.4) !important;
}

/* Dialog action buttons - Cancel (outlined/text) */
.mud-dialog-actions .mud-button-outlined {
    border-color: rgba(255, 255, 255, 0.2) !important;
    color: rgba(255, 255, 255, 0.7) !important;
    border-radius: 10px !important;
    text-transform: none !important;
}

.mud-dialog-actions .mud-button-outlined:hover {
    border-color: rgba(255, 255, 255, 0.4) !important;
    color: var(--pure-white) !important;
    background: rgba(255, 255, 255, 0.05) !important;
}

.mud-dialog-actions .mud-button-text {
    color: rgba(255, 255, 255, 0.7) !important;
    text-transform: none !important;
}

.mud-dialog-actions .mud-button-text:hover {
    color: var(--pure-white) !important;
    background: rgba(255, 255, 255, 0.05) !important;
}

/* Dialog close button */
.mud-dialog .mud-dialog-close-button {
    color: rgba(255, 255, 255, 0.5) !important;
}

.mud-dialog .mud-dialog-close-button:hover {
    color: var(--pure-white) !important;
    background: rgba(255, 255, 255, 0.08) !important;
}

/* Dialog chips, alerts, and other inner components */
.mud-dialog .mud-chip {
    background: rgba(255, 255, 255, 0.08) !important;
    color: var(--pure-white) !important;
}

.mud-dialog .mud-alert {
    background: rgba(255, 255, 255, 0.04) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-radius: 10px !important;
}

/* ==========================================================================
   EMPTY STATE
   ========================================================================== */

.empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 48px 24px;
    text-align: center;
    color: var(--starlight-silver);
}

.empty-state-icon {
    font-size: 48px !important;
    color: rgba(255, 255, 255, 0.2);
    margin-bottom: 16px;
}

.empty-state-title {
    font-size: 1.1rem;
    font-weight: 500;
    color: var(--pure-white);
    margin-bottom: 8px;
}

.empty-state-description {
    font-size: 0.9rem;
    color: var(--starlight-silver);
    max-width: 400px;
}

/* ==========================================================================
   SEMANTIC STATUS COLORS FOR KPI SELECTION
   These MUST win over hover glow when .selected is applied
   ========================================================================== */

/* ═══════════════════════════════════════════════════════════════════════════
   Feb 9, 2026: UNIFIED SELECTED STATE – neon blue only
   Old semantic colors (green/amber/red/purple per status) removed.
   All selected cards now use the same neon blue glow defined above in the
   interaction section. This block is kept as documentation only.
   
   The universal rule is:  .summary-card.selected { neon-glow-intense }
   See "GLOBAL STAT/SUMMARY CARD INTERACTION" near top of file.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ==========================================================================
   GLOBAL MUDBLAZOR OVERRIDES - January 2026
   Ensures all MudBlazor components match the Cinematic Productivity theme
   ========================================================================== */

/* ==========================================================================
   MUDALERT - Override default garish backgrounds
   ========================================================================== */

.mud-alert {
    background: rgba(255, 255, 255, 0.03) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 10px !important;
    backdrop-filter: blur(8px);
    color: var(--pure-white) !important;
}

.mud-alert .mud-alert-message {
    color: var(--pure-white) !important;
}

/* Info Alert - Subtle blue */
.mud-alert-filled-info,
.mud-alert-outlined-info,
.mud-alert-text-info {
    background: rgba(33, 150, 243, 0.1) !important;
    border-color: rgba(33, 150, 243, 0.25) !important;
}

.mud-alert-filled-info .mud-icon-root,
.mud-alert-outlined-info .mud-icon-root,
.mud-alert-text-info .mud-icon-root {
    color: var(--ts-blue-light) !important;
}

/* Success Alert - Subtle green */
.mud-alert-filled-success,
.mud-alert-outlined-success,
.mud-alert-text-success {
    background: rgba(76, 175, 80, 0.1) !important;
    border-color: rgba(76, 175, 80, 0.25) !important;
}

.mud-alert-filled-success .mud-icon-root,
.mud-alert-outlined-success .mud-icon-root,
.mud-alert-text-success .mud-icon-root {
    color: #81C784 !important;
}

/* Warning Alert - Subtle amber */
.mud-alert-filled-warning,
.mud-alert-outlined-warning,
.mud-alert-text-warning {
    background: rgba(255, 152, 0, 0.1) !important;
    border-color: rgba(255, 152, 0, 0.25) !important;
}

.mud-alert-filled-warning .mud-icon-root,
.mud-alert-outlined-warning .mud-icon-root,
.mud-alert-text-warning .mud-icon-root {
    color: #FFB74D !important;
}

/* Error Alert - Subtle red (NOT garish) */
.mud-alert-filled-error,
.mud-alert-outlined-error,
.mud-alert-text-error {
    background: rgba(244, 67, 54, 0.1) !important;
    border-color: rgba(244, 67, 54, 0.25) !important;
}

.mud-alert-filled-error .mud-icon-root,
.mud-alert-outlined-error .mud-icon-root,
.mud-alert-text-error .mud-icon-root {
    color: #EF9A9A !important;
}

/* ==========================================================================
   MUDCHIP - Override default colors
   ========================================================================== */

.mud-chip {
    background: rgba(255, 255, 255, 0.08) !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    color: var(--starlight-silver) !important;
}

.mud-chip:hover {
    background: rgba(255, 255, 255, 0.12) !important;
}

/* Primary Chip */
.mud-chip.mud-chip-color-primary {
    background: rgba(33, 150, 243, 0.15) !important;
    border-color: rgba(33, 150, 243, 0.3) !important;
    color: var(--ts-blue-light) !important;
}

/* Success Chip */
.mud-chip.mud-chip-color-success {
    background: rgba(76, 175, 80, 0.15) !important;
    border-color: rgba(76, 175, 80, 0.3) !important;
    color: #81C784 !important;
}

/* Warning Chip */
.mud-chip.mud-chip-color-warning {
    background: rgba(255, 152, 0, 0.15) !important;
    border-color: rgba(255, 152, 0, 0.3) !important;
    color: #FFB74D !important;
}

/* Error Chip - NOT harsh red */
.mud-chip.mud-chip-color-error {
    background: rgba(244, 67, 54, 0.15) !important;
    border-color: rgba(244, 67, 54, 0.3) !important;
    color: #EF9A9A !important;
}

/* Info Chip */
.mud-chip.mud-chip-color-info {
    background: rgba(33, 150, 243, 0.12) !important;
    border-color: rgba(33, 150, 243, 0.25) !important;
    color: var(--ts-blue-light) !important;
}

/* Secondary Chip - Use muted, NOT cyan */
.mud-chip.mud-chip-color-secondary {
    background: rgba(148, 163, 184, 0.12) !important;
    border-color: rgba(148, 163, 184, 0.25) !important;
    color: var(--starlight-silver) !important;
}

/* Tertiary Chip */
.mud-chip.mud-chip-color-tertiary {
    background: rgba(156, 39, 176, 0.12) !important;
    border-color: rgba(156, 39, 176, 0.25) !important;
    color: #CE93D8 !important;
}

/* ==========================================================================
   MUDTEXT Color Overrides - Eliminate harsh colors
   ========================================================================== */

/* Secondary text should be muted silver, NOT cyan */
.mud-secondary-text,
.mud-text-secondary {
    color: var(--starlight-silver) !important;
}

/* Error text - softer red */
.mud-error-text {
    color: #EF9A9A !important;
}

/* Warning text - softer amber */
.mud-warning-text {
    color: #FFB74D !important;
}

/* Success text - softer green */
.mud-success-text {
    color: #81C784 !important;
}

/* Info text - theme blue */
.mud-info-text {
    color: var(--ts-blue-light) !important;
}

/* ==========================================================================
   MUDBUTTON Color Overrides
   ========================================================================== */

/* Error buttons - softer, not garish */
.mud-button-filled.mud-button-filled-error {
    background: rgba(244, 67, 54, 0.85) !important;
}

.mud-button-filled.mud-button-filled-error:hover {
    background: rgba(244, 67, 54, 1) !important;
}

.mud-button-outlined.mud-button-outlined-error {
    border-color: rgba(244, 67, 54, 0.5) !important;
    color: #EF9A9A !important;
}

.mud-button-outlined.mud-button-outlined-error:hover {
    background: rgba(244, 67, 54, 0.1) !important;
}

.mud-button-text.mud-button-text-error {
    color: #EF9A9A !important;
}

.mud-button-text.mud-button-text-error:hover {
    background: rgba(244, 67, 54, 0.1) !important;
}

/* Warning buttons */
.mud-button-outlined.mud-button-outlined-warning {
    border-color: rgba(255, 152, 0, 0.5) !important;
    color: #FFB74D !important;
}

.mud-button-text.mud-button-text-warning {
    color: #FFB74D !important;
}

/* Secondary buttons - NOT cyan */
.mud-button-outlined.mud-button-outlined-secondary {
    border-color: rgba(148, 163, 184, 0.4) !important;
    color: var(--starlight-silver) !important;
}

.mud-button-text.mud-button-text-secondary {
    color: var(--starlight-silver) !important;
}

/* ==========================================================================
   MUDAVATAR - Consistent styling
   ========================================================================== */

.mud-avatar {
    font-weight: 600 !important;
    font-size: 0.75rem !important;
    letter-spacing: 0.5px;
}

/* Default avatar - charcoal with subtle border */
.mud-avatar.mud-avatar-color-default {
    background: rgba(255, 255, 255, 0.08) !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    color: var(--starlight-silver) !important;
}

/* Primary avatar */
.mud-avatar.mud-avatar-color-primary {
    background: linear-gradient(135deg, rgba(33, 150, 243, 0.3) 0%, rgba(33, 150, 243, 0.15) 100%) !important;
    border: 1px solid rgba(33, 150, 243, 0.4) !important;
    color: var(--ts-blue-light) !important;
}

/* Error avatar - softer */
.mud-avatar.mud-avatar-color-error {
    background: rgba(244, 67, 54, 0.2) !important;
    border: 1px solid rgba(244, 67, 54, 0.3) !important;
    color: #EF9A9A !important;
}

/* Secondary avatar - NOT cyan */
.mud-avatar.mud-avatar-color-secondary {
    background: rgba(148, 163, 184, 0.15) !important;
    border: 1px solid rgba(148, 163, 184, 0.25) !important;
    color: var(--starlight-silver) !important;
}

/* ==========================================================================
   MUDBADGE - Status indicators
   ========================================================================== */

.mud-badge .mud-badge-content {
    font-size: 0.65rem !important;
    font-weight: 600;
}

/* ==========================================================================
   MUDTOOLTIP - Match theme
   ========================================================================== */

.mud-tooltip {
    background: rgba(30, 35, 45, 0.95) !important;
    backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    color: var(--pure-white) !important;
    font-size: 0.8rem;
    border-radius: 8px !important;
}

/* ==========================================================================
   MUDSNACKBAR - Toast notifications
   ========================================================================== */

.mud-snackbar {
    background: rgba(30, 35, 45, 0.95) !important;
    backdrop-filter: blur(16px);
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 12px !important;
}

.mud-snackbar.mud-snackbar-color-error {
    border-left: 3px solid #EF9A9A !important;
}

.mud-snackbar.mud-snackbar-color-success {
    border-left: 3px solid #81C784 !important;
}

.mud-snackbar.mud-snackbar-color-warning {
    border-left: 3px solid #FFB74D !important;
}

.mud-snackbar.mud-snackbar-color-info {
    border-left: 3px solid var(--ts-blue) !important;
}

/* ==========================================================================
   MUDINPUT / MUDTEXTFIELD - Form fields (late-file reinforcement)
   NOTE: Primary input rules are in the INPUT SYSTEM section above (~line 970).
   These are kept for specificity reinforcement only.
   Duplicate .mud-list-item rules removed Feb 10, 2026 - see GLOBAL OVERLAY
   STYLING section for the single source of truth.
   ========================================================================== */

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

.mud-input-outlined:hover .mud-input-outlined-border {
    border-color: rgba(33, 150, 243, 0.4) !important;
}

.mud-input-outlined.mud-input-error .mud-input-outlined-border {
    border-color: rgba(244, 67, 54, 0.5) !important;
}

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

/* ==========================================================================
   MUDTABS - Tab styling
   ========================================================================== */

.mud-tabs .mud-tab {
    color: var(--starlight-silver) !important;
}

.mud-tabs .mud-tab.mud-tab-active {
    color: var(--ts-blue) !important;
}

.mud-tabs .mud-tab-slider {
    background: var(--ts-blue) !important;
}

/* ==========================================================================
   MUDPROGRESS - Loading indicators
   ========================================================================== */

.mud-progress-circular svg circle {
    stroke: var(--ts-blue) !important;
}

.mud-progress-linear .mud-progress-linear-bar {
    background: linear-gradient(90deg, var(--ts-blue) 0%, var(--ts-blue-light) 100%) !important;
}

/* ==========================================================================
   HELPER CLASSES FOR MANUAL OVERRIDES
   Use these in markup when Color="..." doesn't give desired result
   ========================================================================== */

/* Text colors */
.ts-text-primary { color: var(--pure-white) !important; }
.ts-text-secondary { color: var(--starlight-silver) !important; }
.ts-text-muted { color: var(--text-muted) !important; }
.ts-text-blue { color: var(--ts-blue-light) !important; }
.ts-text-success { color: #81C784 !important; }
.ts-text-warning { color: #FFB74D !important; }
.ts-text-danger { color: #EF9A9A !important; }

/* Badge/chip alternatives */
.ts-badge {
    display: inline-flex;
    align-items: center;
    padding: 4px 10px;
    border-radius: 12px;
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.ts-badge-success {
    background: rgba(76, 175, 80, 0.15);
    border: 1px solid rgba(76, 175, 80, 0.3);
    color: #81C784;
}

.ts-badge-warning {
    background: rgba(255, 152, 0, 0.15);
    border: 1px solid rgba(255, 152, 0, 0.3);
    color: #FFB74D;
}

.ts-badge-danger {
    background: rgba(244, 67, 54, 0.15);
    border: 1px solid rgba(244, 67, 54, 0.3);
    color: #EF9A9A;
}

.ts-badge-info {
    background: rgba(33, 150, 243, 0.15);
    border: 1px solid rgba(33, 150, 243, 0.3);
    color: var(--ts-blue-light);
}

.ts-badge-neutral {
    background: rgba(148, 163, 184, 0.12);
    border: 1px solid rgba(148, 163, 184, 0.25);
    color: var(--starlight-silver);
}

.ts-badge-purple {
    background: rgba(156, 39, 176, 0.15);
    border: 1px solid rgba(156, 39, 176, 0.3);
    color: #CE93D8;
}

/* ==========================================================================
   FORM BUILDER - Templates Grid & Cards (Jan 21, 2026)
   Matches HR Module premium styling with neon-hover-glow
   ========================================================================== */

.templates-container {
    margin-top: 24px;
}

.templates-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 20px;
}

.template-card {
    background: linear-gradient(135deg, rgba(45, 45, 50, 0.7) 0%, rgba(15, 15, 18, 0.9) 100%);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 16px;
    padding: 20px;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: visible;
}

.template-card:hover {
    background: linear-gradient(135deg, rgba(50, 50, 55, 0.75) 0%, rgba(18, 18, 22, 0.95) 100%);
    border-color: rgba(33, 150, 243, 0.5);
    box-shadow: var(--neon-glow), var(--shadow-elevated);
    transform: translateY(-2px);
}

/* Status-specific left border accent */
.template-card.approved,
.template-card.published {
    border-left: 3px solid var(--success-green);
}

.template-card.draft {
    border-left: 3px solid var(--electric-amber);
}

.template-card.archived {
    border-left: 3px solid var(--starlight-silver);
}

.template-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 12px;
}

.template-type {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--ts-blue);
}

.template-type .mud-icon-root {
    font-size: 14px !important;
}

.template-title {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--pure-white);
    margin: 0 0 12px 0;
    line-height: 1.3;
}

.template-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 16px;
}

.template-meta .meta-item {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 0.8rem;
    color: var(--starlight-silver);
}

.template-meta .meta-item .mud-icon-root {
    font-size: 14px !important;
    color: var(--starlight-silver);
}

.template-meta .meta-item.ai {
    color: var(--ts-blue-light);
}

.template-meta .meta-item.ai .mud-icon-root {
    color: var(--ts-blue-light);
}

.usage-stats {
    display: flex;
    gap: 24px;
    padding: 12px;
    background: rgba(255, 255, 255, 0.03);
    border-radius: 8px;
    margin-bottom: 16px;
}

.usage-stats .stat-item {
    display: flex;
    flex-direction: column;
}

.usage-stats .stat-value {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--pure-white);
}

.usage-stats .stat-label {
    font-size: 0.7rem;
    color: var(--starlight-silver);
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.template-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 12px;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.template-date {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 0.8rem;
    color: var(--text-muted);
}

.template-date .mud-icon-root {
    font-size: 14px !important;
}

.template-actions {
    display: flex;
    gap: 4px;
}

.template-actions .mud-icon-button {
    color: var(--starlight-silver);
}

.template-actions .mud-icon-button:hover {
    color: var(--ts-blue);
    background: rgba(33, 150, 243, 0.1);
}

/* ==========================================================================
   UNIFIED BADGE SYSTEM (Feb 2, 2026)
   All header badges (status, flags, indicators) use consistent styling
   ========================================================================== */

/* Base header badge - use on ALL page header pills */
.header-badge {
    font-size: 0.7rem !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    padding: 4px 12px !important;
    height: 26px !important;
    min-width: auto !important;
    border-radius: 13px !important;
}

/* Ensure MudChip inside header-badge is consistent */
.header-badge .mud-chip-content {
    padding: 0 !important;
}

/* Status badges - colored backgrounds */
.header-badge.status-active {
    background: rgba(76, 175, 80, 0.2) !important;
    color: #81C784 !important;
    border: 1px solid rgba(76, 175, 80, 0.4) !important;
}

.header-badge.status-inactive {
    background: rgba(239, 83, 80, 0.2) !important;
    color: #EF5350 !important;
    border: 1px solid rgba(239, 83, 80, 0.4) !important;
}

/* Info badges - subtle/muted style */
.header-badge.info-badge {
    background: rgba(33, 150, 243, 0.15) !important;
    color: #64B5F6 !important;
    border: 1px solid rgba(33, 150, 243, 0.3) !important;
}

/* Warning badges */
.header-badge.warning-badge {
    background: rgba(255, 152, 0, 0.15) !important;
    color: #FFB74D !important;
    border: 1px solid rgba(255, 152, 0, 0.3) !important;
}

/* ==========================================================================
   TABLE CHIPS - Unified styling for all table badges (Feb 6, 2026)
   Ensures consistent size across Type, Priority, Status columns
   ========================================================================== */

/* Base class for ALL table chips - ensures consistent sizing */
.table-chip,
.type-chip,
.priority-chip,
.status-chip {
    font-size: 0.7rem !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.3px !important;
    padding: 2px 10px !important;
    height: 24px !important;
    min-height: 24px !important;
    line-height: 1.4 !important;
}

/* MudChip overrides - ensure Size.Small is consistent */
.mud-chip.mud-chip-size-small.type-chip,
.mud-chip.mud-chip-size-small.priority-chip,
.mud-chip.mud-chip-size-small.status-chip {
    height: 24px !important;
    font-size: 0.7rem !important;
}

/* Status chips with dropdown - add slight padding for icon */
.status-chip.clickable {
    padding-right: 6px !important;
    cursor: pointer;
}

/* Dropdown icon inside status chip - make it smaller and aligned */
.status-chip .status-dropdown-icon {
    font-size: 14px !important;
    margin-left: 2px;
    opacity: 0.7;
}

/* Legacy status-chip styling (for backwards compatibility) */
.status-chip {
    /* Base styles now inherited from unified rule above */
}

/* Job Status Chip Colors (Feb 6, 2026) */
.status-chip.draft {
    background: rgba(255, 152, 0, 0.15) !important;
    color: #FFB74D !important;
}
.status-chip.scheduled {
    background: rgba(255, 215, 64, 0.15) !important;
    color: #FFE082 !important;
}
.status-chip.inprogress,
.status-chip.in-progress {
    background: rgba(33, 150, 243, 0.15) !important;
    color: #64B5F6 !important;
}
.status-chip.onhold,
.status-chip.on-hold {
    background: rgba(255, 152, 0, 0.15) !important;
    color: #FFB74D !important;
}
.status-chip.completed {
    background: rgba(76, 175, 80, 0.15) !important;
    color: #81C784 !important;
}
.status-chip.cancelled {
    background: rgba(158, 158, 158, 0.15) !important;
    color: #BDBDBD !important;
}
.status-chip.closed {
    background: rgba(148, 163, 184, 0.12) !important;
    color: #94A3B8 !important;
}

/* Generic status chip colors (backward compat) */
.status-chip.approved,
.status-chip.published {
    background: rgba(76, 175, 80, 0.15) !important;
    color: #81C784 !important;
}

.status-chip.archived {
    background: rgba(148, 163, 184, 0.12) !important;
    color: var(--starlight-silver) !important;
}

/* POWRA / H&S assessment outcome chips */
.status-chip.safe {
    background: rgba(76, 175, 80, 0.15) !important;
    color: #81C784 !important;
}
.status-chip.unsafe {
    background: rgba(239, 68, 68, 0.15) !important;
    color: #ef4444 !important;
}

/* AI Summary Card Special Styling */
.summary-card.ai {
    border-left: 3px solid var(--ts-blue);
}

.summary-card.ai.selected {
    /* Feb 9, 2026: Defers to universal .summary-card.selected rule */
    background: transparent !important;
    border-color: rgba(33, 150, 243, 0.6) !important;
    box-shadow: var(--neon-glow-intense) !important;
}

/* ==========================================================================
   FORM BUILDER - Upload Zone (CreateFormTemplate)
   ========================================================================== */

.upload-zone {
    border: 2px dashed rgba(33, 150, 243, 0.3);
    border-radius: 16px;
    padding: 48px 24px;
    text-align: center;
    background: rgba(33, 150, 243, 0.05);
    transition: all 0.3s ease;
    cursor: pointer;
}

.upload-zone:hover {
    border-color: rgba(33, 150, 243, 0.6);
    background: rgba(33, 150, 243, 0.1);
    box-shadow: 0 0 30px rgba(33, 150, 243, 0.15);
}

.upload-zone .upload-icon {
    color: var(--ts-blue);
    margin-bottom: 16px;
}

.upload-zone h4 {
    color: var(--pure-white);
    font-weight: 500;
    margin-bottom: 8px;
}

.upload-zone p {
    color: var(--starlight-silver);
    font-size: 0.9rem;
    margin: 0;
}

.upload-zone .upload-hint {
    font-size: 0.8rem;
    color: var(--text-muted);
    margin-top: 8px;
}

/* ==========================================================================
   FORM BUILDER - Field Editor (EditFormTemplate)
   ========================================================================== */

.field-editor-container {
    display: grid;
    grid-template-columns: 1fr 350px;
    gap: 24px;
}

.fields-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.field-item {
    background: linear-gradient(135deg, rgba(45, 45, 50, 0.5) 0%, rgba(15, 15, 18, 0.7) 100%);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 12px;
    padding: 16px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.field-item:hover {
    border-color: rgba(33, 150, 243, 0.3);
    background: rgba(33, 150, 243, 0.05);
}

.field-item.selected {
    border-color: rgba(33, 150, 243, 0.5);
    background: rgba(33, 150, 243, 0.1);
    box-shadow: 0 0 15px rgba(33, 150, 243, 0.2);
}

.field-label {
    font-weight: 600;
    color: var(--pure-white);
    margin-bottom: 4px;
}

.field-type {
    font-size: 0.8rem;
    color: var(--starlight-silver);
}

.field-confidence {
    font-size: 0.75rem;
    padding: 2px 8px;
    border-radius: 4px;
    background: rgba(33, 150, 243, 0.1);
    color: var(--ts-blue-light);
}

.field-properties-panel {
    background: linear-gradient(135deg, rgba(45, 45, 50, 0.7) 0%, rgba(15, 15, 18, 0.9) 100%);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 16px;
    padding: 24px;
    position: sticky;
    top: 24px;
}

.panel-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 20px;
    padding-bottom: 16px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.panel-icon {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, rgba(33, 150, 243, 0.3) 0%, rgba(33, 150, 243, 0.15) 100%);
    border: 1px solid rgba(33, 150, 243, 0.4);
    color: var(--ts-blue-light);
}

.panel-title {
    font-size: 1rem;
    font-weight: 600;
    color: var(--pure-white);
}