/* ============================================================================
   LOREBENCH CRT MONO THEME - True Monochrome Terminal
   ============================================================================
   Authentic old CRT monitor aesthetic like Alien (1979) or vintage terminals.
   Everything is converted to grayscale then tinted with phosphor green.
   ============================================================================ */

:root[data-theme="crt"] {
    /* CRT Pixelation - Higher = more pixelated (try 2-8) */
    --crt-pixel-size: 4;

    /* CRT Phosphor color (classic green) - RGB components for rgba() usage */
    --crt-r: 51;
    --crt-g: 255;
    --crt-b: 51;

    /* Computed phosphor color values */
    --crt-color: rgb(var(--crt-r), var(--crt-g), var(--crt-b));
    --crt-color-80: rgba(var(--crt-r), var(--crt-g), var(--crt-b), 0.8);
    --crt-color-60: rgba(var(--crt-r), var(--crt-g), var(--crt-b), 0.6);
    --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-10: rgba(var(--crt-r), var(--crt-g), var(--crt-b), 0.1);
    --crt-color-05: rgba(var(--crt-r), var(--crt-g), var(--crt-b), 0.05);

    /* PRIMARY ACCENT COLOR - phosphor green (ALL accents are green) */
    --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 - pure blacks */
    --lb-bg-base: #000000;
    --lb-bg-elevated: #050505;
    --lb-bg-elevated-1: #080808;
    --lb-bg-elevated-2: #0a0a0a;
    --lb-bg-elevated-3: #0f0f0f;
    --lb-bg-input: #000000;
    --lb-bg-hover: var(--crt-color-10);
    --bg-tertiary: #050505;
    --bg-primary: #080808;

    /* BORDER COLORS - green phosphor */
    --lb-border-subtle: var(--crt-color-15);
    --lb-border-default: var(--crt-color-25);
    --lb-border-strong: var(--crt-color-40);
    --lb-border-focus: var(--crt-color);

    /* TEXT COLORS - ALL green, no white/gray */
    --lb-text-primary: var(--crt-color);
    --lb-text-secondary: var(--crt-color-80);
    --lb-text-muted: var(--crt-color-50);
    --lb-text-subtle: var(--crt-color-30);
    --lb-text-inverse: #000000;

    /* STATE COLORS - all monochrome green */
    --lb-success: var(--crt-color);
    --lb-error: var(--crt-color);
    --lb-error-bg: var(--crt-color-10);
    --lb-error-border: var(--crt-color-25);
    --lb-warning: var(--crt-color);
    --lb-info: var(--crt-color);

    /* Status colors for tools - all green */
    --lb-status-success: var(--crt-color);
    --lb-status-success-bg: var(--crt-color-15);
    --lb-status-success-border: var(--crt-color-30);
    --lb-status-success-bg-hover: var(--crt-color-25);
    --lb-status-success-border-hover: var(--crt-color-40);

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

    /* INTERACTIVE ELEMENTS - buttons with readable contrast */
    --lb-button-primary-bg: var(--crt-color);
    --lb-button-primary-hover: var(--crt-color-80);
    --lb-button-primary-text: #000000;
    --lb-button-secondary-bg: transparent;
    --lb-button-secondary-hover: var(--crt-color-15);
    --lb-button-secondary-text: var(--crt-color);

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

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

    /* ========================================================================
       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);
}

/* ============================================================================
   SQUARE CORNERS - Remove all rounded corners for terminal aesthetic
   ============================================================================ */

:root[data-theme="crt"] *,
:root[data-theme="crt"] *::before,
:root[data-theme="crt"] *::after {
    border-radius: 0 !important;
}

/* ============================================================================
   MONOCHROME FILTER - The Core Effect
   ============================================================================
   Apply grayscale then colorize to green using filter chain
   ============================================================================ */

/* Apply grayscale + green colorization via filter chain
   IMPORTANT: We apply to .ww-layout instead of body because CSS filters
   create a new containing block, which breaks position:fixed for CRT overlays */
:root[data-theme="crt"] {
    --crt-hue: 75deg;
}

:root[data-theme="crt"] body {
    background: #000000;
}

:root[data-theme="crt"] .ww-layout {
    /*
     * Filter chain:
     * 1. grayscale(1) - strip all color to black/white
     * 2. sepia(1) - add brownish tint (needed for hue-rotate to work)
     * 3. hue-rotate(var(--crt-hue)) - shift to chosen color (default 75deg = green)
     * 4. saturate(2) - boost the color saturation
     * 5. brightness(0.85) - slightly dim for CRT feel
     * 6. contrast(1.1) - boost contrast
     *
     * --crt-hue is set by the color picker, default 75deg (green)
     */
    filter: grayscale(1) sepia(1) hue-rotate(var(--crt-hue)) saturate(2) brightness(0.85) contrast(1.1);
    -webkit-filter: grayscale(1) sepia(1) hue-rotate(var(--crt-hue)) saturate(2) brightness(0.85) contrast(1.1);
}

/* Explicit mobile filter - ensure monochrome applies on mobile browsers */
@media (max-width: 768px) {
    :root[data-theme="crt"] .ww-layout {
        /* Explicit fallback for mobile Safari/Chrome */
        filter: grayscale(1) sepia(1) hue-rotate(75deg) saturate(2) brightness(0.85) contrast(1.1) !important;
        -webkit-filter: grayscale(1) sepia(1) hue-rotate(75deg) saturate(2) brightness(0.85) contrast(1.1) !important;
    }
}

/* Text glow effect */
:root[data-theme="crt"] body {
    text-shadow: 0 0 10px var(--crt-color-40), 0 0 20px var(--crt-color-20);
}


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

/* Force all text to be green (override any inline styles) */
:root[data-theme="crt"] * {
    color: inherit;
}

/* Cards get heavy phosphor glow */
:root[data-theme="crt"] .ux-card,
:root[data-theme="crt"] .collapsible-section,
:root[data-theme="crt"] .infobox {
    box-shadow:
        0 0 30px rgba(0,0,0,0.8),
        0 0 20px var(--crt-color-10),
        inset 0 0 30px var(--crt-color-05);
    border-radius: 0; /* Sharp corners for terminal look */
    border: 1px solid var(--crt-color-25);
}

/* Buttons - terminal style */
:root[data-theme="crt"] .btn,
:root[data-theme="crt"] button {
    text-shadow: 0 0 10px var(--crt-color-50);
    box-shadow:
        0 0 10px var(--crt-color-15),
        inset 0 0 10px var(--crt-color-05);
    border-radius: 0;
    border: 1px solid var(--crt-color-30);
    background: var(--crt-color-10);
    color: var(--crt-color) !important;
}

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

/* Inputs - terminal style */
: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.8);
    border: 1px solid var(--crt-color-25);
    color: var(--crt-color) !important;
    text-shadow: 0 0 8px var(--crt-color-30);
    border-radius: 0;
    caret-color: var(--crt-color);
}

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

:root[data-theme="crt"] input:focus,
:root[data-theme="crt"] textarea:focus,
:root[data-theme="crt"] select:focus {
    border-color: var(--crt-color-50);
    box-shadow: 0 0 15px var(--crt-color-20);
    outline: none;
}

/* Links - green phosphor */
:root[data-theme="crt"] a {
    color: var(--crt-color) !important;
    text-shadow: 0 0 8px var(--crt-color-40);
    text-decoration: none;
}

:root[data-theme="crt"] a:hover {
    text-shadow: 0 0 15px var(--crt-color-60);
}

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

/* Badges - monochrome */
:root[data-theme="crt"] .pillar-badge,
:root[data-theme="crt"] .badge,
:root[data-theme="crt"] .collapsible-count {
    background: var(--crt-color-20) !important;
    color: var(--crt-color) !important;
    text-shadow: 0 0 8px var(--crt-color-40);
    box-shadow: 0 0 10px var(--crt-color-20);
    border-radius: 0;
    border: 1px solid var(--crt-color-30);
}

/* All borders should be sharp (no rounded corners) */
: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: 0;
}

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

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

:root[data-theme="crt"] .ww-nav-link:hover {
    color: var(--crt-color) !important;
    background: var(--crt-color-10);
    text-shadow: 0 0 10px var(--crt-color-40);
}

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

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

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

: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) !important;
}

/* Create button */
:root[data-theme="crt"] .ww-btn-create {
    background: transparent;
    color: var(--crt-color) !important;
    border: 1px solid var(--crt-color-40);
    text-shadow: 0 0 10px var(--crt-color-50);
    box-shadow: 0 0 10px var(--crt-color-20);
}

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

/* Stat cards */
:root[data-theme="crt"] .stat-card {
    background: linear-gradient(180deg, rgba(8, 8, 8, 0.95) 0%, rgba(0, 0, 0, 0.98) 100%) !important;
    border: 1px solid var(--crt-color-25) !important;
    border-radius: 0 !important;
}

:root[data-theme="crt"] .stat-card:hover {
    border-color: var(--crt-color-40) !important;
    box-shadow: 0 0 20px var(--crt-color-15);
}

:root[data-theme="crt"] .stat-card.create-card {
    background: linear-gradient(135deg, rgba(0, 0, 0, 0.95) 0%, var(--crt-color-10) 100%) !important;
    border-color: var(--crt-color-40) !important;
}

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

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

:root[data-theme="crt"] .table th,
:root[data-theme="crt"] th {
    background: var(--crt-color-10);
    text-shadow: 0 0 8px var(--crt-color-30);
}

/* Primary buttons - solid green with black text for readability */
:root[data-theme="crt"] .btn-primary,
:root[data-theme="crt"] button.btn-primary,
:root[data-theme="crt"] .stat-modal .btn-primary {
    background: var(--crt-color) !important;
    color: #000000 !important;
    text-shadow: none !important;
    border-color: var(--crt-color-60);
}

:root[data-theme="crt"] .btn-primary:hover,
:root[data-theme="crt"] button.btn-primary:hover,
:root[data-theme="crt"] .stat-modal .btn-primary:hover {
    background: var(--crt-color-80) !important;
    color: #000000 !important;
}

/* Images - apply green tint with pixelation for CRT authenticity
   Pixelation controlled by --crt-pixel-size (higher = more pixelated, try 2-8) */
:root[data-theme="crt"] img {
    filter: grayscale(1) brightness(0.8) contrast(1.2) url(#crt-pixelate);
    opacity: 0.9;
    image-rendering: pixelated;
    image-rendering: -moz-crisp-edges;
    image-rendering: crisp-edges;
}

/* Background images (used by UxImage Cover mode - these use background-image, not img tags) */
:root[data-theme="crt"] .ux-image-cover {
    filter: grayscale(1) brightness(0.8) contrast(1.2) url(#crt-pixelate);
    opacity: 0.9;
}

/* Gallery images - same pixelation as hero */
:root[data-theme="crt"] .media-grid img,
:root[data-theme="crt"] .media-item img,
:root[data-theme="crt"] .media-image {
    filter: grayscale(1) brightness(0.8) contrast(1.2) url(#crt-pixelate) !important;
    image-rendering: pixelated !important;
}

/* Media viewer modal - slightly more pixelated */
:root[data-theme="crt"] .media-viewer-overlay .media-viewer-image,
:root[data-theme="crt"] .media-viewer-image {
    filter: grayscale(1) brightness(0.8) contrast(1.2) url(#crt-pixelate-medium) !important;
    image-rendering: pixelated !important;
}

/* Other modal images */
:root[data-theme="crt"] [class*="-modal"] img,
:root[data-theme="crt"] [class*="-overlay"] img {
    filter: grayscale(1) brightness(0.8) contrast(1.2) url(#crt-pixelate) !important;
    image-rendering: pixelated !important;
}

/* Disable pixelation for icons and small images */
:root[data-theme="crt"] img.no-pixelate,
:root[data-theme="crt"] .icon img,
:root[data-theme="crt"] img[width="16"],
:root[data-theme="crt"] img[width="24"],
:root[data-theme="crt"] img[width="32"] {
    filter: grayscale(1) brightness(0.8) contrast(1.2);
}

/* Scrollbars - thin green */
:root[data-theme="crt"] ::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

:root[data-theme="crt"] ::-webkit-scrollbar-track {
    background: #000000;
}

:root[data-theme="crt"] ::-webkit-scrollbar-thumb {
    background: var(--crt-color-30);
    border: 1px solid var(--crt-color-20);
}

:root[data-theme="crt"] ::-webkit-scrollbar-thumb:hover {
    background: var(--crt-color-40);
}

:root[data-theme="crt"] .wireframe-toggle {
    display: none !important;
}

/* ============================================================================
   MODAL OVERRIDES - Terminal style
   ============================================================================
   Modals are rendered outside .ww-layout, so they need the CRT filter applied
   directly to get the green tint effect.
   ============================================================================ */

/* Apply CRT green filter to all modal overlays */
: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,
:root[data-theme="crt"] .media-viewer-overlay,
:root[data-theme="crt"] .media-picker-overlay,
:root[data-theme="crt"] .report-modal-overlay,
:root[data-theme="crt"] .badge-modal-overlay,
:root[data-theme="crt"] .upload-dialog-overlay,
:root[data-theme="crt"] [class*="-overlay"],
:root[data-theme="crt"] [class*="-modal"] {
    filter: grayscale(1) sepia(1) hue-rotate(var(--crt-hue, 75deg)) saturate(2) brightness(0.85) contrast(1.1);
}

: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.95);
}

: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: #000000;
    border: 1px solid var(--crt-color-30);
    border-radius: 0;
    box-shadow:
        0 0 50px rgba(0, 0, 0, 0.9),
        0 0 40px var(--crt-color-15),
        inset 0 0 40px var(--crt-color-05);
    color: var(--crt-color);
}

:root[data-theme="crt"] .rp-header,
:root[data-theme="crt"] .aem-header,
:root[data-theme="crt"] .stat-modal-header {
    border-color: var(--crt-color-25);
    background: linear-gradient(180deg, rgba(10, 10, 10, 0.98) 0%, rgba(0, 0, 0, 0.98) 100%);
}

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

/* Footer styling */
:root[data-theme="crt"] .ww-footer {
    background: linear-gradient(180deg, rgba(5, 5, 5, 0.98) 0%, rgba(0, 0, 0, 1) 100%);
    border-top: 1px solid var(--crt-color-20);
}

:root[data-theme="crt"] .ww-footer-logo {
    color: var(--crt-color) !important;
    text-shadow: 0 0 10px var(--crt-color-40);
}

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

:root[data-theme="crt"] .ww-footer a:hover {
    color: var(--crt-color) !important;
}

/* Selection highlight - green */
:root[data-theme="crt"] ::selection {
    background: var(--crt-color-40);
    color: #000000;
}

:root[data-theme="crt"] ::-moz-selection {
    background: var(--crt-color-40);
    color: #000000;
}

/* Headings */
:root[data-theme="crt"] h1,
:root[data-theme="crt"] h2,
:root[data-theme="crt"] h3,
:root[data-theme="crt"] h4,
:root[data-theme="crt"] h5,
:root[data-theme="crt"] h6 {
    color: var(--crt-color) !important;
    text-shadow: 0 0 10px var(--crt-color-40);
}

/* Code blocks */
:root[data-theme="crt"] code,
:root[data-theme="crt"] pre {
    background: rgba(0, 0, 0, 0.8);
    border: 1px solid var(--crt-color-20);
    color: var(--crt-color);
    font-family: 'Courier New', monospace;
}

/* Tool panels - ensure they get the monochrome treatment */
:root[data-theme="crt"] .lb-tool-panel,
:root[data-theme="crt"] .lb-tool-toolbar,
:root[data-theme="crt"] .controls-panel,
:root[data-theme="crt"] .continent-panel,
:root[data-theme="crt"] .info-panel {
    border-radius: 0;
    border-color: var(--crt-color-25);
    box-shadow: 0 0 20px var(--crt-color-10);
}

/* Canvas containers don't get the grayscale filter (WebGL handles its own rendering) */
:root[data-theme="crt"] canvas {
    filter: none;
}