/* ========================================
   CRT Theme
   Windows XP-era website on a CRT monitor
   Warm, colourful, slightly soft-edged
   ======================================== */

[data-theme="goc-crt"] {
    --sidebar-bg: #1c2a4a;
    --sidebar-header-bg: #1f3058;
    --topbar-bg: #2a3f6e;
    --content-bg: #e8e4d9;
    --page-bg: #ddd8cb;

    --card-bg: #f0ece3;
    --card-header-bg: #d4cfc4;
    --card-border: #b8b2a4;

    --table-bg: #f0ece3;
    --table-header-bg: #d4cfc4;
    --table-border: #b8b2a4;
    --table-hover-bg: #e4dfd4;
    --table-stripe-bg: #ebe7dc;

    --text-primary: #1a1a1a;
    --text-secondary: #3a3a3a;
    --text-muted: #6b6b5e;
    --text-inverse: #f0ece3;

    --border-color: #b8b2a4;
    --border-light: #ccc7ba;
    --sidebar-header-border: rgba(255, 255, 255, 0.1);
    --topbar-border: rgba(255, 255, 255, 0.1);

    --scrollbar-thumb: #8b8578;
    --scrollbar-thumb-hover: #6b6558;

    --sidebar-text: #b8c8e8;
    --sidebar-text-hover: #ffffff;
    --sidebar-active-bg: rgba(255, 255, 255, 0.12);
    --sidebar-active-text: #ffffff;
    --sidebar-active-border: #5b9bd5;
    --nav-group-bg: transparent;
    --nav-group-border: transparent;
    --nav-group-hover-bg: rgba(255, 255, 255, 0.06);

    --topbar-text: #c8d8f0;
    --topbar-text-active: #ffffff;

    /* XP-style blue/green buttons */
    --btn-primary-bg: #3a7c2e;
    --btn-primary-bg-hover: #4a9c3a;
    --btn-primary-text: #ffffff;
    --btn-secondary-bg: #c8c2b4;
    --btn-secondary-bg-hover: #b8b2a4;
    --btn-secondary-text: #2a2a2a;
    --btn-secondary-border: #a8a294;
    --btn-outline-border: #8b8578;
    --btn-outline-text: #3a3a3a;

    --input-bg: #ffffff;
    --input-border: #a0a090;
    --input-text: #1a1a1a;
    --input-placeholder: #8b8b7e;
    --input-focus-border: #3a7c2e;
    --input-disabled-bg: #d8d4c8;

    --dropdown-bg: #f0ece3;
    --dropdown-border: #a8a294;
    --dropdown-text: #2a2a2a;
    --dropdown-hover-bg: #3a6ea5;
    --dropdown-hover-text: #ffffff;

    --modal-bg: #f0ece3;
    --modal-header-bg: linear-gradient(to right, #2a5298, #3a7ecc);
    --modal-border: #8b8578;
    --modal-backdrop: rgba(0, 0, 0, 0.6);

    --alert-info-bg: #e8f0ff;
    --alert-info-border: #3a6ea5;
    --alert-info-text: #1a4a7a;
    --alert-success-bg: #e8f5e0;
    --alert-success-border: #3a7c2e;
    --alert-success-text: #2a5c1e;
    --alert-warning-bg: #fff5e0;
    --alert-warning-border: #d4960a;
    --alert-warning-text: #7a5500;
    --alert-danger-bg: #fde8e8;
    --alert-danger-border: #c0392b;
    --alert-danger-text: #8a1a10;

    --success-color: #3a7c2e;
    --success-hover: #2a6c1e;
    --warning-color: #d4960a;
    --warning-hover: #b47e08;
    --danger-color: #c0392b;
    --danger-hover: #a02a1c;

    --progress-bg: #d4cfc4;

    --avatar-bg: #2a5298;
    --logo-filter: none;
    --shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
    --link-color: #2a5298;
    --link-hover-color: #1a3a78;

    /* ── canonical --tl-* contract bridge ───────────────────────────── */
    --tl-bg-base:        var(--sidebar-bg, #1c2a4a);   /* solid dark CRT-bezel blue, not the light page paper */
    --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, #0a0a0a);

    --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, #fff);
    --tl-button-secondary-bg:   var(--btn-secondary-bg, var(--card-header-bg));
    --tl-button-secondary-text: var(--btn-secondary-text, var(--text-secondary));

    --tl-success: var(--success-color, #4caf50);
    --tl-error:   var(--danger-color, #e05050);
    --tl-warning: var(--warning-color, #f4c430);
    --tl-info:    var(--alert-info-text, var(--link-color, #4a9eff));
    --tl-error-bg:     var(--alert-danger-bg, rgba(224,80,80,.12));
    --tl-error-border: var(--alert-danger-border, var(--danger-color, #e05050));

    --tl-shadow-sm: var(--shadow, 0 1px 2px rgba(0,0,0,.3));
    --tl-shadow-md: var(--shadow, 0 4px 12px rgba(0,0,0,.4));
    --tl-shadow-lg: var(--shadow, 0 10px 30px rgba(0,0,0,.5));
}

/* CRT theme personality */
[data-theme="goc-crt"] {
    --focus-ring-color: rgba(58, 110, 165, 0.4);
    --border-radius-card: 2px;
    --border-radius-btn: 2px;
    --scrollbar-track: #d4cfc4;
}

[data-theme="goc-crt"] ::selection {
    background-color: #3a6ea5;
    color: #ffffff;
}

/* XP-style gradient modal header */
[data-theme="goc-crt"] .modal-header {
    background: linear-gradient(to right, #2a5298, #3a7ecc) !important;
    color: #ffffff !important;
}

[data-theme="goc-crt"] .modal-header .modal-title,
[data-theme="goc-crt"] .modal-header * {
    color: #ffffff !important;
}

/* XP-style gradient topbar */
[data-theme="goc-crt"] .top-row {
    background: linear-gradient(to bottom, #3a6ea5, #2a5298) !important;
}

/* CRT screen bulge — rounded edges + glass reflection */
[data-theme="goc-crt"] #page-root {
    border-radius: 18px;
    overflow: hidden;
    box-shadow:
        /* Inner shadow simulates recessed glass */
        inset 0 0 60px rgba(0, 0, 0, 0.15),
        /* Outer bezel shadow */
        0 0 0 3px #2a2a2a,
        0 0 0 6px #1a1a1a,
        0 0 30px rgba(0, 0, 0, 0.5);
}

/* Glass reflection highlight — bright spot upper-left like curved glass catching light */
[data-theme="goc-crt"] #page-root::after {
    content: '';
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 9999;
    border-radius: 18px;
    background: radial-gradient(
        ellipse 50% 30% at 30% 20%,
        rgba(255, 255, 255, 0.06) 0%,
        transparent 70%
    );
}


/* Slight warm tint to the whole page - CRT phosphor warmth */
[data-theme="goc-crt"] body {
    filter: contrast(1.05) saturate(1.1);
}

/* CRT scanlines + RGB sub-pixels (subtler than retro terminal) */
[data-theme="goc-crt"]: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.12) 50%
        ),
        linear-gradient(
            90deg,
            rgba(255, 0, 0, 0.03),
            rgba(0, 255, 0, 0.01),
            rgba(0, 0, 255, 0.03)
        );
    background-size: 100% 4px, 3px 100%;
}

/* Vignette - CRT edges are dimmer */
[data-theme="goc-crt"]: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 60%,
        rgba(0, 0, 0, 0.2) 100%
    );
}

/* Subtle refresh line sweeping top to bottom */
@media (prefers-reduced-motion: no-preference) {
    [data-theme="goc-crt"]:not([data-effects-off]):not([data-effect-beam-off]) body::before {
        content: '';
        position: fixed;
        top: -60px;
        left: 0;
        right: 0;
        height: 60px;
        pointer-events: none;
        z-index: 9999;
        background: linear-gradient(
            to bottom,
            transparent 0%,
            rgba(255, 255, 255, 0.12) 40%,
            rgba(255, 255, 255, 0.08) 60%,
            transparent 100%
        );
        filter: blur(10px);
        animation: crt-beam 10s linear infinite;
    }

    @keyframes crt-beam {
        0% { transform: translateY(0); opacity: 0; }
        5% { opacity: 1; }
        90% { opacity: 1; }
        95% { transform: translateY(calc(100vh + 60px)); opacity: 0; }
        100% { transform: translateY(calc(100vh + 60px)); opacity: 0; }
    }
}

/* Slightly rounded but chunky - XP era bevelled look */
[data-theme="goc-crt"] .btn {
    border-radius: 3px !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.3), 0 1px 2px rgba(0,0,0,0.2);
}

[data-theme="goc-crt"] .btn:active {
    box-shadow: inset 0 2px 3px rgba(0,0,0,0.2);
}

[data-theme="goc-crt"] .form-control,
[data-theme="goc-crt"] .form-select {
    box-shadow: inset 1px 1px 2px rgba(0,0,0,0.15);
}