/* ===== custom.css — CGA Futurist for Bootstrap ===== */

/* 1) Font: drop your own .woff2 at /assets/fonts/FutureCGA.woff2 */
body,
pre,
code,
.terminal {
    font-family: 'Share Tech Mono', monospace;
}

:root {
    /* 2) Canonical CGA 16-color palette */
    --cga-black: #000000;
    --cga-blue: #0000AA;
    --cga-green: #00AA00;
    --cga-cyan: #00AAAA;
    --cga-red: #AA0000;
    --cga-magenta: #AA00AA;
    --cga-brown: #AA5500;
    --cga-light-gray: #AAAAAA;
    --cga-dark-gray: #555555;
    --cga-bright-blue: #5555FF;
    --cga-bright-green: #55FF55;
    --cga-bright-cyan: #55FFFF;
    --cga-bright-red: #FF5555;
    --cga-bright-magenta: #FF55FF;
    --cga-yellow: #FFFF55;
    --cga-white: #FFFFFF;

    /* 3) Theme mapping -> Bootstrap semantic colors */
    --bs-body-bg: #03030b;
    /* deep space */
    --bs-body-color: var(--cga-light-gray);
    --bs-primary: var(--cga-bright-cyan);
    --bs-secondary: var(--cga-magenta);
    --bs-success: var(--cga-bright-green);
    --bs-info: var(--cga-bright-blue);
    --bs-warning: var(--cga-yellow);
    --bs-danger: var(--cga-bright-red);
    --bs-light: var(--cga-light-gray);
    --bs-dark: var(--cga-dark-gray);

    /* Glow + UI accents */
    --fx-glow: 0 0 .7rem rgba(85, 255, 255, .35), 0 0 1.4rem rgba(85, 255, 255, .18);
    --fx-glow-magenta: 0 0 .7rem rgba(255, 85, 255, .35), 0 0 1.4rem rgba(255, 85, 255, .18);
    --fx-border: 1px solid rgba(85, 255, 255, .25);
    --fx-soft-border: 1px solid rgba(255, 255, 255, .08);
    --fx-card-bg: rgba(5, 8, 20, .6);
}

/* 4) Global look */
html,
body {
    background:
        radial-gradient(1200px 800px at 10% -10%, rgba(0, 170, 170, .20), transparent 60%),
        radial-gradient(800px 600px at 90% 10%, rgba(170, 0, 170, .18), transparent 55%),
        linear-gradient(180deg, #050815 0%, #04040d 60%, #03030b 100%);
    background-attachment: fixed;
}

body {
    font-family: "FutureCGA", ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
    text-rendering: optimizeLegibility;
}

/* 5) Optional CRT treatment (toggle on .crt-root) */
.crt-root {
    position: relative;
    isolation: isolate;
}

.crt-root::before {
    /* scanlines */
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    background-image:
        linear-gradient(rgba(255, 255, 255, .03) 1px, transparent 1px);
    background-size: 100% 3px;
    mix-blend-mode: soft-light;
    opacity: .7;
    z-index: 9999;
}

.crt-root::after {
    /* subtle vignette */
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    background: radial-gradient(circle at 50% 50%, transparent 60%, rgba(0, 0, 0, .35) 100%);
    z-index: 9998;
}

/* 6) Typographic accents */
a,
.link-primary {
    color: var(--cga-bright-cyan);
    text-decoration: none;
}

a:hover,
.link-primary:hover {
    text-shadow: var(--fx-glow);
}

h1,
h2,
h3,
h4,
h5,
h6 {
    color: var(--cga-white);
    letter-spacing: .02em;
    text-shadow: 0 0 .4rem rgba(255, 255, 255, .08);
}

/* 7) Navbar */
.navbar {
    border-bottom: var(--fx-border);
    backdrop-filter: blur(6px);
    background: linear-gradient(180deg, rgba(0, 170, 170, .08), rgba(170, 0, 170, .06)) !important;
}

.navbar-brand,
.navbar-nav .nav-link {
    color: var(--cga-light-gray) !important;
}

.navbar-brand:hover,
.navbar-nav .nav-link:hover {
    color: var(--cga-white) !important;
    text-shadow: var(--fx-glow);
}

/* 8) Cards */
.card {
    background: var(--fx-card-bg);
    border: var(--fx-soft-border);
    box-shadow: 0 10px 30px rgba(0, 0, 0, .35), 0 0 0 1px rgba(85, 255, 255, .06) inset;
}

.card .card-header {
    color: var(--cga-white);
    background: linear-gradient(90deg, rgba(85, 255, 255, .12), rgba(255, 85, 255, .1));
    border-bottom: var(--fx-soft-border);
}

/* 9) Buttons */
.btn {
    border-width: 1px;
    letter-spacing: .02em;
}

.btn-primary {
    color: #001010;
    background: linear-gradient(180deg, var(--cga-bright-cyan), #25a3a3);
    border-color: var(--cga-cyan);
    box-shadow: var(--fx-glow);
}

.btn-primary:hover {
    filter: brightness(1.08) saturate(1.05);
}

.btn-secondary {
    color: #120012;
    background: linear-gradient(180deg, var(--cga-bright-magenta), #b625b6);
    border-color: var(--cga-magenta);
    box-shadow: var(--fx-glow-magenta);
}

.btn-outline-primary {
    color: var(--cga-bright-cyan);
    border-color: var(--cga-bright-cyan);
}

.btn-outline-primary:hover {
    background: rgba(85, 255, 255, .12);
}

/* 10) Forms */
.form-control,
.form-select {
    color: var(--cga-white);
    background: rgba(255, 255, 255, .04);
    border: 1px solid rgba(85, 255, 255, .18);
}

.form-control:focus,
.form-select:focus {
    border-color: var(--cga-bright-cyan);
    box-shadow: 0 0 0 .2rem rgba(85, 255, 255, .18);
}

/* 11) Tables */
.table {
    color: var(--cga-light-gray);
    border-color: rgba(85, 255, 255, .2);
}

.table thead th {
    color: var(--cga-white);
    background: rgba(85, 255, 255, .12);
    border-bottom: 1px solid rgba(255, 255, 255, .15);
}

.table-striped tbody tr:nth-of-type(odd) {
    background-color: rgba(255, 255, 255, .03);
}

/* 12) Badges & Alerts */
.badge.bg-primary {
    background: var(--cga-bright-cyan) !important;
    color: #001010;
}

.badge.bg-secondary {
    background: var(--cga-bright-magenta) !important;
    color: #120012;
}

.alert {
    border: 1px solid rgba(255, 255, 255, .12);
    background: rgba(255, 255, 255, .06);
}

.alert-primary {
    border-color: var(--cga-bright-cyan);
    background: rgba(85, 255, 255, .12);
    color: var(--cga-white);
}

.alert-danger {
    border-color: var(--cga-bright-red);
    background: rgba(255, 85, 85, .12);
}

/* 13) Code/ANSI-ish blocks */
pre,
code,
.terminal {
    font-family: "FutureCGA", ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace !important;
}

pre.ansi,
.terminal {
    color: var(--cga-light-gray);
    background: #000;
    border: 1px solid rgba(85, 255, 255, .25);
    padding: 0.8rem 1rem;
    box-shadow: inset 0 0 0 1px rgba(85, 255, 255, .06);
}

/* 14) Pixel borders (CGA-style) */
.border-cga {
    --b: rgba(85, 255, 255, .45);
    position: relative;
    border: 2px solid var(--b);
    box-shadow: 0 0 0 1px rgba(255, 255, 255, .06) inset;
}

.border-cga::before,
.border-cga::after {
    content: "";
    position: absolute;
    pointer-events: none;
    border: 2px solid var(--b);
}

.border-cga::before {
    inset: 6px;
    opacity: .35;
}

.border-cga::after {
    inset: 12px;
    opacity: .2;
}

/* 15) Utility accents */
.text-cga-cyan {
    color: var(--cga-bright-cyan) !important;
}

.text-cga-magenta {
    color: var(--cga-bright-magenta) !important;
}

.text-cga-green {
    color: var(--cga-bright-green) !important;
}

.glow {
    text-shadow: var(--fx-glow);
}

hr {
    border-top: 1px dashed rgba(85, 255, 255, .25);
}

#sidebar {
    opacity: .7;
}