/* ============================================================
   BrokerEvolve — Critical CSS (render-blocking)

   Loaded via <link> tag BEFORE loader.js in GHL Custom Code:
   <link rel="stylesheet" href="https://{your-domain}/critical.css">

   Because <link> tags are render-blocking, the browser won't
   paint until this is applied. Must override GHL's inline
   <style> that sets body bg to #f2f7fa and spinner to azure.

   Keep this file TINY — only anti-flash colors.
   ============================================================ */

/* Dark page background — overrides GHL's inline body { background-color: #f2f7fa } */
body,
html,
.sidebar-v2-location,
.sidebar-v2-agency {
  background-color: #020617 !important;
}

/* Sidebar + header get dark bg instantly */
#sidebar-v2,
#sidebar-v2 .default-bg-color,
#sidebar-v2 > div.relative.flex.flex-col {
  background-color: #0F172A !important;
}

header.hl_header {
  background-color: #0F172A !important;
  border-bottom-color: rgba(255,255,255,0.08) !important;
}

/* GHL app loader — overrides inline background: azure / #f2f7fa */
.app-loader,
#app.loading + .app-loader {
  background: #020617 !important;
}

.hl-loader-container {
  background: transparent !important;
}

/* Spinner ring — match accent color */
.lds-ring div {
  border-color: #06B6D4 transparent transparent transparent !important;
}

/* Loader text */
.hl-loader-info {
  color: #64748B !important;
}

/* Main content area */
.sidebar-v2-location > main.w-full,
.sidebar-v2-agency > main.w-full {
  background-color: #020617 !important;
}

/* Hide page content until full CSS loads — loader.js reveals it */
.sidebar-v2-location > section.w-full {
  opacity: 0;
  transition: opacity 0.15s ease;
}