/* ════════════════════════════════════════════════════════
   PWAL AGENT — DARK MODE
   Applied via:  html[data-theme="dark"]
   Persisted in: localStorage('pwal-theme')
   ════════════════════════════════════════════════════════ */

/* ── 1. CSS variable overrides ── */
html[data-theme="dark"] {
    --bg-page:    #0b0d1a;
    --bg-card:    #141728;
    --text-main:  #e2e8f0;
    --text-muted: #64748b;
    --border:     #1e2340;
    --shadow:     0 2px 16px rgba(0, 0, 0, 0.45);
}

/* ── 2. Base ── */
html[data-theme="dark"] body {
    background: var(--bg-page);
    color: var(--text-main);
}

/* ── 3. Navbar ── */
html[data-theme="dark"] .dash-navbar {
    background: #101325;
    border-bottom-color: #1e2340;
    box-shadow: 0 1px 10px rgba(0, 0, 0, 0.4);
}

html[data-theme="dark"] .nav-link-item {
    color: #94a3b8;
}
html[data-theme="dark"] .nav-link-item:hover {
    background: #1e2340;
    color: #e2e8f0;
}

html[data-theme="dark"] .lang-btn {
    background: #1a1e35;
    border-color: #252d50;
    color: #e2e8f0;
}

html[data-theme="dark"] .nav-icon-btn {
    background: #1a1e35;
    border-color: #252d50;
    color: #94a3b8;
}
html[data-theme="dark"] .nav-icon-btn:hover {
    background: #252d50;
    color: #e2e8f0;
}

html[data-theme="dark"] .notif-badge {
    border-color: #101325;
}

html[data-theme="dark"] .nav-credit-chip {
    background: rgba(245,158,11,.14);
    border-color: rgba(245,158,11,.32);
    color: #fbbf24;
}
html[data-theme="dark"] .nav-credit-chip:hover {
    background: rgba(245,158,11,.24);
    color: #fcd34d;
}

html[data-theme="dark"] .mobile-menu {
    background: #101325;
    border-top-color: #1e2340;
}
html[data-theme="dark"] .mobile-nav-item {
    color: #94a3b8;
}
html[data-theme="dark"] .mobile-nav-item:hover {
    background: #1e2340;
    color: #e2e8f0;
}

/* ── 4. Bootstrap dropdowns ── */
html[data-theme="dark"] .dropdown-menu {
    background-color: #141728 !important;
    border-color: #1e2340 !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5) !important;
}
html[data-theme="dark"] .dropdown-item {
    color: #cbd5e1;
}
html[data-theme="dark"] .dropdown-item:hover,
html[data-theme="dark"] .dropdown-item:focus {
    background-color: #1e2340;
    color: #e2e8f0;
}
html[data-theme="dark"] .dropdown-item.active {
    background-color: rgba(244, 63, 142, 0.15);
    color: #f43f8e;
}
html[data-theme="dark"] .dropdown-divider {
    border-color: #1e2340;
}

/* ── 5. Dashboard cards ── */
html[data-theme="dark"] .dash-card,
html[data-theme="dark"] .db-stat-card,
html[data-theme="dark"] .stat-card {
    background: var(--bg-card);
    border-color: var(--border);
}

html[data-theme="dark"] .db-stat-card:hover {
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
}

html[data-theme="dark"] .db-circle-icon {
    background: #1e2340;
}

html[data-theme="dark"] .avatar-bubble {
    border-color: var(--bg-card);
}

html[data-theme="dark"] .db-filter-sel {
    background: #1a1e35;
    border-color: #252d50;
    color: #e2e8f0;
}

html[data-theme="dark"] .chart-legend { color: #94a3b8; }

html[data-theme="dark"] .dash-footer {
    border-top-color: #1e2340;
    color: #64748b;
}

/* ── 6. Create Property ── */
html[data-theme="dark"] .cp-card,
html[data-theme="dark"] .cp-upload-zone {
    background: var(--bg-card);
    border-color: var(--border);
}

html[data-theme="dark"] .cp-label { color: #94a3b8; }

html[data-theme="dark"] .cp-input,
html[data-theme="dark"] .cp-select,
html[data-theme="dark"] .cp-textarea {
    background: #0f1224;
    border-color: #1e2340;
    color: #e2e8f0;
}
html[data-theme="dark"] .cp-input:focus,
html[data-theme="dark"] .cp-select:focus,
html[data-theme="dark"] .cp-textarea:focus {
    background: #141728;
    border-color: var(--pwal-pink);
}
html[data-theme="dark"] .cp-input::placeholder,
html[data-theme="dark"] .cp-textarea::placeholder { color: #3d4b6b; }

html[data-theme="dark"] .cp-upload-zone {
    background: #0f1224;
    border-color: #2d3562;
}
html[data-theme="dark"] .cp-upload-zone:hover { border-color: var(--pwal-pink); background: #111427; }

html[data-theme="dark"] .cp-input-suffix-inner {
    background: #1a1e35;
    border-color: #1e2340;
}
html[data-theme="dark"] .suffix-text { color: #94a3b8; }

/* ── 7. Events ── */
html[data-theme="dark"] .ec-card {
    background: var(--bg-card);
    border-color: var(--border);
}
html[data-theme="dark"] .ec-label { color: #94a3b8; }

html[data-theme="dark"] .ec-textarea,
html[data-theme="dark"] .ec-date-input {
    background: #0f1224;
    border-color: #1e2340;
    color: #e2e8f0;
}
html[data-theme="dark"] .ec-textarea:focus,
html[data-theme="dark"] .ec-date-input:focus {
    background: #141728;
}
html[data-theme="dark"] .ec-textarea::placeholder { color: #3d4b6b; }

html[data-theme="dark"] .ec-upload-zone {
    background: #0f1224;
    border-color: #2d3562;
}
html[data-theme="dark"] .ec-date-icon { color: #64748b; }
html[data-theme="dark"] .ec-date-wrap { border-color: #1e2340; }

html[data-theme="dark"] .btn-ec-cancel {
    background: #1a1e35;
    color: #94a3b8;
    border-color: #252d50;
}
html[data-theme="dark"] .btn-ec-cancel:hover { background: #252d50; }

html[data-theme="dark"] .ec-cover-wrap { background: #0f1224; }
html[data-theme="dark"] .ec-cover-empty i { color: #2d3562; }

html[data-theme="dark"] .ec-card-actions {
    background: #11142a;
    border-top-color: #1e2340;
}

html[data-theme="dark"] .btn-ec-action.edit {
    background: #1a1e35;
    border-color: #252d50;
    color: #94a3b8;
}
html[data-theme="dark"] .btn-ec-action.edit:hover { color: var(--pwal-pink); }

html[data-theme="dark"] .ec-back {
    background: #1a1e35;
    border-color: #252d50;
    color: #94a3b8;
}
html[data-theme="dark"] .ec-back:hover { color: var(--pwal-pink); }

/* ── 8. Property Listing ── */
html[data-theme="dark"] .ls-filter-bar {
    background: var(--bg-card);
    border-color: var(--border);
}

html[data-theme="dark"] .ls-pill-track {
    background: #0b0d1a;
    border-color: #1e2340;
}

html[data-theme="dark"] .ls-pill { color: #64748b; }
html[data-theme="dark"] .ls-pill.active {
    background: #1a1e35;
    color: var(--pwal-pink);
    box-shadow: 0 1px 6px rgba(0,0,0,0.4);
}
html[data-theme="dark"] .ls-pill:hover:not(.active) {
    background: #1a1e35;
    color: #94a3b8;
}

html[data-theme="dark"] .ls-sel,
html[data-theme="dark"] .ls-search-input {
    background: #0f1224;
    border-color: #1e2340;
    color: #e2e8f0;
}
html[data-theme="dark"] .ls-sel:focus,
html[data-theme="dark"] .ls-search-input:focus { background: #141728; }
html[data-theme="dark"] .ls-search-input::placeholder { color: #3d4b6b; }

html[data-theme="dark"] .ls-clear-all {
    border-color: #1e2340;
    color: #64748b;
}
html[data-theme="dark"] .ls-clear-all:hover { border-color: #ef4444; color: #ef4444; }

html[data-theme="dark"] .ls-table-wrap {
    background: var(--bg-card);
    border-color: var(--border);
}
html[data-theme="dark"] .ls-table th { background: #1a1e35; color: #64748b; }
html[data-theme="dark"] .ls-row { border-bottom-color: #1e2340; }
html[data-theme="dark"] .ls-row:hover { background: #14172e; }

html[data-theme="dark"] .action-dropdown {
    background: #141728;
    border-color: #1e2340;
    box-shadow: 0 8px 24px rgba(0,0,0,0.5);
}
html[data-theme="dark"] .action-item { color: #cbd5e1; }
html[data-theme="dark"] .action-item:hover { background: #1e2340; }
html[data-theme="dark"] .action-item.text-danger:hover { background: rgba(239,68,68,0.1); }

html[data-theme="dark"] .btn-action {
    background: #1a1e35;
    border-color: var(--pwal-pink);
    color: var(--pwal-pink);
}

/* ── 9. Property Detail ── */
html[data-theme="dark"] .pd-sidebar-card,
html[data-theme="dark"] .pd-main-card {
    background: var(--bg-card);
    border-color: var(--border);
}

/* ── 10. Organization ── */

/* Alerts */
html[data-theme="dark"] .org-alert-success { background: rgba(6,95,70,0.2);  color: #4ade80; }
html[data-theme="dark"] .org-alert-info    { background: rgba(29,78,216,0.2); color: #60a5fa; }
html[data-theme="dark"] .org-alert-error   { background: rgba(220,38,38,0.2); color: #f87171; }

/* Empty state */
html[data-theme="dark"] .org-empty {
    background: var(--bg-card);
}
html[data-theme="dark"] .org-empty-banner {
    background: linear-gradient(135deg, #1e1740 0%, #1a1535 40%, #2a1030 100%);
}
html[data-theme="dark"] .org-empty-icon {
    background: #1e2340;
    box-shadow: 0 8px 24px rgba(124,58,237,0.25);
}
html[data-theme="dark"] .org-empty-body h4 { color: #e2e8f0; }
html[data-theme="dark"] .org-empty-feature {
    background: #1a1e35;
    color: #94a3b8;
}

/* Profile card wrapper (inline-styled) */
html[data-theme="dark"] .org-profile-card {
    background: var(--bg-card) !important;
    box-shadow: 0 4px 24px rgba(0,0,0,0.35) !important;
}
html[data-theme="dark"] .org-profile-header {
    background: var(--bg-card);
    border-bottom-color: var(--border);
}
html[data-theme="dark"] .org-logo-circle {
    border-color: var(--bg-card);
    background: #1a1e35;
    color: #64748b;
}
html[data-theme="dark"] .btn-edit-org {
    background: #1a1e35;
    color: #94a3b8;
}
html[data-theme="dark"] .btn-edit-org:hover {
    background: #252d50;
    color: #e2e8f0;
}
html[data-theme="dark"] .org-name-text { color: #e2e8f0; }
html[data-theme="dark"] .plan-chip-free { background: #1e2340; color: #94a3b8; }
html[data-theme="dark"] .plan-chip-pro  { background: #1e1740; color: #a78bfa; }
html[data-theme="dark"] .plan-chip-team { background: #2a1030; color: #f472b6; }
html[data-theme="dark"] .org-meta-chip:hover { color: #e2e8f0; }

/* Cards */
html[data-theme="dark"] .org-card {
    background: var(--bg-card);
    border-color: var(--border);
}
html[data-theme="dark"] .org-card-header {
    border-bottom-color: var(--border);
}
html[data-theme="dark"] .org-card-title { color: #e2e8f0; }

/* Member rows */
html[data-theme="dark"] .member-row {
    border-bottom-color: var(--border);
}
html[data-theme="dark"] .member-row:hover { background: #14172e; }
html[data-theme="dark"] .member-name { color: #e2e8f0; }
html[data-theme="dark"] .role-owner  { background: rgba(244,63,142,0.15); color: #f472b6; }
html[data-theme="dark"] .role-member { background: rgba(99,102,241,0.15); color: #818cf8; }
html[data-theme="dark"] .btn-remove  { background: rgba(239,68,68,0.12); }
html[data-theme="dark"] .member-row-over { background: rgba(249,115,22,0.06); }
html[data-theme="dark"] .member-row-over:hover { background: rgba(249,115,22,0.12); }
html[data-theme="dark"] .seat-active { background: rgba(16,185,129,0.15); color: #34d399; }
html[data-theme="dark"] .seat-over   { background: rgba(249,115,22,0.15); color: #fb923c; }

/* Stat items (sidebar) */
html[data-theme="dark"] .org-stat-item { background: #1a1e35; }
html[data-theme="dark"] .org-stat-num  { color: #e2e8f0; }

/* Team count chip */
html[data-theme="dark"] .org-card-title span[style] {
    background: #1e2340 !important;
    color: #94a3b8 !important;
}

/* Progress bar */
html[data-theme="dark"] .org-progress-bg {
    background: #1e2340 !important;
}

/* Billing box */
html[data-theme="dark"] .org-billing-box {
    background: #0f1224 !important;
}
html[data-theme="dark"] .org-billing-row { color: #94a3b8 !important; }
html[data-theme="dark"] .org-billing-divider { border-top-color: #1e2340 !important; }
html[data-theme="dark"] .org-billing-total { color: #e2e8f0 !important; }

/* Plan name */
html[data-theme="dark"] .org-plan-name { color: #e2e8f0 !important; }

/* Change Plan button (inline styled) */
html[data-theme="dark"] a[style*="background:#f1f5f9"] {
    background: #1a1e35 !important;
    color: #94a3b8 !important;
}

/* Upgrade hint */
html[data-theme="dark"] .org-upgrade-hint {
    background: rgba(59,130,246,0.1) !important;
}

/* Seat over warning */
html[data-theme="dark"] .org-seat-warning {
    background: rgba(249,115,22,0.1) !important;
    color: #fb923c !important;
}

/* Modals */
html[data-theme="dark"] .am-modal {
    background: #141728;
    box-shadow: 0 20px 60px rgba(0,0,0,0.5);
}
html[data-theme="dark"] .am-title { color: #e2e8f0; }
html[data-theme="dark"] .am-input {
    background: #0f1224;
    border-color: #1e2340;
    color: #e2e8f0;
}
html[data-theme="dark"] .am-input:focus { border-color: var(--pwal-pink); }
html[data-theme="dark"] .am-result.found     { background: rgba(22,163,74,0.15); color: #4ade80; }
html[data-theme="dark"] .am-result.not-found { background: rgba(220,38,38,0.15); color: #f87171; }
html[data-theme="dark"] .am-btn-cancel {
    background: #1a1e35;
    color: #94a3b8;
}
html[data-theme="dark"] .am-btn-cancel:hover { background: #252d50; }

/* Seat modal */
html[data-theme="dark"] .seat-modal-info { background: #0f1224; }
html[data-theme="dark"] .seat-modal-info-row { color: #94a3b8; }
html[data-theme="dark"] .seat-modal-info-row strong { color: #e2e8f0; }
html[data-theme="dark"] .sm-stepper { border-color: #1e2340; }
html[data-theme="dark"] .sm-step-btn {
    background: #1a1e35;
    color: #94a3b8;
}
html[data-theme="dark"] .sm-step-btn:hover { background: #252d50; }
html[data-theme="dark"] .sm-step-input {
    background: var(--bg-card);
    border-left-color: #1e2340;
    border-right-color: #1e2340;
    color: #e2e8f0;
}

/* ── 11. Organization Edit ── */
html[data-theme="dark"] .org-form-card {
    background: var(--bg-card);
}
html[data-theme="dark"] .org-form-title i {
    background: linear-gradient(135deg, rgba(244,63,142,0.15), rgba(124,58,237,0.15));
}
html[data-theme="dark"] .form-control {
    background: #0f1224;
    border-color: #1e2340;
    color: #e2e8f0;
}
html[data-theme="dark"] .form-control:focus {
    background: #141728;
    border-color: var(--pwal-pink);
}
html[data-theme="dark"] .form-control::placeholder { color: #3d4b6b; }
html[data-theme="dark"] .form-label { color: #94a3b8; }
html[data-theme="dark"] .logo-upload-area {
    border-color: #1e2340;
}
html[data-theme="dark"] .logo-upload-area:hover {
    border-color: var(--pwal-pink);
    background: rgba(244,63,142,0.05);
}
html[data-theme="dark"] #logo-preview { border-color: var(--bg-card); }
html[data-theme="dark"] .btn-cancel-org {
    background: #1a1e35;
    color: #94a3b8;
}
html[data-theme="dark"] .btn-cancel-org:hover {
    background: #252d50;
    color: #e2e8f0;
}

/* ── 12. Organization Create ── */
html[data-theme="dark"] .co-back { color: #64748b; }
html[data-theme="dark"] .co-back:hover { color: #e2e8f0; }

html[data-theme="dark"] .co-card { background: var(--bg-card); }

html[data-theme="dark"] .co-logo-circle {
    border-color: var(--bg-card);
    background: #1a1e35;
    color: #64748b;
}
html[data-theme="dark"] .co-logo-btn { border-color: var(--bg-card); }

html[data-theme="dark"] .co-section-label::after { background: #1e2340; }

html[data-theme="dark"] .co-label { color: #94a3b8; }
html[data-theme="dark"] .co-input {
    background: #0f1224;
    border-color: #1e2340;
    color: #e2e8f0;
}
html[data-theme="dark"] .co-input:focus {
    background: #141728;
    border-color: #a855f7;
}
html[data-theme="dark"] .co-input::placeholder { color: #3d4b6b; }

html[data-theme="dark"] .co-divider { border-top-color: #1e2340; }

html[data-theme="dark"] .co-team-card { border-color: #1e2340; }
html[data-theme="dark"] .co-team-header {
    background: #1a1e35;
    border-bottom-color: #1e2340;
}
html[data-theme="dark"] .co-team-title { color: #e2e8f0; }
html[data-theme="dark"] .co-team-meta { border-bottom-color: #1e2340; }

html[data-theme="dark"] .co-member-row { border-bottom-color: #1e2340; }
html[data-theme="dark"] .co-member-row:hover { background: #14172e; }
html[data-theme="dark"] .co-member-name { color: #e2e8f0; }
html[data-theme="dark"] .co-btn-remove { background: rgba(239,68,68,0.12); }
html[data-theme="dark"] .co-btn-remove:hover { background: rgba(239,68,68,0.2); }

html[data-theme="dark"] .co-btn-cancel {
    background: #1a1e35;
    color: #94a3b8;
}
html[data-theme="dark"] .co-btn-cancel:hover {
    background: #252d50;
    color: #e2e8f0;
}

html[data-theme="dark"] .co-cost-box {
    background: #0f1224 !important;
    border-color: #1e2340 !important;
}
html[data-theme="dark"] .co-upgrade-hint {
    background: rgba(59,130,246,0.1) !important;
}
html[data-theme="dark"] .co-error-box {
    background: rgba(220,38,38,0.15) !important;
    color: #f87171 !important;
}

/* ── 13. Agent Profile ── */
html[data-theme="dark"] .profile-card {
    background: var(--bg-card);
    border-color: var(--border);
    box-shadow: 0 2px 16px rgba(0,0,0,.45);
}

html[data-theme="dark"] .prop-type-btn {
    background: #1a1e35;
    border-color: #1e2340;
    color: #64748b;
}
html[data-theme="dark"] .prop-type-btn i { color: #64748b; }
html[data-theme="dark"] .prop-type-btn:hover {
    background: #252d50;
    border-color: #7c3aed;
    color: #a78bfa;
}
html[data-theme="dark"] .prop-type-btn:hover i { color: #a78bfa; }

html[data-theme="dark"] .status-pill {
    background: #1a1e35;
    border-color: #1e2340;
    color: #64748b;
}
html[data-theme="dark"] .status-pill:hover { border-color: #7c3aed; color: #a78bfa; }
html[data-theme="dark"] .status-pill.active { background: #e2e8f0; color: #0f172a; border-color: #e2e8f0; }
html[data-theme="dark"] .status-pill.pill-boost { background: rgba(245,158,11,.1); border-color: rgba(245,158,11,.25); color: #f59e0b; }
html[data-theme="dark"] .status-pill.pill-boost.active { background: #f59e0b; color: #fff; }
html[data-theme="dark"] .status-pill.pill-trash { background: #1a1e35; color: #64748b; border-color: #1e2340; }
html[data-theme="dark"] .status-pill.pill-trash.active { background: #475569; color: #fff; border-color: #475569; }

html[data-theme="dark"] .prop-card {
    background: var(--bg-card);
    border-color: var(--border);
    box-shadow: 0 2px 12px rgba(0,0,0,.4);
}
html[data-theme="dark"] .prop-card:hover { box-shadow: 0 8px 28px rgba(0,0,0,.55); }

html[data-theme="dark"] .prop-img-wrap { background: #0f1224; }
html[data-theme="dark"] .prop-no-photo { color: #1e2340; }

html[data-theme="dark"] .prop-empty {
    background: var(--bg-card);
    border-color: var(--border);
}

/* ── 14. Pricing / Plans ── */
html[data-theme="dark"] .plan-info-alert {
    background: rgba(29,78,216,0.12) !important;
    border-color: rgba(59,130,246,0.25) !important;
    color: #60a5fa !important;
}

html[data-theme="dark"] .plan-current-badge {
    background: rgba(16,185,129,0.15);
    color: #34d399;
}

/* Base card */
html[data-theme="dark"] .pp-card {
    background: var(--bg-card);
    border-color: var(--border);
    box-shadow: 0 2px 14px rgba(0,0,0,0.35);
}
html[data-theme="dark"] .pp-card:hover {
    box-shadow: 0 8px 28px rgba(0,0,0,0.5);
}

/* Team card — gradient border on dark bg */
html[data-theme="dark"] .pp-card-team {
    background: linear-gradient(var(--bg-card), var(--bg-card)) padding-box,
                linear-gradient(135deg, #f43f8e, #7c3aed) border-box;
}

/* Enterprise card — keep its own dark bg, just slightly lighter */
html[data-theme="dark"] .pp-card-enterprise {
    background: #0d1117;
    border-color: #1e2340;
}

/* Plan name */
html[data-theme="dark"] .pp-name { color: #e2e8f0; }

/* Price */
html[data-theme="dark"] .pp-price-val { color: #e2e8f0; }
html[data-theme="dark"] .pp-currency  { color: #64748b; }

/* Divider */
html[data-theme="dark"] .pp-card hr { border-top-color: #1e2340; }
html[data-theme="dark"] .pp-card-enterprise hr { border-top-color: #1e2740; }

/* Features */
html[data-theme="dark"] .pp-features li { color: #94a3b8; }
html[data-theme="dark"] .pp-features li i { color: #a78bfa; }

/* Buttons */
html[data-theme="dark"] .pp-card-free .pp-btn,
html[data-theme="dark"] .pp-card-pro  .pp-btn {
    background: #1a1e35;
    color: #94a3b8;
}
html[data-theme="dark"] .pp-card-free .pp-btn:hover,
html[data-theme="dark"] .pp-card-pro  .pp-btn:hover {
    background: #252d50;
    color: #e2e8f0;
    opacity: 1;
}
html[data-theme="dark"] .pp-btn.is-current {
    background: #1a1e35 !important;
    color: #64748b !important;
}

html[data-theme="dark"] .pp-test-note { color: #4a5568; }

/* ── 16. Account Settings ── */
html[data-theme="dark"] .as-card {
    background: var(--bg-card);
    border-color: var(--border);
}
html[data-theme="dark"] .as-input {
    background: #0f1224;
    border-color: #1e2340;
    color: #e2e8f0;
}
html[data-theme="dark"] .as-input:focus { background: #141728; }

/* ── 17. Bootstrap modals ── */
html[data-theme="dark"] .modal-content {
    background: #141728;
    border-color: #1e2340;
    color: #e2e8f0;
}
html[data-theme="dark"] .modal-header,
html[data-theme="dark"] .modal-footer {
    border-color: #1e2340;
}
html[data-theme="dark"] .modal-backdrop { background: rgba(0, 0, 0, 0.75); }
html[data-theme="dark"] .btn-close { filter: invert(1); }

/* ── 18. Forms general ── */
html[data-theme="dark"] input[type="text"],
html[data-theme="dark"] input[type="number"],
html[data-theme="dark"] input[type="email"],
html[data-theme="dark"] input[type="password"],
html[data-theme="dark"] input[type="date"],
html[data-theme="dark"] textarea,
html[data-theme="dark"] select {
    color-scheme: dark;
}

/* ── 19. Scrollbar ── */
html[data-theme="dark"] ::-webkit-scrollbar { width: 6px; height: 6px; }
html[data-theme="dark"] ::-webkit-scrollbar-track { background: #0b0d1a; }
html[data-theme="dark"] ::-webkit-scrollbar-thumb { background: #252d50; border-radius: 4px; }
html[data-theme="dark"] ::-webkit-scrollbar-thumb:hover { background: #3a4480; }

/* ── 20. Theme toggle pill ── */
.theme-toggle-pill {
    position: relative;
    width: 52px;
    height: 28px;
    border-radius: 50px;
    border: none;
    background: #e2e8f0;
    cursor: pointer;
    padding: 0;
    flex-shrink: 0;
    transition: background 0.3s;
    outline: none;
    box-shadow: inset 0 1px 3px rgba(0,0,0,0.15);
}

html[data-theme="dark"] .theme-toggle-pill {
    background: #252d50;
}

.toggle-thumb {
    position: absolute;
    top: 3px;
    left: 3px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 5px rgba(0,0,0,0.25);
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), background 0.3s;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    color: #f59e0b;
}

html[data-theme="dark"] .toggle-thumb {
    transform: translateX(24px);
    background: #7c3aed;
    color: #fff;
}

.toggle-thumb .fa-sun  { display: block; }
.toggle-thumb .fa-moon { display: none; }
html[data-theme="dark"] .toggle-thumb .fa-sun  { display: none; }
html[data-theme="dark"] .toggle-thumb .fa-moon { display: block; }

/* ── 21. Logo swap for dark mode ── */
html[data-theme="dark"] .nav-logo-light { display: none; }
html[data-theme="dark"] .nav-logo-dark  { display: block !important; }
html:not([data-theme="dark"]) .nav-logo-dark { display: none; }