/**
 * EZsalt Design System
 * Simple, scoped component library for new pages
 * Version: 1.0
 *
 * Usage:
 * 1. Include this CSS file: <link rel="stylesheet" href="css/ezsalt-design-system.css">
 * 2. Wrap your page content with: <div class="ezs-app">...</div>
 * 3. All styles are scoped to .ezs-app to prevent conflicts with legacy styles
 *
 * Future: Can be broken into separate files when the design system grows
 */

/* ====================================================================
   DESIGN TOKENS
   All CSS variables scoped to .ezs-app
   ==================================================================== */

.ezs-app,
.ezs-app *,
.ezs-app *::before,
.ezs-app *::after {
    /* Box Sizing - Apply to all children for consistent layout behavior */
    box-sizing: border-box;
}

.ezs-app {
    /* Brand Colors - Primary Blue */
    --ezs-primary-900: #0d5a8f;
    --ezs-primary-700: #1576b5;
    --ezs-primary-600: #1888c8;
    --ezs-primary-500: #1998d5;
    --ezs-primary-400: #4aadde;
    --ezs-primary-300: #7ac2e7;
    --ezs-primary-200: #a5d5f0;
    --ezs-primary-100: #d2e9f7;
    --ezs-primary-50: #e9f4fb;

    /* Secondary Accent - Cyan */
    --ezs-secondary-500: #00BCD4;
    --ezs-secondary-400: #26C6DA;

    /* Grayscale */
    --ezs-gray-900: #212121;
    --ezs-gray-800: #424242;
    --ezs-gray-700: #616161;
    --ezs-gray-600: #757575;
    --ezs-gray-500: #9E9E9E;
    --ezs-gray-400: #BDBDBD;
    --ezs-gray-300: #E0E0E0;
    --ezs-gray-200: #EEEEEE;
    --ezs-gray-100: #F5F5F5;
    --ezs-gray-50: #FAFAFA;

    /* Semantic Colors */
    --ezs-success: #4CAF50;
    --ezs-warning: #FF9800;
    --ezs-error: #F44336;
    --ezs-info: #1998d5;

    /* ====================================================================
       THEME COLORS - Surface & Text (Light Mode Default)
       Material Design 3 Color System - These change in dark mode
       ==================================================================== */

    /* Surface Colors - Backgrounds and containers */
    --ezs-surface-default: #FFFFFF;           /* Main page background */
    --ezs-surface-container: #FFFFFF;         /* Card backgrounds */
    --ezs-surface-container-low: #F5F5F5;     /* Subtle elevated surfaces */
    --ezs-surface-container-high: #EEEEEE;    /* Higher elevated surfaces */
    --ezs-surface-container-highest: #E0E0E0; /* Highest elevation */

    /* Text Colors - Foreground text on surfaces */
    --ezs-on-surface: #212121;                /* Primary text color */
    --ezs-on-surface-variant: #757575;        /* Secondary/subtle text */
    --ezs-on-surface-muted: #9E9E9E;          /* Tertiary/disabled text */

    /* Border & Divider Colors */
    --ezs-outline: #E0E0E0;                   /* Subtle borders/dividers */
    --ezs-outline-variant: #BDBDBD;           /* Stronger borders */

    /* Interactive Surface States */
    --ezs-surface-hover: #F5F5F5;             /* Hover state background */
    --ezs-surface-active: #EEEEEE;            /* Active/pressed state */

    /* Shadow Colors - For elevation */
    --ezs-shadow-color: rgba(0, 0, 0, 0.3);   /* Base shadow color */

    /* Typography Scale - Material Design 3 */
    /* Display - Largest text on screen */
    --ezs-typescale-display-large-font: 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --ezs-typescale-display-large-size: 3.5rem;        /* 56px */
    --ezs-typescale-display-large-weight: 400;
    --ezs-typescale-display-large-line-height: 4rem;   /* 64px */

    --ezs-typescale-display-medium-size: 2.8125rem;    /* 45px */
    --ezs-typescale-display-medium-weight: 400;
    --ezs-typescale-display-medium-line-height: 3.25rem; /* 52px */

    --ezs-typescale-display-small-size: 2.25rem;       /* 36px */
    --ezs-typescale-display-small-weight: 400;
    --ezs-typescale-display-small-line-height: 2.75rem; /* 44px */

    /* Headline - High-emphasis section headers */
    --ezs-typescale-headline-large-size: 2rem;         /* 32px */
    --ezs-typescale-headline-large-weight: 400;
    --ezs-typescale-headline-large-line-height: 2.5rem; /* 40px */

    --ezs-typescale-headline-medium-size: 1.75rem;     /* 28px */
    --ezs-typescale-headline-medium-weight: 400;
    --ezs-typescale-headline-medium-line-height: 2.25rem; /* 36px */

    --ezs-typescale-headline-small-size: 1.5rem;       /* 24px */
    --ezs-typescale-headline-small-weight: 400;
    --ezs-typescale-headline-small-line-height: 2rem;  /* 32px */

    /* Title - Medium-emphasis headers */
    --ezs-typescale-title-large-size: 1.375rem;        /* 22px */
    --ezs-typescale-title-large-weight: 400;
    --ezs-typescale-title-large-line-height: 1.75rem;  /* 28px */

    --ezs-typescale-title-medium-size: 1rem;           /* 16px */
    --ezs-typescale-title-medium-weight: 500;
    --ezs-typescale-title-medium-line-height: 1.5rem;  /* 24px */

    --ezs-typescale-title-small-size: 0.875rem;        /* 14px */
    --ezs-typescale-title-small-weight: 500;
    --ezs-typescale-title-small-line-height: 1.25rem;  /* 20px */

    /* Body - Main content text */
    --ezs-typescale-body-large-size: 1rem;             /* 16px */
    --ezs-typescale-body-large-weight: 400;
    --ezs-typescale-body-large-line-height: 1.5rem;    /* 24px */

    --ezs-typescale-body-medium-size: 0.875rem;        /* 14px */
    --ezs-typescale-body-medium-weight: 400;
    --ezs-typescale-body-medium-line-height: 1.25rem;  /* 20px */

    --ezs-typescale-body-small-size: 0.75rem;          /* 12px */
    --ezs-typescale-body-small-weight: 400;
    --ezs-typescale-body-small-line-height: 1rem;      /* 16px */

    /* Label - UI element labels, buttons */
    --ezs-typescale-label-large-size: 0.875rem;        /* 14px */
    --ezs-typescale-label-large-weight: 500;
    --ezs-typescale-label-large-line-height: 1.25rem;  /* 20px */

    --ezs-typescale-label-medium-size: 0.75rem;        /* 12px */
    --ezs-typescale-label-medium-weight: 500;
    --ezs-typescale-label-medium-line-height: 1rem;    /* 16px */

    --ezs-typescale-label-small-size: 0.6875rem;       /* 11px */
    --ezs-typescale-label-small-weight: 500;
    --ezs-typescale-label-small-line-height: 1rem;     /* 16px */

    /* Material Elevation - M3 Three-Layer Shadow System */
    /* Each level uses Umbra (key shadow), Penumbra (soft shadow), and Ambient (diffuse shadow) */
    --ezs-elevation-0: none;
    --ezs-elevation-1: 0px 1px 3px 0px rgba(0, 0, 0, 0.2),
                       0px 1px 1px 0px rgba(0, 0, 0, 0.14),
                       0px 2px 1px -1px rgba(0, 0, 0, 0.12);
    --ezs-elevation-2: 0px 1px 5px 0px rgba(0, 0, 0, 0.2),
                       0px 2px 2px 0px rgba(0, 0, 0, 0.14),
                       0px 3px 1px -2px rgba(0, 0, 0, 0.12);
    --ezs-elevation-3: 0px 1px 8px 0px rgba(0, 0, 0, 0.2),
                       0px 3px 4px 0px rgba(0, 0, 0, 0.14),
                       0px 3px 3px -2px rgba(0, 0, 0, 0.12);
    --ezs-elevation-4: 0px 2px 4px -1px rgba(0, 0, 0, 0.2),
                       0px 4px 5px 0px rgba(0, 0, 0, 0.14),
                       0px 1px 10px 0px rgba(0, 0, 0, 0.12);
    --ezs-elevation-5: 0px 3px 5px -1px rgba(0, 0, 0, 0.2),
                       0px 5px 8px 0px rgba(0, 0, 0, 0.14),
                       0px 1px 14px 0px rgba(0, 0, 0, 0.12);

    /* Motion - Easing Curves (Material Design 3) */
    --ezs-motion-easing-standard: cubic-bezier(0.2, 0, 0, 1.0);           /* Standard - Exit animations */
    --ezs-motion-easing-emphasized: cubic-bezier(0.05, 0.7, 0.1, 1.0);    /* Emphasized Decelerate - Enter animations */
    --ezs-motion-easing-emphasized-accelerate: cubic-bezier(0.3, 0, 0.8, 0.15); /* Emphasized Accelerate - Exit animations */
    --ezs-motion-easing-decelerated: cubic-bezier(0.0, 0.0, 0, 1.0);      /* Legacy/decelerate */
    --ezs-motion-easing-accelerated: cubic-bezier(0.3, 0.0, 1, 1);        /* Legacy/accelerate */
    --ezs-motion-easing-linear: cubic-bezier(0.0, 0.0, 1, 1);             /* Linear */

    /* Motion - Duration */
    --ezs-motion-duration-short1: 50ms;
    --ezs-motion-duration-short2: 100ms;
    --ezs-motion-duration-short3: 150ms;
    --ezs-motion-duration-short4: 200ms;
    --ezs-motion-duration-medium1: 250ms;
    --ezs-motion-duration-medium2: 300ms;
    --ezs-motion-duration-medium3: 350ms;
    --ezs-motion-duration-medium4: 400ms;
    --ezs-motion-duration-long1: 450ms;
    --ezs-motion-duration-long2: 500ms;
    --ezs-motion-duration-long3: 550ms;
    --ezs-motion-duration-long4: 600ms;

    /* Spacing - 8px Grid System */
    --ezs-space-1: 8px;
    --ezs-space-2: 16px;
    --ezs-space-3: 24px;
    --ezs-space-4: 32px;
    --ezs-space-5: 40px;
    --ezs-space-6: 48px;
    --ezs-space-7: 56px;
    --ezs-space-8: 64px;

    /* Border Radius */
    --ezs-radius-sm: 4px;
    --ezs-radius-md: 8px;
    --ezs-radius-lg: 12px;
    --ezs-radius-xl: 16px;
    --ezs-radius-pill: 100px;  /* Pill shape for badges */
    --ezs-radius-full: 50%;    /* Perfect circle */

    /* Form States */
    --ezs-focus-ring: 0 0 0 3px rgba(25, 152, 213, 0.2);
    --ezs-input-border: var(--ezs-outline);
    --ezs-input-border-hover: var(--ezs-outline-variant);
    --ezs-input-border-focus: var(--ezs-primary-500);
    --ezs-input-border-error: var(--ezs-error);

    /* Utility Surface Colors - For state backgrounds */
    --ezs-success-surface: #E8F5E9;
    --ezs-success-text: #2E7D32;
    --ezs-warning-surface: #FFF3E0;
    --ezs-warning-text: #F57C00;
    --ezs-error-surface: #FFEBEE;
    --ezs-error-text: #C62828;
    --ezs-info-surface: #E3F2FD;
    --ezs-info-text: #1976D2;

    /* Z-Index Scale */
    --ezs-z-dropdown: 1000;
    --ezs-z-sticky: 1020;
    --ezs-z-fab: 1030;
    --ezs-z-modal-backdrop: 1040;
    --ezs-z-modal: 1050;
    --ezs-z-toast: 1060;

    /* Responsive Breakpoints - Documentation Only
       Note: CSS custom properties cannot be used in @media queries
       These are documented here for consistency across the design system
       - Desktop:     1280px and above (max-width: none)
       - Laptop:      1024px - 1279px  (max-width: 1279px)
       - Tablet:      768px - 1023px   (max-width: 1023px)
       - Mobile:      640px - 767px    (max-width: 767px)
       - Mobile-sm:   Below 640px      (max-width: 639px)
    */
}

/* ====================================================================
   DARK MODE THEME COLORS
   Material Design 3 Dark Theme - Applied when .ezs-theme-dark class is present
   ==================================================================== */

.ezs-app.ezs-theme-dark {
    /* Surface Colors - Dark Mode Backgrounds */
    --ezs-surface-default: #1C1B1F;           /* Main page background (M3 dark) */
    --ezs-surface-container: #2B2930;         /* Card backgrounds */
    --ezs-surface-container-low: #211F26;     /* Subtle elevated surfaces */
    --ezs-surface-container-high: #36343B;    /* Higher elevated surfaces */
    --ezs-surface-container-highest: #3E3B42; /* Highest elevation */

    /* Text Colors - Dark Mode Foreground */
    --ezs-on-surface: #E6E1E5;                /* Primary text color */
    --ezs-on-surface-variant: #CAC4D0;        /* Secondary/subtle text */
    --ezs-on-surface-muted: #938F99;          /* Tertiary/disabled text */

    /* Border & Divider Colors - Dark Mode */
    --ezs-outline: #49454F;                   /* Subtle borders/dividers */
    --ezs-outline-variant: #79747E;           /* Stronger borders */

    /* Interactive Surface States - Dark Mode */
    --ezs-surface-hover: #36343B;             /* Hover state background */
    --ezs-surface-active: #3E3B42;            /* Active/pressed state */

    /* Shadow Colors - Dark Mode uses lighter/softer shadows */
    --ezs-shadow-color: rgba(0, 0, 0, 0.5);   /* Stronger shadow for dark mode */

    /* Primary Colors - Adjusted for dark mode (more saturated) */
    --ezs-primary-500: #4FC3F7;               /* Lighter blue for better contrast */
    --ezs-primary-600: #29B6F6;
    --ezs-primary-700: #03A9F4;

    /* Utility Surface Colors - Dark Mode (keeping light mode alert styles for consistency) */
    --ezs-success-surface: #1B5E20;
    --ezs-success-text: #81C784;
    --ezs-warning-surface: #FFF3E0;
    --ezs-warning-text: #F57C00;
    --ezs-error-surface: #B71C1C;
    --ezs-error-text: #E57373;
    --ezs-info-surface: #01579B;
    --ezs-info-text: #4FC3F7;

    /* Form States - Dark Mode */
    --ezs-input-border: var(--ezs-outline);
    --ezs-input-border-hover: var(--ezs-outline-variant);
    --ezs-input-border-focus: var(--ezs-primary-500);
}

/* ====================================================================
   BASE STYLES
   Apply semantic background colors to page
   ==================================================================== */

.ezs-app {
    background-color: var(--ezs-surface-default);
    color: var(--ezs-on-surface);
}

/* Links */
.ezs-app a {
    color: var(--ezs-primary-600);
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-thickness: 1px;
}

.ezs-app a:hover {
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* Prevent underline on buttons, icons, and chips */
.ezs-app a.ezs-btn,
.ezs-app a.ezs-btn:hover,
.ezs-app a.ezs-btn-icon,
.ezs-app a.ezs-btn-icon:hover,
.ezs-app a.ezs-chip,
.ezs-app a.ezs-chip:hover,
.ezs-app a[href^="tel"],
.ezs-app a[href^="tel"]:hover,
.ezs-app .ezs-btn .material-icons,
.ezs-app a .material-icons,
.ezs-app a:has(.material-icons),
.ezs-app a:has(.material-icons):hover,
.ezs-app a.ezs-order-link,
.ezs-app a.ezs-order-link:hover,
.ezs-app a.ezs-payment-link,
.ezs-app a.ezs-payment-link:hover,
.ezs-app a.ezs-stored-card-link,
.ezs-app a.ezs-area-setup-icon,
.ezs-app a.ezs-area-setup-icon:hover {
    text-decoration: none;
}

/* ====================================================================
   BUTTON COMPONENTS
   Material Design 3 buttons - Full M3 specification compliance
   ==================================================================== */

.ezs-app .ezs-btn {
    box-sizing: border-box !important;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 0 var(--ezs-space-3);
    height: 40px;
    border-radius: 20px;
    font-size: var(--ezs-typescale-label-large-size);
    font-weight: var(--ezs-typescale-label-large-weight);
    line-height: var(--ezs-typescale-label-large-line-height);
    text-transform: none;
    text-decoration: none;
    letter-spacing: 0.1px;
    border: none;
    cursor: pointer;
    transition: background-color var(--ezs-motion-duration-short4) var(--ezs-motion-easing-standard),
                box-shadow var(--ezs-motion-duration-short4) var(--ezs-motion-easing-standard);
    font-family: 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    position: relative;
    min-width: 64px;
}

.ezs-app .ezs-btn .material-icons {
    color: inherit;
    font-size: 18px;
}

/* Filled Button - High emphasis, no elevation */
.ezs-app .ezs-btn-filled,
.ezs-app .ezs-btn-contained { /* Keep contained as alias for backwards compatibility */
    background: var(--ezs-primary-500);
    color: white;
    box-shadow: none;
}

.ezs-app .ezs-btn-filled:hover,
.ezs-app .ezs-btn-contained:hover {
    background: var(--ezs-primary-600);
    box-shadow: var(--ezs-elevation-1);
}

/* Disabled Button State */
.ezs-app .ezs-btn:disabled,
.ezs-app .ezs-btn[disabled] {
    background: var(--ezs-surface-container-high);
    color: var(--ezs-on-surface-muted);
    cursor: not-allowed;
    box-shadow: none;
    opacity: 0.6;
}

.ezs-app .ezs-btn:disabled:hover,
.ezs-app .ezs-btn[disabled]:hover {
    background: var(--ezs-surface-container-high);
    box-shadow: none;
}

/* Elevated Button - Tonal with shadow (use sparingly) */
.ezs-app .ezs-btn-elevated {
    background: var(--ezs-primary-100);
    color: var(--ezs-primary-700);
    box-shadow: var(--ezs-elevation-1);
}

.ezs-app .ezs-btn-elevated:hover {
    background: var(--ezs-primary-200);
    box-shadow: var(--ezs-elevation-2);
}

/* Filled Tonal Button - Medium emphasis, no elevation */
.ezs-app .ezs-btn-tonal {
    background: var(--ezs-primary-100);
    color: var(--ezs-primary-700);
    box-shadow: none;
}

.ezs-app .ezs-btn-tonal:hover {
    background: var(--ezs-primary-200);
    box-shadow: none;
}

/* Error Tonal Button - For destructive actions like delete */
.ezs-app .ezs-btn-tonal-error {
    background: var(--ezs-error-container, #FFEBEE);
    color: var(--ezs-error-700, #C62828);
    box-shadow: none;
}

.ezs-app .ezs-btn-tonal-error:hover {
    background: var(--ezs-error-container-high, #FFCDD2);
    box-shadow: var(--ezs-elevation-1);
}

.ezs-app .ezs-btn-tonal-error:active {
    background: var(--ezs-error-container-highest, #EF9A9A);
}

/* Outlined Button - Border only, no elevation */
.ezs-app .ezs-btn-outlined {
    background: transparent;
    color: var(--ezs-primary-600);
    border: 1px solid var(--ezs-outline);
    box-shadow: none;
}

.ezs-app .ezs-btn-outlined:hover {
    background: rgba(25, 152, 213, 0.08);
    border-color: var(--ezs-outline);
    box-shadow: none;
}

/* Text Button - Low emphasis, no background or elevation */
.ezs-app .ezs-btn-text {
    background: transparent;
    color: var(--ezs-primary-600);
    box-shadow: none;
    padding: 0 var(--ezs-space-2);
}

.ezs-app .ezs-btn-text:hover {
    background: rgba(25, 152, 213, 0.08);
    box-shadow: none;
}

/* Subtle Button - Gray background */
.ezs-app .ezs-btn-subtle {
    background: var(--ezs-surface-container-low);
    color: var(--ezs-on-surface-variant);
    box-shadow: none;
    border: 1px solid var(--ezs-outline);
}

.ezs-app .ezs-btn-subtle:hover {
    background: var(--ezs-surface-container-high);
    color: var(--ezs-on-surface);
    border-color: var(--ezs-outline-variant);
}

/* Small Button Variant - M3 Compact Size */
.ezs-app .ezs-btn-small {
    height: 32px;
    padding: 0 12px;
    font-size: 13px;
    border-radius: 16px;
    min-width: 48px;
}

.ezs-app .ezs-btn-small .material-icons {
    font-size: 16px;
}

/* Button in card header */
.ezs-app .ezs-btn-header {
    margin-left: auto;
    padding: 6px 12px;
    font-size: 13px;
    height: 32px;
    flex: 0 0 auto;
    min-width: fit-content;
}

.ezs-app .ezs-btn-header .material-icons {
    font-size: 18px;
}

/* Icon Button - For trailing actions in lists */
.ezs-app .ezs-btn-icon {
    width: 40px;
    height: 40px;
    min-width: 40px;
    padding: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--ezs-on-surface-variant);
    border: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    text-decoration: none;
    transition: all var(--ezs-motion-duration-short3) var(--ezs-motion-easing-standard);
}

.ezs-app .ezs-btn-icon:hover {
    background: var(--ezs-surface-hover);
    color: var(--ezs-on-surface);
}

.ezs-app .ezs-btn-icon .material-icons {
    font-size: 20px;
}

/* Icon Button - Tonal variant (primary color icon, tonal background on hover) */
.ezs-app .ezs-btn-icon-tonal {
    background: transparent;
    color: var(--ezs-primary-500);
}

.ezs-app .ezs-btn-icon-tonal:hover {
    background: var(--ezs-primary-100);
    color: var(--ezs-primary-700);
}

/* Alert-themed Buttons - For use in banners/notifications */
/* These match the alert color system for visual cohesion */

/* Warning Button (amber/orange) - Text variant */
.ezs-app .ezs-btn-warning {
    color: var(--ezs-warning-text);
    background: transparent;
}

.ezs-app .ezs-btn-warning:hover {
    background: rgba(245, 124, 0, 0.08);
    color: var(--ezs-warning-text);
}

/* Warning Filled Button */
.ezs-app .ezs-btn-filled.ezs-btn-warning,
.ezs-app .ezs-btn-contained.ezs-btn-warning {
    background: var(--ezs-warning);
    color: white;
    box-shadow: none;
}

.ezs-app .ezs-btn-filled.ezs-btn-warning:hover,
.ezs-app .ezs-btn-contained.ezs-btn-warning:hover {
    background: #F57C00;
    box-shadow: var(--ezs-elevation-1);
}

/* Error/Danger Button - Text variant */
.ezs-app .ezs-btn-danger {
    color: var(--ezs-error-text);
    background: transparent;
}

.ezs-app .ezs-btn-danger:hover {
    background: rgba(198, 40, 40, 0.08);
    color: var(--ezs-error-text);
}

/* Danger Filled Button */
.ezs-app .ezs-btn-filled.ezs-btn-danger,
.ezs-app .ezs-btn-contained.ezs-btn-danger {
    background: var(--ezs-error);
    color: white;
    box-shadow: none;
}

.ezs-app .ezs-btn-filled.ezs-btn-danger:hover,
.ezs-app .ezs-btn-contained.ezs-btn-danger:hover {
    background: #D32F2F;
    box-shadow: var(--ezs-elevation-1);
}

/* Danger Tonal Button */
.ezs-app .ezs-btn-tonal.ezs-btn-danger {
    background: var(--ezs-error-surface);
    color: var(--ezs-error-text);
    box-shadow: none;
}

.ezs-app .ezs-btn-tonal.ezs-btn-danger:hover {
    background: #FFCDD2;
    box-shadow: none;
}

/* Success Button - Text variant */
.ezs-app .ezs-btn-success {
    color: var(--ezs-success-text);
    background: transparent;
}

.ezs-app .ezs-btn-success:hover {
    background: rgba(46, 125, 50, 0.08);
    color: var(--ezs-success-text);
}

/* Success Filled Button */
.ezs-app .ezs-btn-filled.ezs-btn-success,
.ezs-app .ezs-btn-contained.ezs-btn-success {
    background: var(--ezs-success);
    color: white;
    box-shadow: none;
}

.ezs-app .ezs-btn-filled.ezs-btn-success:hover,
.ezs-app .ezs-btn-contained.ezs-btn-success:hover {
    background: #388E3C;
    box-shadow: var(--ezs-elevation-1);
}

/* Info Button - Text variant */
.ezs-app .ezs-btn-info {
    color: var(--ezs-info-text);
    background: transparent;
}

.ezs-app .ezs-btn-info:hover {
    background: rgba(25, 118, 210, 0.08);
    color: var(--ezs-info-text);
}

/* Info Filled Button */
.ezs-app .ezs-btn-filled.ezs-btn-info,
.ezs-app .ezs-btn-contained.ezs-btn-info {
    background: var(--ezs-info);
    color: white;
    box-shadow: none;
}

.ezs-app .ezs-btn-filled.ezs-btn-info:hover,
.ezs-app .ezs-btn-contained.ezs-btn-info:hover {
    background: #1976D2;
    box-shadow: var(--ezs-elevation-1);
}

/* ====================================================================
   OUTLINED ALERT BUTTONS
   Outlined variants for alert-themed buttons with matching border colors
   ==================================================================== */

/* Warning Outlined Button */
.ezs-app .ezs-btn-outlined.ezs-btn-warning {
    color: var(--ezs-warning-text);
    border-color: var(--ezs-warning-text);
    background: transparent;
}

.ezs-app .ezs-btn-outlined.ezs-btn-warning:hover {
    background: rgba(245, 124, 0, 0.08);
    border-color: var(--ezs-warning-text);
}

/* Danger Outlined Button */
.ezs-app .ezs-btn-outlined.ezs-btn-danger {
    color: var(--ezs-error-text);
    border-color: var(--ezs-error-text);
    background: transparent;
}

.ezs-app .ezs-btn-outlined.ezs-btn-danger:hover {
    background: rgba(198, 40, 40, 0.08);
    border-color: var(--ezs-error-text);
}

/* Success Outlined Button */
.ezs-app .ezs-btn-outlined.ezs-btn-success {
    color: var(--ezs-success-text);
    border-color: var(--ezs-success-text);
    background: transparent;
}

.ezs-app .ezs-btn-outlined.ezs-btn-success:hover {
    background: rgba(46, 125, 50, 0.08);
    border-color: var(--ezs-success-text);
}

/* Info Outlined Button */
.ezs-app .ezs-btn-outlined.ezs-btn-info {
    color: var(--ezs-info-text);
    border-color: var(--ezs-info-text);
    background: transparent;
}

.ezs-app .ezs-btn-outlined.ezs-btn-info:hover {
    background: rgba(25, 118, 210, 0.08);
    border-color: var(--ezs-info-text);
}

/* Floating Action Button (FAB) - M3 Design */
.ezs-app .ezs-fab {
    position: fixed;
    bottom: 24px;
    right: 24px;
    width: 56px;
    height: 56px;
    border-radius: 16px;
    background: var(--ezs-primary-500);
    color: white;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15), 0 1px 3px rgba(0, 0, 0, 0.3);
    transition: all var(--ezs-motion-duration-short4) var(--ezs-motion-easing-standard);
    z-index: 1000;
}

.ezs-app .ezs-fab:hover {
    background: var(--ezs-primary-600);
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2), 0 2px 4px rgba(0, 0, 0, 0.3);
    transform: translateY(-2px);
}

.ezs-app .ezs-fab:active {
    transform: translateY(0);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.3);
}

.ezs-app .ezs-fab .material-icons {
    font-size: 24px;
}

/* FAB Surface variant - Uses surface container color */
.ezs-app .ezs-fab-surface {
    background: var(--ezs-surface-container-high);
    color: var(--ezs-on-surface);
    box-shadow: 0 4px 8px var(--ezs-shadow-color), 0 1px 3px var(--ezs-shadow-color);
}

.ezs-app .ezs-fab-surface:hover {
    background: var(--ezs-surface-container-highest);
    box-shadow: 0 6px 12px var(--ezs-shadow-color), 0 2px 4px var(--ezs-shadow-color);
}

/* Small FAB variant */
.ezs-app .ezs-fab-small {
    width: 40px;
    height: 40px;
    border-radius: 12px;
}

.ezs-app .ezs-fab-small .material-icons {
    font-size: 20px;
}

/* Mobile positioning adjustments */
@media (max-width: 639px) {
    .ezs-app .ezs-fab {
        bottom: 16px;
        right: 16px;
    }
}

/* ====================================================================
   CHIP COMPONENTS
   Tags, badges, and status indicators
   ==================================================================== */

.ezs-app .ezs-chip {
    display: inline-flex;
    align-items: center;
    padding: 0 var(--ezs-space-1);
    height: 24px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 500;
    background: var(--ezs-surface-container-low);
    color: var(--ezs-on-surface);
    white-space: nowrap;
    width: fit-content;
}

/* Chip Variants */
.ezs-app .ezs-chip.ezs-chip-secondary {
    background: var(--ezs-surface-hover);
    color: var(--ezs-on-surface);
    border: 1px solid var(--ezs-outline);
}

.ezs-app .ezs-chip.ezs-customer {
    background: var(--ezs-primary-500);
    color: white;
}

.ezs-app .ezs-chip.ezs-active {
    background: var(--ezs-success);
    color: white;
}

/* Sensor Status Chip Variants */
.ezs-app .ezs-chip.ezs-sensor-good {
    background: var(--ezs-success-surface);
    color: var(--ezs-success-text);
}

.ezs-app .ezs-chip.ezs-sensor-medium {
    background: var(--ezs-warning-surface);
    color: var(--ezs-warning-text);
}

.ezs-app .ezs-chip.ezs-sensor-warning {
    background: var(--ezs-error-surface);
    color: var(--ezs-error-text);
}

.ezs-app .ezs-chip.ezs-sensor-offline {
    background: var(--ezs-surface-container-high);
    color: var(--ezs-on-surface-variant);
}

/* Inverse Chip Variants - solid background with light text */
.ezs-app .ezs-chip.ezs-chip-warning-inverse {
    background: var(--ezs-warning, #E65100);
    color: white;
    border: none;
}

.ezs-app .ezs-chip.ezs-chip-error-inverse {
    background: var(--ezs-error, #d32f2f);
    color: white;
    border: none;
}

.ezs-app .ezs-chip.ezs-chip-success-inverse {
    background: var(--ezs-success, #2e7d32);
    color: white;
    border: none;
}

.ezs-app .ezs-chip.ezs-chip-info-inverse {
    background: var(--ezs-primary-500, #1976d2);
    color: white;
    border: none;
}

/* Removable Chip - With close button */
.ezs-app .ezs-chip-removable {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding-right: 4px;
}

.ezs-app .ezs-chip-remove {
    background: transparent;
    border: none;
    padding: 0;
    margin: 0;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    width: 16px;
    height: 16px;
    opacity: 0.7;
    transition: all var(--ezs-motion-duration-short3) var(--ezs-motion-easing-standard);
}

.ezs-app .ezs-chip-remove:hover {
    opacity: 1;
    background: rgba(0, 0, 0, 0.1);
}

.ezs-app .ezs-chip.ezs-customer .ezs-chip-remove:hover {
    background: rgba(255, 255, 255, 0.2);
}

.ezs-app .ezs-chip-remove .material-icons {
    font-size: 14px;
    color: inherit;
}

/* ====================================================================
   LAYOUT UTILITIES
   Reusable grid and layout helpers
   ==================================================================== */

/* Main Container - Standard max-width for all pages */
.ezs-app .ezs-container {
    max-width: 1440px;
    margin: 0 auto;
    padding: var(--ezs-space-5) var(--ezs-space-3);
}

/* Two Column Grid */
.ezs-app .ezs-two-col-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--ezs-space-3);
    margin-bottom: var(--ezs-space-3);
}

/* Cards Grid - Auto-fit responsive grid */
.ezs-app .ezs-cards-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
    gap: var(--ezs-space-3);
    margin-bottom: var(--ezs-space-3);
}

/* Form Row - Two column form layout */
.ezs-app .ezs-form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--ezs-space-4);
}

/* ====================================================================
   CARD COMPONENT (Base)
   Generic card container for content grouping
   ==================================================================== */

.ezs-app .ezs-card {
    background: var(--ezs-surface-container);
    border-radius: var(--ezs-radius-md);
    box-shadow: var(--ezs-elevation-1);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: box-shadow var(--ezs-motion-duration-short4) var(--ezs-motion-easing-standard);
}

.ezs-app .ezs-card:hover {
    box-shadow: var(--ezs-elevation-2);
}

.ezs-app .ezs-card-header {
    padding: var(--ezs-space-3);
    border-bottom: 1px solid var(--ezs-outline);
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: var(--ezs-surface-container-low);
}

.ezs-app .ezs-card-title {
    font-size: var(--ezs-typescale-title-large-size);
    font-weight: var(--ezs-typescale-title-medium-weight);
    color: var(--ezs-on-surface);
    margin: 0;
}

.ezs-app .ezs-card-subtitle {
    font-size: var(--ezs-typescale-body-medium-size);
    color: var(--ezs-on-surface-variant);
    margin: 0;
}

.ezs-app .ezs-card-content {
    padding: var(--ezs-space-4);
    flex: 1;
}

.ezs-app .ezs-card-actions {
    padding: var(--ezs-space-3);
    border-top: 1px solid var(--ezs-outline);
    display: flex;
    justify-content: flex-end;
    gap: var(--ezs-space-2);
}

/* ====================================================================
   DATA CARD COMPONENT
   Modern card component for data display with scrollable content
   ==================================================================== */

.ezs-app .ezs-data-card {
    background: var(--ezs-surface-container);
    border-radius: var(--ezs-radius-md);
    box-shadow: var(--ezs-elevation-1);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: box-shadow var(--ezs-motion-duration-short4) var(--ezs-motion-easing-standard);
}

.ezs-app .ezs-data-card:hover {
    box-shadow: var(--ezs-elevation-2);
}

.ezs-app .ezs-data-card-header {
    padding: var(--ezs-space-3);
    border-bottom: 1px solid var(--ezs-outline);
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: var(--ezs-surface-container-low);
}

.ezs-app .ezs-data-card-title {
    font-size: var(--ezs-typescale-title-large-size);
    font-weight: var(--ezs-typescale-title-medium-weight);
    color: var(--ezs-on-surface);
    display: flex;
    align-items: center;
    gap: var(--ezs-space-1);
}

.ezs-app .ezs-data-card-title .material-icons {
    font-size: 24px;
    color: var(--ezs-on-surface-variant);
}

.ezs-app .ezs-data-card-count {
    background: var(--ezs-primary-100);
    color: var(--ezs-primary-700);
    padding: 2px 8px;
    border-radius: var(--ezs-radius-pill);
    font-size: var(--ezs-typescale-label-small-size);
    font-weight: 600;
}

.ezs-app .ezs-data-card-content {
    padding: var(--ezs-space-3);
    max-height: 400px;
    overflow-y: auto;
    flex: 1;
    display: flex;
    flex-direction: column;
}

/* Data Card Scrollbar Styling */
.ezs-app .ezs-data-card-content::-webkit-scrollbar {
    width: 8px;
}

.ezs-app .ezs-data-card-content::-webkit-scrollbar-track {
    background: var(--ezs-surface-container-low);
    border-radius: 4px;
}

.ezs-app .ezs-data-card-content::-webkit-scrollbar-thumb {
    background: var(--ezs-outline);
    border-radius: 4px;
}

.ezs-app .ezs-data-card-content::-webkit-scrollbar-thumb:hover {
    background: var(--ezs-outline-variant);
}

/* ====================================================================
   FORM COMPONENTS
   Material Design 3 form inputs
   ==================================================================== */

/* Form Field Container */
.ezs-app .ezs-form-field {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-bottom: var(--ezs-space-2);
}

/* Form Labels */
.ezs-app .ezs-form-label {
    font-size: var(--ezs-typescale-body-medium-size);
    font-weight: var(--ezs-typescale-label-large-weight);
    color: var(--ezs-on-surface);
    line-height: var(--ezs-typescale-body-medium-line-height);
}

/* Text Input - M3 Outlined Style */
.ezs-app .ezs-text-input {
    height: 44px;
    padding: 0 var(--ezs-space-2);
    border: 1px solid var(--ezs-input-border);
    border-radius: var(--ezs-radius-sm);
    background: var(--ezs-surface-container);
    color: var(--ezs-on-surface);
    font-size: var(--ezs-typescale-body-large-size);
    font-family: 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    transition: border-color var(--ezs-motion-duration-short3) var(--ezs-motion-easing-standard),
                box-shadow var(--ezs-motion-duration-short3) var(--ezs-motion-easing-standard);
}

.ezs-app .ezs-text-input:hover {
    border-color: var(--ezs-input-border-hover);
}

.ezs-app .ezs-text-input:focus {
    outline: none;
    border-color: var(--ezs-input-border-focus);
    box-shadow: var(--ezs-focus-ring);
}

.ezs-app .ezs-text-input::placeholder {
    color: var(--ezs-on-surface-muted);
}

/* Select Dropdown - M3 Outlined Style */
.ezs-app .ezs-select {
    box-sizing: border-box !important;
    height: 44px;
    padding: 0 var(--ezs-space-2);
    border: 1px solid var(--ezs-input-border);
    border-radius: var(--ezs-radius-sm);
    background: var(--ezs-surface-container);
    color: var(--ezs-on-surface);
    font-size: var(--ezs-typescale-body-large-size);
    font-family: 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    cursor: pointer;
    transition: border-color var(--ezs-motion-duration-short3) var(--ezs-motion-easing-standard),
                box-shadow var(--ezs-motion-duration-short3) var(--ezs-motion-easing-standard);
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath fill='%23757575' d='M7 10l5 5 5-5z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    padding-right: 40px;
}

.ezs-app .ezs-select:hover {
    border-color: var(--ezs-input-border-hover);
}

.ezs-app .ezs-select:focus {
    outline: none;
    border-color: var(--ezs-input-border-focus);
    box-shadow: var(--ezs-focus-ring);
}

/* Textarea - Override height and add vertical padding */
.ezs-app textarea.ezs-select {
    height: auto;
    min-height: 80px;
    padding: var(--ezs-space-2) var(--ezs-space-2);
    resize: vertical;
}

/* Textarea - M3 Outlined Style */
.ezs-app .ezs-textarea {
    width: 100%;
    min-height: 100px;
    padding: var(--ezs-space-2);
    border: 1px solid var(--ezs-input-border);
    border-radius: var(--ezs-radius-sm);
    background: var(--ezs-surface-container);
    color: var(--ezs-on-surface);
    font-size: var(--ezs-typescale-body-large-size);
    font-family: 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    resize: vertical;
    box-sizing: border-box;
    transition: border-color var(--ezs-motion-duration-short3) var(--ezs-motion-easing-standard),
                box-shadow var(--ezs-motion-duration-short3) var(--ezs-motion-easing-standard);
}

.ezs-app .ezs-textarea:hover {
    border-color: var(--ezs-input-border-hover);
}

.ezs-app .ezs-textarea:focus {
    outline: none;
    border-color: var(--ezs-input-border-focus);
    box-shadow: var(--ezs-focus-ring);
}

.ezs-app .ezs-textarea::placeholder {
    color: var(--ezs-on-surface-muted);
}

/* Checkbox - M3 Style */
.ezs-app .ezs-checkbox-container {
    display: inline-flex;
    align-items: center;
    gap: var(--ezs-space-1);
    cursor: pointer;
}

.ezs-app .ezs-checkbox {
    width: 18px;
    height: 18px;
    border: 2px solid var(--ezs-outline-variant);
    border-radius: 2px;
    appearance: none;
    cursor: pointer;
    position: relative;
    transition: all var(--ezs-motion-duration-short3) var(--ezs-motion-easing-standard);
    background: var(--ezs-surface-container);
}

.ezs-app .ezs-checkbox:hover {
    border-color: var(--ezs-on-surface);
}

.ezs-app .ezs-checkbox:checked {
    background: var(--ezs-primary-500);
    border-color: var(--ezs-primary-500);
}

.ezs-app .ezs-checkbox:checked::after {
    content: '';
    position: absolute;
    left: 5px;
    top: 2px;
    width: 4px;
    height: 8px;
    border: solid white;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

.ezs-app .ezs-checkbox:focus {
    outline: none;
    box-shadow: var(--ezs-focus-ring);
}

.ezs-app .ezs-checkbox-label {
    font-size: var(--ezs-typescale-body-medium-size);
    color: var(--ezs-on-surface);
    cursor: pointer;
    user-select: none;
}

/* Compact Input Variant - For toolbars and filters */
.ezs-app .ezs-text-input-compact,
.ezs-app .ezs-select-compact {
    height: 40px;
    font-size: var(--ezs-typescale-body-medium-size);
}

/* ====================================================================
   DIALOG COMPONENTS
   Material Design 3 dialogs for confirmations and alerts
   ==================================================================== */

/* Dialog Backdrop - Semi-transparent overlay */
.ezs-app .ezs-dialog-backdrop,
.ezs-app.ezs-dialog-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.4);
    z-index: var(--ezs-z-modal-backdrop);
    display: none;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity var(--ezs-motion-duration-medium2) var(--ezs-motion-easing-standard);
}

.ezs-app .ezs-dialog-backdrop.ezs-dialog-open,
.ezs-app.ezs-dialog-backdrop.ezs-dialog-open {
    display: flex;
    opacity: 1;
}

/* Prevent body scroll when dialog is open */
body:has(.ezs-dialog-open) {
    overflow: hidden;
}

/* Dialog Container - Main dialog box */
/* M3 Fade Through transition: scale from 0.8 to 1.0 with fade */
.ezs-app .ezs-dialog,
.ezs-app.ezs-dialog-backdrop .ezs-dialog {
    position: relative;
    background: var(--ezs-surface-container-high);
    border-radius: var(--ezs-radius-xl);
    box-shadow: var(--ezs-elevation-3);
    min-width: 280px;
    max-width: 400px;
    width: calc(100vw - 48px);
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    z-index: var(--ezs-z-modal);
    transform: scale(0.8);
    opacity: 0;
    transition: transform var(--ezs-motion-duration-medium2) var(--ezs-motion-easing-emphasized-accelerate),
                opacity var(--ezs-motion-duration-medium2) var(--ezs-motion-easing-standard);
}

.ezs-app .ezs-dialog-backdrop.ezs-dialog-open .ezs-dialog,
.ezs-app.ezs-dialog-backdrop.ezs-dialog-open .ezs-dialog {
    transform: scale(1);
    opacity: 1;
    transition: transform var(--ezs-motion-duration-medium2) var(--ezs-motion-easing-emphasized),
                opacity var(--ezs-motion-duration-medium2) var(--ezs-motion-easing-emphasized);
}

/* Dialog Icon - Optional icon at top */
.ezs-app .ezs-dialog-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--ezs-space-3) var(--ezs-space-3) var(--ezs-space-2);
}

.ezs-app .ezs-dialog-icon .material-icons {
    font-size: 24px;
    color: var(--ezs-on-surface-variant);
}

/* Icon variants for different dialog types */
.ezs-app .ezs-dialog-icon.ezs-dialog-icon-error .material-icons {
    color: var(--ezs-error);
}

.ezs-app .ezs-dialog-icon.ezs-dialog-icon-warning .material-icons {
    color: var(--ezs-warning);
}

.ezs-app .ezs-dialog-icon.ezs-dialog-icon-success .material-icons {
    color: var(--ezs-success);
}

.ezs-app .ezs-dialog-icon.ezs-dialog-icon-info .material-icons {
    color: var(--ezs-primary-500);
}

/* Dialog Header - Title section */
.ezs-app .ezs-dialog-header {
    padding: 0 var(--ezs-space-3) var(--ezs-space-2);
    text-align: center;
}

/* When there's no icon, add top padding to header */
.ezs-app .ezs-dialog:not(:has(.ezs-dialog-icon)) .ezs-dialog-header {
    padding-top: var(--ezs-space-3);
}

.ezs-app .ezs-dialog-title {
    font-size: var(--ezs-typescale-headline-small-size);
    font-weight: var(--ezs-typescale-headline-small-weight);
    line-height: var(--ezs-typescale-headline-small-line-height);
    color: var(--ezs-on-surface);
    margin: 0;
}

/* Dialog Content - Body text */
.ezs-app .ezs-dialog-content {
    padding: 0 var(--ezs-space-3) var(--ezs-space-3);
    overflow-y: auto;
    flex: 1;
    text-align: left;
}

.ezs-app .ezs-dialog-content p {
    font-size: var(--ezs-typescale-body-medium-size);
    line-height: var(--ezs-typescale-body-medium-line-height);
    color: var(--ezs-on-surface-variant);
    margin: 0 0 var(--ezs-space-2) 0;
}

.ezs-app .ezs-dialog-content p:last-child {
    margin-bottom: 0;
}

.ezs-app .ezs-dialog-content ul,
.ezs-app .ezs-dialog-content ol {
    margin: 0 0 var(--ezs-space-2) 0;
    padding-left: 20px;
    color: var(--ezs-on-surface-variant);
    font-size: var(--ezs-typescale-body-medium-size);
    line-height: var(--ezs-typescale-body-medium-line-height);
}

.ezs-app .ezs-dialog-content ul {
    list-style: none;
    padding-left: 0;
}

.ezs-app .ezs-dialog-content ul li {
    padding: 4px 0 4px 24px;
    position: relative;
}

.ezs-app .ezs-dialog-content ul li::before {
    font-family: 'Material Icons';
    content: 'check_circle';
    font-size: 15px;
    color: var(--ezs-primary, #1998D5);
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
}

.ezs-app .ezs-dialog-content ol li {
    padding: 4px 0;
}

.ezs-app .ezs-dialog-content ul:last-child,
.ezs-app .ezs-dialog-content ol:last-child {
    margin-bottom: 0;
}

/* Optional centered content modifier for simple dialogs */
.ezs-app .ezs-dialog-content-centered {
    text-align: center;
}

/* Dialog Actions - Button container */
.ezs-app .ezs-dialog-actions {
    padding: var(--ezs-space-3);
    display: flex;
    justify-content: flex-end;
    gap: var(--ezs-space-1);
}

/* Dialog-specific button styles */
.ezs-app .ezs-dialog-actions .ezs-btn {
    height: 40px;
    padding: 0 var(--ezs-space-3);
    border-radius: 20px;
    min-width: 64px;
    text-transform: none;
    font-size: var(--ezs-typescale-label-large-size);
    font-weight: var(--ezs-typescale-label-large-weight);
}

/* Dialog buttons should never have elevation - use state layers only */
.ezs-app .ezs-dialog-actions .ezs-btn-text:hover {
    background: rgba(25, 152, 213, 0.08);
    box-shadow: none;
}

.ezs-app .ezs-dialog-actions .ezs-btn-tonal:hover {
    box-shadow: none;
}

/* Full-width stacked buttons for mobile */
.ezs-app .ezs-dialog-actions.ezs-dialog-actions-stacked {
    flex-direction: column-reverse;
}

.ezs-app .ezs-dialog-actions.ezs-dialog-actions-stacked .ezs-btn {
    width: 100%;
    justify-content: center;
}

/* Mobile responsive */
@media (max-width: 639px) {
    .ezs-app .ezs-dialog {
        min-width: calc(100vw - 32px);
        max-width: calc(100vw - 32px);
        margin: 16px;
    }

    /* Auto-stack buttons on mobile */
    .ezs-app .ezs-dialog-actions {
        flex-direction: column-reverse;
    }

    .ezs-app .ezs-dialog-actions .ezs-btn {
        width: 100%;
        justify-content: center;
    }
}

/* ====================================================================
   ALERT COMPONENTS
   Material Design 3 alerts/banners for info, warning, error, success messages
   Uses fixed light backgrounds for consistent readability in all themes
   ==================================================================== */

/* Base Alert Container */
.ezs-app .ezs-alert {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px;
    border-radius: 8px;
    font-size: var(--ezs-typescale-body-medium-size);
    line-height: var(--ezs-typescale-body-medium-line-height);
}

/* Alert with emphasis - 4px left border */
.ezs-app .ezs-alert-emphasis {
    border-left: 4px solid;
    border-radius: 4px;
}

/* Alert icon - Material Icons */
.ezs-app .ezs-alert-icon {
    font-size: 20px;
    flex-shrink: 0;
}

/* Alert content area */
.ezs-app .ezs-alert-content {
    flex: 1;
    min-width: 0;
}

.ezs-app .ezs-alert-content p {
    margin: 0;
    font-size: var(--ezs-typescale-body-medium-size);
    line-height: 1.5;
}

.ezs-app .ezs-alert-content p:not(:last-child) {
    margin-bottom: 8px;
}

/* Alert actions - for buttons or links */
.ezs-app .ezs-alert-actions {
    flex-shrink: 0;
    display: flex;
    gap: 8px;
}

/* ====================================================================
   ALERT VARIANTS - Fixed Light Backgrounds
   These use fixed colors to ensure readability in both light/dark modes
   ==================================================================== */

/* Info Alert - Blue */
.ezs-app .ezs-alert-info {
    background-color: #E3F2FD;
}

.ezs-app .ezs-alert-info.ezs-alert-emphasis {
    border-left-color: #1976D2;
}

.ezs-app .ezs-alert-info .ezs-alert-icon {
    color: #1976D2;
}

.ezs-app .ezs-alert-info,
.ezs-app .ezs-alert-info .ezs-alert-content,
.ezs-app .ezs-alert-info .ezs-alert-content p {
    color: #01579B; /* Dark blue - readable on light blue bg */
}

/* Standard border variant for info */
.ezs-app .ezs-alert-info:not(.ezs-alert-emphasis) {
    border: 1px solid #90CAF9;
}

/* Warning Alert - Orange/Yellow */
.ezs-app .ezs-alert-warning {
    background-color: #FFF3E0;
}

.ezs-app .ezs-alert-warning.ezs-alert-emphasis {
    border-left-color: #FBC02D;
}

.ezs-app .ezs-alert-warning .ezs-alert-icon {
    color: #E65100;
}

.ezs-app .ezs-alert-warning,
.ezs-app .ezs-alert-warning .ezs-alert-content,
.ezs-app .ezs-alert-warning .ezs-alert-content p {
    color: #E65100; /* Dark orange - readable on light orange bg */
}

/* Standard border variant for warning */
.ezs-app .ezs-alert-warning:not(.ezs-alert-emphasis) {
    border: 1px solid #FFB74D;
}

/* Error Alert - Red */
.ezs-app .ezs-alert-error {
    background-color: #FFEBEE;
}

.ezs-app .ezs-alert-error.ezs-alert-emphasis {
    border-left-color: #D32F2F;
}

.ezs-app .ezs-alert-error .ezs-alert-icon {
    color: #D32F2F;
}

.ezs-app .ezs-alert-error,
.ezs-app .ezs-alert-error .ezs-alert-content,
.ezs-app .ezs-alert-error .ezs-alert-content p {
    color: #5F1410; /* Dark red - readable on light red bg */
}

/* Standard border variant for error */
.ezs-app .ezs-alert-error:not(.ezs-alert-emphasis) {
    border: 1px solid #EF9A9A;
}

/* Success Alert - Green */
.ezs-app .ezs-alert-success {
    background-color: #E8F5E9;
}

.ezs-app .ezs-alert-success.ezs-alert-emphasis {
    border-left-color: #2E7D32;
}

.ezs-app .ezs-alert-success .ezs-alert-icon {
    color: #2E7D32;
}

.ezs-app .ezs-alert-success,
.ezs-app .ezs-alert-success .ezs-alert-content,
.ezs-app .ezs-alert-success .ezs-alert-content p {
    color: #1B5E20; /* Dark green - readable on light green bg */
}

/* Standard border variant for success */
.ezs-app .ezs-alert-success:not(.ezs-alert-emphasis) {
    border: 1px solid #A5D6A7;
}

/* ====================================================================
   UTILITY ANIMATIONS
   Reusable animation classes
   ==================================================================== */

@keyframes ezs-spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

.ezs-app .ezs-spinning {
    animation: ezs-spin 1s linear infinite;
}

.ezs-app .ezs-refresh-btn:disabled {
    opacity: 0.6;
    cursor: wait;
}

/* ====================================================================
   TOGGLE SWITCH
   Material Design 3 toggle switch component
   ==================================================================== */

.ezs-app .ezs-switch-label {
    font-size: var(--ezs-typescale-label-medium-size, 12px);
    color: var(--ezs-on-surface-variant, #49454f);
    white-space: nowrap;
}

.ezs-app .ezs-switch {
    position: relative;
    display: inline-block;
    width: 44px;
    height: 24px;
    flex-shrink: 0;
}

.ezs-app .ezs-switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.ezs-app .ezs-switch-slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: var(--ezs-surface-container-highest, #e6e0e9);
    border: 2px solid var(--ezs-outline, #79747e);
    border-radius: 12px;
    transition: background-color 0.2s ease,
                border-color 0.2s ease;
}

.ezs-app .ezs-switch-slider:before {
    position: absolute;
    content: "";
    height: 14px;
    width: 14px;
    left: 3px;
    top: 50%;
    transform: translateY(-50%);
    background-color: var(--ezs-on-surface-variant, #49454f);
    border-radius: 50%;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
    transition: transform 0.2s ease,
                background-color 0.2s ease,
                width 0.2s ease,
                height 0.2s ease,
                left 0.2s ease;
}

.ezs-app .ezs-switch input:checked + .ezs-switch-slider {
    background-color: var(--ezs-primary-500, #1998d5);
    border-color: var(--ezs-primary-500, #1998d5);
}

.ezs-app .ezs-switch input:checked + .ezs-switch-slider:before {
    left: calc(100% - 19px);
    transform: translateY(-50%);
    background-color: #ffffff;
    width: 16px;
    height: 16px;
}

.ezs-app .ezs-switch input:focus + .ezs-switch-slider {
    box-shadow: 0 0 0 3px rgba(25, 152, 213, 0.25);
}

.ezs-app .ezs-switch:hover .ezs-switch-slider:before {
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 0 0 6px rgba(0, 0, 0, 0.08);
}

/* ====================================================================
   RESPONSIVE BEHAVIOR
   Mobile-first responsive adjustments
   ==================================================================== */

/* Tablet: 768px - 1023px */
@media (max-width: 1023px) {
    .ezs-app .ezs-two-col-grid {
        grid-template-columns: 1fr;
    }
}

/* Mobile: 640px - 767px */
@media (max-width: 767px) {
    .ezs-app .ezs-cards-grid {
        grid-template-columns: 1fr;
    }
}

/* Mobile-sm: Below 640px */
@media (max-width: 639px) {
    .ezs-app .ezs-container {
        padding: var(--ezs-space-2) var(--ezs-space-2);
    }

    .ezs-app .ezs-form-row {
        grid-template-columns: 1fr;
    }

    /* Card responsive padding */
    .ezs-app .ezs-card-header,
    .ezs-app .ezs-card-content,
    .ezs-app .ezs-card-actions {
        padding: var(--ezs-space-2);
    }

    /* Data card responsive padding */
    .ezs-app .ezs-data-card-header,
    .ezs-app .ezs-data-card-content {
        padding: var(--ezs-space-2);
    }

    /* Stack card header title and action button on mobile */
    .ezs-app .ezs-data-card-header {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--ezs-space-2);
    }

    /* Remove auto margin on header buttons so they align left on mobile */
    .ezs-app .ezs-btn-header {
        margin-left: 0;
    }
}