/* ═══════════════════════════════════════════════════════
   MISSION CONTROL — Design System
   SpaceX/NASA control room meets Bloomberg terminal
   ═══════════════════════════════════════════════════════ */

/* ── Design Tokens ── */
:root {
    --mc-bg-deep:    #0a0e17;
    --mc-bg-panel:   #0f1520;
    --mc-bg-surface: #141c2b;
    --mc-bg-hover:   #1a2538;
    --mc-border:     #1e293b;
    --mc-border-lite:#253348;

    --mc-accent:     #00ffd0;
    --mc-accent-dim: #00c8a4;
    --mc-success:    #00ffd0;
    --mc-error:      #ff4d6a;
    --mc-warning:    #ffb224;
    --mc-running:    #38bdf8;

    --mc-text-primary:   #e2e8f0;
    --mc-text-secondary: #8b9ec2;
    --mc-text-muted:     #4a5e80;
    --mc-text-link:      #38bdf8;

    --mc-glow-accent:  0 0 12px rgba(0, 255, 208, 0.25);
    --mc-glow-error:   0 0 12px rgba(255, 77, 106, 0.25);
    --mc-glow-warning: 0 0 12px rgba(255, 178, 36, 0.25);
    --mc-glow-running: 0 0 12px rgba(56, 189, 248, 0.25);

    --mc-font-display: 'JetBrains Mono', monospace;
    --mc-font-body:    'IBM Plex Sans', sans-serif;
}

/* ── Base ── */
body {
    background: var(--mc-bg-deep);
    color: var(--mc-text-primary);
    font-family: var(--mc-font-body);
    position: relative;
}

/* Dot-grid background texture */
body::before {
    content: '';
    position: fixed;
    inset: 0;
    background-image: radial-gradient(circle, var(--mc-accent) 0.5px, transparent 0.5px);
    background-size: 24px 24px;
    opacity: 0.03;
    pointer-events: none;
    z-index: 0;
}

body > * { position: relative; z-index: 1; }

a { color: var(--mc-text-link); }
a:hover { color: #7dd3fc; }

/* ── Animations ── */
@keyframes spin {
    to { transform: rotate(360deg); }
}

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

@keyframes mc-fadein {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: translateY(0); }
}

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

.mc-animate-in {
    animation: mc-fadein 0.4s ease-out both;
}
.mc-animate-in:nth-child(1) { animation-delay: 0s; }
.mc-animate-in:nth-child(2) { animation-delay: 0.06s; }
.mc-animate-in:nth-child(3) { animation-delay: 0.12s; }
.mc-animate-in:nth-child(4) { animation-delay: 0.18s; }
.mc-animate-in:nth-child(5) { animation-delay: 0.24s; }
.mc-animate-in:nth-child(6) { animation-delay: 0.30s; }

/* ── Spinner ── */
.spinner {
    width: 16px;
    height: 16px;
    border: 2px solid rgba(56, 189, 248, 0.2);
    border-top-color: var(--mc-running);
    border-radius: 50%;
    animation: spin 0.7s linear infinite;
    display: inline-block;
    flex-shrink: 0;
}
.spinner-sm {
    width: 10px;
    height: 10px;
    border: 1.5px solid rgba(56, 189, 248, 0.2);
    border-top-color: var(--mc-running);
    border-radius: 50%;
    animation: spin 0.7s linear infinite;
    display: inline-block;
    flex-shrink: 0;
}

/* htmx loading indicator */
.htmx-indicator { display: none; }
.htmx-request .htmx-indicator,
.htmx-request.htmx-indicator { display: inline-block; }

/* ── Navigation ── */
.mc-nav {
    background: var(--mc-bg-surface);
    border-bottom: 1px solid var(--mc-border);
    backdrop-filter: blur(12px);
}

.mc-nav-link {
    font-family: var(--mc-font-display);
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--mc-text-secondary);
    padding: 0.4rem 0.6rem;
    border-radius: 0.25rem;
    transition: color 0.15s, background 0.15s;
    text-decoration: none;
}
.mc-nav-link:hover {
    color: var(--mc-text-primary);
    background: var(--mc-bg-hover);
}
.mc-nav-link--active {
    color: var(--mc-accent) !important;
    background: rgba(0, 255, 208, 0.06);
}

.mc-status-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--mc-accent);
    animation: mc-blink 2s ease-in-out infinite;
    display: inline-block;
}

/* ── Panel (Card with corner brackets) ── */
.mc-panel {
    background: var(--mc-bg-panel);
    border: 1px solid var(--mc-border);
    border-radius: 0.5rem;
    position: relative;
    overflow: hidden;
}
.mc-panel::before,
.mc-panel::after {
    content: '';
    position: absolute;
    width: 12px;
    height: 12px;
    border-color: var(--mc-accent);
    opacity: 0.3;
    pointer-events: none;
}
.mc-panel::before {
    top: 4px;
    left: 4px;
    border-top: 1.5px solid;
    border-left: 1.5px solid;
    border-top-left-radius: 2px;
}
.mc-panel::after {
    bottom: 4px;
    right: 4px;
    border-bottom: 1.5px solid;
    border-right: 1.5px solid;
    border-bottom-right-radius: 2px;
}

/* ── Stat Card ── */
.mc-stat-card {
    background: var(--mc-bg-panel);
    border: 1px solid var(--mc-border);
    border-radius: 0.5rem;
    padding: 1rem;
    border-top: 2px solid var(--mc-border-lite);
}
.mc-stat-card[data-status="success"] { border-top-color: var(--mc-success); }
.mc-stat-card[data-status="error"]   { border-top-color: var(--mc-error); }
.mc-stat-card[data-status="warning"] { border-top-color: var(--mc-warning); }
.mc-stat-card[data-status="running"] { border-top-color: var(--mc-running); }

/* ── Typography ── */
.mc-label {
    font-family: var(--mc-font-display);
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--mc-text-muted);
    margin-bottom: 0.25rem;
}

.mc-value {
    font-family: var(--mc-font-display);
    font-size: 1.5rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: var(--mc-text-primary);
    line-height: 1.2;
}

.mc-mono {
    font-family: var(--mc-font-display);
    font-variant-numeric: tabular-nums;
}

/* ── Section Header ── */
.mc-section-header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-family: var(--mc-font-display);
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--mc-text-secondary);
    margin-bottom: 0.75rem;
}
.mc-section-header::before,
.mc-section-header::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--mc-border);
}

/* ── Status Badges ── */
.mc-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.2rem 0.55rem;
    border-radius: 0.25rem;
    font-family: var(--mc-font-display);
    font-size: 0.65rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    line-height: 1.4;
}
.mc-badge-success {
    background: rgba(0, 255, 208, 0.08);
    color: var(--mc-success);
    border: 1px solid rgba(0, 255, 208, 0.2);
    box-shadow: var(--mc-glow-accent);
}
.mc-badge-failed {
    background: rgba(255, 77, 106, 0.08);
    color: var(--mc-error);
    border: 1px solid rgba(255, 77, 106, 0.2);
    box-shadow: var(--mc-glow-error);
}
.mc-badge-running {
    background: rgba(56, 189, 248, 0.08);
    color: var(--mc-running);
    border: 1px solid rgba(56, 189, 248, 0.2);
    box-shadow: var(--mc-glow-running);
    animation: mc-pulse 2s ease-in-out infinite;
}
.mc-badge-queued {
    background: rgba(255, 178, 36, 0.08);
    color: var(--mc-warning);
    border: 1px solid rgba(255, 178, 36, 0.2);
}
.mc-badge-default {
    background: rgba(74, 94, 128, 0.15);
    color: var(--mc-text-secondary);
    border: 1px solid var(--mc-border);
}

/* ── Table ── */
.mc-table {
    width: 100%;
    border-collapse: collapse;
}
.mc-table thead th {
    font-family: var(--mc-font-display);
    font-size: 0.6rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--mc-text-muted);
    font-weight: 500;
    padding: 0.6rem 0.75rem;
    text-align: left;
    border-bottom: 1px solid var(--mc-border);
}
.mc-table tbody td {
    padding: 0.6rem 0.75rem;
    font-size: 0.8rem;
    color: var(--mc-text-secondary);
    border-bottom: 1px solid rgba(30, 41, 59, 0.4);
}
.mc-table tbody tr:hover {
    background: var(--mc-bg-hover);
}
.mc-table tbody tr:last-child td {
    border-bottom: none;
}

/* ── Chart Bars ── */
.mc-bar-success { background: linear-gradient(to top, #047857, var(--mc-success)); border-radius: 2px 2px 0 0; }
.mc-bar-warning { background: linear-gradient(to top, #b45309, var(--mc-warning)); border-radius: 2px 2px 0 0; }
.mc-bar-error   { background: linear-gradient(to top, #b91c1c, var(--mc-error));   border-radius: 2px 2px 0 0; }
.mc-bar-empty   { background: var(--mc-border); border-radius: 2px 2px 0 0; }

/* ── Budget Bar ── */
.mc-budget-track {
    width: 100%;
    height: 0.5rem;
    background: var(--mc-border);
    border-radius: 9999px;
    overflow: hidden;
}
.mc-budget-fill {
    height: 100%;
    border-radius: 9999px;
    transition: width 0.3s ease;
}
.mc-budget-fill--ok      { background: linear-gradient(90deg, #047857, var(--mc-success)); box-shadow: 0 0 8px rgba(0, 255, 208, 0.3); }
.mc-budget-fill--warning  { background: linear-gradient(90deg, #b45309, var(--mc-warning)); box-shadow: 0 0 8px rgba(255, 178, 36, 0.3); }
.mc-budget-fill--danger   { background: linear-gradient(90deg, #b91c1c, var(--mc-error));  box-shadow: 0 0 8px rgba(255, 77, 106, 0.3); }

/* ── Operations Banner ── */
.mc-operations-banner {
    background: rgba(56, 189, 248, 0.06);
    border: 1px solid rgba(56, 189, 248, 0.15);
    border-radius: 0.5rem;
    padding: 0.75rem 1rem;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    box-shadow: var(--mc-glow-running);
}
.mc-operations-banner .mc-ops-text {
    font-family: var(--mc-font-display);
    font-size: 0.75rem;
    color: var(--mc-running);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* ── Buttons ── */
.mc-btn-primary {
    font-family: var(--mc-font-display);
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: 0.5rem 1.25rem;
    background: rgba(0, 255, 208, 0.1);
    color: var(--mc-accent);
    border: 1px solid rgba(0, 255, 208, 0.3);
    border-radius: 0.375rem;
    cursor: pointer;
    transition: background 0.15s, box-shadow 0.15s;
}
.mc-btn-primary:hover {
    background: rgba(0, 255, 208, 0.18);
    box-shadow: var(--mc-glow-accent);
}
.mc-btn-primary:disabled {
    opacity: 0.35;
    cursor: not-allowed;
    box-shadow: none;
}

/* ── Modal ── */
.mc-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 50;
}
.mc-modal {
    background: var(--mc-bg-surface);
    border: 1px solid var(--mc-border-lite);
    border-radius: 0.5rem;
    padding: 1.5rem;
    max-width: 28rem;
    width: 100%;
    margin: 1rem;
    box-shadow: 0 0 40px rgba(0, 0, 0, 0.5);
}
.mc-modal h3 {
    font-family: var(--mc-font-display);
    font-size: 0.9rem;
    color: var(--mc-text-primary);
    margin-bottom: 0.5rem;
}
.mc-modal p {
    font-size: 0.8rem;
    color: var(--mc-text-secondary);
    margin-bottom: 1rem;
}

/* ── Form Controls ── */
.mc-input {
    background: var(--mc-bg-deep);
    border: 1px solid var(--mc-border);
    border-radius: 0.375rem;
    padding: 0.4rem 0.75rem;
    font-size: 0.8rem;
    color: var(--mc-text-primary);
    font-family: var(--mc-font-body);
    transition: border-color 0.15s;
}
.mc-input:focus {
    outline: none;
    border-color: var(--mc-accent-dim);
    box-shadow: 0 0 0 1px rgba(0, 255, 208, 0.15);
}
.mc-input::placeholder { color: var(--mc-text-muted); }

select.mc-input {
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%234a5e80' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.5rem center;
    padding-right: 1.75rem;
}

/* ── Alpine Cloak ── */
[x-cloak] { display: none !important; }

/* ── Filter Tabs ── */
.mc-filter-tab {
    font-family: var(--mc-font-display);
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: 0.35rem 0.6rem;
    border-radius: 0.25rem;
    color: var(--mc-text-muted);
    background: none;
    border: none;
    cursor: pointer;
    transition: color 0.15s, background 0.15s;
    text-decoration: none;
}
.mc-filter-tab:hover {
    color: var(--mc-text-secondary);
    background: var(--mc-bg-hover);
}
.mc-filter-tab--active {
    color: var(--mc-text-primary) !important;
    background: var(--mc-bg-hover);
}
.mc-filter-tab--running.mc-filter-tab--active { color: var(--mc-running) !important; background: rgba(56, 189, 248, 0.08); }
.mc-filter-tab--queued.mc-filter-tab--active  { color: var(--mc-warning) !important; background: rgba(255, 178, 36, 0.08); }
.mc-filter-tab--success.mc-filter-tab--active { color: var(--mc-success) !important; background: rgba(0, 255, 208, 0.08); }
.mc-filter-tab--failed.mc-filter-tab--active  { color: var(--mc-error) !important;   background: rgba(255, 77, 106, 0.08); }

/* ── Error Panel ── */
.mc-error-panel {
    background: rgba(255, 77, 106, 0.04);
    border: 1px solid rgba(255, 77, 106, 0.15);
    border-left: 3px solid var(--mc-error);
    border-radius: 0.5rem;
    padding: 1rem;
}

/* ── Markdown / Prose Overrides ── */
.prose table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.8rem;
}
.prose table th,
.prose table td {
    padding: 0.4rem 0.75rem;
    border: 1px solid var(--mc-border);
    color: var(--mc-text-secondary);
}
.prose table th {
    background: var(--mc-bg-surface);
    color: var(--mc-text-primary);
    font-weight: 600;
    text-align: left;
}
.prose table tr:hover td {
    background: var(--mc-bg-hover);
}
.prose details {
    border: 1px solid var(--mc-border);
    border-radius: 0.375rem;
    margin: 0.75rem 0;
    overflow: hidden;
}
.prose details summary {
    cursor: pointer;
    padding: 0.5rem 0.75rem;
    background: var(--mc-bg-surface);
    color: var(--mc-text-primary);
    font-weight: 500;
    font-size: 0.85rem;
    list-style: none;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.prose details summary::before {
    content: '▶';
    font-size: 0.6rem;
    color: var(--mc-text-muted);
    transition: transform 0.15s;
}
.prose details[open] summary::before {
    transform: rotate(90deg);
}
.prose details summary::-webkit-details-marker { display: none; }
.prose details > :not(summary) {
    padding: 0.5rem 0.75rem;
}
.prose code {
    background: var(--mc-bg-surface);
    border: 1px solid var(--mc-border);
    border-radius: 0.25rem;
    padding: 0.15rem 0.35rem;
    font-size: 0.8em;
    color: var(--mc-accent-dim);
}
.prose pre {
    background: var(--mc-bg-surface);
    border: 1px solid var(--mc-border);
    border-radius: 0.375rem;
    padding: 0.75rem;
    overflow-x: auto;
}
.prose pre code {
    background: none;
    border: none;
    padding: 0;
    color: var(--mc-text-secondary);
}
.prose img {
    max-width: 100%;
    border-radius: 0.375rem;
}
.prose input[type="checkbox"] {
    margin-right: 0.35rem;
    accent-color: var(--mc-accent);
}
.prose hr {
    border-color: var(--mc-border);
}
.prose blockquote {
    border-left: 3px solid var(--mc-border-lite);
    padding-left: 0.75rem;
    color: var(--mc-text-muted);
}

/* ── Utility ── */
.mc-text-accent  { color: var(--mc-accent); }
.mc-text-error   { color: var(--mc-error); }
.mc-text-warning { color: var(--mc-warning); }
.mc-text-running { color: var(--mc-running); }
.mc-text-muted   { color: var(--mc-text-muted); }
.mc-text-secondary { color: var(--mc-text-secondary); }

/* ── Search Input ── */
.mc-search-input {
    width: 100%;
    background: var(--mc-bg-deep);
    border: 1px solid var(--mc-border);
    border-radius: 0.375rem;
    padding: 0.5rem 0.75rem 0.5rem 2rem;
    font-size: 0.8rem;
    color: var(--mc-text-primary);
    font-family: var(--mc-font-display);
    transition: border-color 0.15s, box-shadow 0.15s;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%234a5e80' stroke-width='2'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='m21 21-4.35-4.35'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: 0.6rem center;
}
.mc-search-input:focus {
    outline: none;
    border-color: var(--mc-accent-dim);
    box-shadow: 0 0 0 1px rgba(0, 255, 208, 0.15), 0 0 12px rgba(0, 255, 208, 0.08);
}
.mc-search-input::placeholder { color: var(--mc-text-muted); }