/* ============================================
   MATERIAL DESIGN 3 THEME OVERRIDES
   ============================================ */

/* Import Roboto font for MD3 */
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700&display=swap');

:root {
    /* MD3 Seed Color: #6C5CE7 (Purple) */
    
    /* Dynamic Light Theme based on backend --accent */
    --md-sys-color-primary: var(--accent, #603bb0);
    --md-sys-color-on-primary: #ffffff;
    --md-sys-color-primary-container: color-mix(in srgb, var(--accent, #603bb0) 15%, #ffffff);
    --md-sys-color-on-primary-container: color-mix(in srgb, var(--accent, #603bb0) 90%, #000000);
    
    --md-sys-color-secondary: color-mix(in srgb, var(--accent, #603bb0) 40%, #5e5c71);
    --md-sys-color-on-secondary: #ffffff;
    --md-sys-color-secondary-container: color-mix(in srgb, var(--accent, #603bb0) 10%, #e4dff9);
    --md-sys-color-on-secondary-container: color-mix(in srgb, var(--accent, #603bb0) 60%, #1b192c);
    
    --md-sys-color-tertiary: #7a5266;
    --md-sys-color-on-tertiary: #ffffff;
    --md-sys-color-tertiary-container: #ffd8ec;
    --md-sys-color-on-tertiary-container: #301122;
    
    --md-sys-color-error: #ba1a1a;
    --md-sys-color-on-error: #ffffff;
    --md-sys-color-error-container: #ffdad6;
    --md-sys-color-on-error-container: #410002;
    
    --md-sys-color-background: #fffbff;
    --md-sys-color-on-background: #1c1b1f;
    
    --md-sys-color-surface: #fdf8fd;
    --md-sys-color-on-surface: #1c1b1f;
    --md-sys-color-surface-variant: #e5e0ec;
    --md-sys-color-on-surface-variant: #48454e;
    --md-sys-color-outline: #79747e;
    
    --md-sys-color-surface-container-highest: #e5e0ec;
    --md-sys-color-surface-container-high: #ebe6f1;
    --md-sys-color-surface-container: #f1ecf7;
    --md-sys-color-surface-container-low: #f7f2fd;
    --md-sys-color-surface-container-lowest: #ffffff;
    
    /* Elevations (Shadows + Tint) */
    --md-sys-elevation-1: 0px 1px 2px 0px rgba(0,0,0,0.3), 0px 1px 3px 1px rgba(0,0,0,0.15);
    --md-sys-elevation-2: 0px 1px 2px 0px rgba(0,0,0,0.3), 0px 2px 6px 2px rgba(0,0,0,0.15);
    --md-sys-elevation-3: 0px 1px 3px 0px rgba(0,0,0,0.3), 0px 4px 8px 3px rgba(0,0,0,0.15);
    --md-sys-elevation-4: 0px 2px 3px 0px rgba(0,0,0,0.3), 0px 6px 10px 4px rgba(0,0,0,0.15);
    --md-sys-elevation-5: 0px 4px 4px 0px rgba(0,0,0,0.3), 0px 8px 12px 6px rgba(0,0,0,0.15);

    /* Shapes */
    --md-sys-shape-corner-none: 0px;
    --md-sys-shape-corner-extra-small: 4px;
    --md-sys-shape-corner-small: 8px;
    --md-sys-shape-corner-medium: 12px;
    --md-sys-shape-corner-large: 16px;
    --md-sys-shape-corner-extra-large: 28px;
    --md-sys-shape-corner-full: 9999px;

    /* Override existing variables for compatibility */
    --accent-hover: color-mix(in srgb, var(--accent, #603bb0) 80%, black); /* Darker primary */
    --accent-soft: var(--md-sys-color-primary-container);
    --bg-app: var(--md-sys-color-background);
    --bg-panel: var(--md-sys-color-surface-container-lowest);
    --bg-canvas-area: var(--md-sys-color-surface-container);
    --bg-card: var(--md-sys-color-surface-container-low);
    --bg-card-hover: var(--md-sys-color-surface-container-high);
    --bg-input: var(--md-sys-color-surface-container-highest);
    --text-primary: var(--md-sys-color-on-surface);
    --text-secondary: var(--md-sys-color-on-surface-variant);
    --text-muted: var(--md-sys-color-outline);
    --text-on-accent: var(--md-sys-color-on-primary);
    --border-light: var(--md-sys-color-outline);
    --border-medium: var(--md-sys-color-outline);
    
    --radius-sm: var(--md-sys-shape-corner-small);
    --radius-md: var(--md-sys-shape-corner-medium);
    --radius-lg: var(--md-sys-shape-corner-large);
    --radius-xl: var(--md-sys-shape-corner-extra-large);
}

/* ============================================
   TYPOGRAPHY
   ============================================ */
body, button, input, select, textarea {
    font-family: 'Roboto', sans-serif !important;
}

/* ============================================
   M3 COMPONENT OVERRIDES
   ============================================ */

/* Buttons (Filled) */
.btn-primary {
    background-color: var(--md-sys-color-primary) !important;
    color: var(--md-sys-color-on-primary) !important;
    border-radius: var(--md-sys-shape-corner-full) !important;
    box-shadow: var(--md-sys-elevation-1) !important;
    padding: 10px 24px !important;
    font-weight: 500 !important;
    letter-spacing: 0.1px;
}
.btn-primary:hover {
    box-shadow: var(--md-sys-elevation-2) !important;
}

/* Buttons (Tonal/Secondary) */
.btn-secondary, .btn-preview {
    background-color: var(--md-sys-color-secondary-container) !important;
    color: var(--md-sys-color-on-secondary-container) !important;
    border: none !important;
    border-radius: var(--md-sys-shape-corner-full) !important;
    padding: 10px 24px !important;
    font-weight: 500 !important;
}
.btn-secondary:hover, .btn-preview:hover {
    box-shadow: var(--md-sys-elevation-1) !important;
}

/* Icon Buttons (Standard) */
.btn-icon {
    border-radius: var(--md-sys-shape-corner-full) !important;
    color: var(--md-sys-color-on-surface-variant) !important;
    width: 40px !important;
    height: 40px !important;
}
.btn-icon:hover {
    background-color: rgba(28, 27, 31, 0.08) !important; /* State layer */
}

/* Floating Action Button (FAB) */
.mobile-fab {
    background-color: var(--md-sys-color-primary-container) !important;
    color: var(--md-sys-color-on-primary-container) !important;
    border-radius: var(--md-sys-shape-corner-large) !important;
    box-shadow: var(--md-sys-elevation-3) !important;
    width: 56px !important;
    height: 56px !important;
}
.mobile-fab:hover {
    box-shadow: var(--md-sys-elevation-4) !important;
}

/* Top App Bar */
.app-header {
    background-color: var(--md-sys-color-surface) !important;
    color: var(--md-sys-color-on-surface) !important;
    border-bottom: none !important;
    box-shadow: var(--md-sys-elevation-2) !important;
    height: 64px !important;
}

/* Cards (Elevated & Filled) */
.settings-card, .bottle-admin-card, .group-card, .widget-box {
    background-color: var(--md-sys-color-surface-container-low) !important;
    border: none !important;
    border-radius: var(--md-sys-shape-corner-medium) !important;
    box-shadow: var(--md-sys-elevation-1) !important;
}

/* Text Fields (Outlined) */
.form-input, .widget-input, .widget-select {
    background-color: transparent !important;
    border: 1px solid var(--md-sys-color-outline) !important;
    border-radius: var(--md-sys-shape-corner-extra-small) !important;
    color: var(--md-sys-color-on-surface) !important;
    padding: 16px !important; /* Larger touch target */
}
.form-input:focus, .widget-input:focus {
    border: 2px solid var(--md-sys-color-primary) !important;
    padding: 15px !important; /* adjust for border width */
    box-shadow: none !important;
}

/* Navigation Rail (Desktop) */
.admin-sidebar, .left-rail {
    background-color: var(--md-sys-color-surface) !important;
    border-right: none !important;
    box-shadow: var(--md-sys-elevation-1) !important;
}

.nav-item, .rail-tab {
    border-radius: var(--md-sys-shape-corner-full) !important;
    color: var(--md-sys-color-on-surface-variant) !important;
    font-weight: 500 !important;
    padding: 12px 16px !important;
}
.nav-item.active, .rail-tab.active {
    background-color: var(--md-sys-color-secondary-container) !important;
    color: var(--md-sys-color-on-secondary-container) !important;
}

/* Admin Save Bar (Bottom App Bar behavior) */
.save-bar {
    background-color: var(--md-sys-color-surface) !important;
    border: none !important;
    box-shadow: var(--md-sys-elevation-4) !important;
    border-radius: var(--md-sys-shape-corner-large) !important;
}

/* ============================================
   MOBILE RESPONSIVENESS (BOTTOM NAVIGATION)
   ============================================ */
@media (max-width: 768px) {
    /* Transform left rail and right panel into bottom sheets */
    .left-rail, .right-panel {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        top: auto !important;
        width: 100% !important;
        height: auto;
        max-height: 70vh;
        border-radius: var(--md-sys-shape-corner-extra-large) var(--md-sys-shape-corner-extra-large) 0 0 !important;
        box-shadow: var(--md-sys-elevation-5) !important;
        transform: translateY(100%);
        z-index: 1200 !important;
        border-top: none !important;
    }
    
    .left-rail.open, .right-panel.open {
        transform: translateY(0) !important;
    }
    
    /* Scrim/Backdrop for Bottom Sheets */
    body:has(.left-rail.open)::after,
    body:has(.right-panel.open)::after {
        content: '';
        position: fixed;
        inset: 0;
        background: rgba(0,0,0,0.4);
        z-index: 1100;
        pointer-events: auto;
    }
    
    /* Rail Tabs -> Bottom Navigation Bar style */
    .rail-tabs-capsule {
        background: transparent !important;
        justify-content: space-around;
        padding: 8px 0;
        border-bottom: 1px solid var(--md-sys-color-outline);
        border-radius: 0 !important;
        margin: 0 !important;
    }
    
    .rail-tab {
        flex-direction: column;
        gap: 4px;
        padding: 8px !important;
    }
    .rail-tab.active {
        background-color: var(--md-sys-color-secondary-container) !important;
        border-radius: 16px !important; /* M3 Nav Bar active indicator pill */
    }

    /* Toast Notification Positioning */
    .toast-container {
        bottom: auto !important;
        top: calc(var(--header-height) + 16px) !important;
        z-index: 2500 !important;
    }

    /* Admin Sidebar -> Navigation Drawer Modal */
    .admin-sidebar {
        position: fixed;
        left: 0;
        top: 0;
        bottom: 0;
        width: 300px !important;
        max-width: 80vw;
        border-radius: 0 var(--md-sys-shape-corner-extra-large) var(--md-sys-shape-corner-extra-large) 0 !important;
        transform: translateX(-100%);
        z-index: 1100;
        transition: transform 0.3s ease;
    }
    
    .admin-sidebar.open {
        transform: translateX(0);
    }
    
    /* Hamburger Menu Button for Admin */
    .admin-hamburger {
        display: block !important;
    }
}