/* ========================================
   Retro Terminal Theme
   Green phosphor on black, CRT vibes
   ======================================== */

[data-theme="terminal"] {
    --sidebar-bg: #0a120a;
    --sidebar-header-bg: #0d160d;
    --topbar-bg: #0d160d;
    --content-bg: transparent;
    --page-bg: #0a120a;

    --card-bg: rgba(14, 22, 14, 0.96);
    --card-header-bg: #142014;
    --card-border: #1e2e1e;

    --table-bg: rgba(14, 22, 14, 0.96);
    --table-header-bg: #142014;
    --table-border: #1e2e1e;
    --table-hover-bg: #162416;
    --table-stripe-bg: #0e180e;

    --text-primary: #00ff41;
    --text-secondary: #00cc33;
    --text-muted: #008822;
    --text-inverse: #0a120a;

    --border-color: #1e2e1e;
    --border-light: #283828;
    --sidebar-header-border: rgba(0, 255, 65, 0.12);
    --topbar-border: rgba(0, 255, 65, 0.12);

    --scrollbar-thumb: #1e2e1e;
    --scrollbar-thumb-hover: #00ff41;

    --sidebar-text: #00cc33;
    --sidebar-text-hover: #00ff41;
    --sidebar-active-bg: rgba(0, 255, 65, 0.1);
    --sidebar-active-text: #00ff41;
    --sidebar-active-border: #00ff41;
    --nav-group-bg: transparent;
    --nav-group-border: transparent;
    --nav-group-hover-bg: rgba(0, 255, 65, 0.05);

    --topbar-text: #00cc33;
    --topbar-text-active: #00ff41;

    --btn-primary-bg: #00cc33;
    --btn-primary-bg-hover: #00ff41;
    --btn-primary-text: #0a120a;
    --btn-secondary-bg: #142014;
    --btn-secondary-bg-hover: #1e2e1e;
    --btn-secondary-text: #00cc33;
    --btn-secondary-border: #1e2e1e;
    --btn-outline-border: #283828;
    --btn-outline-text: #00cc33;

    --input-bg: #0e180e;
    --input-border: #1e2e1e;
    --input-text: #00ff41;
    --input-placeholder: #006622;
    --input-focus-border: #00ff41;
    --input-disabled-bg: #0a120a;

    --dropdown-bg: #101a10;
    --dropdown-border: #1e2e1e;
    --dropdown-text: #00cc33;
    --dropdown-hover-bg: #162416;
    --dropdown-hover-text: #00ff41;

    --modal-bg: #101a10;
    --modal-header-bg: #142014;
    --modal-border: #1e2e1e;
    --modal-backdrop: rgba(5, 10, 5, 0.9);

    --alert-info-bg: rgba(0, 255, 65, 0.06);
    --alert-info-border: #00ff41;
    --alert-info-text: #00ff41;
    --alert-success-bg: rgba(0, 255, 65, 0.08);
    --alert-success-border: #00ff41;
    --alert-success-text: #33ff66;
    --alert-warning-bg: rgba(255, 200, 0, 0.08);
    --alert-warning-border: #ffc800;
    --alert-warning-text: #ffc800;
    --alert-danger-bg: rgba(255, 0, 0, 0.08);
    --alert-danger-border: #ff0000;
    --alert-danger-text: #ff3333;

    --success-color: #00ff41;
    --success-hover: #00cc33;
    --warning-color: #ffc800;
    --warning-hover: #cc9f00;
    --danger-color: #ff0000;
    --danger-hover: #cc0000;

    --progress-bg: #142014;

    --avatar-bg: #00cc33;
    --logo-filter: invert(67%) sepia(89%) saturate(1000%) hue-rotate(85deg) brightness(115%);
    --shadow: 0 0 12px rgba(0, 255, 65, 0.08);
    --link-color: #00ff41;
    --link-hover-color: #66ff88;

    /* ── canonical --tl-* contract bridge ───────────────────────────── */
    --tl-bg-base:        var(--page-bg, var(--sidebar-bg, #0a120a));   /* SOLID dark phosphor-black base */
    --tl-bg-elevated:    var(--card-bg);
    --tl-bg-elevated-2:  var(--card-header-bg, var(--table-stripe-bg, var(--card-bg)));
    --tl-bg-elevated-3:  var(--btn-secondary-bg, var(--table-hover-bg, var(--card-bg)));
    --tl-bg-hover:       var(--table-hover-bg, var(--nav-group-hover-bg, var(--card-bg)));
    --tl-bg-input:       var(--input-bg, var(--card-bg));

    --tl-text-primary:   var(--text-primary);
    --tl-text-secondary: var(--text-secondary, var(--text-primary));
    --tl-text-muted:     var(--text-muted, var(--text-secondary));
    --tl-text-subtle:    var(--input-placeholder, var(--text-muted));
    --tl-text-inverse:   var(--text-inverse, #0a120a);

    --tl-accent-primary:        var(--link-color, var(--btn-primary-bg-hover, var(--btn-primary-bg)));
    --tl-accent-primary-light:  var(--link-hover-color, var(--sidebar-text-hover, var(--link-color)));
    --tl-accent-primary-dark:   var(--btn-primary-bg, var(--link-color));

    --tl-border-default: var(--border-color, var(--card-border));
    --tl-border-subtle:  var(--card-border, var(--border-color));
    --tl-border-strong:  var(--border-light, var(--input-border, var(--border-color)));
    --tl-border-focus:   var(--input-focus-border, var(--link-color, var(--btn-primary-bg)));

    --tl-card-bg:        var(--card-bg);
    --tl-card-border:    var(--card-border, var(--border-color));
    --tl-card-header-bg: var(--card-header-bg, var(--card-bg));

    --tl-button-primary-bg:     var(--btn-primary-bg);
    --tl-button-primary-text:   var(--btn-primary-text, #0a120a);
    --tl-button-secondary-bg:   var(--btn-secondary-bg, var(--card-header-bg));
    --tl-button-secondary-text: var(--btn-secondary-text, var(--text-secondary));

    /* terminal collapses state colours toward phosphor green by design;
       keep warning/error readable but on-theme */
    --tl-success: var(--success-color, #00ff41);
    --tl-error:   var(--danger-color, #ff3333);
    --tl-warning: var(--warning-color, #ffc800);
    --tl-info:    var(--alert-info-text, var(--link-color, #00ff41));
    --tl-error-bg:     var(--alert-danger-bg, rgba(255, 0, 0, 0.08));
    --tl-error-border: var(--alert-danger-border, var(--danger-color, #ff0000));

    --tl-shadow-sm: var(--shadow, 0 0 6px rgba(0, 255, 65, 0.06));
    --tl-shadow-md: var(--shadow, 0 0 12px rgba(0, 255, 65, 0.08));
    --tl-shadow-lg: var(--shadow, 0 0 24px rgba(0, 255, 65, 0.12));
}

/* Terminal theme personality */
[data-theme="terminal"] {
    --focus-ring-color: rgba(0, 255, 65, 0.3);
    --border-radius-card: 0;
    --border-radius-btn: 0;
    --font-family-ui: 'Courier New', Courier, monospace;
    --scrollbar-track: #0a120a;
}

/* backdrop-filter removed for performance — cards use opaque backgrounds */

/* Green phosphor monochrome — strip all colour, re-tint green */
[data-theme="terminal"] #page-root {
    filter: saturate(0) brightness(0.85) sepia(1) hue-rotate(70deg) saturate(4);
}

[data-theme="terminal"] ::selection {
    background-color: rgba(0, 255, 65, 0.3);
    color: #ffffff;
}

/* Green phosphor caret + block shape (progressive — block not yet in Chrome/Edge) */
[data-theme="terminal"] input,
[data-theme="terminal"] textarea,
[data-theme="terminal"] [contenteditable] {
    caret-color: #00ff41;
    caret-shape: block;
}

/* Sharp corners - everything 0 radius for retro terminal feel */
[data-theme="terminal"] .btn,
[data-theme="terminal"] .form-control,
[data-theme="terminal"] .form-select,
[data-theme="terminal"] .input-group-text,
[data-theme="terminal"] .dropdown-menu,
[data-theme="terminal"] .modal-content,
[data-theme="terminal"] .card,
[data-theme="terminal"] .content-card,
[data-theme="terminal"] .content-section,
[data-theme="terminal"] .stat-card,
[data-theme="terminal"] .collapsible-section,
[data-theme="terminal"] .alert,
[data-theme="terminal"] .badge,
[data-theme="terminal"] .progress,
[data-theme="terminal"] .progress-bar,
[data-theme="terminal"] .list-group-item,
[data-theme="terminal"] .accordion-item,
[data-theme="terminal"] .accordion-button,
[data-theme="terminal"] .nav-tabs .nav-link,
[data-theme="terminal"] .nav-pills .nav-link,
[data-theme="terminal"] .page-link,
[data-theme="terminal"] .toast,
[data-theme="terminal"] .popover,
[data-theme="terminal"] .tooltip-inner,
[data-theme="terminal"] .form-check-input {
    border-radius: 0 !important;
}

[data-theme="terminal"] ::-webkit-scrollbar-thumb {
    border-radius: 0;
}

/* CRT scanlines + RGB sub-pixel overlay */
[data-theme="terminal"]:not([data-effects-off]):not([data-effect-scanlines-off]) body::after {
    content: '';
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 9998;
    background-image:
        linear-gradient(
            rgba(18, 16, 16, 0) 50%,
            rgba(0, 0, 0, 0.25) 50%
        ),
        linear-gradient(
            90deg,
            rgba(255, 0, 0, 0.06),
            rgba(0, 255, 0, 0.02),
            rgba(0, 0, 255, 0.06)
        );
    background-size: 100% 4px, 3px 100%;
}

/* Animated refresh line sweeping top to bottom - harsh bright green band */
@media (prefers-reduced-motion: no-preference) {
    [data-theme="terminal"]:not([data-effects-off]):not([data-effect-beam-off]) body::before {
        content: '';
        position: fixed;
        top: -30px;
        left: 0;
        right: 0;
        height: 30px;
        pointer-events: none;
        z-index: 9999;
        background: linear-gradient(
            to bottom,
            transparent 0%,
            rgba(0, 255, 65, 0.08) 20%,
            rgba(0, 255, 65, 0.35) 45%,
            rgba(200, 255, 200, 0.5) 50%,
            rgba(0, 255, 65, 0.35) 55%,
            rgba(0, 255, 65, 0.08) 80%,
            transparent 100%
        );
        filter: blur(3px);
        animation: terminal-beam 8s linear infinite;
    }

    @keyframes terminal-beam {
        0% { transform: translateY(0); opacity: 0; }
        5% { opacity: 1; }
        55% { transform: translateY(calc(100vh + 30px)); opacity: 1; }
        56% { opacity: 0; }
        100% { transform: translateY(0); opacity: 0; }
    }

    /* Subtle flicker on the scanline overlay */
    [data-theme="terminal"]:not([data-effects-off]):not([data-effect-flicker-off]) body::after {
        animation: terminal-flicker 0.15s infinite;
    }

    @keyframes terminal-flicker {
        0% { opacity: 0.94; }
        10% { opacity: 0.91; }
        20% { opacity: 0.98; }
        30% { opacity: 0.93; }
        40% { opacity: 0.96; }
        50% { opacity: 0.90; }
        60% { opacity: 0.97; }
        70% { opacity: 0.92; }
        80% { opacity: 0.95; }
        90% { opacity: 0.93; }
        100% { opacity: 0.96; }
    }
}

/* Chromatic aberration on text */
@media (prefers-reduced-motion: no-preference) {
    [data-theme="terminal"]:not([data-effects-off]):not([data-effect-flicker-off]) {
        animation: terminal-text-flicker 150ms infinite alternate;
    }

    @keyframes terminal-text-flicker {
        from { text-shadow: 1px 0 0 rgba(255, 0, 0, 0.15), -1px 0 0 rgba(0, 255, 0, 0.15); }
        to { text-shadow: -1px 0.5px 1px rgba(255, 0, 0, 0.12), 1px -0.5px 1px rgba(0, 255, 0, 0.12); }
    }
}

/* Screen edge vignette */
[data-theme="terminal"]:not([data-effects-off]):not([data-effect-vignette-off]) #page-root::before {
    content: '';
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 9997;
    background: radial-gradient(
        ellipse at center,
        transparent 55%,
        rgba(0, 0, 0, 0.35) 100%
    );
}

/* Vertical hold — pure-CSS periodic "roll": a dark tear-band drifts down the
   screen and wraps, with the page giving a brief vertical snap as it passes.
   Subtle and slow; fully removed when data-effect-vhold-off is present. */
@media (prefers-reduced-motion: no-preference) {
    /* Travelling horizontal tear band (the classic vertical-hold roll line) */
    [data-theme="terminal"]:not([data-effects-off]):not([data-effect-vhold-off]) #page-root::after {
        content: '';
        position: fixed;
        left: 0;
        right: 0;
        top: 0;
        height: 60px;
        pointer-events: none;
        z-index: 9996;
        background: linear-gradient(
            to bottom,
            transparent 0%,
            rgba(0, 0, 0, 0.18) 35%,
            rgba(0, 255, 65, 0.05) 50%,
            rgba(0, 0, 0, 0.18) 65%,
            transparent 100%
        );
        animation: terminal-vhold-roll 7s linear infinite;
    }

    /* The page itself gives a brief vertical snap as the roll line wraps */
    [data-theme="terminal"]:not([data-effects-off]):not([data-effect-vhold-off]) #page-root {
        animation: terminal-vhold-snap 7s ease-in-out infinite;
    }

    @keyframes terminal-vhold-roll {
        0%   { transform: translateY(-60px); }
        100% { transform: translateY(100vh); }
    }

    @keyframes terminal-vhold-snap {
        0%, 92%  { transform: translateY(0); }
        94%      { transform: translateY(6px); }
        96%      { transform: translateY(-3px); }
        98%      { transform: translateY(1px); }
        100%     { transform: translateY(0); }
    }
}

/* Phosphor text glow on headings */
[data-theme="terminal"] h1,
[data-theme="terminal"] h2,
[data-theme="terminal"] h3,
[data-theme="terminal"] h4,
[data-theme="terminal"] h5 {
    text-shadow: 0 0 8px rgba(0, 255, 65, 0.3), 0 0 16px rgba(0, 255, 65, 0.1);
}

/* Blinking cursor on active nav items */
@media (prefers-reduced-motion: no-preference) {
    [data-theme="terminal"] .sidebar .nav-link.active::after,
    [data-theme="terminal"] .sidebar a.custom-nav-item.custom-active::after {
        content: '_';
        animation: terminal-blink 1s step-end infinite;
        margin-left: 4px;
        color: #00ff41;
    }

    @keyframes terminal-blink {
        0%, 100% { opacity: 1; }
        50% { opacity: 0; }
    }
}

/* Terminal command-style button prefixes */
[data-theme="terminal"] .btn-primary::before {
    content: '> ';
    opacity: 0.6;
}

[data-theme="terminal"] .btn-secondary::before {
    content: '$ ';
    opacity: 0.4;
}

/* Suppress prefix on icon-only and very small buttons */
[data-theme="terminal"] .btn-sm::before,
[data-theme="terminal"] .btn-close::before {
    content: none;
}