/* ============================================================================
   LOREBENCH CRT THEME
   ============================================================================
   Retro terminal/CRT monitor aesthetic with phosphor glow effects.
   Green monochrome by default, but phosphor color is configurable.
   ============================================================================ */

:root[data-theme="crt"] {
    /* CRT Phosphor color (default green) - RGB components for rgba() usage */
    --crt-r: 74;
    --crt-g: 222;
    --crt-b: 128;

    /* Computed phosphor color values */
    --crt-color: rgb(var(--crt-r), var(--crt-g), var(--crt-b));
    --crt-color-50: rgba(var(--crt-r), var(--crt-g), var(--crt-b), 0.5);
    --crt-color-40: rgba(var(--crt-r), var(--crt-g), var(--crt-b), 0.4);
    --crt-color-30: rgba(var(--crt-r), var(--crt-g), var(--crt-b), 0.3);
    --crt-color-25: rgba(var(--crt-r), var(--crt-g), var(--crt-b), 0.25);
    --crt-color-20: rgba(var(--crt-r), var(--crt-g), var(--crt-b), 0.2);
    --crt-color-15: rgba(var(--crt-r), var(--crt-g), var(--crt-b), 0.15);
    --crt-color-12: rgba(var(--crt-r), var(--crt-g), var(--crt-b), 0.12);
    --crt-color-10: rgba(var(--crt-r), var(--crt-g), var(--crt-b), 0.1);
    --crt-color-08: rgba(var(--crt-r), var(--crt-g), var(--crt-b), 0.08);
    --crt-color-05: rgba(var(--crt-r), var(--crt-g), var(--crt-b), 0.05);

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

    /* BACKGROUND COLORS - deep blacks */
    --lb-bg-base: #000000;
    --lb-bg-elevated: #0a0a0a;
    --lb-bg-elevated-1: #0f0f0f;
    --lb-bg-elevated-2: #141414;
    --lb-bg-elevated-3: #1a1a1a;
    --lb-bg-input: #0a0a0a;
    --lb-bg-hover: var(--crt-color-10);
    --bg-tertiary: #0a0a0a;
    --bg-primary: #0f0f0f;

    /* BORDER COLORS - subtle phosphor glow */
    --lb-border-subtle: var(--crt-color-15);
    --lb-border-default: var(--crt-color-20);
    --lb-border-strong: var(--crt-color-30);
    --lb-border-focus: var(--crt-color);

    /* TEXT COLORS - grayscale with glow effect from CSS */
    --lb-text-primary: #e0e0e0;
    --lb-text-secondary: #c0c0c0;
    --lb-text-muted: var(--crt-color-50);
    --lb-text-subtle: var(--crt-color-40);
    --lb-text-inverse: #000000;

    /* STATE COLORS - monochrome variants */
    --lb-success: var(--crt-color);
    --lb-error: #ff4444;
    --lb-error-bg: #1a0000;
    --lb-error-border: #440000;
    --lb-warning: var(--crt-color);
    --lb-info: var(--crt-color);

    /* COMPONENT-SPECIFIC */
    --lb-card-bg: linear-gradient(180deg, rgba(15, 15, 15, 0.85) 0%, rgba(8, 8, 8, 0.9) 100%);
    --lb-card-border: var(--crt-color-20);
    --lb-card-header-bg: linear-gradient(180deg, rgba(15, 15, 15, 0.95) 0%, rgba(8, 8, 8, 0.95) 100%);

    /* INTERACTIVE ELEMENTS */
    --lb-button-primary-bg: var(--crt-color-25);
    --lb-button-primary-hover: var(--crt-color-30);
    --lb-button-primary-text: var(--crt-color);
    --lb-button-secondary-bg: transparent;
    --lb-button-secondary-hover: var(--crt-color-15);
    --lb-button-secondary-text: var(--crt-color);

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

    /* SHADOWS - phosphor glow */
    --lb-shadow-sm: 0 0 8px var(--crt-color-08);
    --lb-shadow-md: 0 0 16px var(--crt-color-10);
    --lb-shadow-lg: 0 0 32px var(--crt-color-15);

    /* ========================================================================
       BACKWARDS COMPATIBILITY MAPPINGS
       ======================================================================== */
    --primary-color: var(--crt-color);
    --primary-hover: var(--crt-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);
}

/* ============================================================================
   CRT-SPECIFIC STYLING OVERRIDES
   ============================================================================ */

/* Apply text glow to primary text elements in CRT mode */
:root[data-theme="crt"] body {
    text-shadow: 0 0 8px var(--crt-color-30);
}

/* Cards get phosphor border glow */
:root[data-theme="crt"] .ux-card,
:root[data-theme="crt"] .collapsible-section,
:root[data-theme="crt"] .infobox {
    box-shadow: 0 0 20px rgba(0,0,0,0.6), 0 0 30px var(--crt-color-08);
    border-radius: 4px; /* Squared off look */
}

/* Buttons get phosphor glow */
:root[data-theme="crt"] .btn,
:root[data-theme="crt"] button {
    text-shadow: 0 0 8px var(--crt-color-40);
    box-shadow: 0 0 10px var(--crt-color-20), inset 0 0 10px var(--crt-color-10);
    border-radius: 2px; /* Squared off */
}

:root[data-theme="crt"] .btn:hover,
:root[data-theme="crt"] button:hover {
    box-shadow: 0 0 15px var(--crt-color-30), inset 0 0 15px var(--crt-color-15);
}

/* Inputs get terminal styling */
:root[data-theme="crt"] input,
:root[data-theme="crt"] textarea,
:root[data-theme="crt"] select,
:root[data-theme="crt"] .form-control {
    background: rgba(0, 0, 0, 0.6);
    border: 1px solid var(--crt-color-20);
    color: var(--crt-color);
    text-shadow: 0 0 5px var(--crt-color-30);
    border-radius: 2px;
}

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

:root[data-theme="crt"] input:focus,
:root[data-theme="crt"] textarea:focus,
:root[data-theme="crt"] select:focus,
:root[data-theme="crt"] .form-control:focus {
    border-color: var(--crt-color-40);
    box-shadow: 0 0 10px var(--crt-color-20);
}

/* Links get phosphor color */
:root[data-theme="crt"] a {
    color: var(--crt-color);
    text-shadow: 0 0 6px var(--crt-color-40);
}

:root[data-theme="crt"] a:hover {
    color: var(--lb-text-primary);
    text-shadow: 0 0 10px var(--crt-color-50);
}

/* Logo styling */
:root[data-theme="crt"] .ww-logo {
    color: var(--crt-color);
    text-shadow: 0 0 10px var(--crt-color-40), 0 0 20px var(--crt-color-30), 0 0 40px var(--crt-color-20);
    font-family: 'Courier New', monospace;
    letter-spacing: 0.15em;
}

/* Badge styling */
:root[data-theme="crt"] .pillar-badge,
:root[data-theme="crt"] .badge,
:root[data-theme="crt"] .collapsible-count {
    background: var(--crt-color-25);
    color: var(--crt-color);
    text-shadow: 0 0 8px var(--crt-color-40);
    box-shadow: 0 0 10px var(--crt-color-25);
    border-radius: 2px;
}

/* Squared off borders for CRT aesthetic */
:root[data-theme="crt"] .ww-topbar,
:root[data-theme="crt"] .ww-search-input,
:root[data-theme="crt"] .ww-theme-menu,
:root[data-theme="crt"] .ww-theme-toggle {
    border-radius: 2px;
}

/* Header bar styling */
:root[data-theme="crt"] .ww-topbar {
    background: linear-gradient(180deg, rgba(15, 15, 15, 0.95) 0%, rgba(8, 8, 8, 0.95) 100%);
    border-bottom: 1px solid var(--crt-color-20);
}

/* Navigation links */
:root[data-theme="crt"] .ww-nav-link {
    color: var(--crt-color-50);
}

:root[data-theme="crt"] .ww-nav-link:hover {
    color: var(--crt-color);
    background: var(--crt-color-10);
}

/* Count badges */
:root[data-theme="crt"] .collapsible-count {
    padding: 2px 10px;
    border-radius: 9999px;
}

/* Avatar styling */
:root[data-theme="crt"] .author-avatar,
:root[data-theme="crt"] .crt-avatar {
    background: var(--crt-color-20);
    color: var(--crt-color);
    box-shadow: 0 0 15px var(--crt-color-25);
}

/* Tables */
:root[data-theme="crt"] .table {
    border-color: var(--crt-color-20);
}

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

/* Create button - special CRT styling */
:root[data-theme="crt"] .ww-btn-create {
    background: transparent;
    color: var(--crt-color);
    border: 1px solid var(--crt-color-30);
    text-shadow: 0 0 8px var(--crt-color-40);
    box-shadow: 0 0 10px var(--crt-color-20), inset 0 0 10px var(--crt-color-10);
    border-radius: 2px;
}

:root[data-theme="crt"] .ww-btn-create:hover {
    background: var(--crt-color-15);
    border-color: var(--crt-color-40);
    box-shadow: 0 0 15px var(--crt-color-30), inset 0 0 15px var(--crt-color-15);
    transform: none;
}

/* Theme switcher dropdown styling */
:root[data-theme="crt"] .ww-theme-toggle {
    border: 1px solid var(--crt-color-20);
}

:root[data-theme="crt"] .ww-theme-menu {
    background: #0a0a0a;
    border: 1px solid var(--crt-color-20);
    box-shadow: 0 0 20px var(--crt-color-15);
}

:root[data-theme="crt"] .ww-theme-item {
    color: var(--crt-color-50);
}

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

/* Start Creating card - override hardcoded gold gradient */
:root[data-theme="crt"] .stat-card.create-card {
    background: linear-gradient(135deg, var(--lb-bg-elevated) 0%, var(--crt-color-10) 100%);
    border-color: var(--crt-color-30);
}

:root[data-theme="crt"] .stat-card.create-card:hover {
    background: linear-gradient(135deg, var(--lb-bg-elevated) 0%, var(--crt-color-15) 100%);
    border-color: var(--crt-color-40);
}

/* ============================================================================
   MODALS - CRT Terminal Styling
   ============================================================================ */

/* Modal Overlays - specific modal classes only */
:root[data-theme="crt"] .rp-overlay,
:root[data-theme="crt"] .aem-overlay,
:root[data-theme="crt"] .uxdesc-modal-overlay,
:root[data-theme="crt"] .stat-modal-overlay {
    background: rgba(0, 0, 0, 0.9);
}

/* Modal Containers */
:root[data-theme="crt"] .rp-modal,
:root[data-theme="crt"] .aem-modal-wide,
:root[data-theme="crt"] .uxdesc-modal,
:root[data-theme="crt"] .stat-modal {
    background: #0a0a0a;
    border: 1px solid var(--crt-color-25);
    border-radius: 2px;
    box-shadow:
        0 0 40px rgba(0, 0, 0, 0.8),
        0 0 30px var(--crt-color-15),
        inset 0 0 30px var(--crt-color-05);
    color: var(--crt-color);
    text-shadow: 0 0 8px var(--crt-color-30);
}

/* Modal Headers */
:root[data-theme="crt"] .rp-header,
:root[data-theme="crt"] .aem-header,
:root[data-theme="crt"] .stat-modal-header {
    border-color: var(--crt-color-20);
    background: linear-gradient(180deg, rgba(15, 15, 15, 0.95) 0%, rgba(8, 8, 8, 0.95) 100%);
}

:root[data-theme="crt"] .rp-title,
:root[data-theme="crt"] .aem-title,
:root[data-theme="crt"] .stat-modal-title {
    color: var(--crt-color);
    text-shadow: 0 0 15px var(--crt-color-40);
    font-family: 'Courier New', monospace;
}

/* Modal Close Buttons */
:root[data-theme="crt"] .rp-close,
:root[data-theme="crt"] .aem-close,
:root[data-theme="crt"] .stat-modal-close {
    color: var(--crt-color-50);
    text-shadow: 0 0 5px var(--crt-color-30);
}

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

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

/* Modal Footer */
:root[data-theme="crt"] .rp-footer,
:root[data-theme="crt"] .aem-footer,
:root[data-theme="crt"] .stat-modal-footer {
    border-color: var(--crt-color-20);
    background: linear-gradient(180deg, rgba(8, 8, 8, 0.95) 0%, rgba(5, 5, 5, 0.95) 100%);
}

/* Side Panels */
:root[data-theme="crt"] .rp-side-panel {
    background: #0a0a0a;
    border-left: 1px solid var(--crt-color-25);
    box-shadow: -10px 0 30px var(--crt-color-10);
}

/* Panel Headers */
:root[data-theme="crt"] .panel-header {
    background: linear-gradient(180deg, rgba(15, 15, 15, 0.95) 0%, rgba(8, 8, 8, 0.95) 100%);
    border-bottom: 1px solid var(--crt-color-20);
}

:root[data-theme="crt"] .panel-header h6 {
    color: var(--crt-color);
    text-shadow: 0 0 10px var(--crt-color-30);
    font-family: 'Courier New', monospace;
}

/* Panel Search */
:root[data-theme="crt"] .panel-search input {
    background: rgba(0, 0, 0, 0.6);
    border: 1px solid var(--crt-color-20);
    color: var(--crt-color);
    text-shadow: 0 0 5px var(--crt-color-30);
    border-radius: 2px;
}

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

/* Entity/Relationship Items in Modals */
:root[data-theme="crt"] .entity-card,
:root[data-theme="crt"] .relationship-item {
    background: rgba(0, 0, 0, 0.5);
    border: 1px solid var(--crt-color-15);
    color: var(--crt-color-50);
    border-radius: 2px;
    transition: all 0.2s ease;
}

:root[data-theme="crt"] .entity-card:hover,
:root[data-theme="crt"] .relationship-item:hover {
    background: var(--crt-color-10);
    border-color: var(--crt-color-30);
    box-shadow: 0 0 15px var(--crt-color-15);
}

:root[data-theme="crt"] .entity-card.selected,
:root[data-theme="crt"] .relationship-item.selected {
    background: var(--crt-color-15);
    border-color: var(--crt-color-40);
    box-shadow: 0 0 20px var(--crt-color-20);
}

/* Diagram Elements */
:root[data-theme="crt"] .rp-entity-box {
    background: #0a0a0a;
    border: 1px solid var(--crt-color-20);
    border-radius: 2px;
    box-shadow: 0 0 20px var(--crt-color-10), inset 0 0 15px var(--crt-color-05);
}

:root[data-theme="crt"] .rp-entity-box.clickable:hover {
    border-color: var(--crt-color-40);
    box-shadow: 0 0 30px var(--crt-color-20), inset 0 0 20px var(--crt-color-08);
}

:root[data-theme="crt"] .rp-entity-box.active {
    border-color: var(--crt-color);
    box-shadow: 0 0 40px var(--crt-color-30);
}

:root[data-theme="crt"] .rp-arrow-box {
    background: transparent;
    border: 1px solid var(--crt-color-15);
    color: var(--crt-color);
    border-radius: 2px;
}

:root[data-theme="crt"] .rp-arrow-box:hover {
    border-color: var(--crt-color-40);
    background: var(--crt-color-10);
}

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

/* Sentence Preview */
:root[data-theme="crt"] .rp-sentence {
    background: rgba(0, 0, 0, 0.5);
    border: 1px solid var(--crt-color-15);
    color: var(--crt-color-50);
    border-radius: 2px;
}

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