/* KPI Non Akademik UPGRIS */
:root {
  --ink: #1c2733;
  --muted: #5e6b78;
  --line: #d7dde3;
  --bg: #f2f4f6;
  --paper: #ffffff;
  --navy: #16324f;
  --primary: #1f5f99;
  --primary-dark: #174a78;
  --warn: #a8481f;
  --focus: #2b7bd6;

  --r-rendah: #2f8a55;  --r-rendah-bg: #e3f3e8;
  --r-moderat: #a37a00; --r-moderat-bg: #fbf1cc;
  --r-tinggi: #c25f17;  --r-tinggi-bg: #fde6d2;
  --r-ekstrem: #b3261e; --r-ekstrem-bg: #f9dcd9;

  --font: "Segoe UI", "Noto Sans", Roboto, "Helvetica Neue", Arial, sans-serif;
}


[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }

a { color: var(--primary); }
a:hover { color: var(--primary-dark); }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
code { font-size: .92em; background: #eef1f4; padding: .05em .35em; border-radius: 3px; }
h1 { font-size: 1.65rem; line-height: 1.25; margin: 0; font-weight: 650; letter-spacing: -.01em; }
h2 { font-size: 1.1rem; margin: 0 0 .75rem; font-weight: 650; }
.muted { color: var(--muted); }
.small { font-size: .85rem; }

.num { text-align: right; font-variant-numeric: tabular-nums; }

/* Page head */
.pagehead { display: flex; justify-content: space-between; align-items: flex-end; gap: 1rem 2rem; flex-wrap: wrap; margin-bottom: 1.25rem; }
.crumb { margin: 0 0 .2rem; color: var(--muted); font-size: .9rem; }
.pagehead-meta { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
.lead { font-size: 1.05rem; color: var(--muted); margin: .35rem 0 1.25rem; }
.narrow { max-width: 640px; }

/* Buttons & forms */
.btnrow { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; }
.inline-form { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; margin: 0; }

label { display: flex; flex-direction: column; gap: .3rem; font-weight: 600; font-size: .9rem; }
label small { font-weight: 400; color: var(--muted); }
input, select, textarea { font: inherit; font-weight: 400; color: var(--ink); background: #fff; border: 1px solid #b9c4cf;
  border-radius: 5px; padding: .5rem .6rem; width: 100%; min-width: 0; }
textarea { resize: vertical; line-height: 1.45; }
input:hover, select:hover, textarea:hover { border-color: #8d9aa7; }
input[type=checkbox], input[type=radio] { width: auto; accent-color: var(--primary); }
.check { flex-direction: row; align-items: center; gap: .5rem; font-weight: 400; }
fieldset { border: 1px solid var(--line); border-radius: 6px; padding: .6rem .9rem .8rem; margin: 0; }
legend { font-weight: 600; font-size: .9rem; padding: 0 .3rem; display: flex; gap: .75rem; align-items: center; }
.stack { display: flex; flex-direction: column; gap: 1rem; }
.grid-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem 1.25rem; align-items: end; }
.span2 { grid-column: 1 / -1; }
.err { color: var(--r-ekstrem) !important; font-weight: 600 !important; }

/* Flash */
.flash { padding: .75rem 1rem; border-radius: 5px; margin: 0 0 1rem; border-left: 4px solid; background: var(--paper); }
.flash-ok { border-color: var(--r-rendah); background: var(--r-rendah-bg); }
.flash-error { border-color: var(--r-ekstrem); background: var(--r-ekstrem-bg); }
.flash-info { border-color: var(--primary); background: #e4eef8; }

/* Status & level badges */
.st, .lvl, .valid { display: inline-block; font-size: .82rem; font-weight: 650; padding: .15rem .55rem; border-radius: 999px; white-space: nowrap; }
.st-draft { background: #e7ebef; color: #46525e; }
.st-dikirim { background: #e0ecf8; color: var(--primary-dark); }
.st-revisi { background: var(--r-tinggi-bg); color: var(--r-tinggi); }
.st-selesai { background: var(--r-rendah-bg); color: var(--r-rendah); }
.st-aktif { background: var(--navy); color: #fff; }
.lvl-rendah { background: var(--r-rendah-bg); color: var(--r-rendah); }
.lvl-moderat { background: var(--r-moderat-bg); color: var(--r-moderat); }
.lvl-tinggi { background: var(--r-tinggi-bg); color: var(--r-tinggi); }
.lvl-ekstrem { background: var(--r-ekstrem); color: #fff; }
.lvl-none { background: #eef1f4; color: var(--muted); font-weight: 500; }
.valid-ya { background: var(--r-rendah-bg); color: var(--r-rendah); }
.valid-tidak { background: var(--r-ekstrem-bg); color: var(--r-ekstrem); }

/* Progress */
.prog { display: flex; align-items: center; gap: .6rem; font-size: .9rem; color: var(--muted); }
.prog progress { width: 140px; height: 8px; appearance: none; border: 0; border-radius: 4px; background: #dfe5ea; overflow: hidden; }
.prog progress::-webkit-progress-bar { background: #dfe5ea; }
.prog progress::-webkit-progress-value { background: var(--r-rendah); }
.prog progress::-moz-progress-bar { background: var(--r-rendah); }
.prog b { color: var(--ink); }

/* Indicator list: numbered rows, not cards */
.kpi-form { background: var(--paper); border: 1px solid var(--line); border-radius: 8px; }
.ind { display: grid; grid-template-columns: 3.5rem minmax(0, 1fr); border-top: 1px solid var(--line); scroll-margin-top: 1rem; }
.ind:first-child, .audit-date + .ind { border-top: 0; }
.ind.is-hidden { display: none; }
.ind-no { font-size: 1.35rem; font-weight: 700; color: #9aa7b4; text-align: right; padding: 1.2rem .4rem 0 0; font-variant-numeric: tabular-nums; }
.ind[data-lengkap="1"] .ind-no { color: var(--r-rendah); }
.ind.has-error { background: #fff7f6; }
.ind.has-error .ind-no { color: var(--r-ekstrem); }
.ind-body { padding: 1.1rem 1.4rem 1.3rem .9rem; min-width: 0; }
.ind-teks { font-size: 1rem; font-weight: 600; line-height: 1.45; margin: 0 0 .9rem; max-width: 75ch; }
.fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .85rem 1.1rem; }
.lvl-out { display: flex; flex-direction: column; gap: .35rem; justify-content: flex-end; padding-bottom: .45rem; }
.lvl-out .lbl { font-weight: 600; font-size: .9rem; }
@media (min-width: 900px) {
  .fields { grid-template-columns: 1fr 1fr 1fr; }
  .fields > .span2 { grid-column: span 3; }
  .fields .lvl-out { grid-column: auto; }
  .audit-fields { grid-template-columns: auto 1fr 1fr; }
  .audit-fields > .span2 { grid-column: auto; }
}
.audit-date { max-width: 260px; padding: 1rem 1.4rem; border-bottom: 1px solid var(--line); }
.audit-fields { margin-top: 1rem; padding-top: 1rem; border-top: 1px dashed var(--line); }
.valid-pick { display: flex; gap: 1rem; align-items: center; }
.valid-pick label { flex-direction: row; align-items: center; gap: .35rem; font-weight: 500; }

/* Read-only isian */
.isian { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .6rem 1.1rem; margin: 0; }
.isian > div { min-width: 0; }
.isian .span2 { grid-column: 1 / -1; }
.isian dt { font-size: .8rem; color: var(--muted); font-weight: 600; }
.isian dd { margin: .1rem 0 0; overflow-wrap: anywhere; }
.auditnote { margin: .9rem 0 0; padding: .7rem .9rem; background: #f5f7f9; border-left: 3px solid var(--primary); border-radius: 0 5px 5px 0; }
.auditnote p { margin: .2rem 0; }
.auditnote-head { font-weight: 650; display: flex; gap: .5rem; align-items: center; }
.fields + .auditnote, .auditnote + .fields { margin-top: .9rem; }
.note-revisi { background: var(--r-tinggi-bg); border-left: 4px solid var(--r-tinggi); padding: .8rem 1rem; border-radius: 5px; margin-bottom: 1rem; }
.note-revisi p { margin: .3rem 0 0; }

.toolbar { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; margin-bottom: .75rem; }
.toolbar p { margin: 0; max-width: 60ch; font-size: .9rem; }

/* Sticky action bar */
.actionbar { position: sticky; bottom: 0; z-index: 5; display: flex; justify-content: flex-end; align-items: center; gap: .75rem; flex-wrap: wrap;
  padding: .8rem 1.4rem; background: rgba(255,255,255,.97); border-top: 1px solid var(--line); border-radius: 0 0 8px 8px;
  box-shadow: 0 -6px 16px -12px rgba(22,50,79,.5); }
.actionbar .prog { margin-right: auto; }
.dirty-note { color: var(--r-tinggi); font-size: .88rem; font-weight: 600; }
.revisi-box { padding: 1rem 1.4rem; border-top: 1px solid var(--line); }
.revisi-box summary { cursor: pointer; font-weight: 600; color: var(--warn); }
.revisi-box h2 { font-size: 1.05rem; color: var(--warn); margin: 0 0 .4rem; }
.revisi-box textarea[aria-invalid="true"] { border-color: var(--r-ekstrem); outline: 2px solid var(--r-ekstrem); }
.revisi-box { scroll-margin-top: 1rem; }
.revisi-box label { margin: .8rem 0; max-width: 720px; }

/* Summary + risk map */
.summary { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 1.5rem 2.5rem; align-items: start; margin-bottom: 1.5rem;
  background: var(--paper); border: 1px solid var(--line); border-radius: 8px; padding: 1.25rem 1.4rem; }
.facts { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 1rem 1.5rem; margin: 0; }
.facts dt { font-size: .82rem; color: var(--muted); font-weight: 600; }
.facts dd { margin: .15rem 0 0; }
.facts-big dd { font-size: 1.6rem; font-weight: 700; line-height: 1.2; font-variant-numeric: tabular-nums; }
.facts-big dd.dana { font-size: 1.3rem; }
.facts-big dd.dana small { display: block; font-size: .8rem; }
.facts-big dd small { font-size: .9rem; font-weight: 500; color: var(--muted); }

.peta { border-collapse: separate; border-spacing: 3px; font-size: .78rem; }
.peta caption { text-align: left; font-weight: 650; font-size: .9rem; padding-bottom: .4rem; }
.peta th { font-weight: 500; color: var(--muted); padding: 2px 4px; vertical-align: bottom; }
.peta th b { display: block; color: var(--ink); font-size: .9rem; }
.peta th small { display: block; font-size: .7rem; line-height: 1.1; max-width: 5.2rem; }
.peta tbody th { text-align: right; vertical-align: middle; }
.peta .peta-corner { font-size: .68rem; text-align: left; max-width: 6rem; }
.peta td { min-width: 3.1rem; height: 2.5rem; border-radius: 4px; text-align: center; vertical-align: middle; padding: 3px 4px; }
/* Nomor indikator per sel, dipisah spasi */
.peta td .ids { display: block; font-weight: 700; font-size: .8rem; line-height: 1.35; word-spacing: .4em; color: var(--ink);
  overflow-wrap: anywhere; font-variant-numeric: tabular-nums;
  max-width: 6.5rem; margin: 0 auto; } /* batasi lebar agar nomor turun ke baris berikutnya */
/* Peta gabungan: jumlah indikator sebagai tombol yang membuka popup */
.peta-btn { display: inline-grid; place-items: center; min-width: 1.75rem; height: 1.75rem; padding: 0 .35rem; border-radius: 999px; border: 0;
  background: #fff; font: inherit; font-weight: 700; font-size: .85rem; color: var(--ink); box-shadow: 0 1px 2px rgba(0,0,0,.2); cursor: pointer; }
.peta-btn:hover { box-shadow: 0 0 0 2px var(--ink); }
.peta-btn:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.peta-dialog { border: 0; border-radius: 10px; padding: 0; width: min(560px, calc(100vw - 2rem)); max-height: min(80vh, 640px);
  box-shadow: 0 12px 40px rgba(0,0,0,.25); color: var(--ink); }
.peta-dialog::backdrop { background: rgba(20, 30, 40, .45); }
.peta-dialog .dlg-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .8rem 1rem;
  border-bottom: 1px solid var(--line); position: sticky; top: 0; background: #fff; }
.peta-dialog h2 { font-size: 1rem; margin: 0; }
.peta-dialog .dlg-close { border: 0; background: none; font-size: 1.6rem; line-height: 1; cursor: pointer; color: var(--muted); padding: 0 .3rem; }
.peta-dialog .dlg-close:hover { color: var(--ink); }
.peta-dialog .dlg-body { padding: .4rem 1rem 1rem; }
.peta-dialog table { width: 100%; }
.peta-dialog td.ids { font-weight: 600; word-spacing: .4em; font-variant-numeric: tabular-nums; }
.cell-rendah { background: var(--r-rendah-bg); } .cell-rendah.has { background: #9fd3b1; }
.cell-moderat { background: var(--r-moderat-bg); } .cell-moderat.has { background: #efd46b; }
.cell-tinggi { background: var(--r-tinggi-bg); } .cell-tinggi.has { background: #f2a86d; }
.cell-ekstrem { background: var(--r-ekstrem-bg); } .cell-ekstrem.has { background: #de6b62; }

/* Tables */
.tablewrap { overflow-x: auto; background: var(--paper); border: 1px solid var(--line); border-radius: 8px; }
.data { width: 100%; border-collapse: collapse; font-size: .92rem; }
.data th { text-align: left; font-size: .82rem; color: var(--muted); font-weight: 650; background: #f7f9fa; padding: .6rem .8rem; border-bottom: 1px solid var(--line); white-space: nowrap; }
.data td { padding: .6rem .8rem; border-bottom: 1px solid #e8ecef; vertical-align: middle; }
.data tbody tr:last-child td { border-bottom: 0; }
.data tbody tr:hover { background: #f8fafb; }
.data th.num { text-align: right; }
.row-off td { color: #9aa7b4; }
.row-warn td { background: #fff7f1; }
.risk-counts { white-space: nowrap; }
/* Tabel rekap: dipadatkan agar muat tanpa geser ke samping */
.data.rekap { font-size: .86rem; }
.data.rekap th { white-space: normal; vertical-align: bottom; padding: .5rem .5rem; line-height: 1.25; }
.data.rekap th small { display: block; font-weight: 500; font-size: .74rem; white-space: nowrap; }
.data.rekap td { padding: .45rem .5rem; }
.data.rekap td.num { white-space: nowrap; }
.data.rekap td.unit { min-width: 11rem; }
.data.rekap td.unit a { font-weight: 600; color: inherit; text-decoration: none; }
.data.rekap td.unit a:hover, .data.rekap td.unit a:focus-visible { color: var(--primary); text-decoration: underline; }
.data.rekap td.auditor { font-size: .82rem; min-width: 7rem; }
.dana-sel span { display: block; font-variant-numeric: tabular-nums; }
.dana-sel small { display: block; font-size: .74rem; color: var(--muted); }
.data.rekap .risk-counts span { min-width: 1.35rem; }
.risk-counts span { display: inline-block; min-width: 1.6rem; text-align: center; border-radius: 3px; font-weight: 650; }
.c-e { background: var(--r-ekstrem-bg); color: var(--r-ekstrem); }
.c-t { background: var(--r-tinggi-bg); color: var(--r-tinggi); }
.c-m { background: var(--r-moderat-bg); color: var(--r-moderat); }
.c-r { background: var(--r-rendah-bg); color: var(--r-rendah); }

.tabs { display: flex; gap: .25rem; flex-wrap: wrap; margin: 0 0 .9rem; border-bottom: 1px solid var(--line); }
.tabs a { padding: .5rem .8rem; text-decoration: none; color: var(--muted); border-bottom: 3px solid transparent; margin-bottom: -1px; }
.tabs a b { font-weight: 600; color: var(--ink); margin-left: .2rem; }
.tabs a[aria-current] { color: var(--ink); border-color: var(--primary); font-weight: 600; }

.panel { background: var(--paper); border: 1px solid var(--line); border-radius: 8px; padding: 1.25rem 1.4rem; margin: 1.25rem 0; }
.panel > .inline-form { margin-top: 1rem; }
.creds { background: #fffbea; border: 1px solid #ecd67a; border-radius: 8px; padding: 1.25rem 1.4rem; margin-bottom: 1.25rem; }
.creds p { max-width: 70ch; }
.creds .tablewrap { margin-bottom: .75rem; }
.unit-picks { max-height: 320px; overflow: auto; display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: .3rem 1rem; }
.unit-picks legend input { width: 200px; padding: .25rem .5rem; font-weight: 400; }
.unit-picks .check.is-hidden { display: none; }

.ind-admin { list-style: none; padding: 0; margin: 0; background: var(--paper); border: 1px solid var(--line); border-radius: 8px; }
.ind-admin li { border-top: 1px solid var(--line); padding: .75rem 1rem; }
.ind-admin li:first-child { border-top: 0; }
.ind-edit { display: grid; grid-template-columns: 4rem minmax(0, 1fr) auto; gap: .75rem; align-items: start; }
.ind-edit textarea { width: 100%; }
.ind-edit p.small { margin: .3rem 0 0; }
.no-input { text-align: center; font-weight: 700; }

.empty { background: var(--paper); border: 1px dashed #b9c4cf; border-radius: 8px; padding: 2.5rem 1.5rem; text-align: center; }
.empty h1 { margin-bottom: .5rem; }

.login { max-width: 420px; margin: 3rem auto 0; background: var(--paper); border: 1px solid var(--line); border-radius: 10px; padding: 2rem 2rem 1.5rem; }
.login h1 { font-size: 1.45rem; }

@media (max-width: 760px) {
  .summary { grid-template-columns: 1fr; }
  .peta { justify-self: start; }
  .grid-form, .fields, .isian { grid-template-columns: 1fr; }
  .ind { grid-template-columns: 2.4rem minmax(0, 1fr); }
  .ind-body { padding: 1rem .9rem 1.1rem .5rem; }
  .ind-edit { grid-template-columns: 3.2rem minmax(0, 1fr); }
  .ind-edit .btnrow { grid-column: 2; }
  .actionbar { padding: .7rem .9rem; }
  .actionbar .prog { width: 100%; }
}
@media (prefers-reduced-motion: reduce) { * { scroll-behavior: auto !important; } }

/* Unggah dan pratinjau dokumen bukti */
.bukti-aksi { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .7rem; margin-top: .45rem; }
.bukti-aksi label.btn { width: auto; margin: 0; cursor: pointer; font-weight: 400; }
.bukti-aksi label.btn:focus-within { outline: 2px solid var(--focus); outline-offset: 2px; }
.bukti-aksi .err { color: var(--warn); }
.bukti-dialog { width: min(1000px, calc(100vw - 2rem)); height: 90vh; max-height: 90vh; overflow: hidden; }
.bukti-dialog .dlg-head { height: 3.2rem; box-sizing: border-box; }
.bukti-dialog h2 { flex: 1; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.bukti-dialog .dlg-body { height: calc(100% - 3.2rem); padding: 0; overflow: auto; background: #eef1f4; }
.bukti-dialog iframe { display: block; width: 100%; height: 100%; border: 0; background: #fff; }
.bukti-dialog img { display: block; max-width: 100%; margin: 0 auto; }

/* ---------- Tema AdminLTE: aturan di bawah menyesuaikan komponen aplikasi ---------- */
body { font: 15px/1.55 var(--font); color: var(--ink); }
.content-wrapper { background: var(--bg); }
.wrap { padding-top: 1.25rem; padding-bottom: 1.5rem; }
h1 { font-size: 1.5rem; }
label { margin-bottom: 0; }
.nama { color: #fff; line-height: 1.25; white-space: normal; }
.user-panel .info { white-space: normal; padding: 0 .5rem 0 .75rem; }
.user-panel small { color: #c2c7d0; }
.avatar { display: grid; place-items: center; width: 2.1rem; height: 2.1rem; border-radius: 50%; background: #4f5962; color: #fff; }
.brand-link { display: flex; align-items: center; gap: .6rem; }
.brand-link .brand-text { font-weight: 600; white-space: nowrap; }
.brand-mark { flex: none; display: inline-block; width: 22px; height: 22px; border-radius: 4px;
  background: linear-gradient(90deg, var(--r-rendah) 0 25%, var(--r-moderat) 25% 50%, #e0782a 50% 75%, var(--r-ekstrem) 75%); }
.top-siapa { color: var(--muted) !important; }
.btn-keluar { background: none; border: 0; cursor: pointer; color: rgba(0,0,0,.5); font: inherit; }
.btn-keluar:hover { color: rgba(0,0,0,.8); }

/* Halaman tamu (masuk) */
.kotak-tamu { width: min(440px, calc(100vw - 2rem)); }
.login-logo { display: flex; justify-content: center; align-items: center; gap: .6rem; font-size: 1.6rem; font-weight: 600; color: var(--navy); }
.login { margin: 0; border: 0; border-top: 3px solid #007bff; border-radius: .25rem; box-shadow: 0 0 1px rgba(0,0,0,.125), 0 1px 3px rgba(0,0,0,.2); }
.login-page .foot { padding-bottom: 0; }

/* Tombol: .btn tanpa warna memakai gaya tombol bawaan AdminLTE */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: .4rem; background-color: #f8f9fa; border-color: #ddd; color: #444; }
.btn:hover { background-color: #e9ecef; color: #2b2b2b; }
.btn-primary { background-color: #007bff; border-color: #007bff; color: #fff; }
.btn-primary:hover { background-color: #0069d9; border-color: #0062cc; color: #fff; }
.btn-warn { background-color: #fff; color: var(--warn); border-color: #e2b9a6; }
.btn-warn:hover { background-color: var(--warn); border-color: var(--warn); color: #fff; }
.btn-small { padding: .25rem .6rem; font-size: .875rem; }

/* Isian mengikuti tampilan form Bootstrap */
input, select, textarea { border: 1px solid #ced4da; border-radius: .25rem; padding: .4rem .65rem; }
input:hover, select:hover, textarea:hover { border-color: #adb5bd; }
input:focus, select:focus, textarea:focus { outline: 0; border-color: #80bdff; box-shadow: 0 0 0 .2rem rgba(0,123,255,.2); }

/* Kartu */
.kartu, .panel, .summary, .tablewrap, .kpi-form, .ind-admin, .empty, .creds {
  background: #fff; border: 0; border-radius: .25rem; box-shadow: 0 0 1px rgba(0,0,0,.125), 0 1px 3px rgba(0,0,0,.2); }
.kartu { padding: 1.25rem 1.4rem; margin-bottom: 1.25rem; }
.kartu-peta { overflow-x: auto; }
.kartu-peta .peta { margin: 0 auto; }
.panel { border-top: 3px solid #007bff; }
.kpi-form { border-top: 3px solid #007bff; margin-bottom: 1.25rem; }
.empty { border: 1px dashed #adb5bd; box-shadow: none; }
.creds { background: #fffbea; border: 1px solid #ecd67a; }
.tablewrap { margin-bottom: 1.25rem; }
.data th { background: #f4f6f9; color: #495057; }
.summary .peta { justify-self: end; }
.ind-no { color: #adb5bd; }
.ind { transition: background-color .15s; }
.tabs { border-bottom: 1px solid #dee2e6; }
.tabs a[aria-current] { border-color: #007bff; }
.flash { box-shadow: 0 0 1px rgba(0,0,0,.125), 0 1px 3px rgba(0,0,0,.12); }
.flash-info { border-color: #007bff; }
.small-box h3 sup { font-size: 1rem; font-weight: 500; top: -.9em; margin-left: .15rem; }
.small-box .icon > i { font-size: 3.6rem; top: 15px; }
.info-box-text { white-space: normal; }
.info-box-number small { font-weight: 400; color: var(--muted); }
.actionbar { border-radius: 0 0 .25rem .25rem; }
.bukti-aksi label.btn { display: inline-flex; flex-direction: row; }
.peta-dialog { border-radius: .3rem; }

@media (max-width: 760px) {
  .wrap { padding: 1rem .5rem 1.5rem; }
  .summary .peta { justify-self: start; }
  .small-box h3 { font-size: 1.8rem; }
  .small-box .icon { display: none; }
}
@media print {
  .main-header, .main-sidebar, .main-footer, .actionbar, .toolbar, .btn { display: none !important; }
  .content-wrapper { margin-left: 0 !important; background: #fff; }
  .kartu, .panel, .summary, .tablewrap, .kpi-form { box-shadow: none; border: 1px solid #ccc; }
}

/* Penyesuaian setelah diperiksa di browser */
.brand-link .brand-text { font-size: 1.05rem; overflow: hidden; text-overflow: ellipsis; }
.foot { text-align: center; color: var(--muted); font-size: .85rem; margin: 1rem 0 0; }
.login-box.kotak-tamu { width: min(440px, calc(100vw - 2rem)); }
.info-box .info-box-text { white-space: normal; line-height: 1.25; }
.peta caption { caption-side: top; color: var(--ink); }
code { color: #374151; }
.actionbar { background: #fff; }
.audit-date { max-width: none; }
.audit-date input { max-width: 240px; }
.brand-link .brand-text { font-size: .95rem; }
.pagehead .inline-form select { width: auto; max-width: 340px; }
@media (max-width: 760px) { .pagehead .inline-form select { width: 100%; max-width: none; } }