/* KawalAksi Bootstrap 5 Theme — Primary #5C0931  */
:root{
  /* Brand tokens */
  --ka-primary:#5C0931;
  --ka-primary-600:#6b123f;   /* hover */
  --ka-primary-700:#4a0826;   /* active */
  --ka-primary-200:#f1e6ec;   /* subtle bg */
  --ka-primary-300:#e3ccd8;   /* subtle border */
  --ka-primary-900:#2b0316;   /* emphasis text */
  --ka-secondary:#9B6B84;
  --ka-bg:#FAF8FA;
  --ka-body:#2E2E2E;

  /* Bootstrap core overrides */
  --bs-primary:var(--ka-primary);
  --bs-primary-rgb:92,9,49;
  --bs-body-bg:var(--ka-bg);
  --bs-body-color:var(--ka-body);
  --bs-link-color:var(--ka-primary);
  --bs-link-hover-color:var(--ka-primary-600);
  --bs-focus-ring-color:rgba(var(--bs-primary-rgb),.25);

  /* Subtle tokens (BS 5.3+) */
  --bs-primary-text-emphasis:var(--ka-primary-900);
  --bs-primary-bg-subtle:var(--ka-primary-200);
  --bs-primary-border-subtle:var(--ka-primary-300);

  --bs-secondary:var(--ka-secondary);
  --bs-secondary-rgb:155,107,132;
  --bs-secondary-text-emphasis:#3f2c35;
  --bs-secondary-bg-subtle:#f2e9ed;
  --bs-secondary-border-subtle:#e6d7df;
}

/* Buttons */
.btn-primary{
  --bs-btn-bg:var(--ka-primary);
  --bs-btn-border-color:var(--ka-primary);
  --bs-btn-hover-bg:var(--ka-primary-600);
  --bs-btn-hover-border-color:var(--ka-primary-600);
  --bs-btn-active-bg:var(--ka-primary-700);
  --bs-btn-active-border-color:var(--ka-primary-700);
}
.btn-outline-primary{
  --bs-btn-color:var(--ka-primary);
  --bs-btn-border-color:var(--ka-primary);
  --bs-btn-hover-bg:var(--ka-primary);
  --bs-btn-hover-border-color:var(--ka-primary);
}

/* Badges / Alerts / Cards */
.badge.bg-primary-subtle{
  color:var(--bs-primary-text-emphasis);
  border:1px solid var(--bs-primary-border-subtle);
}
.alert-primary{
  --bs-alert-color:var(--bs-primary-text-emphasis);
  --bs-alert-bg:var(--bs-primary-bg-subtle);
  --bs-alert-border-color:var(--bs-primary-border-subtle);
}
.card{border-color:#eee;box-shadow:0 2px 10px rgba(0,0,0,.04)}
.card-header{
  background:var(--bs-primary-bg-subtle);
  color:var(--bs-primary-text-emphasis);
  border-bottom-color:var(--bs-primary-border-subtle);
}

/* Tables & stripes */
.table thead{
  background:var(--bs-primary-bg-subtle);
  color:var(--bs-primary-text-emphasis);
  border-bottom:1px solid var(--bs-primary-border-subtle);
}
.table-striped>tbody>tr:nth-of-type(odd){
  --bs-table-accent-bg:color-mix(in srgb,var(--bs-primary-bg-subtle) 30%,transparent);
}

/* Pagination */
.pagination .page-link{color:var(--ka-primary);border-color:#e6d7df}
.pagination .page-link:hover{color:#fff;background:var(--ka-primary);border-color:var(--ka-primary)}
.pagination .page-item.active .page-link{color:#fff;background:var(--ka-primary);border-color:var(--ka-primary)}

/* Progress */
.progress{background:#efe5ea}
.progress-bar{background:var(--ka-primary)}

/* Navbar */
.navbar,
.navbar.navbar-dark{
  background:linear-gradient(90deg,var(--ka-primary) 0%,var(--ka-primary-600) 100%);
}
.navbar .navbar-brand,.navbar .nav-link,.navbar .navbar-toggler{color:#fff}
.navbar .nav-link:hover{color:#fff;opacity:.9}

/* Forms / switches */
.form-check-input:checked{background:var(--ka-primary);border-color:var(--ka-primary)}
.form-switch .form-check-input:checked{background:var(--ka-primary);border-color:var(--ka-primary)}
.form-range::-webkit-slider-thumb{background:var(--ka-primary)}
.form-range::-moz-range-thumb{background:var(--ka-primary)}

/* Links */
a{color:var(--ka-primary)}
a:hover{color:var(--ka-primary-600)}

/* Sidebar highlight (kalau ada) */
.sidebar .nav-link.active{background:var(--ka-primary);color:#fff!important}
.sidebar .nav-link:hover{background:var(--ka-primary-600);color:#fff!important}

/* DataTables (opsional) */
.dataTables_wrapper .dataTables_paginate .paginate_button.current{
  background:var(--ka-primary)!important;color:#fff!important;border:none!important
}
.dataTables_wrapper .dataTables_paginate .paginate_button:hover{
  background:var(--ka-primary-600)!important;color:#fff!important
}

/* Brand logo chip biar kontras di header */
.navbar-brand img{
  height:36px;background:#fff;border-radius:8px;padding:3px 6px;box-shadow:0 0 3px rgba(0,0,0,.15)
}
/* === KawalAksi badge counts (Sasaran, IKU, IKU Proksi) === */

/* Umum: sedikit lebih besar, bold */
.badge-ka {
  font-size: 0.95rem;       /* sedikit lebih besar dari default 0.75 */
  font-weight: 600;
  padding: 0.35em 0.75em;
  border-radius: 0.65rem;
}

/* Warna sesuai tema */
.badge-ka-sasaran {
  background-color: #f1e6ec;     /* lembut pastel ungu muda */
  color: #5C0931;                /* teks utama */
  border: 1px solid #5C0931;
}

.badge-ka-iku {
  background-color: #e8d7df;
  color: #5C0931;
  border: 1px solid #7A274F;
}

.badge-ka-proksi {
  background-color: #7A274F;     /* solid ungu gelap */
  color: #fff;
  border: 1px solid #5C0931;
}

/* Hover efek halus */
a.badge-ka:hover {
  filter: brightness(0.95);
  text-decoration: none;
}
/* === Thematic form-select & dropdown menu styling === */

/* Ubah warna border, fokus, dan panah dropdown */
.form-select,
select.form-select {
  border: 1px solid var(--ka-primary-300);
  color: var(--ka-body);
  background-color: #fff;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--ka-primary) 50%),
    linear-gradient(135deg, var(--ka-primary) 50%, transparent 50%);
  background-position:
    calc(100% - 15px) calc(1em + 2px),
    calc(100% - 10px) calc(1em + 2px);
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
}

.form-select:focus {
  border-color: var(--ka-primary);
  box-shadow: 0 0 0 0.25rem rgba(var(--bs-primary-rgb), 0.25);
  outline: none;
}

/* Gaya disabled */
.form-select:disabled {
  background-color: #f9f9f9;
  color: #888;
  opacity: 0.8;
}

/* Dropdown menu (misal .dropdown-menu pada tombol) */
.dropdown-menu {
  border-color: var(--ka-primary-300);
  box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}

.dropdown-item.active,
.dropdown-item:active {
  background-color: var(--ka-primary);
  color: #fff;
}

.dropdown-item:hover {
  background-color: var(--ka-primary-200);
  color: var(--ka-primary-900);
}
.form-select {
  transition: all 0.2s ease;
  border-radius: 0.5rem;
}

.form-select:hover {
  border-color: var(--ka-primary);
}

/* === Select2 theming (match #5C0931) === */
/* Select2 theming to match #5C0931 */
/* Select2 KawalAksi (#5C0931) */
.select2-container--bootstrap-5 .select2-selection{
  border-color: var(--ka-primary-300);
  min-height: 2.5rem; border-radius: .6rem;
}
.select2-container--bootstrap-5.select2-container--focus .select2-selection{
  border-color: var(--ka-primary);
  box-shadow: 0 0 0 .25rem rgba(var(--bs-primary-rgb), .25);
}
.select2-dropdown{ border-color: var(--ka-primary-300); box-shadow: 0 6px 14px rgba(0,0,0,.08); }
.select2-container--bootstrap-5 .select2-results__option--highlighted{ background: var(--ka-primary); color:#fff; }
.select2-container--bootstrap-5 .select2-results__option[aria-selected=true]{ background: var(--ka-primary-200); color: var(--ka-primary-900); }

/* Untuk item di-hover */
.select2-container--bootstrap-5 .select2-results__option--highlighted {
  background-color: #5C0931;   /* warna tema kamu */
  color: #fff;
}

/* Untuk item yang sedang dipilih */
.select2-container--bootstrap-5 .select2-results__option[aria-selected=true] {
  background-color: #f1e6ec;   /* ungu muda lembut */
  color: #5C0931;
}

/* Wrap teks panjang pada Select2 (list & tampilan terpilih) */
.select2-container--bootstrap-5 .select2-results__option {
  white-space: normal;        /* allow wrapping */
  line-height: 1.25rem;
}
.select2-container--bootstrap-5 .select2-selection__rendered {
  white-space: normal !important;
}
.select2-container--bootstrap-5 .select2-results__option--highlighted{
  background-color:#5C0931; color:#fff;
}
.select2-container--bootstrap-5 .select2-results__option[aria-selected=true]{
  background-color:#f1e6ec; color:#5C0931;
}
/* Tinggi Select2 dinamis menyesuaikan isi */
.select2-container--bootstrap-5 .select2-selection--single {
  height: auto !important;             /* biar tingginya fleksibel */
  min-height: 2.4rem !important;       /* minimal tetap rapi */
  display: flex;
  align-items: center;
  padding-top: 0.4rem;
  padding-bottom: 0.4rem;
  white-space: normal !important;      /* teks bisa wrap */
  line-height: 1.4rem;
}

/* teks terpilih dalam field Select2 bisa multiline */
.select2-container--bootstrap-5 .select2-selection__rendered {
  white-space: normal !important;
  line-height: 1.3rem;
  padding-right: 2rem; /* beri ruang untuk ikon panah */
}

/* panah tetap sejajar vertikal */
.select2-container--bootstrap-5 .select2-selection__arrow {
  top: 0.6rem !important;
}
:root {
  /* Warna utama dan turunan */
  --ka-primary: #5C0931;
  --ka-primary-light: #7a234f;
  --ka-primary-soft: #f9f0f4;
}

/* Fokus & hover untuk semua input */
.form-control:focus,
.form-select:focus {
  border-color: var(--ka-primary) !important;
  box-shadow: 0 0 0 0.25rem rgba(92, 9, 49, 0.25) !important;
}

/* Hover ringan agar serasi dengan tema */
.form-control:hover,
.form-select:hover {
  border-color: var(--ka-primary-light);
  background-color: var(--ka-primary-soft);
  transition: all 0.15s ease-in-out;
}

/* Placeholder warna sedikit lebih lembut */
.form-control::placeholder {
  color: #b78fa3;
  opacity: 1;
}

/* Label juga bisa sedikit disesuaikan */
.form-label {
  color: var(--ka-primary);
  font-weight: 500;
}

/* Select2 juga disesuaikan */
.select2-container--bootstrap-5 .select2-selection--single:hover {
  border-color: var(--ka-primary-light) !important;
  background-color: var(--ka-primary-soft) !important;
}

.select2-container--bootstrap-5 .select2-selection--single:focus {
  border-color: var(--ka-primary) !important;
  box-shadow: 0 0 0 0.25rem rgba(92, 9, 49, 0.25) !important;
}