﻿/* ============================================================
   StayVerse - Dark Mode Override Stylesheet (Navy/Gold 3D)
   ============================================================ */

.dark-mode {
  --clr-white: #0A1628;
  --clr-black: #000000;

  --clr-neutral-50: #0E1A30;
  --clr-neutral-100: #1A2A4A;
  --clr-neutral-200: #2A3A5A;
  --clr-neutral-300: #3A4A6A;
  --clr-neutral-400: #5A7A9A;
  --clr-neutral-500: #7A93B3;
  --clr-neutral-600: #9EB0CC;
  --clr-neutral-700: #C5D0E0;
  --clr-neutral-800: #E8EDF3;
  --clr-neutral-900: #F5F7FA;
  --clr-neutral-light: #0E1A30;
  --clr-neutral-dark: #F5F7FA;

  --clr-primary: #1A2A4A;
  --clr-primary-dark: #0A1628;
  --clr-primary-light: #2A4A6A;
  --clr-primary-50: #0E1A30;
  --clr-primary-100: #1A2A4A;
  --clr-primary-200: #2A3A5A;
  --clr-primary-300: #3A4A6A;
  --clr-primary-400: #5A7A9A;
  --clr-primary-500: #7A93B3;
  --clr-primary-600: #9EB0CC;
  --clr-primary-700: #C5D0E0;
  --clr-primary-800: #E8EDF3;
  --clr-primary-900: #F5F7FA;

  --clr-gold: #C9A23D;
  --clr-gold-light: #E8C96A;
  --clr-gold-dark: #A07D2A;
  --clr-gold-50: #1A1508;
  --clr-gold-100: #2A2008;

  --clr-secondary: #2A5A5A;
  --clr-secondary-light: #4A8A8A;
  --clr-secondary-dark: #1A3A3A;

  --clr-accent: #D4A843;
  --clr-accent-light: #E8C96A;
  --clr-accent-dark: #A07D2A;

  --body-bg: #050E1A;
  --body-color: #9EB0CC;

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.5);
  --shadow-lg: 0 10px 25px rgba(0, 0, 0, 0.6);
  --shadow-xl: 0 20px 50px rgba(0, 0, 0, 0.7);
  --shadow-3d-sm: 0 2px 8px rgba(0,0,0,0.4), 0 1px 2px rgba(0,0,0,0.3);
  --shadow-3d-md: 0 4px 16px rgba(0,0,0,0.5), 0 2px 4px rgba(0,0,0,0.3), 0 8px 32px rgba(201,162,61,0.04);
  --shadow-3d-lg: 0 8px 32px rgba(0,0,0,0.6), 0 4px 8px rgba(0,0,0,0.4), 0 16px 48px rgba(201,162,61,0.06);
  --shadow-3d-xl: 0 16px 48px rgba(0,0,0,0.7), 0 8px 16px rgba(0,0,0,0.5), 0 24px 64px rgba(201,162,61,0.08);
  --shadow-card: 0 6px 16px rgba(0, 0, 0, 0.5);
  --shadow-card-hover: 0 12px 28px rgba(0, 0, 0, 0.6);
}

.dark-mode body { background-color: var(--body-bg); color: var(--body-color); }
.dark-mode h1, .dark-mode h2, .dark-mode h3, .dark-mode h4, .dark-mode h5, .dark-mode h6 { color: var(--clr-primary-900); }
.dark-mode p { color: var(--clr-primary-400); }
.dark-mode a { color: var(--clr-gold); }
.dark-mode a:hover { color: var(--clr-gold-light); }

/* --- Navbar --- */
.dark-mode .navbar-3d { background: rgba(10,22,40,0.8) !important; border-bottom-color: rgba(201,162,61,0.04) !important; }
.dark-mode .navbar-3d.scrolled { background: rgba(10,22,40,0.92) !important; }

/* --- Cards --- */
.dark-mode .depth-card, .dark-mode .admin-card { background: var(--clr-neutral-50); border-color: rgba(201,162,61,0.06); }
.dark-mode .depth-card:hover { background: var(--clr-neutral-100); }
.dark-mode .card-3d-glow::before { opacity: 0.15; }

/* --- Property Cards --- */
.dark-mode .property-card-3d { background: var(--clr-primary-700); }

/* --- Stats --- */
.dark-mode .stat-card { background: var(--clr-neutral-50); }

/* --- Section Backgrounds --- */
.dark-mode .section-3d-light { background: var(--clr-neutral-50); }
.dark-mode .section-3d-white { background: var(--clr-neutral-50); }
.dark-mode .section-3d-dark { background: linear-gradient(180deg, #050E1A, #0A1628); }

/* --- Tables --- */
.dark-mode .table-3d td { color: var(--clr-primary-200); border-bottom-color: rgba(201,162,61,0.06); }
.dark-mode .table-3d tbody tr:hover { background: rgba(201,162,61,0.06); }

/* --- Dropdowns --- */
.dark-mode .dropdown-menu { background: var(--clr-neutral-50); border-color: rgba(201,162,61,0.08); }
.dark-mode .dropdown-item { color: var(--clr-primary-400); }
.dark-mode .dropdown-item:hover { background: rgba(201,162,61,0.08); color: var(--clr-gold-light); }

/* --- Forms --- */
.dark-mode .form-control, .dark-mode .form-select { background: var(--clr-neutral-100); border-color: rgba(201,162,61,0.1); color: var(--clr-primary-700); }
.dark-mode .form-control:focus, .dark-mode .form-select:focus { border-color: var(--clr-gold); background: var(--clr-neutral-50); }
.dark-mode .form-control::placeholder { color: var(--clr-primary-400); }

/* --- Buttons --- */
.dark-mode .btn-3d-outline { color: var(--clr-gold); border-color: rgba(201,162,61,0.3); }
.dark-mode .btn-3d-outline:hover { background: rgba(201,162,61,0.1); border-color: var(--clr-gold); }

/* --- Modals --- */
.dark-mode .modal-content { background: var(--clr-neutral-50); border-color: rgba(201,162,61,0.08); }
.dark-mode .modal-header, .dark-mode .modal-footer { border-color: rgba(201,162,61,0.06); }

/* --- Alerts --- */
.dark-mode .alert-success { background: rgba(16,185,129,0.1); color: #34D399; border-color: rgba(16,185,129,0.15); }
.dark-mode .alert-danger { background: rgba(239,68,68,0.1); color: #F87171; border-color: rgba(239,68,68,0.15); }
.dark-mode .alert-warning { background: rgba(201,162,61,0.1); color: var(--clr-gold-light); border-color: rgba(201,162,61,0.15); }
.dark-mode .alert-info { background: rgba(14,165,233,0.1); color: #38BDF8; border-color: rgba(14,165,233,0.15); }

/* --- Accordion --- */
.dark-mode .accordion-item { border-color: rgba(201,162,61,0.06); }
.dark-mode .accordion-button { background: var(--clr-neutral-50); color: var(--clr-primary-700); }
.dark-mode .accordion-button:not(.collapsed) { background: rgba(201,162,61,0.06); color: var(--clr-gold-light); }

/* --- Pagination --- */
.dark-mode .page-link { background: var(--clr-neutral-50); border-color: rgba(201,162,61,0.08); color: var(--clr-primary-400); }
.dark-mode .page-item.active .page-link { background: var(--clr-gold); border-color: var(--clr-gold); color: var(--clr-primary-900); }

/* --- List Group --- */
.dark-mode .list-group-item { background: var(--clr-neutral-50); border-color: rgba(201,162,61,0.06); color: var(--clr-primary-400); }
.dark-mode .list-group-item-action:hover { background: var(--clr-neutral-100); }

/* --- Progress --- */
.dark-mode .progress { background: var(--clr-neutral-200); }

/* --- Scrollbar --- */
.dark-mode ::-webkit-scrollbar-track { background: var(--clr-neutral-50); }
.dark-mode ::-webkit-scrollbar-thumb { background: var(--clr-neutral-200); }
.dark-mode ::-webkit-scrollbar-thumb:hover { background: var(--clr-neutral-300); }

/* --- Footer --- */
.dark-mode .site-footer { background: #050E1A !important; }
.dark-mode .site-footer p { color: var(--clr-primary-400); }

/* --- Back to Top --- */
.dark-mode .back-to-top { background: var(--clr-gold); color: var(--clr-primary-900); }

/* --- Tabs --- */
.dark-mode .nav-tabs { border-bottom-color: rgba(201,162,61,0.1); }
.dark-mode .nav-tabs .nav-link { color: var(--clr-primary-400); }
.dark-mode .nav-tabs .nav-link.active { color: var(--clr-gold); border-color: rgba(201,162,61,0.1); }

/* --- Toast --- */
.dark-mode .toast { background: var(--clr-neutral-50); }

/* --- Hero --- */
.dark-mode .hero-pill:hover { background: rgba(201,162,61,0.08); border-color: rgba(201,162,61,0.2); }

/* --- Admin --- */
.dark-mode .admin-topbar { background: rgba(10,22,40,0.8) !important; border-bottom-color: rgba(201,162,61,0.06) !important; }
.dark-mode .admin-footer { background: var(--clr-neutral-50); border-top-color: rgba(201,162,61,0.06); }
.dark-mode .admin-sidebar { background: linear-gradient(180deg, #050E1A, #0A1628, #050E1A); }

/* --- Override inline dark mode styles from index.php --- */
.dark-mode .hero-section .hero-pills a { border-color: rgba(255,255,255,0.06) !important; }
.dark-mode .hero-section .hero-pills a:hover { border-color: rgba(201,162,61,0.2) !important; }
