/* HOLOGRAPHIC UI CSS - Requires .theme-holographic class on body */
@import url('https://fonts.googleapis.com/css2?family=Rajdhani:wght@400;500;600;700&display=swap');

/* Color Variables Override */
.theme-holographic {
    --panel-bg: rgba(0, 243, 255, 0.03);
    --panel-border: rgba(0, 243, 255, 0.3);
    --metal-plate: rgba(0, 243, 255, 0.05);
    --crt-green: #00f3ff; /* Holographic Cyan */
    --nixie-orange: #00f3ff; /* Glowing Cyan for text */
    --nixie-glow: rgba(0, 243, 255, 0.4);
    
    background-color: #020813;
    background-image: linear-gradient(rgba(0, 243, 255, 0.03) 1px, transparent 1px),
                      linear-gradient(90deg, rgba(0, 243, 255, 0.03) 1px, transparent 1px);
    background-size: 30px 30px;
    
    color: #e0fcff;
    font-family: 'Rajdhani', sans-serif !important;
}

/* Base Typo */
.theme-holographic h1, .theme-holographic h2, .theme-holographic h3, .theme-holographic h4 {
    font-family: 'Rajdhani', sans-serif !important;
    letter-spacing: 1.5px !important;
    text-transform: uppercase !important;
    color: #00f3ff !important;
    text-shadow: 0 0 8px rgba(0, 243, 255, 0.6) !important;
    font-weight: 600 !important;
}

/* Remove Screws */
.theme-holographic .screw {
    display: none !important;
}

/* Panels (Glassmorphism) */
.theme-holographic .console-panel, 
.theme-holographic .header-panel, 
.theme-holographic .lab-card,
.theme-holographic .nixie-title-panel,
.theme-holographic .analog-geiger-panel {
    background: var(--metal-plate) !important;
    border: 1px solid var(--panel-border) !important;
    box-shadow: 0 0 15px rgba(0, 243, 255, 0.1), inset 0 0 20px rgba(0, 243, 255, 0.05) !important;
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
    border-radius: 4px !important;
}

.theme-holographic .lab-card:hover {
    box-shadow: 0 0 25px rgba(0, 243, 255, 0.3), inset 0 0 30px rgba(0, 243, 255, 0.1) !important;
    border-color: rgba(0, 243, 255, 0.6) !important;
    transform: scale(1.02) !important;
}

/* Buttons */
.theme-holographic .ind-btn, .theme-holographic .tab-btn {
    background: rgba(0, 243, 255, 0.05) !important;
    border: 1px solid rgba(0, 243, 255, 0.4) !important;
    color: #00f3ff !important;
    font-family: 'Rajdhani', sans-serif !important;
    box-shadow: 0 0 5px rgba(0, 243, 255, 0.2) !important;
    border-radius: 2px !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    transition: all 0.2s ease !important;
}

.theme-holographic .ind-btn:hover, .theme-holographic .tab-btn:hover {
    background: rgba(0, 243, 255, 0.2) !important;
    box-shadow: 0 0 15px rgba(0, 243, 255, 0.5) !important;
}

.theme-holographic .ind-btn.active, .theme-holographic .tab-btn.active {
    background: rgba(0, 243, 255, 0.4) !important;
    border-color: #00f3ff !important;
    color: #ffffff !important;
    text-shadow: 0 0 5px #ffffff !important;
    box-shadow: 0 0 20px rgba(0, 243, 255, 0.8) !important;
}

/* Giant Red Button -> Danger Holographic Button */
.theme-holographic .giant-red-btn {
    background: rgba(255, 0, 85, 0.1) !important;
    border: 1px solid rgba(255, 0, 85, 0.8) !important;
    color: #ff0055 !important;
    box-shadow: 0 0 20px rgba(255, 0, 85, 0.4), inset 0 0 10px rgba(255, 0, 85, 0.2) !important;
    border-radius: 4px !important;
    font-family: 'Rajdhani', sans-serif !important;
    font-weight: 700 !important;
    text-shadow: 0 0 8px rgba(255, 0, 85, 0.8) !important;
    width: auto !important;
    height: auto !important;
    padding: 12px 24px !important;
    text-transform: uppercase !important;
    letter-spacing: 2px !important;
    transition: all 0.1s ease !important;
}

.theme-holographic .giant-red-btn:active {
    background: rgba(255, 0, 85, 0.4) !important;
    box-shadow: 0 0 40px rgba(255, 0, 85, 0.8), inset 0 0 20px rgba(255, 0, 85, 0.6) !important;
    color: #ffffff !important;
    transform: scale(0.98) !important;
}

/* Nixie Tubes -> Holographic Digits */
.theme-holographic .nixie-tube {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    width: auto !important;
}
.theme-holographic .nixie-tube::after { display: none !important; }
.theme-holographic .nixie-digit {
    font-family: 'Rajdhani', sans-serif !important;
    color: #00f3ff !important;
    text-shadow: 0 0 10px rgba(0, 243, 255, 0.8) !important;
    font-weight: 700 !important;
    font-size: 22px !important;
}
.theme-holographic .nixie-container {
    background: rgba(0, 243, 255, 0.05) !important;
    border: 1px dashed rgba(0, 243, 255, 0.4) !important;
    box-shadow: inset 0 0 10px rgba(0, 243, 255, 0.1) !important;
    border-radius: 2px !important;
}
.theme-holographic .nixie-label {
    font-family: 'Rajdhani', sans-serif !important;
    color: rgba(0, 243, 255, 0.7) !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
}

/* CRT Screens -> Hologram Canvas */
.theme-holographic .crt-screen, .theme-holographic .card-crt {
    border: 1px solid rgba(0, 243, 255, 0.5) !important;
    border-radius: 2px !important;
    box-shadow: 0 0 15px rgba(0, 243, 255, 0.2) !important;
    background-color: rgba(0, 10, 20, 0.8) !important;
    backdrop-filter: blur(4px) !important;
}
.theme-holographic .crt-screen::before, .theme-holographic .crt-screen::after,
.theme-holographic .card-crt::before, .theme-holographic .card-crt::after {
    display: none !important;
}

/* Texts and Labels */
.theme-holographic .status-text, .theme-holographic .lab-card-title, .theme-holographic .lab-card-desc, .theme-holographic .reactor-isotope-name {
    font-family: 'Rajdhani', sans-serif !important;
    color: #00f3ff !important;
    text-shadow: 0 0 5px rgba(0, 243, 255, 0.5) !important;
}
.theme-holographic .reactor-isotope-name {
    color: #ffffff !important;
    text-shadow: 0 0 10px #00f3ff !important;
}
.theme-holographic .log-tag {
    font-family: 'Rajdhani', sans-serif !important;
    background: rgba(0, 243, 255, 0.2) !important;
    border: 1px solid rgba(0, 243, 255, 0.5) !important;
    color: #00f3ff !important;
    border-radius: 2px !important;
    padding: 2px 6px !important;
}
.theme-holographic .log-msg { color: #e0fcff !important; }
.theme-holographic .log-why { color: rgba(0, 243, 255, 0.5) !important; border-left-color: rgba(0, 243, 255, 0.3) !important; }

/* Custom Checkboxes / Toggle Knobs */
.theme-holographic .knob-select {
    background: rgba(0, 243, 255, 0.05) !important;
    border: 1px solid rgba(0, 243, 255, 0.4) !important;
    color: #00f3ff !important;
    font-family: 'Rajdhani', sans-serif !important;
    box-shadow: none !important;
    border-radius: 2px !important;
}
.theme-holographic .knob-select.active {
    background: rgba(0, 243, 255, 0.3) !important;
    border-color: #00f3ff !important;
    color: #ffffff !important;
    text-shadow: 0 0 5px #ffffff !important;
    box-shadow: 0 0 10px rgba(0, 243, 255, 0.5) !important;
    transform: none !important;
}

/* Periodic Table */
.theme-holographic .periodic-element {
    background: rgba(0, 243, 255, 0.02) !important;
    border: 1px solid rgba(0, 243, 255, 0.2) !important;
    box-shadow: inset 0 0 5px rgba(0, 243, 255, 0.05) !important;
    border-radius: 2px !important;
    backdrop-filter: blur(2px) !important;
}
.theme-holographic .periodic-element:hover {
    background: rgba(0, 243, 255, 0.1) !important;
    border-color: rgba(0, 243, 255, 0.5) !important;
    box-shadow: 0 0 10px rgba(0, 243, 255, 0.3) !important;
}
.theme-holographic .element-symbol {
    font-family: 'Rajdhani', sans-serif !important;
    color: #00f3ff !important;
    text-shadow: 0 0 5px rgba(0, 243, 255, 0.5) !important;
}
.theme-holographic .element-z {
    font-family: 'Rajdhani', sans-serif !important;
    color: rgba(0, 243, 255, 0.5) !important;
}
.theme-holographic .periodic-element.active {
    border-color: #00f3ff !important;
    background: rgba(0, 243, 255, 0.2) !important;
    box-shadow: 0 0 15px rgba(0, 243, 255, 0.5), inset 0 0 10px rgba(0, 243, 255, 0.2) !important;
}
.theme-holographic .periodic-element.active .led-indicator {
    background-color: #ffffff !important;
    box-shadow: 0 0 10px #ffffff, 0 0 20px #00f3ff !important;
}

.theme-holographic .periodic-element-placeholder {
    font-family: 'Rajdhani', sans-serif !important;
    background: transparent !important;
    border: 1px dashed rgba(0, 243, 255, 0.2) !important;
    color: rgba(0, 243, 255, 0.3) !important;
}

.theme-holographic .periodic-group-header {
    font-family: 'Rajdhani', sans-serif !important;
    color: rgba(0, 243, 255, 0.6) !important;
    text-shadow: 0 0 3px rgba(0, 243, 255, 0.3) !important;
}

/* Borders for elements categories (Holographic glowing colors) */
.theme-holographic .periodic-element.gasos { border-left: 2px solid #b700ff !important; box-shadow: -3px 0 10px -2px rgba(183, 0, 255, 0.5) !important; }
.theme-holographic .periodic-element.no-metalls { border-left: 2px solid #00ffaa !important; box-shadow: -3px 0 10px -2px rgba(0, 255, 170, 0.5) !important; }
.theme-holographic .periodic-element.semimetalls { border-left: 2px solid #ffcc00 !important; box-shadow: -3px 0 10px -2px rgba(255, 204, 0, 0.5) !important; }
.theme-holographic .periodic-element.metalls { border-left: 2px solid #0088ff !important; box-shadow: -3px 0 10px -2px rgba(0, 136, 255, 0.5) !important; }

/* Input/Search */
.theme-holographic .search-container input {
    background: rgba(0, 243, 255, 0.05) !important;
    border: 1px solid rgba(0, 243, 255, 0.3) !important;
    font-family: 'Rajdhani', sans-serif !important;
    color: #00f3ff !important;
    box-shadow: inset 0 0 5px rgba(0, 243, 255, 0.1) !important;
    border-radius: 2px !important;
}
.theme-holographic .search-container input:focus {
    border-color: #00f3ff !important;
    box-shadow: 0 0 10px rgba(0, 243, 255, 0.3), inset 0 0 10px rgba(0, 243, 255, 0.2) !important;
    outline: none !important;
}
.theme-holographic .search-container input::placeholder {
    color: rgba(0, 243, 255, 0.4) !important;
}

/* SVG Geiger Needle & Display */
.theme-holographic .geiger-gauge-svg {
    background-color: rgba(0, 10, 20, 0.8) !important;
    border: 1px solid rgba(0, 243, 255, 0.4) !important;
    box-shadow: inset 0 0 15px rgba(0, 243, 255, 0.2) !important;
}
.theme-holographic .geiger-needle { stroke: #00f3ff !important; filter: drop-shadow(0 0 4px #00f3ff); }
.theme-holographic .geiger-digital-cpm {
    font-family: 'Rajdhani', sans-serif !important;
    color: #ffffff !important;
    text-shadow: 0 0 10px #00f3ff !important;
}
.theme-holographic .geiger-digital-label {
    font-family: 'Rajdhani', sans-serif !important;
    color: rgba(0, 243, 255, 0.6) !important;
}

/* Switches (Levers) */
.theme-holographic .switch-row {
    background: rgba(0, 243, 255, 0.03) !important;
    border: 1px solid rgba(0, 243, 255, 0.2) !important;
    box-shadow: none !important;
}
.theme-holographic .lever-switch {
    background: rgba(0, 0, 0, 0.5) !important;
    border: 1px solid rgba(0, 243, 255, 0.4) !important;
    box-shadow: inset 0 0 5px rgba(0, 243, 255, 0.2) !important;
}
.theme-holographic .lever-handle {
    background: rgba(0, 243, 255, 0.2) !important;
    border: 1px solid rgba(0, 243, 255, 0.8) !important;
    box-shadow: 0 0 5px rgba(0, 243, 255, 0.5) !important;
}
.theme-holographic .lever-switch.active {
    background: rgba(0, 243, 255, 0.1) !important;
    border-color: #00f3ff !important;
    box-shadow: inset 0 0 10px rgba(0, 243, 255, 0.5) !important;
}
.theme-holographic .lever-switch.active .lever-handle {
    background: #ffffff !important;
    border-color: #ffffff !important;
    box-shadow: 0 0 15px #00f3ff !important;
}

/* Tab/Subviews wrapper */
.theme-holographic .panel-tabs {
    background: rgba(0, 10, 20, 0.8) !important;
    border: 1px solid rgba(0, 243, 255, 0.3) !important;
    box-shadow: 0 0 10px rgba(0, 243, 255, 0.1) !important;
}