/* ═══════════════════════════════════════════════════════════════
   UI kit: komponen halaman analitik (pilot: Pipeline). Dimuat global
   setelah app.css dari layouts/base.php. Hanya token app.css, tanpa hex.
   Komponen: .ui-page-head, .ui-section, .ui-panel (+ .ui-panel-head), .ui-kpi,
   .ui-grid (+ --kpi5), .ui-status, .ui-grade, .ui-table, .ui-chart (+ .ui-spark), .ui-doc (dokumen bacaan), .rapor-* (Rapor Prestasi), .ui-verify (halaman verifikasi publik), .ui-avatar-row + .avatar-stack/.avatar-xs (tumpukan avatar kecil), .ui-checkin (foto + alamat check-in di Feed). Grafik: public/js/ui-charts.js,
   helper PHP: app/helpers/ui.php.
   ═══════════════════════════════════════════════════════════════ */

/* ── Ritme jarak (satu sumber; halaman memakai token ini, bukan angka sendiri) ──
   --ui-section-gap : antar section (40px desktop, 28px ponsel)
   --ui-block-gap   : antar blok di dalam section dan gap grid kartu (16px, 12px ponsel)
   --ui-head-gap    : judul section ke isinya (16px)
   --ui-card-pad    : padding dalam kartu/panel/grafik (20px, 16px ponsel) */
:root { --ui-section-gap: 2.5rem; --ui-block-gap: 1rem; --ui-head-gap: 1rem; --ui-card-pad: 1.25rem; }
@media (max-width: 767.98px) { :root { --ui-section-gap: 1.75rem; --ui-block-gap: 0.75rem; --ui-card-pad: 1rem; } }

/* ── Skala tipe ── */
.ui-h1 { font-family: var(--font-heading); font-size: var(--text-xl); font-weight: 600; line-height: 1.3; color: var(--text-primary); margin: 0; letter-spacing: -0.01em; }
.ui-h2 { font-family: var(--font-heading); font-size: 0.9375rem; font-weight: 600; line-height: 1.35; color: var(--text-primary); margin: 0; }
.ui-label { font-size: var(--text-xs); font-weight: 500; color: var(--text-muted); line-height: 1.35; }
.ui-body { font-size: var(--text-sm); color: var(--text-secondary); line-height: 1.5; }
.ui-muted { font-size: var(--text-xs); color: var(--text-muted); line-height: 1.45; }
.ui-num { font-variant-numeric: tabular-nums; }

/* ── Page head: judul + meta di kiri, aksi di kanan ── */
.ui-page-head { display: flex; justify-content: space-between; align-items: flex-end; gap: var(--space-4); flex-wrap: wrap; margin-bottom: var(--ui-section-gap); }
.ui-page-head-main { min-width: 0; display: grid; gap: var(--space-1); }
.ui-page-head h1, .ui-page-head .ui-page-title { font-family: var(--font-heading); font-size: var(--text-xl); font-weight: 600; line-height: 1.3; color: var(--text-primary); margin: 0; letter-spacing: -0.01em; }
.ui-page-meta { font-size: var(--text-xs); color: var(--text-muted); display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-3); }
.ui-page-actions { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
.ui-page-actions select { padding: 7px 10px; border: 1px solid var(--border-color); border-radius: var(--radius-md); background: var(--bg-card); color: var(--text-primary); font-size: var(--text-sm); max-width: 220px; }
.ui-page-actions .btn { padding: 7px 14px; font-size: var(--text-sm); }
.ui-field-inline { display: flex; align-items: center; gap: var(--space-2); font-size: var(--text-xs); color: var(--text-muted); margin: 0; }

/* ── Section: judul 15px + satu baris deskripsi ── */
.ui-section { margin-top: var(--ui-section-gap); }
.ui-section:first-child { margin-top: 0; }
/* Tab halaman di bawah page head: isi tab pertama berjarak --ui-section-gap dari tab (section sesudahnya tidak menambah jarak lagi) */
.ui-page-tabs { margin-bottom: var(--ui-section-gap); }
.ui-page-tabs + .ui-section { margin-top: 0; }
/* Blok bertumpuk di dalam section (grid, panel, grafik, daftar): selalu --ui-block-gap, tanpa margin halaman */
.ui-section > :not(.ui-section-head):not(.ui-note) + :not(.ui-note):not(script):not(template):not(style):not(input) { margin-top: var(--ui-block-gap); }
/* Tumpukan blok mandiri (kolom kartu, daftar kartu) dan pembagi dua kolom */
.ui-stack { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--ui-block-gap); align-content: start; min-width: 0; }
.ui-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--ui-block-gap); align-items: start; }
.ui-split--wide { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
/* Dua kartu berdampingan sama tinggi (grafik sebaris, panel sebaris) */
.ui-split--stretch { align-items: stretch; }
.ui-section-head { margin-bottom: var(--ui-head-gap); display: flex; justify-content: space-between; align-items: flex-end; gap: var(--space-3); flex-wrap: wrap; }
.ui-section-head > div { min-width: 0; }
.ui-section-title { font-family: var(--font-heading); font-size: 0.9375rem; font-weight: 600; line-height: 1.35; color: var(--text-primary); margin: 0; }
.ui-section-desc { font-size: var(--text-xs); color: var(--text-muted); margin: 2px 0 0; line-height: 1.45; }
.ui-subhead { font-size: var(--text-xs); font-weight: 600; color: var(--text-secondary); margin: var(--space-4) 0 var(--space-2); text-transform: none; }

/* ── Panel: kartu putih polos untuk tabel/teks ── */
.ui-panel { background: var(--bg-card); border: 1px solid var(--border-color); border-radius: var(--radius-lg); box-shadow: var(--shadow-card); padding: var(--ui-card-pad); min-width: 0; }
.ui-panel--flush { padding: 0; overflow: hidden; }
.ui-panel--flush > .ui-panel-foot { padding: var(--space-3) var(--ui-card-pad); }
/* Kepala panel tabel (judul + sub seperti .ui-chart-head) di atas tabel rata tepi */
.ui-panel-head { display: grid; gap: 2px; padding: var(--ui-card-pad) var(--ui-card-pad) var(--space-2); }
.ui-panel:not(.ui-panel--flush) > .ui-panel-head { padding: 0 0 var(--space-3); }
/* Kepala panel dengan tombol aksi di kanan (mis. "Terbitkan semua" per batch draf sertifikat) */
.ui-panel-head--split { display: flex; justify-content: space-between; align-items: center; gap: var(--space-3); flex-wrap: wrap; }
.ui-panel-foot { font-size: var(--text-xs); color: var(--text-muted); border-top: 1px solid var(--border-light); line-height: 1.5; }
.ui-panel-foot + .ui-panel-foot { border-top: 0; padding-top: 0; }

/* ── Grid ── */
.ui-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: var(--ui-block-gap); }
.ui-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.ui-grid--charts { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.ui-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
/* Lima KPI: satu baris di layar lebar (>= 1280px), dua kolom di ponsel (tile ganjil terakhir selebar baris) */
.ui-grid--kpi5 { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
.ui-grid + .ui-grid, .ui-grid + .ui-panel, .ui-panel + .ui-grid, .ui-grid + .ui-chart, .ui-panel + .ui-panel, .ui-chart + .ui-panel, .ui-panel + .ui-chart { margin-top: var(--ui-block-gap); }
/* Di dalam grid halaman (kolom berdampingan) jarak datang dari gap, bukan margin: tanpa ini kartu kolom kedua turun 16px */
:is(.ui-grid, .ui-split, .ui-stack, [class*="-grid-"], [class*="-split"], [class*="-charts"], [class*="-wide"]) > :is(.ui-grid, .ui-panel, .ui-chart) { margin-top: 0; }

/* ── KPI tile ── */
.ui-kpi { background: var(--bg-card); border: 1px solid var(--border-color); border-radius: var(--radius-lg); box-shadow: var(--shadow-card);
          padding: var(--space-4) var(--ui-card-pad); display: flex; flex-direction: column; gap: var(--space-1); min-height: 112px; min-width: 0; }
.ui-kpi-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; gap: var(--space-1) var(--space-2); }
.ui-kpi-head > .ui-kpi-label { flex: 1 1 120px; }
.ui-kpi-label { font-size: var(--text-xs); font-weight: 500; color: var(--text-muted); line-height: 1.35;
                display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ui-kpi-value { font-family: var(--font-heading); font-size: var(--text-2xl); font-weight: 600; line-height: 1.2; color: var(--text-primary);
                font-variant-numeric: tabular-nums; letter-spacing: -0.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ui-kpi-value--text { font-family: var(--font-body); font-size: var(--text-sm); font-weight: 500; line-height: 1.45; white-space: normal; letter-spacing: 0; color: var(--text-secondary); }
.ui-kpi-unit { font-family: var(--font-body); font-size: var(--text-xs); font-weight: 500; color: var(--text-muted); letter-spacing: 0; }
.ui-kpi-sub { font-size: var(--text-xs); color: var(--text-muted); line-height: 1.45;
              display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.ui-kpi-body { margin-top: var(--space-1); }
.ui-kpi-action { margin-top: auto; padding-top: var(--space-1); font-size: var(--text-xs); }
.ui-kpi-action a { font-weight: 500; }
.ui-kpi--compact { min-height: 88px; }
.ui-kpi--compact .ui-kpi-value { font-size: var(--text-xl); }
.ui-kpi--compact .ui-kpi-value--text { font-size: var(--text-sm); }
.ui-kpi--gauge .ui-kpi-row { display: flex; align-items: center; gap: var(--space-3); }
.ui-kpi--gauge .ui-chart-body--gauge { width: 72px; height: 72px; flex: none; }

/* ── Status pill: hanya untuk masalah ── */
.ui-status { display: inline-flex; align-items: center; flex: none; white-space: nowrap; padding: 1px 8px; border-radius: var(--radius-full);
             font-size: 0.6875rem; font-weight: 600; line-height: 1.6; background: var(--bg-secondary); color: var(--text-secondary); }
.ui-status--danger  { background: var(--danger-tint);  color: var(--danger-ink); }
.ui-status--warning { background: var(--warning-tint); color: var(--warning-ink); }
.ui-status--success { background: var(--success-tint); color: var(--success-ink); }
.ui-status--neutral { background: var(--bg-secondary); color: var(--text-secondary); }
.ui-status--info    { background: var(--info-tint);    color: var(--info-ink); }

/* ── Grade pill A..E (warna = GRADE_THRESHOLDS chip_bg/chip_fg di app/scoring.php), helper uiGrade() ── */
.ui-grade { display: inline-flex; align-items: center; justify-content: center; min-width: 20px; padding: 0 6px; border-radius: var(--radius-full);
            font-size: 0.6875rem; font-weight: 700; line-height: 1.6; vertical-align: 1px; background: var(--bg-secondary); color: var(--text-secondary); }
.ui-grade--A { background: var(--warning-tint); color: var(--warning-ink); }
.ui-grade--B { background: var(--info-base); color: var(--text-on-primary); }
.ui-grade--C { background: var(--success-strong); color: var(--text-on-primary); }
.ui-grade--D { background: var(--warning-strong); color: var(--text-on-primary); }
.ui-grade--E { background: var(--danger-strong); color: var(--text-on-primary); }

/* ── Teks masalah di tabel/teks ── */
.ui-bad  { color: var(--danger-strong); font-weight: 600; }
.ui-warn { color: var(--warning-strong); font-weight: 600; }
.ui-dim  { color: var(--text-muted); }
.ui-note { font-size: var(--text-xs); color: var(--text-muted); margin-top: var(--space-2); line-height: 1.5; }
.ui-note--warn { color: var(--warning-ink); }

/* ── Tabel ringkas ── */
.ui-table { width: 100%; border-collapse: collapse; font-size: 0.8125rem; color: var(--text-primary); }
.ui-table th, .ui-table td { text-align: left; padding: 9px 12px; border-bottom: 1px solid var(--border-light); white-space: nowrap; vertical-align: middle; }
.ui-table thead th { font-size: var(--text-xs); font-weight: 500; color: var(--text-muted); background: var(--bg-card); border-bottom: 1px solid var(--border-color); line-height: 1.35; vertical-align: bottom; }
.ui-table thead tr.ui-th-group th { padding-bottom: 2px; border-bottom: 0; color: var(--text-secondary); font-weight: 600; }
.ui-table thead tr.ui-th-group th.ui-th-span { text-align: center; border-bottom: 1px solid var(--border-color); }
.ui-table .num { text-align: right; font-variant-numeric: tabular-nums; }
.ui-table tbody tr:hover td { background: var(--bg-secondary); }
.ui-table tbody tr:last-child td { border-bottom: 0; }
.ui-table .ui-row-total td { font-weight: 600; border-top: 1px solid var(--border-color); background: var(--bg-card); }
.ui-table .ui-row-group td { font-size: var(--text-xs); font-weight: 600; color: var(--text-secondary); background: var(--bg-secondary); padding-top: 6px; padding-bottom: 6px; }
.ui-table .ui-cell-wrap { white-space: normal; min-width: 160px; max-width: 280px; }
.ui-table .ui-cell-sub { display: block; font-size: var(--text-xs); color: var(--text-muted); font-weight: 400; white-space: normal; }
/* Baris kedua di bawah label baris daftar (mis. checklist WFH); .ui-warn = pengingat */
.ui-row-sub { display: block; font-size: var(--text-xs); color: var(--text-muted); font-weight: 400; }
.ui-row-sub.ui-warn { color: var(--warning-strong); font-weight: 500; }
.ui-table .ui-col-sep { border-left: 1px solid var(--border-light); }
.ui-table a { font-weight: 500; }
/* Angka yang bisa diklik (drill-down) tetap warna teks biasa; garis bawah menandai tautan */
.ui-table td.num a:not(.btn) { color: inherit; font-weight: 400; text-decoration: underline; text-decoration-color: var(--border-color); text-underline-offset: 3px; }
.ui-table td.num a:not(.btn):hover { text-decoration-color: currentColor; }
.ui-table .ui-row-total td.num a:not(.btn) { font-weight: 600; }
/* Badge tier netral (Silver, tanpa tier) di tabel: cincin tipis agar tidak tenggelam di baris hover */
.ui-table .badge-silver, .ui-table .badge:not([class*="badge-"]) { box-shadow: inset 0 0 0 1px var(--border-color); }
.ui-table-scroll { overflow: auto; -webkit-overflow-scrolling: touch; max-width: 100%; }
.ui-table-scroll--tall { max-height: 70vh; }
.ui-table-scroll--tall thead th { position: sticky; top: 0; z-index: 1; }

/* Batang tipis (skor) di sel tabel */
.ui-meter { display: block; width: 64px; height: 4px; margin: 4px 0 0 auto; border-radius: 2px; background: var(--border-color); overflow: hidden; }
.ui-meter > i { display: block; height: 100%; border-radius: 2px; background: var(--text-muted); }
.ui-meter--green > i { background: var(--success-base); }
.ui-meter--yellow > i { background: var(--warning-base); }
.ui-meter--red > i { background: var(--danger-base); }
.ui-w-0 > i { width: 0; } .ui-w-10 > i { width: 10%; } .ui-w-20 > i { width: 20%; } .ui-w-30 > i { width: 30%; } .ui-w-40 > i { width: 40%; }
.ui-w-50 > i { width: 50%; } .ui-w-60 > i { width: 60%; } .ui-w-70 > i { width: 70%; } .ui-w-80 > i { width: 80%; } .ui-w-90 > i { width: 90%; } .ui-w-100 > i { width: 100%; }

/* ── Kartu grafik ── */
.ui-chart { background: var(--bg-card); border: 1px solid var(--border-color); border-radius: var(--radius-lg); box-shadow: var(--shadow-card);
            padding: var(--ui-card-pad); margin: 0; min-width: 0; display: flex; flex-direction: column; gap: var(--space-4); }
.ui-chart-head { display: grid; gap: 2px; }
.ui-chart-title { font-family: var(--font-heading); font-size: var(--text-sm); font-weight: 600; color: var(--text-primary); line-height: 1.35; }
.ui-chart-sub { font-size: var(--text-xs); color: var(--text-muted); line-height: 1.45; }
.ui-chart-body { position: relative; width: 100%; min-width: 0; }
.ui-chart-body--180 { height: 180px; }
.ui-chart-body--220 { height: 220px; }
.ui-chart-body--280 { height: 280px; }
.ui-chart-body canvas { display: block; max-width: 100%; }
.ui-chart-foot { font-size: var(--text-xs); color: var(--text-muted); line-height: 1.45; margin-top: auto; }
.ui-chart-empty { display: flex; align-items: center; justify-content: center; text-align: center; padding: var(--space-4);
                  font-size: var(--text-sm); color: var(--text-muted); background: var(--bg-secondary); border-radius: var(--radius-md); }
.ui-spark { position: relative; height: 36px; width: 100%; max-width: 180px; }

/* ── Dokumen bacaan (Panduan): daftar isi lengket + kolom baca. Isi markdown (.nw-content, .nw-toc-link,
   .nw-search) di-style public/css/nusa-way.css; ini hanya kerangka di dalam halaman aplikasi.
   Teks bacaan dibatasi 72ch (pengecualian lebar di design-system bagian 2); tabel memakai lebar kolom penuh.
   --ui-doc-offset = ruang di bawah topbar lengket untuk daftar isi dan target anchor. ── */
.ui-doc { --ui-doc-offset: 4.5rem; display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: var(--ui-section-gap); align-items: start; }
.ui-doc-toc { position: sticky; top: var(--ui-doc-offset); max-height: calc(100vh - var(--ui-doc-offset) - var(--space-4)); display: flex; flex-direction: column; min-width: 0; }
.ui-doc-toc-title { font-size: var(--text-xs); font-weight: 600; color: var(--text-secondary); margin-bottom: var(--space-2); }
.ui-doc-toc [hidden] { display: none !important; }
.ui-doc-toc-empty { padding: var(--space-2) var(--space-3); }
.ui-doc-body { min-width: 0; }
.ui-doc-body > :is(p, ul, ol, blockquote, h2, h3, h4, h5, h6) { max-width: 72ch; }
.ui-doc-body > :first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.ui-doc-body [id] { scroll-margin-top: var(--ui-doc-offset); }
.ui-doc-top { font-size: var(--text-xs); margin-top: var(--ui-section-gap); }
.ui-doc-card { display: grid; gap: var(--space-2); align-content: start; color: inherit; text-decoration: none; transition: border-color 0.15s; }
.ui-doc-card:hover { border-color: var(--primary); }
.ui-doc-card-head { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
@media (max-width: 1023.98px) {
    .ui-doc { grid-template-columns: minmax(0, 1fr); }
    .ui-doc-toc { position: static; max-height: none; }
    .ui-doc-toc .nw-toc { max-height: 240px; }
}
@media print {
    .ui-doc { display: block; }
    .ui-doc-toc, .ui-doc-top, .ui-page-actions { display: none !important; }
    .ui-doc-body > * { max-width: none; }
    .ui-doc-body .nw-table-wrap { overflow: visible; }
    .ui-doc-body :is(h2, h3, h4) { break-after: avoid; }
    .ui-doc-body tr, .ui-doc-body li { break-inside: avoid; }
}

/* ── Rapor Prestasi (views/rapor.php, design-system §9c): kepala rapor + kotak nilai akhir + chip bulan + daftar ringkas ── */
.rapor-id { display: flex; align-items: center; gap: var(--space-4); min-width: 0; flex: 1 1 360px; }
.rapor-avatar { width: 96px; height: 96px; flex: none; border-radius: var(--radius-lg); object-fit: cover; background: var(--bg-secondary); }
.rapor-avatar--initials { display: inline-flex; align-items: center; justify-content: center; font-family: var(--font-heading);
                          font-size: var(--text-2xl); font-weight: 600; color: var(--text-secondary); }
.rapor-name { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-2); }
.rapor-bio { margin: 0; font-size: var(--text-sm); color: var(--text-secondary); line-height: 1.5; max-width: 72ch; }
.rapor-summary { display: grid; grid-template-columns: minmax(180px, auto) minmax(0, 1fr); gap: var(--ui-block-gap) var(--ui-section-gap); align-items: center; }
.rapor-score { display: grid; gap: var(--space-1); }
.rapor-score-row { display: flex; align-items: baseline; gap: var(--space-2); }
.rapor-score-row .ui-grade { font-size: var(--text-xl); min-width: 40px; padding: 2px 10px; vertical-align: 0; align-self: center; }
.rapor-score-value { font-family: var(--font-heading); font-size: var(--text-3xl); font-weight: 600; line-height: 1.1; color: var(--text-primary); font-variant-numeric: tabular-nums; }
.rapor-trend { display: grid; gap: var(--space-2); min-width: 0; }
.rapor-chips { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.rapor-chip { display: inline-flex; align-items: center; gap: var(--space-1); padding: 2px 4px 2px 8px; border: 1px solid var(--border-light);
              border-radius: var(--radius-full); font-size: var(--text-xs); color: var(--text-muted); }
.rapor-chip--in { border-color: var(--text-secondary); color: var(--text-primary); font-weight: 600; }
.rapor-list { list-style: none; margin: 0; padding: 0; }
.rapor-list > li { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--space-3); padding: var(--space-3) var(--ui-card-pad);
                   border-top: 1px solid var(--border-light); font-size: var(--text-sm); }
.rapor-list > li:first-child { border-top: 0; }
.rapor-list > li > :last-child.ui-muted { flex: none; }
.rapor-reason { white-space: pre-line; margin-top: var(--space-1); color: var(--text-secondary); font-size: var(--text-sm); }
.rapor-foot { margin: var(--ui-section-gap) 0 0; }
/* Tabel KPI selebar section: kolom KPI membungkus, catatan sumber satu baris (teks lengkap di title) */
.rapor-kpi-table .rapor-kpi-name { white-space: normal; min-width: 200px; }
.ui-table .rapor-clamp-1 { display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; }
/* Tile Prestasi seimbang: kolom dipilih dari jumlah tile (raporTileCols): c5 lima kolom hanya >= 1280px */
.rapor-tiles--c1 { grid-template-columns: minmax(0, 1fr); }
.rapor-tiles--c2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.rapor-tiles--c3, .rapor-tiles--c5 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.rapor-tiles--c4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
/* Chip badge per jenis di atas tabel sertifikat; teks keadaan kosong di panel rata tepi */
.rapor-badges { display: flex; flex-wrap: wrap; gap: var(--space-2); padding: var(--ui-card-pad); border-bottom: 1px solid var(--border-light); }
.rapor-badges:last-child { border-bottom: 0; }
.rapor-empty { margin: 0; padding: var(--ui-card-pad); }
.ui-panel-head + .rapor-empty { padding-top: var(--space-2); }
@media (max-width: 767.98px) {
    .rapor-avatar { width: 64px; height: 64px; }
    .rapor-avatar--initials { font-size: var(--text-xl); }
    .rapor-summary { grid-template-columns: minmax(0, 1fr); }
}
/* Cetak A4 potret (Cetak / PDF = window.print()): chrome aplikasi disembunyikan dan @page diatur dashboard.css; di sini aksi, dialog, dan tata letak padat. */
@media print {
    .rapor .ui-page-actions, .rapor .rapor-cert-actions, #bio-modal { display: none !important; }
    .rapor { font-size: 11px; }
    .rapor .ui-page-head { margin-bottom: var(--space-4); }
    .rapor .ui-section { margin-top: var(--space-5); break-inside: auto; }
    .rapor .ui-section-head { break-after: avoid; margin-bottom: var(--space-2); }
    .rapor .ui-split { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
    .rapor .ui-grid { grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); }
    .rapor .rapor-tiles > :last-child:nth-child(odd) { grid-column: auto; }
    .rapor .rapor-badges { padding: var(--space-2) var(--space-3); }
    .rapor .rapor-empty { padding: var(--space-2) var(--space-3); }
    .rapor :is(.ui-panel, .ui-kpi, .ui-chart) { box-shadow: none; break-inside: avoid; padding: var(--space-3); }
    .rapor .ui-panel--flush { padding: 0; }
    .rapor .ui-kpi { min-height: 0; }
    .rapor .ui-table th, .rapor .ui-table td { padding: 4px 8px; }
    .rapor .ui-table-scroll { overflow: visible; }
    .rapor .ui-chart-body--220 { height: 160px; }
    .rapor .ui-chart-body canvas { width: 100% !important; height: 100% !important; }
    .rapor .rapor-avatar { width: 72px; height: 72px; }
    .rapor-list > li { padding: var(--space-2) var(--space-3); }
    .rapor tr, .rapor li { break-inside: avoid; }
}

/* ── Ponsel ── */
@media (min-width: 1280px) {
    .ui-grid--kpi5, .rapor-tiles--c5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}
@media (max-width: 1023.98px) {
    .ui-grid--4, .rapor-tiles--c4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 767.98px) {
    .ui-page-head { align-items: flex-start; }
    .ui-page-actions, .ui-page-actions .ui-field-inline { width: 100%; }
    .ui-page-actions select { flex: 1; max-width: none; }
    .ui-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .ui-grid--charts, .ui-grid--2, .ui-split { grid-template-columns: minmax(0, 1fr); }
    .ui-grid--kpi5 > :last-child:nth-child(odd), .rapor-tiles > :last-child:nth-child(odd) { grid-column: 1 / -1; }
    .ui-kpi { padding: var(--ui-card-pad); min-height: 0; }
    .ui-kpi-value { font-size: var(--text-xl); }
    .ui-chart { padding: var(--ui-card-pad); }
    .ui-table th, .ui-table td { padding: 8px 10px; }
}
@media (max-width: 480px) {
    .ui-grid:not(.ui-grid--4):not(.ui-grid--kpi5):not(.rapor-tiles) { grid-template-columns: minmax(0, 1fr); }
}
@media (prefers-reduced-motion: reduce) {
    .ui-kpi, .ui-chart { transition: none; }
}

/* ── Dialog formulir (App.modal): .modal-backdrop > .modal.modal--md > .modal-header h2.modal-title ── */
.modal.modal--md { max-width: 640px; }
.modal-title { margin: 0; font-size: var(--text-lg); font-family: var(--font-heading); font-weight: 600; }

/* ── Halaman verifikasi publik (design-system §9d): views/verify-certificate.php + views/verify-rapor.php.
   Dokumen mandiri: <body class="ui-verify-page"> > main.ui-verify (kartu ±720px) > kop logo + aksen merah,
   pita status (--valid / --invalid) dengan ikon, nama sebagai judul besar, grid rincian dl, kaki perusahaan.
   Dwibahasa: teks Indonesia dulu, Inggris lebih kecil di .ui-verify-en. ── */
.ui-verify-page { background: var(--bg-page); min-height: 100vh; display: flex; justify-content: center; align-items: flex-start;
                  padding: var(--space-12) var(--space-4); color: var(--text-secondary); line-height: 1.6; }
.ui-verify { width: 100%; max-width: 720px; background: var(--bg-card); border: 1px solid var(--border-color); border-top: 4px solid var(--primary);
             border-radius: var(--radius-lg); box-shadow: var(--shadow-md); overflow: hidden; }
.ui-verify-en { display: block; font-size: var(--text-xs); font-weight: 400; color: var(--text-muted); line-height: 1.45; margin-top: 2px; letter-spacing: 0; text-transform: none; }
.ui-verify-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); flex-wrap: wrap;
                  padding: var(--space-6) var(--space-10); border-bottom: 1px solid var(--border-light); }
.ui-verify-logo { display: block; height: 44px; width: auto; }
.ui-verify-kicker { font-size: var(--text-sm); font-weight: 600; color: var(--text-primary); text-align: right; }
.ui-verify-status { display: flex; align-items: flex-start; gap: var(--space-4); padding: var(--space-6) var(--space-10); }
.ui-verify-status--valid { background: var(--success-tint); color: var(--success-ink); }
.ui-verify-status--invalid { background: var(--danger-tint); color: var(--danger-ink); }
.ui-verify-status-icon { flex: 0 0 auto; width: 48px; height: 48px; border-radius: var(--radius-full); display: flex; align-items: center; justify-content: center; color: var(--text-on-primary); }
.ui-verify-status--valid .ui-verify-status-icon { background: var(--success-strong); }
.ui-verify-status--invalid .ui-verify-status-icon { background: var(--danger-strong); }
.ui-verify-status-text { min-width: 0; }
.ui-verify-status-title { font-family: var(--font-heading); font-size: var(--text-2xl); font-weight: 700; line-height: 1.25; color: inherit; margin: 0; }
.ui-verify-status-title + .ui-verify-en { font-size: var(--text-sm); color: inherit; opacity: 0.85; }
.ui-verify-status-text p { font-size: 0.9375rem; color: inherit; margin: var(--space-2) 0 0; line-height: 1.55; }
.ui-verify-status .ui-verify-en { color: inherit; opacity: 0.8; }
.ui-verify-body { padding: var(--space-8) var(--space-10) var(--space-10); }
.ui-verify-eyebrow { font-size: var(--text-xs); font-weight: 600; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.06em; margin: 0; }
.ui-verify-eyebrow .ui-verify-en { display: inline; margin: 0 0 0 var(--space-1); }
.ui-verify-name { font-family: var(--font-heading); font-size: var(--text-3xl); font-weight: 700; line-height: 1.2; color: var(--text-primary);
                  margin: var(--space-1) 0 0; letter-spacing: -0.01em; overflow-wrap: anywhere; }
.ui-verify-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-6) var(--space-8); margin: var(--space-8) 0 0;
                  padding-top: var(--space-8); border-top: 1px solid var(--border-light); }
.ui-verify-item { min-width: 0; }
.ui-verify-item--wide { grid-column: 1 / -1; }
.ui-verify-item dt { font-size: var(--text-xs); font-weight: 600; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.06em; }
.ui-verify-item dt .ui-verify-en { display: inline; margin: 0 0 0 var(--space-1); }
.ui-verify-item dd { margin: var(--space-1) 0 0; font-size: 1rem; color: var(--text-primary); line-height: 1.5; overflow-wrap: anywhere; }
.ui-verify-code { font-family: var(--font-mono); font-size: 0.9375rem; letter-spacing: 0.06em; }
.ui-verify-score { display: inline-flex; align-items: center; gap: var(--space-2); font-size: var(--text-xl); font-weight: 700; color: var(--text-primary); font-variant-numeric: tabular-nums; }
.ui-verify-score .ui-grade { font-size: var(--text-base); min-width: 32px; padding: 2px 10px; }
.ui-verify-score-max { font-size: var(--text-sm); font-weight: 500; color: var(--text-muted); }
.ui-verify-type { display: inline-block; font-size: var(--text-xs); font-weight: 600; padding: 2px 10px; border-radius: var(--radius-full); letter-spacing: 0.03em; text-transform: uppercase; }
.ui-verify-type--cert { background: var(--info-tint); color: var(--info-strong); }
.ui-verify-type--appr { background: var(--warning-tint); color: var(--warning-ink); }
.ui-verify-foot { display: flex; justify-content: space-between; align-items: center; gap: var(--space-2) var(--space-4); flex-wrap: wrap;
                  padding: var(--space-5) var(--space-10); background: var(--gray-50); border-top: 1px solid var(--border-light);
                  font-size: var(--text-sm); color: var(--text-muted); }
.ui-verify-foot a { color: var(--text-secondary); font-weight: 500; }
.ui-verify-foot a:hover { color: var(--primary); }
@media (max-width: 767.98px) {
    .ui-verify-page { padding: var(--space-4); }
    .ui-verify-head, .ui-verify-status, .ui-verify-foot { padding-left: var(--space-5); padding-right: var(--space-5); }
    .ui-verify-body { padding: var(--space-6) var(--space-5) var(--space-8); }
    .ui-verify-logo { height: 36px; }
    .ui-verify-kicker { text-align: left; }
    .ui-verify-status-icon { width: 40px; height: 40px; }
    .ui-verify-status-title { font-size: var(--text-xl); }
    .ui-verify-name { font-size: var(--text-2xl); }
    .ui-verify-grid { grid-template-columns: minmax(0, 1fr); gap: var(--space-5); margin-top: var(--space-6); padding-top: var(--space-6); }
}

/* ── Tumpukan avatar kecil + keterangan (design-system "Sapa di kartu Feed"): penyapa di kaki kartu sambutan/onboarding.
   .ui-avatar-row > .avatar-stack > .avatar.avatar-xs (maks. 5) + .avatar-more "+N", lalu teks .ui-muted. ── */
.ui-avatar-row { display: flex; align-items: center; gap: var(--space-2); min-width: 0; }
.ui-avatar-row[hidden] { display: none; }
.avatar-stack { display: inline-flex; align-items: center; }
.avatar-xs { width: 24px; height: 24px; font-size: var(--text-xs); border: 2px solid var(--bg-card); }
.avatar-stack .avatar-xs + .avatar-xs { margin-left: calc(-1 * var(--space-2)); }
.avatar-more { background: var(--bg-secondary); color: var(--text-secondary); font-variant-numeric: tabular-nums; }

/* ── Blok check-in CRM di kartu Feed (design-system "Check-in di kartu Feed"): npCheckinFeedBlock().
   .ui-checkin > a.ui-checkin-photo (thumbnail 96x72, buka foto penuh di tab baru) + .ui-checkin-body (alamat + tautan Peta).
   Semua span: blok ini berada di dalam <p class="feed-text">. ── */
.ui-checkin { display: flex; align-items: flex-start; gap: var(--space-3); margin-top: var(--space-2); min-width: 0; }
.ui-checkin-photo { display: block; flex: none; width: 96px; height: 72px; border-radius: var(--radius-md); overflow: hidden; background: var(--bg-secondary); border: 1px solid var(--border-color); }
.ui-checkin-photo[hidden] { display: none; }
.ui-checkin-photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
.ui-checkin-body { display: flex; flex-direction: column; gap: var(--space-1); min-width: 0; font-size: var(--text-xs); line-height: 1.45; }
.ui-checkin-addr { color: var(--text-muted); overflow-wrap: anywhere; }
.ui-checkin-map { color: var(--primary); font-weight: 500; text-decoration: none; align-self: flex-start; }
.ui-checkin-map:hover { text-decoration: underline; }