/* =====================================================================
   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    #cd9536
     Secondary  #76ab26

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

:root {
  /* --- Primary scale (#cd9536) --- */
  --kk-primary-50:  #fdf4e3;
  --kk-primary-100: #f9e3ba;
  --kk-primary-200: #f2d08f;
  --kk-primary-300: #e9ba64;
  --kk-primary-400: #dda74b;
  --kk-primary-500: #cd9536; /* base */
  --kk-primary-600: #b57e2c;
  --kk-primary-700: #9a681f;
  --kk-primary-800: #7f5218;
  --kk-primary-900: #5f3d11;

  /* --- Secondary scale (#76ab26) --- */
  --kk-secondary-50:  #f2f9e8;
  --kk-secondary-100: #e2f0c4;
  --kk-secondary-200: #cbe59b;
  --kk-secondary-300: #b0d572;
  --kk-secondary-400: #94bf4a;
  --kk-secondary-500: #76ab26; /* base */
  --kk-secondary-600: #61931d;
  --kk-secondary-700: #4e7a16;
  --kk-secondary-800: #3d610f;
  --kk-secondary-900: #2d4908;
}

/* 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: #cd9536;
  --ds-primary-rgb: 205, 149, 54;
  --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(205, 149, 54, 0.24) 0 8px 16px 0;

  /* secondary */
  --ds-secondary: #76ab26;
  --ds-secondary-rgb: 118, 171, 38;
  --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: #cd9536;
  --ds-link-color-rgb: 205, 149, 54;
  --ds-link-hover-color: var(--kk-primary-600);
  --ds-link-hover-color-rgb: 181, 126, 44;
  --ds-focus-ring-color: rgba(205, 149, 54, 0.25);

  /* typography — unify all font stacks (including monospace) to Google Sans Flex */
  --ds-font-sans-serif: "Google Sans Flex", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --ds-font-monospace: "Google Sans Flex", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --bs-font-sans-serif: var(--ds-font-sans-serif);
  --bs-font-monospace: var(--ds-font-sans-serif);
}

/* 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: #2a1f0a;
  --ds-secondary-bg-subtle: #111703;
  --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: 233, 186, 100;
  --ds-link-hover-color: var(--kk-primary-200);
  --ds-link-hover-color-rgb: 242, 208, 143;
  --ds-focus-ring-color: rgba(233, 186, 100, 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 (gold) --- */
.btn-primary {
  --ds-btn-bg: #cd9536;
  --ds-btn-border-color: #cd9536;
  --ds-btn-hover-bg: var(--kk-primary-600);
  --ds-btn-hover-border-color: var(--kk-primary-600);
  --ds-btn-focus-shadow-rgb: 205, 149, 54;
  --ds-btn-active-bg: var(--kk-primary-700);
  --ds-btn-active-border-color: var(--kk-primary-700);
  --ds-btn-disabled-bg: #cd9536;
  --ds-btn-disabled-border-color: #cd9536;
}
.btn-outline-primary {
  --ds-btn-color: #cd9536;
  --ds-btn-border-color: #cd9536;
  --ds-btn-hover-bg: #cd9536;
  --ds-btn-hover-border-color: #cd9536;
  --ds-btn-focus-shadow-rgb: 205, 149, 54;
  --ds-btn-active-bg: var(--kk-primary-700);
  --ds-btn-active-border-color: var(--kk-primary-700);
  --ds-btn-disabled-color: #cd9536;
  --ds-btn-disabled-border-color: #cd9536;
}

/* --- Buttons: secondary (brand green) --- */
.btn-secondary {
  --ds-btn-bg: #76ab26;
  --ds-btn-border-color: #76ab26;
  --ds-btn-hover-bg: var(--kk-secondary-600);
  --ds-btn-hover-border-color: var(--kk-secondary-600);
  --ds-btn-focus-shadow-rgb: 118, 171, 38;
  --ds-btn-active-bg: var(--kk-secondary-700);
  --ds-btn-active-border-color: var(--kk-secondary-700);
  --ds-btn-disabled-bg: #76ab26;
  --ds-btn-disabled-border-color: #76ab26;
}
.btn-outline-secondary {
  --ds-btn-color: #76ab26;
  --ds-btn-border-color: #76ab26;
  --ds-btn-hover-bg: #76ab26;
  --ds-btn-hover-border-color: #76ab26;
  --ds-btn-focus-shadow-rgb: 118, 171, 38;
  --ds-btn-active-bg: var(--kk-secondary-700);
  --ds-btn-active-border-color: var(--kk-secondary-700);
  --ds-btn-disabled-color: #76ab26;
  --ds-btn-disabled-border-color: #76ab26;
}

/* --- Form controls: placeholder vs input/active states --- */

/* 1. Placeholder state: muted neutral text, distinct from user inputs */
.form-control::-webkit-input-placeholder {
  color: #94a3b8 !important;
  opacity: 1 !important;
  font-weight: 400 !important;
}
.form-control::-moz-placeholder {
  color: #94a3b8 !important;
  opacity: 1 !important;
  font-weight: 400 !important;
}
.form-control:-ms-input-placeholder {
  color: #94a3b8 !important;
  opacity: 1 !important;
  font-weight: 400 !important;
}
.form-control::-ms-input-placeholder {
  color: #94a3b8 !important;
  opacity: 1 !important;
  font-weight: 400 !important;
}
.form-control::placeholder {
  color: #94a3b8 !important;
  opacity: 1 !important;
  font-weight: 400 !important;
}

/* 2. Input / Value state: deep, high-contrast, crisp text (distinct from placeholder) */
.form-control,
.form-select {
  color: #1e293b;
  font-weight: 500;
}

/* 3. Active / Focused state: sharpest contrast + brand focus ring */
.form-control:focus,
.form-control:focus-visible,
.form-select:focus,
.form-select:focus-visible {
  color: #0f172a;
  border-color: var(--kk-primary-400);
  box-shadow: 0 0 0 0.25rem rgba(205, 149, 54, 0.25);
  outline: 0;
}

.form-check-input:focus,
.form-switch .form-check-input:focus {
  border-color: var(--kk-primary-400);
  box-shadow: 0 0 0 0.25rem rgba(205, 149, 54, 0.25);
}
.form-check-input:checked {
  background-color: #cd9536;
  border-color: #cd9536;
}

/* 4. Disabled / Readonly state */
.form-control:disabled,
.form-control[readonly],
.form-select:disabled {
  background-color: #f1f5f9;
  color: #64748b;
  opacity: 1;
}

/* 5. Dark mode form control overrides */
[data-bs-theme="dark"] .form-control::-webkit-input-placeholder,
[data-bs-theme=dark] .form-control::-webkit-input-placeholder,
[data-bs-theme="dark"] .form-control::placeholder,
[data-bs-theme=dark] .form-control::placeholder {
  color: #64748b !important;
}

[data-bs-theme="dark"] .form-control,
[data-bs-theme=dark] .form-control,
[data-bs-theme="dark"] .form-select,
[data-bs-theme=dark] .form-select {
  color: #f8fafc;
}

[data-bs-theme="dark"] .form-control:focus,
[data-bs-theme=dark] .form-control:focus,
[data-bs-theme="dark"] .form-control:focus-visible,
[data-bs-theme=dark] .form-control:focus-visible,
[data-bs-theme="dark"] .form-select:focus,
[data-bs-theme=dark] .form-select:focus {
  color: #ffffff;
  border-color: var(--kk-primary-400);
  box-shadow: 0 0 0 0.25rem rgba(233, 186, 100, 0.25);
}

[data-bs-theme="dark"] .form-control:disabled,
[data-bs-theme=dark] .form-control:disabled,
[data-bs-theme="dark"] .form-control[readonly],
[data-bs-theme=dark] .form-control[readonly],
[data-bs-theme="dark"] .form-select:disabled,
[data-bs-theme=dark] .form-select:disabled {
  background-color: #1e293b;
  color: #94a3b8;
}

/* --- Nav pills, dropdowns, tabs --- */
.nav-pills .nav-link.active,
.nav-pills .show > .nav-link {
  background-color: #cd9536;
  color: #fff;
}
.dropdown-item.active,
.dropdown-item:active {
  background-color: #cd9536;
  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: #cd9536;
}

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

/* --- 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: #cd9536 !important;
  color: #fff !important;
}
.avatar-secondary,
.badge-secondary {
  background-color: #76ab26 !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: #cd9536;
}
a:hover {
  color: var(--kk-primary-600);
}

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

/* --- Indeterminate checkbox & range thumbs --- */
.form-check-input[type=checkbox]:indeterminate {
  background-color: #cd9536;
  border-color: #cd9536;
}
.form-range::-webkit-slider-thumb,
.form-range::-moz-range-thumb {
  background-color: #cd9536;
}
.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(205, 149, 54, 0.25);
}

/* --- Nav link focus ---- */
.nav-link:focus-visible {
  box-shadow: 0 0 0 0.25rem rgba(205, 149, 54, 0.25);
}

/* --- Nav Tabs (KejarKarir brand styling) --- */
.nav-tabs {
  --ds-nav-tabs-border-color: #e2e8f0;
  --ds-nav-tabs-link-hover-border-color: #e2e8f0 #e2e8f0 #e2e8f0;
  --ds-nav-tabs-link-active-color: #cd9536;
  --ds-nav-tabs-link-active-bg: #ffffff;
  --ds-nav-tabs-link-active-border-color: #e2e8f0 #e2e8f0 #ffffff;
}
.nav-tabs .nav-link {
  color: #64748b;
  font-weight: 500;
  border-top-left-radius: 0.5rem;
  border-top-right-radius: 0.5rem;
  transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out;
}
.nav-tabs .nav-link:hover:not(.active) {
  color: #cd9536;
  border-color: transparent transparent #e2e8f0;
}
.nav-tabs .nav-link.active {
  color: #cd9536 !important;
  font-weight: 600;
  background-color: #ffffff !important;
  border-color: #e2e8f0 #e2e8f0 #ffffff !important;
  /*border-top: 2.5px solid #cd9536 !important;*/
}
.card-header-tabs {
  margin-bottom: -1px;
}

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

/* --- Avatar initials (background lives on the child) --- */
.avatar-primary .avatar-initials {
  background-color: #cd9536;
  color: var(--ds-white);
}
.avatar-secondary .avatar-initials {
  background-color: #76ab26;
  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: #cd9536;
}
.carousel-control-next-icon,
.carousel-control-prev-icon {
  filter: invert(58%) sepia(52%) saturate(600%) hue-rotate(355deg) brightness(92%);
}
.carousel-indicators [data-bs-target] {
  background-color: #cd9536;
}

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

/* =====================================================================
   Part 4/4 — Login pages background.
   Brand primary (#cd9536) as a soft wash at 10% opacity on the <body>.
   Uses rgba(alpha) — NOT CSS `opacity` — so page content stays opaque.
   ===================================================================== */
body.kk-login-bg {
  background-color: rgba(var(--ds-primary-rgb), 0.10);
}

/* --- In-App Notifications (PRD v1.0) --- */
.bg-primary-subtle-light {
  background-color: rgba(205, 149, 54, 0.06);
}
[data-bs-theme="dark"] .bg-primary-subtle-light {
  background-color: rgba(205, 149, 54, 0.15) !important;
}
.notification-item {
  transition: background-color 0.15s ease-in-out;
}
.notification-item:hover {
  background-color: rgba(0, 0, 0, 0.02);
}
[data-bs-theme="dark"] .notification-item:hover {
  background-color: rgba(255, 255, 255, 0.04);
}

/* =====================================================================
   Dashboard Super Admin (PRD_KejarKarir_Dashboard_SuperAdmin.md)
   Kartu metrik deep-link (D1–D3) — indikator visual dapat ditekan (§11 PRD).
   ===================================================================== */
.kk-metric-card--link {
  transition: box-shadow 0.15s ease-in-out, transform 0.15s ease-in-out;
}

.kk-metric-card--link:hover {
  box-shadow: 0 0.5rem 1.25rem rgba(0, 0, 0, 0.1) !important;
  transform: translateY(-2px);
}

[data-bs-theme="dark"] .kk-metric-card--link:hover {
  box-shadow: 0 0.5rem 1.25rem rgba(0, 0, 0, 0.5) !important;
}

/* Blok footer opsional di dalam kartu metrik (mis. filter periode D3-S2 AC.2).
   Di-pin ke dasar kartu lewat `mt-auto` dari view agar tinggi kartu seragam;
   z-index dinaikkan supaya kontrol tetap bisa diklik meski kartu memakai
   stretched-link. */
.kk-metric-card__slot {
  position: relative;
  z-index: 2;
}

/* Wadah grafik tren visitor (D4). Tinggi tetap supaya layout tidak bergeser
   saat ApexCharts selesai render. */
.kk-dashboard-chart {
  height: 340px;
  min-height: 340px;
}

/* Fokus keyboard untuk kartu deep-link (aksesibilitas). */
.kk-metric-card .stretched-link:focus-visible {
  outline: 2px solid var(--ds-primary);
  outline-offset: 2px;
  border-radius: 1rem;
}

/* --- Compact badge/element width utility --- */
.w-fit {
  width: fit-content !important;
}

/* =====================================================================
   Sidebar badge positioning.
   The theme ships `display:block` for sidebar nav-links, which makes the
   `ms-auto` utility on badges inert (auto margins need a flex container),
   so badges end up glued to the label instead of the right corner of the
   menu item. Force flex rows: `.text` grows, badge is pushed to the far
   right corner of the item (see design-rules §Sidebar).
   ===================================================================== */
#miniSidebar .navbar-nav > li > .nav-link,
.offcanvasNav .navbar-nav > li > .nav-link {
  display: flex;
  align-items: center;
}
#miniSidebar .navbar-nav > li > .nav-link > .text,
.offcanvasNav .navbar-nav > li > .nav-link > .text {
  flex: 1 1 auto;
  min-width: 0;
}
#miniSidebar .navbar-nav > li > .nav-link > .badge,
.offcanvasNav .navbar-nav > li > .nav-link > .badge {
  flex: 0 0 auto;
  margin-left: auto;
}

/* --- Typography: enforce Google Sans Flex across code, pre, kbd, samp & font-monospace --- */
.font-monospace,
code,
kbd,
pre,
samp {
  font-family: "Google Sans Flex", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important;
}

/* --- Tables inside Cards: prevent thead/tbody corners from cutting off card borders --- */
.card > .table-responsive:first-child {
  border-top-left-radius: calc(var(--ds-card-inner-border-radius, 1rem) - 1px);
  border-top-right-radius: calc(var(--ds-card-inner-border-radius, 1rem) - 1px);
}
.card > .table-responsive:first-child > .table > thead:first-child > tr:first-child > :first-child,
.card > .table-responsive:first-child > .table > tbody:first-child > tr:first-child > :first-child {
  border-top-left-radius: calc(var(--ds-card-inner-border-radius, 1rem) - 1px);
}
.card > .table-responsive:first-child > .table > thead:first-child > tr:first-child > :last-child,
.card > .table-responsive:first-child > .table > tbody:first-child > tr:first-child > :last-child {
  border-top-right-radius: calc(var(--ds-card-inner-border-radius, 1rem) - 1px);
}
.card > .table-responsive:last-child {
  border-bottom-left-radius: calc(var(--ds-card-inner-border-radius, 1rem) - 1px);
  border-bottom-right-radius: calc(var(--ds-card-inner-border-radius, 1rem) - 1px);
}
.card > .table-responsive:last-child > .table > tbody:last-child > tr:last-child > * {
  border-bottom-width: 0;
}
.card > .table-responsive:last-child > .table > tbody:last-child > tr:last-child > :first-child {
  border-bottom-left-radius: calc(var(--ds-card-inner-border-radius, 1rem) - 1px);
}
.card > .table-responsive:last-child > .table > tbody:last-child > tr:last-child > :last-child {
  border-bottom-right-radius: calc(var(--ds-card-inner-border-radius, 1rem) - 1px);
}