/* DECK — dark "command-deck" theme layer over Bootstrap 5.
   A token + component reskin; no markup rewrites. Fonts load from Google Fonts
   (App.razor) and degrade to system mono/sans offline. */

:root {
    /* Deck palette */
    --deck-bg: #070B0E;
    --deck-panel: #0C141A;
    --deck-panel-2: #101C23;
    --deck-line: rgba(125, 205, 210, 0.16);
    --deck-line-2: rgba(125, 205, 210, 0.30);
    --deck-grid: rgba(125, 205, 210, 0.045);
    --deck-ph: #4FE3C1;        /* phosphor — live / ok / active */
    --deck-ph-rgb: 79, 227, 193;
    --deck-ph-hi: #BFF8EC;
    --deck-am: #F2B84B;        /* amber — attention / warning */
    --deck-am-rgb: 242, 184, 75;
    --deck-rd: #FF6B6B;        /* signal — danger / helg */
    --deck-rd-rgb: 255, 107, 107;
    --deck-info: #6FB7D6;      /* steel — informational */
    --deck-ph-glow: 0 0 5px rgba(79, 227, 193, 0.5);  /* phosphor bloom — navbar */
    --deck-tx: #D9E8E6;
    --deck-tx-2: #E8AC3E;      /* CRT amber — secondary / muted text */
    --deck-tx-3: #C2912F;      /* CRT amber — dim hints, headers, placeholders */
    --crt-glow: 0 0 5px rgba(232, 172, 62, 0.45);  /* amber phosphor bloom */
    --deck-sans: 'Chakra Petch', system-ui, -apple-system, Segoe UI, sans-serif;
    --deck-mono: 'IBM Plex Mono', ui-monospace, 'Cascadia Code', Consolas, monospace;

    /* Bootstrap surface tokens → dark */
    color-scheme: dark;
    --bs-body-bg: var(--deck-bg);
    --bs-body-bg-rgb: 7, 11, 14;
    --bs-body-color: var(--deck-tx);
    --bs-body-color-rgb: 217, 232, 230;
    --bs-body-font-family: var(--deck-sans);
    --bs-emphasis-color: var(--deck-tx);
    --bs-emphasis-color-rgb: 217, 232, 230;
    --bs-secondary-bg: var(--deck-panel);
    --bs-secondary-color: var(--deck-tx-2);
    --bs-secondary-color-rgb: 232, 172, 62;
    --bs-tertiary-bg: var(--deck-panel-2);
    --bs-tertiary-color: var(--deck-tx-3);
    --bs-heading-color: var(--deck-tx);
    --bs-border-color: var(--deck-line);
    --bs-border-color-translucent: var(--deck-line);
    --bs-link-color: var(--deck-ph);
    --bs-link-color-rgb: var(--deck-ph-rgb);
    --bs-link-hover-color: var(--deck-ph-hi);
    --bs-link-hover-color-rgb: 191, 248, 236;
    --bs-code-color: var(--deck-am);
    --bs-primary: var(--deck-ph);
    --bs-primary-rgb: var(--deck-ph-rgb);

    /* Tables */
    --bs-table-color: var(--deck-tx);
    --bs-table-bg: transparent;
    --bs-table-border-color: var(--deck-line);
    --bs-table-striped-color: var(--deck-tx);
    --bs-table-striped-bg: rgba(125, 205, 210, 0.04);
    --bs-table-hover-color: var(--deck-tx);
    --bs-table-hover-bg: rgba(79, 227, 193, 0.07);
}

/* Page surface — faint engineering grid + scanline, fixed so it reads as a screen */
body {
    background-color: var(--deck-bg);
    background-image:
        repeating-linear-gradient(0deg, rgba(0, 0, 0, 0.20) 0 1px, transparent 1px 3px),
        linear-gradient(var(--deck-grid) 1px, transparent 1px),
        linear-gradient(90deg, var(--deck-grid) 1px, transparent 1px);
    background-size: 100% 3px, 32px 32px, 32px 32px;
    background-attachment: fixed;
    color: var(--deck-tx);
    font-family: var(--deck-sans);
}

h1, h2, h3, h4, h5, h6 {
    color: var(--deck-tx);
    font-family: var(--deck-sans);
    font-weight: 600;
    letter-spacing: 0.03em;
}

h1 { font-size: 1.7rem; }

a {
    color: var(--deck-ph);
    text-decoration: none;
}

a:hover { color: var(--deck-ph-hi); }

hr { border-color: var(--deck-line); opacity: 1; }
code { color: var(--deck-am); }
::selection { background: rgba(79, 227, 193, 0.30); color: #fff; }

.text-muted, .text-body-secondary, .text-secondary {
    color: var(--deck-tx-2) !important;
    text-shadow: var(--crt-glow);
}

/* Tables — monospaced data grid */
.table {
    font-family: var(--deck-mono);
    font-variant-numeric: tabular-nums;
    font-size: 0.86rem;
}

.table > thead th {
    color: var(--deck-tx-3);
    text-shadow: var(--crt-glow);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-weight: 500;
    font-size: 0.74rem;
    border-bottom-color: var(--deck-line-2);
}

/* Bootstrap 5.1 hard-codes a near-black cell colour on .table (its --bs-table-*
   token model is 5.3-only), so force the body cells to readable amber here —
   overriding the base, striped and hover rules. */
.table,
.table > tbody > tr > td,
.table > tbody > tr > th,
.table-striped > tbody > tr:nth-of-type(odd) > td,
.table-striped > tbody > tr:nth-of-type(odd) > th,
.table-hover > tbody > tr:hover > td,
.table-hover > tbody > tr:hover > th {
    color: var(--deck-tx-2);
    text-shadow: var(--crt-glow);
}

/* Forms */
.form-control, .form-select {
    background-color: var(--deck-panel);
    border: 1px solid var(--deck-line-2);
    border-radius: 0;
    color: var(--deck-tx);
}

.form-control::placeholder { color: var(--deck-tx-3); }

.form-control:focus, .form-select:focus {
    background-color: var(--deck-panel);
    border-color: var(--deck-ph);
    color: var(--deck-tx);
    box-shadow: 0 0 0 2px rgba(79, 227, 193, 0.25);
}

.form-check-input {
    background-color: var(--deck-panel);
    border: 1px solid var(--deck-line-2);
}

.form-check-input:checked {
    background-color: var(--deck-ph);
    border-color: var(--deck-ph);
}

.form-check-input:focus {
    border-color: var(--deck-ph);
    box-shadow: 0 0 0 2px rgba(79, 227, 193, 0.25);
}

.form-label {
    color: var(--deck-tx-2);
    text-shadow: var(--crt-glow);
    text-transform: uppercase;
    letter-spacing: 0.07em;
    font-size: 0.78rem;
    font-weight: 500;
}

.form-text { color: var(--deck-tx-3); text-shadow: var(--crt-glow); }
.col-form-label { color: var(--deck-tx-2); text-shadow: var(--crt-glow); }

.input-group-text {
    background: var(--deck-panel-2);
    border-color: var(--deck-line-2);
    border-radius: 0;
    color: var(--deck-tx-2);
}

.validation-message, .invalid-feedback { color: var(--deck-rd); }

/* Buttons — ghost, square, two-tone */
.btn {
    border-radius: 0;
    letter-spacing: 0.03em;
}

.btn:focus, .btn:focus-visible, .btn:active:focus {
    box-shadow: 0 0 0 2px rgba(79, 227, 193, 0.25) !important;
}

.btn-primary {
    background: rgba(79, 227, 193, 0.12);
    border: 1px solid var(--deck-ph);
    color: var(--deck-ph);
}

.btn-primary:hover, .btn-primary:focus, .btn-primary:active {
    background: rgba(79, 227, 193, 0.22) !important;
    border-color: var(--deck-ph) !important;
    color: var(--deck-ph-hi) !important;
    box-shadow: none;
}

.btn-secondary, .btn-outline-secondary {
    background: transparent;
    border: 1px solid var(--deck-line-2);
    color: var(--deck-tx-2);
}

.btn-secondary:hover, .btn-outline-secondary:hover {
    background: rgba(125, 205, 210, 0.08);
    border-color: var(--deck-line-2);
    color: var(--deck-tx);
}

.btn-outline-primary {
    background: transparent;
    border: 1px solid var(--deck-ph);
    color: var(--deck-ph);
}

.btn-outline-primary:hover {
    background: rgba(79, 227, 193, 0.14);
    color: var(--deck-ph-hi);
    border-color: var(--deck-ph);
}

.btn-danger, .btn-outline-danger {
    background: rgba(255, 107, 107, 0.10);
    border: 1px solid var(--deck-rd);
    color: var(--deck-rd);
}

.btn-danger:hover, .btn-outline-danger:hover {
    background: rgba(255, 107, 107, 0.22);
    color: #ffb3b3;
    border-color: var(--deck-rd);
}

.btn-warning, .btn-outline-warning {
    background: rgba(242, 184, 75, 0.10);
    border: 1px solid var(--deck-am);
    color: var(--deck-am);
}

.btn-warning:hover, .btn-outline-warning:hover {
    background: rgba(242, 184, 75, 0.22);
    color: #ffd587;
    border-color: var(--deck-am);
}

.btn-success, .btn-outline-success {
    background: rgba(79, 227, 193, 0.10);
    border: 1px solid var(--deck-ph);
    color: var(--deck-ph);
}

.btn-success:hover, .btn-outline-success:hover {
    background: rgba(79, 227, 193, 0.22);
    color: var(--deck-ph-hi);
    border-color: var(--deck-ph);
}

.btn-link { color: var(--deck-ph); }
.btn-link:hover { color: var(--deck-ph-hi); }

/* Surfaces */
.card {
    background: var(--deck-panel);
    border: 1px solid var(--deck-line);
    border-radius: 0;
    color: var(--deck-tx);
}

.card-header, .card-footer {
    background: var(--deck-panel-2);
    border-color: var(--deck-line);
    color: var(--deck-tx);
}

.list-group-item {
    background: var(--deck-panel);
    border-color: var(--deck-line);
    color: var(--deck-tx);
}

/* Alerts */
.alert {
    border-radius: 0;
    border: 1px solid var(--deck-line-2);
    background: var(--deck-panel);
    color: var(--deck-tx);
}

.alert-success {
    border-color: var(--deck-ph);
    background: rgba(79, 227, 193, 0.07);
    color: var(--deck-ph-hi);
}

.alert-danger {
    border-color: var(--deck-rd);
    background: rgba(255, 107, 107, 0.08);
    color: #ffb3b3;
}

.alert-warning {
    border-color: var(--deck-am);
    background: rgba(242, 184, 75, 0.08);
    color: #ffd587;
}

.alert-info {
    border-color: var(--deck-line-2);
    background: var(--deck-panel-2);
    color: var(--deck-tx);
}

/* Status badges → outlined mono chips */
.badge {
    border-radius: 0;
    background: transparent !important;
    border: 1px solid currentColor;
    font-family: var(--deck-mono);
    font-weight: 500;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding: 0.28em 0.6em;
}

.badge.text-bg-success, .badge.text-bg-primary {
    color: var(--deck-ph) !important;
    border-color: rgba(79, 227, 193, 0.55) !important;
}

.badge.text-bg-warning {
    color: var(--deck-am) !important;
    border-color: rgba(242, 184, 75, 0.55) !important;
}

.badge.text-bg-danger {
    color: #ff8f8f !important;
    border-color: rgba(255, 107, 107, 0.6) !important;
}

.badge.text-bg-info {
    color: var(--deck-info) !important;
    border-color: rgba(111, 183, 214, 0.5) !important;
}

.badge.text-bg-secondary, .badge.text-bg-dark, .badge.text-bg-light {
    color: var(--deck-tx-2) !important;
    border-color: var(--deck-line-2) !important;
}

/* Deck utilities — corner-bracket frame, chamfered tile, eyebrow label */
.deck-frame {
    position: relative;
    border: 1px solid var(--deck-line);
    background: var(--deck-panel);
}

.deck-frame::before, .deck-frame::after {
    content: "";
    position: absolute;
    width: 10px;
    height: 10px;
    border: 1px solid var(--deck-ph);
    pointer-events: none;
}

.deck-frame::before { top: -1px; left: -1px; border-right: 0; border-bottom: 0; }
.deck-frame::after { bottom: -1px; right: -1px; border-left: 0; border-top: 0; }

.deck-tile {
    background: var(--deck-panel);
    clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 12px 100%, 0 calc(100% - 12px));
}

.deck-eyebrow {
    font-family: var(--deck-mono);
    font-size: 0.72rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--deck-tx-3);
    text-shadow: var(--crt-glow);
}

/* Scrollbars */
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-track { background: var(--deck-bg); }
*::-webkit-scrollbar-thumb {
    background: var(--deck-line-2);
    border: 2px solid var(--deck-bg);
}

*::-webkit-scrollbar-thumb:hover { background: rgba(79, 227, 193, 0.4); }

/* K.A.T. login — centered command-terminal card */
.kat-shell {
    min-height: calc(100vh - 5rem);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 2rem 1rem;
}

.kat-admin-flag {
    font-family: var(--deck-mono);
    font-weight: 700;
    font-size: 6.3rem;
    line-height: 1;
    letter-spacing: 0.32em;
    margin-right: -0.32em;
    color: #FF3B3B;
    margin-bottom: 1.4rem;
    text-align: center;
}

.kat-card {
    width: 100%;
    max-width: 420px;
    padding: 2.25rem 1.9rem 1.75rem;
}

.kat-brand {
    display: block;
    text-align: center;
    margin-bottom: 1.9rem;
    text-decoration: none;
}

.kat-title {
    font-family: var(--deck-sans);
    font-weight: 700;
    font-size: 4rem;
    line-height: 1;
    letter-spacing: 0.12em;
    margin-right: -0.12em;
    color: var(--deck-ph);
}

.kat-sub {
    font-family: var(--deck-mono);
    text-transform: uppercase;
    letter-spacing: 0.36em;
    margin-right: -0.36em;
    font-size: 0.82rem;
    color: var(--deck-tx-2);
    text-shadow: var(--crt-glow);
    margin-top: 0.7rem;
}

.kat-warn {
    font-family: var(--deck-mono);
    text-transform: uppercase;
    letter-spacing: 0.18em;
    font-size: 0.72rem;
    color: var(--deck-am);
    text-align: center;
    margin-top: 1.5rem;
    padding-top: 1rem;
    border-top: 1px solid var(--deck-line);
}

/* Module status cards on the home screen — active = phosphor edge, inactive = greyed out. */
.module-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 0.75rem;
}

.module-card {
    display: flex;
    align-items: center;
    gap: 14px;
    min-width: 240px;
    padding: 0.7rem 0.95rem;
    border: 1px solid var(--deck-line);
    border-left: 2px solid var(--deck-line-2);
    background: var(--deck-panel);
}

.module-card .module-name {
    color: var(--deck-tx);
    font-weight: 500;
}

.module-card .module-state {
    margin-left: auto;
    font-family: var(--deck-mono);
    font-size: 0.72rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.module-card.on {
    border-left-color: var(--deck-ph);
}

.module-card.on .module-state {
    color: var(--deck-ph);
    text-shadow: var(--deck-ph-glow);
}

.module-card.off {
    opacity: 0.45;
}

.module-card.off .module-state {
    color: var(--deck-tx-3);
}

/* Tagline footer — shown at the bottom of every page (all three layouts). */
.kronos-footer {
    font-family: var(--deck-mono);
    font-size: 0.72rem;
    letter-spacing: 0.16em;
    color: var(--deck-tx-3);
    text-shadow: var(--crt-glow);
    text-align: center;
    padding: 1.75rem 1rem 1.25rem;
}