/* ============================================================================
   COLOUR THEME LAYER
   ----------------------------------------------------------------------------
   Loaded last on the console pages (admin, reports, properties, settings,
   landlord, tenant). js/theme.js sets data-theme/data-bs-theme on <html>;
   Bootstrap 5.3's own dark variables handle its components, and this file
   flips the page tokens plus the surfaces the console layer paints by hand.

   Choices: System (follows the OS), Light and Dark. Light is the default.
   ========================================================================== */

/* ── THEME SWITCH ───────────────────────────────────────────────────────── */

.theme-switch {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    padding: 3px;
    border: 1px solid var(--a-line, var(--border, #e5e9f2));
    border-radius: 999px;
    background: var(--a-soft, var(--bg, #f6f8fc));
}

.theme-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--a-muted, var(--ink-m, #69748c));
    font-size: .76rem;
    line-height: 1;
    cursor: pointer;
    transition: background .18s ease, color .18s ease, box-shadow .18s ease;
}

.theme-btn:hover { color: var(--a-ink, var(--ink, #181b20)); }

.theme-btn:focus-visible {
    outline: 2px solid var(--g500, #22c55e);
    outline-offset: 1px;
}

.theme-btn[aria-pressed="true"] {
    background: #fff;
    color: #181b20;
    box-shadow: 0 1px 2px rgba(15, 23, 42, .14);
}

@media (max-width: 768px) {
    .theme-btn { width: 26px; height: 26px; }
}

/* ── DARK TOKENS ────────────────────────────────────────────────────────── */

html[data-theme="dark"] {
    --ink: #cfd6e0;
    --ink-2: #bbc4d1;
    --ink-m: #97a1b0;
    --ink-f: #7d8794;
    --ink-xf: #636c79;

    --bg: #20242b;
    --bg-2: #262b33;
    --surface: #2b313a;
    --border: #39414c;
    --border-2: #47505d;

    --sidebar: #1a1e24;
    --sidebar-2: #20242b;
    --sidebar-3: #292f38;

    --g50: #16301f;
    --g100: #1b3a27;
    --g200: #1f5133;
    --g700: #4ade80;
    --g800: #86efac;
    --g900: #bbf7d0;

    --a-line: #39414c;
    --a-line-strong: #47505d;
    --a-muted: #97a1b0;
    --a-faint: #7d8794;
    --a-soft: #262b33;
    --a-ink: #cfd6e0;

    --sh-xs: 0 1px 3px rgba(0, 0, 0, .28), 0 1px 2px rgba(0, 0, 0, .22);
    --sh-sm: 0 2px 8px rgba(0, 0, 0, .28), 0 1px 3px rgba(0, 0, 0, .22);
    --sh-md: 0 6px 20px rgba(0, 0, 0, .32), 0 2px 8px rgba(0, 0, 0, .24);
    --sh-lg: 0 16px 48px rgba(0, 0, 0, .38), 0 6px 16px rgba(0, 0, 0, .28);
    --sh-xl: 0 28px 70px rgba(0, 0, 0, .42), 0 10px 24px rgba(0, 0, 0, .3);
}

/* The console tokens are also declared on these wrappers, so repeat them
   there or the wrapper copies would keep the light values. */
html[data-theme="dark"] .dash-topbar,
html[data-theme="dark"] .dash-content,
html[data-theme="dark"] .page-content {
    --a-line: #39414c;
    --a-line-strong: #47505d;
    --a-muted: #97a1b0;
    --a-faint: #7d8794;
    --a-soft: #262b33;
    --a-ink: #cfd6e0;
}

html[data-theme="dark"] body {
    background: var(--bg);
    color: var(--ink);
}

/* ── TOP BAR & CHIP ─────────────────────────────────────────────────────── */

html[data-theme="dark"] .dash-topbar {
    /* No blur on this sticky bar (see admin-console.css), so keep it solid. */
    background: rgba(32, 36, 43, .96);
    border-bottom-color: var(--a-line);
    box-shadow: 0 12px 30px -26px rgba(0, 0, 0, .55);
}

html[data-theme="dark"] .admin-chip {
    background: #2b313a;
    border-color: var(--a-line);
}

html[data-theme="dark"] .admin-chip .a-dot { color: #fff; }

html[data-theme="dark"] .topbar-action { color: #b9c2cf; }

html[data-theme="dark"] .topbar-action:hover {
    background: #2f3640;
    border-color: var(--a-line);
    color: #fff;
}

html[data-theme="dark"] .topbar-action--icon {
    border-color: var(--a-line);
    color: #b9c2cf;
}

html[data-theme="dark"] body.landlord-console .topbar-eyebrow,
html[data-theme="dark"] .sidebar.sidebar-landlord ~ .flex-grow-1 .topbar-eyebrow {
    color: #93c5fd;
}

html[data-theme="dark"] .theme-switch {
    border-color: var(--a-line);
    background: #262b33;
}

html[data-theme="dark"] .theme-btn { color: #97a1b0; }

html[data-theme="dark"] .theme-btn:hover {
    background: #2f3640;
    color: #fff;
}

html[data-theme="dark"] .theme-btn[aria-pressed="true"] {
    background: #39414c;
    color: #fff;
    box-shadow: none;
}

/* Amber / blue status pills keep their meaning, toned for dark surfaces. */
html[data-theme="dark"] .topbar-alert {
    border-color: #4a3b12;
    background: #2a2310;
    color: #fcd34d;
}

html[data-theme="dark"] .topbar-alert:hover {
    background: #332b13;
    color: #fde68a;
}

html[data-theme="dark"] .topbar-alert.is-info {
    border-color: #1e3a63;
    background: #0f2340;
    color: #93c5fd;
}

html[data-theme="dark"] .topbar-alert.is-info:hover {
    background: #132c4e;
    color: #bfdbfe;
}

/* ── CARDS ──────────────────────────────────────────────────────────────── */

html[data-theme="dark"] .kpi-card,
html[data-theme="dark"] .chart-card,
html[data-theme="dark"] .activity-card,
html[data-theme="dark"] .users-card,
html[data-theme="dark"] .registration-review-card,
html[data-theme="dark"] .filter-bar,
html[data-theme="dark"] .section-card,
html[data-theme="dark"] .settings-card,
html[data-theme="dark"] .settings-tabs,
html[data-theme="dark"] .prop-search-bar,
html[data-theme="dark"] .folder-card,
html[data-theme="dark"] body.landlord-console .occ-bar-card,
html[data-theme="dark"] body.landlord-console .section-card,
html[data-theme="dark"] body.tenant-console .section-card {
    background: var(--surface);
    border-color: var(--border);
    box-shadow: 0 1px 2px rgba(0, 0, 0, .35);
}

html[data-theme="dark"] .kpi-card:hover {
    border-color: var(--border-2);
    box-shadow: 0 16px 30px -22px rgba(0, 0, 0, .9);
}

html[data-theme="dark"] .activity-card .ac-header,
html[data-theme="dark"] .users-card .uc-header,
html[data-theme="dark"] .registration-review-header,
html[data-theme="dark"] #gcash-section .gc-head,
html[data-theme="dark"] .section-card .sc-header,
html[data-theme="dark"] .settings-card .sc-header {
    background: var(--surface);
    border-bottom-color: var(--border);
}

html[data-theme="dark"] .registration-review-item {
    background: var(--surface);
    border-color: var(--border);
    box-shadow: none;
}

html[data-theme="dark"] .admin-th,
html[data-theme="dark"] .users-card thead th {
    background: #262b33;
    border-bottom-color: var(--border);
    color: var(--a-muted);
}

html[data-theme="dark"] .users-card .table-hover > tbody > tr:hover > * {
    background: #2f3640;
}

html[data-theme="dark"] .table {
    --bs-table-color: #cfd6e0;
    --bs-table-bg: transparent;
    --bs-table-border-color: #39414c;
    --bs-table-hover-color: #fff;
    --bs-table-hover-bg: #2f3640;
    --bs-table-striped-color: #cfd6e0;
    --bs-table-striped-bg: #262b33;
}

html[data-theme="dark"] .profile-strip {
    background: linear-gradient(135deg, #2b313a, #1d3126);
    border-color: var(--border);
}

html[data-theme="dark"] .prop-search-wrap input:focus {
    background: #262b33;
}

html[data-theme="dark"] .filter-tab {
    background: var(--surface);
    color: var(--a-muted);
}

/* Selected pills get a lit surface, not a white one, so they read as active
   without glaring out of the page. */
html[data-theme="dark"] .filter-tab.ft-admin.active,
html[data-theme="dark"] .range-btn:hover,
html[data-theme="dark"] .range-btn.active {
    border-color: #566274;
    background: #47505d;
    color: #fff;
}

html[data-theme="dark"] .settings-tab.active,
html[data-theme="dark"] .settings-tab.active:hover {
    border-color: #47505d;
    border-bottom-color: #dc2626;
    background: #39414c;
    color: var(--ink);
}

html[data-theme="dark"] .status-chip.active:not(.chip-reserved):not(.chip-occupied) {
    border-color: #566274;
    background: #47505d;
    color: #fff;
}

/* ── TINTED PANELS ──────────────────────────────────────────────────────── */

html[data-theme="dark"] .pending-review-pill,
html[data-theme="dark"] .plan-upgrade-card,
html[data-theme="dark"] .plan-lock-note {
    border-color: #4a3b12;
    background: #2a2310;
    color: #fcd34d;
}

html[data-theme="dark"] .btn-locked:hover,
html[data-theme="dark"] .btn-tour-editor.is-locked:hover {
    background: #2a2310;
    border-color: #4a3b12;
    color: #fcd34d;
}

html[data-theme="dark"] .settings-alert.success {
    border-color: #1f5133;
    background: #0d2a1d;
    color: #86efac;
}

html[data-theme="dark"] .settings-alert.error {
    border-color: #5b2530;
    background: #2a1518;
    color: #fca5a5;
}

/* Tenant verification tones */
html[data-theme="dark"] .verify-card.verified {
    border-color: #1f5133;
    background: #0d2a1d;
    color: #86efac;
}

html[data-theme="dark"] .verify-card.verified .verify-card-icon {
    background: #123a25;
    color: #4ade80;
}

html[data-theme="dark"] .verify-card.pending {
    border-color: #4a3b12;
    background: #2a2310;
    color: #fcd34d;
}

html[data-theme="dark"] .verify-card.pending .verify-card-icon {
    background: #3b3112;
    color: #fbbf24;
}

html[data-theme="dark"] .verify-card.rejected {
    border-color: #5b2530;
    background: #2a1518;
    color: #fca5a5;
}

html[data-theme="dark"] .verify-card.rejected .verify-card-icon {
    background: #3b1a20;
    color: #f87171;
}

html[data-theme="dark"] .verify-card.missing {
    border-color: var(--border);
    background: #262b33;
    color: #b9c2cf;
}

html[data-theme="dark"] .verify-card.missing .verify-card-icon {
    background: #2f3640;
    color: #97a1b0;
}

html[data-theme="dark"] .verify-card-btn { background: #2b313a; }

html[data-theme="dark"] .notif-row.unread { background: #0d2a1d; }

/* Inline amber section headers (e.g. a pending bill) keep their warning tone. */
html[data-theme="dark"] .section-card .sc-header[style*="#fffbeb"] {
    background: #2a2310 !important;
    border-bottom-color: #4a3b12 !important;
}

html[data-theme="dark"] .section-card .sc-header[style*="#fffbeb"] * {
    color: #fcd34d !important;
}

/* Green gradient avatars would turn mint with white initials, so keep them deep. */
html[data-theme="dark"] .s-avatar,
html[data-theme="dark"] .avatar-circle,
html[data-theme="dark"] .lp-avatar,
html[data-theme="dark"] .nav-user-chip .user-dot {
    background: linear-gradient(135deg, #15803d, #14532d) !important;
}

/* style.css brightens success buttons to --g700 on hover; that stays readable
   in light mode but not with white text on a dark page. */
html[data-theme="dark"] .btn-success:hover,
html[data-theme="dark"] .btn-reserve:hover,
html[data-theme="dark"] .btn-reserve-submit:hover,
html[data-theme="dark"] .pricing-cta:hover,
html[data-theme="dark"] .lp-btn-message:hover,
html[data-theme="dark"] .nav-btn-tenant:hover,
html[data-theme="dark"] .filter-done-btn:hover {
    border-color: #15803d !important;
    background: #15803d !important;
}

/* The stay banner is a solid green panel: keep it dark enough for white text. */
html[data-theme="dark"] .room-banner {
    background: linear-gradient(135deg, #175a31, #14532d);
    box-shadow: 0 8px 28px rgba(0, 0, 0, .45);
}

/* The print action sits beside the green export button: a quiet dark chip
   reads better in dark mode than the original light pill. */
html[data-theme="dark"] .btn-print {
    border: 1px solid var(--border-2);
    background: #2f3640;
    color: var(--ink);
}

html[data-theme="dark"] .btn-print:hover {
    border-color: #566274;
    background: #39414c;
    color: #fff;
}

/* Landlord inline subscription banners keep their message but lose the glare. */
html[data-theme="dark"] .page-content > div[style*="background:#fee2e2"] {
    border-color: #5b2530 !important;
    background: #2a1518 !important;
}

html[data-theme="dark"] .page-content > div[style*="background:#fee2e2"] div,
html[data-theme="dark"] .page-content > div[style*="background:#fee2e2"] i {
    color: #fca5a5 !important;
}

html[data-theme="dark"] .page-content > div[style*="background:#fffbeb"],
html[data-theme="dark"] .page-content > div[style*="background:#fef3c7"] {
    border-color: #4a3b12 !important;
    background: #2a2310 !important;
}

html[data-theme="dark"] .page-content > div[style*="background:#fffbeb"] div,
html[data-theme="dark"] .page-content > div[style*="background:#fffbeb"] i,
html[data-theme="dark"] .page-content > div[style*="background:#fef3c7"] div,
html[data-theme="dark"] .page-content > div[style*="background:#fef3c7"] i {
    color: #fcd34d !important;
}

/* ── BOOTSTRAP UTILITIES USED IN THE MARKUP ─────────────────────────────── */

html[data-theme="dark"] .bg-white { background-color: #2b313a !important; }
html[data-theme="dark"] .bg-light { background-color: #2f3640 !important; }
html[data-theme="dark"] .text-dark { color: #cfd6e0 !important; }
html[data-theme="dark"] .border { border-color: #39414c !important; }
html[data-theme="dark"] .shadow-sm { box-shadow: 0 1px 3px rgba(0, 0, 0, .5) !important; }

html[data-theme="dark"] .btn-light {
    --bs-btn-bg: #2f3640;
    --bs-btn-border-color: #39414c;
    --bs-btn-color: #cfd6e0;
    --bs-btn-hover-bg: #39414c;
    --bs-btn-hover-border-color: #47505d;
    --bs-btn-hover-color: #fff;
    --bs-btn-active-bg: #39414c;
    --bs-btn-active-border-color: #47505d;
    --bs-btn-active-color: #fff;
}

html[data-theme="dark"] .btn-outline-dark {
    --bs-btn-color: #b9c2cf;
    --bs-btn-border-color: #47505d;
    --bs-btn-hover-bg: #cfd6e0;
    --bs-btn-hover-border-color: #cfd6e0;
    --bs-btn-hover-color: #181b20;
}

html[data-theme="dark"] .form-control,
html[data-theme="dark"] .form-select {
    color: var(--ink);
    border-color: var(--border);
    background-color: #262b33;
}

html[data-theme="dark"] .form-control::placeholder { color: #7d8794; }

/* Native file pickers draw a light system button; restyle it to match. */
html[data-theme="dark"] input[type="file"]::file-selector-button {
    border: 1px solid var(--border-2);
    background: #2f3640;
    color: var(--ink);
}

html[data-theme="dark"] input[type="file"]::file-selector-button:hover {
    background: #39414c;
    color: #fff;
}

html[data-theme="dark"] .form-control:focus,
html[data-theme="dark"] .form-select:focus {
    color: var(--ink);
    border-color: #2f8f5b;
    background-color: #262b33;
}

html[data-theme="dark"] .input-group-text {
    color: #b9c2cf;
    border-color: var(--border);
    background: #2f3640;
}

html[data-theme="dark"] .dropdown-menu {
    border-color: var(--border);
    background: #2b313a;
    box-shadow: 0 18px 40px rgba(0, 0, 0, .5);
}

html[data-theme="dark"] .dropdown-item { color: #b9c2cf; }
html[data-theme="dark"] .dropdown-item:hover,
html[data-theme="dark"] .dropdown-item:focus { background: #2f3640; color: #fff; }
html[data-theme="dark"] .dropdown-divider { border-color: var(--border); }

html[data-theme="dark"] .modal-content {
    border-color: var(--border);
    background: #2b313a;
}

html[data-theme="dark"] .modal-header,
html[data-theme="dark"] .modal-footer { border-color: var(--border); }

html[data-theme="dark"] .list-group-item {
    color: var(--ink);
    border-color: var(--border);
    background: #2b313a;
}

html[data-theme="dark"] .nav-tabs { border-color: var(--border); }

html[data-theme="dark"] .nav-tabs .nav-link { color: #97a1b0; }

html[data-theme="dark"] .nav-tabs .nav-link.active {
    color: var(--ink);
    border-color: var(--border) var(--border) #2b313a;
    background: #2b313a;
}

/* ── PUBLIC SITE ────────────────────────────────────────────────────────── */

/* The home navbar is always dark, so the switch keeps its own dark chrome. */
.home-nav .theme-switch {
    border-color: rgba(255, 255, 255, .14);
    background: rgba(255, 255, 255, .06);
}

.home-nav .theme-btn { color: rgba(255, 255, 255, .6); }

.home-nav .theme-btn:hover {
    background: rgba(255, 255, 255, .12);
    color: #fff;
}

.home-nav .theme-btn[aria-pressed="true"] {
    background: #fff;
    color: #181b20;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .35);
}

html[data-theme="dark"] .modal-reserve .modal-content {
    border-color: var(--border) !important;
    background: var(--surface) !important;
}

html[data-theme="dark"] .modal-reserve .modal-header,
html[data-theme="dark"] .modal-reserve .modal-body {
    border-color: var(--border);
    background: var(--surface);
}

html[data-theme="dark"] .res-input:focus { background: #262b33; }

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

html[data-theme="dark"] .policy-pill {
    border-color: var(--border);
    background: #2f3640;
    color: #b9c2cf;
}

html[data-theme="dark"] .reservation-access-alert {
    border-color: #4a3b12;
    background: #2a2310;
    color: #fcd34d;
}

html[data-theme="dark"] .reservation-access-alert i { color: #fbbf24; }

/* ── AUTH PAGES (LIGHT VARIANT) ───────────────────────────────────────────
   login.php and register.php are dark by design. Their left photo panel
   stays dark; the form side follows the light choice, and keeps its original
   dark styling when the theme is dark. */

.auth-theme {
    position: fixed;
    top: 1.5rem;
    right: 1.5rem;
    z-index: 30;
}

@media (max-width: 768px) {
    .auth-theme { top: 1.1rem; right: 1.1rem; }
}

html[data-theme="light"] .auth-page { background: #f5f7fb; }

html[data-theme="light"] .auth-panel-right {
    background: linear-gradient(160deg, #f8fbf9, #eef4f0);
}

html[data-theme="light"] .auth-form-header h2 { color: #0a0f1e; }
html[data-theme="light"] .auth-form-header p { color: #5a6481; }
html[data-theme="light"] .auth-field label { color: #5a6481; }

html[data-theme="light"] .auth-field label span[style*="rgba(255,255,255"] {
    color: #8e98b0 !important;
}

html[data-theme="light"] .auth-field label span[style*="var(--g400)"] {
    color: #15803d !important;
}

html[data-theme="light"] .auth-input {
    border-color: #e4e8f0;
    background: #fff;
    color: #0a0f1e;
}

html[data-theme="light"] .auth-input::placeholder { color: #98a1b5; }

html[data-theme="light"] .auth-input:focus {
    background: #fff;
    box-shadow: 0 0 0 3px rgba(22, 163, 74, .12);
}

html[data-theme="light"] .auth-input option {
    background: #fff;
    color: #0a0f1e;
}

html[data-theme="light"] .auth-input-icon,
html[data-theme="light"] .pass-toggle { color: #8e98b0; }

html[data-theme="light"] .auth-input:focus + .auth-input-icon,
html[data-theme="light"] .auth-input-wrap:focus-within .auth-input-icon { color: #16a34a; }

html[data-theme="light"] .pass-toggle:hover { color: #5a6481; }

html[data-theme="light"] .auth-remember,
html[data-theme="light"] .auth-terms { color: #5a6481; }

html[data-theme="light"] .auth-forgot { color: #15803d; }
html[data-theme="light"] .auth-forgot:hover { color: #166534; }

html[data-theme="light"] .auth-divider::before,
html[data-theme="light"] .auth-divider::after { background: #e4e8f0; }

html[data-theme="light"] .auth-divider span { color: #8e98b0; }

html[data-theme="light"] .auth-switch { color: #5a6481; }
html[data-theme="light"] .auth-switch a { color: #15803d; }
html[data-theme="light"] .auth-switch a:hover { color: #166534; }
html[data-theme="light"] .auth-terms a { color: #15803d; }
html[data-theme="light"] .auth-terms a:hover { color: #166534; }

html[data-theme="light"] .auth-back { color: #5a6481; }
html[data-theme="light"] .auth-back:hover { color: #0a0f1e; }

html[data-theme="light"] .auth-alert {
    border-color: #fecaca;
    background: #fef2f2;
    color: #991b1b;
}

/* Inline success alerts use translucent green with light text. */
html[data-theme="light"] .auth-alert[style*="rgba(22,163,74"] {
    border-color: #bbf7d0 !important;
    background: #f0fdf4 !important;
    color: #15803d !important;
}

html[data-theme="light"] .pw-seg { background: #e4e8f0; }
html[data-theme="light"] .pw-label { color: #8e98b0; }

html[data-theme="light"] .reg-card {
    border-color: #e4e8f0 !important;
    background: #fff !important;
}

html[data-theme="light"] .reg-card-sub { color: #5a6481 !important; }
html[data-theme="light"] .reg-card-title { color: #15803d; }

html[data-theme="light"] .role-select-card {
    border-color: #e4e8f0;
    background: #fff;
}

html[data-theme="light"] .role-select-card i { color: #8e98b0; }
html[data-theme="light"] .role-select-card strong { color: #0a0f1e; }
html[data-theme="light"] .role-select-card span { color: #5a6481; }

html[data-theme="light"] .role-select-option input:checked + .role-select-card {
    border-color: #16a34a;
    background: #f0fdf4;
}

html[data-theme="light"] .tenant-badge {
    border-color: #bbf7d0;
    background: #f0fdf4;
    color: #15803d;
}

/* ── STANDALONE CONSOLE PAGES ─────────────────────────────────────────────
   messages, notifications, reservation history and the role settings pages
   carry their own copy of the console CSS. Their tokens are the same, so the
   dark token block above flips the page; these rules fix the surfaces and
   colours they still hardcode. */

.topbar-right {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin-left: auto;
}

/* These pages have no backdrop blur under the sticky bar, so keep it opaque. */
html[data-theme="dark"] :is(.messages-page, .notifications-page, .history-page, .settings-page) .dash-topbar {
    background: #20242b;
}

@media (max-width: 768px) {
    :is(.messages-page, .notifications-page, .history-page, .settings-page) .dash-topbar {
        flex-wrap: wrap;
        gap: 10px;
    }

    :is(.messages-page, .notifications-page, .history-page, .settings-page) .topbar-right {
        width: 100%;
        justify-content: flex-end;
    }
}

/* The generic dark pill rule above flattens selected tabs; keep them solid. */
html[data-theme="dark"] .filter-tab.active:not(.ft-admin) {
    border-color: var(--g600);
    background: var(--g600);
    color: #fff;
}

html[data-theme="dark"] .filter-tab.active:not(.ft-admin) .ft-count {
    background: rgba(255, 255, 255, .25);
    color: #fff;
}

html[data-theme="dark"] .btn-browse:hover { background: #15803d; }

/* ── MESSAGES ───────────────────────────────────────────────────────────── */

html[data-theme="dark"] .messages-layout {
    background: var(--surface);
    box-shadow: 0 16px 40px rgba(0, 0, 0, .45);
}

html[data-theme="dark"] .contacts-panel { background: var(--bg-2); }
html[data-theme="dark"] .contacts-header { background: var(--surface); }

html[data-theme="dark"] .contact-item { border-bottom-color: rgba(255, 255, 255, .04); }

html[data-theme="dark"] .contact-item:hover,
html[data-theme="dark"] .contact-item.active { background: var(--surface); }

html[data-theme="dark"] .contact-status-dot { border-color: var(--surface); }

html[data-theme="dark"] .chat-panel,
html[data-theme="dark"] .chat-header,
html[data-theme="dark"] .chat-input-area { background: var(--surface); }

html[data-theme="dark"] .chat-messages {
    background: linear-gradient(180deg, #23272e 0%, #20242b 100%);
}

html[data-theme="dark"] .actions-toolbar,
html[data-theme="dark"] .bubble.theirs,
html[data-theme="dark"] .reaction-pill { background: var(--surface); }

html[data-theme="dark"] .reaction-pill:hover { border-color: var(--border-2); }

html[data-theme="dark"] .reply-preview { background: var(--bg-2); }

html[data-theme="dark"] .reply-preview-close { background: rgba(255, 255, 255, .08); }

html[data-theme="dark"] .reply-preview-close:hover {
    background: rgba(255, 255, 255, .16);
    color: var(--ink);
}

html[data-theme="dark"] .bubble.theirs .reply-quote { background: rgba(255, 255, 255, .06); }

html[data-theme="dark"] .chat-input { background: var(--bg-2); }
html[data-theme="dark"] .chat-input:focus { background: var(--surface); }

html[data-theme="dark"] .chat-header [style*="color:#16a34a"] { color: #4ade80 !important; }
html[data-theme="dark"] .chat-header [style*="color:#64748b"] { color: #97a1b0 !important; }

/* ── NOTIFICATIONS ──────────────────────────────────────────────────────── */

html[data-theme="dark"] .icon-reservation,
html[data-theme="dark"] .icon-message { background: #2f3640; color: #93c5fd; }

html[data-theme="dark"] .icon-payment { background: #2a1518; color: #fca5a5; }
html[data-theme="dark"] .icon-maintenance { background: #2a2310; color: #fcd34d; }
html[data-theme="dark"] .icon-announcement { background: #241a3a; color: #c4b5fd; }

/* ── RESERVATION HISTORY ────────────────────────────────────────────────── */

html[data-theme="dark"] .sum-item .sv[style*="#92400e"] { color: #fbbf24 !important; }
html[data-theme="dark"] .sum-item .sv[style*="#991b1b"] { color: #f87171 !important; }

html[data-theme="dark"] .st-badge.pending {
    border-color: #4a3b12;
    background: #2a2310;
    color: #fcd34d;
}

html[data-theme="dark"] .st-badge.rejected {
    border-color: #5b2530;
    background: #2a1518;
    color: #fca5a5;
}

html[data-theme="dark"] .st-badge.cancelled {
    border-color: var(--border);
    background: #2f3640;
    color: #b9c2cf;
}

/* ── SETTINGS (LANDLORD + TENANT) ───────────────────────────────────────── */

html[data-theme="dark"] body.settings-page .btn-save {
    background: linear-gradient(135deg, #15803d, #166534);
}

html[data-theme="dark"] body.settings-page .settings-input option {
    background: #2b313a;
    color: #cfd6e0;
}

/* Tenant verification banner */
html[data-theme="dark"] body.settings-page .verify-status.verified {
    border-color: #1f5133;
    background: #0d2a1d;
    color: #86efac;
}

html[data-theme="dark"] body.settings-page .verify-status.verified > i { color: #4ade80; }

html[data-theme="dark"] body.settings-page .verify-status.pending {
    border-color: #4a3b12;
    background: #2a2310;
    color: #fcd34d;
}

html[data-theme="dark"] body.settings-page .verify-status.pending > i { color: #fbbf24; }

html[data-theme="dark"] body.settings-page .verify-status.rejected {
    border-color: #5b2530;
    background: #2a1518;
    color: #fca5a5;
}

html[data-theme="dark"] body.settings-page .verify-status.rejected > i { color: #f87171; }

html[data-theme="dark"] body.settings-page .verify-status.missing {
    border-color: var(--border);
    background: #262b33;
    color: #b9c2cf;
}

html[data-theme="dark"] body.settings-page .verify-status.missing > i { color: #97a1b0; }

/* Status pills */
html[data-theme="dark"] body.settings-page .id-status-pill.verified {
    border-color: #1f5133;
    background: #0d2a1d;
    color: #86efac;
}

html[data-theme="dark"] body.settings-page .id-status-pill.pending {
    border-color: #4a3b12;
    background: #2a2310;
    color: #fcd34d;
}

html[data-theme="dark"] body.settings-page .id-status-pill.rejected {
    border-color: #5b2530;
    background: #2a1518;
    color: #fca5a5;
}

html[data-theme="dark"] body.settings-page .id-status-pill.missing {
    border-color: var(--border);
    background: #2f3640;
    color: #b9c2cf;
}

/* Subscription status written inline in the landlord header */
html[data-theme="dark"] body.settings-page .sub-status.active {
    border-color: #1f5133 !important;
    background: #0d2a1d !important;
    color: #86efac !important;
}

html[data-theme="dark"] body.settings-page .sub-status.expired {
    border-color: #5b2530 !important;
    background: #2a1518 !important;
    color: #fca5a5 !important;
}

/* Inline verification banners */
html[data-theme="dark"] body.settings-page div[style*="background:#fef2f2"] {
    border-color: #5b2530 !important;
    background: #2a1518 !important;
}

html[data-theme="dark"] body.settings-page div[style*="background:#f0fdf4"] {
    border-color: #1f5133 !important;
    background: #0d2a1d !important;
}

html[data-theme="dark"] body.settings-page div[style*="color:#991b1b"] { color: #fca5a5 !important; }
html[data-theme="dark"] body.settings-page div[style*="color:#166534"] { color: #86efac !important; }

html[data-theme="dark"] body.settings-page .sc-icon[style*="#fee2e2"] {
    background: #2a1518 !important;
    color: #fca5a5 !important;
}

/* ID file on record */
html[data-theme="dark"] body.settings-page .id-uploaded-file {
    border-color: var(--border);
    background: var(--surface);
    box-shadow: none;
}

html[data-theme="dark"] body.settings-page .id-file-title { color: #cfd6e0; }
html[data-theme="dark"] body.settings-page .id-file-name { color: #7d8794; }

html[data-theme="dark"] body.settings-page .id-file-icon {
    background: #2f3640;
    color: #93c5fd;
}

html[data-theme="dark"] body.settings-page .id-file-icon.pdf {
    background: #2a1518;
    color: #fb7185;
}

html[data-theme="dark"] body.settings-page .id-view-button {
    border-color: var(--border);
    background: #2f3640;
    color: #93c5fd;
}

html[data-theme="dark"] body.settings-page .id-view-button:hover {
    border-color: #2563eb;
    background: #2563eb;
    color: #fff;
}

/* ── FULL-WIDTH PANELS THAT SET THEIR FILL INLINE ──────────────────────── */

/* Tenant: pending-reservation hero (amber) */
html[data-theme="dark"] body.tenant-console div[style*="background:#fefce8"] {
    background: #2a2310 !important;
    border-color: #4a3b12 !important;
}

html[data-theme="dark"] body.tenant-console div[style*="background:#fef08a"] {
    background: #3a2c10 !important;
    color: #fcd34d !important;
}

html[data-theme="dark"] body.tenant-console div[style*="color:#854d0e"] {
    color: #fcd34d !important;
}

/* Tenant: waitlist header (blue) */
html[data-theme="dark"] body.tenant-console .sc-header[style*="background:#eff6ff"] {
    background: #132c4e !important;
    border-bottom-color: #1e3f6b !important;
}

html[data-theme="dark"] body.tenant-console .sc-header[style*="background:#eff6ff"] h6 {
    color: #93c5fd !important;
}

/* Landlord: add-room workflow guidance banner (blue) */
html[data-theme="dark"] body.landlord-console div[style*="background:#eff6ff"][style*="color:#1e40af"] {
    background: #132c4e !important;
    border-color: #1e3f6b !important;
    color: #93c5fd !important;
}

/* Tenant: payment-proof invoice summary (green) */
html[data-theme="dark"] #uploadPaymentProofModal .modal-body > div[style*="background:#f0fdf4"] {
    background: #0d2a1d !important;
    border-color: #1f5133 !important;
}

html[data-theme="dark"] #uploadPaymentProofModal .text-dark {
    color: var(--ink) !important;
}

html[data-theme="dark"] #uploadPaymentProofModal .text-success {
    color: #86efac !important;
}

/* ── PASTEL CHIPS, PILLS AND SMALL BUTTONS ───────────────────────────────
   These kept a light fill and dark type in the page CSS or in an inline
   style. The dark versions keep each tone's meaning: red = destructive,
   amber = attention, blue = info, green = good, purple = premium. */

/* Red — role badge, missing ID, reject/cancel/delete actions */
html[data-theme="dark"] .role-badge.admin,
html[data-theme="dark"] .registration-id-missing,
html[data-theme="dark"] .registration-actions .reject,
html[data-theme="dark"] .verify-actions .reject,
html[data-theme="dark"] .btn-reject,
html[data-theme="dark"] .btn-tbl-del,
html[data-theme="dark"] .btn-del {
    border-color: #5b2530;
    background: #2a1518;
    color: #fca5a5;
}

html[data-theme="dark"] .btn-reject:hover,
html[data-theme="dark"] .btn-tbl-del:hover,
html[data-theme="dark"] .btn-del:hover {
    border-color: #b91c1c;
    background: #b91c1c;
    color: #fff;
}

/* Same family, but the page writes the fill inline. */
html[data-theme="dark"] .st-badge[style*="background:#fee2e2"],
html[data-theme="dark"] .sc-icon[style*="background:#fee2e2"],
html[data-theme="dark"] .btn[style*="background:#fff5f5"],
html[data-theme="dark"] button[name="cancel_reservation"],
html[data-theme="dark"] #profileRequiredModal .modal-body > div[style*="background:#fee2e2"],
html[data-theme="dark"] #verifyRequiredModal .modal-body > div[style*="background:#fee2e2"] {
    border-color: #5b2530 !important;
    background: #2a1518 !important;
    color: #fca5a5 !important;
}

/* Amber — pending counters, reserved chips, warning tags */
html[data-theme="dark"] .registration-review-count,
html[data-theme="dark"] .plan-pro-tag {
    border-color: #4a3b12;
    background: #2a2310;
    color: #fcd34d;
}

html[data-theme="dark"] .sc-header span[style*="background:#fef3c7"],
html[data-theme="dark"] .folder-count span[style*="background:#fef3c7"],
html[data-theme="dark"] .so-icon[style*="background:#fef3c7"],
html[data-theme="dark"] .qb-icon[style*="background:#fef3c7"],
html[data-theme="dark"] body.tenant-console span[style*="background:#fef9c3"],
html[data-theme="dark"] #verifyRequiredModal .modal-body > div[style*="background:#fef3c7"] {
    border-color: #4a3b12 !important;
    background: #2a2310 !important;
    color: #fcd34d !important;
}

/* Blue — landlord role, basic plan, ID link, occupied chip, info icons */
html[data-theme="dark"] .role-badge.landlord,
html[data-theme="dark"] .btn-vacate,
html[data-theme="dark"] .plan-pill.plan-basic,
html[data-theme="dark"] .registration-id-box .id-review-link,
html[data-theme="dark"] #gcash-section .gc-stat.total .gc-stat-icon {
    border-color: #1e3f6b;
    background: #132c4e;
    color: #93c5fd;
}

html[data-theme="dark"] .folder-count span[style*="background:#dbeafe"],
html[data-theme="dark"] .so-icon[style*="background:#dbeafe"],
html[data-theme="dark"] .sc-icon[style*="background:#dbeafe"] {
    border-color: #1e3f6b !important;
    background: #132c4e !important;
    color: #93c5fd !important;
}

/* Green — tenant role, approved totals */
html[data-theme="dark"] .role-badge.tenant,
html[data-theme="dark"] #gcash-section .gc-stat.approved .gc-stat-icon {
    border-color: #1f5133;
    background: #0d2a1d;
    color: #86efac;
}

/* Purple — premium plan */
html[data-theme="dark"] .plan-pill.plan-premium {
    border-color: #3b2a5c;
    background: #241a3a;
    color: #c4b5fd;
}

/* Orange — registration review marker */
html[data-theme="dark"] .registration-review-icon {
    background: #2a1a10;
    color: #fdba74;
}

/* Small KPI icon squares take their fill from an inline custom property. */
html[data-theme="dark"] .kpi-card[style*="--icon-bg:#fef3c7"] .kpi-icon { background: #2a2310; color: #fcd34d; }
html[data-theme="dark"] .kpi-card[style*="--icon-bg:#fee2e2"] .kpi-icon { background: #2a1518; color: #fca5a5; }
html[data-theme="dark"] .kpi-card[style*="--icon-bg:#dbeafe"] .kpi-icon { background: #132c4e; color: #93c5fd; }
html[data-theme="dark"] .kpi-card[style*="--icon-bg:#dcfce7"] .kpi-icon { background: #0d2a1d; color: #86efac; }
html[data-theme="dark"] .kpi-card[style*="--icon-bg:#e0e7ff"] .kpi-icon { background: #241a3a; color: #c4b5fd; }

/* ── ADMIN USER ROWS (soft avatars, status pills, meter tracks) ────────── */

html[data-theme="dark"] .ac-avatar,
html[data-theme="dark"] .ac-avatar.admin {
    background: #2a1518;
    color: #fca5a5;
    background-image: none;
}

html[data-theme="dark"] .ac-avatar.landlord {
    background: #132c4e;
    color: #93c5fd;
    background-image: none;
}

html[data-theme="dark"] .ac-avatar.tenant {
    background: #0d2a1d;
    color: #86efac;
    background-image: none;
}

html[data-theme="dark"] .account-status.active,
html[data-theme="dark"] .sub-status.active {
    border-color: #1f5133;
    background: #0d2a1d;
    color: #86efac;
}

html[data-theme="dark"] .account-status.pending,
html[data-theme="dark"] .sub-status.unpaid {
    border-color: #4a3b12;
    background: #2a2310;
    color: #fcd34d;
}

html[data-theme="dark"] .account-status.rejected,
html[data-theme="dark"] .sub-status.expired,
html[data-theme="dark"] .sub-status.cancelled {
    border-color: #5b2530;
    background: #2a1518;
    color: #fca5a5;
}

html[data-theme="dark"] .rsb-bar { background: #2f3640; }

html[data-theme="dark"] .users-card .form-select {
    border-color: var(--border) !important;
    background-color: #262b33;
    color: #cfd6e0;
}

html[data-theme="dark"] #gcash-section .gc-stat.pending .gc-stat-icon {
    background: #2a2310;
    color: #fcd34d;
}

html[data-theme="dark"] #gcash-section .gc-stat.rejected .gc-stat-icon {
    background: #2a1518;
    color: #fca5a5;
}

/* The public landlord-profile modal's approved chip. */
html[data-theme="dark"] .lp-verified {
    background: #132c4e;
    color: #93c5fd;
}

/* Hover states that flashed a light surface. */
html[data-theme="dark"] .settings-tab:hover {
    border-bottom-color: #dc2626;
    background: #2a1518;
    color: #fca5a5;
}

html[data-theme="dark"] .room-context-close:hover,
html[data-theme="dark"] #pricingPaymentModal .pp-qr-lightbox-close:hover,
html[data-theme="dark"] #pricingPaymentModal .pp-qr-lightbox-close:focus-visible {
    background: #2a1518;
    color: #fca5a5;
}

/* Room-status badges in reports and inventory tables. */
html[data-theme="dark"] .badge-available {
    border-color: #1f5133 !important;
    background: #0d2a1d !important;
    color: #86efac !important;
}

html[data-theme="dark"] .badge-occupied {
    border-color: #5b2530 !important;
    background: #2a1518 !important;
    color: #fca5a5 !important;
}

html[data-theme="dark"] .badge-reserved {
    border-color: #4a3b12 !important;
    background: #2a2310 !important;
    color: #fcd34d !important;
}

html[data-theme="dark"] .badge-maintenance {
    border-color: #39414c !important;
    background: #262b33 !important;
    color: #b9c2cf !important;
}

/* Printing always reverts to the light palette, whatever is on screen. */
@media print {
    html[data-theme="dark"] {
        --ink: #0a0f1e;
        --ink-2: #1e2640;
        --ink-m: #5a6481;
        --ink-f: #8e98b0;
        --ink-xf: #c4cad8;
        --bg: #ffffff;
        --bg-2: #eef1f7;
        --surface: #ffffff;
        --border: #e4e8f0;
        --border-2: #d0d6e8;
        --a-line: #e5e9f2;
        --a-muted: #69748c;
        --a-faint: #98a1b5;
        --a-soft: #f6f8fc;
        --a-ink: #181b20;
    }

    html[data-theme="dark"] body {
        background: #fff !important;
        color: #0a0f1e !important;
    }

    html[data-theme="dark"] .dash-topbar {
        background: #fff !important;
        border-bottom-color: #e5e9f2 !important;
    }

    .theme-switch,
    .auth-theme { display: none !important; }
}