/* =====================================================================
   Pelengkap tema Adminator untuk SIMDOS.
   Hanya menambah yang belum disediakan tema; tidak menimpa aturannya.
   ===================================================================== */

/* --- kolom grid. Tema hanya menyediakan col-6 dan col-12 --------------- */
.col-3 { grid-column: span 3; }
.col-4 { grid-column: span 4; }
.col-5 { grid-column: span 5; }
.col-7 { grid-column: span 7; }
.col-8 { grid-column: span 8; }
.col-9 { grid-column: span 9; }
@media (max-width: 1100px) {
  .col-3, .col-4, .col-5 { grid-column: span 6; }
  .col-7, .col-8, .col-9 { grid-column: span 12; }
}
@media (max-width: 760px) {
  .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9 { grid-column: span 12; }
}

/* --- kisi KPI dengan jumlah kolom lain -------------------------------- */
.kpi-grid.kpi-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
@media (max-width: 1200px) { .kpi-grid.kpi-6 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 700px)  { .kpi-grid.kpi-6 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.kpi-value.kpi-teks { font-size: 21px; line-height: 1.25; }

/* --- utilitas ringkas -------------------------------------------------- */
.u-row      { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.u-row-top  { display: flex; align-items: flex-start; gap: 10px; flex-wrap: wrap; }
.u-col      { display: flex; flex-direction: column; gap: 6px; }
.u-spacer   { flex: 1; }
.u-kanan    { text-align: right; }
.u-tengah   { text-align: center; }
.u-nowrap   { white-space: nowrap; }
.u-mt       { margin-top: 14px; }
.u-mb       { margin-bottom: 14px; }
.u-mb0      { margin-bottom: 0; }
.u-kecil    { font-size: 12px; }
.u-redup    { color: var(--t-muted); }
.u-tebal    { font-weight: 600; }
.u-angka    { font-variant-numeric: tabular-nums; font-family: "JetBrains Mono", monospace; font-size: 12.5px; }
.u-putus    { word-break: break-all; }
.u-lebar    { width: 100%; }
.u-sembunyi { display: none; }

/* --- daftar rincian ---------------------------------------------------- */
.rincian { display: grid; grid-template-columns: auto 1fr; gap: 6px 16px; margin: 0; font-size: 13px; }
.rincian dt { color: var(--t-muted); font-weight: 400; }
.rincian dd { margin: 0; font-weight: 600; color: var(--t-base); }
.rincian dd.u-kanan { text-align: right; }
.rincian dt.besar, .rincian dd.besar { font-size: 16px; padding-top: 4px; }

/* --- daftar poin persyaratan ------------------------------------------- */
.poin-list { display: flex; flex-direction: column; }
.poin-baris { border-bottom: 1px solid var(--border-soft); padding: 12px 0; }
.poin-baris:last-child { border-bottom: 0; }
.poin-kode { font-family: "JetBrains Mono", monospace; font-size: 12px; font-weight: 600;
             color: var(--primary); min-width: 46px; flex-shrink: 0; }
.poin-nama { font-weight: 600; font-size: 13.5px; color: var(--t-base); }
.poin-anak { margin: 10px 0 0 46px; display: flex; flex-direction: column; gap: 8px; }
.poin-anak > div { background: var(--bg-muted); border-radius: 9px; padding: 9px 12px;
                   display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.berkas-nama { font-size: 11.5px; color: var(--success); word-break: break-all;
               font-family: "JetBrains Mono", monospace; }

/* --- kotak pilihan poin 13 --------------------------------------------- */
.opsi-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 10px; }
.opsi-kotak { border: 1px solid var(--border); border-radius: 10px; background: var(--bg-card);
              padding: 12px; cursor: pointer; display: flex; gap: 9px; align-items: flex-start;
              transition: border-color .15s ease, background .15s ease; }
.opsi-kotak:hover { border-color: var(--primary); }
.opsi-kotak.terpilih { border-color: var(--primary); border-width: 2px;
                       background: var(--primary-soft); padding: 11px; }
.opsi-kode { font-family: "JetBrains Mono", monospace; font-size: 10.5px; font-weight: 600;
             color: var(--primary); letter-spacing: .06em; text-transform: uppercase; }
.opsi-judul { font-size: 13px; font-weight: 600; line-height: 1.3; margin-top: 2px; color: var(--t-base); }

/* --- berkas kecil dalam tabel ------------------------------------------ */
.input-mini { max-width: 190px; padding: 5px 8px; font-size: 12px; }
.input-kecil { width: 74px; padding: 5px 8px; font-size: 12px; text-align: right; }
.input-bulan { width: 54px; padding: 5px 8px; font-size: 12px; text-align: center; }
.select-mini { padding: 5px 26px 5px 8px; font-size: 12px; }
.btn--mini { padding: 4px 9px; font-size: 11.5px; }

/* --- tabel yang perlu rapat -------------------------------------------- */
.table.rapat tbody td, .table.rapat thead th { padding: 8px 10px; }
.table td, .table th { padding-right: 12px; }
.table td:last-child, .table th:last-child { padding-right: 0; }
.table .kolom-aksi { text-align: right; white-space: nowrap; }

/* --- kartu masuk -------------------------------------------------------- */
.masuk-bungkus { min-height: 100vh; display: grid; place-items: center; padding: 20px;
                 background: var(--bg-body); }
.masuk-kotak { width: min(430px, 94vw); }
.masuk-logo { width: 68px; height: 68px; object-fit: contain; }
.pemisah { display: flex; align-items: center; gap: 10px; margin: 16px 0;
           color: var(--t-light); font-size: 12px; }
.pemisah::before, .pemisah::after { content: ""; flex: 1; height: 1px; background: var(--border); }

/* --- lencana ringkas ---------------------------------------------------- */
.tag.t-kosong { background: var(--bg-muted); color: var(--t-light); }

/* --- formulir padat (luaran, kelayakan) -------------------------------- */
.form-grid.kolom-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px 18px; }
.form-grid.kolom-4 .span-2 { grid-column: span 2; }
.form-grid.kolom-4 .span-3 { grid-column: span 3; }
.form-grid.kolom-4 .span-4 { grid-column: span 4; }
@media (max-width: 980px) { .form-grid.kolom-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .form-grid.kolom-4 .span-3, .form-grid.kolom-4 .span-4 { grid-column: span 2; } }
@media (max-width: 620px) { .form-grid.kolom-4 { grid-template-columns: 1fr; }
  .form-grid.kolom-4 .span-2, .form-grid.kolom-4 .span-3,
  .form-grid.kolom-4 .span-4 { grid-column: span 1; } }

.sub-judul { grid-column: 1 / -1; font-family: "Inter Tight", Inter, sans-serif;
             font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
             color: var(--t-light); border-top: 1px solid var(--border-soft);
             padding-top: 14px; margin: 4px 0 -4px; }
.form-grid > .sub-judul:first-child { border-top: 0; padding-top: 0; }

/* --- baris dokumen di dalam sel tabel ---------------------------------- */
.dok-baris { display: flex; align-items: center; gap: 6px; margin-bottom: 5px; }
.dok-baris > .dok-label { font-size: 11px; color: var(--t-muted); min-width: 82px; }
.dok-baris:last-child { margin-bottom: 0; }
.input-berkas { max-width: 132px; padding: 4px 6px; font-size: 11px; }

/* --- kotak cari di topbar: .cmd milik tema, isinya input sungguhan ------- */
.cmd input { border: 0; background: transparent; color: var(--t-base);
             font: inherit; font-size: 13px; outline: 0; min-width: 0; flex: 1; }
.cmd input::placeholder { color: var(--t-light); }
.cmd:focus-within { border-color: var(--primary); color: var(--t-base); }

/* --- hero: sisakan jarak bila halaman punya alert di bawahnya ----------- */
.hero + .alert { margin-top: -8px; }

/* --- dua varian rona kartu KPI yang tidak disediakan tema --------------- */
.kpi-card.c-warning { color: var(--warning); }
.kpi-card.c-info    { color: var(--info); }

/* --- isi satu berkas gabungan (poin 4, alternatif poin 13) -------------- */
.isi-berkas { margin: 10px 0 0 46px; background: var(--bg-muted); border-radius: 9px;
              padding: 10px 12px; }
.isi-berkas-judul { font-size: 11px; font-weight: 600; letter-spacing: .04em;
                    text-transform: uppercase; color: var(--t-light); margin-bottom: 6px; }
.isi-berkas-daftar { margin: 0; padding-left: 0; list-style: none;
                     display: flex; flex-direction: column; gap: 5px; }
.isi-berkas-daftar li { font-size: 12.5px; color: var(--t-muted);
                        display: flex; align-items: center; gap: 8px; }
@media (max-width: 720px) { .isi-berkas { margin-left: 0; } }

/* --- dua kotak karya ilmiah syarat khusus (poin 12) --------------------- */
.karya-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
              gap: 14px; margin-top: 14px; }
@media (max-width: 900px) { .karya-grid { grid-template-columns: 1fr; } }
.karya-kotak { border: 1px solid var(--border); border-radius: 11px;
               background: var(--bg-card); padding: 14px 16px; }
.karya-kepala { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.karya-judul { font-size: 13.5px; font-weight: 600; color: var(--t-base); line-height: 1.35; }
.karya-dokumen { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--border-soft); }

/* --- pilihan Ada / Tidak / N-A pada formulir pemeriksaan ---------------- */
.nilai-pilih { display: inline-flex; gap: 4px; flex-shrink: 0; }
.nilai-opsi { position: relative; cursor: pointer; }
.nilai-opsi input { position: absolute; opacity: 0; width: 0; height: 0; }
.nilai-opsi > span { display: inline-block; padding: 5px 12px; border-radius: 8px;
                     border: 1px solid var(--border); background: var(--bg-card);
                     font-size: 12px; font-weight: 500; color: var(--t-muted);
                     transition: all .16s ease; }
.nilai-opsi:hover > span { border-color: var(--primary); color: var(--t-base); }
.nilai-opsi input:focus-visible + span { outline: 2px solid var(--primary-ring); outline-offset: 1px; }
.nilai-opsi.n-ada.terpilih > span    { background: var(--success-soft); border-color: var(--success); color: var(--success); }
.nilai-opsi.n-tidak.terpilih > span  { background: var(--danger-soft);  border-color: var(--danger);  color: var(--danger); }
.nilai-opsi.n-na.terpilih > span     { background: var(--bg-muted);     border-color: var(--border);  color: var(--t-muted); }
.nilai-opsi input:disabled + span { opacity: .55; cursor: not-allowed; }

/* --- spanduk saat masuk sebagai pengguna lain --------------------------- */
.samaran-spanduk { display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
                   padding: 10px 32px; font-size: 12.5px;
                   background: var(--warning-soft); color: var(--warning);
                   border-bottom: 1px solid var(--border); }
.samaran-spanduk svg { width: 16px; height: 16px; flex-shrink: 0; }
.samaran-spanduk strong { color: var(--t-base); }
@media (max-width: 720px) { .samaran-spanduk { padding: 10px 12px; } }

/* --- tabel statistik silang: kepala bertingkat dan baris jumlah --------- */
.table.statistik thead th { vertical-align: bottom; }
.table.statistik thead tr:first-child th[colspan] { border-bottom: 1px solid var(--border-soft); }
.table.statistik tfoot .baris-jumlah td { font-weight: 700; color: var(--t-base);
                                          border-top: 2px solid var(--border); }

/* --- bar saringan bertingkat pada daftar dosen kepegawaian -------------- */
.saring-bar { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end;
              padding: 14px 20px; border-bottom: 1px solid var(--border-soft);
              background: var(--bg-muted); }
.saring-isian { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.saring-isian .eyebrow { line-height: 1.2; }
.saring-isian select { min-width: 11rem; max-width: 17rem; text-align: left; }
.saring-isian select:disabled { opacity: .55; cursor: not-allowed; }
@media (max-width: 720px) {
  .saring-bar { padding: 12px; }
  .saring-isian, .saring-isian select { width: 100%; max-width: none; }
}

/* --- navigasi halaman -------------------------------------------------- */
.halaman-bar { display: flex; flex-wrap: wrap; gap: 10px; align-items: center;
               justify-content: space-between;
               padding: 12px 20px; border-top: 1px solid var(--border-soft); }
.halaman-bar .u-row { flex-wrap: wrap; gap: 4px; }

/* --- modal: dialog untuk formulir tambah/ubah -------------------------- */
/* Memakai <dialog> bawaan peramban: fokus terkunci, Esc menutup, dan latar
   belakangnya inert tanpa satu baris JavaScript pun untuk hal-hal itu. */
.modal { padding: 0; border: 0; border-radius: 14px; width: min(52rem, calc(100vw - 2rem));
         max-height: calc(100vh - 4rem); background: var(--bg-card); color: var(--t-base);
         box-shadow: var(--shadow-lg); }
.modal::backdrop { background: var(--overlay); backdrop-filter: blur(2px); }
.modal-kepala { display: flex; align-items: flex-start; gap: 12px;
                padding: 18px 22px 14px; border-bottom: 1px solid var(--border-soft); }
.modal-kepala .card-title { margin: 0; }
.modal-tutup { margin-left: auto; border: 0; background: none; cursor: pointer;
               color: var(--t-muted); font-size: 22px; line-height: 1; padding: 0 4px; }
.modal-tutup:hover { color: var(--t-base); }
.modal-isi { padding: 18px 22px; overflow-y: auto; max-height: calc(100vh - 14rem); }
.modal-kaki { display: flex; justify-content: flex-end; gap: 8px;
              padding: 14px 22px; border-top: 1px solid var(--border-soft);
              background: var(--bg-muted); border-radius: 0 0 14px 14px; }
@media (max-width: 720px) { .modal-isi { max-height: calc(100vh - 12rem); } }

/* --- kotak unggah berkas di dalam formulir ----------------------------- */
.berkas-isian { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.berkas-isian input[type=file] { font-size: 12.5px; color: var(--t-muted); }
.berkas-ada { display: inline-flex; align-items: center; gap: 6px; }

/* --- spanduk sandi baku, dan penanda pada tombol akun ------------------- */
/* Merah, bukan kuning: ini bukan saran melainkan akun yang praktis terbuka. */
.sandi-spanduk { background: var(--danger-soft); color: var(--danger); }
.icon-btn.perlu-perhatian { position: relative; color: var(--danger); }
.icon-btn.perlu-perhatian::after {
  content: ""; position: absolute; top: 6px; right: 6px;
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--danger); box-shadow: 0 0 0 2px var(--bg-card);
}