/* ============================================================================
   theme-dark.css — Legacy frontend + Landlord portal dark theme.
   These surfaces share public/frontend/css/* which has NO CSS variables and no
   dark styling, so this is a pure override sheet keyed on the canonical
   html[data-theme="dark"] attribute (higher specificity than the vendor's
   single-class selectors). !important is used sparingly, only where the vendor
   rule it overrides is itself !important or otherwise unbeatable.
   Palette:  page #0f1420  surface #1a2130  elevated #232c3d
             border #2c3647  text #d7dce5  muted #97a1b2
   ========================================================================== */

html[data-theme="dark"] {
    --fd-page:     #0f1420;
    --fd-surface:  #1a2130;
    --fd-elevated: #232c3d;
    --fd-border:   #2c3647;
    --fd-text:     #d7dce5;
    --fd-muted:    #97a1b2;
}

/* ---- Base --------------------------------------------------------------- */
html[data-theme="dark"] body {
    background-color: var(--fd-page);
    color: var(--fd-text);
}
html[data-theme="dark"] h1,
html[data-theme="dark"] h2,
html[data-theme="dark"] h3,
html[data-theme="dark"] h4,
html[data-theme="dark"] h5,
html[data-theme="dark"] h6 { color: #f1f4f9; }
html[data-theme="dark"] p,
html[data-theme="dark"] span,
html[data-theme="dark"] li,
html[data-theme="dark"] label,
html[data-theme="dark"] td,
html[data-theme="dark"] th { color: var(--fd-text); }
html[data-theme="dark"] a { color: #d98a3d; }

/* ---- Landlord layout wrappers ------------------------------------------- */
html[data-theme="dark"] .ph_root_layout,
html[data-theme="dark"] .ph_main_layout,
html[data-theme="dark"] main { background-color: var(--fd-page); }
html[data-theme="dark"] .ph_sidebar,
html[data-theme="dark"] .sidebar,
html[data-theme="dark"] nav.sidebar {
    background-color: var(--fd-surface) !important;
    border-color: var(--fd-border) !important;
}
html[data-theme="dark"] .sidebar_menu a,
html[data-theme="dark"] .nav_title span { color: var(--fd-text); }
html[data-theme="dark"] .sidebar_menu li.mm-active > a,
html[data-theme="dark"] .sidebar_menu a.active { background-color: var(--fd-elevated); }
html[data-theme="dark"] .sidebar_profile_info { border-color: var(--fd-border); }
html[data-theme="dark"] .sidebar_profile_info h5 { color: var(--fd-text); }
html[data-theme="dark"] .sidebar_profile_info p { color: var(--fd-muted); }
html[data-theme="dark"] .header_area,
html[data-theme="dark"] .header__wrapper { background-color: var(--fd-surface); }

/* ---- Generic surfaces / utilities --------------------------------------- */
html[data-theme="dark"] .bg-white:not(.force-light),
html[data-theme="dark"] .bg-light:not(.force-light),
html[data-theme="dark"] .white-bg:not(.force-light),
html[data-theme="dark"] .section-bg:not(.force-light) {
    background-color: var(--fd-surface) !important;
    color: var(--fd-text);
}
html[data-theme="dark"] .text-dark:not(.force-light),
html[data-theme="dark"] .text-black:not(.force-light) { color: var(--fd-text) !important; }
html[data-theme="dark"] .text-muted,
html[data-theme="dark"] .text-secondary { color: var(--fd-muted) !important; }
html[data-theme="dark"] .border,
html[data-theme="dark"] .border-top,
html[data-theme="dark"] .border-bottom,
html[data-theme="dark"] .border-start,
html[data-theme="dark"] .border-end,
html[data-theme="dark"] hr { border-color: var(--fd-border) !important; }

/* ---- Cards / panels ----------------------------------------------------- */
html[data-theme="dark"] .card,
html[data-theme="dark"] .card-body,
html[data-theme="dark"] .card-header,
html[data-theme="dark"] .card-footer,
html[data-theme="dark"] .single_property,
html[data-theme="dark"] .property_item,
html[data-theme="dark"] .dashboard_card,
html[data-theme="dark"] .box_widget,
html[data-theme="dark"] .content_wrapper {
    background-color: var(--fd-surface);
    border-color: var(--fd-border);
    color: var(--fd-text);
}

/* ---- Tables ------------------------------------------------------------- */
html[data-theme="dark"] .table {
    --bs-table-bg: transparent;
    --bs-table-color: var(--fd-text);
    color: var(--fd-text);
    border-color: var(--fd-border);
}
html[data-theme="dark"] .table > :not(caption) > * > * {
    background-color: transparent;
    color: var(--fd-text);
    border-color: var(--fd-border);
}
html[data-theme="dark"] .table thead th { background-color: var(--fd-elevated); color: var(--fd-text); border-color: var(--fd-border); }
html[data-theme="dark"] .table-striped > tbody > tr:nth-of-type(odd) > * { background-color: rgba(255, 255, 255, .03); color: var(--fd-text); }
html[data-theme="dark"] .table-hover > tbody > tr:hover > * { background-color: rgba(255, 255, 255, .06); color: var(--fd-text); }

/* ---- Forms -------------------------------------------------------------- */
html[data-theme="dark"] .form-control,
html[data-theme="dark"] .form-select,
html[data-theme="dark"] textarea,
html[data-theme="dark"] input[type="text"],
html[data-theme="dark"] input[type="email"],
html[data-theme="dark"] input[type="password"],
html[data-theme="dark"] input[type="number"],
html[data-theme="dark"] input[type="search"],
html[data-theme="dark"] input[type="date"],
html[data-theme="dark"] .input-group-text,
html[data-theme="dark"] .nice-select {
    background-color: var(--fd-elevated);
    border-color: var(--fd-border);
    color: var(--fd-text);
}
html[data-theme="dark"] .form-control::placeholder,
html[data-theme="dark"] textarea::placeholder { color: var(--fd-muted); opacity: 1; }
html[data-theme="dark"] .nice-select .list {
    background-color: var(--fd-elevated);
    border-color: var(--fd-border);
}
html[data-theme="dark"] .nice-select .option:hover,
html[data-theme="dark"] .nice-select .option.focus { background-color: rgba(255, 255, 255, .06); }

/* ---- Dropdowns / modals / list-group / pagination / nav-tabs ------------ */
html[data-theme="dark"] .dropdown-menu {
    background-color: var(--fd-elevated);
    border-color: var(--fd-border);
    color: var(--fd-text);
}
html[data-theme="dark"] .dropdown-item { color: var(--fd-text); }
html[data-theme="dark"] .dropdown-item:hover,
html[data-theme="dark"] .dropdown-item:focus { background-color: rgba(255, 255, 255, .06); color: var(--fd-text); }
html[data-theme="dark"] .modal-content {
    background-color: var(--fd-surface);
    border-color: var(--fd-border);
    color: var(--fd-text);
}
html[data-theme="dark"] .modal-header,
html[data-theme="dark"] .modal-footer { border-color: var(--fd-border); }
html[data-theme="dark"] .btn-close { filter: invert(1) grayscale(1) brightness(1.8); }
html[data-theme="dark"] .list-group-item {
    background-color: var(--fd-surface);
    border-color: var(--fd-border);
    color: var(--fd-text);
}
html[data-theme="dark"] .page-link {
    background-color: var(--fd-surface);
    border-color: var(--fd-border);
    color: var(--fd-text);
}
html[data-theme="dark"] .nav-tabs { border-color: var(--fd-border); }
html[data-theme="dark"] .nav-tabs .nav-link.active {
    background-color: var(--fd-surface);
    border-color: var(--fd-border) var(--fd-border) var(--fd-surface);
    color: var(--fd-text);
}

/* ---- Plugins: datepickers ----------------------------------------------- */
html[data-theme="dark"] .daterangepicker,
html[data-theme="dark"] .gj-picker,
html[data-theme="dark"] .ui-datepicker {
    background-color: var(--fd-elevated) !important;
    border-color: var(--fd-border) !important;
    color: var(--fd-text) !important;
}
html[data-theme="dark"] .daterangepicker td,
html[data-theme="dark"] .daterangepicker th,
html[data-theme="dark"] .ui-datepicker td a,
html[data-theme="dark"] .gj-picker td { color: var(--fd-text) !important; }
html[data-theme="dark"] .daterangepicker td.off { background-color: var(--fd-surface); color: var(--fd-muted); }

/* Scrollbars */
html[data-theme="dark"] ::-webkit-scrollbar-track { background: var(--fd-page); }
html[data-theme="dark"] ::-webkit-scrollbar-thumb { background: #3a4556; border-radius: 6px; }

/* Shared toggle button helper (used in landlord sidebar) */
.theme-toggle-btn { cursor: pointer; line-height: 1; }
html[data-theme="dark"] .theme-toggle-btn i { color: var(--fd-text); }