/*
 * ╔══════════════════════════════════════════════════════════════╗
 * ║  THEME OVERRIDES — Change colors in ONE place               ║
 * ║                                                              ║
 * ║  To change the primary color, edit ONLY the :root block     ║
 * ║  below. Every button, link, sidebar, form, badge, alert     ║
 * ║  etc. will automatically update.                             ║
 * ╚══════════════════════════════════════════════════════════════╝
 */

/* ═══════════════════════════════════════════════════════════
   STEP 1 — Define your colors here (EDIT ONLY THIS BLOCK)
   ═══════════════════════════════════════════════════════════ */
:root {
  /* ── Primary Color ──────────────────────────────────────
     Base primary. Change this ONE value and the entire
     system adapts.  */
  --app-primary: #194b91;

  /* RGB components (needed for rgba() usage) */
  --app-primary-rgb: 105, 108, 255;

  /* Auto-derived shades — adjust if you change primary */
  --app-primary-hover: #5f61e6;     /* ~10% darker   */
  --app-primary-active: #595cd9;    /* ~15% darker   */
  --app-primary-link-hover: #787bff;/* ~8% lighter   */

  /* Label / light backgrounds */
  --app-primary-label-bg: #e7e7ff;
  --app-primary-label-bg-alt: #e1e2ff;
  --app-primary-border-label: #c3c4ff;
  --app-primary-alert-border: #d2d3ff;

  /* Menu-specific shades */
  --app-primary-menu-active: #6d70ff;
  --app-primary-menu-sub: #7174ff;
  --app-primary-menu-dot: #8385ff;

  /* Transparency variants */
  --app-primary-008: rgba(var(--app-primary-rgb), 0.08);
  --app-primary-016: rgba(var(--app-primary-rgb), 0.16);
  --app-primary-040: rgba(var(--app-primary-rgb), 0.40);

  /* Soft tints for menus, footers */
  --app-primary-soft: #e0e1ff;
  --app-primary-softer: #b0b2ff;
  --app-primary-softest: #c2c4ff;

  /* ── Secondary theme colors (gradient accents) ──────── */
  --app-primary-gradient-mid: #8592f2;
  --app-primary-gradient-end: #a3acff;
  --app-admin-gradient-mid: #9e95f5;
  --app-admin-gradient-end: #c5bffa;
}


/* ═══════════════════════════════════════════════════════════
   STEP 2 — Override rules (DO NOT EDIT BELOW)
   These rules mirror theme-default.css but use variables.
   ═══════════════════════════════════════════════════════════ */

/* ─── Text ────────────────────────────────────────────── */
.text-primary {
  color: var(--app-primary) !important;
}
.text-body[href]:hover {
  color: var(--app-primary-hover) !important;
}

/* ─── Backgrounds ─────────────────────────────────────── */
.bg-primary {
  background-color: var(--app-primary) !important;
}
a.bg-primary:hover, a.bg-primary:focus {
  background-color: var(--app-primary-hover) !important;
}

.bg-label-primary {
  background-color: var(--app-primary-label-bg) !important;
  color: var(--app-primary) !important;
}

.border-label-primary {
  border: 3px solid var(--app-primary-border-label) !important;
}
.border-light-primary {
  border: 3px solid var(--app-primary-008);
}

/* ─── Links ───────────────────────────────────────────── */
a {
  color: var(--app-primary);
}
a:hover {
  color: var(--app-primary-link-hover);
}

/* ─── Borders ─────────────────────────────────────────── */
html:not([dir=rtl]) .border-primary,
html[dir=rtl] .border-primary {
  border-color: var(--app-primary) !important;
}

/* ─── Fill ────────────────────────────────────────────── */
.fill-primary {
  fill: var(--app-primary);
}
.svg-illustration svg {
  fill: var(--app-primary);
}

/* ─── Buttons — Primary ───────────────────────────────── */
.btn-primary {
  color: #fff;
  background-color: var(--app-primary);
  border-color: var(--app-primary);
  box-shadow: 0 0.125rem 0.25rem 0 var(--app-primary-040);
}
.btn-primary:hover {
  color: #fff;
  background-color: var(--app-primary-hover);
  border-color: var(--app-primary-hover);
}
.btn-check:focus + .btn-primary, .btn-primary:focus, .btn-primary.focus {
  color: #fff;
  background-color: var(--app-primary-hover);
  border-color: var(--app-primary-hover);
}
.btn-check:checked + .btn-primary,
.btn-check:active + .btn-primary,
.btn-primary:active, .btn-primary.active,
.show > .btn-primary.dropdown-toggle {
  color: #fff;
  background-color: var(--app-primary-active);
  border-color: var(--app-primary-active);
}

/* ─── Buttons — Outline Primary ───────────────────────── */
.btn-outline-primary {
  color: var(--app-primary);
  border-color: var(--app-primary);
  background: transparent;
}
.btn-outline-primary:hover {
  color: #fff;
  background-color: var(--app-primary-hover);
  border-color: var(--app-primary-hover);
  box-shadow: 0 0.125rem 0.25rem 0 var(--app-primary-040);
}
.btn-check:focus + .btn-outline-primary, .btn-outline-primary:focus {
  color: #fff;
  background-color: var(--app-primary-hover);
  border-color: var(--app-primary-hover);
}
.btn-check:checked + .btn-outline-primary,
.btn-check:active + .btn-outline-primary,
.btn-outline-primary:active, .btn-outline-primary.active,
.btn-outline-primary.dropdown-toggle.show {
  color: #fff;
  background-color: var(--app-primary-active);
  border-color: var(--app-primary-active);
}
.btn-outline-primary .badge {
  background: var(--app-primary);
  border-color: var(--app-primary);
  color: #fff;
}
.btn-outline-primary:hover .badge,
.btn-outline-primary:focus:hover .badge,
.btn-outline-primary:active .badge,
.btn-outline-primary.active .badge,
.show > .btn-outline-primary.dropdown-toggle .badge {
  background: #fff;
  border-color: #fff;
  color: var(--app-primary);
}

/* ─── Dropdowns ───────────────────────────────────────── */
.dropdown-item:not(.disabled).active,
.dropdown-item:not(.disabled):active {
  background-color: var(--app-primary-008);
  color: var(--app-primary) !important;
}
.dropdown-menu > li:not(.disabled) > a:not(.dropdown-item):active,
.dropdown-menu > li.active:not(.disabled) > a:not(.dropdown-item) {
  background-color: var(--app-primary-008);
  color: var(--app-primary) !important;
}
.dropdown-notifications-item:not(.mark-as-read) .dropdown-notifications-read span {
  background-color: var(--app-primary);
}

/* ─── Nav / Pills ─────────────────────────────────────── */
.nav .nav-link:hover, .nav .nav-link:focus {
  color: var(--app-primary-hover);
}
.nav-pills .nav-link.active,
.nav-pills .nav-link.active:hover,
.nav-pills .nav-link.active:focus {
  background-color: var(--app-primary);
  color: #fff;
  box-shadow: 0 2px 4px 0 var(--app-primary-040);
}

/* ─── Pagination ──────────────────────────────────────── */
.page-item.active .page-link,
.page-item.active .page-link:hover,
.page-item.active .page-link:focus,
.pagination li.active > a:not(.page-link),
.pagination li.active > a:not(.page-link):hover,
.pagination li.active > a:not(.page-link):focus {
  border-color: var(--app-primary);
  background-color: var(--app-primary);
  color: #fff;
  box-shadow: 0 0.125rem 0.25rem var(--app-primary-040);
}

/* ─── Progress ────────────────────────────────────────── */
.progress-bar {
  background-color: var(--app-primary);
  color: #fff;
  box-shadow: 0 2px 4px 0 var(--app-primary-040);
}

/* ─── List Groups ─────────────────────────────────────── */
.list-group-item-primary {
  background-color: var(--app-primary-label-bg-alt);
  color: var(--app-primary) !important;
}
a.list-group-item-primary,
button.list-group-item-primary {
  color: var(--app-primary);
}
a.list-group-item-primary:hover, a.list-group-item-primary:focus,
button.list-group-item-primary:hover, button.list-group-item-primary:focus {
  color: var(--app-primary);
}
a.list-group-item-primary.active,
button.list-group-item-primary.active {
  border-color: var(--app-primary);
  background-color: var(--app-primary);
}
.list-group-item.active, .list-group-item.active:hover, .list-group-item.active:focus {
  border-color: var(--app-primary);
  background-color: var(--app-primary);
}

/* ─── Alerts ──────────────────────────────────────────── */
.alert-primary {
  background-color: var(--app-primary-label-bg);
  border-color: var(--app-primary-alert-border);
  color: var(--app-primary);
}
.alert-primary .alert-link {
  color: var(--app-primary);
}
.card .alert-primary hr {
  background-color: var(--app-primary) !important;
}

/* ─── Tables ──────────────────────────────────────────── */
.table-primary {
  --bs-table-bg: var(--app-primary-label-bg-alt);
}

/* ─── Forms ───────────────────────────────────────────── */
.form-control:focus,
.form-select:focus {
  border-color: var(--app-primary);
}
.input-group:focus-within .form-control,
.input-group:focus-within .input-group-text {
  border-color: var(--app-primary);
}
.form-check-input:focus {
  border-color: var(--app-primary);
  box-shadow: 0 2px 4px 0 var(--app-primary-040);
}
.form-check-input:checked, .form-check-input[type=checkbox]:indeterminate {
  background-color: var(--app-primary);
  border-color: var(--app-primary);
  box-shadow: 0 2px 4px 0 var(--app-primary-040);
}
.custom-option.checked {
  border: 1px solid var(--app-primary);
}
.form-control:focus ~ .form-label {
  border-color: var(--app-primary);
}
.form-floating > .form-control:focus ~ label,
.form-floating > .form-control:not(:placeholder-shown) ~ label,
.form-floating > .form-select ~ label {
  color: var(--app-primary);
}
.form-floating > .form-control:-webkit-autofill ~ label {
  color: var(--app-primary);
}

/* ─── Dividers ────────────────────────────────────────── */
.divider.divider-primary .divider-text:before,
.divider.divider-primary .divider-text:after {
  border-color: var(--app-primary);
}

/* ─── Toasts ──────────────────────────────────────────── */
.bg-primary.toast, .bg-primary.bs-toast {
  color: #fff;
  background-color: rgba(var(--app-primary-rgb), 0.85) !important;
  box-shadow: 0 0.25rem 1rem var(--app-primary-040);
}
.bg-primary.toast .toast-header .btn-close,
.bg-primary.bs-toast .toast-header .btn-close {
  background-color: var(--app-primary) !important;
}

/* ─── Sidebar / Menu — Active States ──────────────────── */
.bg-menu-theme .menu-inner > .menu-item.active > .menu-link {
  color: var(--app-primary);
  background-color: var(--app-primary-016) !important;
}
.bg-menu-theme .menu-inner > .menu-item.active:before {
  background: var(--app-primary);
}
.bg-menu-theme .menu-inner .menu-sub > .menu-item.active .menu-icon {
  color: var(--app-primary);
}
.bg-menu-theme .menu-sub > .menu-item.active > .menu-link:not(.menu-toggle):before {
  background-color: var(--app-primary) !important;
  border: 3px solid var(--app-primary-label-bg) !important;
}

/* Menu toggle button */
.app-brand .layout-menu-toggle {
  background-color: var(--app-primary);
}

/* ─── Sidebar — bg-primary colored menu ───────────────── */
.menu.bg-primary {
  background-color: var(--app-primary) !important;
  color: var(--app-primary-soft);
}
.menu.bg-primary .menu-link,
.menu.bg-primary .menu-horizontal-prev,
.menu.bg-primary .menu-horizontal-next {
  color: var(--app-primary-soft);
}
.menu.bg-primary .menu-item.active > .menu-link:not(.menu-toggle) {
  background-color: var(--app-primary-menu-active);
}
.menu.bg-primary.menu-horizontal .menu-sub > .menu-item.active > .menu-link:not(.menu-toggle) {
  background-color: var(--app-primary-menu-sub);
}
.menu.bg-primary.menu-horizontal .menu-inner .menu-item:not(.menu-item-closing) > .menu-sub,
.menu.bg-primary.menu-horizontal .menu-inner .menu-item.open > .menu-toggle {
  background: var(--app-primary-menu-active);
}
.menu.bg-primary .menu-inner-shadow {
  background: linear-gradient(var(--app-primary) 41%, rgba(var(--app-primary-rgb), 0.11) 95%, rgba(var(--app-primary-rgb), 0));
}
.menu.bg-primary .menu-header {
  color: var(--app-primary-softest);
}
.menu.bg-primary .menu-block::before {
  color: var(--app-primary-softest);
}
.menu.bg-primary .menu-inner > .menu-item.open .menu-item.open > .menu-toggle::before {
  background-color: var(--app-primary-menu-dot);
}
.menu.bg-primary .menu-inner > .menu-item.open .menu-item.open > .menu-toggle::before,
.menu.bg-primary .menu-inner > .menu-item.open .menu-item.active > .menu-link::before {
  box-shadow: 0 0 0 2px var(--app-primary-menu-active);
}

/* ─── Navbar — bg-primary ─────────────────────────────── */
.navbar.bg-primary {
  background-color: var(--app-primary) !important;
  color: var(--app-primary-soft);
}
.navbar.bg-primary .search-input-wrapper .search-input,
.navbar.bg-primary .search-input-wrapper .search-toggler {
  background-color: var(--app-primary) !important;
  color: var(--app-primary-soft);
}

/* ─── Footer — bg-primary ─────────────────────────────── */
.footer.bg-primary {
  background-color: var(--app-primary) !important;
  color: var(--app-primary-soft);
}

/* ─── Dashboard Welcome Gradients ─────────────────────── */
.app-welcome-header {
  background: linear-gradient(135deg, var(--app-primary) 0%, var(--app-primary-gradient-mid) 50%, var(--app-primary-gradient-end) 100%);
}
.app-welcome-header--admin {
  background: linear-gradient(135deg, var(--app-primary) 0%, var(--app-admin-gradient-mid) 50%, var(--app-admin-gradient-end) 100%);
}

/* ── Chart primary color helper ───────────────────────── */
:root {
  --app-chart-primary: var(--app-primary);
}