/* ===========================
   THEME SYSTEM — CSS Variables
   =========================== */

/* Matrix theme (default — the original "hacker" look) */
:root,
:root[data-theme="matrix"] {
    --bg-primary: #000;
    --bg-secondary: #111;
    --bg-gradient: radial-gradient(circle at top, #111 0%, #000 70%);
    --text-primary: #00ff9c;
    --text-secondary: rgba(0,255,156,0.75);
    --accent: #00ff9c;
    --accent-rgb: 0,255,156;
    --nav-bg: rgba(0, 0, 0, 0.9);
    --border-color: #00ff9c;
    --btn-bg: #00ff9c;
    --btn-text: #000;
    --input-bg: #000;
    --input-text: #00ff9c;
    --font-family: "Courier New", monospace;
    --card-bg: #000;
    --hover-bg: rgba(0,255,156,0.05);
    --table-header-bg: rgba(0,255,156,0.1);
    --modal-bg: rgba(0,0,0,0.85);
    --shadow-glow: rgba(0,255,156,0.3);
    --delete-btn-bg: #ff0040;
    --delete-btn-hover: #cc0030;
}

/* Dark theme */
:root[data-theme="dark"] {
    --bg-primary: #1a1a2e;
    --bg-secondary: #16213e;
    --bg-gradient: radial-gradient(circle at top, #16213e 0%, #1a1a2e 70%);
    --text-primary: #e0e0e0;
    --text-secondary: rgba(224,224,224,0.75);
    --accent: #0ea5e9;
    --accent-rgb: 14,165,233;
    --nav-bg: rgba(26, 26, 46, 0.95);
    --border-color: #0ea5e9;
    --btn-bg: #0ea5e9;
    --btn-text: #fff;
    --input-bg: #16213e;
    --input-text: #e0e0e0;
    --font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    --card-bg: #16213e;
    --hover-bg: rgba(14,165,233,0.08);
    --table-header-bg: rgba(14,165,233,0.12);
    --modal-bg: rgba(26,26,46,0.9);
    --shadow-glow: rgba(14,165,233,0.3);
    --delete-btn-bg: #ef4444;
    --delete-btn-hover: #dc2626;
}

/* Light theme */
:root[data-theme="light"] {
    --bg-primary: #ffffff;
    --bg-secondary: #f3f4f6;
    --bg-gradient: linear-gradient(to bottom, #f3f4f6 0%, #ffffff 70%);
    --text-primary: #1f2937;
    --text-secondary: rgba(31,41,55,0.7);
    --accent: #2563eb;
    --accent-rgb: 37,99,235;
    --nav-bg: rgba(255, 255, 255, 0.95);
    --border-color: #2563eb;
    --btn-bg: #2563eb;
    --btn-text: #fff;
    --input-bg: #ffffff;
    --input-text: #1f2937;
    --font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    --card-bg: #ffffff;
    --hover-bg: rgba(37,99,235,0.06);
    --table-header-bg: rgba(37,99,235,0.08);
    --modal-bg: rgba(255,255,255,0.9);
    --shadow-glow: rgba(37,99,235,0.2);
    --delete-btn-bg: #dc2626;
    --delete-btn-hover: #b91c1c;
}

/* ===========================
   THEME SWITCHER DROPDOWN
   =========================== */
.theme-switcher {
    position: fixed;
    top: 14px;
    right: 18px;
    z-index: 1001;
}

.theme-switcher select {
    background: var(--input-bg);
    color: var(--input-text);
    border: 1px solid var(--border-color);
    padding: 4px 8px;
    font-family: var(--font-family);
    font-size: 0.8rem;
    border-radius: 4px;
    cursor: pointer;
    outline: none;
}

.theme-switcher select:hover {
    box-shadow: 0 0 6px rgba(var(--accent-rgb), 0.4);
}

/* On mobile, move the theme switcher below the nav so it doesn't overlap links */
@media (max-width: 768px) {
    .theme-switcher {
        position: fixed;
        top: auto;
        bottom: 12px;
        right: 12px;
        top: unset;
    }
}