/* ==========================================================================
   public/css/bottom-nav.css
   Bottom navigation mobile (< 768px) - dipakai di semua halaman portal & login.
   Mandiri: tidak butuh Tailwind maupun Font Awesome (ikon SVG inline).
   Warna mengikuti variabel --sk-* bila halaman mendefinisikannya.
   ========================================================================== */

.sk-bottomnav-root { display: none; }

@media (max-width: 767.98px) {
  .sk-bottomnav-root { display: block; }

  /* beri ruang agar konten & footer tidak tertutup nav */
  body { padding-bottom: calc(4.75rem + env(safe-area-inset-bottom, 0px)); }

  .sk-ico { display: block; width: 1.25rem; height: 1.25rem; }

  .sk-bottomnav {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 50;
    background: rgba(255, 255, 255, .96);
    -webkit-backdrop-filter: saturate(1.4) blur(12px);
    backdrop-filter: saturate(1.4) blur(12px);
    border-top: 1px solid #EDE5FB;
    box-shadow: 0 -10px 25px rgba(30, 27, 75, .08);
    padding-bottom: env(safe-area-inset-bottom, 0px);
    font-family: var(--sk-font, 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif);
  }
  .sk-bottomnav__list { display: flex; margin: 0; padding: .375rem .25rem; list-style: none; }
  .sk-bottomnav__item { flex: 1 1 0; min-width: 0; margin: 0; padding: 0; }

  .sk-bottomnav__link {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: .125rem; width: 100%; min-height: 3.5rem; padding: .25rem .125rem; margin: 0;
    background: none; border: 0; cursor: pointer;
    color: var(--sk-muted, #64748B); text-decoration: none;
    font: 800 .625rem/1.1 var(--sk-font, 'Inter', system-ui, sans-serif);
    letter-spacing: .04em; text-transform: uppercase;
    -webkit-tap-highlight-color: transparent;
  }
  .sk-bottomnav__icon {
    display: grid; place-items: center; width: 2.75rem; height: 1.75rem;
    border-radius: 999px;
    transition: background-color .2s, color .2s;
  }
  .sk-bottomnav__link.is-active,
  .sk-bottomnav__link[aria-expanded="true"] { color: var(--sk-primary-dark, #4F12B3); }
  .sk-bottomnav__link.is-active .sk-bottomnav__icon,
  .sk-bottomnav__link[aria-expanded="true"] .sk-bottomnav__icon { background: var(--sk-lilac, #F3E8FF); color: var(--sk-primary, #8B2FC9); }
  .sk-bottomnav__link:focus-visible { outline: 3px solid var(--sk-primary-light, #A13BF0); outline-offset: -3px; border-radius: .75rem; }

  /* Pilihan masuk (Warga / Admin) */
  .sk-sheet__backdrop { position: fixed; inset: 0; z-index: 48; background: rgba(30, 27, 75, .45); }
  .sk-sheet {
    position: fixed; z-index: 49; left: .75rem; right: .75rem;
    bottom: calc(5.25rem + env(safe-area-inset-bottom, 0px));
    padding: .5rem; background: #fff; border: 1px solid #EDE5FB; border-radius: 1.5rem;
    box-shadow: 0 24px 48px -12px rgba(30, 27, 75, .35);
    font-family: var(--sk-font, 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif);
  }
  .sk-sheet[hidden], .sk-sheet__backdrop[hidden] { display: none; }
  .sk-sheet__link {
    display: flex; align-items: center; gap: .875rem; min-height: 3.5rem;
    padding: .5rem .75rem; border-radius: 1rem; text-decoration: none;
    color: var(--sk-text, #1E1B4B);
  }
  .sk-sheet__link + .sk-sheet__link { margin-top: .125rem; }
  .sk-sheet__link:hover, .sk-sheet__link:active { background: #FAF5FF; }
  .sk-sheet__link:focus-visible { outline: 3px solid var(--sk-primary-light, #A13BF0); outline-offset: -3px; }
  .sk-sheet__icon {
    display: grid; place-items: center; flex: none; width: 2.5rem; height: 2.5rem;
    border-radius: .75rem; background: var(--sk-lilac, #F3E8FF); color: var(--sk-primary, #8B2FC9);
  }
  .sk-sheet__link strong { display: block; font-size: .9375rem; font-weight: 800; line-height: 1.25; }
  .sk-sheet__link small { display: block; margin-top: .125rem; font-size: .8125rem; font-weight: 500; line-height: 1.3; color: var(--sk-muted, #64748B); }
}

@media (prefers-reduced-motion: reduce) {
  .sk-bottomnav__icon { transition: none; }
}