/* ==========================================================================
   SAPA — Sistem Aplikasi Pelacakan Alumni
   Tema utama di atas Bootstrap 5.3.8

   Isi berkas:
   1. Token warna (terang & gelap)      5. Topbar
   2. Override variabel Bootstrap        6. Komponen (kartu statistik, dll.)
   3. Dasar & tipografi                  7. Halaman auth (login)
   4. Sidebar (admin & pengelola)        8. Area alumni & kuesioner
                                         9. Utilitas kecil & cetak

   Warna institusi TIDAK diubah di berkas ini. Admin memilih "warna utama"
   dan "warna aksen" di menu Tampilan & Tema; app/theme.php lalu menghitung
   seluruh turunan warnanya dan mencetak blok <style> yang menimpa nilai
   bawaan di bawah. Nilai di sini = warna bawaan SAPA (navy & oranye).
   ========================================================================== */

/* 1. TOKEN WARNA ------------------------------------------------------------ */
/* [data-bs-theme="light"] ikut didefinisikan agar elemen bertema terang di
   dalam halaman gelap (mis. pratinjau tema) tetap memakai token terang. */
:root,
[data-bs-theme="light"] {
  /* Warna merek (sama di mode terang & gelap) */
  --sapa-brand: #12305a;
  --sapa-brand-rgb: 18, 48, 90;

  /* Warna utama sesuai mode */
  --sapa-primary: #12305a;          /* teks/tautan/ikon */
  --sapa-primary-rgb: 18, 48, 90;
  --sapa-primary-solid: #12305a;    /* latar tombol & elemen aktif */
  --sapa-primary-hover: #0e2647;
  --sapa-primary-dark: #0b1f3e;     /* sidebar & gradasi */
  --sapa-on-primary: #fff;          /* teks di atas --sapa-primary-solid */

  --sapa-accent: #f7861c;
  --sapa-accent-rgb: 247, 134, 28;
  --sapa-accent-hover: #d97618;
  --sapa-accent-text: #c66b16;      /* aksen versi teks (kontras di latar terang) */
  --sapa-on-accent: #fff;

  --sapa-bg: #f3f5f9;               /* latar halaman */
  --sapa-surface: #ffffff;          /* latar kartu */
  --sapa-border: #e4e8ef;
  --sapa-muted: #6b7587;

  --sapa-sidebar-bg: var(--sapa-primary-dark);
  --sapa-sidebar-fg: rgba(255, 255, 255, .72);
  --sapa-sidebar-active: rgba(255, 255, 255, .1);
  --sapa-sidebar-width: 264px;
  --sapa-topbar-height: 64px;

  --sapa-radius: .75rem;
  --sapa-shadow: 0 1px 2px rgba(16, 24, 40, .04), 0 2px 8px rgba(16, 24, 40, .05);
}

[data-bs-theme="dark"] {
  --sapa-primary: #8193ad;          /* warna utama dicerahkan agar terbaca */
  --sapa-primary-rgb: 129, 147, 173;
  --sapa-primary-solid: #2f5ea3;
  --sapa-primary-hover: #3a6dba;
  --sapa-accent-text: var(--sapa-accent);
  --sapa-bg: #0f141c;
  --sapa-surface: #171e29;
  --sapa-border: #263041;
  --sapa-muted: #94a0b4;
  --sapa-sidebar-bg: #0b1018;
  --sapa-shadow: 0 1px 2px rgba(0, 0, 0, .3);
}

/* 2. OVERRIDE VARIABEL BOOTSTRAP -------------------------------------------- */
:root,
[data-bs-theme="light"],
[data-bs-theme="dark"] {
  --bs-primary: var(--sapa-primary);
  --bs-primary-rgb: var(--sapa-primary-rgb);
  --bs-link-color: var(--sapa-primary);
  --bs-link-color-rgb: var(--sapa-primary-rgb);
  --bs-link-hover-color: var(--sapa-accent-text);
  --bs-link-hover-color-rgb: var(--sapa-accent-rgb);
  --bs-body-bg: var(--sapa-bg);
  --bs-border-color: var(--sapa-border);
  --bs-secondary-color: var(--sapa-muted);
  --bs-body-font-family: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --bs-border-radius: .5rem;
  --bs-border-radius-lg: var(--sapa-radius);
  --bs-focus-ring-color: rgba(var(--sapa-primary-rgb), .25);
  --bs-primary-bg-subtle: rgba(var(--sapa-primary-rgb), .12);
  --bs-primary-border-subtle: rgba(var(--sapa-primary-rgb), .3);
  --bs-primary-text-emphasis: var(--sapa-primary);
}

[data-bs-theme="dark"] {
  --bs-body-color: #dfe5ee;
}

/* Tombol: Bootstrap 5.3 menyimpan warna tombol di variabel lokal .btn-* */
.btn-primary {
  --bs-btn-color: var(--sapa-on-primary);
  --bs-btn-bg: var(--sapa-primary-solid);
  --bs-btn-border-color: var(--sapa-primary-solid);
  --bs-btn-hover-color: var(--sapa-on-primary);
  --bs-btn-hover-bg: var(--sapa-primary-hover);
  --bs-btn-hover-border-color: var(--sapa-primary-hover);
  --bs-btn-active-color: var(--sapa-on-primary);
  --bs-btn-active-bg: var(--sapa-primary-hover);
  --bs-btn-active-border-color: var(--sapa-primary-hover);
  --bs-btn-disabled-color: var(--sapa-on-primary);
  --bs-btn-disabled-bg: var(--sapa-primary-solid);
  --bs-btn-disabled-border-color: var(--sapa-primary-solid);
  --bs-btn-focus-shadow-rgb: var(--sapa-primary-rgb);
}
.btn-outline-primary {
  --bs-btn-color: var(--sapa-primary);
  --bs-btn-border-color: var(--sapa-primary);
  --bs-btn-hover-color: var(--sapa-on-primary);
  --bs-btn-hover-bg: var(--sapa-primary-solid);
  --bs-btn-hover-border-color: var(--sapa-primary-solid);
  --bs-btn-active-color: var(--sapa-on-primary);
  --bs-btn-active-bg: var(--sapa-primary-solid);
  --bs-btn-active-border-color: var(--sapa-primary-solid);
}
.btn-accent {
  --bs-btn-color: var(--sapa-on-accent);
  --bs-btn-bg: var(--sapa-accent);
  --bs-btn-border-color: var(--sapa-accent);
  --bs-btn-hover-color: var(--sapa-on-accent);
  --bs-btn-hover-bg: var(--sapa-accent-hover);
  --bs-btn-hover-border-color: var(--sapa-accent-hover);
  --bs-btn-active-color: var(--sapa-on-accent);
  --bs-btn-active-bg: var(--sapa-accent-hover);
  --bs-btn-focus-shadow-rgb: var(--sapa-accent-rgb);
}
.text-accent { color: var(--sapa-accent-text) !important; }
.bg-accent-subtle { background-color: rgba(var(--sapa-accent-rgb), .12) !important; }

.form-control:focus,
.form-select:focus {
  border-color: rgba(var(--sapa-primary-rgb), .5);
}
/* Elemen aktif berlatar penuh memakai --sapa-primary-solid agar teks tetap kontras */
.form-check-input:checked {
  background-color: var(--sapa-primary-solid);
  border-color: var(--sapa-primary-solid);
}
.nav-pills { --bs-nav-pills-link-active-bg: var(--sapa-primary-solid); --bs-nav-pills-link-active-color: var(--sapa-on-primary); }
.pagination { --bs-pagination-active-bg: var(--sapa-primary-solid); --bs-pagination-active-border-color: var(--sapa-primary-solid); --bs-pagination-active-color: var(--sapa-on-primary); }
.list-group { --bs-list-group-active-bg: var(--sapa-primary-solid); --bs-list-group-active-border-color: var(--sapa-primary-solid); --bs-list-group-active-color: var(--sapa-on-primary); }
.progress { --bs-progress-bar-bg: var(--sapa-primary-solid); }
.dropdown-menu { --bs-dropdown-link-active-bg: var(--sapa-primary-solid); --bs-dropdown-link-active-color: var(--sapa-on-primary); }

/* 3. DASAR & TIPOGRAFI ------------------------------------------------------ */
body {
  font-size: .9375rem;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4, h5, h6, .fw-display { letter-spacing: -.01em; }
.page-title { font-size: 1.375rem; font-weight: 700; margin-bottom: .25rem; }
.page-subtitle { color: var(--sapa-muted); margin-bottom: 0; }

.card {
  --bs-card-bg: var(--sapa-surface);
  --bs-card-border-color: var(--sapa-border);
  --bs-card-cap-bg: transparent;
  box-shadow: var(--sapa-shadow);
}
.card-header { padding-top: 1rem; padding-bottom: 1rem; }
.card-title { font-size: 1rem; font-weight: 600; margin-bottom: 0; }

.table { --bs-table-bg: transparent; }
.table > thead th {
  font-size: .75rem;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--sapa-muted);
  font-weight: 600;
  white-space: nowrap;
  background: var(--sapa-bg);
}

/* 4. SIDEBAR ---------------------------------------------------------------- */
/* Di layar >= lg sidebar menempel di kiri; di bawah lg menjadi offcanvas
   (kelas .offcanvas-lg bawaan Bootstrap), jadi tidak butuh JS tambahan. */
.sapa-sidebar {
  --bs-offcanvas-width: var(--sapa-sidebar-width);
  --bs-offcanvas-bg: var(--sapa-sidebar-bg);
  background: var(--sapa-sidebar-bg);
  color: var(--sapa-sidebar-fg);
}
@media (min-width: 992px) {
  .sapa-sidebar {
    position: fixed;
    inset: 0 auto 0 0;
    width: var(--sapa-sidebar-width);
    display: flex;
    flex-direction: column;
    z-index: 1030;
  }
  .sapa-main { margin-left: var(--sapa-sidebar-width); }
}
/* Bootstrap memaksa .offcanvas-lg transparan (!important) di >= lg, jadi ditimpa di sini */
.sapa-sidebar.offcanvas-lg { background-color: var(--sapa-sidebar-bg) !important; }
.sapa-sidebar .offcanvas-body { display: flex; flex-direction: column; flex: 1 1 auto; padding: 0; overflow-y: auto; }

.sidebar-brand {
  display: flex;
  align-items: center;
  gap: .75rem;
  height: var(--sapa-topbar-height);
  padding: 0 1.25rem;
  color: #fff;
  text-decoration: none;
  border-bottom: 1px solid rgba(255, 255, 255, .08);
  flex-shrink: 0;
}
.sidebar-brand img { height: 36px; width: auto; }
.sidebar-brand .brand-name { font-weight: 800; font-size: 1.125rem; letter-spacing: .04em; line-height: 1.1; }
.sidebar-brand .brand-name span { color: var(--sapa-accent); }
.sidebar-brand small { display: block; font-size: .6875rem; font-weight: 500; opacity: .6; letter-spacing: 0; }

.sidebar-role {
  margin: 1rem 1rem .25rem;
  padding: .625rem .75rem;
  border-radius: .5rem;
  background: rgba(255, 255, 255, .05);
  font-size: .8125rem;
}
.sidebar-role .badge { background: rgba(var(--sapa-accent-rgb), .18); color: var(--sapa-accent); }

.sidebar-heading {
  padding: 1.25rem 1.5rem .5rem;
  font-size: .6875rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .4);
}
.sidebar-nav { list-style: none; margin: 0; padding: 0 .75rem; }
.sidebar-nav .nav-link {
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: .5625rem .75rem;
  margin-bottom: 2px;
  border-radius: .5rem;
  color: var(--sapa-sidebar-fg);
  font-weight: 500;
  font-size: .875rem;
  transition: background-color .15s, color .15s;
}
.sidebar-nav .nav-link .bi { font-size: 1.0625rem; width: 1.25rem; text-align: center; opacity: .85; }
.sidebar-nav .nav-link:hover { color: #fff; background: rgba(255, 255, 255, .06); }
.sidebar-nav .nav-link.active {
  color: #fff;
  background: var(--sapa-sidebar-active);
  box-shadow: inset 3px 0 0 var(--sapa-accent);
}
.sidebar-nav .nav-link.active .bi { color: var(--sapa-accent); opacity: 1; }
.sidebar-nav .nav-link .badge { margin-left: auto; }

.sidebar-footer {
  margin-top: auto;
  padding: 1rem 1.5rem;
  font-size: .75rem;
  color: rgba(255, 255, 255, .4);
  border-top: 1px solid rgba(255, 255, 255, .08);
}

/* 5. TOPBAR ----------------------------------------------------------------- */
.sapa-topbar {
  position: sticky;
  top: 0;
  z-index: 1020;
  height: var(--sapa-topbar-height);
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: 0 1rem;
  background: color-mix(in srgb, var(--sapa-bg) 85%, transparent);
  backdrop-filter: saturate(180%) blur(10px);
  -webkit-backdrop-filter: saturate(180%) blur(10px);
  border-bottom: 1px solid var(--sapa-border);
}
@media (min-width: 768px) { .sapa-topbar { padding: 0 1.75rem; } }
.topbar-search { max-width: 360px; }
.topbar-search .form-control { background: var(--sapa-bg); border-color: transparent; }
.topbar-search .form-control:focus { background: var(--sapa-surface); }
.btn-icon {
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border-radius: 50%;
  color: var(--bs-body-color);
  position: relative;
}
.btn-icon:hover { background: var(--sapa-bg); }
.btn-icon .dot {
  position: absolute; top: 9px; right: 10px;
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--sapa-accent); border: 2px solid var(--sapa-surface);
}
.avatar {
  width: 36px; height: 36px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%;
  font-weight: 700; font-size: .8125rem;
  background: rgba(var(--sapa-primary-rgb), .12);
  color: var(--sapa-primary);
  flex-shrink: 0;
}
.avatar-lg { width: 56px; height: 56px; font-size: 1.125rem; }

.sapa-content { padding: 1.5rem 1rem 2rem; }
@media (min-width: 768px) { .sapa-content { padding: 1.75rem 1.75rem 2.5rem; } }
.sapa-footer {
  padding: 1rem 1.75rem;
  font-size: .8125rem;
  color: var(--sapa-muted);
  border-top: 1px solid var(--sapa-border);
}

.breadcrumb { --bs-breadcrumb-divider: "›"; font-size: .8125rem; margin-bottom: .5rem; }
.breadcrumb a { text-decoration: none; color: var(--sapa-muted); }

/* 6. KOMPONEN --------------------------------------------------------------- */
/* Kartu statistik */
.stat-card .card-body { display: flex; gap: 1rem; align-items: flex-start; }
.stat-icon {
  width: 48px; height: 48px;
  border-radius: .75rem;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 1.375rem;
  flex-shrink: 0;
}
.stat-label { font-size: .8125rem; color: var(--sapa-muted); margin-bottom: .125rem; }
.stat-value { font-size: 1.625rem; font-weight: 800; line-height: 1.2; font-variant-numeric: tabular-nums; }
.stat-delta { font-size: .75rem; font-weight: 600; }

/* Warna ikon lembut — dipakai di kartu statistik & daftar */
.tone-primary { background: rgba(var(--sapa-primary-rgb), .1); color: var(--sapa-primary); }
.tone-accent  { background: rgba(var(--sapa-accent-rgb), .14); color: var(--sapa-accent-text); }
.tone-success { background: var(--bs-success-bg-subtle); color: var(--bs-success-text-emphasis); }
.tone-info    { background: var(--bs-info-bg-subtle); color: var(--bs-info-text-emphasis); }
.tone-danger  { background: var(--bs-danger-bg-subtle); color: var(--bs-danger-text-emphasis); }

/* Badge status pengisian */
.badge-status { font-weight: 600; padding: .375em .65em; border-radius: 999px; }

/* Kode kolom Dikti di label (membantu pengembang & PIC mencocokkan template) */
.kode-dikti {
  display: inline-block;
  margin-left: .375rem;
  padding: 0 .375rem;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .6875rem;
  font-weight: 600;
  line-height: 1.5;
  border-radius: .25rem;
  color: var(--sapa-muted);
  background: var(--sapa-bg);
  border: 1px solid var(--sapa-border);
  vertical-align: middle;
}

/* Bar progres per prodi */
.progress-thin { height: 6px; }

/* Meteran capaian: isi = warna utama, jalur = langkah lebih terang dari warna yang sama,
   penanda target = garis tinta tipis (dashboard admin) */
.meter { position: relative; height: 12px; border-radius: 6px; background: rgba(var(--sapa-primary-rgb), .14); }
.meter.meter-tipis { height: 8px; border-radius: 4px; }
.meter-isi { height: 100%; border-radius: inherit; background: var(--sapa-primary-solid); }
.meter-target { position: absolute; top: -3px; bottom: -3px; width: 2px; margin-left: -1px; background: var(--bs-body-color); border-radius: 1px; }
.meter-legenda { display: inline-block; width: 2px; height: 10px; vertical-align: -1px; margin-right: .25rem; background: var(--bs-body-color); }
.progress-list .item + .item { margin-top: 1rem; }

/* Langkah-langkah (import, dsb.) */
.step-num {
  width: 28px; height: 28px;
  border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: .8125rem; font-weight: 700;
  background: rgba(var(--sapa-primary-rgb), .1);
  color: var(--sapa-primary);
  flex-shrink: 0;
}

/* Area unggah berkas */
.dropzone {
  border: 2px dashed var(--sapa-border);
  border-radius: var(--sapa-radius);
  padding: 2.5rem 1rem;
  text-align: center;
  background: var(--sapa-bg);
  cursor: pointer;
  transition: border-color .15s, background-color .15s;
}
.dropzone:hover, .dropzone.is-dragover {
  border-color: var(--sapa-primary);
  background: rgba(var(--sapa-primary-rgb), .04);
}

/* Pratinjau logo di halaman pengaturan */
.logo-preview {
  width: 100%;
  height: 120px;
  border: 1px solid var(--sapa-border);
  border-radius: .5rem;
  display: flex; align-items: center; justify-content: center;
  background: #f3f5f9;              /* tetap terang: meniru tempat logo dipakai */
  padding: .75rem;
}
.logo-preview img { max-height: 100%; max-width: 100%; object-fit: contain; }
.logo-preview.dark { background: var(--sapa-primary-dark); }

/* Kotak tautan referral */
.referral-box {
  border: 1px dashed rgba(var(--sapa-accent-rgb), .6);
  background: rgba(var(--sapa-accent-rgb), .06);
  border-radius: var(--sapa-radius);
}

/* 7. HALAMAN AUTH ----------------------------------------------------------- */
.auth-wrap { min-height: 100vh; display: flex; }
.auth-aside {
  position: relative;
  flex: 1 1 50%;
  display: none;
  color: #fff;
  background:
    radial-gradient(circle at 85% 15%, rgba(var(--sapa-accent-rgb), .35), transparent 40%),
    radial-gradient(circle at 10% 90%, rgba(255, 255, 255, .08), transparent 45%),
    linear-gradient(160deg, var(--sapa-brand) 0%, var(--sapa-primary-dark) 100%);
  overflow: hidden;
}
@media (min-width: 992px) { .auth-aside { display: flex; flex-direction: column; } }
.auth-aside::after {
  /* pola titik halus */
  content: "";
  position: absolute; inset: 0;
  background-image: radial-gradient(rgba(255, 255, 255, .08) 1px, transparent 1px);
  background-size: 22px 22px;
  pointer-events: none;
}
.auth-aside > * { position: relative; z-index: 1; }
.auth-aside .lead-title { font-size: 2.25rem; font-weight: 800; line-height: 1.15; }
.auth-aside .lead-title span { color: var(--sapa-accent); }
.auth-feature { display: flex; gap: .875rem; align-items: flex-start; }
.auth-feature .bi {
  width: 40px; height: 40px; border-radius: .625rem;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(255, 255, 255, .1); font-size: 1.125rem; flex-shrink: 0;
}
.auth-main {
  flex: 1 1 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem 1.25rem;
  background: var(--sapa-surface);
}
.auth-card { width: 100%; max-width: 420px; }
.auth-logo { height: 56px; width: auto; }
.auth-tabs .nav-link { font-weight: 600; font-size: .875rem; }
.form-floating > .form-control,
.form-floating > .form-select { border-radius: .625rem; }

/* 8. AREA ALUMNI & KUESIONER ------------------------------------------------ */
.alumni-nav {
  background: var(--sapa-surface);
  border-bottom: 1px solid var(--sapa-border);
}
.alumni-nav .navbar-brand img { height: 34px; }
.alumni-hero {
  color: #fff;
  border-radius: var(--sapa-radius);
  background:
    radial-gradient(circle at 100% 0%, rgba(var(--sapa-accent-rgb), .45), transparent 45%),
    linear-gradient(135deg, var(--sapa-brand) 0%, var(--sapa-primary-dark) 100%);
  overflow: hidden;
}
.alumni-hero .text-white-75 { color: rgba(255, 255, 255, .75); }

/* Kartu tahap pengisian di beranda alumni */
.task-card { transition: transform .15s, box-shadow .15s; }
.task-card:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(16, 24, 40, .08); }
.task-card .task-step {
  font-size: .75rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: var(--sapa-muted);
}

/* Stepper kuesioner */
.stepper { display: flex; gap: .5rem; overflow-x: auto; padding-bottom: .25rem; scrollbar-width: none; }
.stepper .step {
  flex: 1 0 auto;
  min-width: 110px;
  display: flex; flex-direction: column; gap: .5rem;
  font-size: .75rem; font-weight: 600; color: var(--sapa-muted);
}
.stepper .step::before {
  content: "";
  height: 4px; border-radius: 4px;
  background: var(--sapa-border);
}
.stepper .step.done::before { background: var(--sapa-primary); }
.stepper .step.active::before { background: var(--sapa-accent); }
.stepper .step.active { color: var(--bs-body-color); }

.q-section { display: none; }
.q-section.active { display: block; animation: fadeIn .2s ease; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }

.q-label { font-weight: 600; margin-bottom: .5rem; display: block; }
/* Satu pertanyaan kuesioner; fieldset bawaan browser dirapikan */
.q-item { margin-bottom: 1.75rem; }
fieldset.q-item { border: 0; padding: 0; min-width: 0; }
fieldset.q-item > legend { float: none; width: auto; }
.q-item .form-check { margin-bottom: .375rem; }

/* Pilihan berbentuk kartu (radio) — dipakai untuk status F8 */
.choice-card .btn {
  width: 100%;
  height: 100%;
  text-align: left;
  padding: .875rem 1rem;
  border: 1px solid var(--sapa-border);
  background: var(--sapa-surface);
  color: var(--bs-body-color);
  display: flex; gap: .75rem; align-items: center;
  font-weight: 500;
}
.choice-card .btn .bi { font-size: 1.375rem; color: var(--sapa-muted); }
.choice-card .btn-check:checked + .btn {
  border-color: var(--sapa-primary);
  background: rgba(var(--sapa-primary-rgb), .06);
  box-shadow: inset 0 0 0 1px var(--sapa-primary);
}
.choice-card .btn-check:checked + .btn .bi { color: var(--sapa-primary); }

/* Skala likert 1–5 */
.likert { display: inline-flex; gap: .25rem; }
.likert .btn { width: 36px; padding: .25rem 0; font-size: .8125rem; }
.likert .btn-check:checked + .btn { background: var(--sapa-primary-solid); border-color: var(--sapa-primary-solid); color: var(--sapa-on-primary); }
.table-likert td, .table-likert th { vertical-align: middle; }

/* Kartu alumni */
.alumni-card {
  width: 100%;
  max-width: 440px;
  aspect-ratio: 85.6 / 54;            /* ukuran kartu ID standar */
  border-radius: 1rem;
  color: #fff;
  padding: 1.25rem;
  display: flex; flex-direction: column;
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(circle at 110% -10%, rgba(var(--sapa-accent-rgb), .55), transparent 45%),
    linear-gradient(135deg, var(--sapa-brand), var(--sapa-primary-dark));
  box-shadow: 0 12px 30px rgba(11, 31, 62, .3);
}
.alumni-card { container-type: inline-size; }   /* isi diskalakan terhadap lebar kartu (cqw) */
.alumni-card .card-logo { height: 6.5cqw; }
.alumni-card .card-name {
  font-size: 4.1cqw; font-weight: 700; line-height: 1.2; margin-bottom: .5cqw;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.alumni-card .small { font-size: 3cqw; }
.alumni-card .card-meta { font-size: 2.75cqw; opacity: .85; line-height: 1.35; }
.alumni-card .qr {
  flex: 0 0 auto; width: 21cqw; height: 21cqw; background: #fff; border-radius: 1.5cqw; padding: 1cqw;
}

/* Halaman validasi publik */
.validasi-card { max-width: 480px; }
.validasi-badge {
  width: 72px; height: 72px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 2rem;
  margin-top: -36px;
  border: 4px solid var(--sapa-surface);
}
.data-list dt { font-size: .75rem; text-transform: uppercase; letter-spacing: .04em; color: var(--sapa-muted); font-weight: 600; }
.data-list dd { font-weight: 600; margin-bottom: .875rem; }

/* 9. UTILITAS & CETAK ------------------------------------------------------- */
.min-w-0 { min-width: 0; }
.fs-7 { font-size: .8125rem !important; }
.cursor-pointer { cursor: pointer; }
.chart-box { position: relative; height: 280px; }

@media print {
  .sapa-sidebar, .sapa-topbar, .sapa-footer, .alumni-nav, .no-print { display: none !important; }
  .sapa-main { margin-left: 0 !important; }
  body { background: #fff !important; }
  .alumni-card { -webkit-print-color-adjust: exact; print-color-adjust: exact; box-shadow: none;
                 width: 85.6mm; max-width: none; padding: 4mm; border-radius: 3mm; }
  .alumni-card-wrap { justify-content: flex-start !important; }
  .laporan-tabel { break-inside: avoid; }
  .laporan-tabel .list-group { max-height: none !important; overflow: visible !important; }
}

/* Tombol aksi di tabel: transparan, muncul latar saat hover (aman di mode gelap) */
.btn-ghost {
  --bs-btn-color: var(--bs-body-color);
  --bs-btn-hover-bg: var(--sapa-bg);
  --bs-btn-hover-border-color: var(--sapa-border);
  --bs-btn-active-bg: var(--sapa-border);
  border-color: transparent;
}
.btn-ghost.text-success:hover { color: var(--bs-success) !important; }
.btn-ghost.text-danger:hover { color: var(--bs-danger) !important; }

/* Kontainer sempit untuk form alumni agar baris tidak terlalu panjang */
.container-narrow { max-width: 860px; }
.alumni-nav .nav-link.active { color: var(--sapa-primary); box-shadow: inset 0 -2px 0 var(--sapa-accent); }

/* Tukar logo otomatis sesuai tema (logo navy tidak terbaca di latar gelap) */
.logo-on-dark { display: none !important; }
[data-bs-theme="dark"] .logo-on-dark { display: inline-block !important; }
[data-bs-theme="dark"] .logo-on-light { display: none !important; }

/* Menu yang modulnya belum dibuat */
.sidebar-nav .nav-link.disabled { opacity: .45; cursor: default; }
.sidebar-nav .badge-segera { margin-left: auto; font-size: .625rem; font-weight: 600; background: rgba(255, 255, 255, .1); color: rgba(255, 255, 255, .7); }

/* ---------------------------------------------------------------------------
   Halaman Tampilan & Tema
   ------------------------------------------------------------------------- */
/* Kartu pilihan tema */
.theme-option-label {
  display: block;
  height: 100%;
  padding: .75rem;
  border: 1px solid var(--sapa-border);
  border-radius: var(--sapa-radius);
  cursor: pointer;
  transition: border-color .15s, box-shadow .15s;
}
.theme-option-label:hover { border-color: rgba(var(--sapa-primary-rgb), .5); }
.theme-option .btn-check:checked + .theme-option-label {
  border-color: var(--sapa-primary);
  box-shadow: inset 0 0 0 1px var(--sapa-primary);
}
.theme-option .btn-check:focus-visible + .theme-option-label { box-shadow: 0 0 0 .25rem var(--bs-focus-ring-color); }

/* Mockup mini (tiap mockup membawa data-bs-theme sendiri) */
.mock {
  display: flex;
  height: 84px;
  border-radius: .5rem;
  overflow: hidden;
  border: 1px solid var(--sapa-border);
  background: var(--sapa-bg);
}
.mock-side { width: 28%; background: var(--sapa-sidebar-bg); padding: 8px 6px; display: flex; flex-direction: column; gap: 5px; }
.mock-side span { height: 5px; border-radius: 3px; background: rgba(255, 255, 255, .25); }
.mock-side span.on { background: var(--sapa-accent); }
.mock-main { flex: 1; padding: 8px; display: flex; flex-direction: column; gap: 6px; }
.mock-bar { height: 6px; width: 60%; border-radius: 3px; background: var(--sapa-border); }
.mock-card { flex: 1; border-radius: 4px; background: var(--sapa-surface); border: 1px solid var(--sapa-border); padding: 6px; display: flex; align-items: flex-end; gap: 4px; }
.mock-btn { width: 22px; height: 8px; border-radius: 3px; background: var(--sapa-primary-solid); }
.mock-btn.accent { background: var(--sapa-accent); }
.mock-split { display: flex; height: 84px; border-radius: .5rem; overflow: hidden; }
.mock-split .mock { width: 50%; flex: 0 0 50%; border-radius: 0; }
.mock-split .mock:first-child { border-right: 0; }

.preset-dot { width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--sapa-surface); display: inline-block; }

/* Panel pratinjau komponen */
.preview-pane {
  display: flex;
  border-radius: .625rem;
  overflow: hidden;
  border: 1px solid var(--sapa-border);
  background: var(--sapa-bg);
  color: var(--bs-body-color);
  min-height: 150px;
}
.preview-side { width: 34%; background: var(--sapa-sidebar-bg); padding: .75rem .5rem; }
.preview-nav { font-size: .75rem; color: var(--sapa-sidebar-fg); padding: .3rem .5rem; border-radius: .375rem; margin-bottom: 2px; }
.preview-nav.active { color: #fff; background: var(--sapa-sidebar-active); box-shadow: inset 3px 0 0 var(--sapa-accent); }
.preview-nav.active .bi { color: var(--sapa-accent); }
.preview-body { flex: 1; padding: .75rem; background: var(--sapa-surface); margin: .5rem; border-radius: .5rem; border: 1px solid var(--sapa-border); }
.preview-body .btn { pointer-events: none; }

/* Combobox pencarian (<select data-cari>, lihat sapa.js bagian 11) */
.combo-cari { position: relative; }
.combo-cari .combo-asli {                      /* tetap ada untuk nilai & validasi, tidak terlihat */
  position: absolute; inset: 0; width: 100%; height: 100%;
  opacity: 0; pointer-events: none;
}
.combo-cari .combo-input {
  padding-right: 2.25rem;
  background-image: var(--bs-form-select-bg-img);
  background-repeat: no-repeat; background-position: right .75rem center; background-size: 16px 12px;
}
.combo-cari .combo-list { width: 100%; max-height: 280px; overflow-y: auto; margin-top: .25rem; }
.combo-cari .combo-list .dropdown-item { white-space: normal; cursor: pointer; }
.was-validated .combo-cari:has(.combo-asli:invalid:not(:disabled)) .combo-input,
.combo-cari:has(.combo-asli.is-invalid) .combo-input { border-color: var(--bs-form-invalid-border-color); }