/* =====================================================================
   MealWeek Design System
   Version: 2.0.0
   Last Updated: 2025-12-20

   This file contains the centralized design system for MealWeek Client.
   All design tokens, utility classes, and MudBlazor overrides are defined here.

   Table of Contents:
   1. Design Tokens (CSS Custom Properties)
      1.1 Colors - Primary, Secondary, Accent, Functional, Neutral
      1.2 Typography - Font families, sizes, weights, line-heights
      1.3 Spacing - Consistent spacing scale (4px base)
      1.4 Border Radius - Consistent corner radius tokens
      1.5 Shadows - Elevation levels
      1.6 Transitions - Animation timing and easing
      1.7 Z-Index - Layering scale
      1.8 Breakpoints - Responsive design breakpoints
   2. Dark Mode Tokens
   3. Typography Utility Classes
   4. Layout & Spacing Utility Classes
   5. MudBlazor Theme Overrides
   6. Responsive Utility Classes
   7. Component Base Styles
   8. Legacy Styles (to be removed)
   ===================================================================== */


/* =====================================================================
   1. DESIGN TOKENS - CSS Custom Properties
   ===================================================================== */

:root {
    /* -----------------------------------------------------------------
       1.1 COLORS
       Based on MealWeek Style Guide
       ----------------------------------------------------------------- */

    /* Primary Colors */
    --mw-color-primary: #0A7C5A;
    --mw-color-primary-dark: #08664A;
    --mw-color-primary-light: #1EA679;
    --mw-color-primary-pale: #E7F5F0;

    /* Secondary Colors (Gold) */
    --mw-color-secondary: #D4AF37;
    --mw-color-secondary-dark: #B8860B;
    --mw-color-secondary-light: #F0E68C;

    /* Accent Colors */
    --mw-color-accent-mint: #00BFA5;
    --mw-color-accent-gold: #B8860B;

    /* Functional Colors */
    --mw-color-success: #2E8B57;
    --mw-color-error: #E53935;
    --mw-color-warning: #FFC107;
    --mw-color-warning-dark: #8A5A00;
    --mw-color-info: #0288D1;

    /* Neutral Colors */
    --mw-color-neutral-dark: #263238;
    --mw-color-neutral-mid: #78909C;
    --mw-color-neutral-light: #CFD8DC;

    /* Background Colors */
    --mw-color-background: #F5F7F9;
    --mw-color-surface: #FFFFFF;
    --mw-color-surface-elevated: #FFFFFF;

    /* Text Colors */
    --mw-color-text-primary: #263238;
    --mw-color-text-secondary: #78909C;
    --mw-color-text-disabled: #B0BEC5;
    --mw-color-text-inverse: #FFFFFF;

    /* Border Colors */
    --mw-color-border: #CFD8DC;
    --mw-color-border-light: #ECEFF1;
    --mw-color-divider: #CFD8DC;

    /* State Colors */
    --mw-color-hover: rgba(10, 124, 90, 0.08);
    --mw-color-focus: rgba(10, 124, 90, 0.12);
    --mw-color-selected: rgba(10, 124, 90, 0.16);
    --mw-color-disabled: rgba(38, 50, 56, 0.12);

    /* -----------------------------------------------------------------
       1.2 TYPOGRAPHY
       Based on MealWeek Style Guide
       ----------------------------------------------------------------- */

    /* Font Families */
    --mw-font-family-primary: 'Outfit', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;
    --mw-font-family-display: 'Outfit', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;
    --mw-font-family-mono: 'JetBrains Mono', 'Fira Code', Consolas, monospace;

    /* Font Sizes */
    --mw-font-size-h1: 28px;
    --mw-font-size-h2: 24px;
    --mw-font-size-h3: 20px;
    --mw-font-size-h4: 18px;
    --mw-font-size-h5: 16px;
    --mw-font-size-h6: 14px;
    --mw-font-size-body-large: 17px;
    --mw-font-size-body: 15px;
    --mw-font-size-body-small: 13px;
    --mw-font-size-caption: 12px;
    --mw-font-size-button: 16px;
    --mw-font-size-tag: 13px;
    --mw-font-size-display-xl: 48px;
    --mw-font-size-display-xl-compact: 40px;

    /* Line Heights */
    --mw-line-height-h1: 34px;
    --mw-line-height-h2: 30px;
    --mw-line-height-h3: 26px;
    --mw-line-height-h4: 24px;
    --mw-line-height-h5: 22px;
    --mw-line-height-h6: 20px;
    --mw-line-height-body-large: 24px;
    --mw-line-height-body: 22px;
    --mw-line-height-body-small: 18px;
    --mw-line-height-caption: 16px;

    /* Font Weights */
    --mw-font-weight-regular: 400;
    --mw-font-weight-medium: 500;
    --mw-font-weight-semibold: 600;
    --mw-font-weight-bold: 700;

    /* Letter Spacing */
    --mw-letter-spacing-tight: -0.2px;
    --mw-letter-spacing-normal: 0px;
    --mw-letter-spacing-wide: 0.1px;
    --mw-letter-spacing-wider: 0.2px;

    /* -----------------------------------------------------------------
       1.3 SPACING
       Based on 4px grid system
       ----------------------------------------------------------------- */

    --mw-spacing-0: 0px;
    --mw-spacing-1: 4px;
    --mw-spacing-2: 8px;
    --mw-spacing-3: 12px;
    --mw-spacing-4: 16px;
    --mw-spacing-5: 24px;
    --mw-spacing-6: 32px;
    --mw-spacing-7: 48px;
    --mw-spacing-8: 64px;

    /* Semantic Spacing */
    --mw-spacing-micro: var(--mw-spacing-1);
    --mw-spacing-small: var(--mw-spacing-2);
    --mw-spacing-compact: var(--mw-spacing-3);
    --mw-spacing-default: var(--mw-spacing-4);
    --mw-spacing-medium: var(--mw-spacing-5);
    --mw-spacing-large: var(--mw-spacing-6);
    --mw-spacing-xlarge: var(--mw-spacing-7);

    /* -----------------------------------------------------------------
       1.4 BORDER RADIUS
       ----------------------------------------------------------------- */

    --mw-radius-none: 0px;
    --mw-radius-sm: 4px;
    --mw-radius-md: 8px;
    --mw-radius-lg: 12px;
    --mw-radius-xl: 16px;
    --mw-radius-2xl: 24px;
    --mw-radius-full: 9999px;

    /* Semantic Radius */
    --mw-radius-button: var(--mw-radius-md);
    --mw-radius-card: var(--mw-radius-lg);
    --mw-radius-dialog: var(--mw-radius-lg);
    --mw-radius-input: var(--mw-radius-md);
    --mw-radius-chip: var(--mw-radius-full);
    --mw-radius-tag: var(--mw-radius-full);

    /* -----------------------------------------------------------------
       1.5 SHADOWS (Elevation)
       ----------------------------------------------------------------- */

    --mw-shadow-none: none;
    --mw-shadow-sm: 0 1px 4px rgba(0, 0, 0, 0.06);
    --mw-shadow-md: 0 2px 8px rgba(0, 0, 0, 0.08);
    --mw-shadow-lg: 0 3px 12px rgba(0, 0, 0, 0.10);
    --mw-shadow-xl: 0 4px 16px rgba(0, 0, 0, 0.12);
    --mw-shadow-2xl: 0 8px 24px rgba(0, 0, 0, 0.16);

    /* Semantic Shadows */
    --mw-shadow-card: var(--mw-shadow-md);
    --mw-shadow-card-hover: var(--mw-shadow-lg);
    --mw-shadow-dropdown: var(--mw-shadow-lg);
    --mw-shadow-dialog: var(--mw-shadow-xl);
    --mw-shadow-navbar: var(--mw-shadow-sm);

    /* -----------------------------------------------------------------
       1.6 TRANSITIONS
       ----------------------------------------------------------------- */

    /* Duration */
    --mw-duration-instant: 0ms;
    --mw-duration-fast: 100ms;
    --mw-duration-normal: 200ms;
    --mw-duration-slow: 300ms;
    --mw-duration-slower: 400ms;

    /* Easing */
    --mw-easing-linear: linear;
    --mw-easing-ease: ease;
    --mw-easing-ease-in: ease-in;
    --mw-easing-ease-out: ease-out;
    --mw-easing-ease-in-out: ease-in-out;
    --mw-easing-spring: cubic-bezier(0.2, 0.8, 0.2, 1);

    /* Transition Presets */
    --mw-transition-default: var(--mw-duration-normal) var(--mw-easing-ease-out);
    --mw-transition-fast: var(--mw-duration-fast) var(--mw-easing-ease-out);
    --mw-transition-slow: var(--mw-duration-slow) var(--mw-easing-ease-out);
    --mw-transition-page: var(--mw-duration-slower) var(--mw-easing-spring);

    /* -----------------------------------------------------------------
       1.7 Z-INDEX SCALE
       ----------------------------------------------------------------- */

    --mw-z-base: 0;
    --mw-z-dropdown: 100;
    --mw-z-sticky: 200;
    --mw-z-fixed: 300;
    --mw-z-drawer: 400;
    --mw-z-modal: 500;
    --mw-z-popover: 600;
    --mw-z-tooltip: 700;
    --mw-z-toast: 800;

    /* FAB and ScrollToTop z-index (WI #881) */
    --mw-z-scroll-to-top: 1000;
    --mw-z-fab: 1050;

    /* -----------------------------------------------------------------
       1.8 BREAKPOINTS (for documentation - can't be used in media queries)
       ----------------------------------------------------------------- */

    --mw-breakpoint-sm: 576px;
    --mw-breakpoint-md: 768px;
    --mw-breakpoint-lg: 992px;
    --mw-breakpoint-xl: 1200px;
    --mw-breakpoint-2xl: 1400px;

    /* -----------------------------------------------------------------
       Component-specific tokens
       ----------------------------------------------------------------- */

    /* Input Fields */
    --mw-input-height: 56px;
    --mw-input-height-sm: 40px;
    --mw-input-height-lg: 64px;

    /* Buttons */
    --mw-button-height: 48px;
    --mw-button-height-sm: 36px;
    --mw-button-height-lg: 56px;

    /* Icons */
    --mw-icon-size-sm: 16px;
    --mw-icon-size-md: 20px;
    --mw-icon-size-lg: 24px;
    --mw-icon-size-xl: 28px;

    /* Touch Targets */
    --mw-touch-target-min: 44px;
}


/* =====================================================================
   2. DARK MODE TOKENS
   ===================================================================== */

.mud-theme-dark,
[data-theme="dark"] {
    /* Background Colors */
    --mw-color-background: #1C2A2D;
    --mw-color-surface: #263238;
    --mw-color-surface-elevated: #37474F;

    /* Primary Colors (adjusted for dark mode contrast) */
    --mw-color-primary: #26A69A;
    --mw-color-primary-dark: #1EA679;
    --mw-color-primary-light: #4DB6AC;
    --mw-color-primary-pale: rgba(38, 166, 154, 0.16);

    /* Secondary Colors */
    --mw-color-secondary: #FFD54F;
    --mw-color-secondary-dark: #FFC107;
    --mw-color-secondary-light: #FFECB3;

    /* Text Colors */
    --mw-color-text-primary: #EEEEEE;
    --mw-color-text-secondary: #B0BEC5;
    --mw-color-text-disabled: #546E7A;

    /* Border Colors */
    --mw-color-border: #455A64;
    --mw-color-border-light: #37474F;
    --mw-color-divider: #455A64;

    /* Neutral Colors */
    --mw-color-neutral-dark: #EEEEEE;
    --mw-color-neutral-mid: #B0BEC5;
    --mw-color-neutral-light: #455A64;

    /* State Colors */
    --mw-color-hover: rgba(38, 166, 154, 0.12);
    --mw-color-focus: rgba(38, 166, 154, 0.16);
    --mw-color-selected: rgba(38, 166, 154, 0.24);

    /* Shadows (darker for dark mode) */
    --mw-shadow-sm: 0 1px 4px rgba(0, 0, 0, 0.2);
    --mw-shadow-md: 0 2px 8px rgba(0, 0, 0, 0.24);
    --mw-shadow-lg: 0 3px 12px rgba(0, 0, 0, 0.28);
    --mw-shadow-xl: 0 4px 16px rgba(0, 0, 0, 0.32);
}


/* =====================================================================
   3. TYPOGRAPHY UTILITY CLASSES
   ===================================================================== */

/* Headings */
.mw-h1 {
    font-family: var(--mw-font-family-display);
    font-size: var(--mw-font-size-h1);
    line-height: var(--mw-line-height-h1);
    font-weight: var(--mw-font-weight-bold);
    letter-spacing: var(--mw-letter-spacing-tight);
    color: var(--mw-color-text-primary);
    margin: 0;
}

.mw-h2 {
    font-family: var(--mw-font-family-display);
    font-size: var(--mw-font-size-h2);
    line-height: var(--mw-line-height-h2);
    font-weight: var(--mw-font-weight-bold);
    letter-spacing: var(--mw-letter-spacing-tight);
    color: var(--mw-color-text-primary);
    margin: 0;
}

.mw-h3 {
    font-family: var(--mw-font-family-display);
    font-size: var(--mw-font-size-h3);
    line-height: var(--mw-line-height-h3);
    font-weight: var(--mw-font-weight-semibold);
    letter-spacing: var(--mw-letter-spacing-tight);
    color: var(--mw-color-text-primary);
    margin: 0;
}

.mw-h4 {
    font-family: var(--mw-font-family-display);
    font-size: var(--mw-font-size-h4);
    line-height: var(--mw-line-height-h4);
    font-weight: var(--mw-font-weight-semibold);
    letter-spacing: var(--mw-letter-spacing-tight);
    color: var(--mw-color-text-primary);
    margin: 0;
}

.mw-h5 {
    font-family: var(--mw-font-family-primary);
    font-size: var(--mw-font-size-h5);
    line-height: var(--mw-line-height-h5);
    font-weight: var(--mw-font-weight-semibold);
    color: var(--mw-color-text-primary);
    margin: 0;
}

.mw-h6 {
    font-family: var(--mw-font-family-primary);
    font-size: var(--mw-font-size-h6);
    line-height: var(--mw-line-height-h6);
    font-weight: var(--mw-font-weight-semibold);
    color: var(--mw-color-text-primary);
    margin: 0;
}

/* Body Text */
.mw-body-large {
    font-family: var(--mw-font-family-primary);
    font-size: var(--mw-font-size-body-large);
    line-height: var(--mw-line-height-body-large);
    font-weight: var(--mw-font-weight-regular);
    color: var(--mw-color-text-primary);
}

.mw-body {
    font-family: var(--mw-font-family-primary);
    font-size: var(--mw-font-size-body);
    line-height: var(--mw-line-height-body);
    font-weight: var(--mw-font-weight-regular);
    color: var(--mw-color-text-primary);
}

.mw-body-small {
    font-family: var(--mw-font-family-primary);
    font-size: var(--mw-font-size-body-small);
    line-height: var(--mw-line-height-body-small);
    font-weight: var(--mw-font-weight-regular);
    letter-spacing: var(--mw-letter-spacing-wide);
    color: var(--mw-color-text-secondary);
}

/* Caption and Labels */
.mw-caption {
    font-family: var(--mw-font-family-primary);
    font-size: var(--mw-font-size-caption);
    line-height: var(--mw-line-height-caption);
    font-weight: var(--mw-font-weight-medium);
    letter-spacing: var(--mw-letter-spacing-wider);
    color: var(--mw-color-text-secondary);
}

.mw-label {
    font-family: var(--mw-font-family-primary);
    font-size: var(--mw-font-size-caption);
    line-height: var(--mw-line-height-caption);
    font-weight: var(--mw-font-weight-medium);
    letter-spacing: var(--mw-letter-spacing-wide);
    color: var(--mw-color-text-primary);
}

/* Text Color Modifiers */
.mw-text-primary {
    color: var(--mw-color-primary) !important;
}

.mw-text-secondary {
    color: var(--mw-color-text-secondary) !important;
}

.mw-text-muted {
    color: var(--mw-color-text-secondary) !important;
}

.mw-text-success {
    color: var(--mw-color-success) !important;
}

.mw-text-error {
    color: var(--mw-color-error) !important;
}

.mw-text-warning {
    color: var(--mw-color-warning) !important;
}

.mw-text-info {
    color: var(--mw-color-info) !important;
}

.mw-text-inverse {
    color: var(--mw-color-text-inverse) !important;
}

/* Text Alignment */
.mw-text-left {
    text-align: left !important;
}

.mw-text-center {
    text-align: center !important;
}

.mw-text-right {
    text-align: right !important;
}

/* Text Transform */
.mw-uppercase {
    text-transform: uppercase !important;
}

.mw-lowercase {
    text-transform: lowercase !important;
}

.mw-capitalize {
    text-transform: capitalize !important;
}

/* Text Decoration */
.mw-underline {
    text-decoration: underline !important;
}

.mw-line-through {
    text-decoration: line-through !important;
}

.mw-no-underline {
    text-decoration: none !important;
}

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

.mw-line-clamp-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.mw-line-clamp-3 {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}


/* =====================================================================
   4. LAYOUT & SPACING UTILITY CLASSES
   ===================================================================== */

/* Display */
.mw-hidden {
    display: none !important;
}

.mw-block {
    display: block !important;
}

.mw-inline {
    display: inline !important;
}

.mw-inline-block {
    display: inline-block !important;
}

/* Flexbox */
.mw-flex {
    display: flex !important;
}

.mw-inline-flex {
    display: inline-flex !important;
}

.mw-flex-row {
    flex-direction: row !important;
}

.mw-flex-col {
    flex-direction: column !important;
}

.mw-flex-wrap {
    flex-wrap: wrap !important;
}

.mw-flex-nowrap {
    flex-wrap: nowrap !important;
}

.mw-flex-1 {
    flex: 1 1 0% !important;
}

.mw-flex-auto {
    flex: 1 1 auto !important;
}

.mw-flex-none {
    flex: none !important;
}

.mw-flex-grow {
    flex-grow: 1 !important;
}

.mw-flex-shrink-0 {
    flex-shrink: 0 !important;
}

/* Justify Content */
.mw-justify-start {
    justify-content: flex-start !important;
}

.mw-justify-end {
    justify-content: flex-end !important;
}

.mw-justify-center {
    justify-content: center !important;
}

.mw-justify-between {
    justify-content: space-between !important;
}

.mw-justify-around {
    justify-content: space-around !important;
}

.mw-justify-evenly {
    justify-content: space-evenly !important;
}

/* Align Items */
.mw-items-start {
    align-items: flex-start !important;
}

.mw-items-end {
    align-items: flex-end !important;
}

.mw-items-center {
    align-items: center !important;
}

.mw-items-baseline {
    align-items: baseline !important;
}

.mw-items-stretch {
    align-items: stretch !important;
}

/* Align Self */
.mw-self-start {
    align-self: flex-start !important;
}

.mw-self-end {
    align-self: flex-end !important;
}

.mw-self-center {
    align-self: center !important;
}

/* Gap */
.mw-gap-0 { gap: var(--mw-spacing-0) !important; }
.mw-gap-1 { gap: var(--mw-spacing-1) !important; }
.mw-gap-2 { gap: var(--mw-spacing-2) !important; }
.mw-gap-3 { gap: var(--mw-spacing-3) !important; }
.mw-gap-4 { gap: var(--mw-spacing-4) !important; }
.mw-gap-5 { gap: var(--mw-spacing-5) !important; }
.mw-gap-6 { gap: var(--mw-spacing-6) !important; }
.mw-gap-7 { gap: var(--mw-spacing-7) !important; }

/* Margin - All Sides */
.mw-m-0 { margin: var(--mw-spacing-0) !important; }
.mw-m-1 { margin: var(--mw-spacing-1) !important; }
.mw-m-2 { margin: var(--mw-spacing-2) !important; }
.mw-m-3 { margin: var(--mw-spacing-3) !important; }
.mw-m-4 { margin: var(--mw-spacing-4) !important; }
.mw-m-5 { margin: var(--mw-spacing-5) !important; }
.mw-m-6 { margin: var(--mw-spacing-6) !important; }
.mw-m-7 { margin: var(--mw-spacing-7) !important; }
.mw-m-auto { margin: auto !important; }

/* Margin - Top */
.mw-mt-0 { margin-top: var(--mw-spacing-0) !important; }
.mw-mt-1 { margin-top: var(--mw-spacing-1) !important; }
.mw-mt-2 { margin-top: var(--mw-spacing-2) !important; }
.mw-mt-3 { margin-top: var(--mw-spacing-3) !important; }
.mw-mt-4 { margin-top: var(--mw-spacing-4) !important; }
.mw-mt-5 { margin-top: var(--mw-spacing-5) !important; }
.mw-mt-6 { margin-top: var(--mw-spacing-6) !important; }
.mw-mt-7 { margin-top: var(--mw-spacing-7) !important; }
.mw-mt-auto { margin-top: auto !important; }

/* Margin - Right */
.mw-mr-0 { margin-right: var(--mw-spacing-0) !important; }
.mw-mr-1 { margin-right: var(--mw-spacing-1) !important; }
.mw-mr-2 { margin-right: var(--mw-spacing-2) !important; }
.mw-mr-3 { margin-right: var(--mw-spacing-3) !important; }
.mw-mr-4 { margin-right: var(--mw-spacing-4) !important; }
.mw-mr-5 { margin-right: var(--mw-spacing-5) !important; }
.mw-mr-6 { margin-right: var(--mw-spacing-6) !important; }
.mw-mr-7 { margin-right: var(--mw-spacing-7) !important; }
.mw-mr-auto { margin-right: auto !important; }

/* Margin - Bottom */
.mw-mb-0 { margin-bottom: var(--mw-spacing-0) !important; }
.mw-mb-1 { margin-bottom: var(--mw-spacing-1) !important; }
.mw-mb-2 { margin-bottom: var(--mw-spacing-2) !important; }
.mw-mb-3 { margin-bottom: var(--mw-spacing-3) !important; }
.mw-mb-4 { margin-bottom: var(--mw-spacing-4) !important; }
.mw-mb-5 { margin-bottom: var(--mw-spacing-5) !important; }
.mw-mb-6 { margin-bottom: var(--mw-spacing-6) !important; }
.mw-mb-7 { margin-bottom: var(--mw-spacing-7) !important; }
.mw-mb-auto { margin-bottom: auto !important; }

/* Margin - Left */
.mw-ml-0 { margin-left: var(--mw-spacing-0) !important; }
.mw-ml-1 { margin-left: var(--mw-spacing-1) !important; }
.mw-ml-2 { margin-left: var(--mw-spacing-2) !important; }
.mw-ml-3 { margin-left: var(--mw-spacing-3) !important; }
.mw-ml-4 { margin-left: var(--mw-spacing-4) !important; }
.mw-ml-5 { margin-left: var(--mw-spacing-5) !important; }
.mw-ml-6 { margin-left: var(--mw-spacing-6) !important; }
.mw-ml-7 { margin-left: var(--mw-spacing-7) !important; }
.mw-ml-auto { margin-left: auto !important; }

/* Margin - Horizontal (X) */
.mw-mx-0 { margin-left: var(--mw-spacing-0) !important; margin-right: var(--mw-spacing-0) !important; }
.mw-mx-1 { margin-left: var(--mw-spacing-1) !important; margin-right: var(--mw-spacing-1) !important; }
.mw-mx-2 { margin-left: var(--mw-spacing-2) !important; margin-right: var(--mw-spacing-2) !important; }
.mw-mx-3 { margin-left: var(--mw-spacing-3) !important; margin-right: var(--mw-spacing-3) !important; }
.mw-mx-4 { margin-left: var(--mw-spacing-4) !important; margin-right: var(--mw-spacing-4) !important; }
.mw-mx-5 { margin-left: var(--mw-spacing-5) !important; margin-right: var(--mw-spacing-5) !important; }
.mw-mx-auto { margin-left: auto !important; margin-right: auto !important; }

/* Margin - Vertical (Y) */
.mw-my-0 { margin-top: var(--mw-spacing-0) !important; margin-bottom: var(--mw-spacing-0) !important; }
.mw-my-1 { margin-top: var(--mw-spacing-1) !important; margin-bottom: var(--mw-spacing-1) !important; }
.mw-my-2 { margin-top: var(--mw-spacing-2) !important; margin-bottom: var(--mw-spacing-2) !important; }
.mw-my-3 { margin-top: var(--mw-spacing-3) !important; margin-bottom: var(--mw-spacing-3) !important; }
.mw-my-4 { margin-top: var(--mw-spacing-4) !important; margin-bottom: var(--mw-spacing-4) !important; }
.mw-my-5 { margin-top: var(--mw-spacing-5) !important; margin-bottom: var(--mw-spacing-5) !important; }
.mw-my-auto { margin-top: auto !important; margin-bottom: auto !important; }

/* Padding - All Sides */
.mw-p-0 { padding: var(--mw-spacing-0) !important; }
.mw-p-1 { padding: var(--mw-spacing-1) !important; }
.mw-p-2 { padding: var(--mw-spacing-2) !important; }
.mw-p-3 { padding: var(--mw-spacing-3) !important; }
.mw-p-4 { padding: var(--mw-spacing-4) !important; }
.mw-p-5 { padding: var(--mw-spacing-5) !important; }
.mw-p-6 { padding: var(--mw-spacing-6) !important; }
.mw-p-7 { padding: var(--mw-spacing-7) !important; }

/* Padding - Top */
.mw-pt-0 { padding-top: var(--mw-spacing-0) !important; }
.mw-pt-1 { padding-top: var(--mw-spacing-1) !important; }
.mw-pt-2 { padding-top: var(--mw-spacing-2) !important; }
.mw-pt-3 { padding-top: var(--mw-spacing-3) !important; }
.mw-pt-4 { padding-top: var(--mw-spacing-4) !important; }
.mw-pt-5 { padding-top: var(--mw-spacing-5) !important; }
.mw-pt-6 { padding-top: var(--mw-spacing-6) !important; }
.mw-pt-7 { padding-top: var(--mw-spacing-7) !important; }

/* Padding - Right */
.mw-pr-0 { padding-right: var(--mw-spacing-0) !important; }
.mw-pr-1 { padding-right: var(--mw-spacing-1) !important; }
.mw-pr-2 { padding-right: var(--mw-spacing-2) !important; }
.mw-pr-3 { padding-right: var(--mw-spacing-3) !important; }
.mw-pr-4 { padding-right: var(--mw-spacing-4) !important; }
.mw-pr-5 { padding-right: var(--mw-spacing-5) !important; }
.mw-pr-6 { padding-right: var(--mw-spacing-6) !important; }
.mw-pr-7 { padding-right: var(--mw-spacing-7) !important; }

/* Padding - Bottom */
.mw-pb-0 { padding-bottom: var(--mw-spacing-0) !important; }
.mw-pb-1 { padding-bottom: var(--mw-spacing-1) !important; }
.mw-pb-2 { padding-bottom: var(--mw-spacing-2) !important; }
.mw-pb-3 { padding-bottom: var(--mw-spacing-3) !important; }
.mw-pb-4 { padding-bottom: var(--mw-spacing-4) !important; }
.mw-pb-5 { padding-bottom: var(--mw-spacing-5) !important; }
.mw-pb-6 { padding-bottom: var(--mw-spacing-6) !important; }
.mw-pb-7 { padding-bottom: var(--mw-spacing-7) !important; }

/* Padding - Left */
.mw-pl-0 { padding-left: var(--mw-spacing-0) !important; }
.mw-pl-1 { padding-left: var(--mw-spacing-1) !important; }
.mw-pl-2 { padding-left: var(--mw-spacing-2) !important; }
.mw-pl-3 { padding-left: var(--mw-spacing-3) !important; }
.mw-pl-4 { padding-left: var(--mw-spacing-4) !important; }
.mw-pl-5 { padding-left: var(--mw-spacing-5) !important; }
.mw-pl-6 { padding-left: var(--mw-spacing-6) !important; }
.mw-pl-7 { padding-left: var(--mw-spacing-7) !important; }

/* Padding - Horizontal (X) */
.mw-px-0 { padding-left: var(--mw-spacing-0) !important; padding-right: var(--mw-spacing-0) !important; }
.mw-px-1 { padding-left: var(--mw-spacing-1) !important; padding-right: var(--mw-spacing-1) !important; }
.mw-px-2 { padding-left: var(--mw-spacing-2) !important; padding-right: var(--mw-spacing-2) !important; }
.mw-px-3 { padding-left: var(--mw-spacing-3) !important; padding-right: var(--mw-spacing-3) !important; }
.mw-px-4 { padding-left: var(--mw-spacing-4) !important; padding-right: var(--mw-spacing-4) !important; }
.mw-px-5 { padding-left: var(--mw-spacing-5) !important; padding-right: var(--mw-spacing-5) !important; }
.mw-px-6 { padding-left: var(--mw-spacing-6) !important; padding-right: var(--mw-spacing-6) !important; }
.mw-px-7 { padding-left: var(--mw-spacing-7) !important; padding-right: var(--mw-spacing-7) !important; }

/* Padding - Vertical (Y) */
.mw-py-0 { padding-top: var(--mw-spacing-0) !important; padding-bottom: var(--mw-spacing-0) !important; }
.mw-py-1 { padding-top: var(--mw-spacing-1) !important; padding-bottom: var(--mw-spacing-1) !important; }
.mw-py-2 { padding-top: var(--mw-spacing-2) !important; padding-bottom: var(--mw-spacing-2) !important; }
.mw-py-3 { padding-top: var(--mw-spacing-3) !important; padding-bottom: var(--mw-spacing-3) !important; }
.mw-py-4 { padding-top: var(--mw-spacing-4) !important; padding-bottom: var(--mw-spacing-4) !important; }
.mw-py-5 { padding-top: var(--mw-spacing-5) !important; padding-bottom: var(--mw-spacing-5) !important; }
.mw-py-6 { padding-top: var(--mw-spacing-6) !important; padding-bottom: var(--mw-spacing-6) !important; }
.mw-py-7 { padding-top: var(--mw-spacing-7) !important; padding-bottom: var(--mw-spacing-7) !important; }

/* Width */
.mw-w-full { width: 100% !important; }
.mw-w-auto { width: auto !important; }
.mw-w-screen { width: 100vw !important; }

/* Height */
.mw-h-full { height: 100% !important; }
.mw-h-auto { height: auto !important; }
.mw-h-screen { height: 100vh !important; }
.mw-min-h-screen { min-height: 100vh !important; }

/* Container */
.mw-container {
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--mw-spacing-4);
    padding-right: var(--mw-spacing-4);
}

@media (min-width: 576px) {
    .mw-container { max-width: 540px; }
}

@media (min-width: 768px) {
    .mw-container {
        max-width: 720px;
        padding-left: var(--mw-spacing-5);
        padding-right: var(--mw-spacing-5);
    }
}

@media (min-width: 992px) {
    .mw-container {
        max-width: 960px;
        padding-left: var(--mw-spacing-6);
        padding-right: var(--mw-spacing-6);
    }
}

@media (min-width: 1200px) {
    .mw-container { max-width: 1140px; }
}

@media (min-width: 1400px) {
    .mw-container { max-width: 1320px; }
}

/* -----------------------------------------------------------------
   Page Container - Responsive Padding System (WI #965)
   Mobile-first approach with breakpoint at 600px
   ----------------------------------------------------------------- */

/* Base Page Container - Mobile First (reduced padding) */
.mw-page-container {
    padding: var(--mw-spacing-3); /* 12px on mobile */
    width: 100%;
    min-height: 100%;
}

/* Desktop/Tablet: larger padding */
@media (min-width: 600px) {
    .mw-page-container {
        padding: var(--mw-spacing-4); /* 16px on desktop */
    }
}

@media (min-width: 768px) {
    .mw-page-container {
        padding: var(--mw-spacing-5); /* 24px on larger screens */
    }
}

@media (min-width: 992px) {
    .mw-page-container {
        padding: var(--mw-spacing-6); /* 32px on large screens */
    }
}

/* Compact Page Container - Less padding for dense content */
.mw-page-container-compact {
    padding: var(--mw-spacing-2); /* 8px on mobile */
    width: 100%;
    min-height: 100%;
}

@media (min-width: 600px) {
    .mw-page-container-compact {
        padding: var(--mw-spacing-3); /* 12px on desktop */
    }
}

@media (min-width: 768px) {
    .mw-page-container-compact {
        padding: var(--mw-spacing-4); /* 16px on larger screens */
    }
}

/* Spacious Page Container - More padding for hero/landing sections */
.mw-page-container-spacious {
    padding: var(--mw-spacing-4); /* 16px on mobile */
    width: 100%;
    min-height: 100%;
}

@media (min-width: 600px) {
    .mw-page-container-spacious {
        padding: var(--mw-spacing-5); /* 24px on desktop */
    }
}

@media (min-width: 768px) {
    .mw-page-container-spacious {
        padding: var(--mw-spacing-6); /* 32px on larger screens */
    }
}

@media (min-width: 992px) {
    .mw-page-container-spacious {
        padding: var(--mw-spacing-7); /* 48px on large screens */
    }
}

/* Page Container with bottom navigation padding */
.mw-page-container-with-bottom-nav {
    padding: var(--mw-spacing-3); /* 12px on mobile */
    padding-bottom: calc(var(--mw-bottom-nav-height, 64px) + var(--mw-spacing-4) + env(safe-area-inset-bottom, 0px));
    width: 100%;
    min-height: 100%;
}

@media (min-width: 600px) {
    .mw-page-container-with-bottom-nav {
        padding: var(--mw-spacing-4); /* 16px on desktop */
        padding-bottom: var(--mw-spacing-4); /* No bottom nav on desktop */
    }
}

@media (min-width: 768px) {
    .mw-page-container-with-bottom-nav {
        padding: var(--mw-spacing-5);
        padding-bottom: var(--mw-spacing-5);
    }
}

/* Responsive horizontal padding only (keeps vertical padding unchanged) */
.mw-page-px {
    padding-left: var(--mw-spacing-3);
    padding-right: var(--mw-spacing-3);
}

@media (min-width: 600px) {
    .mw-page-px {
        padding-left: var(--mw-spacing-4);
        padding-right: var(--mw-spacing-4);
    }
}

@media (min-width: 768px) {
    .mw-page-px {
        padding-left: var(--mw-spacing-5);
        padding-right: var(--mw-spacing-5);
    }
}

@media (min-width: 992px) {
    .mw-page-px {
        padding-left: var(--mw-spacing-6);
        padding-right: var(--mw-spacing-6);
    }
}

/* Responsive vertical padding only */
.mw-page-py {
    padding-top: var(--mw-spacing-3);
    padding-bottom: var(--mw-spacing-3);
}

@media (min-width: 600px) {
    .mw-page-py {
        padding-top: var(--mw-spacing-4);
        padding-bottom: var(--mw-spacing-4);
    }
}

@media (min-width: 768px) {
    .mw-page-py {
        padding-top: var(--mw-spacing-5);
        padding-bottom: var(--mw-spacing-5);
    }
}


/* =====================================================================
   5. MUDBLAZOR THEME OVERRIDES
   All MudBlazor component overrides are centralized here
   ===================================================================== */

/* -----------------------------------------------------------------
   5.1 Paper & Card Components
   ----------------------------------------------------------------- */

.mud-paper {
    border-radius: var(--mw-radius-card) !important;
    box-shadow: var(--mw-shadow-card) !important;
    background-color: var(--mw-color-surface) !important;
}

.mud-card {
    border-radius: var(--mw-radius-card) !important;
    box-shadow: var(--mw-shadow-card) !important;
    background-color: var(--mw-color-surface) !important;
    transition: box-shadow var(--mw-transition-default), transform var(--mw-transition-default) !important;
}

.mud-card:hover {
    box-shadow: var(--mw-shadow-card-hover) !important;
}

.mud-card-content {
    padding: var(--mw-spacing-4) !important;
}

/* -----------------------------------------------------------------
   5.2 Button Components
   ----------------------------------------------------------------- */

/* Primary Filled Button */
.mud-button-filled-primary {
    background-color: var(--mw-color-primary) !important;
    color: var(--mw-color-text-inverse) !important;
    height: var(--mw-button-height) !important;
    border-radius: var(--mw-radius-button) !important;
    padding: 0 var(--mw-spacing-4) !important;
    font-weight: var(--mw-font-weight-medium) !important;
    font-size: var(--mw-font-size-button) !important;
    letter-spacing: var(--mw-letter-spacing-wide) !important;
    text-transform: none !important;
    transition: background-color var(--mw-transition-default), transform var(--mw-transition-fast) !important;
}

.mud-button-filled-primary:hover {
    background-color: var(--mw-color-primary-dark) !important;
}

.mud-button-filled-primary:active {
    transform: translateY(1px);
}

/* Filled Button Icons - Must be white */
.mud-button-filled-primary .mud-icon-root,
.mud-button-filled-primary .mud-button-icon-start,
.mud-button-filled-primary .mud-button-icon-end,
.mud-button-filled-primary svg,
.mud-button-filled-secondary .mud-icon-root,
.mud-button-filled-secondary svg,
.mud-button-filled-tertiary .mud-icon-root,
.mud-button-filled-tertiary svg,
.mud-button-filled-success .mud-icon-root,
.mud-button-filled-success svg,
.mud-button-filled-error .mud-icon-root,
.mud-button-filled-error svg,
.mud-button-filled-info .mud-icon-root,
.mud-button-filled-info svg {
    color: var(--mw-color-text-inverse) !important;
    fill: var(--mw-color-text-inverse) !important;
}

/* Warning button has dark text */
.mud-button-filled-warning .mud-icon-root,
.mud-button-filled-warning svg {
    color: var(--mw-color-neutral-dark) !important;
    fill: var(--mw-color-neutral-dark) !important;
}

/* Outlined Buttons */
.mud-button-outlined {
    border-width: 2px !important;
    height: var(--mw-button-height) !important;
    border-radius: var(--mw-radius-button) !important;
    font-weight: var(--mw-font-weight-medium) !important;
    text-transform: none !important;
}

.mud-button-outlined-primary {
    border-color: var(--mw-color-primary) !important;
    color: var(--mw-color-primary) !important;
}

.mud-button-outlined-primary:hover {
    background-color: var(--mw-color-hover) !important;
}

.mud-button-outlined-primary .mud-icon-root,
.mud-button-outlined-primary svg {
    color: var(--mw-color-primary) !important;
    fill: var(--mw-color-primary) !important;
}

.mud-button-outlined-error {
    border-color: var(--mw-color-error) !important;
    color: var(--mw-color-error) !important;
}

.mud-button-outlined-error .mud-icon-root,
.mud-button-outlined-error svg {
    color: var(--mw-color-error) !important;
    fill: var(--mw-color-error) !important;
}

/* Text Buttons */
.mud-button-text {
    text-transform: none !important;
    font-weight: var(--mw-font-weight-medium) !important;
}

.mud-button-text-primary {
    color: var(--mw-color-primary) !important;
}

.mud-button-text-primary:hover {
    background-color: var(--mw-color-hover) !important;
}

/* Button Labels */
.mud-button-filled-primary .mud-button-label,
.mud-button-filled-secondary .mud-button-label {
    color: var(--mw-color-text-inverse) !important;
}

/* -----------------------------------------------------------------
   5.3 Icon Buttons
   ----------------------------------------------------------------- */

.mud-icon-button {
    border-radius: var(--mw-radius-md) !important;
    transition: background-color var(--mw-transition-default) !important;
}

.mud-icon-button:hover {
    background-color: var(--mw-color-hover) !important;
}

.mud-icon-button.mud-icon-button-color-primary .mud-icon-root,
.mud-icon-button.mud-icon-button-color-primary svg {
    color: var(--mw-color-primary) !important;
    fill: var(--mw-color-primary) !important;
}

/* -----------------------------------------------------------------
   5.4 FAB (Floating Action Button)
   ----------------------------------------------------------------- */

.mud-fab-primary {
    background-color: var(--mw-color-primary) !important;
    color: var(--mw-color-text-inverse) !important;
    box-shadow: var(--mw-shadow-lg) !important;
}

.mud-fab-primary:hover {
    background-color: var(--mw-color-primary-dark) !important;
    box-shadow: var(--mw-shadow-xl) !important;
}

.mud-fab-primary .mud-icon-root,
.mud-fab-primary svg,
.mud-fab-secondary .mud-icon-root,
.mud-fab-secondary svg {
    color: var(--mw-color-text-inverse) !important;
    fill: var(--mw-color-text-inverse) !important;
}

/* -----------------------------------------------------------------
   5.5 Chips
   ----------------------------------------------------------------- */

.mud-chip {
    border-radius: var(--mw-radius-chip) !important;
    font-weight: var(--mw-font-weight-medium) !important;
}

.mud-chip-filled.mud-chip-color-primary .mud-icon-root,
.mud-chip-filled.mud-chip-color-primary svg,
.mud-chip-filled.mud-chip-color-secondary .mud-icon-root,
.mud-chip-filled.mud-chip-color-secondary svg,
.mud-chip-filled.mud-chip-color-success .mud-icon-root,
.mud-chip-filled.mud-chip-color-success svg,
.mud-chip-filled.mud-chip-color-info .mud-icon-root,
.mud-chip-filled.mud-chip-color-info svg,
.mud-chip-filled.mud-chip-color-error .mud-icon-root,
.mud-chip-filled.mud-chip-color-error svg {
    color: var(--mw-color-text-inverse) !important;
    fill: var(--mw-color-text-inverse) !important;
}

.mud-chip-filled.mud-chip-color-warning .mud-icon-root,
.mud-chip-filled.mud-chip-color-warning svg {
    color: var(--mw-color-neutral-dark) !important;
    fill: var(--mw-color-neutral-dark) !important;
}

/* -----------------------------------------------------------------
   5.6 Input Fields
   ----------------------------------------------------------------- */

.mud-input {
    font-size: var(--mw-font-size-body) !important;
    line-height: var(--mw-line-height-body) !important;
}

.mud-input-outlined .mud-input-root {
    border-radius: var(--mw-radius-input) !important;
}

.mud-input-label {
    font-size: 14px !important;
    font-weight: var(--mw-font-weight-medium) !important;
    color: var(--mw-color-text-primary) !important;
}

.mud-text-field {
    margin-bottom: var(--mw-spacing-4) !important;
}

/* Search Input Specific */
.mud-input-root-adorned-start.mud-input-root-outlined {
    border-radius: var(--mw-radius-full) !important;
}

/* -----------------------------------------------------------------
   5.7 Dialog
   ----------------------------------------------------------------- */

.mud-dialog {
    border-radius: var(--mw-radius-dialog) !important;
    box-shadow: var(--mw-shadow-dialog) !important;
}

.mud-dialog-title {
    font-size: var(--mw-font-size-h3) !important;
    font-weight: var(--mw-font-weight-semibold) !important;
    line-height: var(--mw-line-height-h3) !important;
    color: var(--mw-color-text-primary) !important;
}

.mud-dialog-content {
    max-height: 70vh;
    overflow-y: auto;
}

/* -----------------------------------------------------------------
   5.8 AppBar
   ----------------------------------------------------------------- */

.mud-appbar {
    box-shadow: var(--mw-shadow-navbar) !important;
}

.mud-appbar-primary {
    background-color: var(--mw-color-primary) !important;
}

/* -----------------------------------------------------------------
   5.9 Progress
   ----------------------------------------------------------------- */

.mud-progress-linear .mud-progress-linear-bar {
    background-color: var(--mw-color-primary) !important;
}

.mud-progress-circular-primary svg {
    color: var(--mw-color-primary) !important;
}

/* -----------------------------------------------------------------
   5.10 Checkbox & Toggle
   ----------------------------------------------------------------- */

.mud-checkbox-primary .mud-checkbox-input:checked {
    color: var(--mw-color-primary) !important;
}

.mud-switch-primary .mud-switch-track {
    background-color: var(--mw-color-primary) !important;
}

/* -----------------------------------------------------------------
   5.11 Typography Overrides
   ----------------------------------------------------------------- */

.mud-text-h5 {
    font-size: var(--mw-font-size-h1) !important;
    font-weight: var(--mw-font-weight-bold) !important;
    line-height: var(--mw-line-height-h1) !important;
    letter-spacing: var(--mw-letter-spacing-tight) !important;
    color: var(--mw-color-text-primary) !important;
}

.mud-text-h6 {
    font-size: var(--mw-font-size-h3) !important;
    font-weight: var(--mw-font-weight-semibold) !important;
    line-height: var(--mw-line-height-h3) !important;
    letter-spacing: var(--mw-letter-spacing-tight) !important;
    color: var(--mw-color-text-primary) !important;
}

.mud-text-subtitle1 {
    font-size: var(--mw-font-size-h3) !important;
    font-weight: var(--mw-font-weight-semibold) !important;
    line-height: var(--mw-line-height-h3) !important;
    letter-spacing: var(--mw-letter-spacing-tight) !important;
    color: var(--mw-color-text-primary) !important;
}

.mud-text-subtitle2 {
    font-size: var(--mw-font-size-h5) !important;
    font-weight: var(--mw-font-weight-semibold) !important;
    line-height: var(--mw-line-height-h5) !important;
    color: var(--mw-color-text-primary) !important;
}

.mud-text-body1 {
    font-size: var(--mw-font-size-body) !important;
    font-weight: var(--mw-font-weight-regular) !important;
    line-height: var(--mw-line-height-body) !important;
    color: var(--mw-color-text-primary) !important;
}

.mud-text-body2 {
    font-size: var(--mw-font-size-body-small) !important;
    font-weight: var(--mw-font-weight-regular) !important;
    line-height: var(--mw-line-height-body-small) !important;
    letter-spacing: var(--mw-letter-spacing-wide) !important;
    color: var(--mw-color-text-secondary) !important;
}

.mud-text-caption {
    font-size: var(--mw-font-size-caption) !important;
    font-weight: var(--mw-font-weight-medium) !important;
    line-height: var(--mw-line-height-caption) !important;
    letter-spacing: var(--mw-letter-spacing-wider) !important;
    color: var(--mw-color-text-secondary) !important;
}

/* -----------------------------------------------------------------
   5.12 Alert
   ----------------------------------------------------------------- */

.mud-alert {
    border-radius: var(--mw-radius-md) !important;
}

.mud-alert-warning {
    border-left: 4px solid var(--mw-color-warning);
}

.mud-alert-error {
    border-left: 4px solid var(--mw-color-error);
}

.mud-alert-success {
    border-left: 4px solid var(--mw-color-success);
}

.mud-alert-info {
    border-left: 4px solid var(--mw-color-info);
}


/* =====================================================================
   6. RESPONSIVE UTILITY CLASSES
   Mobile-First Breakpoint System
   ===================================================================== */

/* Hide/Show at breakpoints */
.mw-hide-sm { display: none !important; }

@media (min-width: 576px) {
    .mw-hide-sm { display: initial !important; }
    .mw-show-sm { display: none !important; }
    .mw-hide-md-up { display: none !important; }
}

@media (min-width: 768px) {
    .mw-hide-md { display: initial !important; }
    .mw-show-md { display: none !important; }
    .mw-hide-lg-up { display: none !important; }

    /* Responsive spacing */
    .mw-md-p-5 { padding: var(--mw-spacing-5) !important; }
    .mw-md-px-6 { padding-left: var(--mw-spacing-6) !important; padding-right: var(--mw-spacing-6) !important; }
}

@media (min-width: 992px) {
    .mw-hide-lg { display: initial !important; }
    .mw-show-lg { display: none !important; }

    /* Responsive spacing */
    .mw-lg-p-6 { padding: var(--mw-spacing-6) !important; }
    .mw-lg-px-7 { padding-left: var(--mw-spacing-7) !important; padding-right: var(--mw-spacing-7) !important; }
}

@media (min-width: 1200px) {
    .mw-hide-xl { display: initial !important; }
    .mw-show-xl { display: none !important; }
}

/* Mobile-only visibility */
@media (max-width: 575.98px) {
    .mw-hide-mobile { display: none !important; }
}

@media (min-width: 576px) {
    .mw-show-mobile-only { display: none !important; }
}


/* =====================================================================
   7. COMPONENT BASE STYLES
   Reusable component patterns
   ===================================================================== */

/* Standard Card */
.mw-card {
    background: var(--mw-color-surface);
    border-radius: var(--mw-radius-card);
    box-shadow: var(--mw-shadow-card);
    padding: var(--mw-spacing-4);
    transition: box-shadow var(--mw-transition-default), transform var(--mw-transition-default);
}

.mw-card:hover {
    box-shadow: var(--mw-shadow-card-hover);
}

.mw-card-interactive:hover {
    transform: translateY(-2px);
}

/* Page Background */
.mw-page {
    background-color: var(--mw-color-background);
    min-height: 100vh;
    padding: var(--mw-spacing-4);
}

@media (min-width: 768px) {
    .mw-page {
        padding: var(--mw-spacing-5);
    }
}

@media (min-width: 992px) {
    .mw-page {
        padding: var(--mw-spacing-6);
    }
}

/* App Logo */
.app-logo {
    height: 32px;
    width: auto;
}

/* FAB Positioning (Legacy) */
.mw-fab-bottom-right {
    position: fixed;
    bottom: var(--mw-spacing-6);
    right: var(--mw-spacing-6);
    z-index: var(--mw-z-fixed);
}

@media (max-width: 575.98px) {
    .mw-fab-bottom-right {
        bottom: var(--mw-spacing-4);
        right: var(--mw-spacing-4);
    }
}

/* -----------------------------------------------------------------
   Page FAB - Consistent positioning across all pages (WI #881)
   ----------------------------------------------------------------- */

/* Central FAB class for consistent positioning */
.mw-page-fab {
    position: fixed !important;
    bottom: calc(var(--mw-bottom-nav-height, 64px) + var(--mw-spacing-4) + env(safe-area-inset-bottom, 0px));
    right: var(--mw-spacing-4);
    z-index: var(--mw-z-fab, 1050);
    box-shadow: var(--mw-shadow-lg) !important;
    transition: transform var(--mw-transition-fast), box-shadow var(--mw-transition-fast);
}

.mw-page-fab:hover {
    transform: scale(1.05);
    box-shadow: var(--mw-shadow-xl) !important;
}

.mw-page-fab:active {
    transform: scale(0.95);
}

/* Desktop: Hide FAB if desktop button exists */
@media (min-width: 768px) {
    .mw-page-fab.mw-hide-desktop {
        display: none !important;
    }
}

/* Desktop: Different positioning (no bottom nav) */
@media (min-width: 992px) {
    .mw-page-fab {
        bottom: var(--mw-spacing-6);
        right: var(--mw-spacing-6);
    }
}

/* Page FAB Menu container (for FABs with dropdown menus) */
.mw-page-fab-menu {
    position: fixed !important;
    bottom: calc(var(--mw-bottom-nav-height, 64px) + var(--mw-spacing-4) + env(safe-area-inset-bottom, 0px));
    right: var(--mw-spacing-4);
    z-index: var(--mw-z-fab, 1050);
}

/* Desktop: Different positioning (no bottom nav) */
@media (min-width: 992px) {
    .mw-page-fab-menu {
        bottom: var(--mw-spacing-6);
        right: var(--mw-spacing-6);
    }
}

/* Hide FAB menu on desktop when needed */
@media (min-width: 768px) {
    .mw-page-fab-menu.mw-hide-desktop {
        display: none !important;
    }
}

/* Empty State */
.mw-empty-state {
    text-align: center;
    padding: var(--mw-spacing-7) var(--mw-spacing-4);
    color: var(--mw-color-text-secondary);
}

.mw-empty-state-icon {
    font-size: 48px;
    margin-bottom: var(--mw-spacing-4);
    opacity: 0.5;
}

/* Loading State */
.mw-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 200px;
    background: var(--mw-color-surface);
    border-radius: var(--mw-radius-card);
}

.mw-loading-text {
    color: var(--mw-color-text-secondary);
    margin-left: var(--mw-spacing-3);
}

/* Error State */
.mw-error-container {
    text-align: center;
    padding: var(--mw-spacing-6);
    background: var(--mw-color-surface);
    border-radius: var(--mw-radius-card);
    box-shadow: var(--mw-shadow-card);
}

/* Divider */
.mw-divider {
    height: 1px;
    background-color: var(--mw-color-divider);
    margin: var(--mw-spacing-4) 0;
}

/* Category Group */
.mw-category-header {
    background-color: var(--mw-color-primary-pale);
    padding: var(--mw-spacing-3) var(--mw-spacing-4);
    border-radius: var(--mw-radius-md);
    margin-bottom: var(--mw-spacing-2);
}

.mw-category-title {
    font-size: var(--mw-font-size-h5);
    font-weight: var(--mw-font-weight-semibold);
    color: var(--mw-color-primary);
    margin: 0;
}

/* Tag/Badge */
.mw-tag {
    display: inline-flex;
    align-items: center;
    height: 28px;
    padding: 0 var(--mw-spacing-2);
    border-radius: var(--mw-radius-tag);
    font-size: var(--mw-font-size-tag);
    font-weight: var(--mw-font-weight-medium);
    background-color: var(--mw-color-primary-pale);
    color: var(--mw-color-primary);
}

.mw-tag-secondary {
    background-color: var(--mw-color-secondary-light);
    color: var(--mw-color-secondary-dark);
}

/* Focus States for Accessibility */
.mw-focus-visible:focus-visible,
.mw-focus-visible .mud-button-root:focus-visible,
.mw-focus-visible .mud-icon-button:focus-visible {
    outline: 2px solid var(--mw-color-primary);
    outline-offset: 2px;
}

/* Scrollbar Styling */
.mw-scrollbar {
    scrollbar-width: thin;
    scrollbar-color: var(--mw-color-border) transparent;
}

.mw-scrollbar::-webkit-scrollbar {
    width: 6px;
}

.mw-scrollbar::-webkit-scrollbar-track {
    background: transparent;
}

.mw-scrollbar::-webkit-scrollbar-thumb {
    background-color: var(--mw-color-border);
    border-radius: 3px;
}

.mw-scrollbar::-webkit-scrollbar-thumb:hover {
    background-color: var(--mw-color-text-secondary);
}


/* =====================================================================
   8. LEGACY STYLES
   These are kept for backward compatibility and should be migrated
   ===================================================================== */

/* Blazor Error Handling */
h1:focus {
    outline: none;
}

.valid.modified:not([type=checkbox]) {
    outline: 1px solid #26b050;
}

.invalid {
    outline: 1px solid var(--mw-color-error);
}

.validation-message {
    color: var(--mw-color-error);
}

.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
}

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

.darker-border-checkbox.form-check-input {
    border-color: #929292;
}

/* Text decoration helper (legacy) */
.text-decoration-line-through {
    text-decoration: line-through;
    opacity: 0.6;
    color: var(--mw-color-text-secondary);
}

/* Print Styles */
@media print {
    .mw-card,
    .mud-card,
    .mud-paper {
        box-shadow: none !important;
        border: 1px solid var(--mw-color-border) !important;
    }

    .mud-button,
    .mw-fab-bottom-right,
    .mud-fab {
        display: none !important;
    }
}

/* =====================================================================
   MealWeek Global Button & Icon Styles
   ===================================================================== */

/* Filled Buttons - Icons müssen weiß sein */
.mud-button-filled-primary .mud-icon-root,
.mud-button-filled-primary .mud-button-icon-start,
.mud-button-filled-primary .mud-button-icon-end,
.mud-button-filled-primary svg,
.mud-button-filled-secondary .mud-icon-root,
.mud-button-filled-secondary .mud-button-icon-start,
.mud-button-filled-secondary .mud-button-icon-end,
.mud-button-filled-secondary svg,
.mud-button-filled-tertiary .mud-icon-root,
.mud-button-filled-tertiary .mud-button-icon-start,
.mud-button-filled-tertiary .mud-button-icon-end,
.mud-button-filled-tertiary svg,
.mud-button-filled-success .mud-icon-root,
.mud-button-filled-success .mud-button-icon-start,
.mud-button-filled-success .mud-button-icon-end,
.mud-button-filled-success svg,
.mud-button-filled-error .mud-icon-root,
.mud-button-filled-error .mud-button-icon-start,
.mud-button-filled-error .mud-button-icon-end,
.mud-button-filled-error svg,
.mud-button-filled-info .mud-icon-root,
.mud-button-filled-info .mud-button-icon-start,
.mud-button-filled-info .mud-button-icon-end,
.mud-button-filled-info svg {
    color: var(--mw-color-text-inverse) !important;
    fill: var(--mw-color-text-inverse) !important;
}

/* Warning Filled Button - Icon dunkel (da gelber Hintergrund) */
.mud-button-filled-warning .mud-icon-root,
.mud-button-filled-warning .mud-button-icon-start,
.mud-button-filled-warning .mud-button-icon-end,
.mud-button-filled-warning svg {
    color: var(--mw-color-text-primary) !important;
    fill: var(--mw-color-text-primary) !important;
}

/* Outlined Buttons - Icons erben Textfarbe */
.mud-button-outlined-primary .mud-icon-root,
.mud-button-outlined-primary svg {
    color: var(--mw-color-primary) !important;
    fill: var(--mw-color-primary) !important;
}

.mud-button-outlined-error .mud-icon-root,
.mud-button-outlined-error svg {
    color: var(--mw-color-error) !important;
    fill: var(--mw-color-error) !important;
}

/* Filled Chips - Icons müssen Kontrastfarbe haben */
.mud-chip-filled.mud-chip-color-primary .mud-icon-root,
.mud-chip-filled.mud-chip-color-primary svg,
.mud-chip-filled.mud-chip-color-secondary .mud-icon-root,
.mud-chip-filled.mud-chip-color-secondary svg,
.mud-chip-filled.mud-chip-color-success .mud-icon-root,
.mud-chip-filled.mud-chip-color-success svg,
.mud-chip-filled.mud-chip-color-info .mud-icon-root,
.mud-chip-filled.mud-chip-color-info svg,
.mud-chip-filled.mud-chip-color-error .mud-icon-root,
.mud-chip-filled.mud-chip-color-error svg {
    color: var(--mw-color-text-inverse) !important;
    fill: var(--mw-color-text-inverse) !important;
}

.mud-chip-filled.mud-chip-color-warning .mud-icon-root,
.mud-chip-filled.mud-chip-color-warning svg {
    color: var(--mw-color-text-primary) !important;
    fill: var(--mw-color-text-primary) !important;
}

/* FAB (Floating Action Button) - Icon weiß */
.mud-fab-primary .mud-icon-root,
.mud-fab-primary svg,
.mud-fab-secondary .mud-icon-root,
.mud-fab-secondary svg {
    color: var(--mw-color-text-inverse) !important;
    fill: var(--mw-color-text-inverse) !important;
}

/* Icon Buttons - Icon sollte Primary sein */
.mud-icon-button.mud-icon-button-color-primary .mud-icon-root,
.mud-icon-button.mud-icon-button-color-primary svg {
    color: var(--mw-color-primary) !important;
    fill: var(--mw-color-primary) !important;
}

/* Outlined Buttons sichtbarer machen */
.mud-button-outlined {
    border-width: 2px !important;
}

/* Filled Primary Button - korrekter Hintergrund */
.mud-button-filled-primary {
    background-color: var(--mw-color-primary) !important;
    color: var(--mw-color-text-inverse) !important;
}

.mud-button-filled-primary:hover {
    background-color: var(--mw-color-primary-dark) !important;
}

/* Button-Text weiß bei filled buttons */
.mud-button-filled-primary .mud-button-label,
.mud-button-filled-secondary .mud-button-label {
    color: var(--mw-color-text-inverse) !important;
}


/* =====================================================================
   8. PLATFORM-RESPONSIVE DESIGN SYSTEM
   Adaptive styles for Touch vs Pointer devices, Mobile vs Desktop
   ===================================================================== */

/* -----------------------------------------------------------------
   8.1 Platform Detection CSS Custom Properties
   Set by JavaScript PlatformDetectionService
   ----------------------------------------------------------------- */

:root {
    /* Default: Pointer device (Desktop) */
    --is-touch-device: 0;
    --viewport-width: 100vw;
    --viewport-height: 100vh;

    /* Platform-specific touch targets */
    --mw-touch-target: 44px;
    --mw-pointer-target: 32px;
    --mw-current-target-size: var(--mw-pointer-target);
}

/* Touch device detection via media query */
@media (pointer: coarse) {
    :root {
        --is-touch-device: 1;
        --mw-current-target-size: var(--mw-touch-target);
    }
}

/* Fine pointer (mouse) */
@media (pointer: fine) {
    :root {
        --is-touch-device: 0;
        --mw-current-target-size: var(--mw-pointer-target);
    }
}

/* -----------------------------------------------------------------
   8.2 Platform Classes (set by PlatformDetectionService)
   ----------------------------------------------------------------- */

/* Touch Device Styles */
.touch-device {
    /* Larger touch targets */
    --mw-current-target-size: var(--mw-touch-target);
}

.touch-device .mw-interactive {
    min-height: var(--mw-touch-target);
    min-width: var(--mw-touch-target);
}

/* Pointer Device Styles */
.pointer-device {
    --mw-current-target-size: var(--mw-pointer-target);
}

/* Disable hover effects on touch devices */
.touch-device .mw-hover-effect:hover {
    transform: none;
    box-shadow: var(--mw-shadow-card);
}

/* Enable hover effects only on pointer devices */
.pointer-device .mw-hover-effect:hover {
    transform: translateY(-2px);
    box-shadow: var(--mw-shadow-card-hover);
}

/* -----------------------------------------------------------------
   8.3 Breakpoint Classes (set by PlatformDetectionService)
   ----------------------------------------------------------------- */

/* Extra Small - Mobile Portrait (< 576px) */
.breakpoint-xs {
    --mw-grid-columns: 1;
    --mw-spacing-scale: 0.875;
}

/* Small - Mobile Landscape (>= 576px) */
.breakpoint-sm {
    --mw-grid-columns: 2;
    --mw-spacing-scale: 0.9375;
}

/* Medium - Tablet (>= 768px) */
.breakpoint-md {
    --mw-grid-columns: 2;
    --mw-spacing-scale: 1;
}

/* Large - Desktop (>= 992px) */
.breakpoint-lg {
    --mw-grid-columns: 3;
    --mw-spacing-scale: 1;
}

/* Extra Large - Large Desktop (>= 1200px) */
.breakpoint-xl {
    --mw-grid-columns: 4;
    --mw-spacing-scale: 1;
}

/* Extra Extra Large (>= 1400px) */
.breakpoint-xxl {
    --mw-grid-columns: 4;
    --mw-spacing-scale: 1;
}

/* -----------------------------------------------------------------
   8.4 Adaptive Navigation Styles
   Bottom Tab Nav for Mobile, Side/Top Nav for Desktop
   ----------------------------------------------------------------- */

/* Bottom Navigation Container */
.mw-bottom-nav {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: 64px;
    background: var(--mw-color-surface);
    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
    display: flex;
    justify-content: space-around;
    align-items: center;
    z-index: var(--mw-z-fixed);
    padding-bottom: env(safe-area-inset-bottom, 0);
}

/* Hide bottom nav on desktop */
@media (min-width: 992px) {
    .mw-bottom-nav {
        display: none;
    }
}

/* Bottom Nav Item */
.mw-bottom-nav-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-width: 64px;
    min-height: 48px;
    padding: var(--mw-spacing-1);
    color: var(--mw-color-text-secondary);
    text-decoration: none;
    transition: color var(--mw-transition-fast);
    cursor: pointer;
}

.mw-bottom-nav-item:hover,
.mw-bottom-nav-item.active {
    color: var(--mw-color-primary);
}

.mw-bottom-nav-item .mw-nav-icon {
    font-size: 24px;
    margin-bottom: 2px;
}

.mw-bottom-nav-item .mw-nav-label {
    font-size: 11px;
    font-weight: var(--mw-font-weight-medium);
}

/* Content Padding for Bottom Nav */
.mw-has-bottom-nav {
    padding-bottom: calc(64px + env(safe-area-inset-bottom, 0) + var(--mw-spacing-4));
}

@media (min-width: 992px) {
    .mw-has-bottom-nav {
        padding-bottom: var(--mw-spacing-4);
    }
}

/* -----------------------------------------------------------------
   8.5 Swipe Gesture Styles (Touch only)
   ----------------------------------------------------------------- */

.touch-device .mw-swipeable {
    touch-action: pan-y;
    user-select: none;
    -webkit-user-select: none;
}

.mw-swipe-actions {
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    display: flex;
    align-items: stretch;
    transform: translateX(100%);
    transition: transform var(--mw-transition-default);
}

.mw-swipe-action {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 72px;
    padding: 0 var(--mw-spacing-3);
    color: var(--mw-color-text-inverse);
}

.mw-swipe-action-delete {
    background: var(--mw-color-error);
}

.mw-swipe-action-edit {
    background: var(--mw-color-primary);
}

.mw-swipe-action-archive {
    background: var(--mw-color-warning);
    color: var(--mw-color-text-primary);
}

/* -----------------------------------------------------------------
   8.6 Responsive Grid System
   ----------------------------------------------------------------- */

.mw-grid {
    display: grid;
    gap: var(--mw-spacing-4);
    grid-template-columns: repeat(var(--mw-grid-columns, 1), 1fr);
}

/* Specific column counts */
.mw-grid-1 { grid-template-columns: repeat(1, 1fr); }
.mw-grid-2 { grid-template-columns: repeat(2, 1fr); }
.mw-grid-3 { grid-template-columns: repeat(3, 1fr); }
.mw-grid-4 { grid-template-columns: repeat(4, 1fr); }

/* Responsive grid adjustments */
@media (max-width: 575.98px) {
    .mw-grid-responsive {
        grid-template-columns: 1fr;
    }
}

@media (min-width: 576px) and (max-width: 767.98px) {
    .mw-grid-responsive {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 768px) and (max-width: 991.98px) {
    .mw-grid-responsive {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 992px) and (max-width: 1199.98px) {
    .mw-grid-responsive {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (min-width: 1200px) {
    .mw-grid-responsive {
        grid-template-columns: repeat(4, 1fr);
    }
}

/* -----------------------------------------------------------------
   8.7 Platform-Specific Visibility
   ----------------------------------------------------------------- */

/* Show only on touch devices */
.mw-touch-only {
    display: none;
}

.touch-device .mw-touch-only {
    display: initial;
}

/* Show only on pointer devices */
.mw-pointer-only {
    display: initial;
}

.touch-device .mw-pointer-only {
    display: none;
}

/* Show only on MAUI app */
.mw-maui-only {
    display: none;
}

.maui-app .mw-maui-only {
    display: initial;
}

/* Show only on Web app */
.mw-web-only {
    display: initial;
}

.maui-app .mw-web-only {
    display: none;
}

/* Mobile device class */
.mobile .mw-desktop-only {
    display: none;
}

.desktop .mw-mobile-only {
    display: none;
}

/* Tablet visibility */
.tablet .mw-phone-only {
    display: none;
}

/* -----------------------------------------------------------------
   8.8 Touch-Friendly Input Sizes
   ----------------------------------------------------------------- */

.touch-device input[type="text"],
.touch-device input[type="email"],
.touch-device input[type="password"],
.touch-device input[type="number"],
.touch-device input[type="tel"],
.touch-device textarea,
.touch-device select {
    min-height: var(--mw-touch-target);
    font-size: 16px; /* Prevents iOS zoom on focus */
}

.touch-device .mud-input-control {
    min-height: var(--mw-touch-target);
}

/* -----------------------------------------------------------------
   8.9 Safe Area Insets (Mobile Notch/Home Indicator)
   ----------------------------------------------------------------- */

.mw-safe-area-top {
    padding-top: env(safe-area-inset-top, 0);
}

.mw-safe-area-bottom {
    padding-bottom: env(safe-area-inset-bottom, 0);
}

.mw-safe-area-left {
    padding-left: env(safe-area-inset-left, 0);
}

.mw-safe-area-right {
    padding-right: env(safe-area-inset-right, 0);
}

.mw-safe-area-all {
    padding: env(safe-area-inset-top, 0) env(safe-area-inset-right, 0) env(safe-area-inset-bottom, 0) env(safe-area-inset-left, 0);
}

/* -----------------------------------------------------------------
   8.10 Compact Layout Utilities
   ----------------------------------------------------------------- */

/* Compact mode for mobile */
.mw-compact .mw-card {
    padding: var(--mw-spacing-3);
}

.mw-compact .mw-spacing-default {
    padding: var(--mw-spacing-3);
}

.mw-compact .mw-h1 { font-size: calc(var(--mw-font-size-h1) * 0.875); }
.mw-compact .mw-h2 { font-size: calc(var(--mw-font-size-h2) * 0.875); }
.mw-compact .mw-h3 { font-size: calc(var(--mw-font-size-h3) * 0.875); }

/* Apply compact automatically on mobile */
@media (max-width: 575.98px) {
    .mw-auto-compact .mw-card {
        padding: var(--mw-spacing-3);
    }

    .mw-auto-compact .mw-h1 { font-size: calc(var(--mw-font-size-h1) * 0.875); }
    .mw-auto-compact .mw-h2 { font-size: calc(var(--mw-font-size-h2) * 0.875); }
    .mw-auto-compact .mw-h3 { font-size: calc(var(--mw-font-size-h3) * 0.875); }
}


/* =====================================================================
   10. UTILITY CLASSES FOR INLINE STYLE REPLACEMENT (WI #882)
   ===================================================================== */

/* Border Radius Utilities */
.mw-rounded-none { border-radius: var(--mw-radius-none) !important; }
.mw-rounded-sm { border-radius: var(--mw-radius-sm) !important; }
.mw-rounded-md { border-radius: var(--mw-radius-md) !important; }
.mw-rounded-lg { border-radius: var(--mw-radius-lg) !important; }
.mw-rounded-xl { border-radius: var(--mw-radius-xl) !important; }
.mw-rounded-2xl { border-radius: var(--mw-radius-2xl) !important; }
.mw-rounded-full { border-radius: var(--mw-radius-full) !important; }

/* Background Utilities */
.mw-bg-grey { background-color: var(--mud-palette-background-grey) !important; }
.mw-bg-surface { background-color: var(--mw-color-surface) !important; }
.mw-bg-transparent { background-color: transparent !important; }
.mw-bg-primary-pale { background-color: var(--mw-color-primary-pale) !important; }
.mw-bg-primary-light { background-color: rgba(10, 124, 90, 0.08) !important; }

/* Text Alignment */
.mw-text-left { text-align: left !important; }
.mw-text-center { text-align: center !important; }
.mw-text-right { text-align: right !important; }

/* Width Utilities */
.mw-w-full { width: 100% !important; }
.mw-w-auto { width: auto !important; }
.mw-min-w-0 { min-width: 0 !important; }

/* Height Utilities */
.mw-h-full { height: 100% !important; }
.mw-h-auto { height: auto !important; }
.mw-h-48 { height: 48px !important; }
.mw-h-200 { height: 200px !important; }

/* Min-Height Utilities */
.mw-min-h-100 { min-height: 100px !important; }
.mw-min-h-150 { min-height: 150px !important; }
.mw-min-h-300 { min-height: 300px !important; }
.mw-min-h-60vh { min-height: 60vh !important; }

/* Max-Width Utilities */
.mw-max-w-sm { max-width: 460px !important; }
.mw-max-w-md { max-width: 520px !important; }
.mw-max-w-150 { max-width: 150px !important; }

/* Cursor Utilities */
.mw-cursor-pointer { cursor: pointer !important; }
.mw-cursor-default { cursor: default !important; }

/* Font Style Utilities */
.mw-font-mono { font-family: var(--mw-font-family-mono) !important; }
.mw-font-semibold { font-weight: var(--mw-font-weight-semibold) !important; }
.mw-font-italic { font-style: italic !important; }
.mw-whitespace-pre { white-space: pre-wrap !important; }

/* Vertical Alignment */
.mw-align-middle { vertical-align: middle !important; }

/* Recipe Image Placeholder Gradient */
.mw-recipe-image-placeholder {
    background: linear-gradient(135deg, var(--mw-color-primary), var(--mw-color-primary-light)) !important;
}

/* Card Hover Effect */
.mw-card-hover {
    transition: transform var(--mw-transition-fast), box-shadow var(--mw-transition-fast);
}

.mw-card-hover:hover {
    transform: translateY(-2px);
}

/* Border Utilities */
.mw-border { border: 1px solid var(--mud-palette-divider) !important; }
.mw-border-dashed { border: 2px dashed var(--mud-palette-lines-default) !important; }
.mw-border-left-warning { border-left: 4px solid var(--mud-palette-warning) !important; }
.mw-border-left-error { border-left: 4px solid var(--mud-palette-error) !important; }

/* Overflow Utilities */
.mw-overflow-hidden { overflow: hidden !important; }
.mw-overflow-auto { overflow: auto !important; }

/* Object Fit */
.mw-object-cover { object-fit: cover !important; }

/* Opacity */
.mw-opacity-70 { opacity: 0.7 !important; }

/* Line Clamp (for text truncation) */
.mw-line-clamp-2 {
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
}

/* Text Decoration */
.mw-line-through { text-decoration: line-through !important; }

/* Text Colors */
.mw-text-inverse { color: var(--mw-color-text-inverse) !important; }
.mw-text-primary { color: var(--mw-color-text-primary) !important; }
.mw-text-secondary { color: var(--mw-color-text-secondary) !important; }

/* =====================================================================
   COOKIE CONSENT BANNER (WI #891)
   Global styles to ensure proper positioning and visibility
   ===================================================================== */

.cookie-consent-banner {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: var(--mw-z-modal);
    padding: var(--mw-spacing-4);
    display: flex;
    justify-content: center;
    pointer-events: none;
    animation: mw-cookie-fade-in 0.3s var(--mw-easing-out);
}

.cookie-consent-banner.cookie-consent-hiding {
    animation: mw-cookie-fade-out 0.3s var(--mw-easing-in) forwards;
}

.cookie-consent-content {
    max-width: 600px;
    width: 100%;
    padding: var(--mw-spacing-5) var(--mw-spacing-5);
    display: flex;
    flex-direction: column;
    gap: var(--mw-spacing-4);
    background: var(--mw-color-surface);
    pointer-events: auto;
    border-radius: var(--mw-radius-lg);
    box-shadow: var(--mw-shadow-2xl);
}

.cookie-consent-text {
    flex: 1;
}

.cookie-consent-buttons {
    display: flex;
    justify-content: flex-end;
    gap: var(--mw-spacing-2);
}

/* Animations */
@keyframes mw-cookie-fade-in {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes mw-cookie-fade-out {
    from {
        opacity: 1;
        transform: translateY(0);
    }
    to {
        opacity: 0;
        transform: translateY(20px);
    }
}

/* When bottom navigation is present, position banner above it */
.mw-has-bottom-nav .cookie-consent-banner {
    bottom: 72px;
}

/* Mobile responsive */
@media (max-width: 600px) {
    .cookie-consent-banner {
        padding: var(--mw-spacing-2);
    }

    .cookie-consent-content {
        padding: var(--mw-spacing-4);
    }

    .cookie-consent-buttons {
        flex-direction: column;
        width: 100%;
    }

    .cookie-consent-buttons .mud-button {
        width: 100%;
    }
}

/* Dark mode support */
.mud-theme-dark .cookie-consent-content {
    background: var(--mw-color-surface-dark);
}