/* ============================================================
   APIK — Palet status & pemetaan warna bawaan Bootstrap
   SATU-SATUNYA tempat warna status didefinisikan.

   Dimuat SEBELUM app.css / apik.css pada ketiga layout, sehingga aturan
   khusus halaman tetap bisa menimpanya bila memang perlu. Jangan
   mendefinisikan ulang token --ok/--warn/--danger/--info di berkas lain:
   dua sumber warna pasti berbeda cepat atau lambat.
   ============================================================ */
:root {
  /* Warna status — palet TERPISAH dari warna identitas (navy/emas), khusus
     menandai KEADAAN: baik / perhatian / genting / sedang berjalan.

     Setiap nada punya tiga bentuk:
       --x       nada dasar, untuk isian penuh, garis, dan ikon
       --x-bg    latar lembut, untuk lencana & pesan sistem
       --x-ink   nada TULISAN di atas latar lembut maupun putih

     Kenapa ada -ink terpisah: nada dasar APIK yang lama dipakai langsung
     sebagai warna tulisan dan ternyata di bawah ambang WCAG AA 4,5:1 —
     --ok hanya 3,56:1 di atas --ok-bg, --danger 4,23:1, --warn 4,17:1, dan
     --gold-dark cuma 2,47:1. Nada -ink di bawah ini semuanya >= 4,5:1
     sementara nada dasarnya tetap utuh supaya tampilan tidak berubah. */
  --ok: #1E8E5A;      --ok-bg: #E4F1EB;      --ok-ink: #136B43;
  --warn: #9A6B0A;    --warn-bg: #FDF1D3;    --warn-ink: #7C5206;
  --danger: #C4442A;  --danger-bg: #F8E9E5;  --danger-ink: #A3341C;
  --info: #14558C;    --info-bg: #E6EDF6;    --info-ink: #14558C;
  --netral-ink: #4A5B73;  --netral-bg: #EEF2F8;
  /* Tulisan di atas latar emas muda (lencana golongan, jenis SK). */
  --emas-ink: #7A5C15;
}

/* ============================================================
   TOMBOL
   Nada biru terang bawaan Bootstrap (#0D6EFD) sama sekali tidak seirama
   dengan palet Kemenimipas. Dipetakan ke navy/emas/status APIK lewat
   variabel tombol Bootstrap 5.3, sehingga tidak satu pun view perlu
   disunting dan tombol baru mana pun ikut seragam otomatis.
   ============================================================ */
.btn-primary {
  --bs-btn-bg: var(--navy); --bs-btn-border-color: var(--navy); --bs-btn-color: #fff;
  --bs-btn-hover-bg: var(--navy-2); --bs-btn-hover-border-color: var(--navy-2); --bs-btn-hover-color: #fff;
  --bs-btn-active-bg: var(--navy-2); --bs-btn-active-border-color: var(--navy-2); --bs-btn-active-color: #fff;
  --bs-btn-disabled-bg: var(--navy); --bs-btn-disabled-border-color: var(--navy);
  font-weight: 600;
}
.btn-outline-primary {
  --bs-btn-color: var(--navy); --bs-btn-border-color: var(--navy);
  --bs-btn-hover-bg: var(--navy); --bs-btn-hover-border-color: var(--navy); --bs-btn-hover-color: #fff;
  --bs-btn-active-bg: var(--navy-2); --bs-btn-active-border-color: var(--navy-2);
  --bs-btn-disabled-color: var(--navy); --bs-btn-disabled-border-color: var(--navy);
  font-weight: 600;
}
.btn-secondary {
  --bs-btn-bg: #5A6B80; --bs-btn-border-color: #5A6B80;
  --bs-btn-hover-bg: var(--netral-ink); --bs-btn-hover-border-color: var(--netral-ink);
  --bs-btn-active-bg: var(--netral-ink); --bs-btn-active-border-color: var(--netral-ink);
}
.btn-outline-secondary {
  --bs-btn-color: #45566F; --bs-btn-border-color: #D3DCEA;
  --bs-btn-hover-bg: var(--navy); --bs-btn-hover-border-color: var(--navy); --bs-btn-hover-color: #fff;
  --bs-btn-active-bg: var(--navy-2); --bs-btn-active-border-color: var(--navy-2);
}
.btn-success {
  --bs-btn-bg: var(--ok-ink); --bs-btn-border-color: var(--ok-ink);
  --bs-btn-hover-bg: #0E5F3C; --bs-btn-hover-border-color: #0E5F3C;
  --bs-btn-active-bg: #0E5F3C; --bs-btn-active-border-color: #0E5F3C;
}
.btn-outline-success {
  --bs-btn-color: var(--ok-ink); --bs-btn-border-color: #B7DCCB;
  --bs-btn-hover-bg: var(--ok-ink); --bs-btn-hover-border-color: var(--ok-ink); --bs-btn-hover-color: #fff;
  --bs-btn-active-bg: #0E5F3C; --bs-btn-active-border-color: #0E5F3C;
}
.btn-danger {
  --bs-btn-bg: var(--danger); --bs-btn-border-color: var(--danger);
  --bs-btn-hover-bg: var(--danger-ink); --bs-btn-hover-border-color: var(--danger-ink);
  --bs-btn-active-bg: var(--danger-ink); --bs-btn-active-border-color: var(--danger-ink);
}
.btn-outline-danger {
  --bs-btn-color: var(--danger-ink); --bs-btn-border-color: #EDBEB9;
  --bs-btn-hover-bg: var(--danger); --bs-btn-hover-border-color: var(--danger); --bs-btn-hover-color: #fff;
  --bs-btn-active-bg: var(--danger-ink); --bs-btn-active-border-color: var(--danger-ink);
}
.btn-warning {
  --bs-btn-bg: var(--warn); --bs-btn-border-color: var(--warn); --bs-btn-color: #fff;
  --bs-btn-hover-bg: var(--warn-ink); --bs-btn-hover-border-color: var(--warn-ink); --bs-btn-hover-color: #fff;
  --bs-btn-active-bg: var(--warn-ink); --bs-btn-active-border-color: var(--warn-ink); --bs-btn-active-color: #fff;
}
.btn-outline-warning {
  --bs-btn-color: var(--warn-ink); --bs-btn-border-color: #EBD3A2;
  --bs-btn-hover-bg: var(--warn); --bs-btn-hover-border-color: var(--warn); --bs-btn-hover-color: #fff;
  --bs-btn-active-bg: var(--warn-ink); --bs-btn-active-border-color: var(--warn-ink); --bs-btn-active-color: #fff;
}
.btn-info {
  --bs-btn-bg: var(--info); --bs-btn-border-color: var(--info); --bs-btn-color: #fff;
  --bs-btn-hover-bg: #0F4A7D; --bs-btn-hover-border-color: #0F4A7D; --bs-btn-hover-color: #fff;
  --bs-btn-active-bg: #0F4A7D; --bs-btn-active-border-color: #0F4A7D; --bs-btn-active-color: #fff;
}
.btn-outline-info {
  --bs-btn-color: var(--info); --bs-btn-border-color: #B9CDE4;
  --bs-btn-hover-bg: var(--info); --bs-btn-hover-border-color: var(--info); --bs-btn-hover-color: #fff;
}

/* ============================================================
   LENCANA (badge)
   Latar lembut + tulisan pekat, bukan blok warna penuh. Aman diubah dari
   CSS karena setiap lencana SELALU membawa teksnya sendiri — maknanya tidak
   pernah bergantung pada warna saja.
   ============================================================ */
.badge.text-bg-primary, .badge.bg-primary {
  background-color: #E3EAF5 !important; color: var(--navy) !important;
}
.badge.text-bg-secondary, .badge.bg-secondary,
.badge.text-bg-light, .badge.bg-light {
  background-color: var(--netral-bg) !important; color: var(--netral-ink) !important;
  border-color: var(--line) !important;
}
.badge.text-bg-info, .badge.bg-info, .badge.bg-info-subtle {
  background-color: var(--info-bg) !important; color: var(--info-ink) !important;
}
.badge.text-bg-success, .badge.bg-success, .badge.bg-success-subtle {
  background-color: var(--ok-bg) !important; color: var(--ok-ink) !important;
  border-color: #C3E2D3 !important;
}
.badge.text-bg-warning, .badge.bg-warning, .badge.bg-warning-subtle {
  background-color: var(--warn-bg) !important; color: var(--warn-ink) !important;
  border-color: #F2E0B6 !important;
}
.badge.text-bg-danger, .badge.bg-danger, .badge.bg-danger-subtle {
  background-color: var(--danger-bg) !important; color: var(--danger-ink) !important;
  border-color: #F0C7BF !important;
}
.badge.text-bg-dark, .badge.bg-dark {
  background-color: rgba(233, 185, 103, .22) !important; color: var(--emas-ink) !important;
}
/* Lencana angka permohonan masuk di menu samping tetap merah pekat: itu
   penanda "ada yang menunggu", harus terlihat dari jauh. */
#badgeMasuk.badge {
  background-color: var(--danger) !important; color: #fff !important;
}

/* ============================================================
   PESAN SISTEM (alert)
   Nada lembut senada palet status + pita tepi kiri, bukan blok warna penuh.
   ============================================================ */
.alert {
  border: 1px solid var(--line); border-inline-start-width: 4px;
  border-radius: 12px; font-weight: 500;
}
.alert-primary   { background: #E3EAF5; border-inline-start-color: var(--navy); color: var(--navy); }
.alert-success   { background: var(--ok-bg); border-inline-start-color: var(--ok); color: var(--ok-ink); }
.alert-info      { background: var(--info-bg); border-inline-start-color: var(--info); color: var(--info-ink); }
.alert-warning   { background: var(--warn-bg); border-inline-start-color: var(--warn); color: var(--warn-ink); }
.alert-danger    { background: var(--danger-bg); border-inline-start-color: var(--danger); color: var(--danger-ink); }
.alert-light,
.alert-secondary { background: #F8FAFD; border-inline-start-color: var(--navy-soft); color: #33455F; }

/* ============================================================
   WARNA TEKS KONTEKSTUAL
   Nada bawaan Bootstrap terlalu muda untuk tulisan: text-warning (#FFC107)
   hanya 1,6:1 terhadap latar putih, text-danger 3,9:1, text-success 4,1:1 —
   ketiganya di bawah ambang WCAG AA.
   ============================================================ */
.text-primary { color: var(--navy) !important; }
.text-success { color: var(--ok-ink) !important; }
.text-danger  { color: var(--danger-ink) !important; }
.text-warning { color: var(--warn-ink) !important; }
.text-info    { color: var(--info-ink) !important; }

/* ============================================================
   CINCIN FOKUS SERAGAM (aksesibilitas papan ketik)
   ============================================================ */
:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
/* Kolom isian sudah punya penanda fokusnya sendiri; tanpa pengecualian ini
   cincinnya jadi dobel dan terlihat berantakan. */
.form-control:focus-visible, .form-select:focus-visible,
.form-check-input:focus-visible { outline: none; }
.btn:focus-visible, .nav-link:focus-visible, .page-link:focus-visible {
  box-shadow: 0 0 0 .2rem rgba(233, 185, 103, .35);
}

/* Tautan & pagination ikut palet, bukan biru bawaan. */
.page-link { color: var(--navy); }
.page-item.active .page-link { background: var(--navy); border-color: var(--navy); }
.form-check-input:checked { background-color: var(--navy); border-color: var(--navy); }

/* ============================================================
   PITA MODE UJI COBA
   Tampil di halaman publik maupun petugas selama setting mode_uji = 1.
   Sengaja mencolok dan bergaris miring supaya tidak mungkin disangka
   bagian dari tampilan normal — inilah satu-satunya penanda yang
   memberi tahu warga bahwa permohonannya belum diproses resmi.
   ============================================================ */
.pita-uji {
  display: flex; align-items: center; gap: .55rem; flex-wrap: wrap;
  margin: .9rem 0 0;
  padding: .6rem .9rem;
  border: 1px solid #E7C77A;
  border-inline-start: 5px solid var(--warn);
  border-radius: 10px;
  background:
    repeating-linear-gradient(135deg,
      var(--warn-bg) 0 14px, #FBE7BE 14px 28px);
  color: var(--warn-ink);
  font-size: .82rem;
  line-height: 1.4;
}
.pita-uji i { font-size: 1rem; flex: none; }
.pita-uji a {
  margin-inline-start: auto;
  color: var(--warn-ink); font-weight: 700; text-decoration: underline;
  white-space: nowrap;
}
@media (max-width: 575.98px) {
  .pita-uji { font-size: .78rem; }
  .pita-uji a { margin-inline-start: 0; }
}