/* ===========================================================
   ATURAN SPASI GLOBAL
   Satu angka untuk dua hal:
     1. jarak antar card
     2. jarak card ke tepi layar
   Ubah --space-app di sini, seluruh aplikasi ikut.
   Gaya komponen (radius, tombol, tab, input, badge): assets/design.css.

   Dimuat SETELAH style.css dan setelah <style> milik tiap halaman,
   jadi nilainya menang tanpa perlu menyunting 18 halaman satu per satu.
   =========================================================== */

:root {
  --space-app: 10px;
}

/* ---- 1. Batas pinggir layar ---- */

.app-content {
  padding: var(--space-app) !important;
}

/* Bottom-nav mobile menutupi bagian bawah konten, jadi sisakan ruang. */
@media (max-width: 768px) {
  html.in-frame .app-content {
    padding: var(--space-app) var(--space-app) calc(var(--space-app) + 72px) !important;
  }
}

/* Halaman lama membungkus kontennya lagi dengan .page/.admin-page yang
   punya padding sendiri — kalau dibiarkan, tepi jadi dobel. */
.app-content > .page,
.app-content > .admin-page,
.app-content > .page--full,
.app-content > .page--split {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* ---- 2. Jarak antar card ---- */

/* Menyasar container yang namanya mengandung "grid" atau "cards" — pola yang
   dipakai konsisten di seluruh halaman untuk menata card
   (insight-grid, pr-kpi-cards, stat-grid-3, tf-cards, dst). */
/* @kelas:grid awalan=".app-content " */
.app-content .aa-breakdown-grid,
.app-content .aa-info-grid,
.app-content .activity-grid,
.app-content .card-grid,
.app-content .card-grid--4,
.app-content .detail-awardee-grid,
.app-content .forms-grid,
.app-content .gp-form-grid,
.app-content .gp-hero-grid,
.app-content .gp-insight-activity-grid,
.app-content .gp-insight-iter-grid,
.app-content .gp-smtp-grid,
.app-content .hf-grid,
.app-content .info-grid,
.app-content .inline-detail-grid,
.app-content .insight-grid,
.app-content .kpi-strip-grid,
.app-content .lp-grid2,
.app-content .mon-grid,
.app-content .month-grid,
.app-content .org-dist-grid,
.app-content .periode-cards,
.app-content .pi-grid,
.app-content .pr-kpi-cards,
.app-content .prefill-grid,
.app-content .prestasi-grid,
.app-content .profile-grid,
.app-content .qcomp-grid,
.app-content .qtr-cards,
.app-content .qtr-detail-grid,
.app-content .ra-grid,
.app-content .stat-grid-3,
.app-content .tf-cards,
.app-content .tp-grid
/* @akhir */ {
  gap: var(--space-app) !important;
}

/* Container card yang namanya tidak mengandung "grid"/"cards".
   Daftar ini bukan tebakan — hasil `node scripts/spacing-audit.js` yang
   mengukur gap yang benar-benar dirender di setiap halaman. */
/* @kelas:stats awalan=".app-content " */
.app-content .aa-detail-kpi,
.app-content .aa-detail-kpis,
.app-content .adm-loader-skeletons,
.app-content .asesmen-kpi,
.app-content .asesmen-kpi-card,
.app-content .browse-stats,
.app-content .card--kpi,
.app-content .detail-kpi,
.app-content .detail-kpi-row,
.app-content .detail-kpis,
.app-content .ds-mini-stats,
.app-content .galeri-hero-stats,
.app-content .gp-celebrate-stats,
.app-content .gp-hero-stats,
.app-content .gp-insight-hero-stats,
.app-content .gp-kpi,
.app-content .gp-kpi-arrow,
.app-content .gp-kpi-caption,
.app-content .gp-kpi-content,
.app-content .gp-kpi-row,
.app-content .gp-loader-skeletons,
.app-content .hkpi-card,
.app-content .kpi--,
.app-content .kpi-blue,
.app-content .kpi-body,
.app-content .kpi-card,
.app-content .kpi-chip,
.app-content .kpi-chip-label,
.app-content .kpi-empty,
.app-content .kpi-green,
.app-content .kpi-inline-close,
.app-content .kpi-inline-content,
.app-content .kpi-inline-head,
.app-content .kpi-inline-panel,
.app-content .kpi-inline-title,
.app-content .kpi-label,
.app-content .kpi-list,
.app-content .kpi-list-badge,
.app-content .kpi-list-meta,
.app-content .kpi-list-name,
.app-content .kpi-modal,
.app-content .kpi-modal-bg,
.app-content .kpi-orange,
.app-content .kpi-purple,
.app-content .kpi-row,
.app-content .kpi-strip-grid,
.app-content .kpi-teal,
.app-content .kpi-yellow,
.app-content .lb-hero-stats,
.app-content .lb-stats,
.app-content .lc-hero-stats,
.app-content .lc-stats,
.app-content .lp-stats,
.app-content .mobile-kpi-strip,
.app-content .org-kpi-2col,
.app-content .org-kpi-hero,
.app-content .org-kpi-hero-card,
.app-content .org-kpi-section,
.app-content .org-kpi-section-title,
.app-content .pr-kpi-bar-fill,
.app-content .pr-kpi-bar-row,
.app-content .pr-kpi-bar-track,
.app-content .pr-kpi-card,
.app-content .pr-kpi-cards,
.app-content .pr-kpi-list,
.app-content .pr-kpi-list-avatar,
.app-content .pr-kpi-section,
.app-content .pr-kpi-split,
.app-content .pr-kpi-split-box,
.app-content .pr-kpi-split-pct,
.app-content .pr-stats,
.app-content .prestasi-stats,
.app-content .rp-loader-skeletons,
.app-content .rp-stats,
.app-content .stat-row,
.app-content .tf-card-foot-stats,
.app-content #lbStats,
.app-content #prStats,
.app-content #lpStats,
.app-content #lpTextStats,
.app-content #rpStats,
.app-content #gpInlineKpiDetail,
.app-content #gpKpiDetailBreadcrumb,
.app-content #gpInlineKpiDetailHead,
.app-content #gpKpiDetailTitle,
.app-content #gpKpiDetailSub,
.app-content #gpKpiDetailBody,
.app-content #gpLectureKpi,
.app-content #gpAdminKpi,
.app-content #galeriHeroStats,
.app-content #homeKpiPanel,
.app-content #homeKpiBreadcrumb,
.app-content #homeKpiPanelHead,
.app-content #homeKpiPanelBody,
.app-content #homeKpiGrid,
.app-content #homeAsesmenKpi,
.app-content #kpiPeserta,
.app-content #kpiAktivitas,
.app-content #kpiRate,
.app-content #kpiCampus,
.app-content #kpiBelumAbsen,
.app-content #kpiKelompok,
.app-content #hkpiSubPanel,
.app-content #hkpiSubTitle,
.app-content #hkpiSubBody,
.app-content #hkpiRingsGrid,
.app-content #lcStats,
.app-content #kpi-dashboard,
.app-content #kpi-inline-dashboard,
.app-content #kpi-awardee,
.app-content #kpi-inline-awardee,
.app-content #kpi-rekap,
.app-content #kpi-inline-rekap,
.app-content #kpi-prestasi,
.app-content #kpi-inline-prestasi,
.app-content #kpi-organisasi,
.app-content #kpi-inline-organisasi,
.app-content #kpi-leaderboard,
.app-content #kpi-inline-leaderboard,
.app-content #kpiDetailModalBg,
.app-content #kpiDetailBody,
.app-content #attendMiniStats,
.app-content #kpiStrip,
.app-content #kpiPre,
.app-content #kpiPost,
.app-content #kpiAssessment,
.app-content #kpiMentoring,
.app-content #kpiPembinaan,
.app-content #kpiAlQuran
/* @akhir */,
.app-content .rekap-top-bar,
.app-content .lc-hero-content,
.app-content .page--split {
  gap: var(--space-app) !important;
}

/* Irama vertikal antar blok teratas: satu angka, bukan campuran
   14px / 20px / 22px seperti sebelumnya. Hanya menyentuh anak langsung
   .app-content, jadi jarak di dalam card tidak ikut berubah. */
.app-content > * {
  margin-top: 0 !important;
  margin-bottom: var(--space-app) !important;
}

.app-content > *:last-child {
  margin-bottom: 0 !important;
}

/* Banyak halaman membungkus seluruh isinya dalam satu <div> (mis. #gpAdmin,
   #lbMainPage). Blok utamanya jadi cucu, bukan anak langsung, sehingga irama
   di atas tidak menyentuhnya. Pola "elemen tepat setelah hero" dikenali di sini (jangan pakai :last-child —
   halaman biasanya punya modal tersembunyi sebagai sibling terakhir). */
.app-content > .page-hero + * > * {
  margin-top: 0 !important;
  margin-bottom: var(--space-app) !important;
}

.app-content > .page-hero + * > *:last-child {
  margin-bottom: 0 !important;
}

/* ---- 3. Kelengkungan & gaya komponen → assets/design.css ---- */

/* ---- 4. Pembungkus & tumpukan blok di dalam halaman ----

   Daftar ini hasil `node scripts/layout-audit.js` — skrip yang mengukur
   posisi setiap card yang benar-benar tampil (dengan data asli), bukan
   membaca CSS. Setiap baris di bawah adalah container yang terbukti
   membuat card meleset dari --space-app.

   a) Pembungkus halaman yang membawa padding sendiri (16–20px) sehingga
      card berada 26–30px dari tepi, bukan --space-app. */
.app-content :is(#lbMainPage, #prMainPage, #orgMainContent, #rpPage, .st-page, .lc-page) {
  padding: 0 !important;
}

/* b) Tumpukan vertikal: blok-bloknya diberi jarak lewat margin campuran
      (12/14/16/18/20/22/24/28px). Dijadikan kolom flex dengan gap tunggal;
      margin anak dinolkan supaya tidak menumpuk dengan gap. Anak yang
      display:none tidak ikut dihitung gap, jadi tab tersembunyi aman. */
.app-content :is(
  #homeMainContent, #homeKpiPanel, .lb-wrap,
  #gpAdmin, #gpLecture, #gpAwardee,
  #lcMain, .lc-tab-panel,
  #adminContent, #awardeeContent, #raSection,
  #lbMainPage, .lb-tab-panel,
  #prMainPage, #orgMainContent, .pr-tab-panel,
  #rpPage, #rpMainView, .rp-tab-panel,
  #lpMain, .lp-panel,
  #settingsContent, #settingsContent > .st-section, #sectionScoring
):not([style*="display: none"], [style*="display:none"]) {
  /* :not(...) — elemen yang disembunyikan halaman lewat style inline harus
     tetap tersembunyi; !important di sini akan mengalahkannya. */
  display: flex !important;
  flex-direction: column !important;
  gap: var(--space-app) !important;
}
.app-content :is(
  #homeMainContent, #homeKpiPanel, .lb-wrap,
  #gpAdmin, #gpLecture, #gpAwardee,
  #lcMain, .lc-tab-panel,
  #adminContent, #awardeeContent, #raSection,
  #lbMainPage, .lb-tab-panel,
  #prMainPage, #orgMainContent, .pr-tab-panel,
  #rpPage, #rpMainView, .rp-tab-panel,
  #lpMain, .lp-panel,
  #settingsContent, #settingsContent > .st-section, #sectionScoring
) > * {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

/* Panel tab yang disembunyikan lewat kelas (bukan display:none inline)
   tetap tersembunyi — flex di atas tidak boleh memunculkannya. */
.app-content :is(.lb-tab-panel, .pr-tab-panel, .rp-tab-panel, .lc-tab-panel, .lp-panel):not(.active) {
  display: none !important;
}

/* Pembungkus hero di dalam halaman yang membawa margin pada anaknya. */
.app-content :is(#gpAdminHero, #lcHeroWrap) > * {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

/* Item grid tidak boleh membawa margin sendiri — jarak antar card sudah
   diatur oleh gap container-nya. */
/* @kelas:grid awalan=".app-content " akhiran=" > *" */
.app-content .aa-breakdown-grid > *,
.app-content .aa-info-grid > *,
.app-content .activity-grid > *,
.app-content .card-grid > *,
.app-content .card-grid--4 > *,
.app-content .detail-awardee-grid > *,
.app-content .forms-grid > *,
.app-content .gp-form-grid > *,
.app-content .gp-hero-grid > *,
.app-content .gp-insight-activity-grid > *,
.app-content .gp-insight-iter-grid > *,
.app-content .gp-smtp-grid > *,
.app-content .hf-grid > *,
.app-content .info-grid > *,
.app-content .inline-detail-grid > *,
.app-content .insight-grid > *,
.app-content .kpi-strip-grid > *,
.app-content .lp-grid2 > *,
.app-content .mon-grid > *,
.app-content .month-grid > *,
.app-content .org-dist-grid > *,
.app-content .periode-cards > *,
.app-content .pi-grid > *,
.app-content .pr-kpi-cards > *,
.app-content .prefill-grid > *,
.app-content .prestasi-grid > *,
.app-content .profile-grid > *,
.app-content .qcomp-grid > *,
.app-content .qtr-cards > *,
.app-content .qtr-detail-grid > *,
.app-content .ra-grid > *,
.app-content .stat-grid-3 > *,
.app-content .tf-cards > *,
.app-content .tp-grid > *
/* @akhir */ {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

/* c) Baris card yang namanya tidak mengandung "grid"/"cards". */
.app-content :is(.frame-2col, #bottomGrid, .pi-side-stack) {
  gap: var(--space-app) !important;
}

/* /lapor: kolom kiri tidak berlatar (bukan card), tapi padding-nya
   menggeser card panduan di dalamnya 31px dari tepi. */
.app-content .page--split > .split-left {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* Panel detail inline yang tertutup tidak boleh memakan tempat. Versi
   tertutupnya masih punya garis tepi 1px atas-bawah, dan di dalam tumpukan
   flex ia ikut dihitung sebagai satu blok — jarak jadi 10 + 2 + 10.
   Detailnya sendiri tampil sebagai pop-up (assets/inline-popup.js). */
.app-content :is(.kpi-inline-panel, .inline-detail):not(.show) {
  display: none !important;
}