/* ============================================================
   BrokerEvolve — Base (shared across ALL pages)

   ONLY: Tokens + sidebar + header.
   Loaded on every page via loader.js.

   Component overrides (tables, modals, tabs, etc.) live in
   components.css — loaded only on themed pages.
   ============================================================ */


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

:root {
  --be-bg:             #020617;
  --be-shell:          #0F172A;
  --be-surface:        #1E293B;
  --be-surface-2:      #334155;
  --be-surface-3:      #283548;
  --be-surface-inset:  #1a2332;

  --be-border:         rgba(255,255,255,0.08);
  --be-border-hover:   rgba(255,255,255,0.12);
  --be-border-subtle:  rgba(255,255,255,0.06);

  --be-text:           #E2E8F0;
  --be-text-loud:      #CBD5E1;
  --be-text-sec:       #94A3B8;
  --be-text-dim:       #64748B;

  --be-accent:         #06B6D4;
  --be-accent-glow:    rgba(6,182,212,0.2);
  --be-accent-surface: rgba(6,182,212,0.12);
  --be-highlight:      #8B5CF6;

  --be-shadow-xs:      0 1px 2px rgba(0,0,0,0.3);
  --be-shadow-md:      0 4px 6px -1px rgba(0,0,0,0.4), 0 2px 4px -2px rgba(0,0,0,0.3);
  --be-shadow-lg:      0 10px 15px -3px rgba(0,0,0,0.4), 0 4px 6px -4px rgba(0,0,0,0.3);

  --be-font:           'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
}


/* ─── TYPOGRAPHY ──────────────────────────────────────────── */

.sidebar-v2-location,
.sidebar-v2-agency {
  font-family: var(--be-font);
}


/* ─── SIDEBAR ─────────────────────────────────────────────────
   Bootstrap uses body[data-theme=default] .sidebar-v2-location
   #sidebar-v2 .hl_nav-header nav a ... at specificity (1,4,3).
   We match that specificity with :is() to avoid !important.
   ──────────────────────────────────────────────────────────── */

/* Location switcher — GHL sets bg-gray-200 via Tailwind on inner divs */
#location-switcher-sidbar-v2,
#location-switcher-sidbar-v2 > div,
#location-switcher-sidbar-v2 .flex.items-center {
  background-color: var(--be-shell) !important;
}

#location-switcher-sidbar-v2 .hl_location-text,
#location-switcher-sidbar-v2 .hl_switcher-loc-name {
  color: var(--be-text) !important;
}

#location-switcher-sidbar-v2 .hl_switcher-loc-city {
  color: var(--be-text-dim) !important;
}

#location-switcher-sidbar-v2 .hl_location_icon {
  filter: invert(0) !important;
}

/* Up/down arrows next to location switcher */
#location-switcher-sidbar-v2 .fa-angle-up,
#location-switcher-sidbar-v2 .fa-angle-down {
  color: var(--be-text-sec) !important;
}

/* Search bar in sidebar */
#sidebar-v2 .globalSearchOpener,
.globalSearchOpener {
  background-color: var(--be-surface) !important;
  border-color: var(--be-border) !important;
  color: var(--be-text-sec) !important;
}

.globalSearchOpener .search-placeholder {
  color: var(--be-text-dim) !important;
}

/* Quick Actions button */
.quickActions {
  background-color: var(--be-surface) !important;
  color: var(--be-text-sec) !important;
}

/* Keyboard shortcut badge (⌘K) */
.globalSearchOpener kbd,
.globalSearchOpener .mx-1 {
  background-color: var(--be-surface-2) !important;
  color: var(--be-text-dim) !important;
  border-color: var(--be-border) !important;
}

/* Low-specificity base — vars + backgrounds not targeted by bootstrap */
#sidebar-v2 {
  --sidebar-bg-color: var(--be-shell);
  --sidebar-li-color: var(--be-text-sec);
  --sidebar-collapse-li-bg-color: var(--be-shell);
  --sidebar-parent-active-li-bg-color: var(--be-accent-surface);
  background-color: var(--be-shell) !important;
  color: var(--be-text-sec) !important;

  & .default-bg-color,
  & > div.relative.flex.flex-col {
    background-color: var(--be-shell) !important;
  }

  & #location-switcher-sidbar-v2 {
    color: var(--be-text) !important;
  }

  & input[type="text"] {
    background-color: var(--be-border-subtle) !important;
    border-color: var(--be-border) !important;
    color: var(--be-text) !important;
  }

  & input::placeholder {
    color: var(--be-text-dim) !important;
  }

  & hr,
  & .border-t,
  & .border-b {
    border-color: var(--be-border) !important;
  }
}

/* High-specificity nav rules — matches bootstrap's (1,4,3) selector */
body[data-theme="default"] :is(.sidebar-v2-location, .sidebar-v2-agency) #sidebar-v2 :is(.hl_nav-header, .hl_nav-header-without-footer, .hl_nav-settings) nav a {
  color: var(--be-text-sec) !important;
  opacity: 1 !important;

  & .nav-title,
  & .nav-fa-icon {
    color: var(--be-text-sec) !important;
  }

  & svg {
    color: var(--be-text-sec) !important;
  }

  & img[src] {
    filter: none !important;
    opacity: 0.9;
  }

  & img.launchpad[src] {
    filter: invert(1) !important;
  }

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

    & .nav-title,
    & .nav-fa-icon {
      color: var(--be-text) !important;
    }

    & svg {
      color: var(--be-text) !important;
    }

    & img {
      opacity: 1;
    }

    & img.launchpad[src] {
      filter: invert(1) !important;
    }
  }

  &.active {
    background-color: var(--be-accent-surface) !important;
    color: var(--be-accent) !important;

    & .nav-title,
    & .nav-fa-icon {
      color: var(--be-accent) !important;
    }

    & svg {
      color: var(--be-accent) !important;
    }

    & img {
      opacity: 1;
    }

    & img.launchpad[src] {
      filter: invert(1) !important;
    }
  }
}

/* Settings nav — lower in DOM, same pattern */
#sidebar-v2 .hl_nav-settings {
  & a,
  & span {
    color: var(--be-text-sec) !important;
  }

  & a:hover {
    color: var(--be-text) !important;
  }
}


/* ─── HEADER ──────────────────────────────────────────────── */

header.hl_header {
  background-color: var(--be-shell) !important;
  border-bottom-color: var(--be-border) !important;

  & .btn-circle {
    color: var(--be-text-sec) !important;

    &:hover {
      color: var(--be-text) !important;
    }

    & svg {
      color: var(--be-text-sec) !important;
    }
  }

  & > * > svg,
  & [class*="icon"] svg {
    color: var(--be-text-sec) !important;
  }

  /* Ask AI / Copilot button */
  & .hl_header--copilot-icon {
    background-color: var(--be-surface) !important;
    color: var(--be-text-sec) !important;
  }
}

.sidebar-v2-location .hl_header .topmenu-nav .topmenu-navitem,
.sidebar-v2-location .hl_header .topmenu-nav .topmenu-navtitle {
  color: var(--be-text-sec) !important;
}

.sidebar-v2-location .hl_header .topmenu-nav .topmenu-navitem:hover {
  color: var(--be-text) !important;
}


/* ─── TOPBAR TABS ────────────────────────────────────────────
   15/26 pages — contacts, calendars, conversations, etc.
   ──────────────────────────────────────────────────────────── */

.topmenu-nav .topmenu-navitem,
.topmenu-nav .topmenu-navtitle {
  color: var(--be-text-sec) !important;
}

.topmenu-nav .topmenu-navitem:hover {
  color: var(--be-text) !important;
}

.topmenu-nav .topmenu-navitem.router-link-exact-active {
  color: var(--be-accent) !important;
  border-color: var(--be-accent) !important;
}