/* ============================================================
   BrokerEvolve — Dashboard page
   Only loaded on /dashboard route by loader.js.

   base.css now handles:
   - .bg-white, .bg-gray-*, .text-gray-*, .border-gray-*
   - [style*="background: rgb(255, 255, 255)"]
   - .hl-wrapper-container, .default-bg-color
   - All Naive UI --n-* overrides
   - Hover states

   This file only handles dashboard-specific items:
   - #location-dashboard GHL design token overrides
   - #dashboard-container card inline styles set by JS
   - ECharts SVG attributes
   - Quick Filters button
   ============================================================ */


/* ─── GHL DESIGN TOKEN OVERRIDES ──────────────────────────── */

#location-dashboard {
  --base-white:  var(--be-surface);
  --base-black:  var(--be-text);
  --gray-25:     var(--be-surface-inset);
  --gray-50:     var(--be-surface);
  --gray-100:    var(--be-surface-3);
  --gray-200:    var(--be-border);
  --gray-300:    var(--be-border-hover);
  --gray-400:    var(--be-text-dim);
  --gray-500:    var(--be-text-sec);
  --gray-600:    var(--be-text-sec);
  --gray-700:    var(--be-text-loud);
  --gray-800:    var(--be-text);
  --gray-900:    var(--be-text);
  --shadow-xs:   var(--be-shadow-xs);
  --shadow-md:   var(--be-shadow-md);
  --shadow-lg:   var(--be-shadow-lg);
}


/* ─── STROKE UTILITIES ────────────────────────────────────── */

#location-dashboard .stroke-gray-700 {
  stroke: var(--be-text-sec);
}

#location-dashboard .stroke-gray-500 {
  stroke: var(--be-text-dim);
}


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

#location-dashboard #location-dashboard-header {

  &.hl-toolbar {
    background-color: var(--be-bg) !important;
  }

  /* Quick Filters bar */
  & .flex.justify-between.items-center,
  & #location_dashboard-btn-add_quick_filters {
    background-color: transparent !important;
  }
}

/* Quick Filters button — Naive UI inline --n-color override */
button#location_dashboard-btn-add_quick_filters,
button#location_dashboard-btn-add_quick_filters * {
  background-color: transparent !important;
  color: var(--be-text-sec) !important;
}

button#location_dashboard-btn-add_quick_filters:hover,
button#location_dashboard-btn-add_quick_filters:hover * {
  background-color: transparent !important;
  color: var(--be-accent) !important;
}

#location-dashboard .dashboard-divider {
  border-color: var(--be-border);
}


/* ─── DASHBOARD CARDS ─────────────────────────────────────────
   JS sets inline style="color: rgb(...)" on card text elements.
   Only !important beats inline styles.
   ──────────────────────────────────────────────────────────── */

#dashboard-container {

  & .grid-stack-item .hl-card {
    color: var(--be-text);

    & .n-base-selection-input {
      border: none !important;
      background-color: transparent !important;
    }

    & table {
      color: var(--be-text);
    }

    & th {
      color: var(--be-text-sec);
      border-color: var(--be-border);
    }

    & td {
      border-color: var(--be-border);
    }
  }

  /* !important: JS inline style="color: ..." */
  & .hl-text-md-medium[style*="color"] {
    color: var(--be-text) !important;
  }

  & .hl-text-xs-regular[style*="color"] {
    color: var(--be-text-sec) !important;
  }

  & .grid-stack-item .text-3xl[style*="color"] {
    color: var(--be-text) !important;
  }

  & .grid-stack-item .text-lg.font-medium[style*="color"] {
    color: var(--be-text) !important;
  }

  & .hl-text-sm-medium[style*="color"] {
    color: var(--be-accent) !important;
  }
}


/* ─── ECHARTS SVG DARK OVERRIDES ──────────────────────────────
   SVG presentation attributes act like inline styles.
   ──────────────────────────────────────────────────────────── */

#dashboard-container .vue-echarts-inner {

  & text[fill="#101828"] {
    fill: var(--be-text) !important;
  }

  & text[fill="#6E7079"],
  & text[fill="#667085"],
  & text[fill="#334155"] {
    fill: var(--be-text-sec) !important;
  }

  & path[stroke="#6E7079"] {
    stroke: var(--be-border-hover) !important;
  }

  & path[stroke="#E0E6F1"] {
    stroke: var(--be-border) !important;
  }

  & path[stroke="#98A2B3"] {
    stroke: var(--be-text-dim) !important;
  }
}