/* =====================================================
   AusCycling Brand Styles
   =====================================================
   This file contains brand-specific customizations that
   work alongside DevExpress Blazor themes.
   
   STRUCTURE:
   1. Brand Constants (colors that don't change)
   2. Layout & Design Tokens (spacing, radius, etc.)
   3. Light Mode Theme
   4. Dark Mode Theme
   5. Global DevExpress Overrides
   ===================================================== */

/* =====================================================
   1. BRAND CONSTANTS
   These colors represent the AusCycling brand and
   are used as base values for theme-specific variants.
   ===================================================== */

:root {
    /* Brand Identity Colors */
    --ac-brand-teal: #1B4D3E;
    --ac-brand-green: #00A651;
    --ac-brand-yellow: #C5A500;
    --ac-brand-blue: #0077B6;
    --ac-brand-red: #E63946;
}

/* =====================================================
   2. LAYOUT & DESIGN TOKENS
   These values are consistent across light/dark modes.
   ===================================================== */

:root {
    /* Layout Dimensions */
    --ac-header-height: 72px;
    --ac-footer-height: 54px;
    --ac-sidebar-width: 260px;
    --ac-sidebar-collapsed-width: 64px;
    
    /* Border Radius (matches Fluent theme) */
    --ac-radius-sm: 4px;
    --ac-radius: 8px;
    --ac-radius-md: 12px;
    --ac-radius-lg: 16px;
    --ac-radius-full: 9999px;
    
    /* Spacing Scale */
    --ac-spacing-xs: 4px;
    --ac-spacing-sm: 8px;
    --ac-spacing-md: 16px;
    --ac-spacing-lg: 24px;
    --ac-spacing-xl: 32px;
    
    /* Transitions */
    --ac-transition-fast: 150ms ease;
    --ac-transition: 200ms ease;
    --ac-transition-slow: 300ms ease;
    
    /* Z-Index Scale */
    --ac-z-dropdown: 1000;
    --ac-z-sticky: 1020;
    --ac-z-fixed: 1030;
    --ac-z-modal-backdrop: 1040;
    --ac-z-modal: 1050;
    --ac-z-tooltip: 1070;
}

/* =====================================================
   3. LIGHT MODE THEME (Default)
   ===================================================== */

:root {
    /* Primary Colors */
    --ac-primary: #1B4D3E;
    --ac-primary-dark: #153D32;
    --ac-primary-light: #235F4D;
    
    /* Secondary Colors */
    --ac-secondary: #00A651;
    --ac-secondary-dark: #008C45;
    --ac-secondary-light: #33B873;
    
    /* Accent Colors */
    --ac-accent-yellow: #C5A500;
    --ac-accent-blue: #0077B6;
    --ac-accent-red: #E63946;
    
    /* Backgrounds */
    --ac-bg: #ffffff;
    --ac-bg-secondary: #f8f9fa;
    --ac-bg-tertiary: #e9ecef;
    --ac-card-bg: #ffffff;
    
    /* Text */
    --ac-text: #212529;
    --ac-text-secondary: #6c757d;
    --ac-text-muted: #adb5bd;
    
    /* Text on Primary (for headers/banners with primary bg) */
    --ac-text-on-primary: #ffffff;
    --ac-text-on-primary-muted: rgba(255, 255, 255, 0.85);
    
    /* Borders */
    --ac-border: #dee2e6;
    --ac-border-on-primary: rgba(255, 255, 255, 0.3);
    
    /* Shadows */
    --ac-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
    --ac-shadow: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.06);
    --ac-shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1), 0 2px 4px rgba(0, 0, 0, 0.06);
    --ac-shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1), 0 4px 6px rgba(0, 0, 0, 0.05);
}

/* =====================================================
   4. DARK MODE THEME
   DevExpress themes use various selectors for dark mode:
   - Fluent Dark: adds data-bs-theme="dark" to html
   - Classic dark themes: may use .dxbl-theme-dark
   We target all possible selectors for compatibility.
   ===================================================== */

/* Dark mode selectors - cover all DevExpress dark theme variations */
[data-bs-theme="dark"],
[data-bs-theme="dark"] :root,
html[data-bs-theme="dark"],
.dxbl-theme-dark,
body.dxbl-theme-dark {
    /* Primary Colors (lighter for dark backgrounds) */
    --ac-primary: #2E7A63;
    --ac-primary-dark: #235F4D;
    --ac-primary-light: #3A9678;
    
    /* Secondary Colors */
    --ac-secondary: #33B873;
    --ac-secondary-dark: #00A651;
    --ac-secondary-light: #5FCB8E;
    
    /* Accent Colors (same, good contrast on dark) */
    --ac-accent-yellow: #C5A500;
    --ac-accent-blue: #0077B6;
    --ac-accent-red: #E63946;
    
    /* Backgrounds */
    --ac-bg: #1e1e1e;
    --ac-bg-secondary: #252525;
    --ac-bg-tertiary: #2d2d2d;
    --ac-card-bg: #252525;
    
    /* Text */
    --ac-text: #e4e4e4;
    --ac-text-secondary: #a0a0a0;
    --ac-text-muted: #6e6e6e;
    
    /* Text on Primary (same in dark mode - white on teal) */
    --ac-text-on-primary: #ffffff;
    --ac-text-on-primary-muted: rgba(255, 255, 255, 0.85);
    
    /* Borders */
    --ac-border: #404040;
    --ac-border-on-primary: rgba(255, 255, 255, 0.3);
    
    /* Shadows (more subtle on dark backgrounds) */
    --ac-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
    --ac-shadow: 0 1px 3px rgba(0, 0, 0, 0.4), 0 1px 2px rgba(0, 0, 0, 0.3);
    --ac-shadow-md: 0 4px 6px rgba(0, 0, 0, 0.4), 0 2px 4px rgba(0, 0, 0, 0.3);
    --ac-shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.4), 0 4px 6px rgba(0, 0, 0, 0.3);
}

/* =====================================================
   5. GLOBAL DEVEXPRESS COMPONENT OVERRIDES
   These styles customize DevExpress components globally.
   ===================================================== */

/* Text Boxes with Full Border */
.dxbl-text-edit,
.dxbl-input-editor,
.dxbl-spin-edit,
.dxbl-date-edit,
.dxbl-combobox,
.dxbl-tagbox {
    border: 1px solid var(--ac-border) !important;
    border-radius: var(--ac-radius-sm) !important;
}

.dxbl-text-edit:focus-within,
.dxbl-input-editor:focus-within,
.dxbl-spin-edit:focus-within,
.dxbl-date-edit:focus-within,
.dxbl-combobox:focus-within,
.dxbl-tagbox:focus-within {
    border-color: var(--ac-primary) !important;
    box-shadow: 0 0 0 2px rgba(46, 122, 99, 0.25) !important;
}

.dxbl-text-edit input,
.dxbl-input-editor input,
.dxbl-spin-edit input,
.dxbl-date-edit input {
    border: none !important;
    box-shadow: none !important;
}

/* Form Layout Groups */
.dxbl-fl-group {
    border: 1px solid var(--ac-border);
    border-radius: var(--ac-radius);
    padding: var(--ac-spacing-md);
    margin-bottom: var(--ac-spacing-md);
}

.dxbl-fl-group-header {
    padding-bottom: var(--ac-spacing-sm);
    margin-bottom: var(--ac-spacing-sm);
    border-bottom: 1px solid var(--ac-border);
}

/* Read-only Inputs */
.dxbl-text-edit.dxbl-readonly,
.dxbl-input-editor[readonly] input {
    background-color: var(--ac-bg-secondary) !important;
}

[data-bs-theme="dark"] .dxbl-text-edit.dxbl-readonly,
[data-bs-theme="dark"] .dxbl-input-editor[readonly] input,
.dxbl-theme-dark .dxbl-text-edit.dxbl-readonly,
.dxbl-theme-dark .dxbl-input-editor[readonly] input {
    background-color: var(--ac-bg-tertiary) !important;
}

/* =====================================================
   6. DARK MODE EXPLICIT OVERRIDES
   For elements that don't inherit CSS variables properly
   ===================================================== */

[data-bs-theme="dark"],
.dxbl-theme-dark {
    /* Ensure body background is dark */
    background-color: var(--ac-bg) !important;
    color: var(--ac-text) !important;
}

/* Bootstrap alert overrides for dark mode */
[data-bs-theme="dark"] .alert,
.dxbl-theme-dark .alert {
    background-color: var(--ac-bg-secondary);
    border-color: var(--ac-border);
    color: var(--ac-text);
}

[data-bs-theme="dark"] .alert-info,
.dxbl-theme-dark .alert-info {
    background-color: rgba(0, 119, 182, 0.15);
    border-color: var(--ac-accent-blue);
    color: var(--ac-text);
}

[data-bs-theme="dark"] .alert-success,
.dxbl-theme-dark .alert-success {
    background-color: rgba(0, 166, 81, 0.15);
    border-color: var(--ac-secondary);
    color: var(--ac-text);
}

[data-bs-theme="dark"] .alert-warning,
.dxbl-theme-dark .alert-warning {
    background-color: rgba(197, 165, 0, 0.15);
    border-color: var(--ac-accent-yellow);
    color: var(--ac-text);
}

[data-bs-theme="dark"] .alert-danger,
.dxbl-theme-dark .alert-danger {
    background-color: rgba(230, 57, 70, 0.15);
    border-color: var(--ac-accent-red);
    color: var(--ac-text);
}

[data-bs-theme="dark"] .alert-primary,
.dxbl-theme-dark .alert-primary {
    background-color: rgba(46, 122, 99, 0.15);
    border-color: var(--ac-primary);
    color: var(--ac-text);
}

.danger-icon { color: var(--ac-accent-red); }