/*
 * varoom-dark-theme.css — Global dark-mode surface system.
 *
 * DESIGN: X "Lights Out" — genuine black canvas (#000000) with crisp white
 * text, subtle visible dividers, and floating UI as the only raised surface.
 * Grey backgrounds must not dominate. VaRoom red is minimal, reserved for
 * brand elements and important states only.
 *
 * This file is the SINGLE SOURCE OF TRUTH for all dark-mode surface tokens.
 * Every legacy HTML page inherits from this; per-page dark overrides must not
 * redefine backgrounds to warm browns or near-blacks.
 */

/* ================================================================
   GLOBAL DARK TOKENS — html[data-theme="dark"]
   ================================================================ */
[data-theme="dark"] {
  /* ── Core surfaces ────────────────────────────────────────────── */
  --paper:           #000000;          /* continuous page canvas           */
  --white:           #000000;          /* alias used by legacy pages        */
  --surface:         #000000;
  --surface-elevated: #16181c;         /* floating UI only: menus, modals   */
  --input-bg:        #000000;
  --card-border:     rgba(255,255,255,.12);

  /* Legacy dashboard aliases */
  --shell-bg:    #000000;
  --sidebar-bg:  #000000;
  --main-bg:     #000000;
  --rail-bg:     #000000;
  --card-bg:     #000000;

  /* ── Text ─────────────────────────────────────────────────────── */
  --ink:   #E7E9EA;                    /* primary text                      */
  --muted: #71767b;                    /* secondary / supporting text       */
  --nav-active-bg:   rgba(255, 255, 255, 0.14);
  --nav-badge-bg:    #2f3336;
  --nav-badge-color: #E7E9EA;

  /* ── Structural ───────────────────────────────────────────────── */
  --glass-bg:     #000000;
  --glass-border: rgba(255,255,255,.12);
  --line:         rgba(255,255,255,.12);
  --line-soft:    rgba(255,255,255,.07);
  --glass-shadow: none;
  --glow-a:       transparent;
  --glow-b:       transparent;

  /* ── Design-system colour tokens ─────────────────────────────── */
  --color-bg:           #000000;
  --color-surface:      #000000;
  --color-surface-muted:#000000;
  --color-text:         #E7E9EA;
  --color-text-muted:   #71767b;
  --color-text-inverse: #000000;
  --color-border:       rgba(255,255,255,.12);
  --color-border-strong:rgba(255,255,255,.22);
  --color-cta-primary:  #E7E9EA;
  --color-cta-primary-hover: #d5d8da;
  --color-cta-secondary-border: rgba(255,255,255,.22);
  --color-danger:  #ff7186;
  --color-success: #4cc38a;
  --color-warning: #e0a23b;

  /* ── Shadows ──────────────────────────────────────────────────── */
  --shadow-sm: 0 1px 2px rgba(0,0,0,.5);
  --shadow-md: 0 8px 24px rgba(0,0,0,.7);
  --shadow-lg: 0 24px 56px rgba(0,0,0,.85);
}

/* ================================================================
   BODY / APP SHELL
   ================================================================ */
[data-theme="dark"] body {
  background: #000000 !important;
  color: var(--ink);
}

[data-theme="dark"] html,
[data-theme="dark"] #__next {
  background: #000000;
}

[data-theme="dark"] .app-shell,
[data-theme="dark"] .main-col,
[data-theme="dark"] .topbar,
[data-theme="dark"] .feed-area,
[data-theme="dark"] .dash-main,
[data-theme="dark"] .content-row {
  background: #000000 !important;
}

[data-theme="dark"] .right-rail,
[data-theme="dark"] .host-rail {
  background: #000000 !important;
}

/* ================================================================
   SIDEBAR
   ================================================================ */
[data-theme="dark"] .sidebar {
  background: #000000 !important;
  border-color: var(--line) !important;
}

[data-theme="dark"] .col-divider {
  background-color: var(--line) !important;
}

/* ================================================================
   CARDS & PANELS
   Feed cards: borderless with a subtle bottom separator.
   ================================================================ */
[data-theme="dark"] .card,
[data-theme="dark"] .stats-card,
[data-theme="dark"] .listings-glance-card,
[data-theme="dark"] .mobile-widget-card {
  background: transparent !important;
  border: 0 !important;
  border-bottom: 1px solid var(--line-soft) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

[data-theme="dark"] .rail-card,
[data-theme="dark"] .notif-panel-card,
[data-theme="dark"] .property-news-card,
[data-theme="dark"] .varoom-updates-card {
  background: transparent !important;
  border-color: var(--line) !important;
  box-shadow: none !important;
}

[data-theme="dark"] .glance-tile {
  background: transparent !important;
  border-color: var(--line-soft) !important;
  box-shadow: none !important;
}

/* ================================================================
   SEARCH
   ================================================================ */
[data-theme="dark"] .search-wrap {
  background: #000000 !important;
  border: 1px solid rgba(255, 255, 255, 0.22) !important;
  outline: none !important;
  box-shadow: none !important;
}

[data-theme="dark"] .search-wrap:focus-within {
  border-color: rgba(255, 255, 255, 0.45) !important;
  outline: none !important;
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.12) !important;
}

[data-theme="dark"] .search-wrap input,
[data-theme="dark"] .search input,
[data-theme="dark"] .settings-search input {
  background: transparent !important;
  background-color: transparent !important;
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  color: var(--ink) !important;
}

/* ================================================================
   INPUTS
   ================================================================ */
[data-theme="dark"] input,
[data-theme="dark"] textarea,
[data-theme="dark"] select {
  background-color: #000000;
  color: var(--ink);
  border-color: var(--line);
}

[data-theme="dark"] input::placeholder,
[data-theme="dark"] textarea::placeholder {
  color: var(--muted);
  opacity: 1;
}

/* ================================================================
   SECONDARY TEXT
   ================================================================ */
[data-theme="dark"] .search-btn,
[data-theme="dark"] .icon-btn,
[data-theme="dark"] .nav-label,
[data-theme="dark"] .greeting-sub,
[data-theme="dark"] .stat-label,
[data-theme="dark"] .glance-sub,
[data-theme="dark"] .update-body {
  color: var(--muted);
}

/* ================================================================
   NAVIGATION — HOVER / ACTIVE
   ================================================================ */
[data-theme="dark"] .nav-item:hover,
[data-theme="dark"] button.nav-item.soon-active:hover,
[data-theme="dark"] .property-news-bar-refresh:hover {
  background: rgba(255,255,255,.06) !important;
  color: var(--ink);
}

[data-theme="dark"] .nav-item.active,
[data-theme="dark"] .sidebar .nav-item.active,
[data-theme="dark"] .host-app-layout .nav-item.active,
[data-theme="dark"] .client-app-layout .nav-item.active {
  background: var(--nav-active-bg, var(--control-active, rgba(255, 255, 255, 0.14))) !important;
  color: var(--ink, #E7E9EA) !important;
  border-color: transparent !important;
  box-shadow: none !important;
}

[data-theme="dark"] .nav-item.active svg,
[data-theme="dark"] .nav-item.active .nav-icon {
  color: var(--ink, #E7E9EA) !important;
  stroke: currentColor;
}

[data-theme="dark"] .nav-item.active .beta-pill,
[data-theme="dark"] .nav-item.active .notif-nav-badge {
  background: var(--nav-badge-bg, #2f3336) !important;
  color: var(--nav-badge-color, #E7E9EA) !important;
  border-color: transparent !important;
}

/* Active tabs keep the red fill */
[data-theme="dark"] .tab.active,
[data-theme="dark"] .tab[aria-selected="true"] {
  background: var(--red, #C41E3A) !important;
  color: #ffffff !important;
  border-color: transparent !important;
}

/* Notifications page text */
[data-theme="dark"] .main,
[data-theme="dark"] .main-inner {
  color: var(--ink);
}

[data-theme="dark"] .page-header p,
[data-theme="dark"] .section-title,
[data-theme="dark"] .notif-desc,
[data-theme="dark"] .notif-time,
[data-theme="dark"] .toolbar-search svg {
  color: var(--muted);
}

[data-theme="dark"] .icon-btn,
[data-theme="dark"] .toolbar-search,
[data-theme="dark"] .card-list,
[data-theme="dark"] .notif-card,
[data-theme="dark"] .menu-toggle {
  background: transparent !important;
  border-color: var(--line) !important;
}

[data-theme="dark"] .notif-card {
  border-bottom-color: var(--line-soft) !important;
}

[data-theme="dark"] .notif-card:hover,
[data-theme="dark"] .icon-btn:hover {
  background: rgba(255,255,255,.06) !important;
}

[data-theme="dark"] .toolbar-search input {
  color: var(--ink);
}

[data-theme="dark"] .notif-icon.tint-red,
[data-theme="dark"] .tag.booking,
[data-theme="dark"] .tag.alert {
  background: rgba(196,30,58,.18);
  color: #f08b9a;
}

[data-theme="dark"] .notif-icon.tint-green,
[data-theme="dark"] .tag.payment {
  background: rgba(30,107,60,.18);
  color: #7cc99a;
}

[data-theme="dark"] .notif-icon.tint-amber,
[data-theme="dark"] .tag.reminder {
  background: rgba(180,83,9,.18);
  color: #f2bd76;
}

[data-theme="dark"] .notif-icon.tint-black,
[data-theme="dark"] .tag.review {
  background: rgba(255,255,255,.08);
  color: var(--ink);
}

[data-theme="dark"] .action-btn.primary {
  background: var(--red, #C41E3A);
  border-color: var(--red, #C41E3A);
  color: #ffffff;
}

[data-theme="dark"] .notif-icon.tint-red,
[data-theme="dark"] .notif-icon.tint-green,
[data-theme="dark"] .notif-icon.tint-amber,
[data-theme="dark"] .notif-icon.tint-black {
  background: rgba(255,255,255,.06) !important;
  color: var(--ink) !important;
}

[data-theme="dark"] .tag.booking {
  background: rgba(255,255,255,.08) !important;
  border: 1px solid var(--line-soft);
  color: var(--ink) !important;
}

[data-theme="dark"] .icon-btn,
[data-theme="dark"] .icon-btn.confirm svg {
  color: var(--ink) !important;
}

[data-theme="dark"] .icon-btn.confirm.is-complete,
[data-theme="dark"] .icon-btn.confirm.is-complete svg {
  color: #5cd68a !important;
}

[data-theme="dark"] .icon-btn.confirm.is-complete:hover,
[data-theme="dark"] .icon-btn.confirm.is-complete:hover svg {
  color: #7ce7a3 !important;
}

/* ================================================================
   TABS, BUTTONS, ACTION ROW
   ================================================================ */
[data-theme="dark"] .tab,
[data-theme="dark"] .secondary-btn,
[data-theme="dark"] .action-btn,
[data-theme="dark"] .report-cancel-btn {
  background: transparent !important;
  border: 1px solid var(--line) !important;
  color: var(--ink) !important;
}

[data-theme="dark"] .tab:hover,
[data-theme="dark"] .action-btn:hover {
  background: rgba(255,255,255,.06) !important;
}

/* Primary buttons — red fill */
[data-theme="dark"] .list-space-btn {
  border-color: rgba(196,30,58,.55);
  color: var(--red, #C41E3A);
}
[data-theme="dark"] .list-space-btn:hover {
  background: rgba(196,30,58,.12);
}

[data-theme="dark"] .list-btn-top,
[data-theme="dark"] .list-btn-primary,
[data-theme="dark"] .report-submit-btn {
  background: var(--red, #C41E3A);
  color: #ffffff;
}

/* ================================================================
   PILLS & BADGES
   ================================================================ */
[data-theme="dark"] .beta-pill {
  background: rgba(196,30,58,.15) !important;
  border: 1px solid rgba(196,30,58,.25);
  color: #e8919e;
}

[data-theme="dark"] .soon-pill {
  background: rgba(255,255,255,.08) !important;
  border: 1px solid var(--line);
  color: var(--muted);
}

[data-theme="dark"] .badge-soon {
  background: rgba(255,255,255,.08) !important;
  border: 1px solid var(--line);
  color: var(--muted);
}

[data-theme="dark"] .badge-verified {
  background: rgba(30,107,60,.18) !important;
  color: #7cc99a;
}

[data-theme="dark"] .badge-host {
  background: rgba(26,78,143,.18) !important;
  color: #7eaee0;
}

/* ================================================================
   GLANCE TILES
   ================================================================ */
[data-theme="dark"] .listings-glance-card .glance-tile.add-tile {
  border-color: var(--line) !important;
  background: transparent !important;
}

[data-theme="dark"] .host-rail .listings-glance-card,
[data-theme="dark"] .host-rail .notif-panel-card,
[data-theme="dark"] .host-rail .property-news-card,
[data-theme="dark"] .host-rail .varoom-updates-card {
  border: 0 !important;
}

[data-theme="dark"] .host-rail .glance-tile,
[data-theme="dark"] .host-rail .glance-tile.add-tile {
  border: 0 !important;
}

[data-theme="dark"] .glance-tile {
  border-left: 0 !important;
  border-right: 0 !important;
}

/* ================================================================
   VERIFY BOX / SIDEBAR NOTE
   ================================================================ */
[data-theme="dark"] .sidebar-note,
[data-theme="dark"] .verify-box.not-verified {
  background: rgba(196,30,58,.12) !important;
  border: 1px solid rgba(196,30,58,.22);
  color: #e8919e;
}

[data-theme="dark"] .verify-box.is-verified {
  background: rgba(30,107,60,.14) !important;
  border: 1px solid rgba(30,107,60,.22);
  color: #7cc99a;
}

/* ================================================================
   MODALS & DROPDOWNS — Floating surfaces get a raised tone
   ================================================================ */
[data-theme="dark"] .modal-overlay {
  background: rgba(0,0,0,.75);
}

[data-theme="dark"] .modal-card,
[data-theme="dark"] .report-modal {
  background: var(--surface-elevated) !important;
  border: 1px solid var(--line);
  color: var(--ink);
}

[data-theme="dark"] .card-menu-dropdown {
  background: var(--surface-elevated) !important;
  border-color: var(--line) !important;
  box-shadow: 0 12px 30px -10px rgba(0,0,0,.8) !important;
}

[data-theme="dark"] .card-menu-item {
  color: var(--ink);
}

[data-theme="dark"] .card-menu-item:hover {
  background: rgba(255,255,255,.06);
}

[data-theme="dark"] .card-menu-item.destructive {
  color: #ff7186;
  border-top-color: var(--line-soft);
}

[data-theme="dark"] .card-menu-section {
  color: var(--muted);
}

/* ================================================================
   TOAST — floating, gets raised surface
   ================================================================ */
[data-theme="dark"] .toast {
  background: var(--surface-elevated) !important;
  color: var(--ink) !important;
  border: 1px solid var(--line);
}

/* ================================================================
   EMPTY STATES
   ================================================================ */
[data-theme="dark"] .empty-state-card {
  border-color: var(--line) !important;
  background: transparent !important;
}

[data-theme="dark"] .property-news-empty-card,
[data-theme="dark"] .client-property-news-empty-card {
  background: transparent !important;
}

[data-theme="dark"] .attention-icon {
  background: rgba(196,30,58,.12);
}

[data-theme="dark"] .attention-clear .attention-icon {
  background: rgba(30,107,60,.16);
  color: #7cc99a;
}

/* ================================================================
   UPLOAD BUTTON
   ================================================================ */
[data-theme="dark"] .host-video-upload-btn {
  background: rgba(196,30,58,.15) !important;
  color: #e8919e;
}

/* ================================================================
   AWAY MODE TOGGLE
   ================================================================ */
[data-theme="dark"] .away-toggle-wrap {
  background: rgba(196,30,58,.10);
  border-color: rgba(196,30,58,.20);
}

/* ================================================================
   MEDIA DOTS (carousel indicators)
   ================================================================ */
[data-theme="dark"] .media-dot {
  background: rgba(255,255,255,.25);
}

[data-theme="dark"] .media-dot.active {
  background: var(--red, #C41E3A);
}

/* ================================================================
   SKELETON LOADING
   ================================================================ */
[data-theme="dark"] .skel {
  background: rgba(255,255,255,.07) !important;
}

[data-theme="dark"] .property-news-skeleton {
  background: linear-gradient(90deg, rgba(255,255,255,.04), rgba(255,255,255,.09), rgba(255,255,255,.04)) !important;
  background-size: 200% 100%;
}

/* ================================================================
   BOTTOM BAR (mobile)
   ================================================================ */
[data-theme="dark"] .bottom-bar {
  background: #000000 !important;
  border-color: var(--line) !important;
  box-shadow: 0 -4px 20px rgba(0,0,0,.6) !important;
}

[data-theme="dark"] .bottom-bar-item {
  color: var(--muted);
}

[data-theme="dark"] .bottom-bar-item.active {
  background: var(--red, #C41E3A) !important;
  color: #ffffff;
}

/* ================================================================
   LIGHTBOX
   ================================================================ */
[data-theme="dark"] .lightbox-overlay {
  background: rgba(0,0,0,.96);
}

/* ================================================================
   PROFILE PAGES (shared layouts)
   ================================================================ */
[data-theme="dark"] .profile-desktop-shell,
[data-theme="dark"] .skeleton-shell,
[data-theme="dark"] .profile-sidebar,
[data-theme="dark"] .profile-main,
[data-theme="dark"] .profile-rail,
[data-theme="dark"] .skeleton-sidebar,
[data-theme="dark"] .skeleton-main,
[data-theme="dark"] .skeleton-rail {
  background: #000000 !important;
  border-color: var(--line) !important;
}

[data-theme="dark"] .profile-card,
[data-theme="dark"] .profile-section,
[data-theme="dark"] .profile-panel,
[data-theme="dark"] .skeleton-card,
[data-theme="dark"] .skel-rail-card {
  background: transparent !important;
  border-color: var(--line-soft) !important;
  box-shadow: none !important;
}

[data-theme="dark"] .page,
[data-theme="dark"] .profile-wrap,
[data-theme="dark"] .signup-aside,
[data-theme="dark"] main {
  background: #000000 !important;
}

[data-theme="dark"] .signup-aside {
  border-color: var(--line) !important;
}

/* ================================================================
   LISTING PAGES
   ================================================================ */
[data-theme="dark"] .listing-card,
[data-theme="dark"] .listing-menu ul {
  background: transparent !important;
  border-color: var(--line-soft) !important;
  box-shadow: none !important;
}

[data-theme="dark"] .aside-divider::before,
[data-theme="dark"] .aside-divider::after,
[data-theme="dark"] .cta-footer {
  border-color: var(--line-soft) !important;
  background-color: transparent;
}

/* ================================================================
   SUPPORT PAGES
   ================================================================ */
[data-theme="dark"] .support-page,
[data-theme="dark"] body.support-page-body,
[data-theme="dark"] .support-page main,
[data-theme="dark"] .support-page .topbar {
  background: #000000 !important;
}

[data-theme="dark"] .support-page .topbar {
  border-bottom-color: var(--line-soft) !important;
}

[data-theme="dark"] .support-page .search {
  background: rgba(255,255,255,.05) !important;
  border-color: var(--line) !important;
}

[data-theme="dark"] .support-page .action,
[data-theme="dark"] .support-page .write-card,
[data-theme="dark"] .support-page .article {
  background: rgba(255,255,255,.03) !important;
  border-color: var(--line-soft) !important;
  box-shadow: none !important;
}

[data-theme="dark"] .support-page .action-icon,
[data-theme="dark"] .support-page .article-icon,
[data-theme="dark"] .support-page .search button {
  background: rgba(255,255,255,.06) !important;
  border: 1px solid var(--line-soft);
}

[data-theme="dark"] .support-page footer {
  border-top-color: var(--line-soft) !important;
}

/* ================================================================
   MOBILE RESPONSIVE
   ================================================================ */
@media (max-width: 860px) {
  [data-theme="dark"] .topbar {
    background: rgba(0,0,0,.92) !important;
    backdrop-filter: blur(18px) saturate(140%);
    -webkit-backdrop-filter: blur(18px) saturate(140%);
  }

  [data-theme="dark"] .sidebar {
    box-shadow: 0 0 40px rgba(0,0,0,.7) !important;
  }
}

@media (max-width: 860px) {
  [data-theme="dark"] .topbar { backdrop-filter: none; -webkit-backdrop-filter: none; }
  [data-theme="dark"] .sidebar { box-shadow: none !important; }
}

@media (max-width: 800px) {
  [data-theme="dark"] .support-page .topbar,
  [data-theme="dark"] body.support-page-body,
  [data-theme="dark"] .support-page main,
  [data-theme="dark"] .support-page footer {
    background: #000000 !important;
  }

  [data-theme="dark"] .support-page .search,
  [data-theme="dark"] .support-page .action,
  [data-theme="dark"] .support-page .write-card,
  [data-theme="dark"] .support-page .article {
    background: rgba(255,255,255,.03) !important;
    border-color: var(--line-soft) !important;
  }
}

@media (max-width: 1180px) {
  [data-theme="dark"] .sidebar {
    border-right: 0 !important;
  }

  [data-theme="dark"] .col-divider {
    display: none !important;
  }
}

/* ================================================================
   CONTINUOUS-CANVAS SYSTEM
   All structural shells share the same black canvas.
   Structure comes from hairline dividers and whitespace—not from
   stacked darker rectangles.
   ================================================================ */
[data-theme="dark"] .sidebar,
[data-theme="dark"] .topbar,
[data-theme="dark"] .host-rail,
[data-theme="dark"] .right-rail,
[data-theme="dark"] .dash-main,
[data-theme="dark"] .feed-area,
[data-theme="dark"] .main,
[data-theme="dark"] .main-inner,
[data-theme="dark"] .content,
[data-theme="dark"] .content-area,
[data-theme="dark"] .page-content {
  background: #000000 !important;
  box-shadow: none !important;
}

/* Section wrappers stay flat; their bottom border carries the grouping. */
[data-theme="dark"] .stats-card,
[data-theme="dark"] .listings-glance-card,
[data-theme="dark"] .rail-card,
[data-theme="dark"] .notif-panel-card,
[data-theme="dark"] .property-news-card,
[data-theme="dark"] .varoom-updates-card,
[data-theme="dark"] .mobile-widget-card,
[data-theme="dark"] .profile-section,
[data-theme="dark"] .profile-panel,
[data-theme="dark"] .settings-section,
[data-theme="dark"] .settings-group,
[data-theme="dark"] .booking-section,
[data-theme="dark"] .analytics-section {
  background: transparent !important;
  border-width: 0 0 1px !important;
  border-color: var(--line-soft) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

[data-theme="dark"] .stats-card { padding-left: 0 !important; padding-right: 0 !important; }
[data-theme="dark"] .stats-row > .stat + .stat { border-left: 1px solid var(--line-soft); padding-left: 1rem; }
[data-theme="dark"] .host-rail > *,
[data-theme="dark"] .right-rail > * { margin-bottom: 0 !important; }

/* Filters are controls, not a separate band of surface colour. */
[data-theme="dark"] .tabs,
[data-theme="dark"] .filter-bar,
[data-theme="dark"] .category-bar,
[data-theme="dark"] .toolbar,
[data-theme="dark"] .card-list {
  background: transparent !important;
  box-shadow: none !important;
}

[data-theme="dark"] .tab,
[data-theme="dark"] .secondary-btn,
[data-theme="dark"] .action-btn,
[data-theme="dark"] .report-cancel-btn,
[data-theme="dark"] .search-wrap,
[data-theme="dark"] .toolbar-search {
  background: transparent !important;
  border-color: var(--line) !important;
  box-shadow: none !important;
}

[data-theme="dark"] .tab:hover,
[data-theme="dark"] .secondary-btn:hover,
[data-theme="dark"] .action-btn:hover,
[data-theme="dark"] .nav-item:hover {
  background: rgba(255,255,255,.055) !important;
}

/* Objects with quiet outlines — no nested slabs. */
[data-theme="dark"] .listing-card,
[data-theme="dark"] .notif-card,
[data-theme="dark"] .profile-card,
[data-theme="dark"] .empty-state-card,
[data-theme="dark"] .glance-tile {
  background: transparent !important;
  border-color: var(--line-soft) !important;
  box-shadow: none !important;
}

/* Floating UI is the only place that receives a raised surface. */
[data-theme="dark"] .modal-card,
[data-theme="dark"] .report-modal,
[data-theme="dark"] .card-menu-dropdown,
[data-theme="dark"] .listing-menu ul,
[data-theme="dark"] .toast {
  background: var(--surface-elevated) !important;
  border-color: var(--line) !important;
}

/* ================================================================
   CHAT — one continuous black workspace
   ================================================================ */
[data-theme="dark"] .chat-shell,
[data-theme="dark"] .chat-main,
[data-theme="dark"] .contacts-panel,
[data-theme="dark"] .conversation-panel,
[data-theme="dark"] .chat-list,
[data-theme="dark"] .chat-header,
[data-theme="dark"] .chat-input-area {
  background: #000000 !important;
  border-color: var(--line-soft) !important;
  box-shadow: none !important;
}
[data-theme="dark"] .contact-item { background: transparent !important; border-bottom-color: var(--line-soft) !important; }
[data-theme="dark"] .msg-row.in .bubble { background: var(--surface-elevated) !important; }

/* ================================================================
   AUTHENTICATION & FORMS (login.html, signup, forgot-password)
   ================================================================ */
[data-theme="dark"] .form-panel {
  background: #000000 !important;
  color: var(--ink) !important;
}

[data-theme="dark"] .form-title {
  color: #FFFFFF !important;
}

[data-theme="dark"] .btn-google {
  background: #000000 !important;
  border-color: var(--line) !important;
  color: #FFFFFF !important;
}

[data-theme="dark"] .btn-google:hover {
  background: rgba(255, 255, 255, 0.08) !important;
}

[data-theme="dark"] .divider {
  color: var(--muted) !important;
}

[data-theme="dark"] .field label {
  color: var(--muted) !important;
}

[data-theme="dark"] .field input {
  background: #000000 !important;
  border-color: var(--line) !important;
  color: #FFFFFF !important;
}

[data-theme="dark"] .field input:focus {
  border-color: #FFFFFF !important;
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.15) !important;
}

[data-theme="dark"] .btn-submit {
  background: #EFF3F4 !important;
  color: #0F1419 !important;
}

[data-theme="dark"] .btn-submit:hover {
  background: #D7DBDC !important;
}

[data-theme="dark"] .toggle-pw {
  color: var(--muted) !important;
}

[data-theme="dark"] .toggle-pw:hover {
  color: #FFFFFF !important;
}

/* ================================================================
   TRANSACTIONS (transactions.html)
   ================================================================ */
[data-theme="dark"] .tx-card {
  background: transparent !important;
  border-color: var(--line) !important;
  color: var(--ink) !important;
}

[data-theme="dark"] .tx-bottom {
  border-top-color: var(--line-soft) !important;
  color: var(--muted) !important;
}

[data-theme="dark"] .tx-icon {
  background: var(--surface-elevated) !important;
  color: var(--red) !important;
}

/* ================================================================
   MAP & LOCATION (map.html)
   ================================================================ */
[data-theme="dark"] .sheet {
  background: #000000 !important;
  border-top: 1px solid var(--line) !important;
}

[data-theme="dark"] .sheet-status {
  background: var(--surface-elevated) !important;
  color: var(--ink) !important;
}

[data-theme="dark"] .sheet-status.unlocked {
  background: rgba(30, 107, 60, .2) !important;
  color: #7cc99a !important;
}

[data-theme="dark"] .btn {
  background: transparent !important;
  border-color: var(--line) !important;
  color: var(--ink) !important;
}

/* ================================================================
   BOOKINGS & APPROVALS (booking.html, booking-approved.html)
   ================================================================ */
[data-theme="dark"] .booking-card,
[data-theme="dark"] .booking-summary,
[data-theme="dark"] .booking-box {
  background: transparent !important;
  border-color: var(--line) !important;
}

[data-theme="dark"] .hero {
  border-color: var(--line-soft);
}

/* ================================================================
   BUTTON THEMING — Ensure high-contrast readable buttons
   ================================================================ */
.landing-cta-secondary,
html:not([data-theme="dark"]) .va-button-secondary,
html:not([data-theme="dark"]) .va-button[data-variant='secondary'] {
  color: #171717 !important;
}

[data-theme="dark"] .va-button-primary,
[data-theme="dark"] .va-button[data-variant='primary'] {
  background: #EFF3F4 !important;
  border-color: #EFF3F4 !important;
  color: #0F1419 !important;
}

[data-theme="dark"] .va-button-primary:hover,
[data-theme="dark"] .va-button[data-variant='primary']:hover {
  background: #D7DBDC !important;
  border-color: #D7DBDC !important;
  color: #0F1419 !important;
}

[data-theme="dark"] .va-button-secondary,
[data-theme="dark"] .va-button[data-variant='secondary'] {
  background: transparent !important;
  border-color: rgba(255, 255, 255, 0.22) !important;
  color: #E7E9EA !important;
}

[data-theme="dark"] .va-button-secondary:hover,
[data-theme="dark"] .va-button[data-variant='secondary']:hover {
  background: rgba(255, 255, 255, 0.08) !important;
  color: #FFFFFF !important;
}

@media (max-width: 860px) {
  [data-theme="dark"] .stats-row > .stat + .stat { padding-left: .75rem; }
}

/* ---------- In-App Add Account Modal Glassmorphism (Dark Mode) ---------- */
[data-theme="dark"] .add-account-overlay {
  background: rgba(0, 0, 0, 0.72) !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
}

[data-theme="dark"] .add-account-card {
  background: rgba(18, 18, 20, 0.88) !important;
  backdrop-filter: blur(24px) saturate(160%) !important;
  -webkit-backdrop-filter: blur(24px) saturate(160%) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  box-shadow: 0 24px 64px -12px rgba(0, 0, 0, 0.75), 0 0 0 1px rgba(255, 255, 255, 0.06) !important;
  color: #FFFFFF !important;
}

[data-theme="dark"] .add-account-sub {
  color: rgba(255, 255, 255, 0.65) !important;
}

[data-theme="dark"] .add-account-close-btn {
  color: #FFFFFF !important;
}

[data-theme="dark"] .add-account-close-btn:hover {
  background: rgba(255, 255, 255, 0.1) !important;
}

[data-theme="dark"] .add-account-google-btn {
  background: #FFFFFF !important;
  color: #0F1419 !important;
  border: none !important;
}

[data-theme="dark"] .add-account-google-btn:hover:not(:disabled) {
  background: #EAEAEA !important;
}

[data-theme="dark"] .add-account-divider {
  color: rgba(255, 255, 255, 0.45) !important;
}

[data-theme="dark"] .add-account-divider::before,
[data-theme="dark"] .add-account-divider::after {
  border-bottom: 1px solid rgba(255, 255, 255, 0.12) !important;
}

[data-theme="dark"] .add-account-input {
  border: 1px solid rgba(255, 255, 255, 0.16) !important;
  background: rgba(255, 255, 255, 0.04) !important;
  color: #FFFFFF !important;
}

[data-theme="dark"] .add-account-input::placeholder {
  color: rgba(255, 255, 255, 0.45) !important;
}

[data-theme="dark"] .add-account-input:focus {
  border-color: #FFFFFF !important;
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.12) !important;
  background: rgba(255, 255, 255, 0.07) !important;
}

[data-theme="dark"] .add-account-pw-toggle {
  color: rgba(255, 255, 255, 0.5) !important;
}

[data-theme="dark"] .add-account-pw-toggle:hover {
  color: #FFFFFF !important;
  background: rgba(255, 255, 255, 0.08) !important;
}

[data-theme="dark"] .add-account-submit-btn {
  background: #EFF3F4 !important;
  color: #0F1419 !important;
}

[data-theme="dark"] .add-account-submit-btn:hover:not(:disabled) {
  background: #D7DBDC !important;
}