/* ═══════════════════════════════════════════════════════════════════════
   Mobile Shell — unified page rhythm for all main pages.
   Loaded last (after ios-native-ux.css). Single source of truth for:
     • hero full-bleed (edge-to-edge dark gradient)
     • 16px content gutters from #content-area (no duplicate side padding)
     • Safari in-browser bottom toolbar clearance
     • Topbar page subtitle hidden on pages with their own hero
   Usability only — palette and branding unchanged.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Design tokens ────────────────────────────────────────────────────── */
:root {
  --mobile-gutter:   max(16px, env(safe-area-inset-left,  0px));
  --mobile-gutter-r: max(16px, env(safe-area-inset-right, 0px));
  --mobile-section-gap: 16px;
  --mobile-card-gap:    12px;
  --mobile-page-pad-b:  24px;
}

/* ════════════════════════════════════════════════════════════════════════
   1. SAFARI BOTTOM TOOLBAR CLEARANCE
   In browser mode the toolbar is ~50px + status bar; env(sab) is 0.
   In standalone (PWA/Add to Home) env(sab) covers the Home Indicator.
   ════════════════════════════════════════════════════════════════════════ */

/* Browser tab on phone/tablet — extra 60px clears Safari bottom bar */
@media (max-width: 1180px) and (display-mode: browser) {
  #content-area {
    padding-bottom: max(60px, calc(env(safe-area-inset-bottom, 0px) + 60px)) !important;
  }
}

/* PWA/standalone — Home Indicator only */
@media (max-width: 1180px) and (display-mode: standalone) {
  #content-area {
    padding-bottom: max(20px, env(safe-area-inset-bottom, 0px)) !important;
  }
}

/* ════════════════════════════════════════════════════════════════════════
   2. TOPBAR PAGE SUBTITLE — hide on pages that have their own hero
   The .app-topbar__page-title subtitle (e.g. "Dashboard" under clinic name)
   is redundant when the page hero already shows the page name.
   ════════════════════════════════════════════════════════════════════════ */

@media (max-width: 1180px) {
  body:has(
    #page-dashboard.active,
    #page-reg.active,
    #page-cicir.active,
    #page-laporan.active,
    #page-disp.active,
    #page-week.active,
    #page-stok.active,
    #page-users.active,
    #page-reports.active,
    #page-spubmon.active,
    #page-actpatmon.active,
    #page-newpat.active,
    #page-registry.active
  ) .app-topbar__page-title {
    visibility: hidden;
    height: 0 !important;
    margin: 0 !important;
    overflow: hidden;
    pointer-events: none;
  }
}

/* ════════════════════════════════════════════════════════════════════════
   3. HERO FULL-BLEED  (all viewport widths)
   overflow-x:clip on #content-area blocks negative-margin bleed, so we
   remove horizontal padding from the scroll shell and inset text via
   .hero-inner / .main instead. Heroes span 100% with no side gaps.
   ════════════════════════════════════════════════════════════════════════ */

/* Zero horizontal padding on scroll shell — heroes fill edge-to-edge */
#content-area {
  padding-left:  0 !important;
  padding-right: 0 !important;
}

/* Partial mount points (lazy-loaded pages) */
[id^="kkpms-partial-"] {
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

/* All purple heroes — full width, no negative-margin hack */
#content-area .hero,
#page-dashboard .dash-hero,
#page-reports .rpt-hero {
  margin-left:  0 !important;
  margin-right: 0 !important;
  width:        100% !important;
  max-width:    none !important;
  box-sizing:   border-box !important;
}

#content-area .hero,
#page-dashboard .dash-hero {
  overflow-x: hidden !important;
}

#page-reports .rpt-hero {
  overflow: visible !important;
}

/* Dashboard: hero must not be constrained by dash-wrap max-width */
#page-dashboard .dash-wrap {
  max-width:  none !important;
  width:      100% !important;
  margin-left:  0 !important;
  margin-right: 0 !important;
}

/* Re-apply horizontal inset on hero text rows */
#content-area .hero-inner {
  padding-left:  var(--page-pad-x)   !important;
  padding-right: var(--page-pad-x-r) !important;
}

#page-dashboard .dash-hero {
  padding-left:  var(--page-pad-x)   !important;
  padding-right: var(--page-pad-x-r) !important;
  box-sizing: border-box !important;
}

#page-reports .rpt-hero {
  padding-left:  var(--page-pad-x)   !important;
  padding-right: var(--page-pad-x-r) !important;
  box-sizing: border-box !important;
}

#page-reports .rpt-hero-inner {
  padding-left:  0 !important;
  padding-right: 0 !important;
}

/* Stats row inside hero: horizontal scroll, inset-aware */
#content-area .prm-stats-row {
  padding-left:  var(--page-pad-x)   !important;
  padding-right: var(--page-pad-x-r) !important;
}

/* KPI / vol strips inside week/stok/disp heroes */
#page-week .wk-kpi-strip,
#page-week .wk-vol-bar,
#page-stok .wk-kpi-strip,
#page-stok .wk-vol-bar,
#page-disp .hero-stats {
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

/* Dashboard content below hero — inset + optional max-width centering */
#page-dashboard .dash-kpi-row,
#page-dashboard .dash-grid {
  padding-left:  var(--page-pad-x)   !important;
  padding-right: var(--page-pad-x-r) !important;
  max-width:     1400px !important;
  margin-left:   auto !important;
  margin-right:  auto !important;
  box-sizing:    border-box !important;
}

/* Body content gutter (replaces removed #content-area padding) */
@media (max-width: 1180px) {

  #content-area .page > .main,
  #content-area .page.active > .main,
  [id^="kkpms-partial-"] .page > .main {
    padding-left:  var(--page-pad-x)   !important;
    padding-right: var(--page-pad-x-r) !important;
  }

  #page-dashboard .dash-hero {
    padding-top:    16px !important;
    padding-bottom: 16px !important;
  }

  .main,
  .dash-wrap {
    padding-left:  0 !important;
    padding-right: 0 !important;
  }
}

/* ════════════════════════════════════════════════════════════════════════
   4. DASHBOARD — mobile card layout
   ════════════════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {

  /* Hero: stack actions vertically, full-width date pill + refresh */
  #page-dashboard .dash-hero {
    gap: 14px !important;
    margin-bottom: 16px !important;
  }

  #page-dashboard .dash-hero-actions {
    flex-direction: column !important;
    align-items:    stretch  !important;
    gap:            8px      !important;
    width:          100%     !important;
  }

  #page-dashboard .dash-date-pill {
    text-align: center !important;
    width:      100%   !important;
  }

  #page-dashboard .dash-refresh-btn {
    justify-content: center !important;
    width:           100%   !important;
    padding:         10px 16px !important;
  }

  /* KPI grid: comfortable 2-col with proper gap */
  #page-dashboard .dash-kpi-row {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap:           var(--mobile-card-gap)    !important;
    margin-bottom: var(--mobile-section-gap) !important;
  }

  /* Compact vertical KPI card: icon above value, label below */
  #page-dashboard .dash-kpi {
    flex-direction: column !important;
    align-items:    flex-start !important;
    gap:     6px !important;
    padding: 14px 12px !important;
  }

  #page-dashboard .dash-kpi-icon {
    width:    32px !important;
    height:   32px !important;
    min-width: 32px !important;
    font-size: 15px !important;
    border-radius: 8px !important;
  }

  #page-dashboard .dash-kpi-val {
    font-size:      22px !important;
    letter-spacing: -0.4px !important;
    line-height:    1.15 !important;
    margin-top:     2px !important;
  }

  #page-dashboard .dash-kpi-lbl {
    font-size:   12px !important;
    line-height: 1.3  !important;
    white-space: normal !important;
  }

  #page-dashboard .dash-kpi-cmp {
    font-size: 11px !important;
    margin-top: 1px !important;
  }

  /* Panel: legible title + proper padding */
  #page-dashboard .dash-panel {
    padding: 16px !important;
  }

  #page-dashboard .dash-panel-title {
    font-size:   14px !important;
    line-height: 1.3  !important;
  }

  /* Grid: single column, consistent gap */
  #page-dashboard .dash-grid {
    grid-template-columns: 1fr !important;
    gap: var(--mobile-card-gap) !important;
  }
}

/* Very narrow (iPhone SE 1st gen, 320px) */
@media (max-width: 389px) {
  #page-dashboard .dash-kpi-row {
    grid-template-columns: 1fr !important;
  }
}

/* ════════════════════════════════════════════════════════════════════════
   5. REG / CICIR / LAPORAN (shared hero + .main)
   ════════════════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {

  /* Hero inner vertical padding; horizontal handled by §3 */
  #page-reg    .hero-inner,
  #page-cicir  .hero-inner,
  #page-laporan .hero-inner {
    padding-top:    16px !important;
    padding-bottom: 16px !important;
  }

  /* Sticky controls: fill container, consistent gap */
  #reg-ctrl-sticky,
  .reg-ctrl-sticky {
    gap: var(--mobile-card-gap) !important;
  }

  /* Remove legacy 80px bottom from mobile.css — ios-safe-area already handles it */
  #page-reg    .main,
  #page-cicir  .main,
  #page-laporan .main {
    padding-bottom: max(var(--mobile-page-pad-b), env(safe-area-inset-bottom, 0px)) !important;
  }
}

/* ════════════════════════════════════════════════════════════════════════
   6. STOK
   ════════════════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {
  #page-stok .stok-action-bar {
    gap: var(--mobile-card-gap) !important;
  }

  #page-stok .main {
    padding-bottom: max(var(--mobile-page-pad-b), env(safe-area-inset-bottom, 0px)) !important;
  }
}

/* ════════════════════════════════════════════════════════════════════════
   7. DISP / WEEK (sticky header + horizontal-scroll tables)
   ════════════════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {
  #page-disp  .hero-inner,
  #page-week  .hero-inner {
    padding-top:    16px !important;
    padding-bottom: 16px !important;
  }

  #page-disp  .main,
  #page-week  .main {
    padding-bottom: max(var(--mobile-page-pad-b), env(safe-area-inset-bottom, 0px)) !important;
  }
}

/* ════════════════════════════════════════════════════════════════════════
   8. REPORTS / ANALYTICS
   ════════════════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {
  #page-reports .rpt-hero {
    gap: 14px !important;
    padding-top:    16px !important;
    padding-bottom: 16px !important;
  }

  #page-reports .rpt-hero-controls {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 10px !important;
    align-items: end !important;
    width: 100% !important;
  }

  #page-reports .rpt-btn-generate {
    grid-column: 1 / -1 !important;
  }

  #page-reports .rpt-hero-controls .btn,
  #page-reports .rpt-hero-controls button {
    justify-content: center !important;
    width: 100% !important;
    min-height: 42px !important;
  }

  #page-reports .rpt-kpi-grid,
  #page-reports .rpt-kpi-row {
    padding-left:  0 !important;
    padding-right: 0 !important;
    gap: var(--mobile-card-gap) !important;
  }

  #page-reports .rpt-kpi-card {
    padding: 14px 12px !important;
  }

  #page-reports .rpt-wrap,
  #page-reports .rpt-body {
    padding-bottom: max(var(--mobile-page-pad-b), env(safe-area-inset-bottom, 0px)) !important;
  }
}

/* ════════════════════════════════════════════════════════════════════════
   9. USERS
   ════════════════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {
  #page-users .hero-inner {
    padding-top:    16px !important;
    padding-bottom: 16px !important;
  }

  #page-users .main {
    padding-bottom: max(var(--mobile-page-pad-b), env(safe-area-inset-bottom, 0px)) !important;
  }
}

/* ════════════════════════════════════════════════════════════════════════
   10. PATIENT DETAIL
   Bottom padding only; layout grid already 1-col @1023 from responsive-system
   ════════════════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {
  #page-patient-detail .pd-col-right,
  #page-patient-detail .pd-col-left {
    padding-bottom: max(var(--mobile-page-pad-b), env(safe-area-inset-bottom, 0px)) !important;
  }
}

/* ════════════════════════════════════════════════════════════════════════
   11. MONITORING PAGES (SPUB / Active Patient)
   Toolbar/filter row wrapping + consistent gaps
   ════════════════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {
  .actpatmon-toolbar,
  .actpatmon-filter-row,
  .spubmon-toolbar {
    flex-wrap: wrap !important;
    gap: var(--mobile-card-gap) !important;
    padding-left:  0 !important;
    padding-right: 0 !important;
  }

  .actpatmon-kpi-row {
    gap: var(--mobile-card-gap) !important;
    padding-left:  0 !important;
    padding-right: 0 !important;
  }
}

/* ════════════════════════════════════════════════════════════════════════
   12. VISUAL CONTINUITY SYSTEM
   Converts stacked-box fragmentation → one cohesive layered interface.

   Design pattern (iOS native app layer model):
     ① App surface (#content-area) — neutral page bg
         ↓
     ② Hero (dark gradient, rounded bottom, z:2)
         ↓  24px overlap
     ③ Content surface (.main / .dash-wrap, light, rounded top, z:1)
         ↓
     ④ Cards (.pcard / .dash-kpi — white, light elevation)

   Result: page reads top-to-bottom with continuous depth, no hard jumps.
   ════════════════════════════════════════════════════════════════════════ */

/* ── ① App surface: consistent neutral base ─────────────────────────── */
@media (max-width: 1180px) {
  #content-area {
    background: var(--bg, #f0f2f8) !important;
  }
}

/* ── ② Hero: soft rounded bottom, elevated above content ────────────── */
@media (max-width: 1180px) {

  /* All standard page heroes (app only) */
  #content-area .hero {
    border-radius: 0 0 24px 24px !important;
    overflow: hidden !important;
    position: relative !important;
    z-index: 2 !important;
    margin-bottom: 0 !important;
    padding-bottom: 4px !important;
  }

  /* Dashboard hero */
  #page-dashboard .dash-hero {
    border-radius: 0 0 24px 24px !important;
    overflow: hidden !important;
    position: relative !important;
    z-index: 2 !important;
    /* Override the 16px margin-bottom from section 4 */
    margin-bottom: 0 !important;
    padding-bottom: 4px !important;
  }

  /* Stats row: breathing room at hero bottom so cards sit away from curved edge */
  .prm-stats-row {
    padding-bottom: 28px !important;
  }

  /* Hero divider bar: replaced visually by rounded corners — remove to reduce clutter */
  .prm-hero-bar,
  #page-laporan .prm-hero-bar,
  #page-users .u-hero-bar {
    display: none !important;
  }
}

/* ── ③ Content surface: slides under hero, rounded top ──────────────── */
@media (max-width: 1180px) {

  /* All standard pages: content surface tucks 24px under the hero's rounded edge.
     padding-top: 40px = 24px hidden + 16px visible gap between hero and first control */
  #page-reg    .main,
  #page-cicir  .main,
  #page-disp   .main,
  #page-week   .main,
  #page-users  .main {
    position: relative !important;
    z-index: 1 !important;
    margin-top: -24px !important;
    padding-top: 40px !important;
    padding-left:  0 !important;
    padding-right: 0 !important;
    border-radius: 24px 24px 0 0 !important;
    background: var(--bg, #f0f2f8) !important;
  }

  /* Stok + Laporan: tall heroes — no tuck-under */
  #page-stok .main,
  #page-laporan .main.lap-main {
    position: relative !important;
    z-index: 1 !important;
    margin-top: 0 !important;
    padding-top: var(--mobile-section-gap, 16px) !important;
    padding-left:  0 !important;
    padding-right: 0 !important;
    border-radius: 0 !important;
    background: var(--bg, #f0f2f8) !important;
  }

  /* Dashboard wrap: layered under hero; KPI row sits on the light surface */
  #page-dashboard .dash-wrap {
    position: relative !important;
    z-index: 1 !important;
    margin-top: -24px !important;
    padding-top: 52px !important;
    border-radius: 24px 24px 0 0 !important;
    background: var(--bg, #f0f2f8) !important;
  }

  #page-dashboard .dash-kpi-row {
    margin-top: 0 !important;
    position: relative !important;
    z-index: 1 !important;
  }
}

/* ── ④ Cards: white, lightly elevated from the content surface ───────── */
@media (max-width: 1180px) {

  /* Unified card shadow — soft lift, not heavy popup */
  #page-reg  .pcard,
  #page-cicir .pcard {
    box-shadow: 0 1px 2px rgba(26, 9, 56, 0.05),
                0 3px 10px rgba(26, 9, 56, 0.06) !important;
    border: 1px solid rgba(26, 9, 56, 0.06) !important;
    border-radius: 16px !important;
  }

  /* Dashboard KPI cards */
  #page-dashboard .dash-kpi {
    box-shadow: 0 1px 2px rgba(26, 9, 56, 0.04),
                0 3px 10px rgba(26, 9, 56, 0.05) !important;
    border: 1px solid rgba(26, 9, 56, 0.06) !important;
  }

  /* Dashboard panels */
  #page-dashboard .dash-panel {
    box-shadow: 0 1px 2px rgba(26, 9, 56, 0.04),
                0 3px 10px rgba(26, 9, 56, 0.05) !important;
    border: 1px solid rgba(26, 9, 56, 0.06) !important;
  }
}

/* ── Search & Filter: integrated into page, not a floating popup ─────── */
@media (max-width: 768px) {

  /* Replace floating white card with flat page-surface section */
  #page-reg #reg-ctrl-sticky {
    background:    var(--bg, #f0f2f8) !important;
    border:        none !important;
    border-radius: 0    !important;
    box-shadow:    none !important;
    /* Subtle separator between controls and scrolling patient list */
    border-bottom: 1px solid rgba(26, 9, 56, 0.08) !important;
    padding:       0 0 12px !important;
    margin-bottom: 8px !important;
    /* Stick right at top of scroll viewport (below topbar) */
    top: 0 !important;
  }

  /* Remove redundant inner border-top on pills row (container has separator now) */
  #page-reg .pills {
    border-top:  none !important;
    padding-top: 0    !important;
    margin-top:  10px !important;
  }

  /* Cicir ctrl: same flat treatment */
  #page-cicir .ctrl {
    background:    var(--bg, #f0f2f8) !important;
    border:        none !important;
    border-radius: 0    !important;
    box-shadow:    none !important;
    border-bottom: 1px solid rgba(26, 9, 56, 0.08) !important;
    padding:       0 0 12px !important;
    margin-bottom: 12px !important;
  }
}

/* ── Stat cards: compact & equal-sized inside hero ───────────────────── */
@media (max-width: 640px) {
  .prm-sc {
    min-width: 80px !important;
    padding: 12px 10px 14px !important;
    border-radius: 14px !important;
  }

  /* page-reg / page-cicir / page-laporan use grid — no fixed min-width */
  #page-reg .prm-sc,
  #page-cicir .prm-sc,
  #page-laporan .prm-sc {
    min-width: 0 !important;
    padding: 10px 6px 11px !important;
    border-radius: var(--m-r) !important;
  }

  .prm-sc-icon {
    width:  32px !important;
    height: 32px !important;
    border-radius: 9px !important;
    margin-bottom: 8px !important;
  }

  .prm-sc-v {
    font-size: 20px !important;
    letter-spacing: -0.5px !important;
    margin-bottom: 4px !important;
  }

  .prm-sc-l {
    font-size: 9.5px !important;
    letter-spacing: 0.5px !important;
  }
}

/* ── Spacing rhythm: consistent vertical gaps between sections ───────── */
@media (max-width: 768px) {

  /* Patient grid */
  #page-reg  .pgrid,
  #page-cicir .pgrid {
    gap: var(--mobile-card-gap) !important;
  }
}