/* =====================================================================
   SIAP-AKRED — Tema resmi (hijau Kemenkes + aksen kuning)
   Font seragam: Bookman Old Style 11pt, cadangan TeX Gyre Bonum.
   Semua warna diatur lewat variabel di :root agar mudah disesuaikan.
   ===================================================================== */

@font-face { font-family: "TeX Gyre Bonum"; font-style: normal; font-weight: 400; font-display: swap;
  src: local("Bookman Old Style"), url("../fonts/texgyrebonum-regular.woff2") format("woff2"); }
@font-face { font-family: "TeX Gyre Bonum"; font-style: normal; font-weight: 700; font-display: swap;
  src: local("Bookman Old Style Bold"), url("../fonts/texgyrebonum-bold.woff2") format("woff2"); }
@font-face { font-family: "TeX Gyre Bonum"; font-style: italic; font-weight: 400; font-display: swap;
  src: url("../fonts/texgyrebonum-italic.woff2") format("woff2"); }
@font-face { font-family: "TeX Gyre Bonum"; font-style: italic; font-weight: 700; font-display: swap;
  src: url("../fonts/texgyrebonum-bolditalic.woff2") format("woff2"); }

:root {
  /* Warna institusi */
  --sa-hijau:        #006B3F;
  --sa-hijau-tua:    #00502F;
  --sa-hijau-muda:   #E7F2EC;
  --sa-kuning:       #F2C300;
  --sa-kuning-muda:  #FFF8DB;
  --sa-teks:         #1C2B22;
  --sa-teks-redup:   #5B6B61;
  --sa-garis:        #D5E0D9;
  --sa-latar:        #F3F6F4;
  --sa-merah:        #B3261E;
  --sa-merah-muda:   #FBEAE9;
  --sa-oranye:       #9A5B00;
  --sa-oranye-muda:  #FFF1DC;

  --sa-font: "Bookman Old Style", "TeX Gyre Bonum", "URW Bookman", Georgia, serif;

  /* Pemetaan ke variabel Bootstrap */
  --bs-body-font-family: var(--sa-font);
  --bs-body-font-size:   1rem;
  --bs-body-color:       var(--sa-teks);
  --bs-body-bg:          #FFFFFF;
  --bs-primary:          var(--sa-hijau);
  --bs-primary-rgb:      0, 107, 63;
  --bs-link-color:       var(--sa-hijau);
  --bs-link-color-rgb:   0, 107, 63;
  --bs-link-hover-color: var(--sa-hijau-tua);
  --bs-border-color:     var(--sa-garis);
  --bs-border-radius:    .25rem;
  --bs-focus-ring-color: rgba(0, 107, 63, .25);
}

/* 1rem = 11pt → seluruh komponen Bootstrap ikut ukuran 11pt */
html { font-size: 11pt; }
body { background: var(--sa-latar); font-family: var(--sa-font); line-height: 1.5; min-height: 100vh; display: flex; flex-direction: column; }
h1, h2, h3, h4, h5, h6, .btn, .form-control, .form-select, .table, .dropdown-menu, .badge, input, select, textarea, button {
  font-family: var(--sa-font);
}
h1, .h1 { font-size: 1.45rem; font-weight: 700; }
h2, .h2 { font-size: 1.25rem; font-weight: 700; }
h3, .h3 { font-size: 1.1rem;  font-weight: 700; }
h4, h5, h6 { font-size: 1rem; font-weight: 700; }
.small, small { font-size: .9rem; }
.text-redup { color: var(--sa-teks-redup) !important; }
.mono { font-family: "Courier New", monospace; font-size: .9rem; letter-spacing: .02em; }

/* ---------- Tombol ---------- */
.btn-primary {
  --bs-btn-bg: var(--sa-hijau); --bs-btn-border-color: var(--sa-hijau);
  --bs-btn-hover-bg: var(--sa-hijau-tua); --bs-btn-hover-border-color: var(--sa-hijau-tua);
  --bs-btn-active-bg: var(--sa-hijau-tua); --bs-btn-active-border-color: var(--sa-hijau-tua);
  --bs-btn-disabled-bg: var(--sa-hijau); --bs-btn-disabled-border-color: var(--sa-hijau);
}
.btn-outline-primary {
  --bs-btn-color: var(--sa-hijau); --bs-btn-border-color: var(--sa-hijau);
  --bs-btn-hover-bg: var(--sa-hijau); --bs-btn-hover-border-color: var(--sa-hijau);
  --bs-btn-active-bg: var(--sa-hijau-tua); --bs-btn-active-border-color: var(--sa-hijau-tua);
}
.btn-kuning {
  --bs-btn-color: #1C2B22; --bs-btn-bg: var(--sa-kuning); --bs-btn-border-color: var(--sa-kuning);
  --bs-btn-hover-color: #1C2B22; --bs-btn-hover-bg: #DDB200; --bs-btn-hover-border-color: #DDB200;
  --bs-btn-active-bg: #C9A200; --bs-btn-active-border-color: #C9A200;
}
.form-control:focus, .form-select:focus { border-color: #5FA383; box-shadow: 0 0 0 .2rem rgba(0,107,63,.18); }
.form-check-input:checked { background-color: var(--sa-hijau); border-color: var(--sa-hijau); }
.form-label { font-weight: 700; margin-bottom: .25rem; }
.wajib::after { content: " *"; color: var(--sa-merah); }

/* ---------- Header resmi ---------- */
.sa-header { background: var(--sa-hijau); color: #fff; border-bottom: 4px solid var(--sa-kuning); }
.sa-header .brand { display: flex; align-items: center; gap: .75rem; color: #fff; text-decoration: none; min-width: 0; }
.sa-header .brand img { width: 46px; height: 46px; object-fit: contain; background: #fff; border-radius: 50%; padding: 3px; flex-shrink: 0; }
.sa-header .brand .nama-app { font-weight: 700; font-size: 1.2rem; letter-spacing: .04em; line-height: 1.1; }
.sa-header .brand .nama-sub { font-size: .85rem; opacity: .9; line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sa-header .user-btn { display: inline-flex; align-items: center; gap: .15rem; color: #fff; border: 1px solid rgba(255,255,255,.35); background: transparent; }
.sa-header .user-btn:hover, .sa-header .user-btn:focus { background: rgba(255,255,255,.12); color: #fff; }
.sa-header .user-btn .peran { font-size: .8rem; opacity: .85; display: block; line-height: 1.1; }

/* ---------- Navigasi ---------- */
.sa-nav { background: #fff; border-bottom: 1px solid var(--sa-garis); padding: 0; }
.sa-nav .nav-link { color: var(--sa-teks); padding: .8rem .95rem; border-bottom: 3px solid transparent; }
.sa-nav .nav-link:hover { color: var(--sa-hijau); background: var(--sa-hijau-muda); }
.sa-nav .nav-link.active { color: var(--sa-hijau); font-weight: 700; border-bottom-color: var(--sa-kuning); }
.sa-nav .nav-link i { margin-right: .35rem; }
.sa-nav .navbar-toggler { border-color: var(--sa-garis); margin: .5rem 0; }

/* ---------- Konten ---------- */
main { flex: 1; }
.page-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: .75rem; margin-bottom: 1.25rem; }
.page-head .crumb { font-size: .9rem; color: var(--sa-teks-redup); margin-bottom: .15rem; }
.page-head h1 { margin: 0; }

.card { border-color: var(--sa-garis); box-shadow: 0 1px 2px rgba(0,0,0,.03); }
.card-header { background: #fff; border-bottom: 1px solid var(--sa-garis); font-weight: 700; }
.card-judul { border-left: 4px solid var(--sa-hijau); padding-left: .6rem; }

.stat .label { font-weight: 700; }
.stat .ket   { font-size: .85rem; color: var(--sa-teks-redup); }
.stat .angka { font-size: 2rem; font-weight: 700; line-height: 1.1; margin-top: .5rem; }
.stat .angka small { font-size: .95rem; font-weight: 400; color: var(--sa-teks-redup); }

.progress { height: .5rem; background: #E5ECE8; border-radius: 1rem; }
.progress-bar { background: var(--sa-hijau); }
.progress-bar.kuning { background: var(--sa-kuning); }

.bab-card { text-decoration: none; color: inherit; display: block; height: 100%; }
.bab-card:hover .card { border-color: var(--sa-hijau); }
.bab-card .kode { font-size: .85rem; color: var(--sa-teks-redup); letter-spacing: .05em; }
.baris-metrik { display: flex; justify-content: space-between; align-items: baseline; font-size: .9rem; }

/* Label status */
.status { display: inline-block; padding: .15rem .5rem; border-radius: .2rem; font-size: .85rem; font-weight: 700; }
.status-ok     { background: var(--sa-hijau-muda); color: var(--sa-hijau-tua); }
.status-kurang { background: var(--sa-merah-muda); color: var(--sa-merah); }
.status-proses { background: var(--sa-oranye-muda); color: var(--sa-oranye); }
.status-netral { background: #EDF0EE; color: var(--sa-teks-redup); }

.table { --bs-table-bg: #fff; vertical-align: middle; }
.table thead th { background: var(--sa-hijau-muda); color: var(--sa-hijau-tua); font-weight: 700; border-bottom-color: var(--sa-garis); white-space: nowrap; }
.table-hover tbody tr:hover > * { --bs-table-bg-state: #F7FAF8; }

.alert-kuning { background: var(--sa-kuning-muda); border: 1px solid #EAD27A; border-left: 4px solid var(--sa-kuning); color: var(--sa-teks); }

/* ---------- Halaman login ---------- */
.login-wrap { flex: 1; display: flex; justify-content: center; align-items: flex-start; padding: 2.5rem 1rem 2rem; position: relative; isolation: isolate; }
.login-wrap::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 300px; z-index: -1;
  background: var(--sa-hijau); border-bottom: 4px solid var(--sa-kuning); }
.login-card { width: 100%; max-width: 420px; }
.login-card .card { border-top: 4px solid var(--sa-kuning); }
.login-logo { display: flex; justify-content: center; gap: .75rem; margin-bottom: 1rem; }
.login-logo img { width: 64px; height: 64px; object-fit: contain; background: #fff; border-radius: 50%; padding: 4px; box-shadow: 0 1px 4px rgba(0,0,0,.15); }
.login-title { color: #fff; text-align: center; margin-bottom: 1.25rem; }
.login-title .app { font-size: 1.6rem; font-weight: 700; letter-spacing: .06em; }
.login-title .sub { opacity: .92; }

/* ---------- Footer ---------- */
.sa-footer { border-top: 1px solid var(--sa-garis); background: #fff; color: var(--sa-teks-redup); font-size: .85rem; padding: .9rem 0; }

/* ---------- Kotak kata sandi sementara ---------- */
.sandi-box { font-family: "Courier New", monospace; font-size: 1.3rem; font-weight: 700; letter-spacing: .1em;
  background: #fff; border: 2px dashed var(--sa-hijau); padding: .4rem .8rem; display: inline-block; user-select: all; }

@media (max-width: 575.98px) {
  .sa-header .brand .nama-sub .kota { display: none; }
  .stat .angka { font-size: 1.6rem; }
}
@media print {
  .sa-header, .sa-nav, .sa-footer, .btn { display: none !important; }
  body { background: #fff; }
}

/* ---------- Tahap 4: Akreditasi & Detail EP ---------- */
.chip-opsi { opacity: .55; border: 1px dashed currentColor; }
.nav-tabs .nav-link { color: var(--sa-teks); }
.nav-tabs .nav-link.active { color: var(--sa-hijau); border-bottom-color: #fff; }
.kartu-std .kode { font-size: .85rem; color: var(--sa-teks-redup); font-family: "Courier New", monospace; }
.baris-ep { cursor: pointer; }
.baris-ep:hover > * { --bs-table-bg-state: #F3F8F5; }
.ep-uraian { font-size: 1.1rem; line-height: 1.55; }
.label-kecil { font-size: .8rem; color: var(--sa-teks-redup); text-transform: uppercase; letter-spacing: .04em; }
.tabel-item td { vertical-align: top; }
.tabel-item .kode-item { font-family: "Courier New", monospace; font-weight: 700; white-space: nowrap; }
.jenis-lencana { display: inline-block; min-width: 1.6rem; text-align: center; font-weight: 700; border-radius: .2rem;
  padding: .05rem .35rem; background: var(--sa-hijau-muda); color: var(--sa-hijau-tua); font-family: "Courier New", monospace; }
.tdd-pita { background: repeating-linear-gradient(45deg, #EDF0EE, #EDF0EE 8px, #F6F8F7 8px, #F6F8F7 16px); }
.sticky-nav { position: sticky; top: 0; z-index: 5; }

.judul-ep { font-family: "Courier New", monospace; font-size: 1.5rem; font-weight: 700; letter-spacing: .02em; }
.tabel-item td.small { white-space: nowrap; }

/* ---------- Tahap 7: Gap Analysis & Beranda ---------- */
.gap-ambang { position: absolute; top: -3px; bottom: -3px; width: 2px; background: var(--sa-merah); }
.gap-tugas { background: var(--sa-hijau-muda); border-color: var(--sa-hijau); position: sticky; top: .5rem; z-index: 5; }
.hitung-mundur { font-size: 2.2rem; font-weight: 700; line-height: 1; color: var(--sa-hijau-tua); }
.hitung-mundur small { font-size: .9rem; font-weight: 400; color: var(--sa-teks-redup); }
.daftar-ringkas .baris { display: flex; justify-content: space-between; gap: .5rem; padding: .35rem 0; border-bottom: 1px dashed #DDE3DF; font-size: .9rem; }
.daftar-ringkas .baris:last-child { border-bottom: 0; }
.lingkup-info { background: #F4F8F5; border: 1px solid #D5E4DA; border-radius: .35rem; padding: .5rem .75rem; font-size: .9rem; }

/* ---------- Tahap 9: Panduan ---------- */
.panduan h2 { font-size: 1.15rem; color: var(--sa-hijau-tua); border-left: 4px solid var(--sa-hijau); padding-left: .6rem; margin: 1.2rem 0 .6rem; }
.panduan .panduan-bagian:first-child h2 { margin-top: 0; }
.panduan ol { padding-left: 1.3rem; margin-bottom: .5rem; }
.panduan li { margin-bottom: .35rem; }
.panduan-bagian { scroll-margin-top: 1rem; }