/* Wildwood Admin Theme System
 * Theme colors are defined using CSS custom properties for easy switching.
 * Available themes: cool-blue (default), woodland-warm, fall-colors
 */

/* ========================================
   COOL BLUE THEME (Default)
   Earth-tone blues and dark grays
   ======================================== */
[data-theme="cool-blue"],
:root {
    /* Primary colors */
    --ww-primary: #3B7EA1;
    --ww-primary-dark: #2C5F7A;
    --ww-primary-light: #5A9BBF;
    
    /* Secondary - Slate */
    --ww-secondary: #5A6B75;
    --ww-secondary-dark: #485560;
    --ww-secondary-light: #7A8D98;
    
    /* Success - Teal */
    --ww-success: #3A7A7A;
    --ww-success-dark: #2C5F5F;
    --ww-success-light: #5A9E9E;
    
    /* Info - Light Slate */
    --ww-info: #6BA3C7;
    --ww-info-dark: #4A8AAD;
    --ww-info-light: #8CBCE0;
    
    /* Warning - Muted Gold */
    --ww-warning: #B89848;
    --ww-warning-dark: #9A7D35;
    --ww-warning-light: #D4B060;
    
    /* Danger - Brick */
    --ww-danger: #8C5A4A;
    --ww-danger-dark: #70483C;
    --ww-danger-light: #A87A6A;
    
    /* Accent colors */
    --ww-accent: #6BA3C7;
    --ww-accent-light: #A3CAE0;
    --ww-accent-hover: #7BB5D9;
    
    /* Background colors */
    --ww-bg-dark: #2D3A42;
    --ww-bg-medium: #3A4A55;
    --ww-bg-light: #4A5C68;
    
    /* Content background - solid white */
    --ww-content-bg: #FFFFFF;
    
    /* Login page styling - white page background with themed card */
    --ww-login-overlay: transparent;
    --ww-login-card-bg: linear-gradient(135deg, #3A4A55 0%, #2D3A42 100%);
    --ww-login-card-border: rgba(107, 163, 199, 0.5);
    --ww-login-gradient: linear-gradient(180deg, #1e3a5f 0%, #152a45 50%, #0d1f33 100%);
    --ww-login-text: #FFFFFF;
    --ww-login-text-muted: #E8E8E8;
    
    /* Text colors */
    --ww-text-light: #E8F4FA;
    --ww-text-muted: #B8D4E8;
    --ww-text-dark: #2D3A42;
    --ww-page-header: #1A252B;
    
    /* Gradients */
    --ww-gradient-sidebar: linear-gradient(180deg, #3A4A55 0%, #2D3A42 100%);
    --ww-gradient-header: linear-gradient(135deg, #4A5C68 0%, #3A4A55 100%);
    --ww-gradient-active: linear-gradient(135deg, #3B7EA1 0%, #2C5F7A 100%);
    --ww-gradient-button: linear-gradient(135deg, #3B7EA1 0%, #2C5F7A 100%);
    --ww-gradient-button-hover: linear-gradient(135deg, #5A9BBF 0%, #3B7EA1 100%);
    
    /* Border colors */
    --ww-border-accent: #6BA3C7;
    --ww-border-subtle: rgba(107, 163, 199, 0.2);
    --ww-border-submenu: rgba(107, 163, 199, 0.1);
    
    /* Hover/Active states */
    --ww-hover-bg: rgba(59, 126, 161, 0.2);
    --ww-active-parent-bg: rgba(59, 126, 161, 0.35);
    --ww-submenu-bg: rgba(0, 0, 0, 0.18);
    --ww-submenu-container-bg: rgba(0, 0, 0, 0.15);
    
    /* Scrollbar */
    --ww-scrollbar-thumb: rgba(107, 163, 199, 0.4);
    --ww-scrollbar-thumb-hover: rgba(107, 163, 199, 0.6);
    
    /* Shadows */
    --ww-shadow-sidebar: 2px 0 5px rgba(0, 0, 0, 0.25);
    --ww-shadow-header: 0 2px 4px rgba(0, 0, 0, 0.2);
    --ww-shadow-active: 0 2px 4px rgba(0, 0, 0, 0.35);
    --ww-shadow-button: 0 2px 4px rgba(0, 0, 0, 0.25);
    --ww-shadow-button-hover: 0 4px 8px rgba(0, 0, 0, 0.3);
    
    /* Card styling */
    --ww-card-footer-bg: #E8F4FA;
    --ww-card-footer-border: #B8D4E8;
    
    /* Form focus */
    --ww-focus-border: #6BA3C7;
    --ww-focus-shadow: rgba(107, 163, 199, 0.25);
    
    /* Bootstrap overrides */
    --bs-primary: #3B7EA1;
    --bs-secondary: #5A6B75;
    --bs-success: #3A7A7A;
    --bs-info: #6BA3C7;
    --bs-warning: #B89848;
    --bs-danger: #8C5A4A;
    --bs-light: #E8F0F5;
    --bs-dark: #2D3A42;
    
    --bs-primary-rgb: 59, 126, 161;
    --bs-secondary-rgb: 90, 107, 117;
    --bs-success-rgb: 58, 122, 122;
    --bs-info-rgb: 107, 163, 199;
    --bs-warning-rgb: 184, 152, 72;
    --bs-danger-rgb: 140, 90, 74;
    --bs-light-rgb: 232, 240, 245;
    --bs-dark-rgb: 45, 58, 66;
    
    --bs-body-color: #2D3A42;
    --bs-body-bg: #FFFFFF;
    --bs-border-color: #B8CCD8;
    --bs-link-color: #3B7EA1;
    --bs-link-hover-color: #2C5F7A;
}

/* ========================================
   WOODLAND WARM THEME
   Earth-tone yellows and oranges
   ======================================== */
[data-theme="woodland-warm"] {
    /* Primary colors */
    --ww-primary: #8B6914;
    --ww-primary-dark: #6B5010;
    --ww-primary-light: #C4972A;
    
    /* Secondary - Sage Green */
    --ww-secondary: #6B7B5C;
    --ww-secondary-dark: #545F48;
    --ww-secondary-light: #8A9E76;
    
    /* Success - Forest Green */
    --ww-success: #4A7C4E;
    --ww-success-dark: #3A6340;
    --ww-success-light: #6B9E6F;
    
    /* Info - Slate/Stone Blue */
    --ww-info: #5D7A8C;
    --ww-info-dark: #4A6170;
    --ww-info-light: #7A9AAD;
    
    /* Warning - Warm Amber/Gold */
    --ww-warning: #C4872A;
    --ww-warning-dark: #A06E1D;
    --ww-warning-light: #E0A850;
    
    /* Danger - Terracotta Red */
    --ww-danger: #A65D4C;
    --ww-danger-dark: #8A4A3C;
    --ww-danger-light: #C47A6A;
    
    /* Accent colors */
    --ww-accent: #D4A853;
    --ww-accent-light: #F5D78E;
    --ww-accent-hover: #F5B041;
    
    /* Background colors */
    --ww-bg-dark: #4A4035;
    --ww-bg-medium: #5D4E37;
    --ww-bg-light: #6B5B45;
    
    /* Content background - solid white */
    --ww-content-bg: #FFFFFF;
    
    /* Login page styling - white page background with themed card */
    --ww-login-overlay: transparent;
    --ww-login-card-bg: linear-gradient(135deg, #5D4E37 0%, #4A4035 100%);
    --ww-login-card-border: rgba(212, 168, 83, 0.5);
    --ww-login-gradient: linear-gradient(180deg, #1e3a5f 0%, #152a45 50%, #0d1f33 100%);
    --ww-login-text: #FFFFFF;
    --ww-login-text-muted: #E8DCC8;
    
    /* Text colors */
    --ww-text-light: #FFF8E7;
    --ww-text-muted: #E8DCC8;
    --ww-text-dark: #4A4035;
    --ww-page-header: #4A4035;
    
    /* Gradients */
    --ww-gradient-sidebar: linear-gradient(180deg, #5D4E37 0%, #4A4035 100%);
    --ww-gradient-header: linear-gradient(135deg, #6B5B45 0%, #5D4E37 100%);
    --ww-gradient-active: linear-gradient(135deg, #8B6914 0%, #6B5010 100%);
    --ww-gradient-button: linear-gradient(135deg, #8B6914 0%, #6B5010 100%);
    --ww-gradient-button-hover: linear-gradient(135deg, #C4972A 0%, #8B6914 100%);
    
    /* Border colors */
    --ww-border-accent: #D4A853;
    --ww-border-subtle: rgba(255, 200, 100, 0.15);
    --ww-border-submenu: rgba(255, 200, 100, 0.08);
    
    /* Hover/Active states */
    --ww-hover-bg: rgba(139, 105, 20, 0.2);
    --ww-active-parent-bg: rgba(139, 105, 20, 0.35);
    --ww-submenu-bg: rgba(0, 0, 0, 0.15);
    --ww-submenu-container-bg: rgba(0, 0, 0, 0.12);
    
    /* Scrollbar */
    --ww-scrollbar-thumb: rgba(255, 200, 100, 0.4);
    --ww-scrollbar-thumb-hover: rgba(255, 200, 100, 0.6);
    
    /* Shadows */
    --ww-shadow-sidebar: 2px 0 5px rgba(0, 0, 0, 0.2);
    --ww-shadow-header: 0 2px 4px rgba(0, 0, 0, 0.15);
    --ww-shadow-active: 0 2px 4px rgba(0, 0, 0, 0.3);
    --ww-shadow-button: 0 2px 4px rgba(0, 0, 0, 0.2);
    --ww-shadow-button-hover: 0 4px 8px rgba(0, 0, 0, 0.25);
    
    /* Card styling */
    --ww-card-footer-bg: #FFF8E7;
    --ww-card-footer-border: #E8DCC8;
    
    /* Form focus */
    --ww-focus-border: #D4A853;
    --ww-focus-shadow: rgba(212, 168, 83, 0.25);
    
    /* Bootstrap overrides for complete theming */
    --bs-primary: #8B6914;
    --bs-secondary: #6B7B5C;
    --bs-success: #4A7C4E;
    --bs-info: #5D7A8C;
    --bs-warning: #C4872A;
    --bs-danger: #A65D4C;
    --bs-light: #F5F0E8;
    --bs-dark: #4A4035;
    
    --bs-primary-rgb: 139, 105, 20;
    --bs-secondary-rgb: 107, 123, 92;
    --bs-success-rgb: 74, 124, 78;
    --bs-info-rgb: 93, 122, 140;
    --bs-warning-rgb: 196, 135, 42;
    --bs-danger-rgb: 166, 93, 76;
    --bs-light-rgb: 245, 240, 232;
    --bs-dark-rgb: 74, 64, 53;
    
    --bs-body-color: #4A4035;
    --bs-body-bg: #FFFFFF;
    --bs-border-color: #D4CCBC;
    --bs-link-color: #8B6914;
    --bs-link-hover-color: #6B5010;
}

/* ========================================
   MIDNIGHT DARK THEME
   Deep dark mode with accent colors
   ======================================== */
[data-theme="midnight-dark"] {
    /* Primary colors - Vibrant teal/cyan */
    --ww-primary: #00D4AA;
    --ww-primary-dark: #00A888;
    --ww-primary-light: #33DDBB;

    /* Secondary - Cool gray */
    --ww-secondary: #6B7A8F;
    --ww-secondary-dark: #4A5568;
    --ww-secondary-light: #8A9AAF;

    /* Success - Emerald */
    --ww-success: #10B981;
    --ww-success-dark: #059669;
    --ww-success-light: #34D399;

    /* Info - Electric blue */
    --ww-info: #3B82F6;
    --ww-info-dark: #2563EB;
    --ww-info-light: #60A5FA;

    /* Warning - Amber */
    --ww-warning: #F59E0B;
    --ww-warning-dark: #D97706;
    --ww-warning-light: #FBBF24;

    /* Danger - Rose */
    --ww-danger: #EF4444;
    --ww-danger-dark: #DC2626;
    --ww-danger-light: #F87171;

    /* Accent colors */
    --ww-accent: #00D4AA;
    --ww-accent-light: #5EEAD4;
    --ww-accent-hover: #14F5C6;

    /* Background colors - Deep dark */
    --ww-bg-dark: #0F172A;
    --ww-bg-medium: #1E293B;
    --ww-bg-light: #334155;

    /* Content background */
    --ww-content-bg: #0F172A;

    /* Login page styling */
    --ww-login-overlay: transparent;
    --ww-login-card-bg: linear-gradient(135deg, #1E293B 0%, #0F172A 100%);
    --ww-login-card-border: rgba(0, 212, 170, 0.3);
    --ww-login-gradient: linear-gradient(180deg, #0F172A 0%, #1E293B 50%, #0F172A 100%);
    --ww-login-text: #F1F5F9;
    --ww-login-text-muted: #94A3B8;

    /* Text colors */
    --ww-text-light: #F1F5F9;
    --ww-text-muted: #94A3B8;
    --ww-text-dark: #F1F5F9;
    --ww-page-header: #F1F5F9;

    /* Gradients */
    --ww-gradient-sidebar: linear-gradient(180deg, #1E293B 0%, #0F172A 100%);
    --ww-gradient-header: linear-gradient(135deg, #334155 0%, #1E293B 100%);
    --ww-gradient-active: linear-gradient(135deg, #00D4AA 0%, #00A888 100%);
    --ww-gradient-button: linear-gradient(135deg, #00D4AA 0%, #00A888 100%);
    --ww-gradient-button-hover: linear-gradient(135deg, #33DDBB 0%, #00D4AA 100%);

    /* Border colors */
    --ww-border-accent: #00D4AA;
    --ww-border-subtle: rgba(0, 212, 170, 0.15);
    --ww-border-submenu: rgba(0, 212, 170, 0.08);

    /* Hover/Active states */
    --ww-hover-bg: rgba(0, 212, 170, 0.15);
    --ww-active-parent-bg: rgba(0, 212, 170, 0.25);
    --ww-submenu-bg: rgba(0, 0, 0, 0.2);
    --ww-submenu-container-bg: rgba(0, 0, 0, 0.15);

    /* Scrollbar */
    --ww-scrollbar-thumb: rgba(0, 212, 170, 0.4);
    --ww-scrollbar-thumb-hover: rgba(0, 212, 170, 0.6);

    /* Shadows */
    --ww-shadow-sidebar: 2px 0 15px rgba(0, 0, 0, 0.5);
    --ww-shadow-header: 0 2px 10px rgba(0, 0, 0, 0.3);
    --ww-shadow-active: 0 4px 15px rgba(0, 212, 170, 0.3);
    --ww-shadow-button: 0 4px 15px rgba(0, 212, 170, 0.25);
    --ww-shadow-button-hover: 0 6px 20px rgba(0, 212, 170, 0.35);

    /* Card styling */
    --ww-card-footer-bg: #1E293B;
    --ww-card-footer-border: #334155;

    /* Form focus */
    --ww-focus-border: #00D4AA;
    --ww-focus-shadow: rgba(0, 212, 170, 0.25);

    /* Bootstrap overrides */
    --bs-primary: #00D4AA;
    --bs-secondary: #6B7A8F;
    --bs-success: #10B981;
    --bs-info: #3B82F6;
    --bs-warning: #F59E0B;
    --bs-danger: #EF4444;
    --bs-light: #334155;
    --bs-dark: #0F172A;

    --bs-primary-rgb: 0, 212, 170;
    --bs-secondary-rgb: 107, 122, 143;
    --bs-success-rgb: 16, 185, 129;
    --bs-info-rgb: 59, 130, 246;
    --bs-warning-rgb: 245, 158, 11;
    --bs-danger-rgb: 239, 68, 68;
    --bs-light-rgb: 51, 65, 85;
    --bs-dark-rgb: 15, 23, 42;

    --bs-body-color: #F1F5F9;
    --bs-body-bg: #0F172A;
    --bs-border-color: #334155;
    --bs-link-color: #00D4AA;
    --bs-link-hover-color: #33DDBB;
}

/* ========================================
   FALL COLORS THEME
   Earth-tone red, orange, and yellow
   ======================================== */
[data-theme="fall-colors"] {
    /* Primary colors - Rich autumn red */
    --ww-primary: #B8452A;
    --ww-primary-dark: #8B3420;
    --ww-primary-light: #D4613D;
    
    /* Secondary - Olive/Brown */
    --ww-secondary: #7A6B4A;
    --ww-secondary-dark: #5F5438;
    --ww-secondary-light: #9A8A65;
    
    /* Success - Moss Green */
    --ww-success: #5A7A4A;
    --ww-success-dark: #486038;
    --ww-success-light: #7A9E68;
    
    /* Info - Dusty Blue */
    --ww-info: #6A7A8A;
    --ww-info-dark: #546070;
    --ww-info-light: #8A9AAA;
    
    /* Warning - Burnt Orange */
    --ww-warning: #D97B3D;
    --ww-warning-dark: #B86028;
    --ww-warning-light: #E89849;
    
    /* Danger - Deep Rust */
    --ww-danger: #8C3A2A;
    --ww-danger-dark: #702E22;
    --ww-danger-light: #A85A4A;
    
    /* Accent colors - Warm orange and golden yellow */
    --ww-accent: #D97B3D;
    --ww-accent-light: #F5C16E;
    --ww-accent-hover: #E89849;
    
    /* Background colors - Deep earthy browns with red undertones */
    --ww-bg-dark: #4A2E2A;
    --ww-bg-medium: #5D3B35;
    --ww-bg-light: #6B4A42;
    
    /* Content background - solid white */
    --ww-content-bg: #FFFFFF;
    
    /* Login page styling - white page background with themed card */
    --ww-login-overlay: transparent;
    --ww-login-card-bg: linear-gradient(135deg, #5D3B35 0%, #4A2E2A 100%);
    --ww-login-card-border: rgba(217, 123, 61, 0.5);
    --ww-login-gradient: linear-gradient(180deg, #1e3a5f 0%, #152a45 50%, #0d1f33 100%);
    --ww-login-text: #FFFFFF;
    --ww-login-text-muted: #E8D8C8;
    
    /* Text colors */
    --ww-text-light: #FFF5E8;
    --ww-text-muted: #E8D8C8;
    --ww-text-dark: #4A2E2A;
    --ww-page-header: #4A2E2A;
    
    /* Gradients */
    --ww-gradient-sidebar: linear-gradient(180deg, #5D3B35 0%, #4A2E2A 100%);
    --ww-gradient-header: linear-gradient(135deg, #6B4A42 0%, #5D3B35 100%);
    --ww-gradient-active: linear-gradient(135deg, #B8452A 0%, #8B3420 100%);
    --ww-gradient-button: linear-gradient(135deg, #B8452A 0%, #8B3420 100%);
    --ww-gradient-button-hover: linear-gradient(135deg, #D4613D 0%, #B8452A 100%);
    
    /* Border colors */
    --ww-border-accent: #D97B3D;
    --ww-border-subtle: rgba(245, 193, 110, 0.18);
    --ww-border-submenu: rgba(245, 193, 110, 0.1);
    
    /* Hover/Active states */
    --ww-hover-bg: rgba(217, 123, 61, 0.22);
    --ww-active-parent-bg: rgba(184, 69, 42, 0.38);
    --ww-submenu-bg: rgba(0, 0, 0, 0.18);
    --ww-submenu-container-bg: rgba(0, 0, 0, 0.14);
    
    /* Scrollbar */
    --ww-scrollbar-thumb: rgba(245, 193, 110, 0.45);
    --ww-scrollbar-thumb-hover: rgba(245, 193, 110, 0.65);
    
    /* Shadows */
    --ww-shadow-sidebar: 2px 0 5px rgba(0, 0, 0, 0.25);
    --ww-shadow-header: 0 2px 4px rgba(0, 0, 0, 0.18);
    --ww-shadow-active: 0 2px 4px rgba(0, 0, 0, 0.35);
    --ww-shadow-button: 0 2px 4px rgba(0, 0, 0, 0.22);
    --ww-shadow-button-hover: 0 4px 8px rgba(0, 0, 0, 0.28);
    
    /* Card styling */
    --ww-card-footer-bg: #FFF5E8;
    --ww-card-footer-border: #E8D8C8;
    
    /* Form focus */
    --ww-focus-border: #D97B3D;
    --ww-focus-shadow: rgba(217, 123, 61, 0.28);
    
    /* Bootstrap overrides */
    --bs-primary: #B8452A;
    --bs-secondary: #7A6B4A;
    --bs-success: #5A7A4A;
    --bs-info: #6A7A8A;
    --bs-warning: #D97B3D;
    --bs-danger: #8C3A2A;
    --bs-light: #F8F0E8;
    --bs-dark: #4A2E2A;
    
    --bs-primary-rgb: 184, 69, 42;
    --bs-secondary-rgb: 122, 107, 74;
    --bs-success-rgb: 90, 122, 74;
    --bs-info-rgb: 106, 122, 138;
    --bs-warning-rgb: 217, 123, 61;
    --bs-danger-rgb: 140, 58, 42;
    --bs-light-rgb: 248, 240, 232;
    --bs-dark-rgb: 74, 46, 42;
    
    --bs-body-color: #4A2E2A;
    --bs-body-bg: #FFFFFF;
    --bs-border-color: #D4C4B8;
    --bs-link-color: #B8452A;
    --bs-link-hover-color: #8B3420;
}

/* ========================================
   COMMON THEME STYLES
   Applied regardless of selected theme
   ======================================== */

/* Sidebar base styling */
#sidebar {
    background: var(--ww-gradient-sidebar) !important;
    transition: all 0.3s ease !important;
    box-shadow: var(--ww-shadow-sidebar) !important;
    color: var(--ww-text-light) !important;
    height: 100vh !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    position: sticky !important;
    top: 0 !important;
    z-index: 1000 !important;
}

/* Remove icons */
#sidebar i, #sidebar .fas, #sidebar .fa {
    display: none !important;
}

/* Custom scrollbar */
#sidebar::-webkit-scrollbar {
    width: 6px !important;
}

#sidebar::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.2) !important;
}

#sidebar::-webkit-scrollbar-thumb {
    background: var(--ww-scrollbar-thumb) !important;
    border-radius: 3px !important;
}

#sidebar::-webkit-scrollbar-thumb:hover {
    background: var(--ww-scrollbar-thumb-hover) !important;
}

/* Sidebar header */
#sidebar .sidebar-header {
    padding: 25px 20px !important;
    background: var(--ww-gradient-header) !important;
    border-bottom: 3px solid var(--ww-border-accent) !important;
    box-shadow: var(--ww-shadow-header) !important;
}

#sidebar .sidebar-header h3 {
    color: var(--ww-text-light) !important;
    font-weight: 600 !important;
    margin: 0 !important;
    font-size: 1.25rem !important;
}

/* Main navigation items */
#sidebar ul li a {
    padding: 15px 20px !important;
    font-size: 1rem !important;
    border-bottom: 1px solid var(--ww-border-subtle) !important;
    transition: all 0.3s ease !important;
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    color: var(--ww-text-light) !important;
    text-decoration: none !important;
}

/* Hover effects */
#sidebar ul li a:hover {
    background: var(--ww-hover-bg) !important;
    color: var(--ww-accent-light) !important;
    transform: translateX(2px) !important;
}

/* Active states */
#sidebar ul li.active > a {
    background: var(--ww-gradient-active) !important;
    color: #fff !important;
    box-shadow: var(--ww-shadow-active) !important;
}

/* Parent menu active when submenu is active */
#sidebar ul li.has-active-child > a {
    background: var(--ww-active-parent-bg) !important;
    color: var(--ww-accent-light) !important;
}

/* Submenu items */
#sidebar ul ul li a {
    padding: 12px 20px 12px 45px !important;
    font-size: 0.9rem !important;
    background: var(--ww-submenu-bg) !important;
    border-left: 4px solid transparent !important;
    border-bottom: 1px solid var(--ww-border-submenu) !important;
    color: var(--ww-text-muted) !important;
    text-decoration: none !important;
}

#sidebar ul ul li a:hover {
    border-left: 4px solid var(--ww-primary-light) !important;
    background: var(--ww-hover-bg) !important;
    transform: translateX(3px) !important;
}

/* Active submenu items */
#sidebar ul ul li.active > a {
    background: var(--ww-gradient-active) !important;
    color: #fff !important;
    border-left: 4px solid var(--ww-text-light) !important;
    box-shadow: var(--ww-shadow-active) !important;
}

/* Submenu container styling */
#sidebar ul.collapse {
    transition: all 0.4s ease !important;
    overflow: hidden !important;
}

#sidebar ul.collapse.show {
    background: var(--ww-submenu-container-bg) !important;
    border-radius: 0 0 8px 8px !important;
}

/* Dropdown toggle arrows */
#sidebar .dropdown-toggle {
    position: relative !important;
}

#sidebar .dropdown-toggle::after {
    font-size: 12px !important;
    color: var(--ww-accent) !important;
    transition: all 0.3s ease !important;
    font-weight: bold !important;
    margin-left: auto !important;
    display: inline-block !important;
    transform: rotate(360deg) !important;
}

#sidebar .dropdown-toggle[aria-expanded="true"]::after {
    transform: rotate(0deg) !important;
    color: var(--ww-accent-hover) !important;
}

/* Menu item text styling */
#sidebar ul li a span {
    flex: 1 !important;
    text-align: left !important;
    color: inherit !important;
}

/* Ensure sidebar text visibility */
#sidebar, #sidebar * {
    color: var(--ww-text-light) !important;
}

#sidebar ul ul li a span {
    color: var(--ww-text-muted) !important;
}

/* Subtle animations */
#sidebar ul li {
    transition: all 0.2s ease !important;
}

#sidebar ul li:hover {
    transform: translateX(2px) !important;
}

/* Collapsed state */
#sidebar.active .sidebar-header h3 {
    display: none !important;
}

#sidebar.active ul li a span {
    display: none !important;
}

#sidebar.active .arrow {
    display: none !important;
}

/* ========================================
   BUTTON STYLES
   ======================================== */

.btn-primary {
    background: var(--ww-gradient-button) !important;
    border: none !important;
    box-shadow: var(--ww-shadow-button) !important;
    transition: all 0.3s ease !important;
}

.btn-primary:hover {
    background: var(--ww-gradient-button-hover) !important;
    transform: translateY(-1px) !important;
    box-shadow: var(--ww-shadow-button-hover) !important;
}

.btn-primary:focus,
.btn-primary:active {
    background: var(--ww-gradient-active) !important;
    box-shadow: var(--ww-shadow-active) !important;
}

.btn-outline-primary {
    color: var(--ww-primary) !important;
    border-color: var(--ww-primary) !important;
    transition: all 0.3s ease !important;
}

.btn-outline-primary:hover {
    background: var(--ww-primary) !important;
    border-color: var(--ww-primary) !important;
    color: white !important;
}

/* ========================================
   FORM STYLES
   ======================================== */

.form-control:focus {
    border-color: var(--ww-focus-border) !important;
    box-shadow: 0 0 0 0.25rem var(--ww-focus-shadow) !important;
}

/* User form controls */
.form-control-user {
    border-radius: 0.375rem !important;
    font-size: 0.9rem !important;
    margin-bottom: 1rem !important;
}

.btn-user {
    border-radius: 0.375rem !important;
    font-size: 0.9rem !important;
}

.btn-block {
    width: 100% !important;
}

/* ========================================
   CARD STYLES
   ======================================== */

.card {
    border-radius: 12px !important;
}

.card-header.bg-primary,
.card-header.wildwood-header {
    background: var(--ww-gradient-header) !important;
    border-bottom: 3px solid var(--ww-border-accent) !important;
    border-radius: 12px 12px 0 0 !important;
}


.card-footer {
    background: var(--ww-card-footer-bg) !important;
    border-top: 1px solid var(--ww-card-footer-border) !important;
    border-radius: 0 0 12px 12px !important;
}

/* ========================================
   CONTENT AREA
   ======================================== */

#content {
    background: var(--ww-content-bg);
    position: relative;
    min-height: 100vh;
}

/* Page header text styling for content area */
#content .text-gray-800,
#content .h3.text-gray-800 {
    color: var(--ww-page-header) !important;
}

/* ========================================
   LOGIN BACKGROUND - White Page with Themed Card
   ======================================== */

body.login-background {
    background: var(--ww-login-gradient);
    min-height: 100vh;
    position: relative;
}

body.login-background::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: var(--ww-login-overlay);
    pointer-events: none;
    z-index: 0;
}

body.login-background > main {
    position: relative;
    z-index: 1;
}

/* Login/Registration card styling with themed dark background */
body.login-background .card {
    background: var(--ww-login-card-bg) !important;
    border: 1px solid rgba(255, 255, 255, 0.25) !important;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(255, 255, 255, 0.1) !important;
}

body.login-background .card-body {
    background: transparent !important;
    color: var(--ww-login-text) !important;
}

body.login-background .card-header.wildwood-header,
body.login-background .card-header.bg-primary {
    background: var(--ww-gradient-header) !important;
    border-bottom: 2px solid var(--ww-border-accent) !important;
}

body.login-background .card-footer {
    background: rgba(0, 0, 0, 0.2) !important;
    border-top: 1px solid var(--ww-login-card-border) !important;
}

body.login-background .card-footer,
body.login-background .card-footer small {
    color: var(--ww-login-text-muted) !important;
}

/* ========================================
   TOKEN REGISTRATION COMPONENT OVERRIDES
   Override embedded component styles for themed card
   ======================================== */

/* Token validation section - override component background */
body.login-background .token-validation-section,
body.login-background .registration-form-section,
body.login-background .payment-section,
body.login-background .registration-success-section {
    background: transparent !important;
    border: none !important;
    padding: 1rem 0 !important;
}

/* Text colors for themed card - white text */
body.login-background .token-validation-section *,
body.login-background .registration-form-section *,
body.login-background .payment-section *,
body.login-background .registration-success-section * {
    color: var(--ww-login-text) !important;
}

/* Headings in registration sections */
body.login-background .token-validation-section h3,
body.login-background .registration-form-section h3,
body.login-background .payment-section h3,
body.login-background .registration-success-section h4 {
    color: var(--ww-login-text) !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
    margin-bottom: 0.5rem !important;
}


/* Step indicator styling */
body.login-background .step-indicator .step-label,
body.login-background .step-indicator .step-number {
    color: var(--ww-login-text) !important;
}

body.login-background .step-indicator .step.active .step-label {
    color: var(--ww-accent-light) !important;
}

body.login-background .step-indicator .step.active .step-number {
    background: var(--ww-gradient-button) !important;
    color: #FFFFFF !important;
}

body.login-background .step-indicator .step.completed .step-number {
    background: #28a745 !important;
    color: #FFFFFF !important;
}

body.login-background .step-indicator .step-connector {
    background-color: rgba(255, 255, 255, 0.3) !important;
}

body.login-background .step-indicator .step-connector.completed {
    background-color: #28a745 !important;
}

/* Form labels in registration */
body.login-background .token-validation-section label,
body.login-background .registration-form-section label,
body.login-background .payment-section label,
body.login-background .form-group label {
    color: var(--ww-login-text) !important;
    font-weight: 600 !important;
}

/* Text colors on login page - white text for dark card */
body.login-background h1,
body.login-background h2,
body.login-background h3,
body.login-background h4,
body.login-background h5,
body.login-background h6,
body.login-background .h1,
body.login-background .h2,
body.login-background .h3,
body.login-background .h4,
body.login-background .h5,
body.login-background .h6,
body.login-background .text-gray-900,
body.login-background .card-body h1,
body.login-background .card-body h2,
body.login-background .card-body h3,
body.login-background .card-body h4,
body.login-background .card-body h5,
body.login-background .card-body h6 {
    color: var(--ww-login-text) !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

/* Paragraph and label text */
body.login-background p,
body.login-background span,
body.login-background label,
body.login-background div,
body.login-background .form-label,
body.login-background .card-body p,
body.login-background .card-body span,
body.login-background .card-body div,
body.login-background .card-body label {
    color: var(--ww-login-text) !important;
}


/* Small text */
body.login-background small,
body.login-background .small,
body.login-background .card-body small {
    color: var(--ww-login-text-muted) !important;
}

/* Alert/info text inside cards */
body.login-background .alert-info,
body.login-background .alert-warning {
    background-color: rgba(255, 255, 255, 0.15) !important;
    border-color: var(--ww-accent) !important;
    color: var(--ww-login-text) !important;
}

body.login-background .alert-info *,
body.login-background .alert-warning * {
    color: var(--ww-login-text) !important;
}

/* Form inputs on login page - semi-transparent for dark card */
body.login-background .form-control {
    background-color: rgba(255, 255, 255, 0.12) !important;
    border: 1px solid var(--ww-login-card-border) !important;
    color: var(--ww-login-text) !important;
}

body.login-background .form-control::placeholder {
    color: #B0B0B0 !important;
    opacity: 1;
}

body.login-background .form-control:focus {
    background-color: rgba(255, 255, 255, 0.18) !important;
    border-color: var(--ww-accent) !important;
    box-shadow: 0 0 0 0.25rem var(--ww-focus-shadow) !important;
    color: var(--ww-login-text) !important;
}

/* Select dropdowns */
body.login-background select.form-control,
body.login-background select.form-select,
body.login-background .form-select {
    background-color: rgba(255, 255, 255, 0.12) !important;
    border: 1px solid var(--ww-login-card-border) !important;
    color: var(--ww-login-text) !important;
}

body.login-background select.form-control option,
body.login-background select.form-select option,
body.login-background .form-select option {
    background-color: var(--ww-bg-dark) !important;
    color: var(--ww-login-text) !important;
}

/* Checkbox styling on login page */
body.login-background .custom-control-label,
body.login-background .form-check-label {
    color: var(--ww-login-text) !important;
}

/* Links on login page */
body.login-background a:not(.btn) {
    color: var(--ww-accent-light) !important;
    transition: color 0.2s ease;
}

body.login-background a:not(.btn):hover {
    color: #FFFFFF !important;
}

/* Button link styling */
body.login-background .btn-link {
    color: var(--ww-accent-light) !important;
}

body.login-background .btn-link:hover {
    color: #FFFFFF !important;
}

/* Horizontal rule on login page */
body.login-background hr {
    border-color: var(--ww-login-card-border) !important;
    opacity: 0.5;
}

/* Outline button on login page */
body.login-background .btn-outline-primary {
    color: var(--ww-login-text) !important;
    border-color: var(--ww-accent) !important;
    background: transparent !important;
}

body.login-background .btn-outline-primary:hover {
    background: var(--ww-primary) !important;
    border-color: var(--ww-primary) !important;
    color: white !important;
}

/* Secondary/outline buttons */
body.login-background .btn-outline-secondary,
body.login-background .btn-secondary {
    color: var(--ww-login-text) !important;
    border-color: rgba(255, 255, 255, 0.5) !important;
}

body.login-background .btn-outline-secondary:hover,
body.login-background .btn-secondary:hover {
    background: rgba(255, 255, 255, 0.2) !important;
    color: var(--ww-login-text) !important;
}

/* Validation messages - bright red for visibility */
body.login-background .text-danger,
body.login-background .validation-summary-errors,
body.login-background .field-validation-error,
body.login-background .token-validation-section .text-danger,
body.login-background .registration-form-section .text-danger {
    color: #FF6B6B !important;
    font-weight: 500;
}

/* Step indicators in registration wizard */
body.login-background .step-circle {
    color: var(--ww-login-text) !important;
}

body.login-background .step-circle.bg-secondary {
    background-color: rgba(255, 255, 255, 0.3) !important;
    color: var(--ww-login-text) !important;
}

/* Progress indicators */
body.login-background .progress {
    background-color: rgba(255, 255, 255, 0.2) !important;
}

body.login-background .progress-bar {
    background: var(--ww-gradient-button) !important;
}

/* List items and other content */
body.login-background ul,
body.login-background ol,
body.login-background li {
    color: var(--ww-login-text) !important;
}

/* Strong/bold text */
body.login-background strong,
body.login-background b {
    color: var(--ww-login-text) !important;
}

/* Blazor component text - catch any rendered content */
body.login-background [b-*],
body.login-background .blazor-error-boundary {
    color: var(--ww-login-text) !important;
}

/* Info/description text that might use Bootstrap text utilities */
body.login-background .text-secondary,
body.login-background .text-body-secondary {
    color: var(--ww-login-text-muted) !important;
}

/* Lead text */
body.login-background .lead {
    color: var(--ww-login-text) !important;
}

/* Pricing card in payment section */
body.login-background .pricing-summary-card {
    background: rgba(255, 255, 255, 0.1) !important;
    border-color: var(--ww-login-card-border) !important;
}

body.login-background .pricing-summary-card * {
    color: var(--ww-login-text) !important;
}

body.login-background .price-amount {
    color: var(--ww-accent-light) !important;
}

/* Stripe elements on dark background */
body.login-background .stripe-element {
    background-color: rgba(255, 255, 255, 0.9) !important;
}

/* Success icon color */
body.login-background .text-success,
body.login-background .fa-check-circle.text-success {
    color: #4CAF50 !important;
}

/* ========================================
   THEME SWITCHER DROPDOWN STYLES
   ======================================== */

.theme-switcher-dropdown .dropdown-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
}

.theme-switcher-dropdown .dropdown-item.active {
    background-color: rgba(0, 0, 0, 0.05);
}

.theme-preview {
    display: inline-block;
    width: 20px;
    height: 20px;
    border-radius: 4px;
    border: 1px solid rgba(0, 0, 0, 0.2);
    flex-shrink: 0;
}

.theme-preview.cool-blue {
    background: linear-gradient(135deg, #3B7EA1 0%, #3A4A55 50%, #6BA3C7 100%);
}

.theme-preview.woodland-warm {
    background: linear-gradient(135deg, #D4882C 0%, #5D4E37 50%, #D4A853 100%);
}

.theme-preview.fall-colors {
    background: linear-gradient(135deg, #B8452A 0%, #5D3B35 50%, #D97B3D 100%);
}

.theme-preview.midnight-dark {
    background: linear-gradient(135deg, #00D4AA 0%, #0F172A 50%, #1E293B 100%);
}

.theme-checkmark {
    font-size: 0.875rem;
    color: #28a745;
}

/* ========================================
   COMMON COMPONENT STYLES
   Base styles that use the theme variables
   ======================================== */

/* Button base styling using theme variables */
.ww-btn-primary {
    background: var(--ww-gradient-button, var(--ww-primary));
    border: none;
    color: var(--ww-btn-primary-text, white);
    box-shadow: var(--ww-shadow-button);
    transition: all 0.3s ease;
}

.ww-btn-primary:hover {
    background: var(--ww-gradient-button-hover, var(--ww-primary-light));
    transform: translateY(-1px);
    box-shadow: var(--ww-shadow-button-hover);
}

/* Form control styling */
.ww-form-control:focus {
    border-color: var(--ww-focus-border);
    box-shadow: 0 0 0 0.25rem var(--ww-focus-shadow);
}

/* Card styling */
.ww-card {
    border-radius: var(--ww-border-radius-lg);
    border: 1px solid var(--ww-border-color);
    box-shadow: var(--ww-shadow-sm);
}

.ww-card-header {
    background: var(--ww-gradient-header);
    border-bottom: 2px solid var(--ww-border-accent);
    color: var(--ww-text-light);
}

.ww-card-footer {
    background: var(--ww-card-footer-bg);
    border-top: 1px solid var(--ww-card-footer-border);
}

/* Alert styling */
.ww-alert-info {
    background-color: var(--ww-info-bg);
    border-color: var(--ww-info);
    color: var(--ww-info-text);
}

.ww-alert-danger {
    background-color: var(--ww-danger-bg);
    border-color: var(--ww-danger);
    color: var(--ww-danger-text);
}

.ww-alert-success {
    background-color: var(--ww-success-bg);
    border-color: var(--ww-success);
    color: var(--ww-success-text);
}

.ww-alert-warning {
    background-color: var(--ww-warning-bg);
    border-color: var(--ww-warning);
    color: var(--ww-warning-text);
}

/* Alert base */
.ww-alert {
    padding: 0.75rem 1rem;
    border: 1px solid transparent;
    border-radius: var(--ww-border-radius, 0.375rem);
    margin-bottom: 1rem;
    position: relative;
}

.ww-alert .ww-btn-close {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    background: none;
    border: none;
    font-size: 1.25rem;
    cursor: pointer;
    color: inherit;
    opacity: 0.7;
    padding: 0;
    line-height: 1;
}

.ww-alert .ww-btn-close:hover {
    opacity: 1;
}

/* ========================================
   SHARED UTILITY CLASSES
   Used across multiple WildwoodComponents
   ======================================== */

/* Spinner */
.ww-spinner {
    display: inline-block;
    width: 1.5rem;
    height: 1.5rem;
    border: 0.2em solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    animation: ww-spin 0.75s linear infinite;
}

.ww-spinner-sm {
    width: 1rem;
    height: 1rem;
    border-width: 0.15em;
}

.ww-spinner-lg {
    width: 3rem;
    height: 3rem;
    border-width: 0.25em;
}

@keyframes ww-spin {
    to { transform: rotate(360deg); }
}

/* Buttons */
.ww-btn {
    display: inline-block;
    font-weight: 400;
    text-align: center;
    vertical-align: middle;
    cursor: pointer;
    border: 1px solid transparent;
    padding: 0.375rem 0.75rem;
    font-size: 0.9rem;
    line-height: 1.5;
    border-radius: var(--ww-border-radius, 0.375rem);
    transition: all 0.15s ease-in-out;
    text-decoration: none;
}

.ww-btn-lg {
    padding: 0.625rem 1.25rem;
    font-size: 1rem;
}

.ww-btn-sm {
    padding: 0.25rem 0.5rem;
    font-size: 0.8rem;
}

.ww-btn-block {
    display: block;
    width: 100%;
}

.ww-btn-link {
    background: none;
    border: none;
    color: var(--ww-primary, #D4882C);
    cursor: pointer;
    padding: 0.25rem 0.5rem;
    font-size: 0.875rem;
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
}

.ww-btn-link:hover {
    color: var(--ww-primary-dark, #B8720F);
    text-decoration: underline;
}

.ww-btn-outline {
    background: transparent;
    color: var(--ww-primary, #D4882C);
    border: 1px solid var(--ww-primary, #D4882C);
    padding: 0.4rem 1rem;
    border-radius: var(--ww-border-radius, 0.375rem);
    cursor: pointer;
    font-size: 0.9rem;
    transition: background 0.15s, color 0.15s;
}

.ww-btn-outline:hover:not(:disabled) {
    background: var(--ww-primary, #D4882C);
    color: #fff;
}

/* Badges */
.ww-badge {
    display: inline-block;
    padding: 0.25rem 0.5rem;
    border-radius: 0.25rem;
    font-size: 0.75rem;
    font-weight: 600;
}

.ww-badge-primary {
    background: var(--ww-primary, #D4882C);
    color: var(--ww-text-inverse, white);
}

.ww-badge-secondary {
    background: var(--ww-text-muted, #6c757d);
    color: #fff;
}

.ww-badge-success {
    background: var(--ww-success, #28a745);
    color: #fff;
}

.ww-badge-info {
    background: var(--ww-info, #17a2b8);
    color: #fff;
}

.ww-badge-sm {
    padding: 0.15rem 0.375rem;
    font-size: 0.7rem;
}

/* Toggle switch */
.ww-toggle {
    position: relative;
    width: 48px;
    height: 26px;
    background: var(--ww-border-color, #dee2e6);
    border: none;
    border-radius: 13px;
    cursor: pointer;
    padding: 0;
    transition: background 0.2s;
}

.ww-toggle-on {
    background: var(--ww-primary, #D4882C);
}

.ww-toggle-slider {
    position: absolute;
    top: 3px;
    left: 3px;
    width: 20px;
    height: 20px;
    background: #fff;
    border-radius: 50%;
    transition: transform 0.2s;
    box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}

.ww-toggle-on .ww-toggle-slider {
    transform: translateX(22px);
}

/* Tier grid (shared across AppTier and Pricing components) */
.ww-tier-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1.25rem;
}

.ww-tier-card {
    background: var(--ww-bg-primary, #fff);
    border: 2px solid var(--ww-border-color, #dee2e6);
    border-radius: var(--ww-border-radius-lg, 0.5rem);
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    position: relative;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.ww-tier-card:hover {
    border-color: var(--ww-primary, #D4882C);
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}

.ww-tier-current {
    border-color: var(--ww-success, #28a745);
    background: var(--ww-bg-secondary, #f8f9fa);
}

.ww-tier-default-badge {
    position: absolute;
    top: -12px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--ww-primary, #D4882C);
    color: #fff;
    padding: 0.2rem 0.75rem;
    border-radius: 10px;
    font-size: 0.75rem;
    font-weight: 600;
}

.ww-tier-header {
    text-align: center;
    margin-bottom: 1rem;
}

.ww-tier-header h3 {
    margin: 0 0 0.5rem;
    font-size: 1.25rem;
}

.ww-tier-price-amount {
    font-size: 2rem;
    font-weight: 700;
    color: var(--ww-text-primary, #212529);
}

.ww-tier-price-interval {
    font-size: 0.9rem;
    color: var(--ww-text-muted, #6c757d);
}

.ww-tier-discount {
    color: var(--ww-success, #28a745);
    font-size: 0.85rem;
    font-weight: 600;
    margin-top: 0.25rem;
}

.ww-tier-description {
    color: var(--ww-text-secondary, #495057);
    font-size: 0.9rem;
    margin-bottom: 1rem;
    text-align: center;
}

.ww-tier-features {
    list-style: none;
    padding: 0;
    margin: 0 0 1rem;
}

.ww-tier-feature-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.35rem 0;
    font-size: 0.9rem;
}

.ww-tier-feature-disabled {
    color: var(--ww-text-muted, #6c757d);
    text-decoration: line-through;
}

.ww-tier-feature-check {
    color: var(--ww-success, #28a745);
    flex-shrink: 0;
}

.ww-tier-feature-x {
    color: var(--ww-text-muted, #6c757d);
    flex-shrink: 0;
}

.ww-tier-limits {
    border-top: 1px solid var(--ww-border-color, #dee2e6);
    padding-top: 0.75rem;
    margin-bottom: 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
}

.ww-tier-limits-heading {
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--ww-text-muted, #6c757d);
    margin-bottom: 0.125rem;
}

.ww-tier-limit-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.4rem 0.625rem;
    font-size: 0.8rem;
    background: rgba(108, 117, 125, 0.06);
    border-radius: var(--ww-border-radius, 0.375rem);
    transition: background-color 0.15s ease;
}

.ww-tier-limit-item:hover {
    background: rgba(108, 117, 125, 0.12);
}

.ww-tier-limit-value {
    font-weight: 700;
    font-size: 0.8rem;
    color: var(--ww-primary, #D4882C);
    white-space: nowrap;
}

.ww-tier-limit-name {
    color: var(--ww-text-secondary, #495057);
    font-size: 0.8rem;
    text-align: right;
}

.ww-tier-footer {
    margin-top: auto;
    text-align: center;
    padding-top: 1rem;
}

/* Text utilities */
.ww-text-muted {
    color: var(--ww-text-muted, #6c757d);
}

.ww-text-sm {
    font-size: 0.85rem;
}

.ww-text-danger {
    color: var(--ww-danger, #dc3545);
}

.ww-text-success {
    color: var(--ww-success, #28a745);
}

.ww-text-warning {
    color: var(--ww-warning, #ffc107);
}