/* ============================================================
   RAAVI BRAND — Single Source of Truth for Visual Identity
   ============================================================
   To rebrand in the future: edit ONLY Section 1 (Design Tokens).
   Sections 2 and 3 are bridges that propagate those tokens
   throughout the Bootstrap template and custom components.
   ============================================================ */

/* ===================================================================
   SECTION 1 — RAAVI DESIGN TOKENS  (edit here to rebrand)
   =================================================================== */
:root {
  /* Brand Blue */
  --blue-700: #0B3FD4;
  --blue-600: #1450E8;
  --blue:     #1F5BFF;   /* primary interactive */
  --blue-400: #5C86FF;
  --blue-200: #B9CBFF;
  --blue-50:  #ECF1FF;   /* light tint surface */

  /* Ink / Text hierarchy */
  --ink:    #13151B;     /* headlines, near-black */
  --ink-2:  #2C3038;
  --body:   #5A6473;     /* paragraph gray */
  --muted:  #8B94A3;     /* captions, disabled */

  /* Surfaces & Backgrounds */
  --white:   #FFFFFF;
  --paper:   #F7F8FA;    /* off-white section bg */
  --paper-2: #F1F3F7;
  --line:    #EAECF1;    /* hairline border */
  --line-2:  #DFE3EA;

  /* Soft ambient pastels (decorative only) */
  --lav:   #ECE7FB;
  --lav-2: #E4DBFA;
  --blush: #FBEAF1;
  --sky:   #E7F0FD;
  --mint:  #E4F6F1;

  /* Semantic */
  --success: #10936A;
  --warning: #C9871F;
  --danger:  #D83A3A;

  /* Typography */
  --sans: 'Vazirmatn', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;

  /* Border Radius */
  --r-sm:   10px;
  --r-md:   16px;
  --r-lg:   24px;
  --r-xl:   32px;
  --r-pill: 999px;

  /* Shadows */
  --sh-xs:   0 1px 2px rgba(19, 21, 27, .05);
  --sh-sm:   0 4px 14px rgba(19, 21, 27, .06);
  --sh-md:   0 14px 40px rgba(19, 21, 27, .09);
  --sh-lg:   0 30px 70px rgba(19, 21, 27, .12);
  --sh-blue: 0 12px 30px rgba(31, 91, 255, .28);
}

/* ===================================================================
   SECTION 2 — BRIDGE: map Bootstrap / template variables to tokens
   This section must NOT be edited unless the template framework changes.
   =================================================================== */
:root {
  /* Bootstrap primary */
  --bs-primary:     var(--blue);
  --bs-primary-rgb: 31, 91, 255;

  /* Bootstrap links */
  --bs-link-color:       var(--blue);
  --bs-link-hover-color: var(--blue-600);

  /* Bootstrap body font */
  --bs-body-font-family: var(--sans);

  /* Bootstrap semantic */
  --bs-success: var(--success);
  --bs-warning: var(--warning);
  --bs-danger:  var(--danger);

  /* Template-specific: Materialize/Sneat theme vars */
  --bs-primary-darken: var(--blue-600);
}

/* ===================================================================
   SECTION 3 — TARGETED OVERRIDES for baked-in old brand colors
   (#666cff, #696cff, #5f61e6, #5a67d8) that are hard-coded in
   the compiled vendor CSS and cannot be changed via CSS variables.
   =================================================================== */

/* ---- Text colors ---- */
.text-primary  { color: var(--blue) !important; }
a.text-primary { color: var(--blue) !important; }

/* ---- Background colors ---- */
.bg-primary               { background-color: var(--blue) !important; }
a.bg-primary:focus,
a.bg-primary:hover        { background-color: var(--blue-600) !important; }
.bg-label-primary         { background-color: var(--blue-50) !important; color: var(--blue) !important; }
.bg-label-hover-primary   { background-color: var(--blue-50) !important; color: var(--blue) !important; }
.bg-label-hover-primary:hover { background-color: var(--blue) !important; color: #fff !important; }
.bg-gradient-primary      { background-image: linear-gradient(45deg, var(--blue), var(--blue-400)) !important; }

/* ---- Buttons ----
   The compiled theme hardcodes background-color:#666cff (no CSS var).
   We must override with both the direct property AND !important.
*/
.btn-primary,
.btn-group .btn-primary,
.input-group .btn-primary {
  background-color: var(--blue) !important;
  border-color:     var(--blue) !important;
  color: #fff !important;
  box-shadow: var(--sh-blue);
}
.btn-primary:hover {
  background-color: var(--blue-600) !important;
  border-color:     var(--blue-600) !important;
}
.btn-check:focus + .btn-primary,
.btn-primary.focus,
.btn-primary:focus {
  background-color: var(--blue-600) !important;
  border-color:     var(--blue-600) !important;
  box-shadow: 0 0 0 0.25rem rgba(31, 91, 255, 0.5) !important;
}
.btn-check:active + .btn-primary,
.btn-check:checked + .btn-primary,
.btn-primary.active,
.btn-primary:active,
.show > .btn-primary.dropdown-toggle {
  background-color: var(--blue-700) !important;
  border-color:     var(--blue-700) !important;
  color: #fff !important;
}
.btn-group .btn-primary,
.input-group .btn-primary {
  border-left-color:  var(--blue-700) !important;
  border-right-color: var(--blue-700) !important;
}

.btn-outline-primary {
  color:        var(--blue) !important;
  border-color: var(--blue) !important;
  background-color: transparent !important;
}
.btn-outline-primary:hover,
.btn-check:checked + .btn-outline-primary,
.btn-outline-primary.active {
  background-color: var(--blue) !important;
  border-color:     var(--blue) !important;
  color: #fff !important;
}

.btn-label-primary {
  color:            var(--blue) !important;
  background-color: var(--blue-50) !important;
  border-color:     transparent !important;
}
.btn-label-primary:hover {
  background-color: var(--blue) !important;
  color: #fff !important;
}

/* ---- Badges ---- */
.badge.bg-primary   { background-color: var(--blue) !important; }
.badge.bg-label-primary { background-color: var(--blue-50) !important; color: var(--blue) !important; }

/* ---- Links ---- */
a { color: var(--blue); }
a:hover { color: var(--blue-600); }

/* ---- Pagination ---- */
.page-item.active .page-link,
.page-item.active .page-link:focus,
.page-item.active .page-link:hover {
  background-color: var(--blue) !important;
  border-color:     var(--blue) !important;
  color: #fff;
}
.pagination-outline-primary .page-item.active .page-link {
  background-color: var(--blue-50) !important;
  border-color:     var(--blue-200) !important;
  color: var(--blue) !important;
}

/* ---- Form controls / focus rings ---- */
.form-control:focus,
.form-select:focus {
  border-color: var(--blue) !important;
  box-shadow: 0 0 0 0.2rem rgba(31, 91, 255, 0.25) !important;
}
.form-check-input:checked {
  background-color: var(--blue) !important;
  border-color:     var(--blue) !important;
}
.form-switch .form-check-input:checked { background-color: var(--blue) !important; }

/* ---- Progress bars ---- */
.progress-bar.bg-primary { background-color: var(--blue) !important; }

/* ---- Spinners ---- */
.spinner-border.text-primary { color: var(--blue) !important; }

/* ---- Alerts ---- */
.alert-primary {
  background-color: var(--blue-50) !important;
  border-color:     var(--blue-200) !important;
  color:            var(--blue-700) !important;
}

/* ---- Nav / Tabs ---- */
.nav-pills .nav-link.active,
.nav-pills .show > .nav-link {
  background-color: var(--blue) !important;
  color: #fff !important;
}
.nav-tabs .nav-link.active,
.nav-tabs .nav-item.show .nav-link {
  color: var(--blue) !important;
  border-bottom-color: var(--blue) !important;
}

/* ---- Dropdown notifications dot ---- */
.dropdown-notifications-item:not(.mark-as-read) .dropdown-notifications-read span {
  background-color: var(--blue) !important;
}

/* ---- Sidebar / Menu active state ----
   Compiled theme has two hard-coded !important rules we must beat with equal/higher specificity:
   1. .bg-menu-theme .menu-item.active>.menu-link:not(.menu-toggle) { background:#666cff }
   2. .bg-menu-theme .menu-item.active:not(.open)>.menu-link:not(.menu-toggle) { color:#fff !important }
   We match those selectors exactly so our !important wins on equal specificity.
*/
.bg-menu-theme .menu-item.active > .menu-link:not(.menu-toggle),
.bg-menu-theme.menu-horizontal .menu-inner > .menu-item.active > .menu-link.menu-toggle {
  background-color: var(--blue-50) !important;
}
.bg-menu-theme .menu-item.active:not(.open) > .menu-link:not(.menu-toggle),
.bg-menu-theme .menu-item.active:not(.open) > .menu-link:not(.menu-toggle)::before {
  color: var(--blue) !important;
  background-color: var(--blue-50) !important;
}
.menu-vertical .menu-item.active > .menu-link .menu-icon,
.menu-vertical .menu-item.open  > .menu-link .menu-icon {
  color: var(--blue) !important;
}
.bg-menu-theme.menu-horizontal .menu-sub > .menu-item.active > .menu-link:not(.menu-toggle),
.bg-menu-theme.menu-horizontal .menu-sub > .menu-item.active > .menu-link:not(.menu-toggle)::before {
  background-color: var(--blue-50) !important;
  color: var(--blue) !important;
}

/* ---- Sidebar plan widget: inject Raavi brand colors ---- */
:root {
  --plan-free-bg-1:        var(--blue-50);
  --plan-free-bg-2:        var(--blue-200);
  --plan-free-color-1:     var(--blue);
  --plan-free-color-2:     var(--ink-2);
  --plan-free-button-bg:   var(--white);
  --plan-free-button-color: var(--ink);
}

/* ---- Tour / Shepherd ---- */
.shepherd-button.shepherd-button-primary,
.shepherd-button-primary {
  background-color: var(--blue) !important;
}
.shepherd-element .shepherd-arrow::before { background: var(--blue) !important; }

/* ---- SweetAlert2 ---- */
.swal2-confirm { background-color: var(--blue) !important; }

/* ---- Select2 ---- */
.select2-container--default .select2-results__option--highlighted { background-color: var(--blue) !important; }
.select2-container--default.select2-container--focus .select2-selection { border-color: var(--blue) !important; }
.select2-container--default .select2-selection--multiple .select2-selection__choice { background-color: var(--blue) !important; }

/* ---- Flatpickr calendar ---- */
.flatpickr-day.selected,
.flatpickr-day.startRange,
.flatpickr-day.endRange {
  background: var(--blue) !important;
  border-color: var(--blue) !important;
}
.flatpickr-day.today { border-color: var(--blue) !important; }
.flatpickr-months .flatpickr-month { background: var(--blue) !important; }
.flatpickr-current-month .flatpickr-monthDropdown-months { background: var(--blue) !important; }

/* ---- Toastr ---- */
.toast-info { background-color: var(--blue) !important; }

/* ---- ApexCharts fallback ---- */
.apexcharts-tooltip-marker { background-color: var(--blue) !important; }

/* ---- Offline page ---- */
.btn-retry {
  background: var(--blue) !important;
  border-color: var(--blue) !important;
}
.btn-retry:hover { background: var(--blue-600) !important; }

/* ---- Theme color meta / manifest are separate — handled in HTML/JSON ---- */