/* PQC Scanner — Shared Theme System */

/* ─── Dark Theme (default) ──────────────────────────────────────── */
.dark {
    --bg-primary: #020617;
    --bg-surface: #0F172A;
    --bg-card: #1E293B;
    --bg-card-hover: rgba(15,23,42,0.8);
    --border-color: #334155;
    --border-hover: rgba(34,197,94,0.3);
    --text-primary: #F8FAFC;
    --text-secondary: #94A3B8;
    --text-muted: #64748B;
    --accent: #22C55E;
    --accent-dim: #166534;
    --danger: #EF4444;
    --warning: #F59E0B;
    --info: #3B82F6;
    --scanline-color: rgba(34,197,94,0.3);
    --card-shadow: 0 0 15px rgba(34,197,94,0.1);
}

/* ─── Light Theme ───────────────────────────────────────────────── */
.light {
    --bg-primary: #F8FAFC;
    --bg-surface: #FFFFFF;
    --bg-card: #FFFFFF;
    --bg-card-hover: rgba(255,255,255,0.95);
    --border-color: #E2E8F0;
    --border-hover: rgba(59,130,246,0.4);
    --text-primary: #0F172A;
    --text-secondary: #475569;
    --text-muted: #94A3B8;
    --accent: #16A34A;
    --accent-dim: #DCFCE7;
    --danger: #DC2626;
    --warning: #D97706;
    --info: #2563EB;
    --scanline-color: rgba(59,130,246,0.15);
    --card-shadow: 0 1px 3px rgba(0,0,0,0.08);
}

body {
    background-color: var(--bg-primary);
    color: var(--text-primary);
    transition: background-color 0.3s, color 0.3s;
}

/* ─── Theme-aware card ──────────────────────────────────────────── */
.card-theme {
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    backdrop-filter: blur(10px);
    box-shadow: var(--card-shadow);
    transition: all 0.2s;
}
.card-theme:hover {
    border-color: var(--border-hover);
}

/* ─── Theme-aware text ──────────────────────────────────────────── */
.text-theme-primary { color: var(--text-primary); }
.text-theme-secondary { color: var(--text-secondary); }
.text-theme-muted { color: var(--text-muted); }
.text-theme-accent { color: var(--accent); }
.text-theme-danger { color: var(--danger); }
.text-theme-warning { color: var(--warning); }
.text-theme-info { color: var(--info); }

/* ─── Theme-aware backgrounds ───────────────────────────────────── */
.bg-theme-primary { background-color: var(--bg-primary); }
.bg-theme-surface { background-color: var(--bg-surface); }
.bg-theme-card { background-color: var(--bg-card); }

/* ─── Theme switcher button ─────────────────────────────────────── */
.theme-switcher {
    position: relative;
    width: 48px;
    height: 26px;
    border-radius: 13px;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    cursor: pointer;
    transition: all 0.3s;
}
.theme-switcher:hover {
    border-color: var(--accent);
}
.theme-switcher .toggle-knob {
    position: absolute;
    top: 2px;
    left: 2px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--accent);
    transition: transform 0.3s;
    display: flex;
    align-items: center;
    justify-content: center;
}
.light .theme-switcher .toggle-knob {
    transform: translateX(22px);
}

/* ─── Chart.js theme overrides ──────────────────────────────────── */
.light .chartjs-render-monitor text {
    color: #475569 !important;
}

/* ─── Table theme ───────────────────────────────────────────────── */
.table-theme th {
    color: var(--text-muted);
    border-bottom-color: var(--border-color);
}
.table-theme td {
    border-bottom-color: var(--border-color);
}
.table-theme tr:hover td {
    background: var(--bg-card-hover);
}

/* ─── Input theme ───────────────────────────────────────────────── */
.input-theme {
    background: var(--bg-primary);
    border-color: var(--border-color);
    color: var(--text-primary);
}
.input-theme:focus {
    border-color: var(--accent);
    outline: none;
}
.input-theme::placeholder {
    color: var(--text-muted);
}

/* ─── Scrollbar theme ───────────────────────────────────────────── */
.scrollbar-theme::-webkit-scrollbar { width: 6px; }
.scrollbar-theme::-webkit-scrollbar-track { background: var(--bg-surface); }
.scrollbar-theme::-webkit-scrollbar-thumb { background: var(--border-color); border-radius: 3px; }

/* ─── Scanline (lighter in light mode) ──────────────────────────── */
.scanline-theme::before {
    content: '';
    position: fixed;
    top: 0; left: 0; right: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--scanline-color), transparent);
    animation: scanline 8s linear infinite;
    pointer-events: none;
    z-index: 100;
}