/* ============================================================
   NorthernSky Mission Control — shared theme
   Dark sci-fi HUD for always-on 4K wall monitors.
   All sizes are rem-based; html font-size scales with resolution.
   ============================================================ */

:root {
    --mc-bg: #04070d;
    --mc-bg-raised: #081120;
    --mc-panel: rgba(8, 17, 32, 0.86);
    --mc-line: rgba(64, 224, 255, 0.22);
    --mc-line-strong: rgba(64, 224, 255, 0.55);

    --mc-text: #d7e9f4;
    --mc-dim: #6d8aa3;

    --mc-cyan: #38e1ff;
    /* Status colours from the Nordicco design manual (Oct 2025). The palette has no
       red, so Alert uses brand orange. Installation uses the saturated blue to stand
       out from the teal Running/Idle states; Idle takes the light teal. */
    --mc-running: #53c0ab;
    --mc-idle: #87bdb3;
    --mc-installing: #00a0dc;
    --mc-alert: #ee7219;
    --mc-offline: #737778;

    --mc-glow-cyan: 0 0 0.7rem rgba(56, 225, 255, 0.45);
    --mc-font-display: 'Orbitron', 'Bebas Neue', sans-serif;
    --mc-font-mono: 'Share Tech Mono', 'Consolas', monospace;
    --mc-font-body: 'Rajdhani', 'Roboto', sans-serif;
}

/* Resolution scaling: design baseline 1080p, scale up for 1440p and 4K walls. */
html { font-size: 14px; }
@media (min-width: 1900px) { html { font-size: 16px; } }
@media (min-width: 2500px) { html { font-size: 22px; } }
@media (min-width: 3500px) { html { font-size: 30px; } }

.mc-body {
    margin: 0;
    background-color: var(--mc-bg);
    color: var(--mc-text);
    font-family: var(--mc-font-body);
    overflow: hidden;
    cursor: default;
}

/* Faint grid + vignette laid over the whole viewport. */
.mc-backdrop::before {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 1;
    background-image:
        linear-gradient(rgba(56, 225, 255, 0.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(56, 225, 255, 0.03) 1px, transparent 1px);
    background-size: 3.5rem 3.5rem;
}
.mc-backdrop::after {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 1;
    background: radial-gradient(ellipse at center, transparent 55%, rgba(0, 0, 0, 0.55) 100%);
}

/* ---------- Panels ---------- */

.mc-panel {
    position: relative;
    background: var(--mc-panel);
    border: 1px solid var(--mc-line);
    backdrop-filter: blur(6px);
    box-shadow: inset 0 0 1.5rem rgba(56, 225, 255, 0.04), 0 0 1.2rem rgba(0, 0, 0, 0.6);
}

/* Corner brackets */
.mc-panel::before,
.mc-panel::after {
    content: "";
    position: absolute;
    width: 0.9rem;
    height: 0.9rem;
    pointer-events: none;
}
.mc-panel::before {
    top: -1px;
    left: -1px;
    border-top: 2px solid var(--mc-line-strong);
    border-left: 2px solid var(--mc-line-strong);
}
.mc-panel::after {
    bottom: -1px;
    right: -1px;
    border-bottom: 2px solid var(--mc-line-strong);
    border-right: 2px solid var(--mc-line-strong);
}

.mc-panel-title {
    font-family: var(--mc-font-display);
    font-size: 0.8rem;
    letter-spacing: 0.35em;
    color: var(--mc-cyan);
    text-transform: uppercase;
    margin: 0 0 0.6rem 0;
}

.mc-dim { color: var(--mc-dim); }

/* ---------- KPI tiles ---------- */

.mc-kpi {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.15rem;
    padding: 0.6rem 0.85rem;
    min-width: 6rem;
}

.mc-kpi-value {
    font-family: var(--mc-font-mono);
    font-size: 2.8rem;
    line-height: 1;
    font-variant-numeric: tabular-nums;
    color: var(--mc-text);
    text-shadow: var(--mc-glow-cyan);
    transition: color 0.4s ease;
}

.mc-kpi-unit {
    font-size: 1.4rem;
    color: var(--mc-dim);
    margin-left: 0.2rem;
}

.mc-kpi-label {
    font-family: var(--mc-font-display);
    font-size: 0.78rem;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: var(--mc-dim);
    white-space: nowrap;
}

.mc-kpi-accent { width: 2.2rem; height: 2px; margin-top: 0.3rem; background: currentColor; box-shadow: 0 0 0.5rem currentColor; }

.mc-kpi.changed .mc-kpi-value { animation: mc-value-flash 1.6s ease-out; }

@keyframes mc-value-flash {
    0% { color: var(--mc-cyan); text-shadow: 0 0 1.2rem rgba(56, 225, 255, 0.9); }
    100% { color: var(--mc-text); }
}

/* Severity colours, shared by KPIs, legend, markers and detail panel. */
.mc-col-running { color: var(--mc-running); }
.mc-col-idle { color: var(--mc-idle); }
.mc-col-installing { color: var(--mc-installing); }
.mc-col-alert { color: var(--mc-alert); }
.mc-col-offline { color: var(--mc-offline); }
.mc-col-cyan { color: var(--mc-cyan); }

/* ---------- Status dot ---------- */

.mc-dot {
    display: inline-block;
    width: 0.55rem;
    height: 0.55rem;
    border-radius: 50%;
    background: currentColor;
    box-shadow: 0 0 0.5rem currentColor;
}

.mc-dot.pulse { animation: mc-pulse 2s ease-in-out infinite; }

@keyframes mc-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.35; }
}

/* ---------- Buttons & inputs ---------- */

.mc-button {
    font-family: var(--mc-font-display);
    font-size: 0.8rem;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: var(--mc-cyan);
    background: transparent;
    border: 1px solid var(--mc-line-strong);
    padding: 0.6rem 1.6rem;
    cursor: pointer;
    transition: background 0.2s ease, box-shadow 0.2s ease;
}
.mc-button:hover {
    background: rgba(56, 225, 255, 0.12);
    box-shadow: var(--mc-glow-cyan);
}

.mc-input {
    font-family: var(--mc-font-mono);
    font-size: 1rem;
    letter-spacing: 0.2em;
    color: var(--mc-text);
    background: rgba(0, 0, 0, 0.45);
    border: 1px solid var(--mc-line);
    padding: 0.6rem 0.9rem;
    outline: none;
    width: 100%;
    box-sizing: border-box;
}
.mc-input:focus { border-color: var(--mc-line-strong); box-shadow: var(--mc-glow-cyan); }

.mc-alert-text {
    color: var(--mc-alert);
    font-family: var(--mc-font-mono);
    letter-spacing: 0.15em;
}

/* ---------- Unlock page ---------- */

.mc-unlock {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100vh;
    background:
        radial-gradient(ellipse at 50% 40%, rgba(56, 225, 255, 0.06), transparent 60%),
        var(--mc-bg);
}

.mc-unlock-panel {
    width: 24rem;
    padding: 2.5rem 3rem;
    text-align: center;
}

.mc-unlock-panel h1 {
    font-family: var(--mc-font-display);
    font-size: 1.3rem;
    letter-spacing: 0.5em;
    color: var(--mc-cyan);
    margin: 0.5rem 0;
}

.mc-unlock-panel p { font-size: 0.8rem; letter-spacing: 0.18em; }
.mc-unlock-panel form { display: flex; flex-direction: column; gap: 0.9rem; margin-top: 1.4rem; }
.mc-unlock-logo { width: 60%; opacity: 0.9; }

/* ---------- Blazor connection overlay ---------- */

#components-reconnect-modal {
    position: fixed;
    inset: 0;
    z-index: 10000;
    display: none;
    align-items: center;
    justify-content: center;
    background: rgba(4, 7, 13, 0.85);
    color: var(--mc-cyan);
    font-family: var(--mc-font-display);
    font-size: 1rem;
    letter-spacing: 0.4em;
    text-transform: uppercase;
}

#components-reconnect-modal.components-reconnect-show,
#components-reconnect-modal.components-reconnect-failed,
#components-reconnect-modal.components-reconnect-rejected {
    display: flex;
}

#blazor-error-ui { display: none !important; }