/* RPG Font Import - Using Cinzel for headers and Inter for body */
@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;500;600;700&family=Inter:wght@300;400;500;600;700&display=swap');

/* Import reusable utility classes */
@import url('css/utilities.css');

/* RPG Theme Variables */
:root {
    /* Font Family Variables */
    --rpg-font-heading: 'Cinzel', 'Georgia', serif;
    --rpg-font-body: 'Inter', 'Segoe UI', 'Roboto', sans-serif;
    --rpg-font-mono: 'Consolas', 'Monaco', monospace;
    
    --rpg-bg-dark: #1a1a2e;
    --rpg-bg-panel: #16213e;
    --rpg-primary: #0f3460;
    --rpg-accent: #e94560;
    --rpg-text-main: #e0e0e0;
    --rpg-text-muted: #a0a0a0;
    --rpg-border: #2a2a4e;
    --rpg-success: #2ecc71;
    --rpg-warning: #f1c40f;
    --rpg-danger: #e74c3c;
    --rpg-info: #3498db;
    
    /* RGB values for rgba() usage */
    --rpg-primary-rgb: 15, 52, 96;
    --rpg-success-rgb: 46, 204, 113;
    --rpg-warning-rgb: 241, 196, 15;
    --rpg-danger-rgb: 231, 76, 60;
    --rpg-info-rgb: 52, 152, 219;
    
    /* UI Component Colors */
    --rpg-nav-hover: rgba(255, 255, 255, 0.05);
    --rpg-nav-active: rgba(15, 52, 96, 0.6);
    --rpg-top-row-bg: #16213e;
    --rpg-card-header-bg: rgba(0, 0, 0, 0.2);
    --rpg-input-bg: rgba(0, 0, 0, 0.2);
    --rpg-input-focus-bg: rgba(0, 0, 0, 0.3);
    
    /* Game-specific colors */
    --rpg-health-high: #28a745;
    --rpg-health-mid: #ffc107;
    --rpg-health-low: #dc3545;
    --rpg-xp-bar: #ffc107;
    --rpg-mana-bar: #3498db;
    
    /* Combat arena colors */
    --rpg-arena-bg: rgba(26, 26, 30, 0.95);
    --rpg-arena-card-bg: linear-gradient(145deg, rgba(30,30,34,0.95), rgba(22,22,26,0.95));
    --rpg-arena-card-border: rgba(255,255,255,0.08);
    --rpg-hero-accent: #28a745;
    --rpg-monster-accent: #dc3545;
    
    /* Rarity colors (consistent across themes) */
    --rpg-rarity-common: #9ca3af;
    --rpg-rarity-uncommon: #22c55e;
    --rpg-rarity-rare: #3b82f6;
    --rpg-rarity-epic: #a855f7;
    --rpg-rarity-legendary: #f59e0b;
    --rpg-rarity-mythic: #ef4444;
    
    /* Rarity colors - page level (for Bank/Inventory CSS) */
    --rarity-common: #9ca3af;
    --rarity-uncommon: #22c55e;
    --rarity-rare: #3b82f6;
    --rarity-epic: #a855f7;
    --rarity-legendary: #f59e0b;
    --rarity-mythic: #ef4444;
    
    /* Stat pill backgrounds */
    --rpg-stat-pill-bg: rgba(255, 255, 255, 0.15);
    
    /* Action tile backgrounds */
    --rpg-action-tile-bg: rgba(0, 0, 0, 0.2);
    --rpg-action-tile-hover: rgba(0, 0, 0, 0.3);
    
    /* Bootstrap variable overrides for dark theme (default) */
    --bs-body-bg: #1a1a2e;
    --bs-body-color: #e0e0e0;
    --bs-tertiary-bg: #16213e;
    --bs-secondary-bg: #1e2742;
    --bs-border-color: #2a2a4e;
    --bs-secondary-color: #a0a0a0;
    --bs-primary: #0f3460;
    --bs-success: #2ecc71;
    --bs-warning: #f1c40f;
    --bs-danger: #e74c3c;
    --bs-info: #3498db;
    
    /* Page-specific theme variables */
    --page-bg: var(--rpg-bg-dark);
    --page-card-bg: var(--rpg-bg-panel);
    --page-card-border: var(--rpg-border);
    --page-section-bg: rgba(255, 255, 255, 0.03);
    --page-section-hover: rgba(255, 255, 255, 0.05);
    --page-header-gradient: linear-gradient(135deg, var(--rpg-bg-panel) 0%, var(--rpg-bg-dark) 100%);
    --page-text-primary: var(--rpg-text-main);
    --page-text-secondary: var(--rpg-text-muted);
    --page-text-muted: #6b7280;
    --page-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
    --page-shadow-hover: 0 8px 30px rgba(0, 0, 0, 0.4);
    
    /* Gradient enhancements */
    --page-card-gradient: linear-gradient(145deg, rgba(22, 33, 62, 0.95), rgba(26, 26, 46, 0.9));
    --page-btn-primary-gradient: linear-gradient(135deg, #0f3460 0%, #1a4a8a 50%, #0f3460 100%);
    --page-btn-success-gradient: linear-gradient(135deg, #1e8449 0%, #2ecc71 50%, #1e8449 100%);
    --page-btn-danger-gradient: linear-gradient(135deg, #c0392b 0%, #e74c3c 50%, #c0392b 100%);
    --page-panel-gradient: linear-gradient(180deg, rgba(22, 33, 62, 0.8) 0%, rgba(26, 26, 46, 0.6) 100%);
    --page-nav-active-gradient: linear-gradient(135deg, rgba(15, 52, 96, 0.6) 0%, rgba(15, 52, 96, 0.3) 100%);
    --page-accent-glow: 0 0 20px rgba(15, 52, 96, 0.3);
}

/* Light Theme */
/* Gold Theme - Warm Royal Gold */
[data-theme="gold"] {
    --rpg-bg-dark: #12100a;
    --rpg-bg-panel: #1c1810;
    --rpg-primary: #2e2614;
    --rpg-accent: #d4a537;
    --rpg-text-main: #f2e8d0;
    --rpg-text-muted: #a89060;
    --rpg-border: #3d3018;
    --rpg-success: #6abf69;
    --rpg-warning: #f5c542;
    --rpg-danger: #e06050;
    --rpg-info: #d4a84b;

    --rpg-primary-rgb: 46, 38, 20;
    --rpg-success-rgb: 106, 191, 105;
    --rpg-warning-rgb: 245, 197, 66;
    --rpg-danger-rgb: 224, 96, 80;
    --rpg-info-rgb: 212, 168, 75;

    --rpg-nav-hover: rgba(212, 165, 55, 0.08);
    --rpg-nav-active: rgba(212, 165, 55, 0.25);
    --rpg-top-row-bg: #16130c;
    --rpg-card-header-bg: rgba(0, 0, 0, 0.35);
    --rpg-input-bg: rgba(0, 0, 0, 0.3);
    --rpg-input-focus-bg: rgba(0, 0, 0, 0.4);

    --rpg-arena-bg: rgba(18, 16, 10, 0.98);
    --rpg-arena-card-bg: linear-gradient(145deg, rgba(28,24,16,0.98), rgba(18,16,10,0.95));
    --rpg-arena-card-border: rgba(212, 165, 55, 0.12);

    --rpg-stat-pill-bg: rgba(212, 165, 55, 0.12);
    --rpg-action-tile-bg: rgba(0, 0, 0, 0.25);
    --rpg-action-tile-hover: rgba(0, 0, 0, 0.35);

    --bs-body-bg: #12100a;
    --bs-body-color: #f2e8d0;
    --bs-tertiary-bg: #1c1810;
    --bs-secondary-bg: #241e12;
    --bs-border-color: #3d3018;
    --bs-secondary-color: #a89060;
    --bs-primary: #d4a537;
    --bs-success: #6abf69;
    --bs-warning: #f5c542;
    --bs-danger: #e06050;
    --bs-info: #d4a84b;

    --page-bg: #12100a;
    --page-card-bg: #1c1810;
    --page-card-border: #3d3018;
    --page-section-bg: rgba(212, 165, 55, 0.04);
    --page-section-hover: rgba(212, 165, 55, 0.08);
    --page-header-gradient: linear-gradient(135deg, #1c1810 0%, #12100a 100%);
    --page-text-primary: #f2e8d0;
    --page-text-secondary: #a89060;
    --page-text-muted: #6b5a38;
    --page-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
    --page-shadow-hover: 0 8px 30px rgba(0, 0, 0, 0.5);
    
    /* Gradient enhancements */
    --page-card-gradient: linear-gradient(145deg, rgba(28, 24, 16, 0.95), rgba(18, 16, 10, 0.9));
    --page-btn-primary-gradient: linear-gradient(135deg, #8b6914 0%, #d4a537 50%, #8b6914 100%);
    --page-btn-success-gradient: linear-gradient(135deg, #3d7a3d 0%, #6abf69 50%, #3d7a3d 100%);
    --page-btn-danger-gradient: linear-gradient(135deg, #a83e30 0%, #e06050 50%, #a83e30 100%);
    --page-panel-gradient: linear-gradient(180deg, rgba(28, 24, 16, 0.85) 0%, rgba(18, 16, 10, 0.65) 100%);
    --page-nav-active-gradient: linear-gradient(135deg, rgba(212, 165, 55, 0.25) 0%, rgba(212, 165, 55, 0.1) 100%);
    --page-accent-glow: 0 0 20px rgba(212, 165, 55, 0.25);
}

/* Midnight Theme - Ultra Dark */
[data-theme="midnight"] {
    --rpg-bg-dark: #0a0a0f;
    --rpg-bg-panel: #111118;
    --rpg-primary: #1a1a2e;
    --rpg-accent: #6366f1;
    --rpg-text-main: #e2e8f0;
    --rpg-text-muted: #64748b;
    --rpg-border: #1e1e2e;
    --rpg-success: #10b981;
    --rpg-warning: #f59e0b;
    --rpg-danger: #ef4444;
    --rpg-info: #3b82f6;
    
    /* RGB values for rgba() usage */
    --rpg-primary-rgb: 26, 26, 46;
    --rpg-success-rgb: 16, 185, 129;
    --rpg-warning-rgb: 245, 158, 11;
    --rpg-danger-rgb: 239, 68, 68;
    --rpg-info-rgb: 59, 130, 246;
    
    --rpg-nav-hover: rgba(255, 255, 255, 0.03);
    --rpg-nav-active: rgba(99, 102, 241, 0.3);
    --rpg-top-row-bg: #0d0d14;
    --rpg-card-header-bg: rgba(0, 0, 0, 0.4);
    --rpg-input-bg: rgba(0, 0, 0, 0.4);
    --rpg-input-focus-bg: rgba(0, 0, 0, 0.5);
    
    --rpg-arena-bg: rgba(10, 10, 15, 0.98);
    --rpg-arena-card-bg: linear-gradient(145deg, rgba(17,17,24,0.98), rgba(10,10,15,0.95));
    --rpg-arena-card-border: rgba(255,255,255,0.05);
    
    --rpg-stat-pill-bg: rgba(255, 255, 255, 0.08);
    --rpg-action-tile-bg: rgba(0, 0, 0, 0.3);
    --rpg-action-tile-hover: rgba(0, 0, 0, 0.4);
    
    /* Scrollbar colors for midnight theme - more visible */
    --scrollbar-track: #161620;
    --scrollbar-thumb: #3a3a4e;
    --scrollbar-thumb-hover: #5a5a70;
    
    /* Bootstrap variable overrides for midnight theme */
    --bs-body-bg: #0a0a0f;
    --bs-body-color: #e2e8f0;
    --bs-tertiary-bg: #111118;
    --bs-secondary-bg: #161620;
    --bs-border-color: #1e1e2e;
    --bs-secondary-color: #64748b;
    --bs-primary: #6366f1;
    --bs-success: #10b981;
    --bs-warning: #f59e0b;
    --bs-danger: #ef4444;
    --bs-info: #3b82f6;
    
    /* Page-specific */
    --page-bg: #0a0a0f;
    --page-card-bg: #111118;
    --page-card-border: #1e1e2e;
    --page-section-bg: rgba(255, 255, 255, 0.02);
    --page-section-hover: rgba(255, 255, 255, 0.04);
    --page-header-gradient: linear-gradient(135deg, #111118 0%, #0a0a0f 100%);
    --page-text-primary: #e2e8f0;
    --page-text-secondary: #64748b;
    --page-text-muted: #475569;
    --page-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
    --page-shadow-hover: 0 8px 30px rgba(0, 0, 0, 0.6);
    
    /* Gradient enhancements */
    --page-card-gradient: linear-gradient(145deg, rgba(17, 17, 24, 0.98), rgba(10, 10, 15, 0.95));
    --page-btn-primary-gradient: linear-gradient(135deg, #4338ca 0%, #6366f1 50%, #4338ca 100%);
    --page-btn-success-gradient: linear-gradient(135deg, #065f46 0%, #10b981 50%, #065f46 100%);
    --page-btn-danger-gradient: linear-gradient(135deg, #b91c1c 0%, #ef4444 50%, #b91c1c 100%);
    --page-panel-gradient: linear-gradient(180deg, rgba(17, 17, 24, 0.9) 0%, rgba(10, 10, 15, 0.7) 100%);
    --page-nav-active-gradient: linear-gradient(135deg, rgba(99, 102, 241, 0.3) 0%, rgba(99, 102, 241, 0.1) 100%);
    --page-accent-glow: 0 0 20px rgba(99, 102, 241, 0.25);
}

/* Forest Theme - Earth & Nature Tones */
[data-theme="forest"] {
    --rpg-bg-dark: #0f1a0f;
    --rpg-bg-panel: #162016;
    --rpg-primary: #1e331e;
    --rpg-accent: #4ade80;
    --rpg-text-main: #d4e8d4;
    --rpg-text-muted: #6b8c6b;
    --rpg-border: #1e3320;
    --rpg-success: #22c55e;
    --rpg-warning: #eab308;
    --rpg-danger: #dc2626;
    --rpg-info: #34d399;

    --rpg-primary-rgb: 30, 51, 30;
    --rpg-success-rgb: 34, 197, 94;
    --rpg-warning-rgb: 234, 179, 8;
    --rpg-danger-rgb: 220, 38, 38;
    --rpg-info-rgb: 52, 211, 153;

    --rpg-nav-hover: rgba(74, 222, 128, 0.06);
    --rpg-nav-active: rgba(74, 222, 128, 0.2);
    --rpg-top-row-bg: #121c12;
    --rpg-card-header-bg: rgba(0, 0, 0, 0.3);
    --rpg-input-bg: rgba(0, 0, 0, 0.3);
    --rpg-input-focus-bg: rgba(0, 0, 0, 0.4);

    --rpg-arena-bg: rgba(15, 26, 15, 0.98);
    --rpg-arena-card-bg: linear-gradient(145deg, rgba(22,32,22,0.98), rgba(15,26,15,0.95));
    --rpg-arena-card-border: rgba(74, 222, 128, 0.08);

    --rpg-stat-pill-bg: rgba(74, 222, 128, 0.1);
    --rpg-action-tile-bg: rgba(0, 0, 0, 0.25);
    --rpg-action-tile-hover: rgba(0, 0, 0, 0.35);

    --bs-body-bg: #0f1a0f;
    --bs-body-color: #d4e8d4;
    --bs-tertiary-bg: #162016;
    --bs-secondary-bg: #1a2b1a;
    --bs-border-color: #1e3320;
    --bs-secondary-color: #6b8c6b;
    --bs-primary: #4ade80;
    --bs-success: #22c55e;
    --bs-warning: #eab308;
    --bs-danger: #dc2626;
    --bs-info: #34d399;

    --page-bg: #0f1a0f;
    --page-card-bg: #162016;
    --page-card-border: #1e3320;
    --page-section-bg: rgba(74, 222, 128, 0.03);
    --page-section-hover: rgba(74, 222, 128, 0.06);
    --page-header-gradient: linear-gradient(135deg, #162016 0%, #0f1a0f 100%);
    --page-text-primary: #d4e8d4;
    --page-text-secondary: #6b8c6b;
    --page-text-muted: #4a6b4a;
    --page-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
    --page-shadow-hover: 0 8px 30px rgba(0, 0, 0, 0.5);
    
    /* Gradient enhancements */
    --page-card-gradient: linear-gradient(145deg, rgba(22, 32, 22, 0.95), rgba(15, 26, 15, 0.9));
    --page-btn-primary-gradient: linear-gradient(135deg, #15803d 0%, #4ade80 50%, #15803d 100%);
    --page-btn-success-gradient: linear-gradient(135deg, #166534 0%, #22c55e 50%, #166534 100%);
    --page-btn-danger-gradient: linear-gradient(135deg, #991b1b 0%, #dc2626 50%, #991b1b 100%);
    --page-panel-gradient: linear-gradient(180deg, rgba(22, 32, 22, 0.85) 0%, rgba(15, 26, 15, 0.65) 100%);
    --page-nav-active-gradient: linear-gradient(135deg, rgba(74, 222, 128, 0.2) 0%, rgba(74, 222, 128, 0.08) 100%);
    --page-accent-glow: 0 0 20px rgba(74, 222, 128, 0.2);
}

/* Ocean Theme - Deep Blue & Teal */
[data-theme="ocean"] {
    --rpg-bg-dark: #0a1628;
    --rpg-bg-panel: #0f1f35;
    --rpg-primary: #1a2d4a;
    --rpg-accent: #22d3ee;
    --rpg-text-main: #cfe2f3;
    --rpg-text-muted: #5a80a8;
    --rpg-border: #1a3050;
    --rpg-success: #14b8a6;
    --rpg-warning: #f59e0b;
    --rpg-danger: #ef4444;
    --rpg-info: #0ea5e9;

    --rpg-primary-rgb: 26, 45, 74;
    --rpg-success-rgb: 20, 184, 166;
    --rpg-warning-rgb: 245, 158, 11;
    --rpg-danger-rgb: 239, 68, 68;
    --rpg-info-rgb: 14, 165, 233;

    --rpg-nav-hover: rgba(34, 211, 238, 0.06);
    --rpg-nav-active: rgba(34, 211, 238, 0.2);
    --rpg-top-row-bg: #0c1a2e;
    --rpg-card-header-bg: rgba(0, 0, 0, 0.3);
    --rpg-input-bg: rgba(0, 0, 0, 0.3);
    --rpg-input-focus-bg: rgba(0, 0, 0, 0.4);

    --rpg-arena-bg: rgba(10, 22, 40, 0.98);
    --rpg-arena-card-bg: linear-gradient(145deg, rgba(15,31,53,0.98), rgba(10,22,40,0.95));
    --rpg-arena-card-border: rgba(34, 211, 238, 0.08);

    --rpg-stat-pill-bg: rgba(34, 211, 238, 0.1);
    --rpg-action-tile-bg: rgba(0, 0, 0, 0.25);
    --rpg-action-tile-hover: rgba(0, 0, 0, 0.35);

    --bs-body-bg: #0a1628;
    --bs-body-color: #cfe2f3;
    --bs-tertiary-bg: #0f1f35;
    --bs-secondary-bg: #132740;
    --bs-border-color: #1a3050;
    --bs-secondary-color: #5a80a8;
    --bs-primary: #22d3ee;
    --bs-success: #14b8a6;
    --bs-warning: #f59e0b;
    --bs-danger: #ef4444;
    --bs-info: #0ea5e9;

    --page-bg: #0a1628;
    --page-card-bg: #0f1f35;
    --page-card-border: #1a3050;
    --page-section-bg: rgba(34, 211, 238, 0.03);
    --page-section-hover: rgba(34, 211, 238, 0.06);
    --page-header-gradient: linear-gradient(135deg, #0f1f35 0%, #0a1628 100%);
    --page-text-primary: #cfe2f3;
    --page-text-secondary: #5a80a8;
    --page-text-muted: #3d6088;
    --page-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
    --page-shadow-hover: 0 8px 30px rgba(0, 0, 0, 0.5);
    
    /* Gradient enhancements */
    --page-card-gradient: linear-gradient(145deg, rgba(15, 31, 53, 0.95), rgba(10, 22, 40, 0.9));
    --page-btn-primary-gradient: linear-gradient(135deg, #0891b2 0%, #22d3ee 50%, #0891b2 100%);
    --page-btn-success-gradient: linear-gradient(135deg, #0f766e 0%, #14b8a6 50%, #0f766e 100%);
    --page-btn-danger-gradient: linear-gradient(135deg, #b91c1c 0%, #ef4444 50%, #b91c1c 100%);
    --page-panel-gradient: linear-gradient(180deg, rgba(15, 31, 53, 0.85) 0%, rgba(10, 22, 40, 0.65) 100%);
    --page-nav-active-gradient: linear-gradient(135deg, rgba(34, 211, 238, 0.2) 0%, rgba(34, 211, 238, 0.08) 100%);
    --page-accent-glow: 0 0 20px rgba(34, 211, 238, 0.2);
}

/* Rose Gold Theme - Warm & Elegant */
[data-theme="rose-gold"] {
    --rpg-bg-dark: #1a1016;
    --rpg-bg-panel: #221620;
    --rpg-primary: #3d1f34;
    --rpg-accent: #f472b6;
    --rpg-text-main: #f0dde6;
    --rpg-text-muted: #9c7089;
    --rpg-border: #3d2234;
    --rpg-success: #34d399;
    --rpg-warning: #fbbf24;
    --rpg-danger: #fb7185;
    --rpg-info: #c084fc;

    --rpg-primary-rgb: 61, 31, 52;
    --rpg-success-rgb: 52, 211, 153;
    --rpg-warning-rgb: 251, 191, 36;
    --rpg-danger-rgb: 251, 113, 133;
    --rpg-info-rgb: 192, 132, 252;

    --rpg-nav-hover: rgba(244, 114, 182, 0.06);
    --rpg-nav-active: rgba(244, 114, 182, 0.2);
    --rpg-top-row-bg: #1c1218;
    --rpg-card-header-bg: rgba(0, 0, 0, 0.3);
    --rpg-input-bg: rgba(0, 0, 0, 0.3);
    --rpg-input-focus-bg: rgba(0, 0, 0, 0.4);

    --rpg-arena-bg: rgba(26, 16, 22, 0.98);
    --rpg-arena-card-bg: linear-gradient(145deg, rgba(34,22,32,0.98), rgba(26,16,22,0.95));
    --rpg-arena-card-border: rgba(244, 114, 182, 0.08);

    --rpg-stat-pill-bg: rgba(244, 114, 182, 0.1);
    --rpg-action-tile-bg: rgba(0, 0, 0, 0.25);
    --rpg-action-tile-hover: rgba(0, 0, 0, 0.35);

    --bs-body-bg: #1a1016;
    --bs-body-color: #f0dde6;
    --bs-tertiary-bg: #221620;
    --bs-secondary-bg: #2a1a26;
    --bs-border-color: #3d2234;
    --bs-secondary-color: #9c7089;
    --bs-primary: #f472b6;
    --bs-success: #34d399;
    --bs-warning: #fbbf24;
    --bs-danger: #fb7185;
    --bs-info: #c084fc;

    --page-bg: #1a1016;
    --page-card-bg: #221620;
    --page-card-border: #3d2234;
    --page-section-bg: rgba(244, 114, 182, 0.03);
    --page-section-hover: rgba(244, 114, 182, 0.06);
    --page-header-gradient: linear-gradient(135deg, #221620 0%, #1a1016 100%);
    --page-text-primary: #f0dde6;
    --page-text-secondary: #9c7089;
    --page-text-muted: #6b4a5e;
    --page-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
    --page-shadow-hover: 0 8px 30px rgba(0, 0, 0, 0.5);
    
    /* Gradient enhancements */
    --page-card-gradient: linear-gradient(145deg, rgba(34, 22, 32, 0.95), rgba(26, 16, 22, 0.9));
    --page-btn-primary-gradient: linear-gradient(135deg, #be185d 0%, #f472b6 50%, #be185d 100%);
    --page-btn-success-gradient: linear-gradient(135deg, #047857 0%, #34d399 50%, #047857 100%);
    --page-btn-danger-gradient: linear-gradient(135deg, #e11d48 0%, #fb7185 50%, #e11d48 100%);
    --page-panel-gradient: linear-gradient(180deg, rgba(34, 22, 32, 0.85) 0%, rgba(26, 16, 22, 0.65) 100%);
    --page-nav-active-gradient: linear-gradient(135deg, rgba(244, 114, 182, 0.2) 0%, rgba(244, 114, 182, 0.08) 100%);
    --page-accent-glow: 0 0 20px rgba(244, 114, 182, 0.2);
}

/* Root Application Styles */
html, body {
    font-family: var(--rpg-font-body);
    background-color: var(--rpg-bg-dark);
    color: var(--rpg-text-main);
    margin: 0;
    padding: 0;
    height: 100%;
    overflow: hidden; /* Prevent body scroll — content scrolls inside main */
    overscroll-behavior: none; /* Prevent pull-to-refresh on mobile */
}

/* App Root Container */
#app {
    height: 100%;
    background-color: var(--rpg-bg-dark);
    color: var(--rpg-text-main);
}

/* Ensure all major containers use theme background */
.page {
    background-color: var(--rpg-bg-dark);
    color: var(--rpg-text-main);
}

main {
    background-color: var(--rpg-bg-dark);
    color: var(--rpg-text-main);
}

.content {
    background-color: var(--rpg-bg-dark);
    color: var(--rpg-text-main);
}

a, .btn-link {
    color: var(--rpg-info);
}

/* Bootstrap Overrides for Dark Theme */
.card {
    background-color: var(--rpg-bg-panel);
    border: 1px solid var(--rpg-border);
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
    color: var(--rpg-text-main);
}

.card-header {
    background-color: var(--rpg-card-header-bg) !important;
    border-bottom: 1px solid var(--rpg-border);
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--rpg-text-main);
}

.form-control, .form-select {
    background-color: var(--rpg-input-bg);
    border: 1px solid var(--rpg-border);
    color: var(--rpg-text-main);
}

.form-control:focus, .form-select:focus {
    background-color: var(--rpg-input-focus-bg);
    border-color: var(--rpg-accent);
    color: var(--rpg-text-main);
    box-shadow: 0 0 0 0.25rem rgba(233, 69, 96, 0.25);
}

/* Modal Overrides */
.modal-content {
    background-color: var(--rpg-bg-panel);
    color: var(--rpg-text-main);
    border: 1px solid var(--rpg-border);
}

.modal-header {
    border-bottom: 1px solid var(--rpg-border);
}

.modal-footer {
    border-top: 1px solid var(--rpg-border);
}

.btn-close {
    filter: invert(1) grayscale(100%) brightness(200%);
}

.stat-box {
    background-color: rgba(0, 0, 0, 0.2);
    border: 1px solid var(--rpg-border);
}

.btn-primary {
    background-color: var(--rpg-primary);
    border-color: var(--rpg-primary);
}

.btn-primary:hover {
    background-color: #1a4b8c;
    border-color: #1a4b8c;
}

.text-muted {
    color: var(--rpg-text-muted) !important;
}

/* Typography - RPG Headers */
h1, h2, h3, h4, h5, h6,
.modal-title,
.page-header h1,
.card-header h5,
.section-header h3 {
    font-family: var(--rpg-font-heading);
    letter-spacing: 0.025em;
}

h1 { font-weight: 700; }
h2, h3 { font-weight: 600; }
h4, h5, h6 { font-weight: 500; }

/* Battle Log and Code - Monospace */
.battle-log-container,
code,
pre {
    font-family: var(--rpg-font-mono);
}

/* Custom RPG Components */
.rpg-stat-bar {
    height: 1.5rem;
    background-color: rgba(0, 0, 0, 0.4);
    border-radius: 0.25rem;
    overflow: hidden;
    position: relative;
}

.rpg-stat-fill {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8rem;
    font-weight: bold;
    text-shadow: 1px 1px 2px black;
    transition: width 0.3s ease;
}

.bg-hp { background: linear-gradient(90deg, #c0392b, #e74c3c); }
.bg-xp { background: linear-gradient(90deg, #27ae60, #2ecc71); }
.bg-mana { background: linear-gradient(90deg, #2980b9, #3498db); }

/* Rarity Colors */
.bg-purple {
    background-color: #9b59b6 !important;
    background: linear-gradient(135deg, #8e44ad, #9b59b6);
}

.bg-legendary {
    background-color: #f1c40f !important;
    background: linear-gradient(135deg, #f39c12, #f1c40f);
    color: #000 !important;
}

/* Text Colors */
.text-purple {
    color: #9b59b6 !important;
}

.text-legendary {
    color: #f1c40f !important;
    text-shadow: 0 0 2px rgba(241, 196, 15, 0.5);
}

/* Battle Log Styling */
.battle-log-container {
    background-color: rgba(0, 0, 0, 0.3);
    border: 1px solid var(--rpg-border);
    border-radius: 0.25rem;
    padding: 0.5rem;
    font-family: 'Consolas', 'Monaco', monospace;
    font-size: 0.9rem;
}

.battle-log-entry {
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    padding: 2px 0;
}

/* Navigation */
.sidebar {
    background-color: var(--rpg-bg-panel);
    background-image: linear-gradient(180deg, var(--rpg-bg-panel) 0%, var(--rpg-bg-dark) 70%);
}

.top-row {
    background-color: var(--rpg-top-row-bg);
    border-bottom: 1px solid var(--rpg-border);
    color: var(--rpg-text-main);
}

h1:focus {
    outline: none;
}

.valid.modified:not([type=checkbox]) {
    outline: 1px solid #26b050;
}

.invalid {
    outline: 1px solid #e50000;
}

.validation-message {
    color: #e50000;
}

.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvanPjdDAgNTVFjjMzIgNTUgMjY1Ljk1NjYgNTIgLjI2NTg0IDMyNS41IDU2IDMyNi4wMzggMjM4LjYxNyA5NCA9Mi4zMjYgOTMuNTEzIDY0Ljg1MTQgOTMuNzA1NCA5My43ODc1IDI5MSA5Ny40NjUxIDI4OS4wMzggOTkgMjY2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA6IDUgMjU3LjA0IDU4QUEwLjMuNTcgMC4zMDQ1IDAgMTUgMjYuMTYzIDAgMjY3LjAuNjdsLTguOTk5IDU3Ljg3di0zLjI4YzAuMDAzLjAwMSAwIDEuMTUyLjAwMS0zLjk5OS0yLjAwMi0xLjA2MS4wMDAyLS4wMDA0LjAwMS4yNTAYMjY6MDYyNTZlMjAlMkZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
}

    .blazor-error-boundary::after {
        content: "An error has occurred."
    }

.darker-border-checkbox.form-check-input {
    border-color: #929292;
}

.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
    color: var(--bs-secondary-color);
    text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
    text-align: start;
}

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

.spin {
    animation: spin 1s linear infinite;
}

/* Custom Scrollbar Styling */
::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

::-webkit-scrollbar-track {
    background: var(--scrollbar-track, var(--rpg-bg-dark));
    border-left: 1px solid var(--rpg-border);
}

::-webkit-scrollbar-thumb {
    background: var(--scrollbar-thumb, var(--rpg-border));
    border-radius: 5px;
    border: 2px solid var(--scrollbar-track, var(--rpg-bg-dark));
}

::-webkit-scrollbar-thumb:hover {
    background: var(--scrollbar-thumb-hover, var(--rpg-primary));
}

/* Firefox Scrollbar */
* {
    scrollbar-width: thin;
    scrollbar-color: var(--scrollbar-thumb, var(--rpg-border)) var(--scrollbar-track, var(--rpg-bg-dark));
}

/* Midnight theme specific scrollbar override for even better visibility */
[data-theme="midnight"] ::-webkit-scrollbar-track {
    background: #161620;
    border-left: 1px solid #2a2a40;
}

[data-theme="midnight"] ::-webkit-scrollbar-thumb {
    background: #4a4a60;
    border: 2px solid #161620;
}

[data-theme="midnight"] ::-webkit-scrollbar-thumb:hover {
    background: #6366f1;
}

[data-theme="midnight"] * {
    scrollbar-color: #4a4a60 #161620;
}

/* ========================================
   ADMIN TABLE STYLING - Theme Compliance
   ======================================== */

/* Base table styling for all themes */
.table {
    color: var(--rpg-text-main);
}

.table > thead {
    background-color: var(--rpg-card-header-bg);
    color: var(--page-text-secondary);
}

.table > thead > tr > th {
    color: var(--page-text-secondary);
    border-bottom-color: var(--rpg-border);
    font-weight: 600;
}

.table > tbody > tr {
    color: var(--page-text-primary);
}

.table > tbody > tr > td {
    border-bottom-color: var(--rpg-border);
    color: var(--page-text-secondary);
    vertical-align: middle;
}

.table-hover > tbody > tr:hover {
    background-color: var(--page-section-hover);
    color: var(--page-text-primary);
}

/* Midnight theme specific table fixes */
[data-theme="midnight"] .table > tbody > tr > td {
    color: var(--page-text-secondary);
}

[data-theme="midnight"] .table > tbody > tr:hover > td {
    color: var(--page-text-primary);
}

[data-theme="midnight"] .table > thead > tr > th {
    color: var(--page-text-secondary);
    background-color: rgba(0, 0, 0, 0.3);
}

/* Fix text colors in table for all dark themes */
[data-theme="midnight"] .table .fw-bold,
[data-theme="midnight"] .table a,
[data-theme="dark"] .table .fw-bold,
[data-theme="dark"] .table a {
    color: var(--page-text-primary);
}

[data-theme="midnight"] .table .text-muted,
[data-theme="dark"] .table .text-muted {
    color: var(--page-text-muted) !important;
}

/* Table row item names - ensure visibility */
.table .item-name,
.table .fw-bold {
    color: var(--page-text-primary);
}

/* Admin table specific styling */
.table.table-hover tbody tr td {
    color: var(--page-text-secondary);
}

/* Admin modal tabs styling */
.admin-modal-tabs .nav-link {
    color: var(--page-text-secondary);
    border: none;
    background: transparent;
}

.admin-modal-tabs .nav-link:hover {
    color: var(--page-text-primary);
    border-color: transparent;
}

.admin-modal-tabs .nav-link.active {
    color: var(--page-text-primary);
    background: var(--content-background);
    border-color: var(--border-color) var(--border-color) transparent;
}

/* Stats text in tables */
.table .stat-text {
    color: var(--page-text-secondary);
}

/* ========================================
   DESIGN SYSTEM - Shared Component Styles
   ======================================== */

/* Page Header Styles */
.page-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
    flex-wrap: wrap;
    gap: 1rem;
}

.page-header h1 {
    font-size: 1.75rem;
    font-weight: 700;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    color: var(--rpg-text-main);
}

.page-header h1 i {
    color: var(--rpg-primary);
}

/* Animated Gradients */
.gradient-text {
    background: linear-gradient(135deg, var(--rpg-primary), var(--rpg-accent));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Hover Card Effect */
.hover-lift {
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.hover-lift:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
}

/* Glass Effect */
.glass-effect {
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

/* Glow Effects */
.glow-primary {
    box-shadow: 0 0 20px rgba(15, 52, 96, 0.4);
}

.glow-success {
    box-shadow: 0 0 20px rgba(40, 167, 69, 0.4);
}

.glow-warning {
    box-shadow: 0 0 20px rgba(255, 193, 7, 0.4);
}

.glow-danger {
    box-shadow: 0 0 20px rgba(220, 53, 69, 0.4);
}

/* Pulse Animation */
@keyframes pulse-glow {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.6; }
}

.pulse-glow {
    animation: pulse-glow 2s ease-in-out infinite;
}

/* Skeleton Loading */
.skeleton {
    background: linear-gradient(
        90deg,
        var(--rpg-bg-panel) 25%,
        var(--rpg-border) 50%,
        var(--rpg-bg-panel) 75%
    );
    background-size: 200% 100%;
    animation: skeleton-shimmer 1.5s infinite;
    border-radius: 0.375rem;
}

@keyframes skeleton-shimmer {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* Fade In Animation */
@keyframes fade-in {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

.fade-in {
    animation: fade-in 0.3s ease-out;
}

/* Stagger Animation */
.stagger-fade > * {
    opacity: 0;
    animation: fade-in 0.3s ease-out forwards;
}

.stagger-fade > *:nth-child(1) { animation-delay: 0.05s; }
.stagger-fade > *:nth-child(2) { animation-delay: 0.1s; }
.stagger-fade > *:nth-child(3) { animation-delay: 0.15s; }
.stagger-fade > *:nth-child(4) { animation-delay: 0.2s; }
.stagger-fade > *:nth-child(5) { animation-delay: 0.25s; }
.stagger-fade > *:nth-child(6) { animation-delay: 0.3s; }

/* Badge Styles */
.badge-pill {
    padding: 0.25rem 0.75rem;
    border-radius: 9999px;
    font-size: 0.75rem;
    font-weight: 600;
}

/* Chip Styles */
.chip {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.875rem;
    background: var(--rpg-bg-panel);
    border: 1px solid var(--rpg-border);
    border-radius: 2rem;
    font-size: 0.875rem;
    font-weight: 500;
    transition: all 0.2s ease;
}

.chip:hover {
    background: var(--rpg-nav-hover);
}

.chip.active {
    background: var(--rpg-primary);
    border-color: var(--rpg-primary);
    color: white;
}

/* Divider */
.divider {
    height: 1px;
    background: var(--rpg-border);
    margin: 1rem 0;
}

.divider-vertical {
    width: 1px;
    height: 100%;
    background: var(--rpg-border);
}

/* Icon Containers */
.icon-box {
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 0.5rem;
    flex-shrink: 0;
}

.icon-box-sm { width: 32px; height: 32px; }
.icon-box-md { width: 40px; height: 40px; }
.icon-box-lg { width: 48px; height: 48px; }
.icon-box-xl { width: 64px; height: 64px; }

/* Status Indicators */
.status-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}

.status-dot.online { background: var(--rpg-success); }
.status-dot.offline { background: var(--rpg-text-muted); }
.status-dot.busy { background: var(--rpg-danger); }
.status-dot.away { background: var(--rpg-warning); }

/* Truncate Text */
.truncate {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.line-clamp-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.line-clamp-3 {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Focus Visible */
.focus-ring:focus-visible {
    outline: 2px solid var(--rpg-primary);
    outline-offset: 2px;
}

/* Responsive Utilities */
@media (max-width: 576px) {
    .hide-mobile { display: none !important; }
}

@media (min-width: 577px) {
    .hide-desktop { display: none !important; }
}

/* Touch-friendly tap targets */
@media (hover: none) {
    .tap-target {
        min-height: 44px;
        min-width: 44px;
    }
}

/* Safe area padding for mobile devices */
.safe-area-bottom {
    padding-bottom: env(safe-area-inset-bottom, 0);
}

.safe-area-top {
    padding-top: env(safe-area-inset-top, 0);
}

/* Transition Utilities */
.transition-all { transition: all 0.2s ease; }
.transition-fast { transition: all 0.1s ease; }
.transition-slow { transition: all 0.3s ease; }

/* Reduce motion for accessibility */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* ========================================
   SHARED SCROLLBAR STYLING
   ======================================== */

/* Scrollable container with consistent styling */
.q-scroll {
    scrollbar-width: thin;
    scrollbar-color: var(--scrollbar-thumb, var(--rpg-border)) var(--scrollbar-track, var(--rpg-bg-dark));
}

.q-scroll::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

.q-scroll::-webkit-scrollbar-track {
    background: var(--scrollbar-track, var(--rpg-bg-dark));
    border-radius: 4px;
}

.q-scroll::-webkit-scrollbar-thumb {
    background: var(--scrollbar-thumb, var(--rpg-border));
    border-radius: 4px;
}

.q-scroll::-webkit-scrollbar-thumb:hover {
    background: var(--scrollbar-thumb-hover, var(--rpg-primary));
}

/* Thin scrollbar variant */
.q-scroll-thin::-webkit-scrollbar {
    width: 4px;
    height: 4px;
}

/* Hide scrollbar but allow scroll */
.q-scroll-hidden {
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.q-scroll-hidden::-webkit-scrollbar {
    display: none;
}

/* ========================================
   GLOBAL DROPDOWN & SELECT STYLING
   ======================================== */

/* Base Select/Dropdown Styling */
select,
.form-select {
    background-color: var(--page-card-bg);
    border: 1px solid var(--page-card-border);
    color: var(--page-text-primary);
    border-radius: 8px;
    padding: 0.5rem 2rem 0.5rem 0.75rem;
    font-size: 0.875rem;
    font-family: var(--rpg-font-body);
    cursor: pointer;
    transition: all 0.2s ease;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23a0a0a0' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
    background-size: 12px;
}

select:hover,
.form-select:hover {
    border-color: var(--rpg-primary);
    background-color: var(--page-section-hover);
}

select:focus,
.form-select:focus {
    border-color: var(--rpg-primary);
    outline: none;
    box-shadow: 0 0 0 3px rgba(15, 52, 96, 0.2);
    background-color: var(--page-card-bg);
}

select option,
.form-select option {
    background-color: var(--page-card-bg);
    color: var(--page-text-primary);
    padding: 0.5rem;
}

/* Filter Select - Compact variant for filter panels */
.filter-select {
    background-color: var(--page-card-bg);
    border: 1px solid var(--page-card-border);
    color: var(--page-text-primary);
    border-radius: 8px;
    padding: 0.5rem 2rem 0.5rem 0.75rem;
    font-size: 0.875rem;
    width: 100%;
    cursor: pointer;
    transition: all 0.2s ease;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23a0a0a0' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 0.75rem center;
    background-size: 12px;
}

.filter-select:hover {
    border-color: var(--rpg-primary);
}

.filter-select:focus {
    border-color: var(--rpg-primary);
    outline: none;
    box-shadow: 0 0 0 2px rgba(15, 52, 96, 0.15);
}

/* Inline Select - For use within other controls */
.inline-select {
    background-color: var(--page-section-bg);
    border: 1px solid var(--page-card-border);
    color: var(--page-text-primary);
    border-radius: 6px;
    padding: 0.375rem 1.75rem 0.375rem 0.625rem;
    font-size: 0.8rem;
    cursor: pointer;
    transition: all 0.2s ease;
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23a0a0a0' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 0.5rem center;
    background-size: 10px;
}

/* ========================================
   TABLE STYLING - Theme Aware
   ======================================== */

/* Table base */
.table {
    color: var(--page-text-primary);
    border-color: var(--page-card-border);
}

/* Table header - theme aware (replaces table-light) */
.table thead th {
    background-color: var(--page-section-bg);
    color: var(--page-text-primary);
    border-bottom: 2px solid var(--page-card-border);
    font-weight: 600;
    text-transform: uppercase;
    font-size: 0.75rem;
    letter-spacing: 0.05em;
    padding: 0.75rem;
}

.table tbody td {
    border-bottom: 1px solid var(--page-card-border);
    padding: 0.75rem;
    vertical-align: middle;
}

/* Table hover */
.table-hover tbody tr:hover {
    background-color: var(--page-section-hover);
}

/* Table striped */
.table-striped tbody tr:nth-of-type(odd) {
    background-color: var(--page-section-bg);
}

/* Table danger row (for banned users, etc.) */
.table-danger {
    background-color: rgba(231, 76, 60, 0.15) !important;
}

/* Table sm variant */
.table-sm thead th,
.table-sm tbody td {
    padding: 0.5rem;
}

/* Table text visibility for all themes */
.table tbody td small,
.table tbody td .small {
    color: var(--page-text-secondary);
}

.table tbody td .fw-bold {
    color: var(--page-text-primary);
}

/* Card footer styling */
.card-footer {
    background-color: var(--rpg-card-header-bg);
    border-top: 1px solid var(--page-card-border);
    padding: 0.75rem 1rem;
}

/* Input group addon styling */
.input-group-text {
    background-color: var(--page-section-bg);
    border: 1px solid var(--page-card-border);
    color: var(--page-text-secondary);
}

/* Missing Localization Key Indicator */
.localization-missing {
    background: linear-gradient(90deg, rgba(234, 179, 8, 0.3) 0%, rgba(234, 179, 8, 0.1) 100%);
    color: #eab308 !important;
    padding: 0 2px;
    border-radius: 2px;
    animation: missing-key-pulse 2s ease-in-out infinite;
}

@keyframes missing-key-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.7; }
}