/* ============================================================================
   RT Digital — "App Shell" (tampilan v6, gaya aplikasi ponsel)

   Dipakai oleh dashboard pengurus, panel warga, dan panel security.
   Warna dasar tetap mengambil token dari assets/css/tokens.css supaya
   mode gelap tetap konsisten dengan halaman modul lain; berkas ini hanya
   menambahkan lapisan token khusus tampilan aplikasi (aksen ungu).

   URUTAN MUAT: tokens.css -> app-shell.css (setelah Bootstrap).
   ========================================================================== */

/* ------------------------------------------------------------------ TOKEN */
:root {
  --app-bg:          #f6f5fb;
  --app-bg-tint:     radial-gradient(900px 420px at 8% -8%,  rgba(124, 58, 237, .10), transparent 62%),
                     radial-gradient(760px 380px at 100% 2%, rgba(37, 99, 235, .08), transparent 58%);
  --app-surface:     #ffffff;
  --app-surface-2:   #f2f1f9;
  --app-line:        rgba(23, 16, 48, .08);
  --app-ink:         #191333;
  --app-ink-2:       #5b5675;
  --app-ink-3:       #8c88a3;

  --app-accent:      #7c3aed;
  --app-accent-2:    #a855f7;
  --app-accent-deep: #5b21b6;
  --app-accent-soft: rgba(124, 58, 237, .12);

  --app-danger:      #e11d48;
  --app-danger-2:    #f43f5e;

  --app-r-sm: 14px;
  --app-r-md: 20px;
  --app-r-lg: 26px;
  --app-r-xl: 30px;

  --app-shadow-1: 0 1px 2px rgba(23, 16, 48, .05), 0 6px 18px rgba(23, 16, 48, .06);
  --app-shadow-2: 0 12px 34px rgba(23, 16, 48, .12);
  --app-shadow-accent: 0 14px 34px rgba(124, 58, 237, .30);
  --app-shadow-danger: 0 12px 30px rgba(225, 29, 72, .38);

  --app-ease: 180ms cubic-bezier(.2, .7, .3, 1);
  --app-max: 600px;
}

@media (prefers-color-scheme: dark) {
  :root:where(:not([data-bs-theme="light"])) {
    --app-bg:        #070b14;
    --app-bg-tint:   radial-gradient(900px 460px at 8% -10%,  rgba(124, 58, 237, .20), transparent 60%),
                     radial-gradient(760px 400px at 100% 0%,  rgba(37, 99, 235, .14), transparent 58%);
    --app-surface:   #121a29;
    --app-surface-2: #1a2436;
    --app-line:      rgba(255, 255, 255, .09);
    --app-ink:       #eaeefb;
    --app-ink-2:     #a6b0c9;
    --app-ink-3:     #76819c;
    --app-accent:    #a78bfa;
    --app-accent-2:  #c4b5fd;
    --app-accent-soft: rgba(167, 139, 250, .18);
    --app-shadow-1: 0 1px 2px rgba(0, 0, 0, .5), 0 8px 22px rgba(0, 0, 0, .45);
    --app-shadow-2: 0 16px 40px rgba(0, 0, 0, .55);
  }
}
[data-bs-theme="dark"] {
  --app-bg:        #070b14;
  --app-bg-tint:   radial-gradient(900px 460px at 8% -10%,  rgba(124, 58, 237, .20), transparent 60%),
                   radial-gradient(760px 400px at 100% 0%,  rgba(37, 99, 235, .14), transparent 58%);
  --app-surface:   #121a29;
  --app-surface-2: #1a2436;
  --app-line:      rgba(255, 255, 255, .09);
  --app-ink:       #eaeefb;
  --app-ink-2:     #a6b0c9;
  --app-ink-3:     #76819c;
  --app-accent:    #a78bfa;
  --app-accent-2:  #c4b5fd;
  --app-accent-soft: rgba(167, 139, 250, .18);
  --app-shadow-1: 0 1px 2px rgba(0, 0, 0, .5), 0 8px 22px rgba(0, 0, 0, .45);
  --app-shadow-2: 0 16px 40px rgba(0, 0, 0, .55);
}

/* ------------------------------------------------------------------ RANGKA */
body.app-shell-body {
  margin: 0;
  min-height: 100dvh;
  background-color: var(--app-bg);
  background-image: var(--app-bg-tint);
  background-attachment: fixed;
  color: var(--app-ink);
  font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
  padding-bottom: calc(84px + env(safe-area-inset-bottom));
}

.app-shell {
  width: 100%;
  max-width: var(--app-max);
  margin: 0 auto;
  padding: 0 16px;
}

/* Kepala: nama RT sebagai lambang aplikasi */
.app-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 18px 0 12px;
}
.app-brand-wrap {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 11px;
}
.app-brand-logo {
  width: 48px;
  height: 48px;
  flex: 0 0 48px;
  object-fit: contain;
  padding: 4px;
  border-radius: 14px;
  background: var(--app-surface);
  border: 1px solid var(--app-line);
  box-shadow: var(--app-shadow-1);
}
.app-brand {
  margin: 0;
  font-size: clamp(1.6rem, 6.4vw, 2.1rem);
  font-weight: 800;
  letter-spacing: -.03em;
  line-height: 1.05;
  background: linear-gradient(100deg, var(--app-accent-deep), var(--app-accent), #4f46e5);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  overflow-wrap: anywhere;
}
.app-brand-sub {
  display: block;
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .02em;
  color: var(--app-ink-3);
  background: none;
  -webkit-text-fill-color: var(--app-ink-3);
}
.app-topbar-actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.app-icon-btn {
  width: 40px; height: 40px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%;
  border: 1px solid var(--app-line);
  background: var(--app-surface);
  color: var(--app-ink-2);
  font-size: 1.05rem;
  text-decoration: none;
  box-shadow: var(--app-shadow-1);
  transition: transform var(--app-ease), color var(--app-ease);
  position: relative;
}
.app-icon-btn:hover { color: var(--app-accent); }
.app-icon-btn:active { transform: scale(.93); }

/* ------------------------------------------------------- KARTU SALDO KAS */
.app-balance {
  position: relative;
  overflow: hidden;
  border-radius: var(--app-r-xl);
  padding: 22px 22px 20px;
  color: #fff;
  background:
    radial-gradient(420px 240px at 6% 96%,  rgba(34, 197, 94, .70), transparent 62%),
    radial-gradient(360px 220px at 96% 4%,  rgba(236, 72, 153, .42), transparent 60%),
    radial-gradient(420px 260px at 88% 96%, rgba(6, 182, 212, .38), transparent 62%),
    linear-gradient(140deg, #4f46e5 0%, #6d28d9 46%, #2563eb 100%);
  box-shadow: var(--app-shadow-accent);
  isolation: isolate;
}
.app-balance::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(255,255,255,.10), transparent 40%);
  pointer-events: none;
}
.app-balance-label {
  display: flex; align-items: center; gap: 8px;
  font-size: 1.02rem; font-weight: 700;
}
.app-balance-toggle {
  border: 0; background: rgba(255,255,255,.18);
  color: #fff; width: 26px; height: 26px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: .8rem; cursor: pointer; padding: 0;
  transition: background var(--app-ease);
}
.app-balance-toggle:hover { background: rgba(255,255,255,.32); }
.app-balance-sub { margin-top: 6px; font-size: .84rem; opacity: .82; }
.app-balance-amount {
  margin: 2px 0 0;
  font-size: clamp(1.9rem, 8vw, 2.6rem);
  font-weight: 800; letter-spacing: -.02em; line-height: 1.15;
}
.app-balance-amount small { font-size: .48em; font-weight: 700; opacity: .85; margin-right: .18em; }
.app-balance-actions {
  display: flex; justify-content: center; gap: clamp(28px, 12vw, 64px);
  margin-top: 18px;
}
.app-balance-actions a {
  display: flex; flex-direction: column; align-items: center; gap: 7px;
  color: #fff; text-decoration: none; font-size: .82rem; font-weight: 600;
}
.app-balance-actions a span {
  width: 46px; height: 46px; border-radius: 50%;
  background: #fff; color: var(--app-accent-deep);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.18rem;
  box-shadow: 0 6px 16px rgba(0,0,0,.18);
  transition: transform var(--app-ease);
}
.app-balance-actions a:active span { transform: scale(.92); }

/* ------------------------------------------------------------- CAROUSEL */
.app-carousel {
  position: relative;
  margin-top: 18px;
  border-radius: var(--app-r-lg);
  overflow: hidden;
  box-shadow: var(--app-shadow-1);
  background: var(--app-surface-2);
}
.app-slides { display: flex; transition: transform 420ms cubic-bezier(.4,.1,.2,1); }
.app-slide {
  position: relative;
  flex: 0 0 100%;
  min-height: 180px;
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: 22px 58px 34px 22px;
  color: #fff;
  text-decoration: none;
  background-size: cover; background-position: center;
}
.app-slide::before {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(160deg, rgba(17,10,40,.20), rgba(17,10,40,.72));
}
.app-slide.tanpa-foto { background-image: linear-gradient(135deg, #4f46e5, #7c3aed 55%, #0ea5e9); }
.app-slide > * { position: relative; }
.app-slide h3 { font-size: clamp(1.15rem, 5vw, 1.5rem); font-weight: 800; line-height: 1.22; margin: 0 0 6px; }
.app-slide p  { margin: 0; font-size: .84rem; opacity: .9; }
.app-carousel-nav {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 34px; height: 34px; border: 0; border-radius: 50%;
  background: rgba(20, 14, 40, .42);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  color: #fff; font-size: .95rem; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background var(--app-ease);
  z-index: 2;
}
.app-carousel-nav:hover { background: rgba(20, 14, 40, .68); }
.app-carousel-nav.prev { left: 10px; }
.app-carousel-nav.next { right: 10px; }
.app-dots {
  position: absolute; left: 0; right: 0; bottom: 12px;
  display: flex; justify-content: center; gap: 7px; z-index: 2;
}
.app-dots button {
  width: 8px; height: 8px; padding: 0; border: 0; border-radius: 50%;
  background: rgba(255,255,255,.45); cursor: pointer;
  transition: width var(--app-ease), background var(--app-ease);
}
.app-dots button.active { width: 20px; border-radius: 6px; background: #fff; }

/* ------------------------------------------------------ TAB (SEGMENTED) */
.app-tabs {
  display: flex; gap: 6px;
  margin: 22px 0 6px;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.app-tabs::-webkit-scrollbar { display: none; }
.app-tabs button {
  flex: 0 0 auto;
  border: 0; background: transparent;
  padding: 11px 20px;
  border-radius: 999px;
  font-size: .92rem; font-weight: 700;
  color: var(--app-ink-3);
  cursor: pointer; white-space: nowrap;
  transition: background var(--app-ease), color var(--app-ease);
}
.app-tabs button:hover { color: var(--app-ink-2); }
.app-tabs button[aria-selected="true"] {
  background: var(--app-accent-soft);
  color: var(--app-accent);
}

/* ------------------------------------------------------- GRID MENU IKON */
.app-panel[hidden] { display: none !important; }
.app-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 20px 6px;
  padding: 20px 0 6px;
}
.app-tile {
  display: flex; flex-direction: column; align-items: center; gap: 9px;
  text-decoration: none; color: var(--app-ink);
  font-size: .78rem; font-weight: 700; line-height: 1.25; text-align: center;
  transition: transform var(--app-ease);
  position: relative;
}
.app-tile:active { transform: scale(.94); }
.app-tile-ic {
  width: 62px; height: 62px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.6rem;
  color: var(--ti, var(--app-accent));
  background: var(--app-accent-soft);
  background: color-mix(in srgb, var(--ti, #7c3aed) 15%, var(--app-surface));
  box-shadow: var(--app-shadow-1);
  position: relative;
}
.app-tile span.app-tile-label { display: block; max-width: 92px; }
.app-tile-badge {
  position: absolute; top: -2px; right: 50%; transform: translateX(38px);
  min-width: 20px; height: 20px; padding: 0 6px;
  border-radius: 999px;
  background: var(--app-danger); color: #fff;
  font-size: .66rem; font-weight: 800;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 2px 8px rgba(225, 29, 72, .45);
}
.app-tile.mati { opacity: .5; pointer-events: none; }
.app-tile.mati .app-tile-label::after {
  content: "Segera hadir";
  display: block; font-size: .62rem; font-weight: 600; color: var(--app-ink-3);
}

/* Warna ikon (nilai --ti dipakai untuk ikon & latar lingkaran) */
.t-violet { --ti: #7c3aed; }
.t-indigo { --ti: #4f46e5; }
.t-blue   { --ti: #2563eb; }
.t-cyan   { --ti: #0891b2; }
.t-teal   { --ti: #0d9488; }
.t-green  { --ti: #16a34a; }
.t-lime   { --ti: #65a30d; }
.t-amber  { --ti: #d97706; }
.t-orange { --ti: #f97316; }
.t-red    { --ti: #ef4444; }
.t-pink   { --ti: #ec4899; }
.t-slate  { --ti: #64748b; }

@media (prefers-color-scheme: dark) {
  :root:where(:not([data-bs-theme="light"])) .t-violet { --ti: #a78bfa; }
  :root:where(:not([data-bs-theme="light"])) .t-indigo { --ti: #818cf8; }
  :root:where(:not([data-bs-theme="light"])) .t-blue   { --ti: #60a5fa; }
  :root:where(:not([data-bs-theme="light"])) .t-cyan   { --ti: #22d3ee; }
  :root:where(:not([data-bs-theme="light"])) .t-teal   { --ti: #2dd4bf; }
  :root:where(:not([data-bs-theme="light"])) .t-green  { --ti: #4ade80; }
  :root:where(:not([data-bs-theme="light"])) .t-lime   { --ti: #a3e635; }
  :root:where(:not([data-bs-theme="light"])) .t-amber  { --ti: #fbbf24; }
  :root:where(:not([data-bs-theme="light"])) .t-orange { --ti: #fb923c; }
  :root:where(:not([data-bs-theme="light"])) .t-red    { --ti: #f87171; }
  :root:where(:not([data-bs-theme="light"])) .t-pink   { --ti: #f472b6; }
  :root:where(:not([data-bs-theme="light"])) .t-slate  { --ti: #94a3b8; }
}
[data-bs-theme="dark"] .t-violet { --ti: #a78bfa; }
[data-bs-theme="dark"] .t-indigo { --ti: #818cf8; }
[data-bs-theme="dark"] .t-blue   { --ti: #60a5fa; }
[data-bs-theme="dark"] .t-cyan   { --ti: #22d3ee; }
[data-bs-theme="dark"] .t-teal   { --ti: #2dd4bf; }
[data-bs-theme="dark"] .t-green  { --ti: #4ade80; }
[data-bs-theme="dark"] .t-lime   { --ti: #a3e635; }
[data-bs-theme="dark"] .t-amber  { --ti: #fbbf24; }
[data-bs-theme="dark"] .t-orange { --ti: #fb923c; }
[data-bs-theme="dark"] .t-red    { --ti: #f87171; }
[data-bs-theme="dark"] .t-pink   { --ti: #f472b6; }
[data-bs-theme="dark"] .t-slate  { --ti: #94a3b8; }

/* ------------------------------------------------------------ KARTU ISI */
.app-section {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 12px; margin: 26px 0 12px;
}
.app-section h2 { margin: 0; font-size: 1.02rem; font-weight: 800; letter-spacing: -.01em; }
.app-section p  { margin: 2px 0 0; font-size: .78rem; color: var(--app-ink-3); }
.app-section a  {
  font-size: .8rem; font-weight: 700; color: var(--app-accent);
  text-decoration: none; white-space: nowrap; flex-shrink: 0;
}

.app-card {
  background: var(--app-surface);
  border: 1px solid var(--app-line);
  border-radius: var(--app-r-md);
  padding: 16px;
  box-shadow: var(--app-shadow-1);
  color: var(--app-ink);
}
.app-card + .app-card { margin-top: 12px; }

.app-stat-row { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.app-stat {
  background: var(--app-surface);
  border: 1px solid var(--app-line);
  border-radius: var(--app-r-md);
  padding: 14px 16px;
  box-shadow: var(--app-shadow-1);
}
.app-stat i { font-size: 1.1rem; color: var(--ti, var(--app-accent)); }
.app-stat strong { display: block; font-size: 1.35rem; font-weight: 800; letter-spacing: -.02em; margin-top: 6px; }
.app-stat span { font-size: .74rem; color: var(--app-ink-3); font-weight: 600; }

.app-row {
  display: flex; align-items: center; gap: 12px;
  padding: 11px 0;
  border-bottom: 1px solid var(--app-line);
  text-decoration: none; color: inherit;
}
.app-row:last-child { border-bottom: 0; }
.app-row-ic {
  width: 38px; height: 38px; flex-shrink: 0; border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  font-size: 1rem;
  color: var(--ti, var(--app-accent));
  background: color-mix(in srgb, var(--ti, #7c3aed) 15%, var(--app-surface));
}
.app-row-body { min-width: 0; flex: 1; }
.app-row-body strong { display: block; font-size: .87rem; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.app-row-body small  { display: block; font-size: .74rem; color: var(--app-ink-3); }
.app-row-amount { font-size: .87rem; font-weight: 800; flex-shrink: 0; }
.app-row-amount.masuk  { color: #16a34a; }
.app-row-amount.keluar { color: var(--app-danger); }

.app-empty { padding: 26px 8px; text-align: center; color: var(--app-ink-3); font-size: .82rem; }
.app-empty i { display: block; font-size: 1.7rem; margin-bottom: 6px; opacity: .55; }

/* Batang perbandingan sederhana */
.app-meter { height: 8px; border-radius: 999px; background: var(--app-surface-2); overflow: hidden; }
.app-meter > span { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--app-accent), var(--app-accent-2)); }

/* ------------------------------------------------------------ BOTTOM NAV */
.app-tabbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 1040;
  display: flex; align-items: flex-end;
  width: 100%; max-width: none;
  margin: 0 auto;
  padding: 8px 6px max(8px, env(safe-area-inset-bottom));
  background: var(--app-surface);
  border-top: 1px solid var(--app-line);
  border-radius: 0;
  box-shadow: none;
}
.app-tab {
  flex: 1 1 0; min-width: 0;
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  padding: 6px 2px;
  text-decoration: none;
  color: var(--app-ink-3);
  font-size: .68rem; font-weight: 700;
  position: relative;
  transition: color var(--app-ease);
  -webkit-tap-highlight-color: transparent;
}
.app-tab i { font-size: 1.32rem; line-height: 1; }
.app-tab span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
.app-tab.active { color: var(--app-accent); }
.app-tab .tab-dot {
  position: absolute; top: 2px; left: 50%; margin-left: 6px;
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--app-danger);
  border: 2px solid var(--app-surface);
}
.app-tab-fab { flex: 0 0 86px; }
.app-tab-fab .fab {
  width: 62px; height: 62px; border-radius: 50%;
  margin-top: -30px;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.6rem; color: #fff;
  background: linear-gradient(150deg, var(--app-danger-2), #be123c);
  box-shadow: var(--app-shadow-danger);
  border: 4px solid var(--app-surface);
  transition: transform var(--app-ease);
}
.app-tab-fab:active .fab { transform: scale(.92); }
.app-tab-fab.aman .fab {
  background: linear-gradient(150deg, #2563eb, #4f46e5);
  box-shadow: 0 12px 30px rgba(37, 99, 235, .40);
}
.app-tab-fab.berdenyut .fab { animation: appFabPulse 1.1s ease-in-out infinite; }
@keyframes appFabPulse {
  0%, 100% { box-shadow: var(--app-shadow-danger), 0 0 0 0 rgba(244, 63, 94, .55); }
  50%      { box-shadow: var(--app-shadow-danger), 0 0 0 14px rgba(244, 63, 94, 0); }
}
@media (prefers-reduced-motion: reduce) {
  .app-tab-fab.berdenyut .fab { animation: none; }
  .app-slides { transition: none; }
}

/* ------------------------------------------------------------ PERINGATAN */
.app-alert {
  display: flex; align-items: flex-start; gap: 10px;
  border-radius: var(--app-r-md);
  padding: 13px 15px;
  margin-top: 14px;
  font-size: .82rem; line-height: 1.45;
  border: 1px solid transparent;
}
.app-alert i { font-size: 1.15rem; flex-shrink: 0; margin-top: 1px; }
.app-alert a { font-weight: 700; }
.app-alert.bahaya  { background: rgba(225, 29, 72, .12);  border-color: rgba(225, 29, 72, .32);  color: #b3123c; }
.app-alert.ingat   { background: rgba(217, 119, 6, .12);  border-color: rgba(217, 119, 6, .32);  color: #a35a05; }
.app-alert.oke     { background: rgba(22, 163, 74, .12);  border-color: rgba(22, 163, 74, .30);  color: #12803c; }
.app-alert.kabar   { background: rgba(37, 99, 235, .10);  border-color: rgba(37, 99, 235, .28);  color: #1d4ed8; }
[data-bs-theme="dark"] .app-alert.bahaya { color: #fda4af; }
[data-bs-theme="dark"] .app-alert.ingat  { color: #fcd34d; }
[data-bs-theme="dark"] .app-alert.oke    { color: #86efac; }
[data-bs-theme="dark"] .app-alert.kabar  { color: #93c5fd; }
@media (prefers-color-scheme: dark) {
  :root:where(:not([data-bs-theme="light"])) .app-alert.bahaya { color: #fda4af; }
  :root:where(:not([data-bs-theme="light"])) .app-alert.ingat  { color: #fcd34d; }
  :root:where(:not([data-bs-theme="light"])) .app-alert.oke    { color: #86efac; }
  :root:where(:not([data-bs-theme="light"])) .app-alert.kabar  { color: #93c5fd; }
}

/* --------------------------------------------------------------- LAYAR LEBAR
   Tetap "gaya aplikasi", tetapi memanfaatkan ruang: kolom melebar dan grid
   ikon menambah kolom. Bilah bawah tetap flat selebar layar. */
@media (min-width: 992px) {
  :root { --app-max: 1040px; }
  .app-shell { padding: 0 28px; }
  .app-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 26px 10px; }
  .app-tile-ic { width: 68px; height: 68px; font-size: 1.75rem; }
  .app-tile { font-size: .82rem; }
  .app-slide { min-height: 260px; }
  .app-duo { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: start; }
  .app-duo > * { margin-top: 0 !important; }
  .app-stat-row { grid-template-columns: repeat(4, 1fr); }
  .app-tabbar {
    bottom: 0;
    border-radius: 0;
    border: 0;
    border-top: 1px solid var(--app-line);
    max-width: none;
    box-shadow: none;
  }
  body.app-shell-body { padding-bottom: 96px; }
}

/* Halaman modul pengurus memakai layout yang sama tanpa sidebar. Bottom bar
   tetap menempel di layar saat pengguna membuka Data Warga, Kas, Iuran,
   Keamanan, maupun menu Sistem. */
body.module-shell-body {
  min-height: 100dvh;
  padding-bottom: calc(92px + env(safe-area-inset-bottom));
  background-color: var(--app-bg);
  background-image: var(--app-bg-tint);
  background-attachment: fixed;
  color: var(--app-ink);
}
body.module-shell-body .app-content {
  width: 100%;
}
body.module-shell-body .app-content > .container-fluid {
  width: 100%;
  max-width: 1280px;
  margin-inline: auto;
  padding-bottom: calc(9rem + env(safe-area-inset-bottom));
}
body.module-shell-body .app-footer {
  margin-bottom: 1rem;
}

/* ============================================================================
   Penyesuaian untuk panel warga & security

   Kedua panel tetap memakai warga.css sebagai dasar (kartu, form, banner
   alarm). Berkas ini dimuat SETELAHnya, hanya untuk menyeragamkan kepala
   halaman, bilah bawah, dan ruang bawah agar tidak tertutup tombol alarm.
   ========================================================================== */
body.warga-body,
body.security-body {
  padding-bottom: calc(92px + env(safe-area-inset-bottom));
}
.warga-content,
.sec-content {
  padding-bottom: .75rem;
  max-width: var(--app-max);
}
body.warga-body .app-topbar,
body.security-body .app-topbar {
  max-width: var(--app-max);
  margin: 0 auto;
  padding-left: 16px;
  padding-right: 16px;
}
/* Ikon aksi di kepala halaman warga memakai gaya app-shell */
body.warga-body .warga-icon-btn.app-icon-btn,
body.security-body .warga-icon-btn.app-icon-btn {
  background: var(--app-surface);
  border: 1px solid var(--app-line);
  color: var(--app-ink-2);
}
body.warga-body .warga-icon-btn.app-icon-btn.notif-blokir,
body.security-body .warga-icon-btn.app-icon-btn.notif-blokir {
  background: rgba(239, 68, 68, .18) !important;
  border-color: rgba(239, 68, 68, .45);
  color: #b91c1c;
}
/* Banner alarm tetap menempel di atas layar, di atas kepala halaman */
body.warga-body .alarm-topbanner,
body.security-body .alarm-topbanner { z-index: 1090; }

/* ----------------------------------------------------------------------------
   Penguat warna teks di dalam panel warga & security.

   warga.css memberi warna merek pada SEMUA tautan di dalam .warga-body /
   .security-body dengan bobot pemilih yang tinggi. Komponen app-shell punya
   warnanya sendiri (label ikon, tab, tombol di kartu saldo), jadi di sini
   ditegaskan ulang agar tidak ikut menjadi hijau.
   -------------------------------------------------------------------------- */
body.warga-body    .app-tile,
body.security-body .app-tile          { color: var(--app-ink); }
body.warga-body    .app-tab,
body.security-body .app-tab           { color: var(--app-ink-3); }
body.warga-body    .app-tab.active,
body.security-body .app-tab.active    { color: var(--app-accent); }
body.warga-body    .app-section a,
body.security-body .app-section a     { color: var(--app-accent); }
body.warga-body    .app-row,
body.security-body .app-row           { color: var(--app-ink); }
body.warga-body    .app-balance-actions a,
body.security-body .app-balance-actions a,
body.warga-body    .app-slide,
body.security-body .app-slide         { color: #fff; }
body.warga-body    .app-alert a,
body.security-body .app-alert a       { color: inherit; }

/* Judul di dalam slide & kartu gelap: Bootstrap memberi warna sendiri pada
   h1–h6, jadi ditegaskan agar tetap putih di atas latar gradien. */
.app-slide h3,
.app-slide p,
.app-balance,
.app-balance h1, .app-balance h2, .app-balance h3,
.app-balance p  { color: #fff; }