/* BeatBox Theme System */
/* CSS Custom Properties for easy theme switching */

:root {
    /* BeatBox Matt Theme (Light Mode) - Current BeatBox Colors */
    --bb-primary: #667eea;
    --bb-primary-dark: #5a6fd8;
    --bb-secondary: #764ba2;
    --bb-success: #28a745;
    --bb-info: #17a2b8;
    --bb-warning: #ffc107;
    --bb-danger: #dc3545;
    --bb-light: #f8f9fa;
    --bb-dark: #343a40;
    --bb-muted: #6c757d;
    
    /* Background Colors */
    --bb-bg-primary: #ffffff;
    --bb-bg-secondary: #f8f9fa;
    --bb-bg-tertiary: #e9ecef;
    --bb-bg-card: #ffffff;
    --bb-bg-navbar: #343a40;
    --bb-bg-footer: #343a40;
    --bb-bg-hero: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    
    /* Text Colors */
    --bb-text-primary: #212529;
    --bb-text-secondary: #6c757d;
    --bb-text-muted: #6c757d;
    --bb-text-light: #ffffff;
    --bb-text-dark: #343a40;
    
    /* Card Colors */
    --bb-card-bg: #ffffff;
    --bb-card-border: #dee2e6;
    --bb-card-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    --bb-card-shadow-hover: 0 8px 25px rgba(0, 0, 0, 0.15);
    
    /* Button Colors */
    --bb-btn-primary: #667eea;
    --bb-btn-primary-hover: #5a6fd8;
    --bb-btn-success: #28a745;
    --bb-btn-success-hover: #218838;
    --bb-btn-info: #17a2b8;
    --bb-btn-info-hover: #138496;
    --bb-btn-warning: #ffc107;
    --bb-btn-warning-hover: #e0a800;
    --bb-btn-danger: #dc3545;
    --bb-btn-danger-hover: #c82333;
    
    /* Form Colors */
    --bb-form-border: #e9ecef;
    --bb-form-border-focus: #667eea;
    --bb-form-shadow-focus: rgba(102, 126, 234, 0.25);
    
    /* Alert Colors */
    --bb-alert-success: #d4edda;
    --bb-alert-success-text: #155724;
    --bb-alert-info: #d1ecf1;
    --bb-alert-info-text: #0c5460;
    --bb-alert-warning: #fff3cd;
    --bb-alert-warning-text: #856404;
    --bb-alert-danger: #f8d7da;
    --bb-alert-danger-text: #721c24;
    
    /* Table Colors */
    --bb-table-bg: #ffffff;
    --bb-table-border: #dee2e6;
    --bb-table-stripe: #f8f9fa;
    
    /* Progress Bar Colors */
    --bb-progress-bg: #e9ecef;
    --bb-progress-bar: #667eea;
    
    /* Badge Colors */
    --bb-badge-light: #f8f9fa;
    --bb-badge-light-text: #212529;
    
    /* Transitions */
    --bb-transition: all 0.3s ease;
    --bb-transition-fast: all 0.2s ease;
}

/* BeatBox Anti-Matt Theme (Dark Mode) */
[data-theme="dark"] {
    /* Background Colors */
    --bb-bg-primary: #1a1a1a;
    --bb-bg-secondary: #2d2d2d;
    --bb-bg-tertiary: #404040;
    --bb-bg-card: #2d2d2d;
    --bb-bg-navbar: #000000;
    --bb-bg-footer: #000000;
    --bb-bg-hero: linear-gradient(135deg, #1a1a1a 0%, #2d2d2d 100%);
    
    /* Text Colors */
    --bb-text-primary: #ffffff;
    --bb-text-secondary: #cccccc;
    --bb-text-muted: #999999;
    --bb-text-light: #ffffff;
    --bb-text-dark: #ffffff;
    
    /* Card Colors */
    --bb-card-bg: #2d2d2d;
    --bb-card-border: #404040;
    --bb-card-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
    --bb-card-shadow-hover: 0 8px 25px rgba(0, 0, 0, 0.4);
    
    /* Form Colors */
    --bb-form-border: #404040;
    --bb-form-border-focus: #667eea;
    --bb-form-shadow-focus: rgba(102, 126, 234, 0.25);
    
    /* Alert Colors */
    --bb-alert-success: #1e4a2e;
    --bb-alert-success-text: #d4edda;
    --bb-alert-info: #0c5460;
    --bb-alert-info-text: #d1ecf1;
    --bb-alert-warning: #856404;
    --bb-alert-warning-text: #fff3cd;
    --bb-alert-danger: #721c24;
    --bb-alert-danger-text: #f8d7da;
    
    /* Table Colors */
    --bb-table-bg: #2d2d2d;
    --bb-table-border: #404040;
    --bb-table-stripe: #404040;
    
    /* Progress Bar Colors */
    --bb-progress-bg: #404040;
    --bb-progress-bar: #667eea;
}

/* Ocean Theme (Material Blue) */
[data-theme="ocean"] {
    /* Primary Colors */
    --bb-primary: #1976d2;
    --bb-primary-dark: #1565c0;
    --bb-secondary: #546e7a;
    --bb-success: #388e3c;
    --bb-info: #0288d1;
    --bb-warning: #f57c00;
    --bb-danger: #d32f2f;
    --bb-light: #e3f2fd;
    --bb-dark: #0d47a1;
    --bb-muted: #546e7a;
    
    /* Background Colors */
    --bb-bg-primary: #fafafa;
    --bb-bg-secondary: #e3f2fd;
    --bb-bg-tertiary: #bbdefb;
    --bb-bg-card: #ffffff;
    --bb-bg-navbar: #1976d2;
    --bb-bg-footer: #1976d2;
    --bb-bg-hero: linear-gradient(135deg, #1976d2 0%, #0d47a1 100%);
    
    /* Text Colors */
    --bb-text-primary: #263238;
    --bb-text-secondary: #546e7a;
    --bb-text-muted: #78909c;
    --bb-text-light: #ffffff;
    --bb-text-dark: #0d47a1;
    
    /* Card Colors */
    --bb-card-bg: #ffffff;
    --bb-card-border: #e1f5fe;
    --bb-card-shadow: 0 4px 6px rgba(25, 118, 210, 0.1);
    --bb-card-shadow-hover: 0 8px 25px rgba(25, 118, 210, 0.15);
    
    /* Button Colors */
    --bb-btn-primary: #1976d2;
    --bb-btn-primary-hover: #1565c0;
    --bb-btn-success: #388e3c;
    --bb-btn-success-hover: #2e7d32;
    --bb-btn-info: #0288d1;
    --bb-btn-info-hover: #0277bd;
    --bb-btn-warning: #f57c00;
    --bb-btn-warning-hover: #ef6c00;
    --bb-btn-danger: #d32f2f;
    --bb-btn-danger-hover: #c62828;
    
    /* Form Colors */
    --bb-form-border: #e1f5fe;
    --bb-form-border-focus: #1976d2;
    --bb-form-shadow-focus: rgba(25, 118, 210, 0.25);
    
    /* Alert Colors */
    --bb-alert-success: #e8f5e8;
    --bb-alert-success-text: #2e7d32;
    --bb-alert-info: #e1f5fe;
    --bb-alert-info-text: #0277bd;
    --bb-alert-warning: #fff3e0;
    --bb-alert-warning-text: #ef6c00;
    --bb-alert-danger: #ffebee;
    --bb-alert-danger-text: #c62828;
    
    /* Table Colors */
    --bb-table-bg: #ffffff;
    --bb-table-border: #e1f5fe;
    --bb-table-stripe: #f3f9ff;
    
    /* Progress Bar Colors */
    --bb-progress-bg: #e1f5fe;
    --bb-progress-bar: #1976d2;
    
    /* Badge Colors */
    --bb-badge-light: #e3f2fd;
    --bb-badge-light-text: #1976d2;
}

/* Forest Theme (Material Green) */
[data-theme="forest"] {
    /* Primary Colors */
    --bb-primary: #388e3c;
    --bb-primary-dark: #2e7d32;
    --bb-secondary: #546e7a;
    --bb-success: #2e7d32;
    --bb-info: #00796b;
    --bb-warning: #f57c00;
    --bb-danger: #d32f2f;
    --bb-light: #e8f5e8;
    --bb-dark: #1b5e20;
    --bb-muted: #546e7a;
    
    /* Background Colors */
    --bb-bg-primary: #fafafa;
    --bb-bg-secondary: #e8f5e8;
    --bb-bg-tertiary: #c8e6c9;
    --bb-bg-card: #ffffff;
    --bb-bg-navbar: #388e3c;
    --bb-bg-footer: #388e3c;
    --bb-bg-hero: linear-gradient(135deg, #388e3c 0%, #1b5e20 100%);
    
    /* Text Colors */
    --bb-text-primary: #263238;
    --bb-text-secondary: #546e7a;
    --bb-text-muted: #78909c;
    --bb-text-light: #ffffff;
    --bb-text-dark: #1b5e20;
    
    /* Card Colors */
    --bb-card-bg: #ffffff;
    --bb-card-border: #e8f5e8;
    --bb-card-shadow: 0 4px 6px rgba(56, 142, 60, 0.1);
    --bb-card-shadow-hover: 0 8px 25px rgba(56, 142, 60, 0.15);
    
    /* Button Colors */
    --bb-btn-primary: #388e3c;
    --bb-btn-primary-hover: #2e7d32;
    --bb-btn-success: #2e7d32;
    --bb-btn-success-hover: #1b5e20;
    --bb-btn-info: #00796b;
    --bb-btn-info-hover: #00695c;
    --bb-btn-warning: #f57c00;
    --bb-btn-warning-hover: #ef6c00;
    --bb-btn-danger: #d32f2f;
    --bb-btn-danger-hover: #c62828;
    
    /* Form Colors */
    --bb-form-border: #e8f5e8;
    --bb-form-border-focus: #388e3c;
    --bb-form-shadow-focus: rgba(56, 142, 60, 0.25);
    
    /* Alert Colors */
    --bb-alert-success: #e8f5e8;
    --bb-alert-success-text: #2e7d32;
    --bb-alert-info: #e0f2f1;
    --bb-alert-info-text: #00695c;
    --bb-alert-warning: #fff3e0;
    --bb-alert-warning-text: #ef6c00;
    --bb-alert-danger: #ffebee;
    --bb-alert-danger-text: #c62828;
    
    /* Table Colors */
    --bb-table-bg: #ffffff;
    --bb-table-border: #e8f5e8;
    --bb-table-stripe: #f1f8f1;
    
    /* Progress Bar Colors */
    --bb-progress-bg: #e8f5e8;
    --bb-progress-bar: #388e3c;
    
    /* Badge Colors */
    --bb-badge-light: #e8f5e8;
    --bb-badge-light-text: #388e3c;
}

/* Sunset Theme (Material Orange) */
[data-theme="sunset"] {
    /* Primary Colors */
    --bb-primary: #f57c00;
    --bb-primary-dark: #ef6c00;
    --bb-secondary: #8d6e63;
    --bb-success: #388e3c;
    --bb-info: #ff9800;
    --bb-warning: #ff6f00;
    --bb-danger: #d32f2f;
    --bb-light: #fff3e0;
    --bb-dark: #e65100;
    --bb-muted: #8d6e63;
    
    /* Background Colors */
    --bb-bg-primary: #fafafa;
    --bb-bg-secondary: #fff3e0;
    --bb-bg-tertiary: #ffe0b2;
    --bb-bg-card: #ffffff;
    --bb-bg-navbar: #f57c00;
    --bb-bg-footer: #f57c00;
    --bb-bg-hero: linear-gradient(135deg, #f57c00 0%, #e65100 100%);
    
    /* Text Colors */
    --bb-text-primary: #3e2723;
    --bb-text-secondary: #8d6e63;
    --bb-text-muted: #a1887f;
    --bb-text-light: #ffffff;
    --bb-text-dark: #e65100;
    
    /* Card Colors */
    --bb-card-bg: #ffffff;
    --bb-card-border: #fff3e0;
    --bb-card-shadow: 0 4px 6px rgba(245, 124, 0, 0.1);
    --bb-card-shadow-hover: 0 8px 25px rgba(245, 124, 0, 0.15);
    
    /* Button Colors */
    --bb-btn-primary: #f57c00;
    --bb-btn-primary-hover: #ef6c00;
    --bb-btn-success: #388e3c;
    --bb-btn-success-hover: #2e7d32;
    --bb-btn-info: #ff9800;
    --bb-btn-info-hover: #f57c00;
    --bb-btn-warning: #ff6f00;
    --bb-btn-warning-hover: #e65100;
    --bb-btn-danger: #d32f2f;
    --bb-btn-danger-hover: #c62828;
    
    /* Form Colors */
    --bb-form-border: #fff3e0;
    --bb-form-border-focus: #f57c00;
    --bb-form-shadow-focus: rgba(245, 124, 0, 0.25);
    
    /* Alert Colors */
    --bb-alert-success: #e8f5e8;
    --bb-alert-success-text: #2e7d32;
    --bb-alert-info: #fff3e0;
    --bb-alert-info-text: #f57c00;
    --bb-alert-warning: #fff3e0;
    --bb-alert-warning-text: #ef6c00;
    --bb-alert-danger: #ffebee;
    --bb-alert-danger-text: #c62828;
    
    /* Table Colors */
    --bb-table-bg: #ffffff;
    --bb-table-border: #fff3e0;
    --bb-table-stripe: #fffaf0;
    
    /* Progress Bar Colors */
    --bb-progress-bg: #fff3e0;
    --bb-progress-bar: #f57c00;
    
    /* Badge Colors */
    --bb-badge-light: #fff3e0;
    --bb-badge-light-text: #f57c00;
}

/* Midnight Theme (Material Purple) */
[data-theme="midnight"] {
    /* Primary Colors */
    --bb-primary: #7b1fa2;
    --bb-primary-dark: #6a1b9a;
    --bb-secondary: #546e7a;
    --bb-success: #388e3c;
    --bb-info: #9c27b0;
    --bb-warning: #f57c00;
    --bb-danger: #d32f2f;
    --bb-light: #f3e5f5;
    --bb-dark: #4a148c;
    --bb-muted: #546e7a;
    
    /* Background Colors */
    --bb-bg-primary: #fafafa;
    --bb-bg-secondary: #f3e5f5;
    --bb-bg-tertiary: #e1bee7;
    --bb-bg-card: #ffffff;
    --bb-bg-navbar: #7b1fa2;
    --bb-bg-footer: #7b1fa2;
    --bb-bg-hero: linear-gradient(135deg, #7b1fa2 0%, #4a148c 100%);
    
    /* Text Colors */
    --bb-text-primary: #263238;
    --bb-text-secondary: #546e7a;
    --bb-text-muted: #78909c;
    --bb-text-light: #ffffff;
    --bb-text-dark: #4a148c;
    
    /* Card Colors */
    --bb-card-bg: #ffffff;
    --bb-card-border: #f3e5f5;
    --bb-card-shadow: 0 4px 6px rgba(123, 31, 162, 0.1);
    --bb-card-shadow-hover: 0 8px 25px rgba(123, 31, 162, 0.15);
    
    /* Button Colors */
    --bb-btn-primary: #7b1fa2;
    --bb-btn-primary-hover: #6a1b9a;
    --bb-btn-success: #388e3c;
    --bb-btn-success-hover: #2e7d32;
    --bb-btn-info: #9c27b0;
    --bb-btn-info-hover: #8e24aa;
    --bb-btn-warning: #f57c00;
    --bb-btn-warning-hover: #ef6c00;
    --bb-btn-danger: #d32f2f;
    --bb-btn-danger-hover: #c62828;
    
    /* Form Colors */
    --bb-form-border: #f3e5f5;
    --bb-form-border-focus: #7b1fa2;
    --bb-form-shadow-focus: rgba(123, 31, 162, 0.25);
    
    /* Alert Colors */
    --bb-alert-success: #e8f5e8;
    --bb-alert-success-text: #2e7d32;
    --bb-alert-info: #f3e5f5;
    --bb-alert-info-text: #8e24aa;
    --bb-alert-warning: #fff3e0;
    --bb-alert-warning-text: #ef6c00;
    --bb-alert-danger: #ffebee;
    --bb-alert-danger-text: #c62828;
    
    /* Table Colors */
    --bb-table-bg: #ffffff;
    --bb-table-border: #f3e5f5;
    --bb-table-stripe: #faf5ff;
    
    /* Progress Bar Colors */
    --bb-progress-bg: #f3e5f5;
    --bb-progress-bar: #7b1fa2;
    
    /* Badge Colors */
    --bb-badge-light: #f3e5f5;
    --bb-badge-light-text: #7b1fa2;
}

/* Dark Ocean Theme (Material Blue Dark) */
[data-theme="ocean-dark"] {
    /* Primary Colors */
    --bb-primary: #42a5f5;
    --bb-primary-dark: #1976d2;
    --bb-secondary: #78909c;
    --bb-success: #66bb6a;
    --bb-info: #29b6f6;
    --bb-warning: #ffb74d;
    --bb-danger: #ef5350;
    --bb-light: #e3f2fd;
    --bb-dark: #0d47a1;
    --bb-muted: #78909c;
    
    /* Background Colors */
    --bb-bg-primary: #0d1117;
    --bb-bg-secondary: #161b22;
    --bb-bg-tertiary: #21262d;
    --bb-bg-card: #161b22;
    --bb-bg-navbar: #0d47a1;
    --bb-bg-footer: #0d47a1;
    --bb-bg-hero: linear-gradient(135deg, #0d47a1 0%, #1565c0 100%);
    
    /* Text Colors */
    --bb-text-primary: #f0f6fc;
    --bb-text-secondary: #c9d1d9;
    --bb-text-muted: #8b949e;
    --bb-text-light: #ffffff;
    --bb-text-dark: #ffffff;
    
    /* Card Colors */
    --bb-card-bg: #161b22;
    --bb-card-border: #30363d;
    --bb-card-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
    --bb-card-shadow-hover: 0 8px 25px rgba(0, 0, 0, 0.4);
    
    /* Button Colors */
    --bb-btn-primary: #42a5f5;
    --bb-btn-primary-hover: #1976d2;
    --bb-btn-success: #66bb6a;
    --bb-btn-success-hover: #4caf50;
    --bb-btn-info: #29b6f6;
    --bb-btn-info-hover: #0288d1;
    --bb-btn-warning: #ffb74d;
    --bb-btn-warning-hover: #ff9800;
    --bb-btn-danger: #ef5350;
    --bb-btn-danger-hover: #f44336;
    
    /* Form Colors */
    --bb-form-border: #30363d;
    --bb-form-border-focus: #42a5f5;
    --bb-form-shadow-focus: rgba(66, 165, 245, 0.25);
    
    /* Alert Colors */
    --bb-alert-success: #1b5e20;
    --bb-alert-success-text: #c8e6c9;
    --bb-alert-info: #0d47a1;
    --bb-alert-info-text: #bbdefb;
    --bb-alert-warning: #e65100;
    --bb-alert-warning-text: #ffe0b2;
    --bb-alert-danger: #b71c1c;
    --bb-alert-danger-text: #ffcdd2;
    
    /* Table Colors */
    --bb-table-bg: #161b22;
    --bb-table-border: #30363d;
    --bb-table-stripe: #21262d;
    
    /* Progress Bar Colors */
    --bb-progress-bg: #30363d;
    --bb-progress-bar: #42a5f5;
    
    /* Badge Colors */
    --bb-badge-light: #21262d;
    --bb-badge-light-text: #c9d1d9;
}

/* Dark Forest Theme (Material Green Dark) */
[data-theme="forest-dark"] {
    /* Primary Colors */
    --bb-primary: #66bb6a;
    --bb-primary-dark: #4caf50;
    --bb-secondary: #78909c;
    --bb-success: #4caf50;
    --bb-info: #26a69a;
    --bb-warning: #ffb74d;
    --bb-danger: #ef5350;
    --bb-light: #e8f5e8;
    --bb-dark: #1b5e20;
    --bb-muted: #78909c;
    
    /* Background Colors */
    --bb-bg-primary: #0d1117;
    --bb-bg-secondary: #161b22;
    --bb-bg-tertiary: #21262d;
    --bb-bg-card: #161b22;
    --bb-bg-navbar: #1b5e20;
    --bb-bg-footer: #1b5e20;
    --bb-bg-hero: linear-gradient(135deg, #1b5e20 0%, #2e7d32 100%);
    
    /* Text Colors */
    --bb-text-primary: #f0f6fc;
    --bb-text-secondary: #c9d1d9;
    --bb-text-muted: #8b949e;
    --bb-text-light: #ffffff;
    --bb-text-dark: #ffffff;
    
    /* Card Colors */
    --bb-card-bg: #161b22;
    --bb-card-border: #30363d;
    --bb-card-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
    --bb-card-shadow-hover: 0 8px 25px rgba(0, 0, 0, 0.4);
    
    /* Button Colors */
    --bb-btn-primary: #66bb6a;
    --bb-btn-primary-hover: #4caf50;
    --bb-btn-success: #4caf50;
    --bb-btn-success-hover: #388e3c;
    --bb-btn-info: #26a69a;
    --bb-btn-info-hover: #00796b;
    --bb-btn-warning: #ffb74d;
    --bb-btn-warning-hover: #ff9800;
    --bb-btn-danger: #ef5350;
    --bb-btn-danger-hover: #f44336;
    
    /* Form Colors */
    --bb-form-border: #30363d;
    --bb-form-border-focus: #66bb6a;
    --bb-form-shadow-focus: rgba(102, 187, 106, 0.25);
    
    /* Alert Colors */
    --bb-alert-success: #1b5e20;
    --bb-alert-success-text: #c8e6c9;
    --bb-alert-info: #00695c;
    --bb-alert-info-text: #b2dfdb;
    --bb-alert-warning: #e65100;
    --bb-alert-warning-text: #ffe0b2;
    --bb-alert-danger: #b71c1c;
    --bb-alert-danger-text: #ffcdd2;
    
    /* Table Colors */
    --bb-table-bg: #161b22;
    --bb-table-border: #30363d;
    --bb-table-stripe: #21262d;
    
    /* Progress Bar Colors */
    --bb-progress-bg: #30363d;
    --bb-progress-bar: #66bb6a;
    
    /* Badge Colors */
    --bb-badge-light: #21262d;
    --bb-badge-light-text: #c9d1d9;
}

/* Dark Sunset Theme (Material Orange Dark) */
[data-theme="sunset-dark"] {
    /* Primary Colors */
    --bb-primary: #ffb74d;
    --bb-primary-dark: #ff9800;
    --bb-secondary: #a1887f;
    --bb-success: #66bb6a;
    --bb-info: #ffcc02;
    --bb-warning: #ff8f00;
    --bb-danger: #ef5350;
    --bb-light: #fff3e0;
    --bb-dark: #e65100;
    --bb-muted: #a1887f;
    
    /* Background Colors */
    --bb-bg-primary: #0d1117;
    --bb-bg-secondary: #161b22;
    --bb-bg-tertiary: #21262d;
    --bb-bg-card: #161b22;
    --bb-bg-navbar: #e65100;
    --bb-bg-footer: #e65100;
    --bb-bg-hero: linear-gradient(135deg, #e65100 0%, #f57c00 100%);
    
    /* Text Colors */
    --bb-text-primary: #f0f6fc;
    --bb-text-secondary: #c9d1d9;
    --bb-text-muted: #8b949e;
    --bb-text-light: #ffffff;
    --bb-text-dark: #ffffff;
    
    /* Card Colors */
    --bb-card-bg: #161b22;
    --bb-card-border: #30363d;
    --bb-card-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
    --bb-card-shadow-hover: 0 8px 25px rgba(0, 0, 0, 0.4);
    
    /* Button Colors */
    --bb-btn-primary: #ffb74d;
    --bb-btn-primary-hover: #ff9800;
    --bb-btn-success: #66bb6a;
    --bb-btn-success-hover: #4caf50;
    --bb-btn-info: #ffcc02;
    --bb-btn-info-hover: #ff9800;
    --bb-btn-warning: #ff8f00;
    --bb-btn-warning-hover: #f57c00;
    --bb-btn-danger: #ef5350;
    --bb-btn-danger-hover: #f44336;
    
    /* Form Colors */
    --bb-form-border: #30363d;
    --bb-form-border-focus: #ffb74d;
    --bb-form-shadow-focus: rgba(255, 183, 77, 0.25);
    
    /* Alert Colors */
    --bb-alert-success: #1b5e20;
    --bb-alert-success-text: #c8e6c9;
    --bb-alert-info: #e65100;
    --bb-alert-info-text: #ffe0b2;
    --bb-alert-warning: #e65100;
    --bb-alert-warning-text: #ffe0b2;
    --bb-alert-danger: #b71c1c;
    --bb-alert-danger-text: #ffcdd2;
    
    /* Table Colors */
    --bb-table-bg: #161b22;
    --bb-table-border: #30363d;
    --bb-table-stripe: #21262d;
    
    /* Progress Bar Colors */
    --bb-progress-bg: #30363d;
    --bb-progress-bar: #ffb74d;
    
    /* Badge Colors */
    --bb-badge-light: #21262d;
    --bb-badge-light-text: #c9d1d9;
}

/* Dark Midnight Theme (Material Purple Dark) */
[data-theme="midnight-dark"] {
    /* Primary Colors */
    --bb-primary: #ba68c8;
    --bb-primary-dark: #9c27b0;
    --bb-secondary: #78909c;
    --bb-success: #66bb6a;
    --bb-info: #ce93d8;
    --bb-warning: #ffb74d;
    --bb-danger: #ef5350;
    --bb-light: #f3e5f5;
    --bb-dark: #4a148c;
    --bb-muted: #78909c;
    
    /* Background Colors */
    --bb-bg-primary: #0d1117;
    --bb-bg-secondary: #161b22;
    --bb-bg-tertiary: #21262d;
    --bb-bg-card: #161b22;
    --bb-bg-navbar: #4a148c;
    --bb-bg-footer: #4a148c;
    --bb-bg-hero: linear-gradient(135deg, #4a148c 0%, #6a1b9a 100%);
    
    /* Text Colors */
    --bb-text-primary: #f0f6fc;
    --bb-text-secondary: #c9d1d9;
    --bb-text-muted: #8b949e;
    --bb-text-light: #ffffff;
    --bb-text-dark: #ffffff;
    
    /* Card Colors */
    --bb-card-bg: #161b22;
    --bb-card-border: #30363d;
    --bb-card-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
    --bb-card-shadow-hover: 0 8px 25px rgba(0, 0, 0, 0.4);
    
    /* Button Colors */
    --bb-btn-primary: #ba68c8;
    --bb-btn-primary-hover: #9c27b0;
    --bb-btn-success: #66bb6a;
    --bb-btn-success-hover: #4caf50;
    --bb-btn-info: #ce93d8;
    --bb-btn-info-hover: #ba68c8;
    --bb-btn-warning: #ffb74d;
    --bb-btn-warning-hover: #ff9800;
    --bb-btn-danger: #ef5350;
    --bb-btn-danger-hover: #f44336;
    
    /* Form Colors */
    --bb-form-border: #30363d;
    --bb-form-border-focus: #ba68c8;
    --bb-form-shadow-focus: rgba(186, 104, 200, 0.25);
    
    /* Alert Colors */
    --bb-alert-success: #1b5e20;
    --bb-alert-success-text: #c8e6c9;
    --bb-alert-info: #4a148c;
    --bb-alert-info-text: #e1bee7;
    --bb-alert-warning: #e65100;
    --bb-alert-warning-text: #ffe0b2;
    --bb-alert-danger: #b71c1c;
    --bb-alert-danger-text: #ffcdd2;
    
    /* Table Colors */
    --bb-table-bg: #161b22;
    --bb-table-border: #30363d;
    --bb-table-stripe: #21262d;
    
    /* Progress Bar Colors */
    --bb-progress-bg: #30363d;
    --bb-progress-bar: #ba68c8;
    
    /* Badge Colors */
    --bb-badge-light: #21262d;
    --bb-badge-light-text: #c9d1d9;
}

/* Apply theme variables to Bootstrap classes */
.bg-primary { background-color: var(--bb-primary) !important; }
.bg-secondary { background-color: var(--bb-bg-secondary) !important; }
.bg-success { background-color: var(--bb-success) !important; }
.bg-info { background-color: var(--bb-info) !important; }
.bg-warning { background-color: var(--bb-warning) !important; }
.bg-danger { background-color: var(--bb-danger) !important; }
.bg-light { background-color: var(--bb-bg-secondary) !important; }
.bg-dark { background-color: var(--bb-bg-navbar) !important; }

.text-primary { color: var(--bb-primary) !important; }
.text-secondary { color: var(--bb-text-secondary) !important; }
.text-success { color: var(--bb-success) !important; }
.text-info { color: var(--bb-info) !important; }
.text-warning { color: var(--bb-warning) !important; }
.text-danger { color: var(--bb-danger) !important; }
.text-light { color: var(--bb-text-light) !important; }
.text-dark { color: var(--bb-text-dark) !important; }
.text-muted { color: var(--bb-text-muted) !important; }

/* Card styling */
.game-card, .card {
    background-color: var(--bb-card-bg);
    border-color: var(--bb-card-border);
    box-shadow: var(--bb-card-shadow);
    transition: var(--bb-transition);
}

.game-card:hover, .card:hover {
    box-shadow: var(--bb-card-shadow-hover);
}

/* Card headers */
.card-header {
    background-color: var(--bb-card-bg);
    border-bottom-color: var(--bb-card-border);
}

/* Card body */
.card-body {
    background-color: var(--bb-card-bg);
}

/* Card footer */
.card-footer {
    background-color: var(--bb-card-bg);
    border-top-color: var(--bb-card-border);
}

/* Body and main content */
body {
    background-color: var(--bb-bg-primary);
    color: var(--bb-text-primary);
    transition: var(--bb-transition);
}

/* Navbar */
.navbar {
    background-color: var(--bb-bg-navbar) !important;
}

/* Footer */
footer {
    background-color: var(--bb-bg-footer) !important;
}

/* Hero section */
.hero-section {
    background: var(--bb-bg-hero);
}

/* Form controls */
.form-control, .form-select {
    background-color: var(--bb-card-bg);
    border-color: var(--bb-form-border);
    color: var(--bb-text-primary);
}

.form-control:focus, .form-select:focus {
    background-color: var(--bb-card-bg);
    border-color: var(--bb-form-border-focus);
    box-shadow: 0 0 0 0.2rem var(--bb-form-shadow-focus);
}

/* Form groups and labels */
.form-group {
    background-color: transparent;
}

.form-label, label {
    color: var(--bb-text-primary);
}

.form-text {
    color: var(--bb-text-muted);
}

/* Input groups */
.input-group {
    background-color: var(--bb-card-bg);
}

.input-group-text {
    background-color: var(--bb-bg-secondary);
    border-color: var(--bb-form-border);
    color: var(--bb-text-primary);
}

/* Tables */
.table {
    background-color: var(--bb-table-bg);
    color: var(--bb-text-primary);
}

.table thead th {
    background-color: var(--bb-bg-secondary);
    border-color: var(--bb-table-border);
    color: var(--bb-text-primary);
}

.table tbody td {
    border-color: var(--bb-table-border);
}

.table-striped tbody tr:nth-of-type(odd) {
    background-color: var(--bb-table-stripe);
}

/* Table responsive wrapper */
.table-responsive {
    background-color: var(--bb-card-bg);
}

/* Specific table styling for Game History */
.table thead th {
    background-color: var(--bb-bg-secondary) !important;
    color: var(--bb-text-primary) !important;
}

/* List groups */
.list-group-item {
    background-color: var(--bb-card-bg);
    border-color: var(--bb-card-border);
    color: var(--bb-text-primary);
}

.list-group-item:hover {
    background-color: var(--bb-bg-secondary);
}

/* Alerts */
.alert-success {
    background-color: var(--bb-alert-success);
    border-color: var(--bb-alert-success);
    color: var(--bb-alert-success-text);
}

.alert-info {
    background-color: var(--bb-alert-info);
    border-color: var(--bb-alert-info);
    color: var(--bb-alert-info-text);
}

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

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

/* Progress bars */
.progress {
    background-color: var(--bb-progress-bg);
}

.progress-bar {
    background-color: var(--bb-progress-bar);
}

/* Badges */
.badge-light {
    background-color: var(--bb-badge-light);
    color: var(--bb-badge-light-text);
}



/* Smooth transitions for theme switching */
* {
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}

/* Override Bootstrap's default transitions for smoother theme switching */
.btn, .card, .navbar, .form-control, .table {
    transition: var(--bb-transition);
}

/* Additional elements that need theming */
.modal-content {
    background-color: var(--bb-card-bg);
    border-color: var(--bb-card-border);
}

.modal-header {
    background-color: var(--bb-card-bg);
    border-bottom-color: var(--bb-card-border);
}

.modal-body {
    background-color: var(--bb-card-bg);
}

.modal-footer {
    background-color: var(--bb-card-bg);
    border-top-color: var(--bb-card-border);
}

/* Dropdown menus */
.dropdown-menu {
    background-color: var(--bb-card-bg);
    border-color: var(--bb-card-border);
}

.dropdown-item {
    color: var(--bb-text-primary);
}

.dropdown-item:hover {
    background-color: var(--bb-bg-secondary);
    color: var(--bb-text-primary);
}

/* Pagination */
.pagination {
    background-color: transparent;
}

.page-link {
    background-color: var(--bb-card-bg);
    border-color: var(--bb-card-border);
    color: var(--bb-text-primary);
}

.page-link:hover {
    background-color: var(--bb-bg-secondary);
    border-color: var(--bb-card-border);
    color: var(--bb-text-primary);
}

.page-item.active .page-link {
    background-color: var(--bb-primary);
    border-color: var(--bb-primary);
}

/* Tooltips */
.tooltip-inner {
    background-color: var(--bb-bg-secondary);
    color: var(--bb-text-primary);
}

/* Popovers */
.popover {
    background-color: var(--bb-card-bg);
    border-color: var(--bb-card-border);
}

.popover-header {
    background-color: var(--bb-bg-secondary);
    border-bottom-color: var(--bb-card-border);
    color: var(--bb-text-primary);
}

.popover-body {
    background-color: var(--bb-card-bg);
    color: var(--bb-text-primary);
}

/* Ryujin (Dragon God) Theme - Grey, Light Blue, Dark Green, Ash, Brown */
[data-theme="ryujin"] {
    /* Primary Colors */
    --bb-primary: #8B4513; /* Brown */
    --bb-primary-dark: #654321; /* Dark Brown */
    --bb-secondary: #87CEEB; /* Light Blue */
    --bb-success: #006400; /* Dark Green */
    --bb-info: #87CEEB; /* Light Blue */
    --bb-warning: #DAA520; /* Goldenrod */
    --bb-danger: #B22222; /* Fire Brick */
    --bb-light: #F5F5F5; /* Light Grey */
    --bb-dark: #2F2F2F; /* Dark Grey */
    --bb-muted: #708090; /* Ash */
    
    /* Background Colors */
    --bb-bg-primary: #F5F5F5; /* Light Grey */
    --bb-bg-secondary: #E6F0FF; /* Light Blue tint */
    --bb-bg-tertiary: #D3D3D3; /* Grey */
    --bb-bg-card: #FFFFFF; /* White */
    --bb-bg-navbar: #2F2F2F; /* Dark Grey */
    --bb-bg-footer: #2F2F2F; /* Dark Grey */
    --bb-bg-hero: linear-gradient(135deg, #8B4513 0%, #87CEEB 50%, #006400 100%);
    
    /* Text Colors */
    --bb-text-primary: #2F2F2F; /* Dark Grey */
    --bb-text-secondary: #708090; /* Ash */
    --bb-text-muted: #A9A9A9; /* Grey */
    --bb-text-light: #F5F5F5; /* Light Grey */
    --bb-text-dark: #2F2F2F; /* Dark Grey */
    
    /* Card Colors */
    --bb-card-bg: #FFFFFF; /* White */
    --bb-card-border: #D3D3D3; /* Light Grey */
    --bb-card-shadow: 0 4px 6px rgba(47, 79, 79, 0.1);
    --bb-card-shadow-hover: 0 8px 25px rgba(47, 79, 79, 0.15);
    
    /* Button Colors */
    --bb-btn-primary: #8B4513; /* Brown */
    --bb-btn-primary-hover: #654321; /* Dark Brown */
    --bb-btn-success: #006400; /* Dark Green */
    --bb-btn-success-hover: #004d00; /* Darker Green */
    --bb-btn-info: #87CEEB; /* Light Blue */
    --bb-btn-info-hover: #6BB6FF; /* Darker Light Blue */
    --bb-btn-warning: #DAA520; /* Goldenrod */
    --bb-btn-warning-hover: #B8860B; /* Dark Goldenrod */
    --bb-btn-danger: #B22222; /* Fire Brick */
    --bb-btn-danger-hover: #8B0000; /* Dark Red */
    
    /* Form Colors */
    --bb-form-border: #D3D3D3; /* Light Grey */
    --bb-form-border-focus: #8B4513; /* Saddle Brown */
    --bb-form-shadow-focus: rgba(139, 69, 19, 0.25);
    
    /* Alert Colors */
    --bb-alert-success: #E6F3E6; /* Light Green */
    --bb-alert-success-text: #006400; /* Dark Green */
    --bb-alert-info: #E6F0FF; /* Light Blue */
    --bb-alert-info-text: #87CEEB; /* Light Blue */
    --bb-alert-warning: #FFF8DC; /* Cornsilk */
    --bb-alert-warning-text: #B8860B; /* Dark Goldenrod */
    --bb-alert-danger: #FFE6E6; /* Light Red */
    --bb-alert-danger-text: #8B0000; /* Dark Red */
    
    /* Table Colors */
    --bb-table-bg: #FFFFFF; /* White */
    --bb-table-border: #D3D3D3; /* Light Grey */
    --bb-table-stripe: #F5F5F5; /* Light Grey */
    
    /* Progress Bar Colors */
    --bb-progress-bg: #D3D3D3; /* Light Grey */
    --bb-progress-bar: #8B4513; /* Brown */
    
    /* Badge Colors */
    --bb-badge-light: #F5F5F5; /* Light Grey */
    --bb-badge-light-text: #8B4513; /* Brown */
}