/**
 * LCARS DEPARTMENT COLOR THEMING SYSTEM
 * Context-aware color schemes based on page function
 *
 * Inspired by Star Trek department divisions:
 * - Command (Red/Orange): Leadership, recruitment, primary actions
 * - Science/Library (Blue): Information, history, documentation
 * - Operations (Gold): Fleet operations, ships, personnel
 *
 * @version 1.0
 * @date 2025-01-07
 */

/* ============================================
   DEPARTMENT THEME VARIABLES
   ============================================ */

/* COMMAND THEME (Default) - Orange/Red accent */
body {
    --theme-primary: var(--lcars-orange);
    --theme-secondary: var(--lcars-gold);
    --theme-accent: var(--lcars-blue-bell);
    --theme-highlight: var(--lcars-alert-red);
    --theme-glow: rgba(255, 153, 0, 0.3);
}

/* SCIENCE/LIBRARY THEME - Blue accent */
body.theme-library,
body.theme-science {
    --theme-primary: var(--lcars-blue);
    --theme-secondary: var(--lcars-blue-bell);
    --theme-accent: var(--lcars-gold);
    --theme-highlight: var(--lcars-purple);
    --theme-glow: rgba(153, 153, 255, 0.3);
}

/* OPERATIONS/FLEET THEME - Gold accent */
body.theme-operations,
body.theme-fleet {
    --theme-primary: var(--lcars-gold);
    --theme-secondary: var(--lcars-orange);
    --theme-accent: var(--lcars-blue-bell);
    --theme-highlight: var(--lcars-yellow-tan);
    --theme-glow: rgba(255, 204, 102, 0.3);
}

/* ============================================
   APPLY THEME COLORS TO COMPONENTS
   ============================================ */

/* Header elements use theme primary */
h1 {
    color: var(--theme-primary) !important;
}

h2 {
    color: var(--theme-secondary);
}

/* LCARS Buttons - use theme colors */
.lcars-button,
.lcars-button-primary {
    background: var(--theme-primary);
    border-color: var(--theme-primary);
}

.lcars-button:hover,
.lcars-button-primary:hover {
    background: var(--theme-highlight);
    box-shadow: 0 0 20px var(--theme-glow);
}

.lcars-button-secondary {
    background: var(--theme-secondary);
    border-color: var(--theme-secondary);
}

/* Panel borders use theme colors */
.panel-border-primary,
.lcars-panel.primary {
    border-top-color: var(--theme-primary);
}

.panel-border-secondary {
    border-top-color: var(--theme-secondary);
}

/* Navigation active states */
.lcars-nav a.active,
.lcars-sidebar a.active {
    background: var(--theme-primary);
    color: var(--lcars-black);
}

.lcars-nav a:hover,
.lcars-sidebar a:hover {
    border-color: var(--theme-primary);
    box-shadow: 0 0 10px var(--theme-glow);
}

/* Diagnostic codes and labels */
.diagnostic-code {
    color: var(--theme-accent);
}

/* Links */
a:not(.lcars-button) {
    color: var(--theme-accent);
}

a:not(.lcars-button):hover {
    color: var(--theme-primary);
}

/* Accents and highlights */
.accent,
.highlight {
    color: var(--theme-primary);
}

.accent-secondary {
    color: var(--theme-secondary);
}

/* Background gradients - subtle department tint */
body.theme-library {
    background-image:
        radial-gradient(ellipse at top, rgba(153, 153, 255, 0.05) 0%, transparent 50%),
        radial-gradient(ellipse at bottom, rgba(153, 204, 255, 0.03) 0%, transparent 50%);
}

body.theme-operations,
body.theme-fleet {
    background-image:
        radial-gradient(ellipse at top, rgba(255, 204, 102, 0.05) 0%, transparent 50%),
        radial-gradient(ellipse at bottom, rgba(255, 153, 0, 0.03) 0%, transparent 50%);
}

/* ============================================
   DEPARTMENT-SPECIFIC OVERRIDES
   ============================================ */

/* Command theme - energetic, action-oriented */
body.theme-command .cta-primary {
    animation: pulse-orange 3s ease-in-out infinite;
}

@keyframes pulse-orange {
    0%, 100% { box-shadow: 0 0 10px rgba(255, 153, 0, 0.3); }
    50% { box-shadow: 0 0 25px rgba(255, 153, 0, 0.6); }
}

/* Library theme - calm, informative */
body.theme-library .panel {
    border-left: 3px solid var(--theme-primary);
}

body.theme-library h2 {
    border-bottom: 2px solid var(--theme-primary);
    padding-bottom: 8px;
}

/* Fleet theme - operational, precise */
body.theme-fleet .data-grid,
body.theme-operations .data-grid {
    border-top: 2px solid var(--theme-primary);
}

body.theme-fleet .ship-name,
body.theme-operations .ship-name {
    color: var(--theme-primary);
    font-weight: bold;
}

/* ============================================
   RESPONSIVE ADJUSTMENTS
   ============================================ */

@media (max-width: 768px) {
    /* Ensure theme colors remain visible on mobile */
    .lcars-button {
        box-shadow: 0 0 15px var(--theme-glow);
    }
}

/* ============================================
   ACCESSIBILITY & FALLBACKS
   ============================================ */

/* Ensure sufficient contrast for text readability */
@media (prefers-contrast: high) {
    body {
        --theme-glow: rgba(255, 255, 255, 0.5);
    }

    .lcars-button,
    .lcars-button-primary {
        border: 2px solid var(--lcars-text-white);
    }
}

/* Respect reduced motion preferences */
@media (prefers-reduced-motion: reduce) {
    .lcars-button:hover,
    .lcars-nav a:hover {
        transition: none;
    }

    @keyframes pulse-orange {
        0%, 100% { box-shadow: 0 0 15px rgba(255, 153, 0, 0.4); }
    }

    /* Disable scanline animation for users who prefer reduced motion */
    body::before {
        animation: none !important;
    }
}

/* ============================================
   ACTIVE TERMINAL LOOK - SCANLINE OVERLAY
   ============================================ */

/* CRT-style scanline effect overlay */
body::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 9999;

    /* Horizontal scanlines */
    background: repeating-linear-gradient(
        0deg,
        rgba(0, 0, 0, 0.15) 0px,
        rgba(0, 0, 0, 0.15) 1px,
        transparent 1px,
        transparent 2px
    );

    /* Subtle animation for CRT flicker effect */
    animation: scanline-flicker 8s linear infinite;
    opacity: 0.4;
}

/* Scanline flicker animation - very subtle */
@keyframes scanline-flicker {
    0%, 100% { opacity: 0.4; }
    50% { opacity: 0.35; }
}

/* Vignette effect to simulate CRT screen curvature */
body::after {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 9998;

    background: radial-gradient(
        ellipse at center,
        transparent 0%,
        transparent 60%,
        rgba(0, 0, 0, 0.2) 100%
    );
}

/* Optional: Add subtle screen glow based on theme */
body.theme-command::after {
    background: radial-gradient(
        ellipse at center,
        rgba(255, 153, 0, 0.08) 0%,
        transparent 60%,
        rgba(0, 0, 0, 0.25) 100%
    );
}

body.theme-library::after {
    background: radial-gradient(
        ellipse at center,
        rgba(153, 153, 255, 0.08) 0%,
        transparent 60%,
        rgba(0, 0, 0, 0.25) 100%
    );
}

body.theme-fleet::after {
    background: radial-gradient(
        ellipse at center,
        rgba(255, 204, 102, 0.08) 0%,
        transparent 60%,
        rgba(0, 0, 0, 0.25) 100%
    );
}

/* Disable effects on mobile for performance */
@media (max-width: 768px) {
    body::before,
    body::after {
        display: none;
    }
}