ui/styles.css

/* Disaster Triage Command — dark command-center theme */

:root {
    --dtc-bg: #0b0f14;
    --dtc-panel: #11161d;
    --dtc-panel-alt: #161d26;
    --dtc-border: #232b36;
    --dtc-text: #e6edf3;
    --dtc-muted: #8b98a5;
    --dtc-accent: #3fb6ff;
    --dtc-critical: #ff4d4f;
    --dtc-high: #ff9f43;
    --dtc-medium: #ffd166;
    --dtc-low: #3ddc97;
}

/* Fix: without these, some Gradio 6.x layouts constrain the outer container
   to the viewport height and clip everything below the fold instead of
   letting the page scroll. */
html, body {
    height: auto !important;
    min-height: 100% !important;
    overflow-y: auto !important;
}

.gradio-container {
    height: auto !important;
    min-height: 100vh !important;
    max-height: none !important;
    overflow-y: visible !important;
    overflow-x: hidden !important;
    background: var(--dtc-bg) !important;
    color: var(--dtc-text) !important;
    font-family: "Inter", "Segoe UI", system-ui, sans-serif !important;
}

gradio-app {
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
}

#dtc-topbar {
    background: linear-gradient(90deg, #0f1720 0%, #131c26 100%);
    border: 1px solid var(--dtc-border);
    border-radius: 10px;
    padding: 14px 18px;
    margin-bottom: 10px;
}

#dtc-topbar h1 {
    font-size: 1.4rem;
    letter-spacing: 0.03em;
    margin: 0;
    color: var(--dtc-text);
}

.dtc-status-active {
    color: var(--dtc-critical);
    font-weight: 700;
    letter-spacing: 0.05em;
}

.dtc-panel, .gr-box, .gr-panel {
    background: var(--dtc-panel) !important;
    border: 1px solid var(--dtc-border) !important;
    border-radius: 10px !important;
}

#dtc-run-demo-btn {
    background: linear-gradient(90deg, #ff4d4f, #ff9f43) !important;
    color: #0b0f14 !important;
    font-weight: 800 !important;
    font-size: 1.05rem !important;
    letter-spacing: 0.04em;
    border: none !important;
    border-radius: 10px !important;
    padding: 14px !important;
}

#dtc-run-demo-btn:hover {
    filter: brightness(1.08);
}

.dtc-agent-log {
    font-family: "JetBrains Mono", "Courier New", monospace !important;
    font-size: 0.85rem;
    line-height: 1.5;
    background: #0a0d12 !important;
    border: 1px solid var(--dtc-border) !important;
    border-radius: 8px;
    padding: 10px 14px;
    white-space: pre-wrap;
}

.dtc-badge {
    display: inline-block;
    padding: 2px 10px;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    margin-left: 6px;
}

.dtc-badge-deterministic {
    background: rgba(63, 182, 255, 0.15);
    color: var(--dtc-accent);
    border: 1px solid rgba(63, 182, 255, 0.4);
}

.dtc-badge-ai {
    background: rgba(255, 209, 102, 0.15);
    color: var(--dtc-medium);
    border: 1px solid rgba(255, 209, 102, 0.4);
}

.dtc-location-card {
    border-left: 4px solid var(--dtc-muted);
    background: var(--dtc-panel-alt);
    border-radius: 6px;
    padding: 10px 12px;
    margin-bottom: 8px;
}

.dtc-location-card.critical { border-left-color: var(--dtc-critical); }
.dtc-location-card.high { border-left-color: var(--dtc-high); }
.dtc-location-card.medium { border-left-color: var(--dtc-medium); }
.dtc-location-card.low { border-left-color: var(--dtc-low); }

footer { display: none !important; }