/*
 * AppLayout — wajah aplikasi internal PB PII setelah login.
 *
 * File ini sengaja terpisah dari styles.css: pengalaman setelah login tidak
 * boleh warisi struktur landing page. Yang dipakai di sini hanya token merek
 * (navy/biru/hijau PII, logo PII), bukan hero, navbar publik, atau footer.
 * kelas `aplikasi` di <body> dipasang appshell.js hanya bila sesi valid.
 */
:root {
  --app-head: 56px;
  --app-bar: 64px;
  --app-side: 236px;
  --app-navy: #0e2b49;
  --app-navy-deep: #0a2340;
  --app-blue: #176da8;
  --app-green: #14763f;
  --app-canvas: #eef2f6;
  --app-line: #dce5ee;
  --app-ink: #17232f;
  --app-muted: #62717f;
  /* Token gerak dipakai bersama seluruh kerangka aplikasi. */
  --app-ease: cubic-bezier(.22, .68, .35, 1);
  --app-laju: 160ms;
  --app-laju-slow: 340ms;
}

/* Dipasang sebelum mode diketahui supaya landing page tidak pernah berkedip
   di depan mata pengguna yang sudah login. Penanda "memuat" digambar lewat
   pseudo-elemen body sehingga tidak perlu ada node tambahan di HTML — saat
   skrip di <head> berjalan, isi <body> belum ada sama sekali. */
html.aplikasi-mencek body {
  min-height: 100dvh;
  background: var(--app-canvas);
}

html.aplikasi-mencek body > * {
  visibility: hidden;
}

html.aplikasi-mencek body::after {
  content: "";
  position: fixed;
  inset: 0;
  background: var(--app-canvas) url("/assets/logo-pii.webp") no-repeat center;
  /* Logo aslinya 5:6; kotak 58x58 memipihkannya jadi gepeng saat halaman dicek. */
  background-size: 58px auto;
  animation: appNadi 1.4s ease-in-out infinite;
}

@keyframes appNadi {
  0%, 100% { opacity: .55; }
  50% { opacity: 1; }
}

/* ---------- kerangka ---------- */

body.aplikasi {
  background: var(--app-canvas);
  min-height: 100dvh;
  padding: calc(var(--app-head) + 10px) 0 calc(var(--app-bar) + 18px);
  color: var(--app-ink);
}

/* Struktur landing page tidak boleh ikut terbawa. */
body.aplikasi .site-header,
body.aplikasi .nav-sheet,
body.aplikasi .footer-auth,
body.aplikasi > footer,
body.aplikasi .scroll-progress {
  display: none !important;
}

.app-header {
  position: fixed;
  z-index: 40;
  top: 0;
  right: 0;
  left: 0;
  display: flex;
  align-items: center;
  gap: 12px;
  height: var(--app-head);
  padding: 0 clamp(12px, 2.6vw, 22px);
  background: linear-gradient(100deg, var(--app-navy) 0%, #123c63 58%, var(--app-blue) 100%);
  color: #fff;
  box-shadow: 0 2px 14px rgba(10, 35, 64, .28);
}

.app-brand {
  display: flex;
  align-items: center;
  gap: 9px;
  min-width: 0;
  color: #fff;
}

.app-brand img {
  width: 30px;
  height: auto;
}

.app-brand b {
  display: block;
  font-size: 14px;
  line-height: 1.15;
  letter-spacing: -.2px;
}

.app-brand small {
  display: block;
  color: #cfe2f2;
  font-size: 10.5px;
  font-weight: 650;
  letter-spacing: .04em;
  white-space: nowrap;
}

.app-header-spasi {
  flex: 1 1 auto;
  min-width: 0;
}

.app-header .top-actions {
  display: flex;
  align-items: center;
  gap: 7px;
}

.app-header .account-slot {
  display: flex;
  align-items: center;
}

/* Lonceng notifikasi lama ditata ulang agar menyatu dengan header aplikasi. */
.app-header .pbpii-notif {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border: 0;
  border-radius: 11px;
  background: rgba(255, 255, 255, .14);
  color: #fff;
  transition: background-color var(--app-laju) var(--app-ease);
}

.app-header .pbpii-notif:hover {
  background: rgba(255, 255, 255, .24);
}

.app-header .pbpii-notif:active {
  background: rgba(255, 255, 255, .32);
}

/* Chip akun warisan (styles.css) dirancang untuk kop putih. Di dalam header
   aplikasi warna itu hilang, jadi dibungkus ulang tanpa mengubah markup
   maupun logika akun.js. */
.app-header .account-slot {
  position: relative;
  gap: 7px;
  height: 38px;
  padding: 0 10px 0 4px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .14);
  min-width: 0;
  transition: background-color var(--app-laju) var(--app-ease);
}

.app-header .account-slot:hover {
  background: rgba(255, 255, 255, .24);
}

.app-header .account-slot:active {
  background: rgba(255, 255, 255, .32);
}

.app-header .account-avatar {
  background: #fff;
  color: var(--app-navy);
}

.app-header .account-name {
  color: #fff;
  max-width: 108px;
}

.app-header .account-slot .account-button {
  border-color: transparent;
  background: none;
  color: #fff;
}

.app-header .account-menu {
  color: var(--app-ink);
}

.app-wrap {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 16px;
  width: min(100% - 24px, 720px);
  margin: 0 auto;
}

/* styles.css menata semua <nav> sebagai bar bawah ponsel lewat
   `nav:not(.footer-auth)` (spesifisitas 0-1-1). Aturan aplikasi jadi memakai
   `body.aplikasi nav.…` agar tidak direbut kop publik yang sudah dimatikan. */
body.aplikasi nav.app-side {
  display: none;
}

@media (min-width: 1000px) {
  body.aplikasi {
    padding-left: var(--app-side);
  }

  body.aplikasi nav.app-side {
    position: fixed;
    z-index: 30;
    top: calc(var(--app-head) + 12px);
    bottom: 12px;
    left: 12px;
    width: calc(var(--app-side) - 24px);
    display: flex;
    flex-direction: column;
    gap: 3px;
    overflow-y: auto;
    padding: 12px 8px;
    border: 1px solid var(--app-line);
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 10px 30px rgba(14, 43, 73, .06);
  }

  body.aplikasi nav.app-bar {
    display: none;
  }
}

/* ---------- navigasi ---------- */

.app-sisi-label {
  padding: 4px 12px 8px;
  color: var(--app-muted);
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.app-taut,
.app-bar a,
.app-bar button {
  display: flex;
  align-items: center;
  gap: 11px;
  min-height: 44px;
  padding: 8px 12px;
  border: 0;
  border-radius: 11px;
  background: none;
  color: #33475c;
  font: inherit;
  font-size: 13.5px;
  font-weight: 700;
  text-align: left;
  cursor: pointer;
  transition: background-color var(--app-laju) var(--app-ease),
    color var(--app-laju) var(--app-ease),
    box-shadow var(--app-laju-slow) var(--app-ease);
}

.app-taut:hover {
  background: #eef4f9;
  color: var(--app-navy);
}

.app-taut:active,
.app-bar a:active,
.app-bar button:active {
  background: #e2edf5;
}

.app-taut.is-active {
  background: linear-gradient(90deg, #e3eef7, #f4f9fd);
  color: var(--app-navy);
  box-shadow: inset 0 0 0 1px #d3e4f1;
}

.app-taut svg,
.app-bar svg {
  width: 21px;
  height: 21px;
  flex: 0 0 21px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.7;
}

.app-taut .app-badge {
  margin-left: auto;
  min-width: 20px;
  padding: 2px 6px;
  border-radius: 999px;
  background: #d94f4f;
  color: #fff;
  font-size: 10.5px;
  font-weight: 800;
  text-align: center;
}

.app-sisi-bawah {
  margin-top: auto;
  padding-top: 12px;
  border-top: 1px solid var(--app-line);
}

body.aplikasi nav.app-bar {
  position: fixed;
  z-index: 40;
  right: 0;
  bottom: 0;
  left: 0;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  gap: 0;
  border-top: 1px solid #dfe7ef;
  padding: 6px 6px calc(6px + env(safe-area-inset-bottom));
  background: rgba(255, 255, 255, .96);
  backdrop-filter: blur(16px);
  box-shadow: 0 -8px 26px rgba(16, 43, 73, .07);
}

.app-bar a,
.app-bar button {
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  min-height: 50px;
  padding: 4px 2px;
  border-radius: 10px;
  color: #6a7c8d;
  font-size: 10px;
  line-height: 1.2;
  text-align: center;
}

.app-bar a.is-active,
.app-bar button.is-active {
  color: var(--app-navy);
  background: #eaf2f8;
}

/* Sel bar bawah dan lembar "Lainnya" berbagi bentuk: ikon di atas label. */
.app-sel {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-height: 50px;
  padding: 6px 3px;
  border: 0;
  border-radius: 11px;
  background: none;
  color: #6a7c8d;
  font: inherit;
  font-size: 10.5px;
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--app-laju) var(--app-ease),
    color var(--app-laju) var(--app-ease),
    box-shadow var(--app-laju-slow) var(--app-ease);
}

.app-sel:hover {
  background: #eef4f9;
  color: var(--app-navy);
}

.app-sel:active {
  background: #e2edf5;
}

.app-sel svg {
  width: 21px;
  height: 21px;
  flex: 0 0 21px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.7;
}

.app-sel span {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.app-sel.is-active {
  color: var(--app-navy);
  background: #eaf2f8;
}

.app-lembar-isi {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(92px, 1fr));
  gap: 6px;
}

.app-keluar {
  margin-top: 6px;
  color: #a3323b;
}

.app-keluar:hover {
  background: #fbebec;
  color: #8f2b31;
}

.app-lainnya-sheet {
  position: fixed;
  z-index: 45;
  right: 0;
  bottom: calc(var(--app-bar) + env(safe-area-inset-bottom));
  left: 0;
  display: grid;
  gap: 6px;
  max-height: min(56dvh, 400px);
  overflow-y: auto;
  padding: 14px 14px 18px;
  border: 1px solid var(--app-line);
  border-radius: 18px 18px 6px 6px;
  background: #fff;
  box-shadow: 0 -14px 44px rgba(14, 43, 73, .18);
}

.app-lainnya-sheet[hidden] {
  display: none;
}

/* Sheet "Lainnya" dan tirainya dikendalikan atribut hidden, jadi tidak bisa
   dibanjiri transisi. Kunci animasi dipakai saat atribut lepas sehingga
   panel naik dan layar redup sepersekian detik, bukan muncul mendadak. */
.app-lainnya-sheet:not([hidden]) {
  animation: appSheetNaik var(--app-laju-slow) var(--app-ease) backwards;
}

.app-backdrop:not([hidden]) {
  animation: appTirai var(--app-laju-slow) var(--app-ease) backwards;
}

@keyframes appSheetNaik {
  from {
    opacity: 0;
    transform: translateY(14px);
  }
}

@keyframes appTirai {
  from {
    opacity: 0;
  }
}

.app-backdrop {
  position: fixed;
  inset: 0;
  z-index: 44;
  border: 0;
  background: rgba(9, 26, 45, .38);
}

.app-backdrop[hidden] {
  display: none;
}

/* ---------- kartu isi ---------- */

.app-card {
  margin-bottom: 14px;
  padding: 15px 16px;
  border: 1px solid var(--app-line);
  border-radius: 15px;
  background: #fff;
  box-shadow: 0 6px 20px rgba(14, 43, 73, .05);
  animation: appMuncul var(--app-laju-slow) var(--app-ease) backwards;
}

/* Kartu susulan datang sedikit terlambat supaya isi yang baru terisi terasa
   mengalir, bukan serentak. */
.app-wrap > .app-card:nth-child(2) {
  animation-delay: 45ms;
}

.app-wrap > .app-card:nth-child(3) {
  animation-delay: 90ms;
}

.app-wrap > .app-card:nth-child(n+4) {
  animation-delay: 130ms;
}

@keyframes appMuncul {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
}

.app-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.app-card-head h2 {
  margin: 0;
  color: var(--app-navy);
  font-size: 15px;
  letter-spacing: -.2px;
}

.app-card-head a {
  color: var(--app-blue);
  font-size: 12px;
  font-weight: 750;
}

.app-sapa {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
  padding: 16px;
  border: 1px solid var(--app-line);
  border-radius: 15px;
  background: linear-gradient(120deg, #0e2b49, #1a5583 62%, #2b7fb5);
  color: #fff;
}

.app-sapa b {
  display: block;
  font-size: 17px;
  letter-spacing: -.3px;
}

.app-sapa p {
  margin: 4px 0 0;
  color: #d4e6f5;
  font-size: 12.5px;
}

.app-tiles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(96px, 1fr));
  gap: 8px;
}

.app-tile {
  display: grid;
  gap: 6px;
  justify-items: center;
  padding: 12px 6px;
  border: 1px solid var(--app-line);
  border-radius: 13px;
  background: #fbfdfe;
  color: #33475c;
  font-size: 11px;
  font-weight: 750;
  text-align: center;
  transition: background-color var(--app-laju) var(--app-ease),
    border-color var(--app-laju) var(--app-ease),
    color var(--app-laju) var(--app-ease),
    box-shadow var(--app-laju-slow) var(--app-ease);
}

.app-tile:hover {
  border-color: #b9d5ea;
  background: #f1f8fd;
  color: var(--app-navy);
  box-shadow: 0 6px 16px rgba(14, 43, 73, .07);
}

.app-tile:active {
  background: #e6f1f9;
}

.app-tile svg {
  width: 22px;
  height: 22px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.app-baris {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 11px 0;
  border-top: 1px solid #edf2f6;
}

.app-baris:first-of-type {
  border-top: 0;
}

.app-baris b {
  display: block;
  color: var(--app-navy);
  font-size: 13.5px;
}

/* Judul + keterangan selalu mendapat ruang; waktu menempel di kanan. */
.app-baris-isi {
  flex: 1 1 auto;
  min-width: 0;
  display: block;
}

.app-baris p {
  margin: 3px 0 0;
  color: var(--app-muted);
  font-size: 12px;
  line-height: 1.5;
}

.app-baris time {
  flex: 0 0 auto;
  margin-left: auto;
  color: #8b98a6;
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
}

.app-ava {
  width: 38px;
  height: 38px;
  flex: 0 0 38px;
  border-radius: 50%;
  object-fit: cover;
  background: #e7eff6;
}

.app-kosong {
  margin: 0;
  padding: 14px 4px;
  color: var(--app-muted);
  font-size: 12.5px;
  text-align: center;
}

.app-gagal {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
  padding: 12px 14px;
  border: 1px solid #f0d3d5;
  border-radius: 13px;
  background: #fff5f5;
  color: #8f2b31;
  font-size: 12.5px;
}

.app-pulihkan {
  padding: 8px 12px;
  border: 0;
  border-radius: 9px;
  background: var(--app-navy);
  color: #fff;
  font: inherit;
  font-size: 12px;
  font-weight: 750;
  cursor: pointer;
  transition: background-color var(--app-laju) var(--app-ease),
    box-shadow var(--app-laju-slow) var(--app-ease);
}

.app-pulihkan:hover {
  background: #14395c;
  box-shadow: 0 6px 16px rgba(14, 43, 73, .18);
}

.app-pulihkan:active {
  background: var(--app-navy-deep);
}

/* Baris yang bisa ditekan (kabar, agenda, artikel, notifikasi). */
button.app-baris {
  width: 100%;
  border: 0;
  border-inline: 0;
  background: none;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: background-color var(--app-laju) var(--app-ease);
}

button.app-baris:hover {
  background: #f5fafd;
}

button.app-baris:active {
  background: #e9f3f9;
}

.app-baris .app-unread {
  width: 7px;
  height: 7px;
  flex: 0 0 7px;
  margin-top: 6px;
  border-radius: 99px;
  background: #c0392b;
}

.app-tanggal {
  display: grid;
  gap: 1px;
  place-items: center;
  flex: 0 0 42px;
  padding: 6px 0;
  border-radius: 10px;
  background: #eaf2f8;
  color: var(--app-navy);
}

.app-tanggal b {
  font-size: 15px;
  line-height: 1;
}

.app-tanggal small {
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.app-sapa i {
  display: inline-block;
  margin-top: 8px;
  padding: 3px 9px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .18);
  color: #eaf3fb;
  font-size: 10.5px;
  font-style: normal;
  font-weight: 800;
  letter-spacing: .04em;
}

.app-kredit {
  padding: 4px 6px 0;
  color: #7d8b99;
  font-size: 11px;
  text-align: center;
}

.app-judul {
  margin: 2px 0 12px;
  color: var(--app-navy);
  font-size: 17px;
  letter-spacing: -.3px;
}

/* ---------- halaman fitur di dalam AppLayout ---------- */

/* Ruang Ibadah & Tanya PII punya tinggi terkunci; kurangi jatah header
   dan bar aplikasi supaya komposer serta baris terakhir tidak terpotong.
   Padding bawah body.aplikasi sudah menghitung bar satu kali, jadi di sini
   tidak ada margin tambahan — kalau ada, isinya mengambang 150px di atas bar. */
body.aplikasi.ibadah-page .ibadah-app {
  height: calc(100dvh - var(--app-head) - var(--app-bar) - 30px);
}

body.aplikasi.tanya-page {
  height: calc(100dvh - var(--app-head) - var(--app-bar) - var(--tanya-keyboard, 0px));
  min-height: 0;
  padding-bottom: calc(var(--app-bar) + 4px);
}

body.aplikasi .article-reader {
  height: 100dvh;
  /* Pembaca artikel dipasang di atas kop aplikasi (z-index 40). */
  z-index: 70;
}

@media (prefers-reduced-motion: reduce) {
  html.aplikasi-mencek body::after {
    animation: none;
  }

  .app-tile,
  .app-baris,
  .app-taut,
  .app-sel,
  .app-card,
  .app-pulihkan,
  .app-lainnya-sheet,
  .app-backdrop {
    transition: none;
    animation: none;
  }
}