/* ============================================================
   BrokerEvolve — Settings pages
   Only loaded on /settings route by loader.js.

   The settings content area is an IFRAME pointing to
   client-app-crm-settings.leadconnectorhq.com — cross-origin,
   so we cannot style inside it. This file handles only the
   outer shell elements specific to settings.

   base.css handles all shared components (Highrise, Naive UI,
   sidebar, header, dropdowns, drawers, etc.)
   ============================================================ */


/* ─── WRAPPER ────────────────────────────────────────────────
   Settings uses <div class="hl_wrapper bg-white hl_without-topbar">.
   .bg-white in base.css maps to --be-surface (card color),
   but the wrapper needs page-background.
   ──────────────────────────────────────────────────────────── */

.hl_wrapper.hl_without-topbar {
  background-color: var(--be-bg) !important;
}


/* ─── SETTINGS IFRAME ──────────────────────────────────────── */

#companySettingsPage {
  background-color: var(--be-bg) !important;
}

#companySettingsPage iframe {
  background-color: var(--be-bg);
}


/* ─── SIDEBAR SECTION DIVIDERS ─────────────────────────────── */

#sidebar-v2 .hl_nav-header-without-footer .divider p {
  border-color: var(--be-border) !important;
  color: var(--be-text-dim) !important;
}

#sidebar-v2 .hl_nav-header-without-footer .divider span {
  color: var(--be-text-dim) !important;
  background-color: var(--be-shell) !important;
}


/* ─── GO BACK BUTTON ─────────────────────────────────────── */

#backButtonv2 {
  color: var(--be-text-sec) !important;
}

#backButtonv2:hover {
  color: var(--be-text) !important;
  background-color: var(--be-border-subtle) !important;
}


/* ─── SETTINGS MENU TITLE ─────────────────────────────────── */

.menu-title {
  color: var(--be-text) !important;
}


/* ─── NEW BADGE ──────────────────────────────────────────── */

.hl_new_badge {
  color: var(--be-accent) !important;
}


/* ─── MODAL OVERRIDES ────────────────────────────────────── */

.hl_wrapper .modal-content {
  background-color: var(--be-surface) !important;
  color: var(--be-text) !important;
  border-color: var(--be-border) !important;
}

.hl_wrapper .modal-header {
  border-color: var(--be-border) !important;
  color: var(--be-text) !important;
}

.hl_wrapper .modal-header .close {
  color: var(--be-text-sec) !important;
}

.hl_wrapper .modal-footer {
  border-color: var(--be-border) !important;
}