/* ================================================================
   dark-mode.css — Virtual Lab Dark Theme
   Applied when <body> has the class "dark"
   Stored in localStorage as "vlab-theme" = "dark" | "light"
   ================================================================ */

/* ── CSS token overrides ─────────────────────────────────────────── */
body.dark {
    --bs-body-bg:           #0f172a;
    --bs-body-color:        #e2e8f0;
    --bs-card-bg:           #1e293b;
    --bs-card-border-color: rgba(255,255,255,0.07);
    --bs-border-color:      rgba(255,255,255,0.1);
    --bs-secondary-color:   #94a3b8;

    background-color: #0f172a !important;
    color: #e2e8f0;
}

/* ── Body & page background ─────────────────────────────────────── */
body.dark.tech-background {
    background-color: #0f172a !important;
    /* Darken the circuit-board pattern */
    background-image: url("data:image/svg+xml,%3Csvg width='100' height='100' viewBox='0 0 100 100' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M11 18c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm48 25c3.866 0 7-3.134 7-7s-3.134-7-7-7-7 3.134-7 7 3.134 7 7 7zm-43-7c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm63 31c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zM34 90c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zm56-76c1.657 0 3-1.343 3-3s-1.343-3-3-3-3 1.343-3 3 1.343 3 3 3zM12 86c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm28-65c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm23-11c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm-6 60c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm29 22c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zM32 63c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm57-13c2.76 0 5-2.24 5-5s-2.24-5-5-5-5 2.24-5 5 2.24 5 5 5zm-9-21c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM60 91c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM35 41c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM12 55c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM56 5c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zm-3 73c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zm-15-7c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zm-18-7c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zM3 11c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zm17 30c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zm39-11c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2zm17 17c1.105 0 2-.895 2-2s-.895-2-2-2-2 .895-2 2 .895 2 2 2z' fill='%236366f1' fill-opacity='0.06' fill-rule='evenodd'/%3E%3C/svg%3E");
}

/* ── Cards ───────────────────────────────────────────────────────── */
body.dark .card {
    background-color: #1e293b !important;
    color: #e2e8f0;
    border: 1px solid rgba(255,255,255,0.07) !important;
    box-shadow: 0 4px 16px rgba(0,0,0,0.4) !important;
}
body.dark .card-header {
    background-color: #1e293b !important;
    border-bottom-color: rgba(255,255,255,0.09) !important;
    color: #e2e8f0;
}
body.dark .card-footer {
    background-color: #1e293b !important;
    border-top-color: rgba(255,255,255,0.09) !important;
}

/* ── Typography helpers ──────────────────────────────────────────── */
body.dark .text-muted   { color: #94a3b8 !important; }
body.dark .text-dark    { color: #e2e8f0 !important; }
body.dark h1, body.dark h2, body.dark h3,
body.dark h4, body.dark h5, body.dark h6 { color: #f1f5f9; }

/* ── Navbar dropdown ─────────────────────────────────────────────── */
body.dark .dropdown-menu {
    background-color: #1e293b;
    border-color: rgba(255,255,255,0.1);
    color: #e2e8f0;
}
body.dark .dropdown-item {
    color: #e2e8f0;
}
body.dark .dropdown-item:hover,
body.dark .dropdown-item:focus {
    background-color: rgba(99,102,241,0.15);
    color: #c7d2fe;
}
body.dark .dropdown-item.bg-light {
    background-color: rgba(255,255,255,0.07) !important;
}
body.dark .dropdown-divider { border-color: rgba(255,255,255,0.1); }

/* ── Forms ───────────────────────────────────────────────────────── */
body.dark .form-control,
body.dark .form-select {
    background-color: #0f172a;
    border-color: rgba(255,255,255,0.15);
    color: #e2e8f0;
}
body.dark .form-control:focus,
body.dark .form-select:focus {
    background-color: #0f172a;
    border-color: #6366f1;
    color: #e2e8f0;
    box-shadow: 0 0 0 0.25rem rgba(99,102,241,0.25);
}
body.dark .form-control::placeholder { color: #64748b; }
body.dark .input-group-text {
    background-color: #1e293b;
    border-color: rgba(255,255,255,0.15);
    color: #94a3b8;
}
body.dark .form-check-input {
    background-color: #0f172a;
    border-color: rgba(255,255,255,0.3);
}
body.dark .form-text { color: #64748b; }

/* ── Tables ──────────────────────────────────────────────────────── */
body.dark .table {
    color: #e2e8f0;
    --bs-table-bg: transparent;
    --bs-table-striped-bg: rgba(255,255,255,0.04);
    --bs-table-hover-bg: rgba(99,102,241,0.1);
    --bs-table-border-color: rgba(255,255,255,0.08);
}
body.dark .table-light { --bs-table-bg: rgba(255,255,255,0.04); }
body.dark thead th { border-bottom-color: rgba(255,255,255,0.12) !important; }

/* ── Alerts ──────────────────────────────────────────────────────── */
body.dark .alert-info    { background-color: rgba(6,182,212,0.12);  border-color: rgba(6,182,212,0.25);  color: #67e8f9; }
body.dark .alert-success { background-color: rgba(16,185,129,0.12); border-color: rgba(16,185,129,0.25); color: #6ee7b7; }
body.dark .alert-warning { background-color: rgba(245,158,11,0.12); border-color: rgba(245,158,11,0.25); color: #fcd34d; }
body.dark .alert-danger  { background-color: rgba(239,68,68,0.12);  border-color: rgba(239,68,68,0.25);  color: #fca5a5; }
body.dark .alert-primary { background-color: rgba(79,70,229,0.12);  border-color: rgba(79,70,229,0.25);  color: #a5b4fc; }

/* ── Badges ──────────────────────────────────────────────────────── */
body.dark .badge.bg-light  { background-color: #334155 !important; color: #cbd5e1 !important; }
body.dark .badge.bg-white  { background-color: #1e293b !important; color: #e2e8f0 !important; }

/* ── List groups ─────────────────────────────────────────────────── */
body.dark .list-group-item {
    background-color: #1e293b;
    border-color: rgba(255,255,255,0.08);
    color: #e2e8f0;
}
body.dark .list-group-item:hover { background-color: rgba(99,102,241,0.1); }

/* ── Modals ──────────────────────────────────────────────────────── */
body.dark .modal-content {
    background-color: #1e293b;
    border-color: rgba(255,255,255,0.1);
    color: #e2e8f0;
}
body.dark .modal-header {
    border-bottom-color: rgba(255,255,255,0.1);
}
body.dark .modal-footer {
    border-top-color: rgba(255,255,255,0.1);
}

/* ── Borders & dividers ──────────────────────────────────────────── */
body.dark .border,
body.dark .border-bottom,
body.dark .border-top { border-color: rgba(255,255,255,0.1) !important; }

/* ── Progress bars ───────────────────────────────────────────────── */
body.dark .progress {
    background-color: #334155;
}

/* ── Notification dropdown ───────────────────────────────────────── */
body.dark .notification-dropdown { background-color: #1e293b !important; }

/* ── Backgrounds ─────────────────────────────────────────────────── */
body.dark .bg-white  { background-color: #1e293b !important; }
body.dark .bg-light  { background-color: #1a2540 !important; }
body.dark .bg-warning.text-dark { background-color: #78350f !important; color: #fde68a !important; }

/* ── Footer ──────────────────────────────────────────────────────── */
body.dark .footer { background-color: #020617; }

/* ── Scrollbars (Webkit) ─────────────────────────────────────────── */
body.dark ::-webkit-scrollbar { width: 6px; height: 6px; }
body.dark ::-webkit-scrollbar-track { background: #0f172a; }
body.dark ::-webkit-scrollbar-thumb { background: #334155; border-radius: 3px; }
body.dark ::-webkit-scrollbar-thumb:hover { background: #4f46e5; }

/* ── Dark mode toggle button ─────────────────────────────────────── */
#dark-mode-toggle {
    background: rgba(255,255,255,0.15);
    border: 1.5px solid rgba(255,255,255,0.3);
    border-radius: 20px;
    padding: 4px 12px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.82rem;
    font-weight: 600;
    color: white;
    transition: background 0.2s, transform 0.15s;
    white-space: nowrap;
}
#dark-mode-toggle:hover {
    background: rgba(255,255,255,0.28);
    transform: translateY(-1px);
}
#dark-mode-toggle .toggle-icon { font-size: 1rem; transition: transform 0.4s; }
body.dark #dark-mode-toggle .toggle-icon { transform: rotate(180deg); }

/* ── Smooth theme transition ─────────────────────────────────────── */
body, body * {
    transition: background-color 0.25s ease, border-color 0.25s ease, color 0.2s ease;
}
/* But don't animate things that shouldn't flicker */
body *, body *::before, body *::after {
    transition-property: background-color, border-color, color, box-shadow;
    transition-duration: 0.22s;
    transition-timing-function: ease;
}