/* =====================================================================
   KejarKarir — Brand Theme Override (Part 1/2: Brand tokens + Bootstrap vars)
   Implements the project palette on top of the "Dash UI" (Codescandy) admin theme,
   which ships as a precompiled theme.min.css exposing --ds-* CSS custom props (renamed Bootstrap vars).

   Palette:
     Primary    #37618A
     Secondary  #EF8781

   Load AFTER theme.min.css. See design-rules.md for detail.
   ===================================================================== */

:root {
  /* --- Primary scale (#37618A) --- */
  --kk-primary-50:  #e7ecf1;
  --kk-primary-100: #cdd8e2;
  --kk-primary-200: #a5b8ca;
  --kk-primary-300: #7d98b3;
  --kk-primary-400: #597c9e;
  --kk-primary-500: #37618A; /* base */
  --kk-primary-600: #2e5173;
  --kk-primary-700: #243f5a;
  --kk-primary-800: #192c3e;
  --kk-primary-900: #0e1823;

  /* --- Secondary scale (#EF8781) --- */
  --kk-secondary-50:  #fdf1f0;
  --kk-secondary-100: #fbe1e0;
  --kk-secondary-200: #f8c9c6;
  --kk-secondary-300: #f5b1ad;
  --kk-secondary-400: #f29b96;
  --kk-secondary-500: #EF8781; /* base */
  --kk-secondary-600: #c6706b;
  --kk-secondary-700: #9b5854;
  --kk-secondary-800: #6c3d3a;
  --kk-secondary-900: #3c2220;
}

/* Redefine the theme's Bootstrap variables (light). The theme reads --ds-* at
   :root / [data-bs-theme=light]; we re-declare later so our tokens win. */
:root,
[data-bs-theme="light"],
[data-bs-theme=light] {
  /* primary */
  --ds-primary: #37618A;
  --ds-primary-rgb: 55, 97, 138;
  --ds-primary-lighter: var(--kk-primary-100);
  --ds-primary-light: var(--kk-primary-300);
  --ds-primary-dark: var(--kk-primary-700);
  --ds-primary-darker: var(--kk-primary-900);
  --ds-primary-text-emphasis: var(--kk-primary-800);
  --ds-primary-bg-subtle: var(--kk-primary-100);
  --ds-primary-border-subtle: var(--kk-primary-300);
  --ds-box-shadow-primary: rgba(55, 97, 138, 0.24) 0 8px 16px 0;

  /* secondary */
  --ds-secondary: #EF8781;
  --ds-secondary-rgb: 239, 135, 129;
  --ds-secondary-lighter: var(--kk-secondary-100);
  --ds-secondary-light: var(--kk-secondary-300);
  --ds-secondary-dark: var(--kk-secondary-700);
  --ds-secondary-darker: var(--kk-secondary-900);
  --ds-secondary-text-emphasis: var(--kk-secondary-800);
  --ds-secondary-bg-subtle: var(--kk-secondary-100);
  --ds-secondary-border-subtle: var(--kk-secondary-300);

  /* links & focus */
  --ds-link-color: #37618A;
  --ds-link-color-rgb: 55, 97, 138;
  --ds-link-hover-color: var(--kk-primary-600);
  --ds-link-hover-color-rgb: 46, 81, 115;
  --ds-focus-ring-color: rgba(55, 97, 138, 0.25);
}

/* dark mode equivalents (brighter tints on the dark surfaces) */
[data-bs-theme="dark"],
[data-bs-theme=dark] {
  --ds-primary-text-emphasis: var(--kk-primary-300);
  --ds-secondary-text-emphasis: var(--kk-secondary-300);
  --ds-primary-bg-subtle: #0e1823;
  --ds-secondary-bg-subtle: #3c2220;
  --ds-primary-border-subtle: var(--kk-primary-800);
  --ds-secondary-border-subtle: var(--kk-secondary-800);
  --ds-link-color: var(--kk-primary-300);
  --ds-link-color-rgb: 125, 152, 179;
  --ds-link-hover-color: var(--kk-primary-200);
  --ds-link-hover-color-rgb: 165, 184, 202;
  --ds-focus-ring-color: rgba(125, 152, 179, 0.25);
}
/* =====================================================================
   Part 2/2 — Component overrides.
   The theme hard-codes the old primary (#00a76f) inside component rules
   (e.g. --ds-btn-bg:#00a76f). Those win over the :root vars because they
   are set on the component itself, so we must re-declare them here.
   ===================================================================== */

/* --- Buttons: primary (brand blue) --- */
.btn-primary {
  --ds-btn-bg: #37618A;
  --ds-btn-border-color: #37618A;
  --ds-btn-hover-bg: var(--kk-primary-600);
  --ds-btn-hover-border-color: var(--kk-primary-600);
  --ds-btn-focus-shadow-rgb: 55, 97, 138;
  --ds-btn-active-bg: var(--kk-primary-700);
  --ds-btn-active-border-color: var(--kk-primary-700);
  --ds-btn-disabled-bg: #37618A;
  --ds-btn-disabled-border-color: #37618A;
}
.btn-outline-primary {
  --ds-btn-color: #37618A;
  --ds-btn-border-color: #37618A;
  --ds-btn-hover-bg: #37618A;
  --ds-btn-hover-border-color: #37618A;
  --ds-btn-focus-shadow-rgb: 55, 97, 138;
  --ds-btn-active-bg: var(--kk-primary-700);
  --ds-btn-active-border-color: var(--kk-primary-700);
  --ds-btn-disabled-color: #37618A;
  --ds-btn-disabled-border-color: #37618A;
}

/* --- Buttons: secondary (brand coral) --- */
.btn-secondary {
  --ds-btn-bg: #EF8781;
  --ds-btn-border-color: #EF8781;
  --ds-btn-hover-bg: var(--kk-secondary-600);
  --ds-btn-hover-border-color: var(--kk-secondary-600);
  --ds-btn-focus-shadow-rgb: 239, 135, 129;
  --ds-btn-active-bg: var(--kk-secondary-700);
  --ds-btn-active-border-color: var(--kk-secondary-700);
  --ds-btn-disabled-bg: #EF8781;
  --ds-btn-disabled-border-color: #EF8781;
}
.btn-outline-secondary {
  --ds-btn-color: #EF8781;
  --ds-btn-border-color: #EF8781;
  --ds-btn-hover-bg: #EF8781;
  --ds-btn-hover-border-color: #EF8781;
  --ds-btn-focus-shadow-rgb: 239, 135, 129;
  --ds-btn-active-bg: var(--kk-secondary-700);
  --ds-btn-active-border-color: var(--kk-secondary-700);
  --ds-btn-disabled-color: #EF8781;
  --ds-btn-disabled-border-color: #EF8781;
}

/* --- Form controls: focus ring + checked state --- */
.form-control:focus,
.form-select:focus,
.form-check-input:focus,
.form-switch .form-check-input:focus {
  border-color: var(--kk-primary-400);
  box-shadow: 0 0 0 0.25rem rgba(55, 97, 138, 0.25);
}
.form-check-input:checked {
  background-color: #37618A;
  border-color: #37618A;
}

/* --- Nav pills, dropdowns, tabs --- */
.nav-pills .nav-link.active,
.nav-pills .show > .nav-link {
  background-color: #37618A;
  color: #fff;
}
.dropdown-item.active,
.dropdown-item:active {
  background-color: #37618A;
  color: #fff;
}
.nav-tabs .nav-link.active {
  border-color: var(--kk-primary-300) var(--kk-primary-300) var(--ds-body-bg);
}

/* --- Progress bars --- */
.progress-bar {
  background-color: #37618A;
}

/* --- Pagination active --- */
.page-item.active .page-link {
  background-color: #37618A;
  border-color: #37618A;
}

/* --- Utilities (keep text/bg/border brand tokens) --- */
.text-primary { color: rgba(var(--ds-primary-rgb), var(--ds-text-opacity, 1)) !important; }
.bg-primary { background-color: rgba(var(--ds-primary-rgb), var(--ds-bg-opacity, 1)) !important; }
.border-primary { border-color: rgba(var(--ds-primary-rgb), 1) !important; }

.text-secondary { color: var(--kk-secondary-700) !important; }
.bg-secondary { background-color: rgba(var(--ds-secondary-rgb), var(--ds-bg-opacity, 1)) !important; }
.border-secondary { border-color: rgba(var(--ds-secondary-rgb), 1) !important; }

/* Muted text must stay neutral (theme uses --ds-secondary-color for it). */
.text-muted,
.text-secondary-color {
  color: var(--ds-secondary-color) !important;
}

/* Avatar & badge emphasis helpers */
.avatar-primary,
.badge-primary {
  background-color: #37618A !important;
  color: #fff !important;
}
.avatar-secondary,
.badge-secondary {
  background-color: #EF8781 !important;
  color: #fff !important;
}
/* =====================================================================
   Part 3/3 — Extra component coverage from the full audit.
   Catches remaining hardcoded old-green (#00a76f etc.) so the brand
   palette completely covers the UI.
   ===================================================================== */

/* --- Links --- */
a {
  color: #37618A;
}
a:hover {
  color: var(--kk-primary-600);
}

/* --- Subtle primary button (used across CRUD pages) --- */
.btn-subtle-primary {
  --ds-btn-color: #37618A;
  --ds-btn-bg: rgba(55, 97, 138, 0.11);
  --ds-btn-hover-color: var(--kk-primary-700);
  --ds-btn-hover-bg: rgba(55, 97, 138, 0.21);
  --ds-btn-focus-shadow-rgb: 55, 97, 138;
  --ds-btn-active-color: var(--kk-primary-700);
  --ds-btn-active-bg: rgba(55, 97, 138, 0.21);
  --ds-btn-disabled-color: #37618A;
  --ds-btn-disabled-bg: rgba(55, 97, 138, 0.21);
}

/* --- Indeterminate checkbox & range thumbs --- */
.form-check-input[type=checkbox]:indeterminate {
  background-color: #37618A;
  border-color: #37618A;
}
.form-range::-webkit-slider-thumb,
.form-range::-moz-range-thumb {
  background-color: #37618A;
}
.form-range:focus::-webkit-slider-thumb,
.form-range:focus::-moz-range-thumb {
  box-shadow: 0 0 0 1px #fff, 0 0 0 0.25rem rgba(55, 97, 138, 0.25);
}

/* --- Nav link focus ---- */
.nav-link:focus-visible {
  box-shadow: 0 0 0 0.25rem rgba(55, 97, 138, 0.25);
}

/* --- Per-component variables (theme declares them) --- */
.nav-pills {
  --ds-nav-pills-link-active-bg: #37618A;
  --ds-nav-pills-link-active-color: #fff;
}
.dropdown-menu,
.dropdown-menu-dark {
  --ds-dropdown-link-active-bg: #37618A;
  --ds-dropdown-link-active-color: #fff;
}
.list-group {
  --ds-list-group-active-bg: #37618A;
  --ds-list-group-active-border-color: #37618A;
  --ds-list-group-active-color: #fff;
}
.navbar {
  --ds-navbar-hover-color: #37618A;
}
.progress,
.progress-stacked {
  --ds-progress-bar-bg: #37618A;
}
.pagination {
  --ds-pagination-hover-bg: #37618A;
  --ds-pagination-hover-border-color: #37618A;
  --ds-pagination-focus-bg: #37618A;
  --ds-pagination-focus-box-shadow: 0 0 0 0.25rem rgba(55, 97, 138, 0.25);
}
.accordion {
  --ds-accordion-btn-focus-box-shadow: 0 0 0 0.25rem rgba(55, 97, 138, 0.25);
}
.btn-close {
  --ds-btn-close-focus-shadow: 0 0 0 0.25rem rgba(55, 97, 138, 0.25);
}

/* --- Avatar initials (background lives on the child) --- */
.avatar-primary .avatar-initials {
  background-color: #37618A;
  color: var(--ds-white);
}
.avatar-secondary .avatar-initials {
  background-color: #EF8781;
  color: var(--ds-white);
}

/* --- Carousel (kept consistent; rarely used in admin) --- */
.carousel-caption,
.carousel-control-next,
.carousel-control-prev,
.carousel-control-next:hover,
.carousel-control-prev:hover,
.carousel-control-next:focus,
.carousel-control-prev:focus {
  color: #37618A;
}
.carousel-control-next-icon,
.carousel-control-prev-icon {
  filter: invert(45%) sepia(4%) saturate(50%) hue-rotate(168deg) brightness(80%) contrast(104%);
}
.carousel-indicators [data-bs-target] {
  background-color: #37618A;
}

/* --- Flatpickr selected week (audit date picker) --- */
.flatpickr-day.week.selected {
  box-shadow: -5px 0 0 #37618A, 5px 0 0 var(--ds-primary);
}