webapp/static/css/dark-theme.css

/* NETRA Dark Cyber Theme Override — matches home.html aesthetic */
@import url('https://fonts.googleapis.com/css2?family=Rajdhani:wght@400;500;600;700&family=Inter:wght@300;400;500;600&display=swap');

:root {
    --bg: #050d1a;
    --bg2: #091526;
    --card: rgba(10,25,50,0.7);
    --cyan: #00d4ff;
    --cyan2: #0ea5e9;
    --purple: #7c3aed;
    --ok: #22c55e;
    --warn: #f59e0b;
    --danger: #ef4444;
    --info: #00d4ff;
    --text: #e2e8f0;
    --muted: #94a3b8;
    --line: rgba(0,212,255,0.15);
    --glow: rgba(0,212,255,0.25);
    --radius: 14px;
    --white: #e2e8f0;
    --blue-900: #e2e8f0;
    --blue-800: #00d4ff;
    --blue-700: #00d4ff;
    --blue-600: #0ea5e9;
    --blue-200: rgba(0,212,255,0.2);
    --blue-100: rgba(0,212,255,0.08);
    --blue-50: rgba(0,212,255,0.05);
    --orange-600: #f59e0b;
    --orange-500: #fbbf24;
    --orange-100: rgba(245,158,11,0.1);
    --slate-900: #e2e8f0;
    --slate-800: #cbd5e1;
    --slate-700: #94a3b8;
    --slate-600: #94a3b8;
    --slate-500: #64748b;
    --slate-400: #475569;
    --slate-300: #334155;
    --slate-200: #1e293b;
    --slate-100: rgba(10,25,50,0.5);
    --glass: rgba(10,25,50,0.7);
    --shadow-sm: 0 8px 20px rgba(0,0,0,0.3);
    --shadow-md: 0 16px 35px rgba(0,0,0,0.4);
    --shadow-lg: 0 24px 60px rgba(0,0,0,0.5);
    --radius-md: 14px;
    --radius-lg: 22px;
    --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Base */
body {
    font-family: 'Inter', system-ui, sans-serif;
    color: var(--text);
    background: var(--bg);
    min-height: 100vh;
    overflow-x: hidden;
}

body::before {
    background-image: linear-gradient(rgba(0,212,255,0.03) 1px, transparent 1px),
                      linear-gradient(90deg, rgba(0,212,255,0.03) 1px, transparent 1px);
}

h1, h2, h3, h4, .nav-brand, .app-title, .hero-title, .section-title {
    font-family: 'Rajdhani', sans-serif;
    letter-spacing: 0.02em;
    color: var(--text);
}

/* Navbar */
.navbar {
    background: rgba(5,13,26,0.85);
    backdrop-filter: blur(16px);
    border-bottom: 1px solid var(--line);
    box-shadow: 0 0 30px rgba(0,0,0,0.3);
}

.nav-brand { color: var(--text); }

.nav-link {
    color: var(--muted);
    border-color: transparent;
}

.nav-link:hover, .dropdown-btn:hover {
    color: var(--text);
    border-color: var(--line);
    background: rgba(0,212,255,0.08);
}

.user-greeting { color: var(--muted); }

.dropdown-content {
    background: rgba(9,21,38,0.98);
    border: 1px solid var(--line);
    backdrop-filter: blur(16px);
}

.dropdown-content a { color: var(--text); }
.dropdown-content a:hover { background: rgba(0,212,255,0.1); }

.dropdown-btn {
    color: var(--muted);
}

/* Buttons */
.btn-primary {
    background: linear-gradient(135deg, var(--cyan2), var(--cyan));
    color: #050d1a;
    box-shadow: 0 0 30px rgba(0,212,255,0.3);
}

.btn-primary:hover {
    box-shadow: 0 0 50px rgba(0,212,255,0.5);
}

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

.btn-outline:hover {
    background: rgba(0,212,255,0.1);
    border-color: var(--cyan);
}

.btn-secondary {
    background: linear-gradient(135deg, rgba(0,212,255,0.15), rgba(14,165,233,0.2));
    color: var(--cyan);
    border: 1px solid var(--line);
    box-shadow: none;
}

.btn-secondary:hover {
    background: rgba(0,212,255,0.2);
    box-shadow: 0 0 20px var(--glow);
}

.btn-danger {
    background: linear-gradient(135deg, #dc2626, #ef4444);
    box-shadow: 0 0 20px rgba(239,68,68,0.3);
}

.btn-success {
    background: linear-gradient(135deg, #16a34a, #22c55e);
    box-shadow: 0 0 20px rgba(34,197,94,0.3);
}

.btn-success:hover { box-shadow: 0 0 30px rgba(34,197,94,0.4); }
.btn-danger:hover { box-shadow: 0 0 30px rgba(239,68,68,0.4); }

/* Cards */
.stat-card, .feature-card, .tech-card, .info-card,
.workflow-step, .model-info, .upload-section,
.results-section, .dashboard-card, .models-section,
.info-box, .video-section, .alerts-panel {
    background: var(--card);
    border: 1px solid var(--line);
    backdrop-filter: blur(12px);
    box-shadow: 0 0 20px rgba(0,0,0,0.2);
}

.stat-card:hover, .feature-card:hover, .tech-card:hover,
.workflow-step:hover, .info-card:hover, .dashboard-card:hover {
    border-color: var(--cyan);
    box-shadow: 0 0 30px var(--glow), 0 8px 32px rgba(0,0,0,0.3);
}

.feature-card h3, .tech-card h3, .workflow-step h3,
.info-card h3, .dashboard-card h2 { color: var(--text); }

.feature-card p, .tech-card p, .workflow-step p,
.info-card p, .dashboard-card p, .model-list li,
.feature-list li, .info-box li { color: var(--muted); }

/* Auth */
.auth-box {
    background: var(--card);
    border: 1px solid var(--line);
    backdrop-filter: blur(16px);
    box-shadow: 0 0 60px rgba(0,212,255,0.1);
}

.app-title { color: var(--cyan); }
.app-subtitle { color: var(--muted); }

.tab-buttons {
    background: rgba(0,212,255,0.06);
    border: 1px solid var(--line);
}

.tab-btn {
    color: var(--muted);
    background: transparent;
}

.tab-btn.active {
    background: rgba(0,212,255,0.12);
    color: var(--cyan);
    box-shadow: 0 0 20px var(--glow);
}

.form-group label { color: var(--text); }

.form-group input {
    background: rgba(5,13,26,0.6);
    border: 1px solid var(--line);
    color: var(--text);
}

.form-group input:focus {
    border-color: var(--cyan);
    box-shadow: 0 0 0 4px rgba(0,212,255,0.15);
}

.form-group input::placeholder { color: var(--muted); }

.message.success {
    color: var(--ok);
    background: rgba(34,197,94,0.1);
    border: 1px solid rgba(34,197,94,0.3);
}

.message.error {
    color: var(--danger);
    background: rgba(239,68,68,0.1);
    border: 1px solid rgba(239,68,68,0.3);
}

.back-link a { color: var(--cyan); }
.back-link a:hover { color: var(--text); }

/* Dashboard */
.dashboard-header h1 { color: var(--text); }
.dashboard-header p { color: var(--muted); }
.card-icon { color: var(--cyan); }

.stat-number {
    background: linear-gradient(135deg, var(--text), var(--cyan));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.model-badge {
    background: rgba(0,212,255,0.12);
    border: 1px solid var(--line);
    color: var(--cyan);
}

/* Page header */
.page-header h1 { color: var(--text); }
.page-header p { color: var(--muted); }

.alerts-panel h2, .stats-container h3, .info-box h3 { color: var(--text); }

/* Status chips */
.status-chip.ok {
    background: rgba(34,197,94,0.1);
    color: var(--ok);
    border: 1px solid rgba(34,197,94,0.3);
}

.status-chip.warn {
    background: rgba(245,158,11,0.1);
    color: var(--warn);
    border: 1px solid rgba(245,158,11,0.3);
}

.status-chip.danger {
    background: rgba(239,68,68,0.1);
    color: var(--danger);
    border: 1px solid rgba(239,68,68,0.3);
}

.status-chip.info {
    background: rgba(0,212,255,0.1);
    color: var(--cyan);
    border: 1px solid rgba(0,212,255,0.3);
}

/* Video section */
.video-container {
    border-color: var(--line);
    background: #030a14;
}

.alert-item {
    background: rgba(245,158,11,0.08);
    border: 1px solid rgba(245,158,11,0.2);
    color: var(--text);
}

.alert-item.high {
    background: rgba(239,68,68,0.08);
    border-color: rgba(239,68,68,0.3);
}

.alert-placeholder { color: var(--muted); }

/* Upload */
.upload-box {
    border: 2px dashed var(--line);
    background: rgba(5,13,26,0.4);
    color: var(--muted);
}

.upload-box:hover {
    border-color: var(--cyan);
    background: rgba(0,212,255,0.04);
}

.file-info {
    border: 1px solid var(--line);
    background: rgba(10,25,50,0.5);
    color: var(--text);
}

.progress-bar { background: rgba(0,212,255,0.1); }
.progress-fill { background: linear-gradient(90deg, var(--cyan2), var(--cyan)); }
#progress-text { color: var(--muted); }

.summary-card {
    border: 1px solid var(--line);
    background: var(--card);
    color: var(--text);
}

.summary-card.alert {
    background: rgba(245,158,11,0.08);
}

.summary-value {
    color: var(--cyan);
}

/* Detection items */
.detection-item {
    border: 1px solid var(--line);
    background: var(--card);
    color: var(--text);
}

/* Toast */
.toast {
    background: rgba(10,25,50,0.95);
    border: 1px solid var(--line);
    color: var(--text);
    backdrop-filter: blur(8px);
}

.toast.success { border-left: 4px solid var(--ok); }
.toast.success::before { color: var(--ok); }
.toast.error { border-left: 4px solid var(--danger); }
.toast.error::before { color: var(--danger); }
.toast.warning { border-left: 4px solid var(--warn); }
.toast.warning::before { color: var(--warn); }
.toast.info { border-left: 4px solid var(--cyan); }
.toast.info::before { color: var(--cyan); }

/* Modal */
.modal-overlay { background: rgba(5,13,26,0.7); }
.modal, .modal-content {
    background: var(--bg2);
    border: 1px solid var(--line);
    color: var(--text);
}
.modal-header { border-bottom-color: var(--line); }
.modal-title { color: var(--text); }
.modal-close { color: var(--muted); }
.modal-close:hover { color: var(--cyan); background: rgba(0,212,255,0.1); }
.modal-footer { border-top-color: var(--line); }

/* Spinner */
.spinner {
    border-color: rgba(0,212,255,0.2);
    border-top-color: var(--cyan);
}

/* Framewise cards */
.framewise-card {
    border-color: var(--line);
    background: var(--card);
    color: var(--text);
}
.framewise-card.critical { background: rgba(239,68,68,0.08); }

/* Badge */
.badge { background: rgba(0,212,255,0.1); color: var(--cyan); }
.badge.safe, .badge.low { background: rgba(34,197,94,0.1); color: var(--ok); }
.badge.medium, .badge.high { background: rgba(245,158,11,0.1); color: var(--warn); }
.badge.critical { background: rgba(239,68,68,0.15); color: var(--danger); }

/* Model selection panel */
.model-selection-panel {
    background: var(--card);
    border: 1px solid var(--line);
}

.panel-header {
    background: rgba(0,212,255,0.05);
    border-bottom-color: var(--line);
}

.panel-header:hover { background: rgba(0,212,255,0.1); }
.panel-title { color: var(--cyan); }
.toggle-icon { color: var(--muted); }
.panel-content.open { border-top-color: var(--line); }

.model-card {
    border-color: var(--line);
    background: var(--card);
}

.model-card:hover {
    border-color: var(--cyan);
    box-shadow: 0 0 20px var(--glow);
}

.model-checkbox { accent-color: var(--cyan); }
.checkbox-content strong { color: var(--text); }
.checkbox-content p { color: var(--muted); }

/* CTA Section */
.cta-section {
    background: linear-gradient(135deg, rgba(0,212,255,0.06), rgba(124,58,237,0.06));
    border-top: 1px solid var(--line);
}

.cta-section h2 { color: var(--text); }
.cta-section p { color: var(--muted); }
.cta-section .btn-primary {
    background: linear-gradient(135deg, var(--cyan2), var(--cyan));
    color: #050d1a;
}

/* Footer */
.footer {
    background: #030a14;
    border-top: 1px solid var(--line);
}

/* Section alt */
.section-alt { background: var(--bg2); }

/* Scrollbar */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: rgba(0,212,255,0.2); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: rgba(0,212,255,0.4); }

/* Selection */
::selection { background: rgba(0,212,255,0.3); color: var(--text); }

/* Live camera inline styles override */
.model-checkbox-label {
    background: var(--card);
    border-color: var(--line);
    color: var(--text);
}
.model-checkbox-label:hover {
    background: rgba(0,212,255,0.08);
    border-color: var(--cyan);
}

/* Storage drawer dark */
.storage-drawer, .sd-session-card {
    background: var(--bg2) !important;
    color: var(--text);
}
.sd-header { border-bottom-color: var(--line); }
.sd-title { color: var(--text) !important; }
.sd-close { background: rgba(0,212,255,0.1); color: var(--muted); }
.sd-close:hover { background: rgba(0,212,255,0.2); color: var(--text); }
.sd-stat { background: rgba(0,212,255,0.06); color: var(--muted); }
.sd-stat strong { color: var(--text); }
.sd-tab { color: var(--muted); }
.sd-tab.active { color: var(--cyan); border-color: var(--cyan); }
.sd-tab:hover { color: var(--text); }
.sd-session-card { border-color: var(--line); }
.sd-session-name { color: var(--text) !important; }
.sd-session-meta { color: var(--muted) !important; }
.sd-btn { background: var(--card); border-color: var(--line); color: var(--muted); }
.sd-btn:hover { background: rgba(0,212,255,0.1); }
.sd-btn.primary { background: var(--cyan); color: #050d1a; border-color: var(--cyan); }
.sd-recording-item { border-bottom-color: var(--line); }
.sd-rec-icon { background: rgba(0,212,255,0.1); }
.sd-rec-name { color: var(--text); }
.sd-rec-meta { color: var(--muted); }
.sd-icon-btn { background: var(--card); border-color: var(--line); color: var(--muted); }
.sd-icon-btn:hover { background: rgba(0,212,255,0.1); }
.sd-empty { color: var(--muted); }
#sd-inline-player { background: #030a14; }

/* Camera select */
#camera-select {
    background: var(--card) !important;
    color: var(--text) !important;
    border-color: var(--line) !important;
}

/* Stats inline overrides for dashboard */
.stats-container {
    background: rgba(0,212,255,0.05);
    border: 1px solid var(--line);
}

/* Video analysis dark overrides */
#realtime-panel {
    background: var(--card) !important;
    border-color: var(--line) !important;
}
.rt-spinner {
    border-color: rgba(0,212,255,0.2) !important;
    border-top-color: var(--cyan) !important;
}
.rt-progress-wrap { background: rgba(0,212,255,0.08) !important; }
.rt-progress-fill { background: linear-gradient(90deg, var(--cyan2), var(--cyan)) !important; }
.rt-stat {
    background: rgba(0,212,255,0.05) !important;
    border-color: var(--line) !important;
}
.rt-stat-val { color: var(--cyan) !important; }
.rt-stat-lbl { color: var(--muted) !important; }
#live-alerts-feed {
    background: rgba(5,13,26,0.5) !important;
    border-color: var(--line) !important;
}
.feed-item.critical { background: rgba(239,68,68,0.08) !important; border-left-color: var(--danger) !important; }
.feed-item.high { background: rgba(245,158,11,0.08) !important; border-left-color: var(--warn) !important; }
.feed-item.medium { background: rgba(0,212,255,0.05) !important; border-left-color: var(--cyan) !important; }
.feed-item.low { background: rgba(34,197,94,0.05) !important; border-left-color: var(--ok) !important; }

.processing-video-panel {
    background: var(--card) !important;
    border-color: var(--line) !important;
}
.processing-video-info {
    background: rgba(0,212,255,0.05) !important;
    border-top-color: var(--line) !important;
    color: var(--muted) !important;
}
.processing-spinner {
    border-color: rgba(0,212,255,0.2) !important;
    border-top-color: var(--cyan) !important;
}
.processing-bar { background: linear-gradient(90deg, var(--cyan2), var(--cyan)) !important; }

.res-card {
    background: var(--card) !important;
    border-color: var(--line) !important;
    color: var(--text) !important;
}
.res-card.danger { background: rgba(239,68,68,0.06) !important; border-color: rgba(239,68,68,0.25) !important; }
.res-card.warn { background: rgba(245,158,11,0.06) !important; border-color: rgba(245,158,11,0.25) !important; }
.res-val { color: var(--cyan) !important; }
.res-card.danger .res-val { color: var(--danger) !important; }
.res-card.warn .res-val { color: var(--warn) !important; }
.res-lbl { color: var(--muted) !important; }

.history-item {
    background: var(--card) !important;
    border-color: var(--line) !important;
}
.history-item:hover { border-color: var(--cyan) !important; }
.det-record {
    background: var(--card) !important;
    border-color: var(--line) !important;
}
.hbadge { background: rgba(0,212,255,0.1) !important; color: var(--cyan) !important; }
.hbadge.red { background: rgba(239,68,68,0.1) !important; color: var(--danger) !important; }

.insight-card {
    background: rgba(0,212,255,0.04) !important;
    border-color: var(--line) !important;
}
.insight-card:hover {
    border-color: var(--cyan) !important;
    box-shadow: 0 0 30px var(--glow) !important;
}
.insight-card::before { background: linear-gradient(135deg, rgba(0,212,255,0.05), transparent) !important; }
.insight-card.alert {
    background: rgba(239,68,68,0.06) !important;
    border-color: rgba(239,68,68,0.25) !important;
}
.insight-card.alert:hover { border-color: var(--danger) !important; box-shadow: 0 0 20px rgba(239,68,68,0.2) !important; }
.insight-card.warning {
    background: rgba(245,158,11,0.06) !important;
    border-color: rgba(245,158,11,0.25) !important;
}
.insight-card.warning:hover { border-color: var(--warn) !important; box-shadow: 0 0 20px rgba(245,158,11,0.2) !important; }
.insight-label { color: var(--muted) !important; }
.insight-value { color: var(--cyan) !important; }
.insight-card.alert .insight-value { color: var(--danger) !important; }
.insight-card.warning .insight-value { color: var(--warn) !important; }
.insight-desc { color: var(--muted) !important; }

/* Detections table headings */
.detections-table h3 { color: var(--text); }

/* Select dropdown */
select {
    background: var(--card) !important;
    color: var(--text) !important;
    border-color: var(--line) !important;
}
select option {
    background: var(--bg2);
    color: var(--text);
}