/* PKBMQu -- target aksesibilitas WCAG 2.1 level AA (riset 7.8):
   kontras minimal 4.5:1, target sentuh minimal 44px, fokus keyboard
   selalu terlihat, tidak mengandalkan warna sebagai satu-satunya
   penanda, dan mendukung pembesaran 200 persen tanpa scroll horizontal. */

:root {
  --pq-bg: #f6f7f9;
  --pq-surface: #ffffff;
  --pq-primary: #1f5f4e;
  --pq-primary-dark: #17493c;
  --pq-primary-light: #e8f2ef;
  --pq-accent: #8a5a00;
  --pq-success: #1f6b3f;
  --pq-success-light: #e9f4ed;
  --pq-warning: #8a5a00;
  --pq-warning-light: #fbf3e4;
  --pq-danger: #a32b21;
  --pq-danger-light: #fbeceb;
  --pq-info: #1c4f7c;
  --pq-info-light: #e9f1f8;
  --pq-text: #1c1f23;
  --pq-text-muted: #5c636e;
  --pq-border: #dfe3e8;
  --pq-radius-lg: 14px;
  --pq-radius-md: 10px;
  --pq-radius-sm: 7px;
  --pq-shadow: 0 1px 3px rgba(16, 24, 40, 0.06);
}

* { box-sizing: border-box; }

html { font-size: 16px; }

body {
  margin: 0;
  background: var(--pq-bg);
  color: var(--pq-text);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  line-height: 1.55;
}

a { color: var(--pq-primary-dark); }

/* Fokus keyboard tidak boleh dihilangkan -- seluruh fungsi wajib bisa
   diakses lewat keyboard. */
:focus-visible {
  outline: 3px solid var(--pq-primary);
  outline-offset: 2px;
}

.pq-lewati {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--pq-primary);
  color: #fff;
  padding: 12px 18px;
  z-index: 2000;
}
.pq-lewati:focus { left: 8px; top: 8px; }

/* ---------- Tata letak ---------- */
.pq-wrap { max-width: 1240px; margin: 0 auto; padding: 16px; }
.pq-grid { display: grid; gap: 16px; }
.pq-grid-2 { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.pq-grid-3 { grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
.pq-grid-4 { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
.pq-flex { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.pq-flex-between { display: flex; gap: 12px; align-items: center; justify-content: space-between; flex-wrap: wrap; }
.pq-mt { margin-top: 16px; }
.pq-mb { margin-bottom: 16px; }
.pq-grow { flex: 1 1 220px; }

/* ---------- Topbar & navigasi ---------- */
.pq-topbar {
  background: var(--pq-surface);
  border-bottom: 1px solid var(--pq-border);
  padding: 10px 16px;
  position: sticky;
  top: 0;
  z-index: 100;
}
.pq-topbar-inner { max-width: 1240px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.pq-logo { display: flex; align-items: center; gap: 10px; font-weight: 700; color: var(--pq-text); text-decoration: none; font-size: 1rem; }
.pq-logo-badge {
  width: 34px; height: 34px; border-radius: 9px; background: var(--pq-primary); color: #fff;
  display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 0.8rem;
}
.pq-nav { display: flex; gap: 4px; flex-wrap: wrap; }
.pq-nav a {
  display: inline-flex; align-items: center; min-height: 44px; padding: 8px 14px;
  border-radius: 999px; color: var(--pq-text-muted); font-size: 0.88rem; font-weight: 500;
  text-decoration: none; white-space: nowrap;
}
.pq-nav a:hover { background: var(--pq-bg); color: var(--pq-text); }
.pq-nav a.aktif { background: var(--pq-primary-light); color: var(--pq-primary-dark); font-weight: 700; }
.pq-user { display: flex; align-items: center; gap: 10px; }
.pq-avatar {
  width: 38px; height: 38px; border-radius: 50%; background: var(--pq-primary-light);
  color: var(--pq-primary-dark); display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 0.85rem;
  flex-shrink: 0;
}

/* ---------- Sidebar ----------
   Menu internal berjumlah belasan dan sebelumnya membungkus jadi tiga
   baris di topbar horizontal, memakan tinggi layar yang seharusnya untuk
   data. Sebagai sidebar, menu dikelompokkan per bidang kerja dan tetap
   terlihat saat halaman digulir. */
.pq-sidebar {
  position: fixed;
  top: 0;
  left: 0;
  width: 248px;
  height: 100vh;
  background: var(--pq-surface);
  border-right: 1px solid var(--pq-border);
  display: flex;
  flex-direction: column;
  z-index: 200;
  overflow-y: auto;
  overscroll-behavior: contain;
}
body.pq-ada-sidebar { padding-left: 248px; }

.pq-sidebar-kepala {
  padding: 16px 18px 12px;
  border-bottom: 1px solid var(--pq-border);
  flex-shrink: 0;
}

.pq-sidebar-nav { padding: 10px 10px 16px; flex: 1; }
.pq-sidebar-grup { margin-bottom: 14px; }
.pq-sidebar-grup-judul {
  padding: 4px 10px;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--pq-text-muted);
}
.pq-sidebar-nav a {
  display: flex;
  align-items: center;
  gap: 9px;
  min-height: 40px;
  padding: 8px 10px;
  margin-top: 1px;
  border-radius: var(--pq-radius-sm);
  color: var(--pq-text);
  font-size: 0.88rem;
  font-weight: 500;
  text-decoration: none;
  line-height: 1.3;
}
.pq-sidebar-nav a:hover { background: var(--pq-bg); }
.pq-sidebar-nav a.aktif {
  background: var(--pq-primary-light);
  color: var(--pq-primary-dark);
  font-weight: 700;
}
.pq-sidebar-ikon {
  width: 18px;
  text-align: center;
  flex-shrink: 0;
  opacity: 0.75;
  font-size: 0.95rem;
}
.pq-sidebar-nav a.aktif .pq-sidebar-ikon { opacity: 1; }

.pq-sidebar-kaki {
  padding: 12px 14px;
  border-top: 1px solid var(--pq-border);
  flex-shrink: 0;
  background: var(--pq-surface);
}
.pq-sidebar-user { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; min-width: 0; }
.pq-sidebar-user > div { min-width: 0; }
.pq-sidebar-user strong,
.pq-sidebar-user span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Batang atas khusus layar sempit: hanya berisi tombol menu dan nama
   aplikasi. Di layar lebar batang ini disembunyikan. */
.pq-batang-hp {
  display: none;
  position: sticky;
  top: 0;
  z-index: 150;
  background: var(--pq-surface);
  border-bottom: 1px solid var(--pq-border);
  padding: 8px 12px;
  align-items: center;
  gap: 10px;
}
.pq-tirai {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(16, 24, 40, 0.45);
  z-index: 190;
}

@media (max-width: 900px) {
  body.pq-ada-sidebar { padding-left: 0; }
  .pq-batang-hp { display: flex; }
  .pq-sidebar {
    transform: translateX(-100%);
    transition: transform 0.18s ease;
    box-shadow: 0 0 30px rgba(16, 24, 40, 0.18);
  }
  body.pq-sidebar-buka .pq-sidebar { transform: translateX(0); }
  body.pq-sidebar-buka .pq-tirai { display: block; }
}

/* Pengguna yang lebih suka gerak minimal tidak perlu animasi geser. */
@media (prefers-reduced-motion: reduce) {
  .pq-sidebar { transition: none; }
}

/* ---------- Kartu ---------- */
.pq-card {
  background: var(--pq-surface);
  border: 1px solid var(--pq-border);
  border-radius: var(--pq-radius-lg);
  padding: 18px;
  box-shadow: var(--pq-shadow);
}
.pq-card h2, .pq-card h3 { margin: 0 0 12px; font-size: 1.02rem; }
.pq-card-judul { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 14px; flex-wrap: wrap; }
.pq-card-judul h2 { margin: 0; }

.pq-stat { display: flex; flex-direction: column; gap: 4px; }
.pq-stat-label { font-size: 0.8rem; color: var(--pq-text-muted); font-weight: 500; }
.pq-stat-nilai { font-size: 1.7rem; font-weight: 700; letter-spacing: -0.02em; }
.pq-stat-ket { font-size: 0.78rem; color: var(--pq-text-muted); }

/* ---------- Formulir ---------- */
.pq-field { display: flex; flex-direction: column; gap: 5px; margin-bottom: 14px; }
.pq-field label { font-size: 0.85rem; font-weight: 600; color: var(--pq-text); }
.pq-field .pq-bantuan { font-size: 0.78rem; color: var(--pq-text-muted); }
.pq-field .pq-galat { font-size: 0.78rem; color: var(--pq-danger); font-weight: 600; }
.pq-wajib::after { content: " *"; color: var(--pq-danger); }

input[type="text"], input[type="email"], input[type="password"], input[type="number"],
input[type="date"], input[type="time"], input[type="tel"], input[type="search"], select, textarea {
  width: 100%;
  min-height: 44px;
  padding: 10px 12px;
  border: 1px solid var(--pq-border);
  border-radius: var(--pq-radius-sm);
  font-size: 0.92rem;
  font-family: inherit;
  color: var(--pq-text);
  background: #fff;
}
textarea { min-height: 90px; resize: vertical; }
input:disabled, select:disabled, textarea:disabled { background: var(--pq-bg); color: var(--pq-text-muted); cursor: not-allowed; }
input[readonly] { background: var(--pq-bg); }

.pq-cek { display: flex; gap: 10px; align-items: flex-start; margin-bottom: 12px; }
.pq-cek input[type="checkbox"], .pq-cek input[type="radio"] { width: 20px; height: 20px; margin-top: 3px; flex-shrink: 0; }
.pq-cek label { font-size: 0.88rem; font-weight: 400; line-height: 1.5; }

/* ---------- Tombol ---------- */
.pq-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 44px; padding: 10px 18px; border-radius: var(--pq-radius-sm);
  border: 1px solid transparent; font-size: 0.9rem; font-weight: 600;
  cursor: pointer; font-family: inherit; text-decoration: none;
}
.pq-btn:disabled { opacity: 0.55; cursor: not-allowed; }
.pq-btn-utama { background: var(--pq-primary); color: #fff; }
.pq-btn-utama:hover:not(:disabled) { background: var(--pq-primary-dark); }
.pq-btn-sekunder { background: #fff; color: var(--pq-text); border-color: var(--pq-border); }
.pq-btn-sekunder:hover:not(:disabled) { background: var(--pq-bg); }
.pq-btn-bahaya { background: var(--pq-danger); color: #fff; }
.pq-btn-kecil { min-height: 36px; padding: 6px 12px; font-size: 0.82rem; }

/* ---------- Tabel ---------- */
.pq-tabel-bungkus { overflow-x: auto; -webkit-overflow-scrolling: touch; }
table.pq-tabel { width: 100%; border-collapse: collapse; font-size: 0.88rem; }
table.pq-tabel th, table.pq-tabel td { padding: 10px 12px; text-align: left; border-bottom: 1px solid var(--pq-border); vertical-align: top; }
table.pq-tabel th { font-weight: 700; font-size: 0.8rem; color: var(--pq-text-muted); text-transform: uppercase; letter-spacing: 0.03em; white-space: nowrap; }
table.pq-tabel tbody tr:hover { background: var(--pq-bg); }
table.pq-tabel td.pq-angka, table.pq-tabel th.pq-angka { text-align: right; font-variant-numeric: tabular-nums; }

/* ---------- Lencana & peringatan ----------
   Setiap lencana punya teks, bukan hanya warna -- warna tidak boleh jadi
   satu-satunya penanda status. */
.pq-lencana {
  display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px;
  border-radius: 999px; font-size: 0.76rem; font-weight: 700; white-space: nowrap;
}
.pq-lencana-netral { background: var(--pq-bg); color: var(--pq-text-muted); border: 1px solid var(--pq-border); }
.pq-lencana-sukses { background: var(--pq-success-light); color: var(--pq-success); }
.pq-lencana-peringatan { background: var(--pq-warning-light); color: var(--pq-warning); }
.pq-lencana-bahaya { background: var(--pq-danger-light); color: var(--pq-danger); }
.pq-lencana-info { background: var(--pq-info-light); color: var(--pq-info); }

.pq-alert { padding: 13px 16px; border-radius: var(--pq-radius-md); font-size: 0.88rem; border: 1px solid; margin-bottom: 14px; }
/* Hanya <strong> pertama yang berfungsi sebagai judul peringatan. Tanpa
   pembatas :first-child, penekanan di tengah kalimat ikut jadi blok dan
   memecah kalimatnya jadi beberapa baris. */
.pq-alert > strong:first-child { display: block; margin-bottom: 3px; }
.pq-alert-info { background: var(--pq-info-light); border-color: #bcd4e8; color: #163d5f; }
.pq-alert-sukses { background: var(--pq-success-light); border-color: #b8dcc6; color: #14522f; }
.pq-alert-peringatan { background: var(--pq-warning-light); border-color: #e7d3a8; color: #6b4600; }
.pq-alert-bahaya { background: var(--pq-danger-light); border-color: #eec2be; color: #7d201a; }

/* ---------- Lain-lain ---------- */
.pq-kosong { padding: 36px 18px; text-align: center; color: var(--pq-text-muted); font-size: 0.9rem; }
.pq-muted { color: var(--pq-text-muted); }
.pq-kecil { font-size: 0.82rem; }
.pq-mono { font-variant-numeric: tabular-nums; }
.pq-pemisah { height: 1px; background: var(--pq-border); margin: 18px 0; border: 0; }

.pq-tab { display: flex; gap: 4px; border-bottom: 1px solid var(--pq-border); margin-bottom: 16px; overflow-x: auto; }
.pq-tab button {
  min-height: 44px; padding: 10px 16px; border: 0; background: none; cursor: pointer;
  font-size: 0.9rem; font-weight: 600; color: var(--pq-text-muted); font-family: inherit;
  border-bottom: 3px solid transparent; white-space: nowrap;
}
.pq-tab button.aktif { color: var(--pq-primary-dark); border-bottom-color: var(--pq-primary); }

.pq-progress { height: 9px; background: var(--pq-border); border-radius: 999px; overflow: hidden; }
.pq-progress span { display: block; height: 100%; background: var(--pq-primary); }

.pq-lapor {
  position: fixed; right: 16px; bottom: 16px; z-index: 500;
  min-height: 44px; padding: 10px 16px; border-radius: 999px;
  background: var(--pq-surface); border: 1px solid var(--pq-border);
  box-shadow: 0 4px 14px rgba(16, 24, 40, 0.12); cursor: pointer;
  font-size: 0.85rem; font-weight: 600; font-family: inherit; color: var(--pq-text);
}

@media (max-width: 640px) {
  .pq-wrap { padding: 12px; }
  .pq-card { padding: 14px; }
  .pq-nav { width: 100%; overflow-x: auto; }
}

@media print {
  .pq-topbar, .pq-lapor, .pq-btn, .pq-tab { display: none !important; }
  body { background: #fff; }
  .pq-card { border: 0; box-shadow: none; padding: 0; }
}