/* =========================================
    COMMON ELEMENTS & GLOBAL STYLES
    ========================================= */

/* Blazor Error Handling */
#blazor-error-ui {
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

#blazor-error-ui .dismiss {
    cursor: pointer;
    position: absolute;
    right: 0.75rem;
    top: 0.5rem;
}

.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,PHN...);
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
}

.blazor-error-boundary::after {
    content: "An error has occurred.";
}

/* Test Environment Banner */
.test-environment-banner {
    position: fixed; /* Change from default to fixed */
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    background-color: #ff9800;
    color: white;
    text-align: center;
    padding: 4px 0;
    font-weight: bold;
    height: 28px; /* Fixed height */
    line-height: 28px; /* Vertically center text */
    z-index: 2000; /* Ensure it's above everything */
}

/* Update AppBar positioning with banner */
.app-with-banner .mud-appbar.mud-appbar-fixed-top {
    position: fixed !important; /* Ensure it stays fixed */
    top: 28px !important; /* Match banner height exactly */
    z-index: 1500; /* Lower than banner but higher than content */
    width: 100%; /* Full width */
}

/* =========================================
    MUDBLAZOR SNACKBAR Z-INDEX FIX
    Fix for toast notifications being hidden behind test banner
    ========================================= */

/* MudSnackbar container - Must be above test banner (2000) - trying higher value */
.mud-snackbar-container,
.mud-snackbar-container * {
    z-index: 2500 !important;
}

/* Individual snackbar items - ensure they inherit proper z-index */
.mud-snackbar,
.mud-snackbar * {
    z-index: 2500 !important;
}

/* All possible snackbar selectors - cast a wide net */
div[class*="mud-snackbar"],
div[class*="snackbar"],
.mud-snackbar-content-wrapper,
.mud-snackbar-content,
.mud-snackbar-action,
.mud-snackbar-close-button {
    z-index: 2500 !important;
}

/* Target by position if MudBlazor uses specific positioning */
div[style*="position: fixed"][style*="top"],
div[style*="position: absolute"][style*="top"] {
    z-index: 2500 !important;
}

/* Update main content padding with banner */
.app-with-banner .mud-main-content {
    padding-top: 92px !important; /* 64px (AppBar) + 28px (banner) */
}

/* Fix for MudAlert and content positioning with banner */
.app-with-banner .mud-main-content .mud-container {
    padding-top: 16px !important; /* Add some breathing room at the top */
    margin-top: 0 !important; /* Ensure no conflicting margins */
}

/* If alerts are still getting cut off, add specific alert spacing */
.app-with-banner .mud-alert {
    margin-top: 8px !important;
}

.app-with-banner .mud-alert:first-child {
    margin-top: 16px !important;
}

/* Update drawer positioning when banner is active */
.app-with-banner .mud-drawer.mud-drawer-fixed {
    top: 92px !important; /* 64px (AppBar) + 28px (banner) */
    height: calc(100% - 92px) !important;
}

/* =========================================
    NAVIGATION MENU STYLES
    ========================================= */

/* Navigation Menu Container */
.nav-menu-container {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.nav-links {
    flex: 1;
}

.nav-footer {
    margin-top: auto;
    padding-top: 16px;
}

/* =========================================
    RESPONSIVE BREADCRUMB COMPONENT STYLES
    Mobile-first breadcrumb navigation with adaptive display
    ========================================= */

/* Breadcrumb container */
.breadcrumb-container {
    width: 100%;
    overflow: hidden;
}

/* Desktop/Tablet breadcrumbs */
.breadcrumb-full .mud-breadcrumb-item {
    font-size: 0.875rem;
}

.breadcrumb-link {
    color: var(--mud-palette-primary);
    text-decoration: none;
    transition: color 0.2s ease;
}

    .breadcrumb-link:hover {
        color: var(--mud-palette-primary-darken);
        text-decoration: underline;
    }

.breadcrumb-current {
    color: var(--mud-palette-text-primary);
    font-weight: 500;
}

/* Mobile breadcrumbs */
.mobile-breadcrumb {
    padding: 0;
}

.mobile-back-button {
    text-transform: none !important;
    font-size: 0.875rem;
    min-height: 36px;
    padding-left: 8px;
    padding-right: 12px;
    border-radius: 18px;
    margin-left: -8px; /* Align with left edge */
}

    .mobile-back-button .mud-button-label {
        font-weight: 400;
    }

.mobile-back-icon {
    margin-left: -8px;
}

.mobile-current-page {
    color: var(--mud-palette-text-primary);
    font-weight: 500;
    line-height: 1.2;
    margin-left: 4px;
}

.mobile-root-page {
    padding: 0;
}

    .mobile-root-page .mobile-current-page {
        margin-left: 0;
    }

    /* Dashboard icons for visual hierarchy */
    .mobile-root-page .mud-icon {
        color: var(--mud-palette-primary);
    }

/* Responsive typography */
@@media (max-width: 599px) {
    .mobile-current-page {
        font-size: 1.1rem;
    }

    .mobile-back-button {
        font-size: 0.8rem;
    }
}

/* Ensure proper spacing in navigation areas */
.breadcrumb-container + * {
    margin-top: 0;
}

/* Handle very long page titles on mobile */
@@media (max-width: 399px) {
    .mobile-current-page {
        font-size: 1rem;
        word-break: break-word;
    }
}

/*
  TARGET: Breadcrumbs inside an h6 MudText component.
  GOAL: Make them look like a proper page title.
*/
.mud-typography-h6 .mud-breadcrumb {
    font-size: 1.4rem;
    font-weight: 500;
}

    /* Make link parts match the color of the plain text parts */
    .mud-typography-h6 .mud-breadcrumb .mud-breadcrumb-link {
        color: inherit;
    }

/* =========================================
    LAYOUT UTILITIES
    ========================================= */

.loading-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    background: rgba(255, 255, 255, 0.7);
    z-index: 1000;
}

.min-width-12em {
    min-width: 12em;
}

.mud-card {
    width: 100%;
    box-sizing: border-box;
}

.gap-2 {
    gap: 0.5rem;
}

/* Custom utility colors */
.custom-color-white {
    background-color: white;
}

.custom-color-red {
    background-color: red;
}

.custom-color-yellow {
    background-color: yellow;
}

.custom-color-blue {
    color: #2196F3 !important;
}

/* Footer styles */
.footer {
    border-top: 1px solid rgba(0,0,0,0.1);
    margin-top: 2rem;
}

@media (max-width: 600px) {
    .footer .mud-chip {
        margin-bottom: 0.25rem;
    }
}

.footer .mud-chip {
    white-space: nowrap;
}

/* =========================================
    PRICE INPUT COMPONENT STYLES
    ========================================= */

/* Price input container */
.price-input {
    width: 100%;
    position: relative;
}

/* MudTextField styling within price input */
.price-input .mud-input {
    transition: color 0.2s ease;
    font-variant-numeric: tabular-nums; /* Makes numbers line up better */
    width: 100%; /* Take full container width */
    max-width: 100%; /* Never exceed container width */
    box-sizing: border-box; /* Include padding in width calculations */
    overflow: hidden; /* Handle overflow */
}

/* Strong direct selectors to override MudBlazor defaults for input alignment */
.price-input .mud-input input.mud-input-root,
.price-input .mud-input-slot > input.mud-input-root {
    text-align: right !important; /* Default right alignment */
}

/* Specific input styling - target by attribute as well for max specificity */
.price-input .mud-input input[type],
.price-input .mud-input input.mud-input-root,
.price-input .mud-input-slot > input.mud-input-root {
    text-align: right !important;
}

/* Force text alignment to apply at the input element level */
.mud-input-root[type="text"],
.mud-input-root[type="number"],
.mud-input-root[inputmode="decimal"] {
    text-align: right !important;
}

/* Light mode */
:root body:not(.mud-theme-dark) .price-input .mud-input {
    /* We might want to override default MudBlazor text color if using seven-segment with dark background */
    /* color: var(--mud-palette-text-primary); */
}

/* Dark mode */
:root body.mud-theme-dark .price-input .mud-input {
    /* Similarly, adjust for dark theme if needed */
    /* color: var(--mud-palette-text-primary); */
}

/* Specific MudBlazor input styling for price inputs */
.price-input .mud-input.mud-input-outlined {
    border-radius: 4px;
    transition: all 0.2s ease;
}

/* Ensure the width is proper for price inputs */
.price-input-field.mud-input-outlined-adornment,
.price-input-field.mud-input {
    width: 100%;
}

/* Apply seven-segment font to price input fields */
.price-input-field input.mud-input-root {
    font-family: 'DSEG7 Classic', monospace !important;
}

/* Glow effect for price inputs */
.price-input-field.glow-enabled input.mud-input-root {
    text-shadow: 0 0 4px currentColor;
}

.price-input .mud-input input.price-input-field.glow-enabled,
.price-input .mud-input.glow-enabled input.mud-input-root {
    text-shadow: 0 0 4px currentColor;
}

/* Direct text-based price displays in tables and grids - UPDATED: Remove specific Regular/Diesel references */
.mud-table-cell .price-display,
.mud-table-body .mud-table-cell[data-label="Price"],
.mud-table-body .mud-table-cell[data-label="New Price"],
.mud-table-body .mud-table-cell[data-label="Products"] {
    text-align: right !important;
    font-variant-numeric: tabular-nums;
    font-weight: bold;
}

/* Mobile specific styles for price inputs */
@media (max-width: 599px) {
    .price-input .mud-input {
        padding: 2px 4px; /* Less padding on small screens */
        letter-spacing: 0; /* No letter spacing on small screens */
        font-size: 0.9em; /* Slightly smaller font */
    }
}

/* Price color utility classes - these should still work */
.price-primary {
    color: var(--mud-palette-primary) !important;
}

.price-secondary {
    color: var(--mud-palette-secondary) !important;
}

.price-error {
    color: var(--mud-palette-error) !important;
}

.price-success {
    color: var(--mud-palette-success) !important;
}

.price-warning {
    color: var(--mud-palette-warning) !important;
}

/* =========================================
    SEVEN SEGMENT FONTS
    ========================================= */

/* Import DSEG fonts for seven-segment displays */
@font-face {
    font-family: 'DSEG7 Classic';
    src: url('/fonts/dseg7-classic-latin-700-normal.woff2') format('woff2'), url('/fonts/dseg7-classic-latin-700-normal.woff') format('woff');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'DSEG7 Classic';
    src: url('/fonts/dseg7-classic-latin-400-normal.woff2') format('woff2'), url('/fonts/dseg7-classic-latin-400-normal.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

/* Base styles for seven-segment display - self-contained approach */
.seven-segment-display {
    /* Display properties */
    display: inline-block;
    /* Visual styling */
    font-family: 'DSEG7 Classic', monospace;
    background-color: #1a1a1a;
    padding: 4px 8px;
    border-radius: 4px;
    letter-spacing: 2px;
    /* Text properties */
    color: white;
    text-align: right;
    font-size: 1.5em;
    /* Overflow handling - critical for responsive behavior */
    box-sizing: border-box;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Status styling for seven-segment displays */
.seven-segment-display.fresh {
    color: #4fff4f !important;
}

.seven-segment-display.fresh.glow-enabled {
    text-shadow: 0 0 4px rgba(0, 255, 0, 0.6);
}

.seven-segment-display.stale {
    color: #ff4444 !important;
    opacity: 0.9;
}

.seven-segment-display.stale.glow-enabled {
    text-shadow: 0 0 3px rgba(255, 68, 68, 0.5);
}

.seven-segment-display.competitor {
    color: #4fff4f !important; /* Green when fresh */
}

.seven-segment-display.competitor.glow-enabled {
    text-shadow: 0 0 4px rgba(255, 183, 0, 0.6);
}

.seven-segment-display.competitor.stale {
    color: #ff4444 !important; /* Red when stale */
    opacity: 0.85;
}

.seven-segment-display.competitor.stale.glow-enabled {
    text-shadow: 0 0 3px rgba(255, 140, 0, 0.5);
}

/* Alignment classes */
.seven-segment-display.price-align-left {
    text-align: left;
}

.seven-segment-display.price-align-center {
    text-align: center;
}

.seven-segment-display.price-align-right {
    text-align: right;
}

/* Size variations with responsive padding and font size */
.seven-segment-display.price-small {
    font-size: 1.0em;
    padding: 3px 6px;
    letter-spacing: 1px;
}

.seven-segment-display.price-medium {
    font-size: 1.5em;
    padding: 4px 8px;
    letter-spacing: 2px;
}

.seven-segment-display.price-large {
    font-size: 2.0em;
    padding: 5px 10px;
    letter-spacing: 2px;
}

.seven-segment-display.price-xlarge {
    font-size: 2.2em;
    padding: 6px 12px;
    letter-spacing: 3px;
}

/* Price containers - used for both seven-segment displays and regular price inputs */
.price-container {
    width: 100%;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    box-sizing: border-box;
}

/* Mobile optimizations */
@media (max-width: 599px) {
    .seven-segment-display {
        font-size: 1.0em;
        padding: 3px 6px;
        letter-spacing: 1px;
    }

    .seven-segment-display.price-large {
        font-size: 1.5em;
        padding: 4px 8px;
    }

    .seven-segment-display.price-xlarge {
        font-size: 2.2em;
        padding: 5px 10px;
    }
}

/* Competitor label styles */
.competitor-label {
    display: inline-block;
    width: 20px;
    text-align: center;
    margin-right: 4px;
    font-size: 1em;
}

/* Responsive competitor labels */
@media (max-width: 599px) {
    .competitor-label {
        width: 15px;
        font-size: 0.9em;
        margin-right: 3px;
    }
}

/* =========================================
    FLEXIBLE FUEL PRODUCTS STYLES
    NEW: Supports dynamic fuel product display
    ========================================= */

/* Flexible fuel products container for both cards and grids */
.fuel-products-container {
    display: flex;
    flex-direction: column;
    gap: 4px;
    width: 100%;
}

.fuel-product-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    min-height: 24px;
    gap: 8px;
}

.fuel-product-name {
    flex: 1;
    min-width: 0;
    font-weight: 500;
    font-size: 0.875rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.fuel-product-price {
    flex-shrink: 0;
    min-width: 60px;
}

/* Grid cell specific styling for fuel products */
.mud-table-cell .fuel-products-container,
.mud-data-grid-cell .fuel-products-container {
    gap: 2px;
}

.mud-table-cell .fuel-product-item,
.mud-data-grid-cell .fuel-product-item {
    min-height: 20px;
}

.mud-table-cell .fuel-product-name,
.mud-data-grid-cell .fuel-product-name {
    font-size: 0.8rem;
}

/* Card specific styling for fuel products */
.survey-card-item .fuel-products-container {
    gap: 6px;
}

.survey-card-item .fuel-product-item {
    background: rgba(0, 0, 0, 0.1);
    padding: 4px 8px;
    border-radius: 4px;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.survey-card-item .fuel-product-name {
    color: white;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
    font-size: 0.875rem;
}

/* Mobile optimizations for fuel products */
@media (max-width: 599px) {
    .fuel-product-item {
        gap: 4px;
    }

    .fuel-product-name {
        font-size: 0.75rem;
    }

    .fuel-product-price {
        min-width: 50px;
    }

    .mud-table-cell .fuel-product-name,
    .mud-data-grid-cell .fuel-product-name {
        font-size: 0.7rem;
    }

    .survey-card-item .fuel-product-name {
        font-size: 0.8rem;
    }
}

/* =========================================
    SURVEY COMPONENT STYLES
    ========================================= */

/* Typography fix for checkbox consistency - force checkbox text to match body2 typography */
.checkbox-body2 p.mud-typography.mud-typography-body1,
.checkbox-body2 .mud-typography.mud-typography-body1 {
    font-size: var(--mud-typography-body2-size) !important;
    font-weight: 400 !important;
    line-height: var(--mud-typography-body2-lineheight) !important;
    letter-spacing: var(--mud-typography-body2-letterspacing) !important;
}

/* Additional fallback targeting the paragraph directly */
.checkbox-body2 p {
    font-size: 0.875rem !important;
    font-weight: 400 !important;
    line-height: 1.43 !important;
    letter-spacing: 0.01071em !important;
}

/* Survey table sticky submit button */
.sticky-submit-button {
    box-shadow: 0 -2px 8px rgba(0,0,0,0.1);
}

/* Text truncation utility */
.text-truncate {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Compact Table Row styles */
.compact-survey-table .mud-table-container table tbody tr td {
    padding: 0; /* Remove default padding */
}

.compact-survey-table .mud-table-container table tbody tr td .mud-paper {
    padding: 8px; /* Add padding to MudPaper */
}

/* Card styles */
.price-card {
    margin-bottom: 0.5rem;
}

.price-section {
    background-color: var(--mud-palette-background-grey);
    padding: 0.5rem;
    border-radius: var(--mud-default-borderradius);
    margin-bottom: 0.25rem;
    overflow: hidden; /* Prevent content from overflowing */
}

.price-label {
    margin-bottom: 0.25rem;
}

/* Grid spacing adjustments for different card densities */
@media (min-width: 760px) and (max-width: 1119px) {
    /* 2 cards per row - need more compact display */
    .price-section .mud-grid-spacing-xs-1 {
        margin-top: -2px;
        margin-left: -2px;
    }

    .price-section .mud-grid-spacing-xs-1 > .mud-grid-item {
        padding-top: 2px;
        padding-left: 2px;
    }
}

@media (min-width: 1120px) {
    /* 3+ cards per row - need even more compact display */
    .price-section .mud-grid-spacing-xs-1 {
        margin-top: -1px;
        margin-left: -1px;
    }
    
    .price-section .mud-grid-spacing-xs-1 > .mud-grid-item {
        padding-top: 1px;
        padding-left: 1px;
    }
}

/* Mobile-optimized layout options */
.mobile-price-layout {
    display: none;
}

.desktop-price-layout {
    display: block;
}

@media (max-width: 599px) {
    .mobile-price-layout {
        display: block;
    }

    .desktop-price-layout {
        display: none;
    }

    /* Mobile specific category spacing */
    .price-category {
        margin-bottom: 1rem;
    }
    
    .price-category:last-child {
        margin-bottom: 0;
    }
}

/* Survey Card styles */
.survey-card {
    margin-bottom: 0.5rem;
}

.survey-card .price-section {
    background-color: rgba(0, 0, 0, 0.2);
    padding: 0.5rem;
    border-radius: var(--mud-default-borderradius);
    margin-bottom: 0.25rem;
}

/* Unified Survey Item Styles */
.survey-card.combined-survey {
    border: none;
    border-left: 3px solid #2196F3;
    background-color: rgba(33, 150, 243, 0.1);
    color: var(--mud-palette-text-primary);
}

.unified-survey-item.survey-card {
    transition: background-color 0.2s ease;
}

.unified-survey-item.survey-card:hover {
    background-color: rgba(0, 0, 0, 0.1);
}

/* Survey History List styles */
.survey-card.cstore-survey {
    border: none;
    border-left: 3px solid #1e88e5;
    background-color: rgba(30, 136, 229, 0.1);
    color: var(--mud-palette-text-primary);
}

.survey-card.competitor-survey {
    border: none;
    border-left: 3px solid #ff9800;
    background-color: rgba(255, 152, 0, 0.1);
    color: var(--mud-palette-text-primary);
}

.survey-connector {
    width: 2px;
    height: 20px;
    background-color: #666;
}

/* =========================================
    RESPONSIVE SURVEY TABLE STYLES
    Auto-scaling for mobile devices to prevent text cutoff
    Only overrides system defaults when space is actually constrained
    ========================================= */

/* Mobile responsive survey table improvements */
@media (max-width: 599px) {
    /* Auto-scaling product names using clamp() for responsive sizing */
    .survey-table-responsive .mud-typography,
    .survey-table-responsive .mud-typography-body2,
    .survey-table-responsive .checkbox-body2 p,
    .survey-table-responsive .checkbox-body2 .mud-typography {
        font-size: clamp(0.65rem, 3.5vw, 0.875rem) !important;
        line-height: 1.2 !important;
        word-break: break-word;
        hyphens: auto;
    }

    /* Smart price input scaling - only override system default when container is narrow */
    .survey-table-responsive {
        container-type: inline-size;
    }

    /* Only scale down from system default when price column is very constrained */
    @container (max-width: 180px) {
        .survey-table-responsive .price-input input.mud-input-root {
            /* Use min() to choose smaller of: current system size OR emergency scaled size */
            font-size: min(1em, clamp(0.7rem, 4vw, 0.9rem)) !important;
            padding-left: 2px !important;
            padding-right: 2px !important;
            letter-spacing: 0px !important;
        }
    }

    /* For wider price columns, respect the system default completely */
    @container (min-width: 181px) {
        .survey-table-responsive .price-input input.mud-input-root {
            /* Don't override font-size - let PriceInput component's system default take precedence */
            padding-left: 2px !important;
            padding-right: 2px !important;
        }
    }

    /* Fallback for browsers without container query support */
    @supports not (container-type: inline-size) {
        /* Only apply minimal scaling on very narrow screens */
        @media (max-width: 360px) {
            .survey-table-responsive .price-input input.mud-input-root {
                font-size: min(1em, clamp(0.75rem, 4vw, 0.95rem)) !important;
                padding-left: 2px !important;
                padding-right: 2px !important;
                letter-spacing: 0px !important;
            }
        }
    }

    /* Ensure containers don't overflow */
    .survey-table-responsive .mud-grid-item {
        overflow: hidden;
        min-width: 0; /* Important for flex shrinking */
    }

    /* Product name container - allow text wrapping if needed */
    .survey-table-responsive .product-name-container {
        overflow: hidden;
        word-wrap: break-word;
        hyphens: auto;
    }

    /* Price container - maintain minimum width for readability */
    .survey-table-responsive .price-container {
        min-width: 80px; /* Ensure minimum space for system font size */
    }

    /* Checkbox labels should also scale */
    .survey-table-responsive .mud-checkbox .mud-button-label {
        font-size: clamp(0.65rem, 3.5vw, 0.875rem) !important;
        line-height: 1.2 !important;
    }

    /* Reduce padding on mobile for more usable space */
    .survey-table-responsive .mud-grid {
        padding: 4px !important;
    }

    .survey-table-responsive .mud-grid-item {
        padding-top: 2px !important;
        padding-bottom: 2px !important;
    }
}

/* Ultra-small screens (less than 350px width) - emergency scaling only */
@media (max-width: 349px) {
    .survey-table-responsive .mud-typography,
    .survey-table-responsive .checkbox-body2 p {
        font-size: clamp(0.6rem, 4vw, 0.75rem) !important;
    }

    /* Only apply emergency price scaling on ultra-narrow screens */
    .survey-table-responsive .price-input input.mud-input-root {
        font-size: min(1em, clamp(0.65rem, 4.5vw, 0.8rem)) !important;
    }
}

/* =========================================
    RESPONSIVE PRICE DISPLAY STYLES
    Auto-scaling for PriceDisplay components in constrained layouts
    Only overrides system defaults when space is actually constrained
    ========================================= */

/* Mobile responsive price display improvements */
@media (max-width: 599px) {
    /* Smart price display scaling - only override system default when container is narrow */
    .price-display-responsive,
    .price-card,
    .mud-table-cell,
    .mud-data-grid-cell {
        container-type: inline-size;
    }

    /* Only scale down from system default when price display container is very constrained */
    @container (max-width: 120px) {
        .seven-segment-display {
            /* Use min() to choose smaller of: current system size OR emergency scaled size */
            font-size: min(1.2em, clamp(0.65rem, 3.5vw, 0.9rem)) !important;
            padding: 2px 4px !important;
            letter-spacing: 1px !important;
        }
    }

    /* For medium-width containers, use moderate scaling */
    @container (min-width: 121px) and (max-width: 160px) {
        .seven-segment-display {
            font-size: min(1.4em, clamp(0.75rem, 4vw, 1.1rem)) !important;
            padding: 3px 6px !important;
            letter-spacing: 1px !important;
        }
    }

    /* For wider containers, respect the system default completely */
    @container (min-width: 161px) {
        .seven-segment-display {
            /* Don't override font-size - let PriceDisplay component's system default take precedence */
            padding: 3px 6px !important;
            letter-spacing: 1px !important;
        }
    }

    /* Fallback for browsers without container query support */
    @supports not (container-type: inline-size) {
        /* Only apply scaling on very narrow screens */
        @media (max-width: 360px) {
            .seven-segment-display {
                font-size: min(1.2em, clamp(0.7rem, 4vw, 1rem)) !important;
                padding: 2px 4px !important;
                letter-spacing: 1px !important;
            }
        }
        /* Moderate scaling for medium narrow screens */
        @media (min-width: 361px) and (max-width: 480px) {
            .seven-segment-display {
                font-size: min(1.4em, clamp(0.8rem, 4vw, 1.2rem)) !important;
                padding: 3px 6px !important;
                letter-spacing: 1px !important;
            }
        }
    }

    /* Specific optimizations for card layouts */
    .price-card .fuel-products-container .seven-segment-display {
        min-width: 60px; /* Ensure minimum display width */
        overflow: hidden;
        text-overflow: ellipsis;
    }

    /* Specific optimizations for data grid cells */
    .mud-table-cell .seven-segment-display,
    .mud-data-grid-cell .seven-segment-display {
        min-width: 65px; /* Ensure minimum display width in grids */
        max-width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    /* Flex container optimizations */
    .d-flex .seven-segment-display {
        flex-shrink: 1; /* Allow price displays to shrink in flex containers */
        min-width: 60px; /* But maintain minimum readable width */
    }
}

/* Ultra-small screens (less than 350px width) - emergency scaling only */
@media (max-width: 349px) {
    .seven-segment-display {
        font-size: min(1em, clamp(0.6rem, 4vw, 0.8rem)) !important;
        padding: 2px 3px !important;
        letter-spacing: 0px !important;
        min-width: 55px !important;
    }
}

/* =========================================
    HOME OFFICE & DASHBOARD STYLES
    ========================================= */

/* Home office styles */
.custom-tabs {
    width: 100%;
    overflow-x: auto;
}

.custom-tab-panel {
    width: 100%;
}

.sort-menu {
    padding-top: .5em;
    padding-bottom: .5em;
}

/* =========================================
    RESPONSIVE BREAKPOINTS
    ========================================= */

@media (max-width: 759px) {
    .mud-item.custom-card-width {
        flex: 0 0 100%;
        max-width: 100%;
    }
}

@media (min-width: 760px) and (max-width: 1119px) {
    .mud-item.custom-card-width {
        flex: 0 0 50%;
        max-width: 50%;
    }
}

@media (min-width: 1120px) and (max-width: 1449px) {
    .mud-item.custom-card-width {
        flex: 0 0 33.33%;
        max-width: 33.33%;
    }
}

@media (min-width: 1450px) {
    .mud-item.custom-card-width {
        flex: 0 0 25%;
        max-width: 25%;
    }
}

/* =========================================
    ADAPTIVE GRID/CARD LAYOUT STYLES
    Three-tier responsive strategy for data grids
    ========================================= */

/* Default: Desktop shows grid, cards are hidden */
.adaptive-survey-grid .mud-data-grid {
    display: block !important;
}

.adaptive-survey-cards {
    display: none !important;
}

/* Mobile & Tablet: Hide grid, show cards */
@media (max-width: 1023px) {
    .adaptive-survey-grid .mud-data-grid {
        display: none !important;
    }

    .adaptive-survey-cards {
        display: grid !important;
        grid-template-columns: 1fr;
        gap: 12px;
        padding: 8px;
    }
}

/* Tablet: Two columns */
@media (min-width: 768px) and (max-width: 1023px) {
    .adaptive-survey-cards {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Individual survey card styling */
.survey-card-item {
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    padding: 16px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    transition: box-shadow 0.2s ease, transform 0.1s ease;
    position: relative;
    overflow: hidden;
    cursor: pointer;
    /* Background colors will be set by type-specific classes below */
}

.survey-card-item:hover {
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    transform: translateY(-1px);
}

/* Card type backgrounds - matching the grid RowStyleFunc colors */
.survey-card-item.type-request {
    background-color: rgba(255, 193, 7, 0.15); /* Light amber for requests */
    border-left: 4px solid #9c27b0;
}

.survey-card-item.type-response {
    background-color: rgba(3, 169, 244, 0.15); /* Light blue for responses */
    border-left: 4px solid rgba(3, 169, 244, 0.7); /* Thicker blue left border for responses */
}

.survey-card-item.type-cstore {
    background-color: rgba(30, 136, 229, 0.1); /* Original CStore color */
    border-left: 4px solid #1e88e5;
}

.survey-card-item.type-competitor {
    background-color: rgba(255, 152, 0, 0.1); /* Original Competitor color */
    border-left: 4px solid #ff9800;
}

/* Card header with badges */
.survey-card-header {
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    margin-bottom: 12px;
    flex-wrap: wrap;
    gap: 8px;
}

.survey-card-badges {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

.survey-card-badge {
    padding: 4px 8px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: bold;
    color: white;
    white-space: nowrap;
}

/* Badge colors matching your existing chip styles */
.badge-daily {
    background: #2196F3;
}

.badge-extra {
    background: #ff9800;
}

.badge-request {
    background: #9c27b0;
}

.badge-response {
    background: #03a9f4;
}

.badge-ontime {
    background: #4caf50;
}

.badge-late {
    background: #f44336;
}

.badge-pending {
    background: #ff9800;
}

.badge-completed {
    background: #4caf50;
}

/* Card content */
.survey-card-name {
    font-weight: bold;
    font-size: 16px;
    margin-bottom: 6px;
    color: white; /* Changed to white for better contrast on colored backgrounds */
    line-height: 1.3;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5); /* Add text shadow for readability */
}

.survey-card-date {
    color: rgba(255, 255, 255, 0.9); /* Light white for better contrast */
    font-size: 14px;
    margin-bottom: 12px;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5); /* Add text shadow for readability */
}

/* UPDATED: Flexible price display area - no longer fixed grid */
.survey-card-products {
    margin-bottom: 12px;
    background: rgba(0, 0, 0, 0.1);
    padding: 8px;
    border-radius: 6px;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.survey-card-products-title {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.8);
    margin-bottom: 6px;
    font-weight: 500;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}

/* Actions area */
.survey-card-actions {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid #f0f0f0;
}

.survey-card-expand-btn {
    background: rgba(0, 0, 0, 0.2); /* Semi-transparent dark background */
    color: white; /* White text for contrast */
    border: 1px solid rgba(255, 255, 255, 0.3); /* Subtle white border */
    padding: 8px 12px;
    border-radius: 4px;
    font-size: 12px;
    cursor: pointer;
    transition: background 0.2s ease;
    display: flex;
    align-items: center;
    gap: 4px;
}

.survey-card-expand-btn:hover {
    background: rgba(0, 0, 0, 0.4); /* Darker on hover */
    border-color: rgba(255, 255, 255, 0.5); /* Brighter border on hover */
}

/* Request-specific styling */
.survey-card-request-info {
    background: rgba(0, 0, 0, 0.2); /* Semi-transparent dark background */
    border: 1px solid rgba(255, 255, 255, 0.3); /* Subtle white border */
    border-radius: 6px;
    padding: 8px;
    margin-bottom: 8px;
    font-size: 13px;
    color: white; /* White text */
    display: flex;
    align-items: center;
    gap: 6px;
}

.survey-card-pending {
    text-align: center;
    color: white; /* White text for contrast */
    font-style: italic;
    padding: 16px;
    background: rgba(0, 0, 0, 0.2); /* Semi-transparent dark background */
    border: 1px solid rgba(255, 255, 255, 0.3); /* Subtle white border */
    border-radius: 6px;
    margin: 8px 0;
}

/* Mobile optimizations */
@media (max-width: 599px) {
    .survey-card-item {
        padding: 12px;
    }

    .survey-card-name {
        font-size: 15px;
    }

    .survey-card-date {
        font-size: 13px;
    }

    .survey-card-badges {
        flex-direction: column;
        align-items: flex-start;
    }

    .survey-card-header {
        flex-direction: column;
        align-items: flex-start;
    }

    .survey-card-products {
        padding: 6px;
    }
}

/* Tablet optimizations */
@media (min-width: 768px) and (max-width: 1023px) {
    .survey-card-item {
        padding: 14px;
    }

    .survey-card-products {
        padding: 7px;
    }
}

.survey-card-request-details {
    background-color: rgba(3, 169, 244, 0.05);
    padding: 12px;
    border-radius: 6px;
    font-size: 14px;
    color: white;
    line-height: 1.4;
}

.survey-card-request-details > div {
    margin-bottom: 4px;
}

.survey-card-request-details > div:last-child {
    margin-bottom: 0;
}

/* =========================================
    COMMON ELEMENTS & GLOBAL STYLES
    ========================================= */

/* Blazor Error Handling */
#blazor-error-ui {
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

#blazor-error-ui .dismiss {
    cursor: pointer;
    position: absolute;
    right: 0.75rem;
    top: 0.5rem;
}

.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,PHN...);
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
}

.blazor-error-boundary::after {
    content: "An error has occurred.";
}

/* Test Environment Banner */
.test-environment-banner {
    position: fixed; /* Change from default to fixed */
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    background-color: #ff9800;
    color: white;
    text-align: center;
    padding: 4px 0;
    font-weight: bold;
    height: 28px; /* Fixed height */
    line-height: 28px; /* Vertically center text */
    z-index: 2000; /* Ensure it's above everything */
}

/* Update AppBar positioning with banner */
.app-with-banner .mud-appbar.mud-appbar-fixed-top {
    position: fixed !important; /* Ensure it stays fixed */
    top: 28px !important; /* Match banner height exactly */
    z-index: 1500; /* Lower than banner but higher than content */
    width: 100%; /* Full width */
}

/* =========================================
    MUDBLAZOR SNACKBAR Z-INDEX FIX
    Fix for toast notifications being hidden behind test banner
    ========================================= */

/* MudSnackbar container - Must be above test banner (2000) - trying higher value */
.mud-snackbar-container,
.mud-snackbar-container * {
    z-index: 2500 !important;
}

/* Individual snackbar items - ensure they inherit proper z-index */
.mud-snackbar,
.mud-snackbar * {
    z-index: 2500 !important;
}

/* All possible snackbar selectors - cast a wide net */
div[class*="mud-snackbar"],
div[class*="snackbar"],
.mud-snackbar-content-wrapper,
.mud-snackbar-content,
.mud-snackbar-action,
.mud-snackbar-close-button {
    z-index: 2500 !important;
}

/* Target by position if MudBlazor uses specific positioning */
div[style*="position: fixed"][style*="top"],
div[style*="position: absolute"][style*="top"] {
    z-index: 2500 !important;
}

/* Update main content padding with banner */
.app-with-banner .mud-main-content {
    padding-top: 92px !important; /* 64px (AppBar) + 28px (banner) */
}

/* Fix for MudAlert and content positioning with banner */
.app-with-banner .mud-main-content .mud-container {
    padding-top: 16px !important; /* Add some breathing room at the top */
    margin-top: 0 !important; /* Ensure no conflicting margins */
}

/* If alerts are still getting cut off, add specific alert spacing */
.app-with-banner .mud-alert {
    margin-top: 8px !important;
}

.app-with-banner .mud-alert:first-child {
    margin-top: 16px !important;
}

/* Update drawer positioning when banner is active */
.app-with-banner .mud-drawer.mud-drawer-fixed {
    top: 92px !important; /* 64px (AppBar) + 28px (banner) */
    height: calc(100% - 92px) !important;
}

/* =========================================
    NAVIGATION MENU STYLES
    ========================================= */

/* Navigation Menu Container */
.nav-menu-container {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.nav-links {
    flex: 1;
}

.nav-footer {
    margin-top: auto;
    padding-top: 16px;
}

/* =========================================
    LAYOUT UTILITIES
    ========================================= */

.loading-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    background: rgba(255, 255, 255, 0.7);
    z-index: 1000;
}

.min-width-12em {
    min-width: 12em;
}

.mud-card {
    width: 100%;
    box-sizing: border-box;
}

.gap-2 {
    gap: 0.5rem;
}

/* Custom utility colors */
.custom-color-white {
    background-color: white;
}

.custom-color-red {
    background-color: red;
}

.custom-color-yellow {
    background-color: yellow;
}

.custom-color-blue {
    color: #2196F3 !important;
}

/* Footer styles */
.footer {
    border-top: 1px solid rgba(0,0,0,0.1);
    margin-top: 2rem;
}

@media (max-width: 600px) {
    .footer .mud-chip {
        margin-bottom: 0.25rem;
    }
}

.footer .mud-chip {
    white-space: nowrap;
}

/* =========================================
    PRICE INPUT COMPONENT STYLES
    ========================================= */

/* Price input container */
.price-input {
    width: 100%;
    position: relative;
}

/* MudTextField styling within price input */
.price-input .mud-input {
    transition: color 0.2s ease;
    font-variant-numeric: tabular-nums; /* Makes numbers line up better */
    width: 100%; /* Take full container width */
    max-width: 100%; /* Never exceed container width */
    box-sizing: border-box; /* Include padding in width calculations */
    overflow: hidden; /* Handle overflow */
}

/* Strong direct selectors to override MudBlazor defaults for input alignment */
.price-input .mud-input input.mud-input-root,
.price-input .mud-input-slot > input.mud-input-root {
    text-align: right !important; /* Default right alignment */
}

/* Specific input styling - target by attribute as well for max specificity */
.price-input .mud-input input[type],
.price-input .mud-input input.mud-input-root,
.price-input .mud-input-slot > input.mud-input-root {
    text-align: right !important;
}

/* Force text alignment to apply at the input element level */
.mud-input-root[type="text"],
.mud-input-root[type="number"],
.mud-input-root[inputmode="decimal"] {
    text-align: right !important;
}

/* Light mode */
:root body:not(.mud-theme-dark) .price-input .mud-input {
    /* We might want to override default MudBlazor text color if using seven-segment with dark background */
    /* color: var(--mud-palette-text-primary); */
}

/* Dark mode */
:root body.mud-theme-dark .price-input .mud-input {
    /* Similarly, adjust for dark theme if needed */
    /* color: var(--mud-palette-text-primary); */
}

/* Specific MudBlazor input styling for price inputs */
.price-input .mud-input.mud-input-outlined {
    border-radius: 4px;
    transition: all 0.2s ease;
}

/* Ensure the width is proper for price inputs */
.price-input-field.mud-input-outlined-adornment,
.price-input-field.mud-input {
    width: 100%;
}

/* Apply seven-segment font to price input fields */
.price-input-field input.mud-input-root {
    font-family: 'DSEG7 Classic', monospace !important;
}

/* Glow effect for price inputs */
.price-input-field.glow-enabled input.mud-input-root {
    text-shadow: 0 0 4px currentColor;
}

.price-input .mud-input input.price-input-field.glow-enabled,
.price-input .mud-input.glow-enabled input.mud-input-root {
    text-shadow: 0 0 4px currentColor;
}

/* Direct text-based price displays in tables and grids - UPDATED: Remove specific Regular/Diesel references */
.mud-table-cell .price-display,
.mud-table-body .mud-table-cell[data-label="Price"],
.mud-table-body .mud-table-cell[data-label="New Price"],
.mud-table-body .mud-table-cell[data-label="Products"] {
    text-align: right !important;
    font-variant-numeric: tabular-nums;
    font-weight: bold;
}

/* Mobile specific styles for price inputs */
@media (max-width: 599px) {
    .price-input .mud-input {
        padding: 2px 4px; /* Less padding on small screens */
        letter-spacing: 0; /* No letter spacing on small screens */
        font-size: 0.9em; /* Slightly smaller font */
    }
}

/* Price color utility classes - these should still work */
.price-primary {
    color: var(--mud-palette-primary) !important;
}

.price-secondary {
    color: var(--mud-palette-secondary) !important;
}

.price-error {
    color: var(--mud-palette-error) !important;
}

.price-success {
    color: var(--mud-palette-success) !important;
}

.price-warning {
    color: var(--mud-palette-warning) !important;
}

/* =========================================
    SEVEN SEGMENT FONTS
    ========================================= */

/* Import DSEG fonts for seven-segment displays */
@font-face {
    font-family: 'DSEG7 Classic';
    src: url('/fonts/dseg7-classic-latin-700-normal.woff2') format('woff2'), url('/fonts/dseg7-classic-latin-700-normal.woff') format('woff');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'DSEG7 Classic';
    src: url('/fonts/dseg7-classic-latin-400-normal.woff2') format('woff2'), url('/fonts/dseg7-classic-latin-400-normal.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

/* Base styles for seven-segment display - self-contained approach */
.seven-segment-display {
    /* Display properties */
    display: inline-block;
    /* Visual styling */
    font-family: 'DSEG7 Classic', monospace;
    background-color: #1a1a1a;
    padding: 4px 8px;
    border-radius: 4px;
    letter-spacing: 2px;
    /* Text properties */
    color: white;
    text-align: right;
    font-size: 1.5em;
    /* Overflow handling - critical for responsive behavior */
    box-sizing: border-box;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Status styling for seven-segment displays */
.seven-segment-display.fresh {
    color: #4fff4f !important;
}

.seven-segment-display.fresh.glow-enabled {
    text-shadow: 0 0 4px rgba(0, 255, 0, 0.6);
}

.seven-segment-display.stale {
    color: #ff4444 !important;
    opacity: 0.9;
}

.seven-segment-display.stale.glow-enabled {
    text-shadow: 0 0 3px rgba(255, 68, 68, 0.5);
}

.seven-segment-display.competitor {
    color: #4fff4f !important; /* Green when fresh */
}

.seven-segment-display.competitor.glow-enabled {
    text-shadow: 0 0 4px rgba(255, 183, 0, 0.6);
}

.seven-segment-display.competitor.stale {
    color: #ff4444 !important; /* Red when stale */
    opacity: 0.85;
}

.seven-segment-display.competitor.stale.glow-enabled {
    text-shadow: 0 0 3px rgba(255, 140, 0, 0.5);
}

/* Alignment classes */
.seven-segment-display.price-align-left {
    text-align: left;
}

.seven-segment-display.price-align-center {
    text-align: center;
}

.seven-segment-display.price-align-right {
    text-align: right;
}

/* Size variations with responsive padding and font size */
.seven-segment-display.price-small {
    font-size: 1.0em;
    padding: 3px 6px;
    letter-spacing: 1px;
}

.seven-segment-display.price-medium {
    font-size: 1.5em;
    padding: 4px 8px;
    letter-spacing: 2px;
}

.seven-segment-display.price-large {
    font-size: 2.0em;
    padding: 5px 10px;
    letter-spacing: 2px;
}

.seven-segment-display.price-xlarge {
    font-size: 2.2em;
    padding: 6px 12px;
    letter-spacing: 3px;
}

/* Price containers - used for both seven-segment displays and regular price inputs */
.price-container {
    width: 100%;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    box-sizing: border-box;
}

/* Mobile optimizations */
@media (max-width: 599px) {
    .seven-segment-display {
        font-size: 1.0em;
        padding: 3px 6px;
        letter-spacing: 1px;
    }

    .seven-segment-display.price-large {
        font-size: 1.5em;
        padding: 4px 8px;
    }

    .seven-segment-display.price-xlarge {
        font-size: 2.2em;
        padding: 5px 10px;
    }
}

/* Competitor label styles */
.competitor-label {
    display: inline-block;
    width: 20px;
    text-align: center;
    margin-right: 4px;
    font-size: 1em;
}

/* Responsive competitor labels */
@media (max-width: 599px) {
    .competitor-label {
        width: 15px;
        font-size: 0.9em;
        margin-right: 3px;
    }
}

/* =========================================
    FLEXIBLE FUEL PRODUCTS STYLES
    NEW: Supports dynamic fuel product display
    ========================================= */

/* Flexible fuel products container for both cards and grids */
.fuel-products-container {
    display: flex;
    flex-direction: column;
    gap: 4px;
    width: 100%;
}

.fuel-product-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    min-height: 24px;
    gap: 8px;
}

.fuel-product-name {
    flex: 1;
    min-width: 0;
    font-weight: 500;
    font-size: 0.875rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.fuel-product-price {
    flex-shrink: 0;
    min-width: 60px;
}

/* Grid cell specific styling for fuel products */
.mud-table-cell .fuel-products-container,
.mud-data-grid-cell .fuel-products-container {
    gap: 2px;
}

.mud-table-cell .fuel-product-item,
.mud-data-grid-cell .fuel-product-item {
    min-height: 20px;
}

.mud-table-cell .fuel-product-name,
.mud-data-grid-cell .fuel-product-name {
    font-size: 0.8rem;
}

/* Card specific styling for fuel products */
.survey-card-item .fuel-products-container {
    gap: 6px;
}

.survey-card-item .fuel-product-item {
    background: rgba(0, 0, 0, 0.1);
    padding: 4px 8px;
    border-radius: 4px;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.survey-card-item .fuel-product-name {
    color: white;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
    font-size: 0.875rem;
}

/* Mobile optimizations for fuel products */
@media (max-width: 599px) {
    .fuel-product-item {
        gap: 4px;
    }

    .fuel-product-name {
        font-size: 0.75rem;
    }

    .fuel-product-price {
        min-width: 50px;
    }

    .mud-table-cell .fuel-product-name,
    .mud-data-grid-cell .fuel-product-name {
        font-size: 0.7rem;
    }

    .survey-card-item .fuel-product-name {
        font-size: 0.8rem;
    }
}

/* =========================================
    SURVEY COMPONENT STYLES
    ========================================= */

/* Typography fix for checkbox consistency - force checkbox text to match body2 typography */
.checkbox-body2 p.mud-typography.mud-typography-body1,
.checkbox-body2 .mud-typography.mud-typography-body1 {
    font-size: var(--mud-typography-body2-size) !important;
    font-weight: 400 !important;
    line-height: var(--mud-typography-body2-lineheight) !important;
    letter-spacing: var(--mud-typography-body2-letterspacing) !important;
}

/* Additional fallback targeting the paragraph directly */
.checkbox-body2 p {
    font-size: 0.875rem !important;
    font-weight: 400 !important;
    line-height: 1.43 !important;
    letter-spacing: 0.01071em !important;
}

/* Survey table sticky submit button */
.sticky-submit-button {
    box-shadow: 0 -2px 8px rgba(0,0,0,0.1);
}

/* Text truncation utility */
.text-truncate {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Compact Table Row styles */
.compact-survey-table .mud-table-container table tbody tr td {
    padding: 0; /* Remove default padding */
}

.compact-survey-table .mud-table-container table tbody tr td .mud-paper {
    padding: 8px; /* Add padding to MudPaper */
}

/* Card styles */
.price-card {
    margin-bottom: 0.5rem;
}

.price-section {
    background-color: var(--mud-palette-background-grey);
    padding: 0.5rem;
    border-radius: var(--mud-default-borderradius);
    margin-bottom: 0.25rem;
    overflow: hidden; /* Prevent content from overflowing */
}

.price-label {
    margin-bottom: 0.25rem;
}

/* Grid spacing adjustments for different card densities */
@media (min-width: 760px) and (max-width: 1119px) {
    /* 2 cards per row - need more compact display */
    .price-section .mud-grid-spacing-xs-1 {
        margin-top: -2px;
        margin-left: -2px;
    }

    .price-section .mud-grid-spacing-xs-1 > .mud-grid-item {
        padding-top: 2px;
        padding-left: 2px;
    }
}

@media (min-width: 1120px) {
    /* 3+ cards per row - need even more compact display */
    .price-section .mud-grid-spacing-xs-1 {
        margin-top: -1px;
        margin-left: -1px;
    }
    
    .price-section .mud-grid-spacing-xs-1 > .mud-grid-item {
        padding-top: 1px;
        padding-left: 1px;
    }
}

/* Mobile-optimized layout options */
.mobile-price-layout {
    display: none;
}

.desktop-price-layout {
    display: block;
}

@media (max-width: 599px) {
    .mobile-price-layout {
        display: block;
    }

    .desktop-price-layout {
        display: none;
    }

    /* Mobile specific category spacing */
    .price-category {
        margin-bottom: 1rem;
    }
    
    .price-category:last-child {
        margin-bottom: 0;
    }
}

/* Survey Card styles */
.survey-card {
    margin-bottom: 0.5rem;
}

.survey-card .price-section {
    background-color: rgba(0, 0, 0, 0.2);
    padding: 0.5rem;
    border-radius: var(--mud-default-borderradius);
    margin-bottom: 0.25rem;
}

/* Unified Survey Item Styles */
.survey-card.combined-survey {
    border: none;
    border-left: 3px solid #2196F3;
    background-color: rgba(33, 150, 243, 0.1);
    color: var(--mud-palette-text-primary);
}

.unified-survey-item.survey-card {
    transition: background-color 0.2s ease;
}

.unified-survey-item.survey-card:hover {
    background-color: rgba(0, 0, 0, 0.1);
}

/* Survey History List styles */
.survey-card.cstore-survey {
    border: none;
    border-left: 3px solid #1e88e5;
    background-color: rgba(30, 136, 229, 0.1);
    color: var(--mud-palette-text-primary);
}

.survey-card.competitor-survey {
    border: none;
    border-left: 3px solid #ff9800;
    background-color: rgba(255, 152, 0, 0.1);
    color: var(--mud-palette-text-primary);
}

.survey-connector {
    width: 2px;
    height: 20px;
    background-color: #666;
}

/* =========================================
    RESPONSIVE SURVEY TABLE STYLES
    Auto-scaling for mobile devices to prevent text cutoff
    Only overrides system defaults when space is actually constrained
    ========================================= */

/* Mobile responsive survey table improvements */
@media (max-width: 599px) {
    /* Auto-scaling product names using clamp() for responsive sizing */
    .survey-table-responsive .mud-typography,
    .survey-table-responsive .mud-typography-body2,
    .survey-table-responsive .checkbox-body2 p,
    .survey-table-responsive .checkbox-body2 .mud-typography {
        font-size: clamp(0.65rem, 3.5vw, 0.875rem) !important;
        line-height: 1.2 !important;
        word-break: break-word;
        hyphens: auto;
    }

    /* Smart price input scaling - only override system default when container is narrow */
    .survey-table-responsive {
        container-type: inline-size;
    }

    /* Only scale down from system default when price column is very constrained */
    @container (max-width: 180px) {
        .survey-table-responsive .price-input input.mud-input-root {
            /* Use min() to choose smaller of: current system size OR emergency scaled size */
            font-size: min(1em, clamp(0.7rem, 4vw, 0.9rem)) !important;
            padding-left: 2px !important;
            padding-right: 2px !important;
            letter-spacing: 0px !important;
        }
    }

    /* For wider price columns, respect the system default completely */
    @container (min-width: 181px) {
        .survey-table-responsive .price-input input.mud-input-root {
            /* Don't override font-size - let PriceInput component's system default take precedence */
            padding-left: 2px !important;
            padding-right: 2px !important;
        }
    }

    /* Fallback for browsers without container query support */
    @supports not (container-type: inline-size) {
        /* Only apply minimal scaling on very narrow screens */
        @media (max-width: 360px) {
            .survey-table-responsive .price-input input.mud-input-root {
                font-size: min(1em, clamp(0.75rem, 4vw, 0.95rem)) !important;
                padding-left: 2px !important;
                padding-right: 2px !important;
                letter-spacing: 0px !important;
            }
        }
    }

    /* Ensure containers don't overflow */
    .survey-table-responsive .mud-grid-item {
        overflow: hidden;
        min-width: 0; /* Important for flex shrinking */
    }

    /* Product name container - allow text wrapping if needed */
    .survey-table-responsive .product-name-container {
        overflow: hidden;
        word-wrap: break-word;
        hyphens: auto;
    }

    /* Price container - maintain minimum width for readability */
    .survey-table-responsive .price-container {
        min-width: 80px; /* Ensure minimum space for system font size */
    }

    /* Checkbox labels should also scale */
    .survey-table-responsive .mud-checkbox .mud-button-label {
        font-size: clamp(0.65rem, 3.5vw, 0.875rem) !important;
        line-height: 1.2 !important;
    }

    /* Reduce padding on mobile for more usable space */
    .survey-table-responsive .mud-grid {
        padding: 4px !important;
    }

    .survey-table-responsive .mud-grid-item {
        padding-top: 2px !important;
        padding-bottom: 2px !important;
    }
}

/* Ultra-small screens (less than 350px width) - emergency scaling only */
@media (max-width: 349px) {
    .survey-table-responsive .mud-typography,
    .survey-table-responsive .checkbox-body2 p {
        font-size: clamp(0.6rem, 4vw, 0.75rem) !important;
    }

    /* Only apply emergency price scaling on ultra-narrow screens */
    .survey-table-responsive .price-input input.mud-input-root {
        font-size: min(1em, clamp(0.65rem, 4.5vw, 0.8rem)) !important;
    }
}

/* =========================================
    RESPONSIVE PRICE DISPLAY STYLES
    Auto-scaling for PriceDisplay components in constrained layouts
    Only overrides system defaults when space is actually constrained
    ========================================= */

/* Mobile responsive price display improvements */
@media (max-width: 599px) {
    /* Smart price display scaling - only override system default when container is narrow */
    .price-display-responsive,
    .price-card,
    .mud-table-cell,
    .mud-data-grid-cell {
        container-type: inline-size;
    }

    /* Only scale down from system default when price display container is very constrained */
    @container (max-width: 120px) {
        .seven-segment-display {
            /* Use min() to choose smaller of: current system size OR emergency scaled size */
            font-size: min(1.2em, clamp(0.65rem, 3.5vw, 0.9rem)) !important;
            padding: 2px 4px !important;
            letter-spacing: 1px !important;
        }
    }

    /* For medium-width containers, use moderate scaling */
    @container (min-width: 121px) and (max-width: 160px) {
        .seven-segment-display {
            font-size: min(1.4em, clamp(0.75rem, 4vw, 1.1rem)) !important;
            padding: 3px 6px !important;
            letter-spacing: 1px !important;
        }
    }

    /* For wider containers, respect the system default completely */
    @container (min-width: 161px) {
        .seven-segment-display {
            /* Don't override font-size - let PriceDisplay component's system default take precedence */
            padding: 3px 6px !important;
            letter-spacing: 1px !important;
        }
    }

    /* Fallback for browsers without container query support */
    @supports not (container-type: inline-size) {
        /* Only apply scaling on very narrow screens */
        @media (max-width: 360px) {
            .seven-segment-display {
                font-size: min(1.2em, clamp(0.7rem, 4vw, 1rem)) !important;
                padding: 2px 4px !important;
                letter-spacing: 1px !important;
            }
        }
        /* Moderate scaling for medium narrow screens */
        @media (min-width: 361px) and (max-width: 480px) {
            .seven-segment-display {
                font-size: min(1.4em, clamp(0.8rem, 4vw, 1.2rem)) !important;
                padding: 3px 6px !important;
                letter-spacing: 1px !important;
            }
        }
    }

    /* Specific optimizations for card layouts */
    .price-card .fuel-products-container .seven-segment-display {
        min-width: 60px; /* Ensure minimum display width */
        overflow: hidden;
        text-overflow: ellipsis;
    }

    /* Specific optimizations for data grid cells */
    .mud-table-cell .seven-segment-display,
    .mud-data-grid-cell .seven-segment-display {
        min-width: 65px; /* Ensure minimum display width in grids */
        max-width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    /* Flex container optimizations */
    .d-flex .seven-segment-display {
        flex-shrink: 1; /* Allow price displays to shrink in flex containers */
        min-width: 60px; /* But maintain minimum readable width */
    }
}

/* Ultra-small screens (less than 350px width) - emergency scaling only */
@media (max-width: 349px) {
    .seven-segment-display {
        font-size: min(1em, clamp(0.6rem, 4vw, 0.8rem)) !important;
        padding: 2px 3px !important;
        letter-spacing: 0px !important;
        min-width: 55px !important;
    }
}

/* =========================================
    HOME OFFICE & DASHBOARD STYLES
    ========================================= */

/* Home office styles */
.custom-tabs {
    width: 100%;
    overflow-x: auto;
}

.custom-tab-panel {
    width: 100%;
}

.sort-menu {
    padding-top: .5em;
    padding-bottom: .5em;
}

/* =========================================
    RESPONSIVE BREAKPOINTS
    ========================================= */

@media (max-width: 759px) {
    .mud-item.custom-card-width {
        flex: 0 0 100%;
        max-width: 100%;
    }
}

@media (min-width: 760px) and (max-width: 1119px) {
    .mud-item.custom-card-width {
        flex: 0 0 50%;
        max-width: 50%;
    }
}

@media (min-width: 1120px) and (max-width: 1449px) {
    .mud-item.custom-card-width {
        flex: 0 0 33.33%;
        max-width: 33.33%;
    }
}

@media (min-width: 1450px) {
    .mud-item.custom-card-width {
        flex: 0 0 25%;
        max-width: 25%;
    }
}

/* =========================================
    ADAPTIVE GRID/CARD LAYOUT STYLES
    Three-tier responsive strategy for data grids
    ========================================= */

/* Default: Desktop shows grid, cards are hidden */
.adaptive-survey-grid .mud-data-grid {
    display: block !important;
}

.adaptive-survey-cards {
    display: none !important;
}

/* Mobile & Tablet: Hide grid, show cards */
@media (max-width: 1023px) {
    .adaptive-survey-grid .mud-data-grid {
        display: none !important;
    }

    .adaptive-survey-cards {
        display: grid !important;
        grid-template-columns: 1fr;
        gap: 12px;
        padding: 8px;
    }
}

/* Tablet: Two columns */
@media (min-width: 768px) and (max-width: 1023px) {
    .adaptive-survey-cards {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Individual survey card styling */
.survey-card-item {
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    padding: 16px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    transition: box-shadow 0.2s ease, transform 0.1s ease;
    position: relative;
    overflow: hidden;
    cursor: pointer;
    /* Background colors will be set by type-specific classes below */
}

.survey-card-item:hover {
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    transform: translateY(-1px);
}

/* Card type backgrounds - matching the grid RowStyleFunc colors */
.survey-card-item.type-request {
    background-color: rgba(255, 193, 7, 0.15); /* Light amber for requests */
    border-left: 4px solid #9c27b0;
}

.survey-card-item.type-response {
    background-color: rgba(3, 169, 244, 0.15); /* Light blue for responses */
    border-left: 4px solid rgba(3, 169, 244, 0.7); /* Thicker blue left border for responses */
}

.survey-card-item.type-cstore {
    background-color: rgba(30, 136, 229, 0.1); /* Original CStore color */
    border-left: 4px solid #1e88e5;
}

.survey-card-item.type-competitor {
    background-color: rgba(255, 152, 0, 0.1); /* Original Competitor color */
    border-left: 4px solid #ff9800;
}

/* Card header with badges */
.survey-card-header {
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    margin-bottom: 12px;
    flex-wrap: wrap;
    gap: 8px;
}

.survey-card-badges {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

.survey-card-badge {
    padding: 4px 8px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: bold;
    color: white;
    white-space: nowrap;
}

/* Badge colors matching your existing chip styles */
.badge-daily {
    background: #2196F3;
}

.badge-extra {
    background: #ff9800;
}

.badge-request {
    background: #9c27b0;
}

.badge-response {
    background: #03a9f4;
}

.badge-ontime {
    background: #4caf50;
}

.badge-late {
    background: #f44336;
}

.badge-pending {
    background: #ff9800;
}

.badge-completed {
    background: #4caf50;
}

/* Card content */
.survey-card-name {
    font-weight: bold;
    font-size: 16px;
    margin-bottom: 6px;
    color: white; /* Changed to white for better contrast on colored backgrounds */
    line-height: 1.3;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5); /* Add text shadow for readability */
}

.survey-card-date {
    color: rgba(255, 255, 255, 0.9); /* Light white for better contrast */
    font-size: 14px;
    margin-bottom: 12px;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5); /* Add text shadow for readability */
}

/* UPDATED: Flexible price display area - no longer fixed grid */
.survey-card-products {
    margin-bottom: 12px;
    background: rgba(0, 0, 0, 0.1);
    padding: 8px;
    border-radius: 6px;
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.survey-card-products-title {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.8);
    margin-bottom: 6px;
    font-weight: 500;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}

/* Actions area */
.survey-card-actions {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid #f0f0f0;
}

.survey-card-expand-btn {
    background: rgba(0, 0, 0, 0.2); /* Semi-transparent dark background */
    color: white; /* White text for contrast */
    border: 1px solid rgba(255, 255, 255, 0.3); /* Subtle white border */
    padding: 8px 12px;
    border-radius: 4px;
    font-size: 12px;
    cursor: pointer;
    transition: background 0.2s ease;
    display: flex;
    align-items: center;
    gap: 4px;
}

.survey-card-expand-btn:hover {
    background: rgba(0, 0, 0, 0.4); /* Darker on hover */
    border-color: rgba(255, 255, 255, 0.5); /* Brighter border on hover */
}

/* Request-specific styling */
.survey-card-request-info {
    background: rgba(0, 0, 0, 0.2); /* Semi-transparent dark background */
    border: 1px solid rgba(255, 255, 255, 0.3); /* Subtle white border */
    border-radius: 6px;
    padding: 8px;
    margin-bottom: 8px;
    font-size: 13px;
    color: white; /* White text */
    display: flex;
    align-items: center;
    gap: 6px;
}

.survey-card-pending {
    text-align: center;
    color: white; /* White text for contrast */
    font-style: italic;
    padding: 16px;
    background: rgba(0, 0, 0, 0.2); /* Semi-transparent dark background */
    border: 1px solid rgba(255, 255, 255, 0.3); /* Subtle white border */
    border-radius: 6px;
    margin: 8px 0;
}

/* Mobile optimizations */
@media (max-width: 599px) {
    .survey-card-item {
        padding: 12px;
    }

    .survey-card-name {
        font-size: 15px;
    }

    .survey-card-date {
        font-size: 13px;
    }

    .survey-card-badges {
        flex-direction: column;
        align-items: flex-start;
    }

    .survey-card-header {
        flex-direction: column;
        align-items: flex-start;
    }

    .survey-card-products {
        padding: 6px;
    }
}

/* Tablet optimizations */
@media (min-width: 768px) and (max-width: 1023px) {
    .survey-card-item {
        padding: 14px;
    }

    .survey-card-products {
        padding: 7px;
    }
}

.survey-card-request-details {
    background-color: rgba(3, 169, 244, 0.05);
    padding: 12px;
    border-radius: 6px;
    font-size: 14px;
    color: white;
    line-height: 1.4;
}

.survey-card-request-details > div {
    margin-bottom: 4px;
}

.survey-card-request-details > div:last-child {
    margin-bottom: 0;
}