/* =================================================================== */
/* CRITICAL: FIRST PAINT STABILIZATION - PREVENT FLICKER/BOUNCE */
/* =================================================================== */

/* Override MudBlazor CSS variables with gradient - inspired by dark mode approach */
:root {
    --mud-palette-background: linear-gradient(135deg, #FAFAFA 0%, #F5F5F5 100%) !important;
    --mud-palette-surface: #FAFAFA;
}

/* Force gradient on body and layout after MudBlazor theme loads */
body,
html,
.mud-layout,
.mud-main-content {
    background: linear-gradient(135deg, #FAFAFA 0%, #F5F5F5 100%) !important;
}

/* Force immediate layout stability - no reflow during hydration */
html, body {
    overflow-x: hidden;
    width: 100%;
    min-height: 100vh;
    margin: 0;
    padding: 0;
    /* Use MudBlazor variable which now contains the gradient */
    background: var(--mud-palette-background);
    /* Prevent font loading from causing layout shift */
    font-family: 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

/* Prevent content jump during Blazor hydration */
body {
    visibility: visible !important;
    opacity: 1 !important;
}

/* AGGRESSIVE: Prevent ALL layout shifts during initial 2 seconds */
body:not(.hydration-complete) * {
    transition: none !important;
    animation: none !important;
    transform: none !important;
}

/* Prevent MudBlazor components from changing size during load */
body:not(.hydration-complete) .mud-button-root,
body:not(.hydration-complete) .mud-menu,
body:not(.hydration-complete) .mud-popover,
body:not(.hydration-complete) .mud-image {
    transition: none !important;
    animation: none !important;
    transform: none !important;
}

/* CRITICAL: Prevent MudBlazor initialization bounce */
.mud-layout {
    /* Force stable layout immediately */
    min-height: 100vh !important;
    display: flex !important;
    flex-direction: column !important;
    /* Make layout transparent to show body gradient */
    background: transparent !important;
}

/* Make main content transparent to show body gradient */
.mud-main-content {
    background: transparent !important;
}

/* Ensure all MudBlazor layout components are transparent */
.mud-container,
.mud-container-fixed,
.mud-container-maxwidth-xs,
.mud-container-maxwidth-sm,
.mud-container-maxwidth-md,
.mud-container-maxwidth-lg,
.mud-container-maxwidth-xl {
    background: transparent !important;
}

.mud-appbar {
    /* Lock AppBar dimensions to prevent size changes */
    height: 64px !important;
    min-height: 64px !important;
    max-height: 64px !important;
    flex-shrink: 0 !important;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 1100 !important;
}

.mud-appbar .mud-toolbar {
    /* Lock toolbar dimensions */
    height: 64px !important;
    min-height: 64px !important;
    max-height: 64px !important;
    padding: 0 16px !important;
}

.mud-main-content {
    /* Force stable main content area */
    margin-top: 64px !important;
    padding-top: 0 !important;
    min-height: calc(100vh - 64px) !important;
    flex: 1 !important;
}

/* Ensure MudBlazor layout is stable from first paint */
.mud-layout {
    min-height: 100vh;
}

/* AppBar fixed at top - prevents bounce */
.mud-appbar {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 1100 !important;
}

/* Main content offset for fixed AppBar */
.mud-main-content {
    padding-top: 64px !important;
    min-height: calc(100vh - 64px);
}

/* MainLayout Styles - Fixed heights prevent vertical bounce */
.mud-appbar {
    height: 64px !important;
    min-height: 64px !important;
    max-height: 64px !important;
}

.mud-appbar .mud-toolbar {
    height: 64px !important;
    min-height: 64px !important;
    max-height: 64px !important;
    padding: 0 16px;
}

/* CRITICAL: Logo size locked at first paint - prevents CLS */
.mud-button-root.logo-button {
    padding: 8px !important;
    min-width: auto !important;
    max-width: 170px !important;
    width: 170px !important; /* Fixed width prevents reflow */
    height: 60px !important;
    flex-shrink: 0;
    overflow: hidden;
    transition: none !important;
    transform: none !important;
    animation: none !important;
    will-change: auto !important; /* Disable GPU acceleration that causes flicker */
}

.mud-button-root.logo-button .mud-button-label {
    padding: 0 !important;
    min-width: auto !important;
    width: auto !important;
    height: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* Logo size enforcement - lock dimensions at first paint */
.mud-image.logo-image,
.mud-image.logo-image img,
.mud-button-root.logo-button .mud-image,
.mud-button-root.logo-button .mud-image img,
.mud-button-root.logo-button .mud-image-root,
.mud-button-root.logo-button .mud-image-root img,
img[src="/images/IW-logo-RGB.png"],
img[src*="IW-logo-RGB.png"] {
    height: 45px !important;
    max-height: 45px !important;
    min-height: 45px !important;
    max-width: 150px !important;
    width: 150px !important;
    object-fit: contain !important;
    display: block !important;
    /* Disable all animations and transitions that cause flash */
    transition: none !important;
    transform: none !important;
    animation: none !important;
    will-change: auto !important;
    /* Force immediate rendering */
    image-rendering: auto !important;
}

.account-menu .mud-menu-activator {
    padding: 8px;
}

/* =================================================================== */
/* HORIZONTAL NAVIGATION BAR - MODERN TOP NAVBAR */
/* =================================================================== */

/* Horizontal navigation container */
.horizontal-nav {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-left: 16px;
}

/* Navigation buttons styling */
.nav-button {
    text-transform: none !important;
    font-weight: 500 !important;
    padding: 8px 16px !important;
    border-radius: 8px !important;
    transition: all 0.2s ease !important;
    background-color: transparent !important;
}

.nav-button:hover {
    background-color: rgba(255, 255, 255, 0.1) !important;
    transform: translateY(-1px);
}

/* Active navigation state - only when actually on that page */
.nav-button.mud-button-root[href="/"]:active,
.nav-button.mud-button-root[href="/"]:focus {
    background-color: transparent !important;
}

/* Navigation menu dropdown styling */
.nav-button .mud-menu-activator {
    text-transform: none !important;
    font-weight: 500 !important;
}

/* Ensure main content takes full width (no side drawer) */
.mud-main-content {
    margin-left: 0 !important;
    transition: none;
}

/* Mobile Navigation Menu Button */
.mobile-nav-menu-button {
    margin-left: 8px;
}

.mobile-nav-menu-button .mud-menu-activator {
    min-width: 44px;
    min-height: 44px;
}

/* Mobile menu items styling */
@media (max-width: 959px) {
    .mud-menu .mud-list .mud-list-item {
        min-height: 48px;
        padding: 12px 16px;
    }
    
    .mud-menu .mud-list .mud-list-item-icon {
        min-width: 40px;
    }
}

/* Mobile responsiveness - Logo and AppBar */
@media (max-width: 599px) {
    .mud-appbar .mud-toolbar {
        padding: 0 8px;
    }
    
    .mud-button-root.logo-button {
        max-width: 200px !important;
        width: 200px !important;
        height: 60px !important;
        padding: 4px !important;
    }
    
    /* Mobile logo sizing */
    .mud-image.logo-image,
    .mud-image.logo-image img,
    .mud-button-root.logo-button .mud-image,
    .mud-button-root.logo-button .mud-image img,
    .mud-button-root.logo-button .mud-image-root,
    .mud-button-root.logo-button .mud-image-root img,
    img[src*="IW-logo-horizontal-RGB.png"] {
        height: 48px !important;
        max-height: 48px !important;
        min-height: 48px !important;
        max-width: 180px !important;
        width: 180px !important;
    }
    
    .mud-appbar .mud-button {
        min-width: auto;
        padding: 4px 8px;
    }
    
    .mud-appbar .mud-icon-button {
        padding: 6px;
        width: 40px;
        height: 40px;
    }
}

@media (max-width: 400px) {
    .mud-button-root.logo-button {
        max-width: 170px !important;
        width: 170px !important;
        height: 50px !important;
        padding: 2px !important;
    }
    
    /* Small mobile logo sizing */
    .mud-image.logo-image,
    .mud-image.logo-image img,
    .mud-button-root.logo-button .mud-image,
    .mud-button-root.logo-button .mud-image img,
    .mud-button-root.logo-button .mud-image-root,
    .mud-button-root.logo-button .mud-image-root img,
    img[src*="IW-logo-horizontal-RGB.png"] {
        height: 40px !important;
        max-height: 40px !important;
        min-height: 40px !important;
        max-width: 150px !important;
        width: 150px !important;
    }
}

/* Mobile-Optimized Dialog Components */

/* Base dialog mobile optimizations */
@media (max-width: 959px) {
    /* Dialog container adjustments */
    .mud-dialog-container {
        padding: 8px !important;
    }
    
    .mud-dialog {
        margin: 0 !important;
        max-height: calc(100vh - 16px) !important;
        width: 100% !important;
        max-width: calc(100vw - 16px) !important;
    }
    
    /* Dialog title optimizations */
    .mud-dialog-title {
        padding: 16px 16px 8px 16px !important;
        font-size: 1.1rem !important;
        line-height: 1.3 !important;
    }
    
    .mud-dialog-title .mud-typography-h5 {
        font-size: 1.1rem !important;
    }
    
    .mud-dialog-title .mud-typography-h6 {
        font-size: 1rem !important;
    }
    
    /* Dialog content optimizations */
    .mud-dialog-content {
        padding: 8px 16px !important;
        max-height: calc(100vh - 140px) !important;
        overflow-y: auto !important;
    }
    
    /* Dialog actions optimizations */
    .mud-dialog-actions {
        padding: 8px 16px 16px 16px !important;
        flex-wrap: wrap !important;
        gap: 8px !important;
    }
    
    .mud-dialog-actions .mud-button {
        min-width: 80px !important;
        height: 44px !important; /* Touch-friendly */
        font-size: 0.875rem !important;
    }
    
    /* Form elements in dialogs */
    .mud-dialog .mud-input {
        margin-bottom: 12px !important;
    }
    
    .mud-dialog .mud-form .mud-grid .mud-grid-item {
        padding: 4px !important;
    }
    
    .mud-dialog .mud-textfield {
        margin-bottom: 8px !important;
    }
    
    .mud-dialog .mud-checkbox {
        margin: 8px 0 !important;
    }
    
    .mud-dialog .mud-select {
        margin-bottom: 8px !important;
    }
}

/* Phone-specific dialog optimizations */
@media (max-width: 599px) {
    .mud-dialog-container {
        padding: 4px !important;
    }
    
    .mud-dialog {
        max-height: calc(100vh - 8px) !important;
        max-width: calc(100vw - 8px) !important;
    }
    
    .mud-dialog-title {
        padding: 12px 12px 6px 12px !important;
        font-size: 1rem !important;
    }
    
    .mud-dialog-content {
        padding: 6px 12px !important;
        max-height: calc(100vh - 120px) !important;
    }
    
    .mud-dialog-actions {
        padding: 6px 12px 12px 12px !important;
        flex-direction: column !important;
    }
    
    .mud-dialog-actions .mud-button {
        width: 100% !important;
        margin: 2px 0 !important;
    }
    
    /* Stack form elements vertically on phones */
    .mud-dialog .mud-grid .mud-grid-item[class*="xs-6"],
    .mud-dialog .mud-grid .mud-grid-item[class*="sm-6"] {
        flex: 0 0 100% !important;
        max-width: 100% !important;
    }
    
    /* Smaller text in dialogs on phones */
    .mud-dialog .mud-typography-h6 {
        font-size: 0.95rem !important;
    }
    
    .mud-dialog .mud-typography-body1 {
        font-size: 0.875rem !important;
    }
    
    .mud-dialog .mud-typography-body2 {
        font-size: 0.8rem !important;
    }
}

/* Import/Export dialog specific optimizations */
@media (max-width: 959px) {
    .mud-dialog[style*="max-width: 600px"] {
        max-width: calc(100vw - 16px) !important;
    }
}

@media (max-width: 599px) {
    .mud-dialog[style*="max-width: 600px"] {
        max-width: calc(100vw - 8px) !important;
    }
}

/* Table dialogs mobile optimization */
@media (max-width: 959px) {
    .mud-dialog .mud-table-container {
        overflow-x: auto !important;
    }
    
    .mud-dialog .mud-table {
        min-width: 100% !important;
    }
    
    .mud-dialog .mud-table .mud-table-head .mud-table-cell {
        padding: 8px 4px !important;
        font-size: 0.8rem !important;
    }
    
    .mud-dialog .mud-table .mud-table-body .mud-table-cell {
        padding: 8px 4px !important;
        font-size: 0.875rem !important;
    }
}

/* Photo/Image dialog optimizations */
@media (max-width: 959px) {
    .mud-dialog .mud-image {
        max-width: 100% !important;
        height: auto !important;
    }
    
    .mud-dialog .mud-card-media {
        max-height: 40vh !important;
    }
}

/* Mobile-Optimized Dialog Component Classes - styles applied via media queries above */

.mobile-dialog-title {
    font-weight: 600 !important;
    margin-bottom: 8px !important;
}

.mobile-dialog-title-phone {
    font-weight: 600 !important;
    margin-bottom: 4px !important;
    line-height: 1.2 !important;
}

.mobile-dialog-content {
    padding-top: 8px !important;
}

.mobile-dialog-content-phone {
    padding-top: 4px !important;
}

.mobile-dialog-actions {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 8px !important;
}

.mobile-dialog-actions-phone {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 8px !important;
}

.mobile-dialog-button {
    min-height: 36px !important;
}

.mobile-dialog-button-phone {
    min-height: 44px !important;
    width: 100% !important;
    font-size: 0.875rem !important;
}

/* Form-specific mobile optimizations */
@media (max-width: 599px) {
    .mobile-optimized-form-dialog .mud-grid .mud-grid-item {
        padding: 4px !important;
    }
    
    .mobile-optimized-form-dialog .mud-textfield,
    .mobile-optimized-form-dialog .mud-select,
    .mobile-optimized-form-dialog .mud-input {
        margin-bottom: 12px !important;
    }
    
    .mobile-optimized-form-dialog .mud-checkbox {
        margin: 12px 0 !important;
    }
}

/* Confirmation dialog specific styles */
.mobile-optimized-confirm-dialog .mud-alert {
    border-radius: 8px !important;
}

@media (max-width: 599px) {
    .mobile-optimized-confirm-dialog .mud-alert {
        font-size: 0.8rem !important;
        padding: 8px 12px !important;
    }
}

/* Ensure proper spacing and alignment */
.mud-appbar-toolbar {
    gap: 8px;
}

.mud-menu .mud-list-item {
    padding: 12px 16px;
}

.mud-menu .mud-list-item-icon {
    margin-right: 12px;
}

/* =================================================================== */
/* MOBILE-SPECIFIC IMPROVEMENTS - SPACING & TOUCH TARGETS */
/* =================================================================== */

/* Improved list spacing and wrapping */
.mud-list .mud-list-item {
    min-height: 48px; /* Touch-friendly */
    padding: 12px 16px;
}

.mud-table .mud-table-row {
    min-height: 52px; /* Better touch targets on mobile */
}

/* Section headers with better hierarchy */
.section-title {
    margin-top: 16px;
    margin-bottom: 12px;
    font-weight: 600;
}

/* Table footer spacing */
.mud-table .mud-table-pagination {
    margin-top: 16px;
    padding-top: 12px;
}

/* Improved chip wrapping */
.mud-chip-set {
    gap: 8px;
    flex-wrap: wrap;
}

/* Better action button spacing */
.mud-table .mud-table-cell .mud-button-group {
    gap: 4px;
}

/* Mobile-optimized pagination */
@media (max-width: 599px) {
    .mud-table-pagination .mud-pagination-nav {
        flex-wrap: wrap;
        gap: 4px;
    }
    
    .mud-table-pagination .mud-select {
        min-width: 60px;
    }
    
    /* Compact table cells on mobile */
    .mud-table .mud-table-cell {
        padding: 8px 4px;
        font-size: 0.875rem;
    }
    
    /* Stack action buttons vertically on very small screens */
    .mud-table .mud-table-cell .mud-button-group {
        flex-direction: column;
        gap: 2px;
    }
}


.nav-section-title {
    padding: 8px 16px 4px 16px;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--mud-palette-text-secondary);
    opacity: 0.8;
}

.nav-link-custom {
    margin: 2px 8px;
    border-radius: 8px;
    transition: all 0.2s ease;
}

.nav-link-custom:hover {
    background-color: var(--mud-palette-action-hover);
    transform: translateX(2px);
}

.nav-link-custom.active {
    background-color: var(--mud-palette-primary);
    color: var(--mud-palette-primary-text);
    font-weight: 500;
}

.nav-link-custom .mud-nav-link-text {
    font-size: 0.9rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.nav-group-custom {
    margin: 2px 8px;
}

.nav-group-custom .mud-nav-group-header {
    border-radius: 8px;
    padding: 12px 16px;
    transition: all 0.2s ease;
}

.nav-group-custom .mud-nav-group-header:hover {
    background-color: var(--mud-palette-action-hover);
}

.nav-group-custom .mud-collapse-container {
    margin-left: 8px;
    border-left: 2px solid var(--mud-palette-divider);
    padding-left: 8px;
}

.nav-group-custom .mud-nav-link {
    margin: 1px 0;
    border-radius: 6px;
    font-size: 0.85rem;
}

/* MudBlazor Mini Drawer - Icons Only When Collapsed */
.mud-drawer.mud-drawer--mini .mud-nav-link-text {
    display: none !important;
}

.mud-drawer.mud-drawer--mini .nav-menu-header {
    display: none !important;
}

.mud-drawer.mud-drawer--mini .nav-menu-title {
    display: none !important;
}

.mud-drawer.mud-drawer--mini .nav-section-title {
    display: none !important;
}

.mud-drawer.mud-drawer--mini .mud-nav-group-text {
    display: none !important;
}

/* Center icons when drawer is mini */
.mud-drawer.mud-drawer--mini .mud-nav-link {
    justify-content: center;
    padding-left: 0.5rem;
    padding-right: 0.5rem;
}

.mud-drawer.mud-drawer--mini .mud-nav-link .mud-icon-root {
    margin-left: auto;
    margin-right: auto;
}

.mud-drawer.mud-drawer--mini .mud-nav-group-header {
    justify-content: center;
    padding-left: 0.5rem;
    padding-right: 0.5rem;
}

.mud-drawer.mud-drawer--mini .mud-nav-group-header .mud-icon-root {
    margin-left: auto;
    margin-right: auto;
}

/* Mobile specific adjustments */
@media (max-width: 959px) {
    .nav-menu-header {
        padding: 12px 16px;
    }
    
    .nav-menu-title {
        font-size: 1rem;
    }
}

/* Dark mode adjustments */
.mud-theme-dark .nav-menu-header {
    background: var(--mud-palette-surface);
    border-bottom-color: var(--mud-palette-lines-default);
}

.mud-theme-dark .nav-link-custom.active {
    background-color: var(--mud-palette-primary);
    color: var(--mud-palette-primary-text);
}

.mud-theme-dark .nav-group-custom .mud-collapse-container {
    border-left-color: var(--mud-palette-lines-default);
}

/* Animation for nav items */
.nav-item-enter {
    opacity: 0;
    transform: translateX(-10px);
}

.nav-item-enter-active {
    opacity: 1;
    transform: translateX(0);
    transition: opacity 0.3s ease, transform 0.3s ease;
}

/* Responsive drawer adjustments */
@media (max-width: 959px) {
    .mud-drawer-temporary {
        backdrop-filter: blur(4px);
    }
    
    .mud-drawer-temporary .mud-drawer-content {
        box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
    }
}

/* Import/Export Component Styles */
.import-export-dropzone {
    border: 2px dashed var(--mud-palette-lines-default);
    border-radius: 8px;
    padding: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
    background: var(--mud-palette-surface);
    margin: 8px 0;
}

.import-export-dropzone:hover {
    border-color: var(--mud-palette-primary);
    background: var(--mud-palette-action-hover);
    transform: translateY(-1px);
}

.import-export-dropzone.dragover {
    border-color: var(--mud-palette-primary);
    background: var(--mud-palette-action-selected);
    box-shadow: 0 4px 12px rgba(var(--mud-palette-primary-rgb), 0.15);
}

.import-export-progress {
    margin: 16px 0;
}

.import-export-results {
    margin: 16px 0;
}

.import-export-error-list {
    margin: 8px 0;
    padding-left: 16px;
}

.import-export-error-list li {
    margin: 4px 0;
    font-size: 0.875rem;
    color: white;
}

/* Ensure white text in MudAlert error variants */
.mud-alert-filled-error .mud-alert-message,
.mud-alert-filled-error .mud-alert-message *,
.mud-alert-filled-error ul li {
    color: white !important;
}

/* Dark mode specific adjustments */
.mud-theme-dark .import-export-dropzone {
    border-color: var(--mud-palette-lines-default);
    background: var(--mud-palette-surface);
}

.mud-theme-dark .import-export-dropzone:hover {
    border-color: var(--mud-palette-primary);
    background: var(--mud-palette-action-hover);
}

.mud-theme-dark .import-export-dropzone.dragover {
    border-color: var(--mud-palette-primary);
    background: var(--mud-palette-action-selected);
}

/* Responsive adjustments for import/export */
@media (max-width: 599px) {
    .import-export-dropzone {
        padding: 16px;
        margin: 4px 0;
    }
    
    .import-export-dropzone .mud-stack {
        gap: 8px;
    }
    
    .import-export-dropzone .mud-icon-root {
        font-size: 2rem;
    }
}

/* Accessibility improvements */
.import-export-dropzone:focus {
    outline: 2px solid var(--mud-palette-primary);
    outline-offset: 2px;
}

.import-export-dropzone[aria-disabled="true"] {
    opacity: 0.6;
    cursor: not-allowed;
    pointer-events: none;
}

/* Progress animation */
@keyframes import-progress-pulse {
    0% {
        opacity: 1;
    }
    50% {
        opacity: 0.7;
    }
    100% {
        opacity: 1;
    }
}

.import-export-progress .mud-progress-linear.mud-progress-indeterminate {
    animation: import-progress-pulse 2s ease-in-out infinite;
}

/* Error details collapse animation */
.import-export-error-details {
    transition: all 0.3s ease;
}

.import-export-error-details.collapsed {
    max-height: 0;
    overflow: hidden;
}

.import-export-error-details.expanded {
    max-height: 300px;
    overflow-y: auto;
}

/* Table Row Hover Styles */
.mud-table .mud-table-row:hover {
    background-color: var(--mud-palette-action-hover) !important;
    transition: background-color 0.2s ease;
}

.mud-table .mud-table-row:hover .mud-table-cell {
    background-color: transparent !important;
}

/* Dark mode table row hover */
.mud-theme-dark .mud-table .mud-table-row:hover {
    background-color: var(--mud-palette-action-hover) !important;
}

/* Ensure clickable cells maintain pointer cursor */
.mud-table .mud-table-cell[style*="cursor: pointer"] {
    transition: background-color 0.2s ease;
}

/* Subtle highlight for better UX */
.mud-table .mud-table-row:hover .mud-table-cell[style*="cursor: pointer"] {
    background-color: rgba(var(--mud-palette-primary-rgb), 0.04) !important;
}

/* =================================================================== */
/* MOBILE-FIRST RESPONSIVE DESIGN ENHANCEMENTS */
/* =================================================================== */

/* 1. MOBILE CARD LAYOUT SYSTEM */
.mobile-card-layout {
    padding: clamp(8px, 2vw, 16px);
    margin: 8px 0;
    border-radius: 12px;
    background: var(--mud-palette-surface);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    transition: all 0.2s ease;
}

.mobile-card-layout:hover {
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
    transform: translateY(-1px);
}

.mobile-card-section {
    padding: 12px 16px;
    border-radius: 8px;
    background: var(--mud-palette-background);
    margin: 8px 0;
}

/* 2. ENHANCED TYPOGRAPHY */
.mobile-typography {
    font-size: clamp(0.875rem, 2.5vw, 1rem);
    line-height: 1.5;
    color: var(--mud-palette-text-primary);
}

.mobile-typography h1, .mobile-typography .mud-typography-h1 {
    font-size: clamp(1.5rem, 4vw, 2rem);
    font-weight: 600;
    margin-bottom: 16px;
}

.mobile-typography h2, .mobile-typography .mud-typography-h2 {
    font-size: clamp(1.25rem, 3.5vw, 1.75rem);
    font-weight: 500;
    margin-bottom: 12px;
}

.mobile-typography h3, .mobile-typography .mud-typography-h3 {
    font-size: clamp(1.125rem, 3vw, 1.5rem);
    font-weight: 500;
    margin-bottom: 8px;
}

.mobile-typography .mud-typography-body1 {
    font-size: clamp(0.875rem, 2.5vw, 1rem);
    line-height: 1.6;
}

.mobile-typography .mud-typography-body2 {
    font-size: clamp(0.75rem, 2vw, 0.875rem);
    line-height: 1.5;
}

/* 3. TOUCH-FRIENDLY INTERACTIONS */
.mobile-touch-friendly {
    min-height: 44px;
    min-width: 44px;
    padding: 12px 16px;
    border-radius: 8px;
    transition: all 0.2s ease;
}

.mobile-touch-friendly:hover {
    transform: scale(1.02);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.mobile-touch-friendly:active {
    transform: scale(0.98);
}

/* Enhanced button sizing for mobile */
.mud-button-root.mobile-button {
    min-height: 44px;
    padding: 12px 20px;
    font-size: 0.9rem;
    font-weight: 500;
}

.mud-icon-button.mobile-icon-button {
    width: 44px;
    height: 44px;
    padding: 10px;
}

/* 4. STATUS CHIP ENHANCEMENTS - Updated for Orange & Grey Theme */
.status-chip-enhanced {
    font-weight: 600;
    font-size: 0.75rem;
    padding: 6px 12px;
    border-radius: 16px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
}

.status-chip-enhanced.status-pending {
    background-color: #FF9800;    /* Orange 500 - Primary brand color */
    color: #FFFFFF;
}

.status-chip-enhanced.status-in-progress {
    background-color: #2196F3;    /* Blue 500 - Info color */
    color: #FFFFFF;
}

.status-chip-enhanced.status-complete {
    background-color: #4CAF50;    /* Green 500 - Success color */
    color: #FFFFFF;
}

.status-chip-enhanced.status-void {
    background-color: #757575;    /* Grey 600 - Neutral */
    color: #FFFFFF;
}

.status-chip-enhanced.status-probationary {
    background-color: #FFB74D;    /* Orange 300 - Lighter orange */
    color: #212121;               /* Grey 900 - High contrast text */
}

/* 5. FLOATING ACTION BUTTON */
.fab-container {
    position: fixed;
    bottom: 24px;
    right: 24px;
    z-index: 1000;
}

.fab-container .mud-fab {
    width: 56px;
    height: 56px;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
    transition: all 0.3s ease;
}

.fab-container .mud-fab:hover {
    transform: scale(1.1);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2);
}

/* Hide FAB on desktop, show on mobile */
@media (min-width: 960px) {
    .fab-container.mobile-only {
        display: none;
    }
}

/* 6. HIGH CONTRAST COLORS - Updated for Orange & Grey Theme */
.mobile-high-contrast {
    --contrast-primary: #FF9800;      /* Orange 500 - Primary brand color */
    --contrast-secondary: #E65100;    /* Deep Orange 900 - Secondary */
    --contrast-success: #4CAF50;      /* Green 500 - Success */
    --contrast-warning: #FF9800;      /* Orange 500 - Warning (matches primary) */
    --contrast-error: #F44336;        /* Red 500 - Error */
    --contrast-info: #2196F3;         /* Blue 500 - Info */
}

.mobile-high-contrast .mud-chip {
    font-weight: 600;
}

.mobile-high-contrast .mud-button-filled {
    font-weight: 600;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

/* 7. LOADING STATES */
.mobile-loading-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
}

.mobile-loading-content {
    background: var(--mud-palette-surface);
    padding: 24px;
    border-radius: 12px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
    text-align: center;
    min-width: 200px;
}

/* 8. MOBILE FILTERS */
.mobile-filters {
    background: var(--mud-palette-surface);
    border-radius: 12px;
    padding: 16px;
    margin: 8px 0;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.mobile-filters .mud-input-control {
    margin-bottom: 12px;
}

.mobile-filters .filter-actions {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
    margin-top: 16px;
}

/* 9. MOBILE TABLE CONTAINER */
.mobile-table-container {
    background: var(--mud-palette-surface);
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    margin: 8px 0;
}

.mobile-table-container .mud-table {
    border-radius: 0;
    box-shadow: none;
}

/* 10. RESPONSIVE BREAKPOINTS */

/* Tablet (≤959px) */
@media (max-width: 959px) {
    .hide-on-tablet {
        display: none !important;
    }
    
    .mobile-card-layout {
        margin: 6px 0;
        padding: 12px;
    }
    
    .mobile-filters {
        padding: 12px;
    }
    
    .fab-container {
        bottom: 20px;
        right: 20px;
    }
}

/* Mobile (≤599px) */
@media (max-width: 599px) {
    .hide-on-mobile {
        display: none !important;
    }
    
    .mobile-card-layout {
        margin: 4px 0;
        padding: 8px;
        border-radius: 8px;
    }
    
    .mobile-card-section {
        padding: 8px 12px;
        margin: 6px 0;
    }
    
    .mobile-filters {
        padding: 8px;
        margin: 4px 0;
    }
    
    .mobile-filters .filter-actions {
        flex-direction: column;
        gap: 6px;
    }
    
    .mobile-table-container {
        margin: 4px 0;
        border-radius: 8px;
    }
    
    .fab-container {
        bottom: 16px;
        right: 16px;
    }
    
    .fab-container .mud-fab {
        width: 48px;
        height: 48px;
    }
    
    /* Compact typography on mobile */
    .mobile-typography {
        font-size: 0.875rem;
    }
    
    /* Smaller touch targets on very small screens */
    .mobile-touch-friendly {
        min-height: 40px;
        padding: 10px 14px;
    }
    
    .mud-button-root.mobile-button {
        min-height: 40px;
        padding: 10px 16px;
        font-size: 0.85rem;
    }
    
    .mud-icon-button.mobile-icon-button {
        width: 40px;
        height: 40px;
        padding: 8px;
    }
}

/* Small Mobile (≤400px) */
@media (max-width: 400px) {
    .mobile-card-layout {
        margin: 2px 0;
        padding: 6px;
    }
    
    .mobile-card-section {
        padding: 6px 8px;
        margin: 4px 0;
    }
    
    .mobile-filters {
        padding: 6px;
    }
    
    .fab-container {
        bottom: 12px;
        right: 12px;
    }
    
    .fab-container .mud-fab {
        width: 44px;
        height: 44px;
    }
    
    /* Ultra-compact on very small screens */
    .mobile-typography {
        font-size: 0.8rem;
    }
    
    .mobile-touch-friendly {
        min-height: 36px;
        padding: 8px 12px;
    }
}

/* 11. MOBILE-ONLY DASHBOARD NOTIFICATION BANNER */
.mobile-limit-banner {
    position: fixed;
    left: 12px;
    right: 12px;
    bottom: 12px;
    padding: 12px 16px;
    border-radius: 12px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
    backdrop-filter: blur(8px);
    background: rgba(32, 32, 40, 0.9);
    color: #ffffff;
    display: flex;
    align-items: center;
    font-size: 0.9rem;
    z-index: 1100;
    animation: slideUp 0.3s ease-out;
}

.mobile-limit-banner .mud-icon-root {
    margin-right: 8px;
    color: #FFC107;
}

.mobile-limit-banner .mud-button {
    margin-left: auto;
    color: #ffffff;
    font-size: 0.8rem;
}

@keyframes slideUp {
    from {
        transform: translateY(100%);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

/* Hide banner on tablet and larger */
@media (min-width: 600px) {
    .mobile-limit-banner {
        display: none !important;
    }
}

/* 12. DARK MODE ENHANCEMENTS */
.mud-theme-dark .mobile-card-layout {
    background: var(--mud-palette-surface);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.mud-theme-dark .mobile-card-section {
    background: var(--mud-palette-background);
}

.mud-theme-dark .mobile-filters {
    background: var(--mud-palette-surface);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.mud-theme-dark .mobile-table-container {
    background: var(--mud-palette-surface);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.mud-theme-dark .mobile-limit-banner {
    background: rgba(48, 48, 60, 0.9);
    color: #ffffff;
}

/* 13. ACCESSIBILITY ENHANCEMENTS */
.mobile-touch-friendly:focus {
    outline: 2px solid var(--mud-palette-primary);
    outline-offset: 2px;
}

.status-chip-enhanced:focus {
    outline: 2px solid var(--mud-palette-primary);
    outline-offset: 2px;
}

/* High contrast mode support */
@media (prefers-contrast: high) {
    .mobile-card-layout {
        border: 2px solid var(--mud-palette-text-primary);
    }
    
    .status-chip-enhanced {
        border: 2px solid currentColor;
    }
}

/* 13.1 MOBILE LIST ROW (Counts/Snapshots) */
.mobile-list-row {
    cursor: pointer;
}

.mobile-list-row .list-row {
    display: grid;
    grid-template-columns: auto 1fr auto;
    grid-template-areas:
        "status title action"
        "status meta  action";
    column-gap: 8px;
    row-gap: 4px;
    padding: 12px 8px;
}

.mobile-list-row .list-status { grid-area: status; display: flex; align-items: center; }

.mobile-list-row .list-main {
    min-width: 0; /* allow ellipsis */
}

.mobile-list-row .list-title { grid-area: title; font-weight: 600; font-size: 1rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.mobile-list-row .list-meta { grid-area: meta; color: var(--mud-palette-text-secondary); font-size: 0.875rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.mobile-list-row .list-action { grid-area: action; display: flex; align-items: center; }

@media (max-width: 400px) {
    .mobile-list-row .list-row {
        column-gap: 6px;
        padding: 10px 6px;
    }
    .mobile-list-row .list-title { font-size: 0.95rem; }
    .mobile-list-row .list-meta { font-size: 0.8rem; }
}

/* Wider phones: collapse to one row when space allows */
@media (min-width: 420px) and (max-width: 599px) {
    .mobile-list-row .list-row.compact-on-wide {
        grid-template-areas: "status title action";
        align-items: center;
    }
    .mobile-list-row .list-row.compact-on-wide .list-meta {
        display: none;
    }
}

/* 14. PRINT STYLES */
@media print {
    .fab-container,
    .mobile-limit-banner {
        display: none !important;
    }
    
    .mobile-card-layout {
        box-shadow: none;
        border: 1px solid #000;
    }
}

/* =================================================================== */
/* 12. MUDBLAZOR COMPONENT COLOR OVERRIDES - ORANGE & GREY THEME */
/* =================================================================== */

/* Primary Button Colors - Orange Theme */
.mud-button-filled.mud-button-filled-primary {
    background-color: #FF9800 !important;  /* Orange 500 */
    color: #FFFFFF !important;
}

.mud-button-filled.mud-button-filled-primary:hover {
    background-color: #F57C00 !important;  /* Orange 700 */
    box-shadow: 0 2px 8px rgba(255, 152, 0, 0.3) !important;
}

.mud-button-filled.mud-button-filled-secondary {
    background-color: #E65100 !important;  /* Deep Orange 900 */
    color: #FFFFFF !important;
}

.mud-button-filled.mud-button-filled-secondary:hover {
    background-color: #BF360C !important;  /* Deep Orange A700 */
}

/* Outlined Button Colors */
.mud-button-outlined.mud-button-outlined-primary {
    border-color: #FF9800 !important;      /* Orange 500 */
    color: #FF9800 !important;
}

.mud-button-outlined.mud-button-outlined-primary:hover {
    background-color: rgba(255, 152, 0, 0.08) !important;
    border-color: #F57C00 !important;
}

/* Text Button Colors */
.mud-button-text.mud-button-text-primary {
    color: #FF9800 !important;             /* Orange 500 */
}

.mud-button-text.mud-button-text-primary:hover {
    background-color: rgba(255, 152, 0, 0.08) !important;
}

/* Chip Colors */
.mud-chip.mud-chip-color-primary {
    background-color: #FF9800 !important;  /* Orange 500 */
    color: #FFFFFF !important;
}

.mud-chip.mud-chip-color-secondary {
    background-color: #E65100 !important;  /* Deep Orange 900 */
    color: #FFFFFF !important;
}

.mud-chip.mud-chip-color-success {
    background-color: #4CAF50 !important;  /* Green 500 */
    color: #FFFFFF !important;
}

.mud-chip.mud-chip-color-info {
    background-color: #2196F3 !important;  /* Blue 500 */
    color: #FFFFFF !important;
}

.mud-chip.mud-chip-color-warning {
    background-color: #FF9800 !important;  /* Orange 500 - matches primary */
    color: #FFFFFF !important;
}

.mud-chip.mud-chip-color-error {
    background-color: #F44336 !important;  /* Red 500 */
    color: #FFFFFF !important;
}

/* Icon Colors */
.mud-icon-root.mud-primary-text {
    color: #FF9800 !important;             /* Orange 500 */
}

.mud-icon-root.mud-secondary-text {
    color: #E65100 !important;             /* Deep Orange 900 */
}

.mud-icon-root.mud-success-text {
    color: #4CAF50 !important;             /* Green 500 */
}

.mud-icon-root.mud-info-text {
    color: #2196F3 !important;             /* Blue 500 */
}

.mud-icon-root.mud-warning-text {
    color: #FF9800 !important;             /* Orange 500 */
}

.mud-icon-root.mud-error-text {
    color: #F44336 !important;             /* Red 500 */
}

/* Progress Bar Colors */
.mud-progress-linear.mud-progress-color-primary .mud-progress-linear-bar {
    background-color: #FF9800 !important;  /* Orange 500 */
}

.mud-progress-circular.mud-progress-color-primary circle {
    stroke: #FF9800 !important;            /* Orange 500 */
}

/* Badge Colors */
.mud-badge.mud-badge-color-primary {
    background-color: #FF9800 !important;  /* Orange 500 */
    color: #FFFFFF !important;
}

.mud-badge.mud-badge-color-secondary {
    background-color: #E65100 !important;  /* Deep Orange 900 */
    color: #FFFFFF !important;
}

/* Alert Colors */
.mud-alert.mud-alert-filled-warning {
    background-color: #FF9800 !important;  /* Orange 500 */
    color: #FFFFFF !important;
}

.mud-alert.mud-alert-outlined-warning {
    border-color: #FF9800 !important;      /* Orange 500 */
    color: #E65100 !important;             /* Deep Orange 900 */
}

/* Switch Colors */
.mud-switch.mud-checked .mud-switch-track {
    background-color: rgba(255, 152, 0, 0.5) !important; /* Orange 500 with opacity */
}

.mud-switch.mud-checked .mud-switch-thumb {
    background-color: #FF9800 !important;  /* Orange 500 */
}

/* Checkbox Colors */
.mud-checkbox.mud-checked .mud-checkbox-input {
    background-color: #FF9800 !important;  /* Orange 500 */
    border-color: #FF9800 !important;
}

/* Radio Button Colors */
.mud-radio.mud-checked .mud-radio-input {
    border-color: #FF9800 !important;      /* Orange 500 */
}

.mud-radio.mud-checked .mud-radio-input::after {
    background-color: #FF9800 !important;  /* Orange 500 */
}

/* Slider Colors */
.mud-slider.mud-slider-color-primary .mud-slider-track-active {
    background-color: #FF9800 !important;  /* Orange 500 */
}

.mud-slider.mud-slider-color-primary .mud-slider-thumb {
    background-color: #FF9800 !important;  /* Orange 500 */
}

/* FAB Colors */
.mud-fab.mud-fab-color-primary {
    background-color: #FF9800 !important;  /* Orange 500 */
    color: #FFFFFF !important;
}

.mud-fab.mud-fab-color-primary:hover {
    background-color: #F57C00 !important;  /* Orange 700 */
    box-shadow: 0 6px 20px rgba(255, 152, 0, 0.3) !important;
}

/* Dark Mode Overrides */

/* Dark mode styles disabled - keeping for future reference
.mud-theme-dark html,
.mud-theme-dark body {
    background: linear-gradient(135deg, var(--mud-palette-dark) 0%, var(--mud-palette-background) 100%);
}

.mud-theme-dark .mud-layout,
.mud-theme-dark .mud-main-content {
    background: transparent !important;
}
*/

.mud-theme-dark .mud-button-filled.mud-button-filled-primary {
    background-color: #FFB74D !important;  /* Orange 300 - softer for dark mode */
    color: #212121 !important;             /* Grey 900 - high contrast */
}

.mud-theme-dark .mud-button-filled.mud-button-filled-primary:hover {
    background-color: #FF8A65 !important;  /* Deep Orange 300 */
}

.mud-theme-dark .mud-chip.mud-chip-color-primary {
    background-color: #FFB74D !important;  /* Orange 300 */
    color: #212121 !important;             /* Grey 900 */
}

.mud-theme-dark .mud-icon-root.mud-primary-text {
    color: #FFB74D !important;             /* Orange 300 */
}

.mud-theme-dark .mud-progress-linear.mud-progress-color-primary .mud-progress-linear-bar {
    background-color: #FFB74D !important;  /* Orange 300 */
}

.mud-theme-dark .mud-progress-circular.mud-progress-color-primary circle {
    stroke: #FFB74D !important;            /* Orange 300 */
}

/* =================================================================== */
/* 13. DASHBOARD BRANDING ENHANCEMENTS */
/* =================================================================== */

.dashboard-hero-card {
    transition: all 0.3s ease;
    border: 1px solid rgba(255, 152, 0, 0.1) !important;  /* Orange 500 */
}

.dashboard-hero-card:hover {
    box-shadow: 0 8px 25px rgba(255, 152, 0, 0.15) !important;  /* Orange 500 */
    transform: translateY(-2px);
}

/* Dark mode adjustments for dashboard branding */
[data-theme="dark"] .dashboard-hero-card {
    background: linear-gradient(135deg, rgba(255, 183, 77, 0.08) 0%, rgba(255, 183, 77, 0.03) 100%) !important;  /* Orange 300 */
    border-color: rgba(255, 183, 77, 0.2) !important;  /* Orange 300 */
}

/* Mobile responsive adjustments for dashboard branding */
@media (max-width: 959px) {
    .dashboard-hero-card .mud-grid .mud-grid-item:first-child {
        order: -1; /* Keep logo above text on mobile */
    }
    
    .dashboard-hero-card .mud-image {
        width: 170px !important;
        height: 110px !important;
    }
    
    .dashboard-hero-card .mud-stack.mud-stack-row {
        flex-direction: column !important;
        align-items: flex-start !important;
    }
    
    .dashboard-hero-card .mud-chip {
        margin-bottom: 4px;
    }
}

@media (max-width: 599px) {
    .dashboard-hero-card .mud-text[style*="color: #E65100"] {
        font-size: 1.5rem !important;
    }
    
    .dashboard-hero-card .mud-image {
        width: 150px !important;
        height: 100px !important;
    }
    
    .dashboard-hero-card .mud-text.mud-typography-body1 {
        font-size: 0.9rem !important;
        line-height: 1.4 !important;
    }
    
    .dashboard-hero-card .mud-chip {
        font-size: 0.75rem !important;
        height: 24px !important;
    }
}

/* =================================================================== */
/* NON-INTERACTIVE LIST ITEMS */
/* =================================================================== */

/* Remove all interactive behavior from list items that should be purely informational */
.mud-list-item.non-interactive {
    cursor: default !important;
    pointer-events: none !important;
    background-color: transparent !important;
}

    .mud-list-item.non-interactive:hover {
        background-color: transparent !important;
        transform: none !important;
    }

    .mud-list-item.non-interactive .mud-list-item-content {
        cursor: default !important;
        background-color: transparent !important;
    }

        .mud-list-item.non-interactive .mud-list-item-content:hover {
            background-color: transparent !important;
        }

    /* Ensure text and icons remain properly styled */
    .mud-list-item.non-interactive .mud-list-item-text {
        color: var(--mud-palette-text-primary) !important;
    }

    .mud-list-item.non-interactive .mud-list-item-icon {
        color: var(--mud-palette-text-secondary) !important;
    }

/* Dark mode support */
.mud-theme-dark .mud-list-item.non-interactive .mud-list-item-text {
    color: var(--mud-palette-text-primary) !important;
}

.mud-theme-dark .mud-list-item.non-interactive .mud-list-item-icon {
    color: var(--mud-palette-text-secondary) !important;
}

/* =================================================================== */
/* THEME-AWARE BACKGROUND UPDATES - IMMEDIATE CSS CLASS SWITCHING */
/* =================================================================== */

/* Ensure body and html backgrounds update immediately with theme class changes */
body.theme-light,
html[data-theme="light"] body {
    background: linear-gradient(135deg, var(--mud-palette-background) 0%, var(--mud-palette-surface) 100%) !important;
    color: var(--mud-palette-text-primary) !important;
    transition: background 0.3s ease, color 0.3s ease !important;
}

body.theme-dark,
html[data-theme="dark"] body {
    background: linear-gradient(135deg, var(--mud-palette-dark) 0%, var(--mud-palette-background) 100%) !important;
    color: var(--mud-palette-text-primary) !important;
    transition: background 0.3s ease, color 0.3s ease !important;
}

/* Ensure MudBlazor layout components remain transparent */
body.theme-light .mud-layout,
body.theme-light .mud-main-content,
body.theme-dark .mud-layout,
body.theme-dark .mud-main-content {
    background: transparent !important;
}

/* Force immediate theme class updates for all MudBlazor components */
html[data-theme="light"] .mud-input,
html[data-theme="light"] .mud-input-control,
html[data-theme="light"] .mud-input-slot,
html[data-theme="light"] .mud-select,
html[data-theme="light"] .mud-autocomplete {
    background-color: var(--mud-palette-surface) !important;
    color: var(--mud-palette-text-primary) !important;
    transition: background-color 0.3s ease, color 0.3s ease !important;
}

html[data-theme="dark"] .mud-input,
html[data-theme="dark"] .mud-input-control,
html[data-theme="dark"] .mud-input-slot,
html[data-theme="dark"] .mud-select,
html[data-theme="dark"] .mud-autocomplete {
    background-color: var(--mud-palette-surface) !important;
    color: var(--mud-palette-text-primary) !important;
    transition: background-color 0.3s ease, color 0.3s ease !important;
}

html[data-theme="light"] .mud-card,
html[data-theme="light"] .mud-paper {
    background-color: var(--mud-palette-surface) !important;
    color: var(--mud-palette-text-primary) !important;
    transition: background-color 0.3s ease, color 0.3s ease !important;
}

html[data-theme="dark"] .mud-card,
html[data-theme="dark"] .mud-paper {
    background-color: var(--mud-palette-surface) !important;
    color: var(--mud-palette-text-primary) !important;
    transition: background-color 0.3s ease, color 0.3s ease !important;
}

/* =================================================================== */
/* STEPPER ORANGE THEME - COMPONENT-SPECIFIC TARGETING */
/* =================================================================== */

/* MudStepperExtended uses mud-avatar elements for step icons */
/* Target the avatar elements within each stepper component */

/* Getting Started Wizard Stepper */
.getting-started-stepper .mud-stepper-step.mud-stepper-step-active .mud-avatar {
    background-color: var(--mud-palette-primary) !important; /* Orange 500 */
    color: #FFFFFF !important;
}

.getting-started-stepper .mud-stepper-step.mud-stepper-step-active .mud-avatar .mud-icon-root {
    color: #FFFFFF !important;
}

.getting-started-stepper .mud-stepper-step.mud-stepper-step-completed .mud-avatar {
    background-color: var(--mud-palette-success) !important; /* Green 500 */
    color: #FFFFFF !important;
}

.getting-started-stepper .mud-stepper-step.mud-stepper-step-completed .mud-avatar .mud-icon-root {
    color: #FFFFFF !important;
}

.getting-started-stepper .mud-stepper-step .mud-avatar {
    background-color: #9E9E9E !important; /* Grey 500 - Default/Pending */
    color: #FFFFFF !important;
}

.getting-started-stepper .mud-stepper-step .mud-avatar .mud-icon-root {
    color: #FFFFFF !important;
}

/* Count Plan Creation Dialog Stepper */
.count-plan-stepper .mud-stepper-step.mud-stepper-step-active .mud-avatar {
    background-color: var(--mud-palette-primary) !important; /* Orange 500 */
    color: #FFFFFF !important;
}

.count-plan-stepper .mud-stepper-step.mud-stepper-step-active .mud-avatar .mud-icon-root {
    color: #FFFFFF !important;
}

.count-plan-stepper .mud-stepper-step.mud-stepper-step-completed .mud-avatar {
    background-color: var(--mud-palette-success) !important; /* Green 500 */
    color: #FFFFFF !important;
}

.count-plan-stepper .mud-stepper-step.mud-stepper-step-completed .mud-avatar .mud-icon-root {
    color: #FFFFFF !important;
}

.count-plan-stepper .mud-stepper-step .mud-avatar {
    background-color: #9E9E9E !important; /* Grey 500 - Default/Pending */
    color: #FFFFFF !important;
}

.count-plan-stepper .mud-stepper-step .mud-avatar .mud-icon-root {
    color: #FFFFFF !important;
}

/* Snapshot Creation Stepper */
.snapshot-stepper .mud-stepper-step.mud-stepper-step-active .mud-avatar {
    background-color: var(--mud-palette-primary) !important; /* Orange 500 */
    color: #FFFFFF !important;
}

.snapshot-stepper .mud-stepper-step.mud-stepper-step-active .mud-avatar .mud-icon-root {
    color: #FFFFFF !important;
}

.snapshot-stepper .mud-stepper-step.mud-stepper-step-completed .mud-avatar {
    background-color: var(--mud-palette-success) !important; /* Green 500 */
    color: #FFFFFF !important;
}

.snapshot-stepper .mud-stepper-step.mud-stepper-step-completed .mud-avatar .mud-icon-root {
    color: #FFFFFF !important;
}

.snapshot-stepper .mud-stepper-step .mud-avatar {
    background-color: #9E9E9E !important; /* Grey 500 - Default/Pending */
    color: #FFFFFF !important;
}

.snapshot-stepper .mud-stepper-step .mud-avatar .mud-icon-root {
    color: #FFFFFF !important;
}

/* COMPREHENSIVE TARGETING - Cover all possible MudStepperExtended structures */
/* Target all mud-avatar elements within our stepper components */

/* Base avatar styling for all steppers */
.getting-started-stepper .mud-avatar,
.count-plan-stepper .mud-avatar,
.snapshot-stepper .mud-avatar {
    background-color: #9E9E9E !important; /* Grey 500 - Default/Pending */
    color: #FFFFFF !important;
}

.getting-started-stepper .mud-avatar .mud-icon-root,
.count-plan-stepper .mud-avatar .mud-icon-root,
.snapshot-stepper .mud-avatar .mud-icon-root {
    color: #FFFFFF !important;
}

/* Target specific avatar classes that might be used */
.getting-started-stepper .mud-avatar.mud-avatar-text-default,
.getting-started-stepper .mud-avatar.mud-avatar-medium,
.getting-started-stepper .mud-avatar.mud-avatar-text,
.count-plan-stepper .mud-avatar.mud-avatar-text-default,
.count-plan-stepper .mud-avatar.mud-avatar-medium,
.count-plan-stepper .mud-avatar.mud-avatar-text,
.snapshot-stepper .mud-avatar.mud-avatar-text-default,
.snapshot-stepper .mud-avatar.mud-avatar-medium,
.snapshot-stepper .mud-avatar.mud-avatar-text {
    background-color: #9E9E9E !important; /* Grey 500 - Default/Pending */
    color: #FFFFFF !important;
}

/* Active state overrides - try multiple possible parent class combinations */
.getting-started-stepper .mud-stepper-step-active .mud-avatar,
.getting-started-stepper .mud-step-active .mud-avatar,
.getting-started-stepper [data-step-state="active"] .mud-avatar,
.count-plan-stepper .mud-stepper-step-active .mud-avatar,
.count-plan-stepper .mud-step-active .mud-avatar,
.count-plan-stepper [data-step-state="active"] .mud-avatar,
.snapshot-stepper .mud-stepper-step-active .mud-avatar,
.snapshot-stepper .mud-step-active .mud-avatar,
.snapshot-stepper [data-step-state="active"] .mud-avatar {
    background-color: var(--mud-palette-primary) !important; /* Orange 500 */
    color: #FFFFFF !important;
}

.getting-started-stepper .mud-stepper-step-active .mud-avatar .mud-icon-root,
.getting-started-stepper .mud-step-active .mud-avatar .mud-icon-root,
.getting-started-stepper [data-step-state="active"] .mud-avatar .mud-icon-root,
.count-plan-stepper .mud-stepper-step-active .mud-avatar .mud-icon-root,
.count-plan-stepper .mud-step-active .mud-avatar .mud-icon-root,
.count-plan-stepper [data-step-state="active"] .mud-avatar .mud-icon-root,
.snapshot-stepper .mud-stepper-step-active .mud-avatar .mud-icon-root,
.snapshot-stepper .mud-step-active .mud-avatar .mud-icon-root,
.snapshot-stepper [data-step-state="active"] .mud-avatar .mud-icon-root {
    color: #FFFFFF !important;
}

/* Completed state overrides */
.getting-started-stepper .mud-stepper-step-completed .mud-avatar,
.getting-started-stepper .mud-step-completed .mud-avatar,
.getting-started-stepper [data-step-state="completed"] .mud-avatar,
.count-plan-stepper .mud-stepper-step-completed .mud-avatar,
.count-plan-stepper .mud-step-completed .mud-avatar,
.count-plan-stepper [data-step-state="completed"] .mud-avatar,
.snapshot-stepper .mud-stepper-step-completed .mud-avatar,
.snapshot-stepper .mud-step-completed .mud-avatar,
.snapshot-stepper [data-step-state="completed"] .mud-avatar {
    background-color: var(--mud-palette-success) !important; /* Green 500 */
    color: #FFFFFF !important;
}

.getting-started-stepper .mud-stepper-step-completed .mud-avatar .mud-icon-root,
.getting-started-stepper .mud-step-completed .mud-avatar .mud-icon-root,
.getting-started-stepper [data-step-state="completed"] .mud-avatar .mud-icon-root,
.count-plan-stepper .mud-stepper-step-completed .mud-avatar .mud-icon-root,
.count-plan-stepper .mud-step-completed .mud-avatar .mud-icon-root,
.count-plan-stepper [data-step-state="completed"] .mud-avatar .mud-icon-root,
.snapshot-stepper .mud-stepper-step-completed .mud-avatar .mud-icon-root,
.snapshot-stepper .mud-step-completed .mud-avatar .mud-icon-root,
.snapshot-stepper [data-step-state="completed"] .mud-avatar .mud-icon-root {
    color: #FFFFFF !important;
}

/* NUCLEAR OPTION - Target the exact classes from your dev console */
/* Based on: mud-avatar mud-avatar-medium mud-avatar-text mud-avatar-text-default */
.getting-started-stepper .mud-avatar.mud-avatar-medium.mud-avatar-text.mud-avatar-text-default,
.count-plan-stepper .mud-avatar.mud-avatar-medium.mud-avatar-text.mud-avatar-text-default,
.snapshot-stepper .mud-avatar.mud-avatar-medium.mud-avatar-text.mud-avatar-text-default {
    background-color: #9E9E9E !important; /* Grey 500 - Default/Pending */
    color: #FFFFFF !important;
}

/* Force override any MudBlazor default styles */
.getting-started-stepper .mud-avatar.mud-avatar-medium.mud-avatar-text.mud-avatar-text-default .mud-icon-root,
.count-plan-stepper .mud-avatar.mud-avatar-medium.mud-avatar-text.mud-avatar-text-default .mud-icon-root,
.snapshot-stepper .mud-avatar.mud-avatar-medium.mud-avatar-text.mud-avatar-text-default .mud-icon-root {
    color: #FFFFFF !important;
}

/* Try targeting by role attribute as well */
.getting-started-stepper div[role="img"].mud-avatar,
.count-plan-stepper div[role="img"].mud-avatar,
.snapshot-stepper div[role="img"].mud-avatar {
    background-color: #9E9E9E !important; /* Grey 500 - Default/Pending */
    color: #FFFFFF !important;
}

/* MAXIMUM SPECIFICITY OVERRIDE - This should work */
/* Use CSS specificity calculator: this has very high specificity */
html body .getting-started-stepper .mud-avatar.mud-avatar-medium.mud-avatar-text.mud-avatar-text-default,
html body .count-plan-stepper .mud-avatar.mud-avatar-medium.mud-avatar-text.mud-avatar-text-default,
html body .snapshot-stepper .mud-avatar.mud-avatar-medium.mud-avatar-text.mud-avatar-text-default {
    background-color: #9E9E9E !important; /* Grey 500 - Default/Pending */
    color: #FFFFFF !important;
}

html body .getting-started-stepper .mud-avatar.mud-avatar-medium.mud-avatar-text.mud-avatar-text-default .mud-icon-root,
html body .count-plan-stepper .mud-avatar.mud-avatar-medium.mud-avatar-text.mud-avatar-text-default .mud-icon-root,
html body .snapshot-stepper .mud-avatar.mud-avatar-medium.mud-avatar-text.mud-avatar-text-default .mud-icon-root {
    color: #FFFFFF !important;
}

/* Also try with the MudBlazor container classes */
.mud-main-content .getting-started-stepper .mud-avatar,
.mud-main-content .count-plan-stepper .mud-avatar,
.mud-main-content .snapshot-stepper .mud-avatar {
    background-color: #9E9E9E !important; /* Grey 500 - Default/Pending */
    color: #FFFFFF !important;
}

.mud-main-content .getting-started-stepper .mud-avatar .mud-icon-root,
.mud-main-content .count-plan-stepper .mud-avatar .mud-icon-root,
.mud-main-content .snapshot-stepper .mud-avatar .mud-icon-root {
    color: #FFFFFF !important;
}

/* Universal Stepper Hover Effects */
.getting-started-stepper .mud-stepper-step:hover .mud-avatar,
.count-plan-stepper .mud-stepper-step:hover .mud-avatar,
.snapshot-stepper .mud-stepper-step:hover .mud-avatar {
    opacity: 0.9;
    transition: opacity 0.2s ease;
}

/* Dark Mode Support (if needed in future) */
.mud-theme-dark .getting-started-stepper .mud-stepper-step-active .mud-avatar,
.mud-theme-dark .count-plan-stepper .mud-stepper-step-active .mud-avatar,
.mud-theme-dark .snapshot-stepper .mud-stepper-step-active .mud-avatar {
    background-color: #FFB74D !important; /* Orange 300 for dark mode */
    color: #000000 !important;
}

.mud-theme-dark .getting-started-stepper .mud-stepper-step-active .mud-avatar .mud-icon-root,
.mud-theme-dark .count-plan-stepper .mud-stepper-step-active .mud-avatar .mud-icon-root,
.mud-theme-dark .snapshot-stepper .mud-stepper-step-active .mud-avatar .mud-icon-root {
    color: #000000 !important;
}

/* =================================================================== */
/* GETTING STARTED WIZARD COMPONENT STYLES */
/* =================================================================== */

.getting-started-wizard {
    min-height: 100vh;
    background: linear-gradient(135deg, var(--mud-palette-background) 0%, var(--mud-palette-surface) 100%);
}

.getting-started-wizard .getting-started-stepper .mud-stepper-extended .mud-step-header {
    font-size: 1rem;
    font-weight: 600;
}

.getting-started-wizard .getting-started-stepper .mud-stepper-extended .mud-step-content {
    padding: 24px 16px;
    animation: fadeInUp 0.4s ease-out;
}

.getting-started-wizard .mobile-card-layout {
    padding: 16px;
    max-width: 1200px;
    margin: 0 auto;
}

.getting-started-wizard .step-overview-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 20px;
    margin: 32px 0;
}

.getting-started-wizard .step-card {
    padding: 20px;
    border-radius: 12px;
    border: 2px solid var(--mud-palette-divider);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: pointer;
    background: var(--mud-palette-surface);
    position: relative;
    overflow: hidden;
}

.getting-started-wizard .step-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--mud-palette-primary), var(--mud-palette-secondary));
    transform: scaleX(0);
    transition: transform 0.3s ease;
}

.getting-started-wizard .step-card:hover {
    border-color: var(--mud-palette-primary);
    box-shadow: 0 8px 24px rgba(0,0,0,0.12);
    transform: translateY(-2px);
}

.getting-started-wizard .step-card:hover::before {
    transform: scaleX(1);
}

.getting-started-wizard .step-card.completed {
    border-color: var(--mud-palette-success);
    background: linear-gradient(135deg, var(--mud-palette-success-lighten) 0%, var(--mud-palette-surface) 100%);
}

.getting-started-wizard .step-card.completed::before {
    background: var(--mud-palette-success);
    transform: scaleX(1);
}

.getting-started-wizard .wizard-header {
    text-align: center;
    margin-bottom: 32px;
    padding: 24px;
    background: var(--mud-palette-surface);
    border-radius: 16px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}

.getting-started-wizard .completion-celebration {
    text-align: center;
    padding: 32px;
    background: linear-gradient(135deg, var(--mud-palette-success-lighten) 0%, var(--mud-palette-surface) 100%);
    border-radius: 16px;
    margin-bottom: 24px;
}

.getting-started-wizard .setup-summary-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 16px;
    margin: 24px 0;
}

.getting-started-wizard .summary-stat {
    text-align: center;
    padding: 16px;
    background: var(--mud-palette-surface);
    border-radius: 12px;
    border: 1px solid var(--mud-palette-divider);
    transition: all 0.3s ease;
}

.getting-started-wizard .summary-stat.clickable {
    cursor: pointer;
    user-select: none;
}

.getting-started-wizard .summary-stat.clickable:hover {
    background: var(--mud-palette-action-hover);
    border-color: var(--mud-palette-primary);
}

.getting-started-wizard .summary-stat:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

.getting-started-wizard .next-steps-card {
    background: var(--mud-palette-surface);
    border-radius: 12px;
    padding: 24px;
    border: 1px solid var(--mud-palette-divider);
    margin-top: 16px;
}

.getting-started-wizard .entity-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 12px;
}

.getting-started-wizard .progress-indicator {
    position: sticky;
    top: 16px;
    z-index: 10;
    margin-bottom: 24px;
}

.getting-started-wizard .completion-step-container {
    min-height: 400px;
    animation: fadeInUp 0.6s ease-out;
}

/* =================================================================== */
/* DASHBOARD COMPONENT STYLES */
/* =================================================================== */

.setup-summary-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 1rem;
    margin-top: 1rem;
}

.count-summary-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
    margin-top: 1rem;
}

.count-summary-grid-4 {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
    margin-top: 1rem;
}

.count-summary-grid-6 {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 1rem;
    margin-top: 1rem;
}

.summary-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 1rem;
    background: var(--mud-palette-surface);
    border-radius: 8px;
    border: 1px solid var(--mud-palette-divider);
    transition: all 0.2s ease;
}

.summary-stat.clickable {
    cursor: pointer;
    user-select: none;
}

.summary-stat.clickable:hover {
    background: var(--mud-palette-action-hover);
    border-color: var(--mud-palette-primary);
}

.summary-stat:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

.summary-stat .mud-icon-root {
    margin-bottom: 0.5rem;
    font-size: 1.5rem;
}

/* =================================================================== */
/* QUICK HELP COMPONENT STYLES */
/* =================================================================== */

.quick-action-card:hover {
    transform: translateY(-2px);
    transition: transform 0.2s ease-in-out;
    box-shadow: 0 8px 25px rgba(0,0,0,0.15) !important;
}

.mud-expansion-panel {
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 8px;
    margin-bottom: 8px;
}

.mud-expansion-panel:last-child {
    margin-bottom: 0;
}

/* =================================================================== */
/* START COUNT COMPONENT STYLES */
/* =================================================================== */

.plan-card:hover {
    transition: box-shadow 150ms ease-in-out;
}

/* =================================================================== */
/* CSS ANIMATIONS */
/* =================================================================== */

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes pulse {
    0%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.05);
    }
}

.getting-started-wizard .celebration-icon {
    animation: pulse 2s infinite;
}

/* =================================================================== */
/* MOBILE RESPONSIVE ENHANCEMENTS */
/* =================================================================== */

/* Dashboard Mobile Responsiveness */
@media (max-width: 959px) {
    .setup-summary-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 0.75rem;
    }
    
    .count-summary-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 0.75rem;
    }
    
    .count-summary-grid-4 {
        grid-template-columns: repeat(2, 1fr);
        gap: 0.75rem;
    }
    
    .count-summary-grid-6 {
        grid-template-columns: repeat(3, 1fr);
        gap: 0.75rem;
    }
    
    .summary-stat {
        padding: 0.75rem;
    }
    
    .summary-stat .mud-icon-root {
        font-size: 1.25rem;
    }
    
    /* Getting Started Wizard Mobile */
    .getting-started-wizard .getting-started-stepper .mud-stepper-extended .mud-step-content {
        padding: 16px 12px;
    }
    
    .getting-started-wizard .step-overview-grid {
        grid-template-columns: 1fr;
        gap: 16px;
        margin: 24px 0;
    }
    
    .getting-started-wizard .mobile-card-layout {
        padding: 12px;
    }
    
    .getting-started-wizard .wizard-header {
        margin-bottom: 24px;
        padding: 16px;
    }
    
    .getting-started-wizard .setup-summary-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
    }
    
    .getting-started-wizard .completion-celebration {
        padding: 24px 16px;
    }
}

@media (max-width: 599px) {
    .setup-summary-grid {
        grid-template-columns: 1fr 1fr;
        gap: 0.5rem;
    }
    
    .count-summary-grid {
        grid-template-columns: 1fr 1fr;
        gap: 0.5rem;
    }
    
    .count-summary-grid-4 {
        grid-template-columns: 1fr 1fr;
        gap: 0.5rem;
    }
    
    .count-summary-grid-6 {
        grid-template-columns: repeat(2, 1fr);
        gap: 0.5rem;
    }
    
    .summary-stat {
        padding: 0.5rem;
        font-size: 0.875rem;
    }
    
    .summary-stat .mud-icon-root {
        font-size: 1rem;
        margin-bottom: 0.25rem;
    }
    
    /* Getting Started Wizard Phone */
    .getting-started-wizard .step-card {
        padding: 16px;
    }
    
    .getting-started-wizard .setup-summary-grid {
        grid-template-columns: 1fr 1fr;
    }
    
    .getting-started-wizard .next-steps-card {
        padding: 16px;
    }
}

/* Summary Stat Typography Enhancements */
.summary-stat .mud-typography-h6 {
    margin: 0.25rem 0;
    font-weight: 600;
}

.summary-stat .mud-typography-caption {
    margin: 0;
    opacity: 0.7;
}

/* =================================================================== */
/* UTILITY CLASSES FOR COMMON INLINE STYLES */
/* =================================================================== */

/* Checkbox container for preventing event propagation */
.checkbox-container {
    display: inline-flex;
    align-items: center;
}

/* Clickable table cells */
.clickable-cell {
    cursor: pointer;
}

/* Hidden file input */
.hidden-file-input {
    display: none;
}

/* Minimum width for select dropdowns */
.min-width-100 {
    min-width: 100px;
}

.min-width-150 {
    min-width: 150px;
}

/* Fixed logo dimensions */
.logo-fixed-size {
    width: 260px;
    height: 64px;
    flex-shrink: 0;
}

.logo-image-fixed {
    width: 240px;
    height: 58px;
    object-fit: contain;
}

/* Flex utilities */
.flex-1 {
    flex: 1;
}

/* Width utilities */
.width-80 {
    width: 80px;
}

/* =================================================================== */
/* CUSTOM SVG ICONS */
/* =================================================================== */

/* UPC Scan Icon - Custom SVG */
.icon-upc-scan {
    display: inline-block;
    width: 1em;
    height: 1em;
    vertical-align: -0.125em;
    fill: currentColor;
}

.icon-upc-scan svg {
    width: 100%;
    height: 100%;
}

/* Alternative: CSS-only UPC scan icon using SVG data URL */
.icon-upc-scan-css {
    display: inline-block;
    width: 1em;
    height: 1em;
    vertical-align: -0.125em;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' viewBox='0 0 16 16'%3E%3Cpath d='M1.5 1a.5.5 0 0 0-.5.5v3a.5.5 0 0 1-1 0v-3A1.5 1.5 0 0 1 1.5 0h3a.5.5 0 0 1 0 1zM11 .5a.5.5 0 0 1 .5-.5h3A1.5 1.5 0 0 1 16 1.5v3a.5.5 0 0 1-1 0v-3a.5.5 0 0 0-.5-.5h-3a.5.5 0 0 1-.5-.5M.5 11a.5.5 0 0 1 .5.5v3a.5.5 0 0 0 .5.5h3a.5.5 0 0 1 0 1h-3A1.5 1.5 0 0 1 0 14.5v-3a.5.5 0 0 1 .5-.5m15 0a.5.5 0 0 1 .5.5v3a1.5 1.5 0 0 1-1.5 1.5h-3a.5.5 0 0 1 0-1h3a.5.5 0 0 0 .5-.5v-3a.5.5 0 0 1 .5-.5M3 4.5a.5.5 0 0 1 1 0v7a.5.5 0 0 1-1 0zm2 0a.5.5 0 0 1 1 0v7a.5.5 0 0 1-1 0zm2 0a.5.5 0 0 1 1 0v7a.5.5 0 0 1-1 0zm2 0a.5.5 0 0 1 .5-.5h1a.5.5 0 0 1 .5.5v7a.5.5 0 0 1-.5.5h-1a.5.5 0 0 1-.5-.5zm3 0a.5.5 0 0 1 1 0v7a.5.5 0 0 1-1 0z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}

/* =================================================================== */
/* EULA DIALOG STYLES */
/* =================================================================== */

/* EULA Dialog Styles */
.eula-dialog .mud-dialog-container {
    max-height: 90vh;
}

.eula-container {
    position: relative;
    height: 60vh;
    max-height: 500px;
    display: flex;
    flex-direction: column;
}

.eula-scroll-area {
    flex: 1;
    overflow-y: auto;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 4px;
    padding: 16px;
    background: var(--mud-palette-surface);
    position: relative;
    scroll-behavior: smooth;
}

.eula-content {
    line-height: 1.6;
    font-size: 14px;
}

.eula-content h1, .eula-content h2, .eula-content h3 {
    color: var(--mud-palette-text-primary);
    margin-top: 24px;
    margin-bottom: 12px;
}

.eula-content h1 { font-size: 1.5rem; }
.eula-content h2 { font-size: 1.3rem; }
.eula-content h3 { font-size: 1.1rem; }

.eula-content p {
    margin-bottom: 12px;
    color: var(--mud-palette-text-primary);
}

.eula-content ul, .eula-content ol {
    margin-left: 20px;
    margin-bottom: 12px;
}

.eula-content table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 16px;
}

.eula-content table th,
.eula-content table td {
    border: 1px solid var(--mud-palette-lines-default);
    padding: 8px;
    text-align: left;
}

.eula-content table th {
    background-color: var(--mud-palette-background-gray);
    font-weight: 600;
}

/* Scroll Indicator */
.scroll-indicator {
    position: absolute;
    bottom: 60px; /* Position above progress bar */
    right: 16px;
    background: var(--mud-palette-primary);
    color: white;
    padding: 8px 12px;
    border-radius: 20px;
    display: flex;
    align-items: center;
    gap: 8px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.2);
    animation: pulse 2s infinite;
    z-index: 10;
    pointer-events: none; /* Don't interfere with scrolling */
}

.scroll-arrow {
    animation: bounce 1s infinite;
}

.scroll-text {
    color: white !important;
    font-weight: 500;
}

/* Progress Bar */
.scroll-progress-container {
    margin-top: 12px;
    display: flex;
    align-items: center;
    gap: 12px;
}

.scroll-progress {
    flex: 1;
}

.progress-text {
    min-width: 60px;
    text-align: right;
    font-weight: 500;
}

/* Accept Button States */
.accept-disabled {
    opacity: 0.6 !important;
    cursor: not-allowed !important;
}

/* Animations */
@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.7; }
}

@keyframes bounce {
    0%, 20%, 50%, 80%, 100% { transform: translateY(0); }
    40% { transform: translateY(-4px); }
    60% { transform: translateY(-2px); }
}

/* Mobile Responsive */
@media (max-width: 599px) {
    .eula-container {
        height: 50vh;
    }
    
    .scroll-indicator {
        position: absolute;
        bottom: 50px; /* Adjust for mobile */
        right: 8px;
        left: 8px; /* Make it wider on mobile */
        justify-content: center;
        margin-top: 0;
    }
    
    .eula-content {
        font-size: 13px;
    }
}

/* Dark Mode */
.mud-theme-dark .eula-scroll-area {
    background: var(--mud-palette-dark);
    border-color: var(--mud-palette-lines-default);
}

.mud-theme-dark .eula-content table th {
    background-color: var(--mud-palette-surface);
}

/* =================================================================== */
/* MODERN SCAN INTERFACE DESIGN */
/* =================================================================== */

/* Page container for centering */
.scan-page-container {
    min-height: calc(100vh - 64px); /* Account for AppBar */
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 24px 16px;
    background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%); /* Professional greyish-blue gradient */
}

/* Main container */
.scan-main-container {
    width: 100%;
    max-width: 1200px; /* Increased from 600px to accommodate table */
    margin: 0 auto;
}

/* Modern card styling */
.scan-card {
    border-radius: 16px !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12) !important;
    backdrop-filter: blur(10px);
    background: rgba(255, 255, 255, 0.95) !important;
    border: 1px solid rgba(255, 255, 255, 0.2);
    overflow: hidden;
}

/* Card header styling */
.scan-card .mud-card-header {
    background: linear-gradient(135deg, var(--mud-palette-primary) 0%, var(--mud-palette-secondary) 100%);
    color: white !important;
    padding: 24px !important;
    border-bottom: none;
}

.scan-title {
    color: white !important;
    font-weight: 600 !important;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

/* Card content styling */
.scan-card-content {
    padding: 32px 24px !important;
}

/* Input section styling */
.scan-input-section {
    background: rgba(248, 250, 252, 0.8);
    border-radius: 12px;
    padding: 24px;
    border: 1px solid rgba(226, 232, 240, 0.8);
    margin: 16px 0;
}

/* Enhanced input field styling */
.scan-input-field {
    margin-bottom: 0 !important;
}

.scan-input-field .mud-input-root {
    border-radius: 12px !important;
    background: white;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
    border: 2px solid transparent;
    transition: all 0.3s ease;
}

.scan-input-field .mud-input-root:hover {
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
    border-color: var(--mud-palette-primary-lighten);
}

.scan-input-field .mud-input-root.mud-input-focused {
    border-color: var(--mud-palette-primary);
    box-shadow: 0 4px 16px rgba(var(--mud-palette-primary-rgb), 0.2);
}

/* Enhanced button styling */
.scan-confirm-button {
    border-radius: 12px !important;
    height: 48px !important;
    font-weight: 600 !important;
    text-transform: none !important;
    box-shadow: 0 4px 16px rgba(76, 175, 80, 0.3) !important; /* Green shadow */
    transition: all 0.3s ease !important;
    background: linear-gradient(135deg, #4CAF50 0%, #388E3C 100%) !important; /* Success green gradient */
    color: white !important;
}

.scan-confirm-button:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 24px rgba(76, 175, 80, 0.4) !important; /* Green hover shadow */
    background: linear-gradient(135deg, #66BB6A 0%, #4CAF50 100%) !important; /* Lighter green on hover */
}

.scan-confirm-button:active {
    transform: translateY(0) !important;
}

/* Card actions styling */
.scan-card-actions {
    background: rgba(248, 250, 252, 0.6);
    border-top: 1px solid rgba(226, 232, 240, 0.8);
    padding: 24px !important;
}

/* Enhanced table header styling for better visibility */
.locations-table-container .mud-table-head .mud-table-cell {
    background: linear-gradient(135deg, #475569 0%, #64748b 100%) !important; /* Professional slate gray */
    color: white !important;
    font-weight: 600 !important;
    border-bottom: 2px solid rgba(255, 255, 255, 0.1) !important;
    padding: 16px 12px !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1) !important;
}

.locations-table-container .mud-table-head .mud-table-cell .mud-table-sort-label {
    color: white !important;
    font-weight: 600 !important;
}

.locations-table-container .mud-table-head .mud-table-cell .mud-table-sort-label:hover {
    color: rgba(255, 255, 255, 0.9) !important;
}

/* Table body styling */
.locations-table-container .mud-table-body .mud-table-row:nth-child(even) {
    background: rgba(248, 250, 252, 0.5) !important;
}

.locations-table-container .mud-table-body .mud-table-row:hover {
    background: rgba(71, 85, 105, 0.08) !important; /* Professional slate gray hover */
}

/* Status chips enhancement */
.status-chip-enhanced {
    border-radius: 20px !important;
    font-weight: 500 !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important;
}

/* Alert styling */
.mud-alert {
    border-radius: 12px !important;
    border: none !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08) !important;
}

/* Mobile responsive adjustments */
@media (max-width: 599px) {
    .scan-page-container {
        padding: 16px 8px;
        align-items: flex-start;
    }
    
    .scan-card {
        border-radius: 12px !important;
    }
    
    .scan-card-content {
        padding: 24px 16px !important;
    }
    
    .scan-input-section {
        padding: 16px;
        margin: 12px 0;
    }
    
    .scan-confirm-button {
        height: 52px !important;
    }
    
    .scan-title {
        font-size: 1.1rem !important;
    }
}

/* Dark mode support */
.mud-theme-dark .scan-card {
    background: rgba(30, 30, 30, 0.95) !important;
    border-color: rgba(255, 255, 255, 0.1);
}

.mud-theme-dark .scan-input-section {
    background: rgba(40, 40, 40, 0.8);
    border-color: rgba(255, 255, 255, 0.1);
}

.mud-theme-dark .scan-input-field .mud-input-root {
    background: rgba(50, 50, 50, 0.8);
}

.mud-theme-dark .scan-card-actions {
    background: rgba(40, 40, 40, 0.6);
    border-color: rgba(255, 255, 255, 0.1);
}

/* =================================================================== */
/* LOCATIONS TABLE ENHANCEMENTS */
/* =================================================================== */

/* Locations table container */
.locations-table-container {
    margin-top: 24px;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

/* Enhanced table styling for locations */
.locations-table-container .mud-table {
    border-radius: 12px;
    overflow: hidden;
}

.locations-table-container .mud-table-head {
    background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
}

.locations-table-container .mud-table-row:hover {
    background: rgba(var(--mud-palette-primary-rgb), 0.04) !important;
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    transition: all 0.2s ease;
}

/* Dark mode table enhancements */
.mud-theme-dark .locations-table-container .mud-table-head {
    background: linear-gradient(135deg, #2d3748 0%, #1a202c 100%);
}

.mud-theme-dark .locations-table-container .mud-table-row:hover {
    background: rgba(255, 255, 255, 0.05) !important;
}

/* Count Plan Cards */
.count-plan-card {
    background: rgba(255, 255, 255, 0.98) !important;
    border: 2px solid var(--mud-palette-primary-lighten) !important;
    transition: all 0.3s ease !important;
}

.count-plan-card:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15) !important;
    border-color: var(--mud-palette-primary) !important;
}

.count-plan-card .mud-card-content {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(248, 250, 252, 0.98) 100%) !important;
}

/* Override any dark theme that might be affecting count plan cards */
.count-plan-card,
.count-plan-card .mud-card,
.count-plan-card .mud-card-content {
    background: rgba(255, 255, 255, 0.98) !important;
    color: inherit !important;
}

/* Location Item Cards */
.location-item-card {
    background: rgba(255, 255, 255, 0.98) !important;
    border: 1px solid rgba(226, 232, 240, 0.8) !important;
    transition: all 0.3s ease !important;
}

.location-item-card:hover:not(.completed-location) {
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1) !important;
    border-color: var(--mud-palette-primary-lighten) !important;
}

.completed-location {
    background: rgba(76, 175, 80, 0.05) !important;
    border-color: rgba(76, 175, 80, 0.3) !important;
}

/* Dark mode support for count cards */
@media (prefers-color-scheme: dark) {
    .count-plan-card {
        background: rgba(30, 30, 30, 0.95) !important;
        border-color: var(--mud-palette-primary-darken) !important;
    }
    
    .count-plan-card .mud-card-content {
        background: linear-gradient(135deg, rgba(40, 40, 40, 0.9) 0%, rgba(30, 30, 30, 0.95) 100%);
    }
    
    .location-item-card {
        background: rgba(30, 30, 30, 0.95) !important;
        border-color: rgba(60, 60, 60, 0.8) !important;
    }
    
    .completed-location {
        background: rgba(76, 175, 80, 0.1) !important;
        border-color: rgba(76, 175, 80, 0.4) !important;
    }
}

/* =================================================================== */
/* VERTICAL NAVIGATION DRAWER STYLES */
/* =================================================================== */

/* Desktop Vertical Drawer */
.vertical-nav-drawer {
    z-index: 1000 !important;
    margin-top: 64px !important;
}

.vertical-nav-drawer .mud-drawer-content {
    background: transparent !important;
    backdrop-filter: blur(10px) !important;
    border-right: 1px solid rgba(224, 224, 224, 0.3) !important;
    box-shadow: 2px 0 8px rgba(0, 0, 0, 0.05) !important;
}

.vertical-nav-drawer .drawer-header {
    padding: 16px !important;
    border-bottom: 1px solid rgba(224, 224, 224, 0.3) !important;
    background: rgba(255, 255, 255, 0.05) !important;
}

.vertical-nav-drawer .drawer-title {
    color: var(--mud-palette-text-primary) !important;
    font-weight: 600 !important;
}

/* Navigation Menu Styling */
.vertical-nav-drawer .nav-menu,
.mobile-nav-drawer .nav-menu {
    padding: 8px !important;
}

.vertical-nav-drawer .mud-nav-link,
.mobile-nav-drawer .mud-nav-link {
    border-radius: 8px !important;
    margin-bottom: 4px !important;
    transition: all 0.2s ease !important;
    background: rgba(255, 255, 255, 0.05) !important;
}

.vertical-nav-drawer .mud-nav-link:hover,
.mobile-nav-drawer .mud-nav-link:hover {
    background: rgba(255, 152, 0, 0.1) !important;
    transform: translateX(4px) !important;
}

.vertical-nav-drawer .mud-nav-link.active,
.mobile-nav-drawer .mud-nav-link.active {
    background: linear-gradient(90deg, rgba(255, 152, 0, 0.2), rgba(255, 152, 0, 0.1)) !important;
    border-left: 3px solid var(--mud-palette-primary) !important;
    color: var(--mud-palette-primary) !important;
    font-weight: 600 !important;
}

.vertical-nav-drawer .mud-nav-group,
.mobile-nav-drawer .mud-nav-group {
    border-radius: 8px !important;
    margin-bottom: 4px !important;
    background: rgba(255, 255, 255, 0.03) !important;
}

/* Mobile Navigation Drawer */
.mobile-nav-drawer {
    z-index: 1400 !important;
}

.mobile-nav-drawer .mud-drawer-content {
    background: var(--mud-palette-surface) !important;
    width: 280px !important;
    z-index: 1401 !important;
    position: relative !important;
}

/* Ensure mobile drawer overlay doesn't block interaction */
.mobile-nav-drawer .mud-overlay {
    z-index: 1399 !important;
}

.mobile-nav-drawer .drawer-header {
    padding: 16px !important;
    border-bottom: 1px solid var(--mud-palette-divider) !important;
    background: var(--mud-palette-primary) !important;
    color: white !important;
}

.mobile-menu-button {
    margin-right: 8px !important;
}

/* Adjust main content for drawer */
.mud-main-content {
    margin-left: 0 !important;
    transition: margin-left 0.3s ease !important;
}

/* Desktop: Add left margin when drawer is open */
@media (min-width: 960px) {
    .mud-layout .mud-main-content {
        transition: margin-left 0.3s ease !important;
    }
    
    /* When drawer is open, push content to the right */
    .mud-drawer--open.vertical-nav-drawer ~ .mud-main-content {
        margin-left: 240px !important; /* Full drawer width */
    }
    
    /* When drawer is closed, no margin */
    .mud-drawer--closed.vertical-nav-drawer ~ .mud-main-content {
        margin-left: 0 !important;
    }
}

/* Mobile: No margin adjustment needed (temporary drawer) */
@media (max-width: 959px) {
    .mud-main-content {
        margin-left: 0 !important;
    }
}

/* Navigation Icons */
.vertical-nav-drawer .mud-nav-link .mud-icon-root,
.mobile-nav-drawer .mud-nav-link .mud-icon-root {
    color: var(--mud-palette-text-secondary) !important;
}

.vertical-nav-drawer .mud-nav-link.active .mud-icon-root,
.mobile-nav-drawer .mud-nav-link.active .mud-icon-root {
    color: var(--mud-palette-primary) !important;
}

.mud-theme-dark .vertical-nav-drawer .mud-nav-link.active .mud-icon-root,
.mud-theme-dark .mobile-nav-drawer .mud-nav-link.active .mud-icon-root {
    color: #FFB74D !important;
}

/* Dividers in nav menu */
.vertical-nav-drawer .mud-divider,
.mobile-nav-drawer .mud-divider {
    margin: 8px 0 !important;
    opacity: 0.3 !important;
}

/* Dark mode support for navigation drawer */
.mud-theme-dark .vertical-nav-drawer .mud-drawer-content {
    border-right: 1px solid rgba(255, 255, 255, 0.1) !important;
    box-shadow: 2px 0 8px rgba(0, 0, 0, 0.3) !important;
}

.mud-theme-dark .vertical-nav-drawer .drawer-header {
    border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
    background: rgba(0, 0, 0, 0.2) !important;
}

.mud-theme-dark .vertical-nav-drawer .mud-nav-link,
.mud-theme-dark .mobile-nav-drawer .mud-nav-link {
    background: rgba(0, 0, 0, 0.2) !important;
}

.mud-theme-dark .vertical-nav-drawer .mud-nav-link:hover,
.mud-theme-dark .mobile-nav-drawer .mud-nav-link:hover {
    background: rgba(255, 183, 77, 0.15) !important;
}

.mud-theme-dark .vertical-nav-drawer .mud-nav-link.active,
.mud-theme-dark .mobile-nav-drawer .mud-nav-link.active {
    background: linear-gradient(90deg, rgba(255, 183, 77, 0.25), rgba(255, 183, 77, 0.15)) !important;
    border-left: 3px solid #FFB74D !important;
    color: #FFB74D !important;
}

.mud-theme-dark .vertical-nav-drawer .mud-nav-group,
.mud-theme-dark .mobile-nav-drawer .mud-nav-group {
    background: rgba(0, 0, 0, 0.15) !important;
}

/* =================================================================== */
/* WIZARD ENTITY TABLE STYLES */
/* =================================================================== */

.wizard-entity-table {
    border: 1px solid var(--mud-palette-divider) !important;
    border-radius: 8px !important;
    overflow: hidden !important;
}

.wizard-entity-table .mud-table-head,
.wizard-entity-table .mud-table-head .mud-table-row {
    background: linear-gradient(135deg, #475569 0%, #64748b 100%) !important;
}

.wizard-entity-table .mud-table-head .mud-table-cell {
    font-weight: 600 !important;
    color: white !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1) !important;
    background: transparent !important;
}

.wizard-entity-table .mud-table-head .mud-table-cell .mud-table-sort-label {
    color: white !important;
    font-weight: 600 !important;
}

/* Dark mode support */
.mud-theme-dark .wizard-entity-table .mud-table-head,
.mud-theme-dark .wizard-entity-table .mud-table-head .mud-table-row {
    background: linear-gradient(135deg, #2d3748 0%, #1a202c 100%) !important;
}

.wizard-entity-table .mud-table-row:hover {
    background: var(--mud-palette-action-default-hover) !important;
}

.wizard-entity-table .mud-table-cell {
    padding: 12px 16px !important;
}

/* Mobile responsiveness for wizard tables */
@media (max-width: 599px) {
    .wizard-entity-table .mud-table-cell {
        padding: 8px 12px !important;
        font-size: 0.875rem !important;
    }
}

/* =================================================================== */
/* COUNT PLAN & SNAPSHOT DIALOG ENHANCEMENTS */
/* =================================================================== */

.count-plan-stepper .mud-card,
.snapshot-stepper .mud-card {
    transition: all 0.2s ease !important;
}

.count-plan-stepper .mud-card:hover,
.snapshot-stepper .mud-card:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1) !important;
}

.count-plan-stepper .mud-card-content,
.snapshot-stepper .mud-card-content {
    padding: 16px !important;
}

.count-plan-stepper .mud-text-field,
.count-plan-stepper .mud-input,
.count-plan-stepper .mud-select,
.snapshot-stepper .mud-text-field,
.snapshot-stepper .mud-input,
.snapshot-stepper .mud-select {
    background: var(--mud-palette-surface) !important;
}

.count-plan-stepper .mud-checkbox,
.snapshot-stepper .mud-checkbox {
    padding: 8px 0 !important;
}

.count-plan-stepper .mud-radio,
.snapshot-stepper .mud-radio {
    padding: 12px 0 !important;
}

/* Enhanced input field visibility */
.count-plan-stepper .mud-input-outlined,
.snapshot-stepper .mud-input-outlined {
    border: 2px solid var(--mud-palette-lines-inputs) !important;
}

.count-plan-stepper .mud-input-outlined:focus-within,
.snapshot-stepper .mud-input-outlined:focus-within {
    border-color: var(--mud-palette-primary) !important;
    box-shadow: 0 0 0 3px rgba(255, 152, 0, 0.1) !important;
}

/* Card section headers */
.count-plan-stepper .mud-card-content .mud-typography-h6,
.snapshot-stepper .mud-card-content .mud-typography-h6 {
    color: var(--mud-palette-text-primary) !important;
    font-weight: 600 !important;
    display: flex !important;
    align-items: center !important;
}

/* Mobile responsiveness for dialogs */
@media (max-width: 599px) {
    .count-plan-stepper .mud-card,
    .snapshot-stepper .mud-card {
        padding: 12px !important;
    }
    
    .count-plan-stepper .mud-card-content,
    .snapshot-stepper .mud-card-content {
        padding: 12px !important;
    }
}