/* ============================================
   OPEN TENEBRIS - UNIVERSAL CSS
   20 Complete Themes | Full Browser Support
   ============================================ */

/* ========== CSS RESET & BASE ========== */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    font-size: 16px;
    scroll-behavior: smooth;
}

body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    line-height: 1.6;
    transition: background-color 0.3s ease, color 0.3s ease;
}

/* ========== THEME 1: NEO-NOIR ========== */
.theme-neo-noir {
    --primary: #00ff9d;
    --primary-dark: #00cc7a;
    --primary-rgb: 0, 255, 157;
    --bg-deep: #0a0c0f;
    --bg-mid: #13171c;
    --bg-surface: #1e2329;
    --text-primary: #ffffff;
    --text-secondary: #b0b8c5;
    --border: #2a313a;
    --success: #00ff9d;
    --warning: #ffb347;
    --error: #ff4d4d;
    --glow: 0 0 20px rgba(0, 255, 157, 0.3);
}

/* ========== THEME 2: MATRIX ========== */
.theme-matrix {
    --primary: #00ff00;
    --primary-dark: #00cc00;
    --primary-rgb: 0, 255, 0;
    --bg-deep: #000000;
    --bg-mid: #0a1a0a;
    --bg-surface: #0f2a0f;
    --text-primary: #00ff00;
    --text-secondary: #32cd32;
    --border: #1a3a1a;
    --success: #00ff00;
    --warning: #ffff00;
    --error: #ff0000;
    --glow: 0 0 15px #00ff00;
}

/* ========== THEME 3: CYBER ORANGE ========== */
.theme-cyber-orange {
    --primary: #ff6b00;
    --primary-dark: #cc5500;
    --primary-rgb: 255, 107, 0;
    --bg-deep: #0c0a0a;
    --bg-mid: #1a1512;
    --bg-surface: #2a221c;
    --text-primary: #ffffff;
    --text-secondary: #ffaa66;
    --border: #3a3028;
    --success: #00ff9d;
    --warning: #ffaa00;
    --error: #ff3366;
    --glow: 0 0 20px rgba(255, 107, 0, 0.3);
}

/* ========== THEME 4: DEEP OCEAN ========== */
.theme-deep-ocean {
    --primary: #00b8ff;
    --primary-dark: #0099cc;
    --primary-rgb: 0, 184, 255;
    --bg-deep: #001220;
    --bg-mid: #001f3f;
    --bg-surface: #002b55;
    --text-primary: #e0f2fe;
    --text-secondary: #7ec8ff;
    --border: #003b6f;
    --success: #2ecc71;
    --warning: #f39c12;
    --error: #e74c3c;
    --glow: 0 0 30px rgba(0, 184, 255, 0.2);
}

/* ========== THEME 5: BLOOD RED ========== */
.theme-blood-red {
    --primary: #ff1744;
    --primary-dark: #d50000;
    --primary-rgb: 255, 23, 68;
    --bg-deep: #1a0c0c;
    --bg-mid: #2a1212;
    --bg-surface: #3a1a1a;
    --text-primary: #ffffff;
    --text-secondary: #ff8a80;
    --border: #4a2222;
    --success: #00e676;
    --warning: #ffd600;
    --error: #ff1744;
    --glow: 0 0 25px rgba(255, 23, 68, 0.3);
}

/* ========== THEME 6: GHOST ========== */
.theme-ghost {
    --primary: #ffffff;
    --primary-dark: #e0e0e0;
    --primary-rgb: 255, 255, 255;
    --bg-deep: #0f0f0f;
    --bg-mid: #1a1a1a;
    --bg-surface: #252525;
    --text-primary: #ffffff;
    --text-secondary: #cccccc;
    --border: #333333;
    --success: #4caf50;
    --warning: #ffc107;
    --error: #f44336;
    --glow: 0 0 15px rgba(255, 255, 255, 0.2);
}

/* ========== THEME 7: NEON PURPLE ========== */
.theme-neon-purple {
    --primary: #bf00ff;
    --primary-dark: #9900cc;
    --primary-rgb: 191, 0, 255;
    --bg-deep: #0c0a1a;
    --bg-mid: #1a122a;
    --bg-surface: #2a1a3a;
    --text-primary: #ffffff;
    --text-secondary: #e0b0ff;
    --border: #3a224a;
    --success: #00ffaa;
    --warning: #ffaa00;
    --error: #ff44aa;
    --glow: 0 0 25px #bf00ff;
}

/* ========== THEME 8: ARCTIC ========== */
.theme-arctic {
    --primary: #7df9ff;
    --primary-dark: #5ad1d9;
    --primary-rgb: 125, 249, 255;
    --bg-deep: #0a1a2a;
    --bg-mid: #122b3c;
    --bg-surface: #1a3c4e;
    --text-primary: #ffffff;
    --text-secondary: #b3e5fc;
    --border: #2a4d60;
    --success: #a5d6a5;
    --warning: #ffe082;
    --error: #ef9a9a;
    --glow: 0 0 30px rgba(125, 249, 255, 0.2);
}

/* ========== THEME 9: NUCLEAR ========== */
.theme-nuclear {
    --primary: #39ff14;
    --primary-dark: #2ecc11;
    --primary-rgb: 57, 255, 20;
    --bg-deep: #1a2a0a;
    --bg-mid: #2a3c12;
    --bg-surface: #3a4e1a;
    --text-primary: #ffff99;
    --text-secondary: #ccff66;
    --border: #4a6022;
    --success: #39ff14;
    --warning: #ffff33;
    --error: #ff3300;
    --glow: 0 0 20px #39ff14;
}

/* ========== THEME 10: OBSIDIAN ========== */
.theme-obsidian {
    --primary: #ff6b6b;
    --primary-dark: #ff5252;
    --primary-rgb: 255, 107, 107;
    --bg-deep: #2c3e50;
    --bg-mid: #34495e;
    --bg-surface: #3d566e;
    --text-primary: #ecf0f1;
    --text-secondary: #bdc3c7;
    --border: #4a6a8a;
    --success: #2ecc71;
    --warning: #f1c40f;
    --error: #e74c3c;
    --glow: 0 0 25px rgba(255, 107, 107, 0.2);
}

/* ========== THEME 11: SOLAR FLARE ========== */
.theme-solar-flare {
    --primary: #ffaa00;
    --primary-dark: #ff8800;
    --primary-rgb: 255, 170, 0;
    --bg-deep: #1a0a00;
    --bg-mid: #2a1508;
    --bg-surface: #3a2010;
    --text-primary: #fff5e0;
    --text-secondary: #ffd699;
    --border: #4a2a18;
    --success: #00ff88;
    --warning: #ffaa00;
    --error: #ff4422;
    --glow: 0 0 30px #ffaa00;
}

/* ========== THEME 12: ELECTRIC BLUE ========== */
.theme-electric-blue {
    --primary: #00e5ff;
    --primary-dark: #00b3cc;
    --primary-rgb: 0, 229, 255;
    --bg-deep: #0a0f1a;
    --bg-mid: #0f1a2a;
    --bg-surface: #15253a;
    --text-primary: #ffffff;
    --text-secondary: #aaddff;
    --border: #1a304a;
    --success: #00ffaa;
    --warning: #ffcc00;
    --error: #ff3366;
    --glow: 0 0 25px #00e5ff;
}

/* ========== THEME 13: MIDNIGHT ========== */
.theme-midnight {
    --primary: #9b59b6;
    --primary-dark: #8e44ad;
    --primary-rgb: 155, 89, 182;
    --bg-deep: #0a0a0f;
    --bg-mid: #0f0f1a;
    --bg-surface: #151525;
    --text-primary: #ffffff;
    --text-secondary: #c9b6e0;
    --border: #1a1a2e;
    --success: #2ecc71;
    --warning: #f1c40f;
    --error: #e74c3c;
    --glow: 0 0 20px rgba(155, 89, 182, 0.3);
}

/* ========== THEME 14: FOREST ========== */
.theme-forest {
    --primary: #2ecc71;
    --primary-dark: #27ae60;
    --primary-rgb: 46, 204, 113;
    --bg-deep: #0a1a0f;
    --bg-mid: #0f2a18;
    --bg-surface: #153a22;
    --text-primary: #ffffff;
    --text-secondary: #a8e6cf;
    --border: #1a4a2a;
    --success: #2ecc71;
    --warning: #f39c12;
    --error: #e74c3c;
    --glow: 0 0 20px rgba(46, 204, 113, 0.3);
}

/* ========== THEME 15: SUNSET ========== */
.theme-sunset {
    --primary: #ff6b6b;
    --primary-dark: #ff4757;
    --primary-rgb: 255, 107, 107;
    --bg-deep: #1a0a0a;
    --bg-mid: #2a1512;
    --bg-surface: #3a2018;
    --text-primary: #ffffff;
    --text-secondary: #ffcca8;
    --border: #3a2018;
    --success: #00ff88;
    --warning: #ffaa00;
    --error: #ff6b6b;
    --glow: 0 0 25px rgba(255, 107, 107, 0.3);
}

/* ========== THEME 16: GALACTIC ========== */
.theme-galactic {
    --primary: #ff00ff;
    --primary-dark: #cc00cc;
    --primary-rgb: 255, 0, 255;
    --bg-deep: #050510;
    --bg-mid: #0a0a20;
    --bg-surface: #101030;
    --text-primary: #ffffff;
    --text-secondary: #ffccff;
    --border: #202050;
    --success: #00ffcc;
    --warning: #ffcc00;
    --error: #ff00ff;
    --glow: 0 0 30px #ff00ff;
}

/* ========== THEME 17: STEEL ========== */
.theme-steel {
    --primary: #7f8c8d;
    --primary-dark: #6c7a7a;
    --primary-rgb: 127, 140, 141;
    --bg-deep: #1a1f20;
    --bg-mid: #232a2c;
    --bg-surface: #2d3538;
    --text-primary: #ffffff;
    --text-secondary: #bdc3c7;
    --border: #364044;
    --success: #2ecc71;
    --warning: #f1c40f;
    --error: #e74c3c;
    --glow: 0 0 20px rgba(127, 140, 141, 0.2);
}

/* ========== THEME 18: COSMIC ========== */
.theme-cosmic {
    --primary: #ff00aa;
    --primary-dark: #cc0088;
    --primary-rgb: 255, 0, 170;
    --bg-deep: #080012;
    --bg-mid: #100025;
    --bg-surface: #180035;
    --text-primary: #ffffff;
    --text-secondary: #ffccff;
    --border: #2a0055;
    --success: #00ffaa;
    --warning: #ffcc00;
    --error: #ff00aa;
    --glow: 0 0 35px #ff00aa;
}

/* ========== THEME 19: EMERALD ========== */
.theme-emerald {
    --primary: #00ff88;
    --primary-dark: #00cc66;
    --primary-rgb: 0, 255, 136;
    --bg-deep: #0a1a0f;
    --bg-mid: #0f2a18;
    --bg-surface: #153a22;
    --text-primary: #ffffff;
    --text-secondary: #88ffcc;
    --border: #1a4a2a;
    --success: #00ff88;
    --warning: #ffcc00;
    --error: #ff3366;
    --glow: 0 0 20px #00ff88;
}

/* ========== THEME 20: RUBY ========== */
.theme-ruby {
    --primary: #ff0033;
    --primary-dark: #cc0022;
    --primary-rgb: 255, 0, 51;
    --bg-deep: #1a0a0a;
    --bg-mid: #2a0f0f;
    --bg-surface: #3a1515;
    --text-primary: #ffffff;
    --text-secondary: #ffaaaa;
    --border: #4a1a1a;
    --success: #00ff88;
    --warning: #ffcc00;
    --error: #ff0033;
    --glow: 0 0 25px #ff0033;
}

/* ========== BASE STYLES ========== */
body {
    background-color: var(--bg-deep);
    color: var(--text-primary);
}

a {
    color: var(--primary);
    text-decoration: none;
    transition: all 0.2s ease;
}

a:hover {
    color: var(--primary-dark);
}

.btn, button {
    background: var(--primary);
    color: var(--bg-deep);
    border: none;
    padding: 10px 20px;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn:hover, button:hover {
    background: var(--primary-dark);
    transform: translateY(-2px);
}

.card {
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 20px;
    transition: all 0.2s ease;
}

.card:hover {
    transform: translateY(-4px);
    box-shadow: var(--glow);
}

input, textarea, select {
    background: var(--bg-surface);
    border: 1px solid var(--border);
    color: var(--text-primary);
    padding: 10px;
    border-radius: 4px;
    width: 100%;
}

input:focus, textarea:focus, select:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: var(--glow);
}

table {
    width: 100%;
    border-collapse: collapse;
}

th {
    background: var(--bg-surface);
    color: var(--primary);
    padding: 12px;
    text-align: left;
    border-bottom: 2px solid var(--primary);
}

td {
    padding: 10px;
    border-bottom: 1px solid var(--border);
    color: var(--text-secondary);
}

tr:hover td {
    background: var(--bg-surface);
}

/* ========== UTILITY CLASSES ========== */
.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

.text-primary { color: var(--primary); }
.text-secondary { color: var(--text-secondary); }
.bg-surface { background: var(--bg-surface); }
.border-primary { border-color: var(--primary); }
.glow { box-shadow: var(--glow); }

/* ========== RESPONSIVE ========== */
@media (max-width: 768px) {
    .container {
        padding: 0 15px;
    }
    
    .card {
        padding: 15px;
    }
}

/* ========== ANIMATIONS ========== */
@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes slideUp {
    from {
        transform: translateY(20px);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

.fade-in { animation: fadeIn 0.3s ease; }
.slide-up { animation: slideUp 0.3s ease; }

/* ========== THEME SWITCHER ========== */
.theme-switcher {
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 1000;
    background: var(--bg-surface);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 10px;
    display: flex;
    gap: 5px;
    flex-wrap: wrap;
    max-width: 220px;
    backdrop-filter: blur(10px);
}

.theme-dot {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    cursor: pointer;
    transition: all 0.2s ease;
    border: 2px solid transparent;
}

.theme-dot:hover {
    transform: scale(1.1);
}

.theme-dot.active {
    border-color: white;
    box-shadow: 0 0 10px currentColor;
}

/* Theme dot colors */
.dot-neo-noir { background: #00ff9d; }
.dot-matrix { background: #00ff00; }
.dot-cyber-orange { background: #ff6b00; }
.dot-deep-ocean { background: #00b8ff; }
.dot-blood-red { background: #ff1744; }
.dot-ghost { background: #ffffff; }
.dot-neon-purple { background: #bf00ff; }
.dot-arctic { background: #7df9ff; }
.dot-nuclear { background: #39ff14; }
.dot-obsidian { background: #ff6b6b; }
.dot-solar-flare { background: #ffaa00; }
.dot-electric-blue { background: #00e5ff; }
.dot-midnight { background: #9b59b6; }
.dot-forest { background: #2ecc71; }
.dot-sunset { background: #ff6b6b; }
.dot-galactic { background: #ff00ff; }
.dot-steel { background: #7f8c8d; }
.dot-cosmic { background: #ff00aa; }
.dot-emerald { background: #00ff88; }
.dot-ruby { background: #ff0033; }

/* Theme switcher JavaScript */

/* ========== ENSURE BACKGROUNDS DISPLAY PROPERLY ========== */
body {
    background-color: var(--bg-deep);
    color: var(--text-primary);
    position: relative;
    min-height: 100vh;
}

/* Force backgrounds to show */
.bg-liquid,
.bg-grid {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    z-index: -1 !important;
    pointer-events: none !important;
}

.bg-liquid {
    background: radial-gradient(circle at 30% 50%, var(--primary) 0%, transparent 40%),
                radial-gradient(circle at 70% 80%, var(--success) 0%, transparent 45%),
                radial-gradient(circle at 10% 20%, var(--info) 0%, transparent 35%);
    filter: blur(60px);
    opacity: 0.3;
    animation: liquidShift 20s ease-in-out infinite alternate;
}

.bg-grid {
    background-image: linear-gradient(rgba(var(--primary-rgb, 0, 255, 157), 0.05) 1px, transparent 1px),
                      linear-gradient(90deg, rgba(var(--primary-rgb, 0, 255, 157), 0.05) 1px, transparent 1px);
    background-size: 50px 50px;
    opacity: 0.5;
}

/* Fix for themes without RGB variables */
.theme-matrix { --primary-rgb: 0, 255, 0; }
.theme-cyber-orange { --primary-rgb: 255, 107, 0; }
.theme-deep-ocean { --primary-rgb: 0, 184, 255; }
.theme-blood-red { --primary-rgb: 255, 23, 68; }
.theme-ghost { --primary-rgb: 255, 255, 255; }
.theme-neon-purple { --primary-rgb: 191, 0, 255; }
.theme-arctic { --primary-rgb: 125, 249, 255; }
.theme-nuclear { --primary-rgb: 57, 255, 20; }
.theme-obsidian { --primary-rgb: 255, 107, 107; }
.theme-solar-flare { --primary-rgb: 255, 170, 0; }
.theme-electric-blue { --primary-rgb: 0, 229, 255; }
.theme-midnight { --primary-rgb: 155, 89, 182; }
.theme-forest { --primary-rgb: 46, 204, 113; }
.theme-sunset { --primary-rgb: 255, 107, 107; }
.theme-galactic { --primary-rgb: 255, 0, 255; }
.theme-steel { --primary-rgb: 127, 140, 141; }
.theme-cosmic { --primary-rgb: 255, 0, 170; }
.theme-emerald { --primary-rgb: 0, 255, 136; }
.theme-ruby { --primary-rgb: 255, 0, 51; }

@keyframes liquidShift {
    0% { transform: scale(1) rotate(0deg); opacity: 0.2; }
    50% { transform: scale(1.2) rotate(2deg); opacity: 0.4; }
    100% { transform: scale(1) rotate(-2deg); opacity: 0.3; }
}

/* Ensure content is above backgrounds */
.hero, .features, .stats, .cta, .footer,
.login-container, .register-container, .dashboard-container {
    position: relative;
    z-index: 1;
}

/* Fix card backgrounds */
.card {
    background: rgba(var(--bg-surface-rgb, 30, 35, 41), 0.9);
    backdrop-filter: blur(10px);
    border: 1px solid var(--border);
}

/* Add surface RGB variables */
.theme-neo-noir { --bg-surface-rgb: 30, 35, 41; }
.theme-matrix { --bg-surface-rgb: 15, 42, 15; }
.theme-cyber-orange { --bg-surface-rgb: 42, 34, 28; }
.theme-deep-ocean { --bg-surface-rgb: 0, 43, 85; }
.theme-blood-red { --bg-surface-rgb: 58, 26, 26; }
.theme-ghost { --bg-surface-rgb: 37, 37, 37; }
.theme-neon-purple { --bg-surface-rgb: 42, 26, 58; }
.theme-arctic { --bg-surface-rgb: 26, 60, 78; }
.theme-nuclear { --bg-surface-rgb: 58, 78, 26; }
.theme-obsidian { --bg-surface-rgb: 61, 86, 110; }
.theme-solar-flare { --bg-surface-rgb: 58, 32, 16; }
.theme-electric-blue { --bg-surface-rgb: 21, 37, 58; }
.theme-midnight { --bg-surface-rgb: 21, 21, 37; }
.theme-forest { --bg-surface-rgb: 21, 58, 34; }
.theme-sunset { --bg-surface-rgb: 58, 32, 24; }
.theme-galactic { --bg-surface-rgb: 16, 16, 48; }
.theme-steel { --bg-surface-rgb: 45, 53, 56; }
.theme-cosmic { --bg-surface-rgb: 24, 0, 53; }
.theme-emerald { --bg-surface-rgb: 21, 58, 34; }
.theme-ruby { --bg-surface-rgb: 58, 21, 21; }