/*
 * AgentPro Dashboard — custom theme
 * Loaded AFTER light.css. Overrides variables and fixes structural issues.
 * Does NOT duplicate anything light.css already handles correctly.
 *
 * Brand palette (from logo):
 *   Navy text  #1A1D2E
 *   Indigo     #2D3A8C   ← replaces AdminKit pink as --bs-primary
 *   Indigo dk  #1E2766
 */

/* ============================================================
   1. VARIABLE OVERRIDES
   Redefine --bs-primary (and derived tokens) at root level.
   Every light.css rule that reads var(--bs-primary) picks this
   up automatically — buttons, badges, links, focus rings, nav
   pills, pagination, progress bars, sidebar active state…
   ============================================================ */

:root,
[data-bs-theme=light] {

  /* Core brand — logo navy-indigo, not pink */
  --bs-primary:                  #2D3A8C;
  --bs-primary-rgb:              45, 58, 140;

  /* Derived tokens light.css builds on */
  --bs-primary-text-emphasis:    #1E2766;
  --bs-primary-bg-subtle:        #ECEFFE;
  --bs-primary-border-subtle:    #C5CCEF;

  /* Links */
  --bs-link-color:               #2D3A8C;
  --bs-link-color-rgb:           45, 58, 140;
  --bs-link-hover-color:         #1E2766;
  --bs-link-hover-color-rgb:     30, 39, 102;

  /* Focus ring */
  --bs-focus-ring-color:         rgba(45, 58, 140, .25);

  /* light.css hard-coded --bs-pink as btn-primary hover/active bg.
     Remap it to our indigo so hover stays on-brand. */
  --bs-pink:                     #2D3A8C;

  /* Font — swap Inter for DM Sans */
  --bs-font-sans-serif:          'DM Sans', 'Helvetica Neue', Arial, sans-serif;
  --bs-body-font-family:         var(--bs-font-sans-serif);
}

/* Google Font */
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@300;400;500;600;700&display=swap');

/* ============================================================
   2. TOPBAR WIDTH FIX
   light.css gives .main { width: 100% } but AdminKit JS
   sometimes adds margin-left to the navbar. We ensure .navbar-bg
   fills its flex parent (.main) and never stretches to viewport.
   ============================================================ */

.navbar-bg {
  width: 100% !important;
  margin-left: 0 !important;
  left: 0 !important;
}

/* ============================================================
   3. OVERLAY FIX
   footer.php shows/hides #overlay with addClass/removeClass('d-none').
   The old rule used display:flex !important which beat Bootstrap's
   .d-none { display:none !important }, so the overlay never hid.
   Fix: default to none; only activate when .d-none is absent.
   ============================================================ */

#overlay {
  display: none;
}

#overlay:not(.d-none) {
  display: flex !important;
  position: fixed;
  inset: 0;
  background: rgba(255, 255, 255, .75);
  z-index: 9999;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(2px);
}

/* ============================================================
   4. SIDEBAR LIGHT-THEME STATES
   light.css body[data-theme=light] already sets the sidebar
   white with a right border. We just wire the hover/active
   tints to our new --bs-primary-bg-subtle so they use indigo,
   not the AdminKit blue-grey defaults.
   ============================================================ */

body[data-theme=light] .sidebar-link:hover {
  background: var(--bs-primary-bg-subtle) !important;
  color: var(--bs-primary) !important;
}

body[data-theme=light] .sidebar-link:hover i,
body[data-theme=light] .sidebar-link:hover svg,
body[data-theme=light] .sidebar-link:hover .dash-icon {
  color: var(--bs-primary) !important;
}

body[data-theme=light] .sidebar-item.active > .sidebar-link,
body[data-theme=light] .sidebar-item.active .sidebar-link:hover {
  background: var(--bs-primary-bg-subtle) !important;
  color: var(--bs-primary) !important;
  border-left-color: var(--bs-primary) !important;
}

body[data-theme=light] .sidebar-item.active > .sidebar-link i,
body[data-theme=light] .sidebar-item.active > .sidebar-link svg,
body[data-theme=light] .sidebar-item.active > .sidebar-link .dash-icon {
  color: var(--bs-primary) !important;
}

body[data-theme=light] .sidebar-dropdown .sidebar-item .sidebar-link:hover,
body[data-theme=light] .sidebar-dropdown .sidebar-item.active .sidebar-link {
  color: var(--bs-primary) !important;
}

/* ============================================================
   5. SIDEBAR DROPDOWN CHILD ITEMS
   The child links each contain an inline <i class="dash-icon">
   icon (no <span> wrapper), plus light.css adds a "→" ::before
   pseudo-element at left:-14px. Together they crumble the text.
   Fix: suppress the redundant ::before arrow and give the icon
   proper inline sizing so icon + text sit neatly on one line.
   ============================================================ */

/* Remove the "→" arrow — we already have icons */
.sidebar-dropdown .sidebar-link::before {
  display: none !important;
}

/* Restore the link as a flex row (light.css sets it display:block) */
.sidebar-dropdown .sidebar-link {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: .45rem 1rem .45rem 2rem !important;
  white-space: nowrap;
}

/* Icon inside child links — match size of parent icons */
.sidebar-dropdown .sidebar-link .dash-icon,
.sidebar-dropdown .sidebar-link i {
  flex-shrink: 0;
  width: 16px !important;
  font-size: 13px !important;
  text-align: center;
}

/* ============================================================
   5b. ROLE BADGE — bg-danger used as a role chip in sidebar-user.
   Danger red is wrong for a role label; remap to brand indigo.
   ============================================================ */

.sidebar-user .badge.bg-danger,
.sidebar-user-subtitle .badge.bg-danger {
  background-color: var(--bs-primary) !important;
  color: #fff !important;
}

/* ============================================================
   6. CARD & MODAL RADIUS — light.css uses 0.2rem (very square).
   Soften to match the logo's rounded aesthetic.
   ============================================================ */

.card {
  border-radius: .75rem !important;
}

.card-header {
  border-radius: .75rem .75rem 0 0 !important;
}

.modal-content {
  border-radius: .75rem !important;
}

/* ============================================================
   7. SETTINGS TOGGLE — the floating gear button uses primary bg.
   Already inherits --bs-primary via light.css, but an explicit
   hard-coded fallback was present. Ensure it stays on-brand.
   ============================================================ */

.settings-toggle {
  background: var(--bs-primary) !important;
}

.settings-toggle:hover {
  background: var(--bs-primary-text-emphasis) !important;
}