/* ═══════════════════════════════════════════════════════════════════════
   iOS / PWA Safe Area — dynamic insets for all notch & Home Indicator sizes
   Requires viewport-fit=cover (index.html). Uses env() only — no hardcoded
   device dimensions. Loaded after mobile.css so overrides win.
   ═══════════════════════════════════════════════════════════════════════ */

:root {
  --sat: env(safe-area-inset-top, 0px);
  --sar: env(safe-area-inset-right, 0px);
  --sab: env(safe-area-inset-bottom, 0px);
  --sal: env(safe-area-inset-left, 0px);
  --topbar-content-h: 52px;
  --app-header-total: calc(var(--topbar-content-h) + var(--sat));
  --app-edge-x: max(16px, var(--sal));
  --app-edge-x-r: max(16px, var(--sar));
  --app-content-pad-b: calc(12px + var(--sab));
  --vp-dynamic: 100dvh;
  --vp-small: 100svh;
  --vp-large: 100lvh;
  --app-scroll-h: calc(var(--vp-dynamic) - var(--app-header-total));
}

/* ── Document: fill screen, paint into safe-area letterbox ─────────── */
html {
  min-height: 100%;
  min-height: 100dvh;
}

body {
  min-height: 100%;
  min-height: 100dvh;
  padding: 0;
}

#app-shell {
  min-height: 100dvh;
  box-sizing: border-box;
}

/* ── Top bar: safe band + toolbar (see app-topbar.css) ─────────────── */
#topbar {
  top: 0;
  left: 0;
  right: 0;
  height: var(--app-header-total) !important;
  min-height: var(--app-header-total) !important;
  padding: 0 !important;
  box-sizing: border-box;
}

@media (min-width: 1181px) {
  #topbar {
    left: var(--side-w);
  }
}

/* ── Scroll shell: one bottom inset (no duplicate 80px gutters) ──────── */
#content-area {
  margin-top: var(--app-header-total) !important;
  height: var(--app-scroll-h) !important;
  max-height: var(--app-scroll-h) !important;
  padding-bottom: var(--sab) !important;
  padding-left: var(--sal) !important;
  padding-right: var(--sar) !important;
  box-sizing: border-box;
}

@media (min-width: 1181px) {
  #content-area {
    margin-left: var(--side-w);
    padding-left: var(--sal);
    padding-right: var(--sar);
  }
}

@media (max-width: 1180px) {
  #topbar,
  #content-area {
    left: 0 !important;
    margin-left: 0 !important;
    width: 100% !important;
  }
}

/* Page content: breathing room; bottom safe-area on #content-area */
@media (max-width: 1180px) {
  .main,
  #page-reg .main,
  #page-cicir .main,
  #page-laporan .main,
  #page-registry .main,
  #page-users .main,
  #page-stok .main,
  #page-disp .main,
  #page-week .main,
  #page-dashboard .dash-wrap,
  .dash-wrap {
    padding-bottom: max(12px, env(safe-area-inset-bottom, 0px)) !important;
  }
}

/* ── Mobile drawer overlay + panel ─────────────────────────────────── */
#mob-nav-drawer {
  z-index: 3200;
}

#mob-nav-drawer > nav.mob-nav-drawer,
#mob-nav-drawer > .mob-nav-drawer {
  position: absolute !important;
  top: var(--sat) !important;
  bottom: var(--sab) !important;
  left: var(--sal) !important;
  right: auto !important;
  width: min(280px, calc(82vw - var(--sal))) !important;
  max-width: calc(100vw - var(--sal) - var(--sar)) !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
}

.mob-drawer-brand {
  padding-top: max(14px, calc(var(--sat) * 0 + 14px));
}

.mob-account-section {
  padding-bottom: max(8px, var(--sab)) !important;
}

/* Legacy spacer div — safe area now on nav panel */
#mob-nav-drawer .mob-account-section > div[style*="safe-area-inset-bottom"] {
  display: none !important;
  height: 0 !important;
}

/* ── Sidebar (mobile slide-in) ─────────────────────────────────────── */
@media (max-width: 1180px) {
  #sidebar {
    top: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
    height: 100dvh !important;
    max-height: 100dvh !important;
    padding-top: var(--sat) !important;
    padding-bottom: var(--sab) !important;
    padding-left: var(--sal) !important;
    box-sizing: border-box !important;
  }

  #sidebar-backdrop {
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
  }
}

/* ── Modals & confirm dialogs ──────────────────────────────────────── */
.ov,
.confirm-ov {
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  padding:
    max(12px, calc(var(--sat) + 8px))
    max(12px, var(--sar))
    max(12px, var(--sab))
    max(12px, var(--sal)) !important;
  box-sizing: border-box;
}

@media (max-width: 640px) {
  .ov {
    padding-top: max(8px, calc(var(--app-header-total) + 8px)) !important;
    align-items: flex-start;
  }

  .modal {
    max-height: calc(100dvh - var(--app-header-total) - var(--sab) - 16px) !important;
    border-radius: 14px 14px 0 0;
  }
}

.confirm-box {
  max-height: calc(100dvh - var(--sat) - var(--sab) - 32px);
}

/* Inline full-screen overlays (stok, transfer, print, etc.) */
@media (max-width: 1180px) {
  div[id$="-overlay"][style*="position:fixed"],
  div[id$="-overlay"][style*="position: fixed"],
  div[id$="-ov"][style*="position:fixed"],
  div[id$="-ov"][style*="position: fixed"] {
    padding:
      max(12px, var(--sat))
      max(12px, var(--sar))
      max(12px, var(--sab))
      max(12px, var(--sal)) !important;
    box-sizing: border-box !important;
  }
}

/* ── Toasts & notification stacks ──────────────────────────────────── */
.toast {
  bottom: calc(12px + var(--sab)) !important;
  left: 50%;
  transform: translateX(-50%) translateY(60px);
  max-width: calc(100vw - var(--sal) - var(--sar) - 32px);
}

.toast.show {
  transform: translateX(-50%) translateY(0);
}

.ln-toast-stack {
  right: calc(12px + var(--sar)) !important;
  bottom: calc(12px + var(--sab)) !important;
  left: auto;
  max-width: min(340px, calc(100vw - var(--sal) - var(--sar) - 24px));
}

@media (max-width: 480px) {
  .ln-toast-stack {
    left: calc(12px + var(--sal));
    right: calc(12px + var(--sar));
    width: auto;
  }
}

.ln-dropdown {
  max-width: min(360px, calc(100vw - var(--sal) - var(--sar) - 24px));
}

/* Patient detail sticky save bar */
.pd-save-bar {
  bottom: 0;
  padding-bottom: calc(12px + var(--sab));
  padding-left: calc(20px + var(--sal));
  padding-right: calc(20px + var(--sar));
}

body.pd-has-save-bar #page-patient-detail {
  padding-bottom: calc(72px + var(--sab)) !important;
}

/* ── System banners & boot screens ─────────────────────────────────── */
#quota-banner {
  top: 0;
  left: 0;
  right: 0;
  padding-top: calc(10px + var(--sat));
  padding-left: calc(16px + var(--sal));
  padding-right: calc(16px + var(--sal));
  padding-bottom: 10px;
  box-sizing: border-box;
}

#loading-screen,
#loading-screen-2,
.kkpms-loading-screen {
  padding:
    var(--sat)
    var(--sar)
    var(--sab)
    var(--sal);
  box-sizing: border-box;
}

#login-overlay {
  padding:
    var(--sat)
    var(--sar)
    var(--sab)
    var(--sal);
  box-sizing: border-box;
}

/* ── Sidebar toggle: keep clear of notch in landscape tablet ───────── */
@media (max-width: 1180px) {
  #sidebar-toggle {
    top: calc(50% + var(--sat) * 0.5);
  }
}

/* Neutralise legacy mobile drawer rule (top:44px) — panel uses safe-area offsets */
@media (max-width: 640px) {
  .mob-nav-drawer {
    top: auto !important;
    position: absolute !important;
  }
}

@media (display-mode: standalone) {
  #content-area {
    min-height: calc(100dvh - var(--app-header-total));
  }
}