/* ============================================================================
   LOREBENCH HOLOGRAPHIC THEME
   ============================================================================
   Futuristic sci-fi holographic projection aesthetic.
   Cyan glow, projector bars, breathing/sway effects, floating particles.
   ============================================================================ */

:root[data-theme="holographic"] {
    /* Holographic color - RGB components for rgba() usage */
    --holo-r: 0;
    --holo-g: 220;
    --holo-b: 255;

    /* Computed holographic color values */
    --holo-color: rgb(var(--holo-r), var(--holo-g), var(--holo-b));
    --holo-color-90: rgba(var(--holo-r), var(--holo-g), var(--holo-b), 0.9);
    --holo-color-80: rgba(var(--holo-r), var(--holo-g), var(--holo-b), 0.8);
    --holo-color-70: rgba(var(--holo-r), var(--holo-g), var(--holo-b), 0.7);
    --holo-color-60: rgba(var(--holo-r), var(--holo-g), var(--holo-b), 0.6);
    --holo-color-50: rgba(var(--holo-r), var(--holo-g), var(--holo-b), 0.5);
    --holo-color-45: rgba(var(--holo-r), var(--holo-g), var(--holo-b), 0.45);
    --holo-color-40: rgba(var(--holo-r), var(--holo-g), var(--holo-b), 0.4);
    --holo-color-35: rgba(var(--holo-r), var(--holo-g), var(--holo-b), 0.35);
    --holo-color-30: rgba(var(--holo-r), var(--holo-g), var(--holo-b), 0.3);
    --holo-color-25: rgba(var(--holo-r), var(--holo-g), var(--holo-b), 0.25);
    --holo-color-20: rgba(var(--holo-r), var(--holo-g), var(--holo-b), 0.2);
    --holo-color-15: rgba(var(--holo-r), var(--holo-g), var(--holo-b), 0.15);
    --holo-color-12: rgba(var(--holo-r), var(--holo-g), var(--holo-b), 0.12);
    --holo-color-10: rgba(var(--holo-r), var(--holo-g), var(--holo-b), 0.1);
    --holo-color-08: rgba(var(--holo-r), var(--holo-g), var(--holo-b), 0.08);
    --holo-color-06: rgba(var(--holo-r), var(--holo-g), var(--holo-b), 0.06);
    --holo-color-05: rgba(var(--holo-r), var(--holo-g), var(--holo-b), 0.05);
    --holo-color-03: rgba(var(--holo-r), var(--holo-g), var(--holo-b), 0.03);
    --holo-color-02: rgba(var(--holo-r), var(--holo-g), var(--holo-b), 0.02);

    /* PRIMARY ACCENT COLOR */
    --lb-accent-primary: var(--holo-color);
    --lb-accent-primary-light: var(--holo-color-90);
    --lb-accent-primary-dark: var(--holo-color-50);
    --lb-accent-primary-darker: var(--holo-color-40);

    /* BACKGROUND COLORS - very transparent to show particles */
    --lb-bg-base: transparent;
    --lb-bg-elevated: rgba(5, 15, 25, 0.4);
    --lb-bg-elevated-1: rgba(8, 20, 32, 0.4);
    --lb-bg-elevated-2: rgba(10, 25, 40, 0.4);
    --lb-bg-elevated-3: rgba(12, 30, 48, 0.5);
    --lb-bg-input: rgba(0, 10, 20, 0.3);
    --lb-bg-hover: var(--holo-color-08);
    --bg-tertiary: rgba(5, 15, 25, 0.4);
    --bg-primary: rgba(8, 20, 32, 0.4);

    /* BORDER COLORS */
    --lb-border-subtle: var(--holo-color-10);
    --lb-border-default: var(--holo-color-15);
    --lb-border-strong: var(--holo-color-30);
    --lb-border-focus: var(--holo-color-60);

    /* TEXT COLORS */
    --lb-text-primary: var(--holo-color-90);
    --lb-text-secondary: var(--holo-color-70);
    --lb-text-muted: var(--holo-color-50);
    --lb-text-subtle: var(--holo-color-30);
    --lb-text-inverse: #000000;

    /* STATE COLORS */
    --lb-success: #00ff88;
    --lb-error: #ff4466;
    --lb-error-bg: rgba(255, 68, 102, 0.1);
    --lb-error-border: rgba(255, 68, 102, 0.3);
    --lb-warning: #ffaa00;
    --lb-info: var(--holo-color);

    /* COMPONENT-SPECIFIC */
    --lb-card-bg: var(--holo-color-02);
    --lb-card-border: var(--holo-color-15);
    --lb-card-header-bg: var(--holo-color-05);

    /* INTERACTIVE ELEMENTS */
    --lb-button-primary-bg: var(--holo-color-10);
    --lb-button-primary-hover: var(--holo-color-20);
    --lb-button-primary-text: var(--holo-color-90);
    --lb-button-secondary-bg: transparent;
    --lb-button-secondary-hover: var(--holo-color-08);
    --lb-button-secondary-text: var(--holo-color-70);

    /* RATING SYSTEM */
    --lb-rating-fill: var(--holo-color);
    --lb-rating-empty: var(--holo-color-20);
    --lb-rating-hover: var(--holo-color);

    /* SHADOWS - holographic glow */
    --lb-shadow-sm: 0 0 10px var(--holo-color-08);
    --lb-shadow-md: 0 0 20px var(--holo-color-10);
    --lb-shadow-lg: 0 0 40px var(--holo-color-15);

    /* ========================================================================
       BACKWARDS COMPATIBILITY MAPPINGS
       ======================================================================== */
    --primary-color: var(--holo-color);
    --primary-hover: var(--holo-color);
    --bg-secondary: var(--lb-bg-elevated-2);
    --bg-card: var(--lb-bg-elevated);
    --bg-hover: var(--lb-bg-hover);
    --border-color: var(--lb-border-default);
    --text-primary: var(--lb-text-primary);
    --text-secondary: var(--lb-text-secondary);
    --text-muted: var(--lb-text-muted);

    /* UX Component Mappings */
    --ux-bg: var(--lb-bg-base);
    --ux-text: var(--lb-text-primary);
}

/* ============================================================================
   HOLOGRAPHIC BASE STYLING
   ============================================================================ */

/* Background gradient */
:root[data-theme="holographic"] body {
    background: radial-gradient(ellipse at center, #0a1520 0%, #050a0f 70%, #000 100%);
}

/* Holographic text glow */
:root[data-theme="holographic"] body {
    text-shadow: 0 0 8px var(--holo-color-20);
}

/* ============================================================================
   HOLOGRAPHIC CARD STYLING
   ============================================================================ */

:root[data-theme="holographic"] .ux-card,
:root[data-theme="holographic"] .collapsible-section,
:root[data-theme="holographic"] .infobox,
:root[data-theme="holographic"] .community-feedback-card {
    background: rgba(0, 20, 40, 0.25);
    backdrop-filter: blur(6px);
    border: 1px solid var(--holo-color-15);
    border-left: 3px solid var(--holo-color-70);
    border-right: 3px solid var(--holo-color-70);
    border-radius: 2px;
    position: relative;
    overflow: hidden;
    box-shadow:
        0 0 20px var(--holo-color-08),
        /* Left edge glow - intense projection collision */
        -20px 0 50px var(--holo-color-20),
        -10px 0 30px var(--holo-color-30),
        -4px 0 15px var(--holo-color-40),
        /* Right edge glow - intense projection collision */
        20px 0 50px var(--holo-color-20),
        10px 0 30px var(--holo-color-30),
        4px 0 15px var(--holo-color-40),
        /* Inner edge glow */
        inset 4px 0 20px var(--holo-color-08),
        inset -4px 0 20px var(--holo-color-08);
    transition: all 0.4s ease;
}

/* Glowing top edge */
:root[data-theme="holographic"] .ux-card::before,
:root[data-theme="holographic"] .collapsible-section::before,
:root[data-theme="holographic"] .infobox::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--holo-color-60), transparent);
    opacity: 0.5;
    pointer-events: none;
}

/* Glowing bottom edge */
:root[data-theme="holographic"] .ux-card::after,
:root[data-theme="holographic"] .collapsible-section::after,
:root[data-theme="holographic"] .infobox::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--holo-color-30), transparent);
    opacity: 0.5;
    pointer-events: none;
}

:root[data-theme="holographic"] .ux-card:hover,
:root[data-theme="holographic"] .collapsible-section:hover,
:root[data-theme="holographic"] .infobox:hover,
:root[data-theme="holographic"] .community-feedback-card:hover {
    background: rgba(0, 30, 60, 0.35);
    border-color: var(--holo-color-30);
    border-left-color: var(--holo-color-80);
    border-right-color: var(--holo-color-80);
    box-shadow:
        0 0 40px var(--holo-color-15),
        /* Intensified side glow on hover - bright collision point */
        -30px 0 60px var(--holo-color-25),
        -15px 0 40px var(--holo-color-40),
        -6px 0 20px var(--holo-color-50),
        30px 0 60px var(--holo-color-25),
        15px 0 40px var(--holo-color-40),
        6px 0 20px var(--holo-color-50),
        /* Inner edge glow intensified */
        inset 6px 0 30px var(--holo-color-10),
        inset -6px 0 30px var(--holo-color-10);
    transform: translateY(-2px);
}

:root[data-theme="holographic"] .ux-card:hover::before,
:root[data-theme="holographic"] .ux-card:hover::after {
    opacity: 1;
}

/* ============================================================================
   BUTTONS
   ============================================================================ */

:root[data-theme="holographic"] .btn,
:root[data-theme="holographic"] button {
    background: rgba(0, 40, 80, 0.2);
    backdrop-filter: blur(4px);
    border: 1px solid var(--holo-color-30);
    border-left: 2px solid var(--holo-color-40);
    border-right: 2px solid var(--holo-color-40);
    color: var(--holo-color-90);
    border-radius: 2px;
    text-transform: uppercase;
    font-weight: 400;
    letter-spacing: 0.1em;
    transition: all 0.3s ease;
    box-shadow:
        0 0 15px var(--holo-color-10),
        inset 0 0 10px var(--holo-color-05),
        -4px 0 12px var(--holo-color-10),
        4px 0 12px var(--holo-color-10);
}

:root[data-theme="holographic"] .btn:hover,
:root[data-theme="holographic"] button:hover {
    background: rgba(0, 60, 120, 0.3);
    border-color: var(--holo-color-50);
    border-left-color: var(--holo-color-60);
    border-right-color: var(--holo-color-60);
    box-shadow:
        0 0 25px var(--holo-color-20),
        inset 0 0 15px var(--holo-color-08),
        -8px 0 20px var(--holo-color-15),
        8px 0 20px var(--holo-color-15);
}

/* ============================================================================
   INPUTS
   ============================================================================ */

:root[data-theme="holographic"] input,
:root[data-theme="holographic"] textarea,
:root[data-theme="holographic"] select,
:root[data-theme="holographic"] .form-control {
    background: rgba(0, 20, 40, 0.2);
    backdrop-filter: blur(4px);
    border: 1px solid var(--holo-color-20);
    border-left: 2px solid var(--holo-color-30);
    border-right: 2px solid var(--holo-color-30);
    color: var(--holo-color-70);
    border-radius: 2px;
    box-shadow:
        0 0 20px var(--holo-color-05),
        inset 0 0 20px var(--holo-color-03),
        -4px 0 15px var(--holo-color-08),
        4px 0 15px var(--holo-color-08);
}

:root[data-theme="holographic"] input::placeholder,
:root[data-theme="holographic"] textarea::placeholder {
    color: var(--holo-color-30);
}

:root[data-theme="holographic"] input:focus,
:root[data-theme="holographic"] textarea:focus,
:root[data-theme="holographic"] select:focus,
:root[data-theme="holographic"] .form-control:focus {
    border-color: var(--holo-color-50);
    box-shadow:
        0 0 30px var(--holo-color-15),
        inset 0 0 20px var(--holo-color-05);
    outline: none;
}

/* ============================================================================
   LINKS
   ============================================================================ */

:root[data-theme="holographic"] a {
    color: var(--holo-color-70);
    text-shadow: 0 0 8px var(--holo-color-30);
    transition: all 0.3s ease;
}

:root[data-theme="holographic"] a:hover {
    color: var(--holo-color-90);
    text-shadow: 0 0 15px var(--holo-color-50);
}

/* ============================================================================
   LOGO
   ============================================================================ */

:root[data-theme="holographic"] .ww-logo {
    color: var(--holo-color-90);
    font-weight: 200;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    text-shadow:
        0 0 10px var(--holo-color-50),
        0 0 30px var(--holo-color-30),
        0 0 50px var(--holo-color-20);
}

/* ============================================================================
   BADGES
   ============================================================================ */

:root[data-theme="holographic"] .pillar-badge,
:root[data-theme="holographic"] .badge,
:root[data-theme="holographic"] .collapsible-count {
    background: rgba(0, 40, 80, 0.2);
    backdrop-filter: blur(4px);
    color: var(--holo-color-80);
    border: 1px solid var(--holo-color-20);
    text-shadow: 0 0 8px var(--holo-color-40);
    box-shadow: 0 0 10px var(--holo-color-10);
    border-radius: 2px;
}

/* ============================================================================
   HEADER / TOPBAR
   ============================================================================ */

:root[data-theme="holographic"] .ww-topbar {
    background: rgba(5, 15, 30, 0.5);
    backdrop-filter: blur(8px);
    border-bottom: 1px solid var(--holo-color-20);
    border-left: 4px solid var(--holo-color-80);
    border-right: 4px solid var(--holo-color-80);
    border-radius: 0;
    box-shadow:
        /* Intense projection collision glow */
        -30px 0 60px var(--holo-color-20),
        -15px 0 40px var(--holo-color-35),
        -6px 0 20px var(--holo-color-50),
        30px 0 60px var(--holo-color-20),
        15px 0 40px var(--holo-color-35),
        6px 0 20px var(--holo-color-50),
        /* Inner edge glow */
        inset 6px 0 25px var(--holo-color-08),
        inset -6px 0 25px var(--holo-color-08);
}

/* ============================================================================
   NAVIGATION
   ============================================================================ */

:root[data-theme="holographic"] .ww-nav-link {
    color: var(--holo-color-50);
    text-transform: uppercase;
    font-size: 0.85rem;
    letter-spacing: 0.1em;
}

:root[data-theme="holographic"] .ww-nav-link:hover {
    color: var(--holo-color-90);
    background: var(--holo-color-08);
    text-shadow: 0 0 15px var(--holo-color-40);
}

/* ============================================================================
   CREATE BUTTON
   ============================================================================ */

:root[data-theme="holographic"] .ww-btn-create {
    background: rgba(0, 50, 100, 0.25);
    backdrop-filter: blur(4px);
    color: var(--holo-color-90);
    border: 1px solid var(--holo-color-40);
    border-radius: 2px;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    box-shadow:
        0 0 15px var(--holo-color-20),
        inset 0 0 10px var(--holo-color-10);
}

:root[data-theme="holographic"] .ww-btn-create:hover {
    background: rgba(0, 70, 140, 0.35);
    border-color: var(--holo-color-60);
    box-shadow:
        0 0 25px var(--holo-color-30),
        inset 0 0 15px var(--holo-color-15);
}

/* ============================================================================
   THEME SWITCHER
   ============================================================================ */

:root[data-theme="holographic"] .ww-theme-toggle {
    border: 1px solid var(--holo-color-20);
    background: rgba(0, 30, 60, 0.2);
    backdrop-filter: blur(4px);
    border-radius: 2px;
}

:root[data-theme="holographic"] .ww-theme-toggle:hover {
    border-color: var(--holo-color-40);
    background: rgba(0, 40, 80, 0.3);
}

:root[data-theme="holographic"] .ww-theme-menu {
    background: rgba(5, 15, 30, 0.6);
    border: 1px solid var(--holo-color-20);
    box-shadow: 0 0 30px var(--holo-color-15);
    backdrop-filter: blur(10px);
    border-radius: 2px;
}

:root[data-theme="holographic"] .ww-theme-item {
    color: var(--holo-color-50);
    text-transform: uppercase;
    font-size: 0.85em;
    letter-spacing: 0.05em;
}

:root[data-theme="holographic"] .ww-theme-item:hover,
:root[data-theme="holographic"] .ww-theme-item.active {
    background: var(--holo-color-10);
    color: var(--holo-color-90);
}

/* ============================================================================
   STAT CARDS / CREATE CARD
   ============================================================================ */

:root[data-theme="holographic"] .stat-card {
    background: rgba(0, 20, 40, 0.2);
    backdrop-filter: blur(6px);
    border: 1px solid var(--holo-color-15);
    border-left: 3px solid var(--holo-color-60);
    border-right: 3px solid var(--holo-color-60);
    border-radius: 2px;
    transition: all 0.4s ease;
    box-shadow:
        0 0 15px var(--holo-color-08),
        /* Bright edge collision glow */
        -15px 0 35px var(--holo-color-15),
        -8px 0 20px var(--holo-color-25),
        -3px 0 12px var(--holo-color-35),
        15px 0 35px var(--holo-color-15),
        8px 0 20px var(--holo-color-25),
        3px 0 12px var(--holo-color-35),
        /* Inner glow */
        inset 3px 0 15px var(--holo-color-05),
        inset -3px 0 15px var(--holo-color-05);
}

:root[data-theme="holographic"] .stat-card:hover {
    background: rgba(0, 30, 60, 0.3);
    border-color: var(--holo-color-30);
    border-left-color: var(--holo-color-80);
    border-right-color: var(--holo-color-80);
    box-shadow:
        0 0 30px var(--holo-color-15),
        /* Intensified edge glow */
        -25px 0 50px var(--holo-color-20),
        -12px 0 30px var(--holo-color-35),
        -5px 0 18px var(--holo-color-50),
        25px 0 50px var(--holo-color-20),
        12px 0 30px var(--holo-color-35),
        5px 0 18px var(--holo-color-50),
        /* Inner glow intensified */
        inset 5px 0 25px var(--holo-color-08),
        inset -5px 0 25px var(--holo-color-08);
    transform: translateY(-2px);
}

:root[data-theme="holographic"] .stat-card.create-card {
    background: rgba(0, 25, 50, 0.25);
    border-color: var(--holo-color-20);
}

:root[data-theme="holographic"] .stat-card.create-card:hover {
    background: rgba(0, 35, 70, 0.35);
    border-color: var(--holo-color-40);
    box-shadow: 0 0 40px var(--holo-color-20);
}

/* ============================================================================
   SEARCH INPUT
   ============================================================================ */

:root[data-theme="holographic"] .ww-search-input {
    background: rgba(0, 20, 40, 0.2);
    backdrop-filter: blur(4px);
    border: 1px solid var(--holo-color-20);
    color: var(--holo-color-70);
    border-radius: 2px;
    box-shadow:
        0 0 20px var(--holo-color-08),
        inset 0 0 20px var(--holo-color-03);
}

:root[data-theme="holographic"] .ww-search-input:focus {
    border-color: var(--holo-color-50);
    background: rgba(0, 25, 50, 0.25);
    box-shadow:
        0 0 30px var(--holo-color-15),
        inset 0 0 20px var(--holo-color-05);
}

/* ============================================================================
   FOOTER
   ============================================================================ */

:root[data-theme="holographic"] .ww-footer {
    background: rgba(5, 10, 20, 0.5);
    backdrop-filter: blur(8px);
    border-top: 1px solid var(--holo-color-15);
    border-left: 4px solid var(--holo-color-70);
    border-right: 4px solid var(--holo-color-70);
    box-shadow:
        /* Intense projection collision glow */
        -25px 0 50px var(--holo-color-15),
        -12px 0 35px var(--holo-color-30),
        -5px 0 18px var(--holo-color-45),
        25px 0 50px var(--holo-color-15),
        12px 0 35px var(--holo-color-30),
        5px 0 18px var(--holo-color-45),
        /* Inner edge glow */
        inset 5px 0 20px var(--holo-color-06),
        inset -5px 0 20px var(--holo-color-06);
}

:root[data-theme="holographic"] .ww-footer a {
    color: var(--holo-color-40);
    text-transform: uppercase;
    font-size: 0.85em;
    letter-spacing: 0.05em;
}

:root[data-theme="holographic"] .ww-footer a:hover {
    color: var(--holo-color-80);
}

/* ============================================================================
   TABLES
   ============================================================================ */

:root[data-theme="holographic"] .table {
    border-color: var(--holo-color-15);
}

:root[data-theme="holographic"] .table th,
:root[data-theme="holographic"] .table td {
    border-color: var(--holo-color-10);
}

:root[data-theme="holographic"] .table th {
    background: rgba(0, 30, 60, 0.25);
    backdrop-filter: blur(4px);
    color: var(--holo-color-80);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

:root[data-theme="holographic"] .table td {
    background: rgba(0, 15, 30, 0.15);
}

/* ============================================================================
   AVATAR
   ============================================================================ */

:root[data-theme="holographic"] .author-avatar {
    background: rgba(0, 40, 80, 0.25);
    backdrop-filter: blur(4px);
    color: var(--holo-color-80);
    border: 1px solid var(--holo-color-30);
    box-shadow: 0 0 20px var(--holo-color-15);
}

/* ============================================================================
   MODALS - Holographic Styling
   ============================================================================ */

/* Modal Overlays - specific modal classes only */
:root[data-theme="holographic"] .rp-overlay,
:root[data-theme="holographic"] .aem-overlay,
:root[data-theme="holographic"] .uxdesc-modal-overlay,
:root[data-theme="holographic"] .stat-modal-overlay {
    background: rgba(0, 10, 20, 0.85);
    backdrop-filter: blur(8px);
}

/* Modal Containers */
:root[data-theme="holographic"] .rp-modal,
:root[data-theme="holographic"] .aem-modal-wide,
:root[data-theme="holographic"] .uxdesc-modal,
:root[data-theme="holographic"] .stat-modal {
    background: rgba(5, 15, 30, 0.9);
    backdrop-filter: blur(12px);
    border: 1px solid var(--holo-color-20);
    border-left: 3px solid var(--holo-color-70);
    border-right: 3px solid var(--holo-color-70);
    box-shadow:
        0 0 60px var(--holo-color-15),
        /* Side edge glow */
        -25px 0 50px var(--holo-color-15),
        -12px 0 30px var(--holo-color-25),
        -5px 0 15px var(--holo-color-35),
        25px 0 50px var(--holo-color-15),
        12px 0 30px var(--holo-color-25),
        5px 0 15px var(--holo-color-35),
        /* Inner glow */
        inset 5px 0 25px var(--holo-color-06),
        inset -5px 0 25px var(--holo-color-06);
    color: var(--holo-color-80);
}

/* Modal Headers */
:root[data-theme="holographic"] .rp-header,
:root[data-theme="holographic"] .aem-header,
:root[data-theme="holographic"] .stat-modal-header {
    border-color: var(--holo-color-20);
    background: rgba(0, 20, 40, 0.3);
}

:root[data-theme="holographic"] .rp-title,
:root[data-theme="holographic"] .aem-title,
:root[data-theme="holographic"] .stat-modal-title {
    color: var(--holo-color-90);
    text-shadow: 0 0 15px var(--holo-color-40);
}

/* Modal Close Buttons */
:root[data-theme="holographic"] .rp-close,
:root[data-theme="holographic"] .aem-close,
:root[data-theme="holographic"] .stat-modal-close {
    color: var(--holo-color-50);
}

:root[data-theme="holographic"] .rp-close:hover,
:root[data-theme="holographic"] .aem-close:hover,
:root[data-theme="holographic"] .stat-modal-close:hover {
    color: var(--holo-color-90);
    background: var(--holo-color-10);
}

/* Modal Body/Content */
:root[data-theme="holographic"] .rp-body,
:root[data-theme="holographic"] .aem-body,
:root[data-theme="holographic"] .stat-modal-body {
    background: transparent;
}

/* Modal Footer */
:root[data-theme="holographic"] .rp-footer,
:root[data-theme="holographic"] .aem-footer,
:root[data-theme="holographic"] .stat-modal-footer {
    border-color: var(--holo-color-20);
    background: rgba(0, 20, 40, 0.3);
}

/* Side Panels */
:root[data-theme="holographic"] .rp-side-panel {
    background: rgba(5, 15, 30, 0.95);
    border-left: 2px solid var(--holo-color-50);
    box-shadow:
        -15px 0 40px var(--holo-color-15),
        -8px 0 25px var(--holo-color-25);
}

/* Panel Headers */
:root[data-theme="holographic"] .panel-header {
    background: rgba(0, 25, 50, 0.4);
    border-bottom: 1px solid var(--holo-color-20);
}

:root[data-theme="holographic"] .panel-header h6 {
    color: var(--holo-color-80);
    text-shadow: 0 0 10px var(--holo-color-30);
}

/* Panel Search */
:root[data-theme="holographic"] .panel-search input {
    background: rgba(0, 20, 40, 0.3);
    border: 1px solid var(--holo-color-20);
    border-left: 2px solid var(--holo-color-40);
    border-right: 2px solid var(--holo-color-40);
    color: var(--holo-color-70);
}

:root[data-theme="holographic"] .panel-search input:focus {
    border-color: var(--holo-color-50);
    box-shadow: 0 0 20px var(--holo-color-15);
}

/* Entity/Relationship Items in Modals */
:root[data-theme="holographic"] .entity-card,
:root[data-theme="holographic"] .relationship-item {
    background: rgba(0, 20, 40, 0.25);
    border: 1px solid var(--holo-color-15);
    border-left: 2px solid var(--holo-color-30);
    border-right: 2px solid var(--holo-color-30);
    color: var(--holo-color-70);
    transition: all 0.3s ease;
}

:root[data-theme="holographic"] .entity-card:hover,
:root[data-theme="holographic"] .relationship-item:hover {
    background: rgba(0, 30, 60, 0.35);
    border-left-color: var(--holo-color-50);
    border-right-color: var(--holo-color-50);
    box-shadow:
        -8px 0 20px var(--holo-color-10),
        8px 0 20px var(--holo-color-10);
}

:root[data-theme="holographic"] .entity-card.selected,
:root[data-theme="holographic"] .relationship-item.selected {
    background: rgba(0, 40, 80, 0.4);
    border-color: var(--holo-color-50);
    border-left-color: var(--holo-color-70);
    border-right-color: var(--holo-color-70);
    box-shadow:
        0 0 25px var(--holo-color-20),
        -10px 0 25px var(--holo-color-15),
        10px 0 25px var(--holo-color-15);
}

/* Section Headers in Panels */
:root[data-theme="holographic"] .section-header,
:root[data-theme="holographic"] .panel-section .section-header {
    color: var(--holo-color-60);
    border-bottom: 1px solid var(--holo-color-10);
}

/* Diagram Elements */
:root[data-theme="holographic"] .rp-entity-box {
    background: rgba(0, 25, 50, 0.3);
    border: 2px solid var(--holo-color-30);
    border-left: 3px solid var(--holo-color-50);
    border-right: 3px solid var(--holo-color-50);
    box-shadow:
        -8px 0 25px var(--holo-color-12),
        8px 0 25px var(--holo-color-12);
}

:root[data-theme="holographic"] .rp-entity-box.clickable:hover {
    border-color: var(--holo-color-50);
    border-left-color: var(--holo-color-70);
    border-right-color: var(--holo-color-70);
    box-shadow:
        0 0 30px var(--holo-color-15),
        -12px 0 30px var(--holo-color-20),
        12px 0 30px var(--holo-color-20);
}

:root[data-theme="holographic"] .rp-entity-box.active {
    border-color: var(--holo-color-60);
    background: rgba(0, 40, 80, 0.4);
}

:root[data-theme="holographic"] .rp-arrow-box {
    background: rgba(0, 30, 60, 0.3);
    border: 2px solid var(--holo-color-30);
    color: var(--holo-color-70);
}

:root[data-theme="holographic"] .rp-arrow-box:hover {
    border-color: var(--holo-color-50);
    background: rgba(0, 40, 80, 0.4);
}

:root[data-theme="holographic"] .arrow-icon {
    color: var(--holo-color-80);
    text-shadow: 0 0 15px var(--holo-color-50);
}

/* Sentence Preview */
:root[data-theme="holographic"] .rp-sentence {
    background: rgba(0, 20, 40, 0.25);
    border: 1px solid var(--holo-color-15);
    border-left: 2px solid var(--holo-color-40);
    border-right: 2px solid var(--holo-color-40);
    color: var(--holo-color-70);
}

:root[data-theme="holographic"] .rp-sentence strong {
    color: var(--holo-color-90);
    text-shadow: 0 0 10px var(--holo-color-40);
}