/* ═══════════════════════════════════════════════════════════════════════
   KKPMS — Mobile Native UI  ·  Complete Redesign  ·  phones only ≤768px
   "Treat mobile as its own product."
   
   This file owns ALL phone layout decisions.
   It runs last in the stack and overrides every prior rule for ≤768px.
   Desktop (≥769px) and tablet rules are untouched.
   ═══════════════════════════════════════════════════════════════════════ */

/* ══════════════════════════════════════════════════════════════════════
   §0 · DESIGN TOKENS  (phone-scoped CSS variables)
   ══════════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  :root {
    /* ── surfaces ─────────────────────────────────────────────────── */
    --m-bg:        #f2f2f7;
    --m-surface:   #ffffff;
    --m-surface2:  #f9f9fb;
    --m-surface3:  #f0f0f5;

    /* ── brand / hero ─────────────────────────────────────────────── */
    --m-hero-top:  #0d0720;
    --m-hero-bot:  #1a0b3d;
    --m-accent:    #2dd4bf;
    --m-accent2:   rgba(45, 212, 191, 0.18);
    --m-accent-ink: rgba(45, 212, 191, 0.9);

    /* ── ink (text) ───────────────────────────────────────────────── */
    --m-ink:    #1c1c1e;
    --m-ink2:   #3c3c43;
    --m-ink3:   rgba(60, 60, 67, 0.60);
    --m-ink4:   rgba(60, 60, 67, 0.36);
    --m-ink-on-hero: rgba(255,255,255, 0.55);

    /* ── borders / separators ─────────────────────────────────────── */
    --m-border:    rgba(60, 60, 67, 0.12);
    --m-sep:       rgba(60, 60, 67, 0.09);
    --m-sep-hard:  rgba(60, 60, 67, 0.18);

    /* ── radius ───────────────────────────────────────────────────── */
    --m-r-xs:  8px;
    --m-r-sm:  10px;
    --m-r:     14px;
    --m-r-lg:  18px;
    --m-r-xl:  22px;

    /* ── spacing ──────────────────────────────────────────────────── */
    --m-gutter:    max(16px, env(safe-area-inset-left, 0px));
    --m-gutter-r:  max(16px, env(safe-area-inset-right, 0px));
    --m-xs:   6px;
    --m-sm:  10px;
    --m-md:  16px;
    --m-lg:  22px;
    --m-xl:  28px;

    /* ── safe areas ───────────────────────────────────────────────── */
    --m-sai-top:    env(safe-area-inset-top,    0px);
    --m-sai-bot:    env(safe-area-inset-bottom, 0px);
    --m-topbar-h:   44px;
    --m-header:     calc(var(--m-topbar-h) + var(--m-sai-top));

    /* ── elevation / shadow ───────────────────────────────────────── */
    --m-sh0:   none;
    --m-sh1:   0 1px 0 rgba(0,0,0,0.05);
    --m-sh2:   0 1px 3px rgba(0,0,0,0.06), 0 1px 0 rgba(0,0,0,0.04);
    --m-sh3:   0 4px 16px rgba(0,0,0,0.10);

    /* ── type scale ───────────────────────────────────────────────── */
    --m-t-stat:    30px;
    --m-t-stat-sm: 22px;
    --m-t-hero:    22px;
    --m-t-h1:      19px;
    --m-t-h2:      16px;
    --m-t-body:    15px;
    --m-t-sub:     13px;
    --m-t-cap:     11px;
    --m-t-badge:   10px;

    /* ── touch targets ────────────────────────────────────────────── */
    --m-touch:  44px;
  }
}


/* ══════════════════════════════════════════════════════════════════════
   §1 · GLOBAL RESETS  (phone only)
   ══════════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {

  html, body {
    font-size: var(--m-t-body) !important;
    line-height: 1.45 !important;
    -webkit-text-size-adjust: 100% !important;
    overflow-x: hidden !important;
  }

  /* ── page background ──────────────────────────────────────────── */
  body:not(.login-active),
  #app-shell,
  #content-area > .page,
  #page-dashboard,
  #page-reg,
  #page-cicir,
  #page-disp,
  #page-week,
  #page-laporan,
  #page-stok,
  #page-users,
  #page-reports,
  #page-actpatmon,
  #page-spubmon {
    background: var(--m-bg) !important;
  }

  /* ── content area ─────────────────────────────────────────────── */
  #content-area {
    margin-top: var(--m-header) !important;
    padding: 0 !important;
    background: var(--m-bg) !important;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch !important;
  }

  /* ── inner main / dash-wrap wrappers ──────────────────────────── */
  .main,
  .dash-wrap {
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    border-radius: 0 !important;
    max-width: 100% !important;
    box-shadow: none !important;
    overflow: visible !important;
  }

  /* Safari bottom clearance */
  @media (display-mode: browser) {
    #content-area {
      padding-bottom: calc(var(--m-sai-bot) + 56px) !important;
    }
  }
  @media (display-mode: standalone) {
    #content-area {
      padding-bottom: max(20px, var(--m-sai-bot)) !important;
    }
  }
}


/* ══════════════════════════════════════════════════════════════════════
   §2 · TOPBAR — frosted glass, 44px, safe-area aware
   ══════════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {

  #topbar.app-topbar {
    position: fixed !important;
    inset: 0 0 auto 0 !important;
    z-index: 3000 !important;
    background: rgba(255,255,255,0.88) !important;
    -webkit-backdrop-filter: blur(20px) saturate(180%) !important;
    backdrop-filter:         blur(20px) saturate(180%) !important;
    border-bottom: 0.5px solid var(--m-border) !important;
    box-shadow: none !important;
  }

  .app-topbar__safe {
    height: var(--m-sai-top) !important;
    min-height: var(--m-sai-top) !important;
    background: transparent !important;
  }

  .app-topbar__bar {
    height: var(--m-topbar-h) !important;
    min-height: var(--m-topbar-h) !important;
    max-height: var(--m-topbar-h) !important;
    padding: 0 var(--m-gutter-r) 0 var(--m-gutter) !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
  }

  /* logo */
  .app-topbar__logo {
    width: 24px !important;
    height: 24px !important;
    border-radius: 6px !important;
    flex-shrink: 0 !important;
  }

  /* clinic name */
  .app-topbar__clinic-static,
  .app-topbar__clinic-select {
    font-size: 14px !important;
    font-weight: 600 !important;
    color: var(--m-ink) !important;
    max-width: min(44vw, 170px) !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  .app-topbar__center {
    flex: 1 !important;
    min-width: 0 !important;
    display: flex !important;
    align-items: center !important;
    gap: 4px !important;
    overflow: hidden !important;
  }

  /* page title — hidden (hero shows it) */
  .app-topbar__page-title {
    display: none !important;
  }

  /* icon buttons */
  .app-topbar__icon-btn,
  .app-topbar__menu-btn,
  #mob-menu-btn,
  #ln-bell-btn {
    width: 40px !important;
    height: 40px !important;
    min-width: 40px !important;
    min-height: 40px !important;
    flex-shrink: 0 !important;
    border-radius: 10px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
}


/* ══════════════════════════════════════════════════════════════════════
   §3 · SIDEBAR  — full-height drawer, safe-area offset
   ══════════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {

  #sidebar {
    top: var(--m-header) !important;
    height: calc(100dvh - var(--m-header)) !important;
    max-height: calc(100dvh - var(--m-header)) !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }

  #sidebar-backdrop {
    top: var(--m-header) !important;
  }

  /* sidebar brand */
  .side-brand {
    padding: var(--m-sm) var(--m-md) !important;
  }

  /* nav items — bigger touch targets */
  .ntab {
    min-height: 46px !important;
    padding: 0 var(--m-md) !important;
    font-size: var(--m-t-sub) !important;
  }

  /* section labels */
  .nav-section-label {
    font-size: var(--m-t-cap) !important;
    letter-spacing: 0.07em !important;
    padding: var(--m-sm) var(--m-md) 4px !important;
  }
}


/* ══════════════════════════════════════════════════════════════════════
   §4 · DASHBOARD  — full-product redesign
   ══════════════════════════════════════════════════════════════════════ */

/* ── 4a. Full-bleed layout ─────────────────────────────────────────── */
@media (max-width: 768px) {
  body:has(#page-dashboard.active) #content-area {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  #page-dashboard .dash-wrap {
    display: flex !important;
    flex-direction: column !important;
    gap: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow-x: hidden !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
}

/* ── 4b. Hero — edge-to-edge, no radius ───────────────────────────── */
@media (max-width: 768px) {
  #page-dashboard .dash-hero {
    width: 100% !important;
    box-sizing: border-box !important;
    padding: var(--m-lg) var(--m-gutter) var(--m-xl) !important;
    margin: 0 !important;
    border-radius: 0 !important;
    background:
      radial-gradient(ellipse 70% 90% at 100% -5%,  rgba(99,102,241,.22) 0%, transparent 60%),
      radial-gradient(ellipse 50% 60% at -5%  110%, rgba(45,212,191,.14) 0%, transparent 55%),
      linear-gradient(155deg, var(--m-hero-top) 0%, var(--m-hero-bot) 55%, #12082e 100%) !important;
    gap: var(--m-sm) !important;
    flex-wrap: nowrap !important;
    flex-direction: column !important;
    display: flex !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    border-bottom: none !important;
    margin-bottom: 0 !important;
  }

  /* ── eyebrow pill ─────────────────────────────────────────────── */
  #page-dashboard .dash-eyebrow {
    font-size: var(--m-t-badge) !important;
    letter-spacing: 0.08em !important;
    color: var(--m-accent-ink) !important;
    margin-bottom: 5px !important;
    text-transform: uppercase !important;
    font-weight: 700 !important;
  }

  /* ── title ────────────────────────────────────────────────────── */
  #page-dashboard .dash-title {
    font-size: var(--m-t-hero) !important;
    font-weight: 800 !important;
    letter-spacing: -0.4px !important;
    line-height: 1.1 !important;
    color: #fff !important;
    margin: 0 0 3px !important;
  }

  /* ── subtitle ─────────────────────────────────────────────────── */
  #page-dashboard .dash-subtitle {
    font-size: 13px !important;
    color: var(--m-ink-on-hero) !important;
    line-height: 1.35 !important;
    margin: 0 !important;
  }

  /* ── hero-text column ─────────────────────────────────────────── */
  #page-dashboard .dash-hero-text {
    flex: 1 1 auto !important;
    min-width: 0 !important;
  }

  /* ── hero actions row ─────────────────────────────────────────── */
  #page-dashboard .dash-hero-actions {
    width: 100% !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    align-items: center !important;
    gap: 8px !important;
    margin-top: 4px !important;
  }

  /* date pill */
  #page-dashboard .dash-date-pill {
    min-width: 0 !important;
    font-size: 12px !important;
    padding: 9px 12px !important;
    border-radius: 10px !important;
    background: rgba(255,255,255,0.08) !important;
    border: 1px solid rgba(255,255,255,0.12) !important;
    color: rgba(255,255,255,0.8) !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  /* refresh button */
  #page-dashboard .dash-refresh-btn {
    width: auto !important;
    max-width: none !important;
    flex: none !important;
    height: var(--m-touch) !important;
    min-height: var(--m-touch) !important;
    padding: 0 16px !important;
    font-size: 12px !important;
    border-radius: 10px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 5px !important;
    border: 1px solid rgba(45,212,191,0.4) !important;
    background: rgba(45,212,191,0.14) !important;
    color: var(--m-accent) !important;
    font-weight: 700 !important;
    white-space: nowrap !important;
    box-sizing: border-box !important;
  }
}

/* ── 4c. KPI — iOS-style grouped inset surface ────────────────────── */
@media (max-width: 768px) {

  #page-dashboard .dash-kpi-row {
    /* Sit fully on the page surface — no negative pull into the hero */
    margin: var(--m-md) 0 var(--m-md) !important;
    padding: 0 var(--m-gutter) !important;
    width: 100% !important;
    max-width: 100% !important;
    position: relative !important;
    z-index: 1 !important;
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
    background: transparent !important;
    border-radius: 0 !important;
    overflow: visible !important;
    box-sizing: border-box !important;
    box-shadow: none !important;
  }

  #page-dashboard .dash-kpi {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 6px !important;
    padding: 14px 12px !important;
    background: var(--m-surface) !important;
    border: 0.5px solid var(--m-border) !important;
    border-radius: var(--m-r) !important;
    box-shadow: var(--m-sh1) !important;
    min-width: 0 !important;
    min-height: 0 !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
  }

  /* no grouped-grid dividers — each KPI is its own card */
  #page-dashboard .dash-kpi:nth-child(2n+1):not(:last-child),
  #page-dashboard .dash-kpi:nth-child(n+3),
  #page-dashboard .dash-kpi:nth-child(2n):nth-child(n+3) {
    border-right: none !important;
    border-top: none !important;
  }

  /* icon badge */
  #page-dashboard .dash-kpi-icon {
    width: 34px !important;
    height: 34px !important;
    min-width: 34px !important;
    font-size: 15px !important;
    border-radius: 9px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
    margin-bottom: 0 !important;
  }

  /* body: value + label stack */
  #page-dashboard .dash-kpi-body {
    display: flex !important;
    flex-direction: column !important;
    gap: 2px !important;
    min-width: 0 !important;
    width: 100% !important;
    flex: 1 !important;
  }

  /* KPI number */
  #page-dashboard .dash-kpi-val {
    font-size: var(--m-t-stat-sm) !important;
    font-weight: 800 !important;
    line-height: 1.1 !important;
    letter-spacing: -0.5px !important;
    color: var(--m-ink) !important;
    margin: 0 !important;
    max-width: 100% !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  /* label */
  #page-dashboard .dash-kpi-lbl {
    font-size: 11px !important;
    font-weight: 500 !important;
    color: var(--m-ink3) !important;
    line-height: 1.3 !important;
    margin: 0 !important;
    max-width: 100% !important;
    white-space: normal !important;
    overflow-wrap: break-word !important;
    word-break: normal !important;
  }

  /* comparison text */
  #page-dashboard .dash-kpi-cmp {
    font-size: 10px !important;
    color: var(--m-ink4) !important;
    line-height: 1.2 !important;
    margin: 0 !important;
  }
}

/* ── 4d. Quick Actions grid ───────────────────────────────────────── */
@media (max-width: 768px) {

  #page-dashboard .dash-quick-grid {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 6px !important;
  }

  #page-dashboard .dash-quick-btn {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 5px !important;
    padding: 10px 6px !important;
    border-radius: var(--m-r) !important;
    background: var(--m-surface) !important;
    border: 0.5px solid var(--m-border) !important;
    box-shadow: var(--m-sh1) !important;
    font-size: 10px !important;
    font-weight: 600 !important;
    color: var(--m-ink2) !important;
    min-height: 70px !important;
    text-align: center !important;
    word-break: break-word !important;
    line-height: 1.2 !important;
  }

  #page-dashboard .dash-quick-btn i {
    font-size: 22px !important;
    line-height: 1 !important;
  }
}

/* ── 4e. Panels — inset cards section ────────────────────────────── */
@media (max-width: 768px) {

  #page-dashboard .dash-grid {
    display: flex !important;
    flex-direction: column !important;
    gap: var(--m-sm) !important;
    padding: 0 var(--m-gutter) var(--m-lg) !important;
  }

  #page-dashboard .dash-panel {
    background: var(--m-surface) !important;
    border-radius: var(--m-r-lg) !important;
    border: 0.5px solid var(--m-border) !important;
    box-shadow: var(--m-sh1) !important;
    padding: var(--m-md) !important;
    overflow: hidden !important;
    grid-column: span 1 !important;
  }

  #page-dashboard .dash-panel-head {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    margin-bottom: 12px !important;
    gap: var(--m-xs) !important;
  }

  #page-dashboard .dash-panel-title {
    font-size: var(--m-t-sub) !important;
    font-weight: 700 !important;
    color: var(--m-ink) !important;
    line-height: 1.25 !important;
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
  }

  #page-dashboard .dash-panel-title i {
    font-size: 14px !important;
    opacity: 0.7 !important;
  }

  #page-dashboard .dash-panel-link {
    font-size: 11px !important;
    font-weight: 600 !important;
    color: var(--m-accent) !important;
    white-space: nowrap !important;
    padding: 0 !important;
    background: none !important;
    border: none !important;
    flex-shrink: 0 !important;
  }

  /* action-items — 2-col grid: icon | text+button (avoids flex squeeze) */
  #page-dashboard .dash-action-item {
    display: grid !important;
    grid-template-columns: 28px minmax(0, 1fr) !important;
    gap: 8px 10px !important;
    align-items: start !important;
    padding: 10px 0 !important;
    border-bottom: 0.5px solid var(--m-sep) !important;
  }
  #page-dashboard .dash-action-item:last-child {
    border-bottom: none !important;
    padding-bottom: 0 !important;
  }
  #page-dashboard .dash-action-icon {
    grid-row: 1 / span 2 !important;
    width: 28px !important;
    height: 28px !important;
    min-width: 28px !important;
    font-size: 12px !important;
    border-radius: 8px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
  #page-dashboard .dash-action-text {
    grid-column: 2 !important;
    flex: unset !important;
    min-width: 0 !important;
    width: 100% !important;
    overflow-wrap: break-word !important;
    word-break: normal !important;
  }
  #page-dashboard .dash-action-text strong,
  #page-dashboard .dash-action-text span {
    overflow-wrap: break-word !important;
    word-break: normal !important;
  }
  #page-dashboard .dash-action-btn {
    grid-column: 2 !important;
    width: 100% !important;
    margin-top: 0 !important;
    justify-self: stretch !important;
    min-height: var(--m-touch) !important;
    border-radius: var(--m-r-sm) !important;
    font-size: var(--m-t-sub) !important;
    font-weight: 600 !important;
  }
  #page-dashboard .dash-action-list {
    max-height: none !important;
    overflow: visible !important;
  }

  /* attention cards — stack vertically (row + width:100% btn squeezes text) */
  #page-dashboard .dash-attention-card {
    padding: 10px 0 !important;
    border-bottom: 0.5px solid var(--m-sep) !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 8px !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }
  #page-dashboard .dash-attention-card:last-child {
    border-bottom: none !important;
    padding-bottom: 0 !important;
  }
  #page-dashboard .dash-attention-main {
    flex: unset !important;
    width: 100% !important;
    min-width: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 6px !important;
  }
  #page-dashboard .dash-attention-name,
  #page-dashboard .dash-attention-name strong {
    overflow-wrap: break-word !important;
    word-break: normal !important;
    line-height: 1.35 !important;
  }
  #page-dashboard .dash-issue-tag {
    align-self: flex-start !important;
    max-width: 100% !important;
    overflow-wrap: break-word !important;
    word-break: normal !important;
    white-space: normal !important;
  }
  #page-dashboard .dash-attention-btn {
    width: 100% !important;
    max-width: 100% !important;
    flex-shrink: unset !important;
    padding: 10px 14px !important;
    min-height: var(--m-touch) !important;
    font-size: var(--m-t-sub) !important;
    font-weight: 600 !important;
    text-align: center !important;
    border-radius: var(--m-r-sm) !important;
    white-space: normal !important;
    box-sizing: border-box !important;
  }

  /* month stats */
  #page-dashboard .dash-month-grid {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 0 !important;
    background: var(--m-sep) !important;
    border-radius: var(--m-r-sm) !important;
    overflow: hidden !important;
  }
  #page-dashboard .dash-month-stat {
    background: var(--m-surface) !important;
    padding: 12px 8px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    gap: 3px !important;
  }
  #page-dashboard .dash-month-stat:nth-child(n+2) {
    border-left: 1px solid var(--m-sep) !important;
  }
  #page-dashboard .dash-month-stat:nth-child(n+4) {
    border-top: 1px solid var(--m-sep) !important;
  }
  #page-dashboard .dash-month-val {
    font-size: 18px !important;
    font-weight: 800 !important;
    letter-spacing: -0.3px !important;
    color: var(--m-ink) !important;
    line-height: 1 !important;
  }
  #page-dashboard .dash-month-lbl {
    font-size: 9.5px !important;
    color: var(--m-ink3) !important;
    line-height: 1.2 !important;
    font-weight: 500 !important;
  }

  /* donut charts — fixed aspect box so canvas + center label render correctly */
  #page-dashboard .dash-donut-wrap {
    position: relative !important;
    width: min(160px, 72vw) !important;
    max-width: 160px !important;
    aspect-ratio: 1 !important;
    min-height: 132px !important;
    margin: 0 auto var(--m-sm) !important;
  }

  #page-dashboard .dash-donut-wrap canvas {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
  }

  #page-dashboard .dash-donut-center {
    z-index: 2 !important;
    gap: 2px !important;
    padding: 0 10px !important;
    font-size: 16px !important;
    font-weight: 800 !important;
    letter-spacing: -0.3px !important;
  }

  #page-dashboard .dash-donut-center-val {
    font-size: 17px !important;
    line-height: 1 !important;
  }

  #page-dashboard .dash-donut-center-sub {
    font-size: 8px !important;
    line-height: 1.15 !important;
  }

  #page-dashboard .dash-donut-legend {
    gap: 5px 10px !important;
    font-size: 10px !important;
    line-height: 1.35 !important;
  }

  /* SPUB buckets */
  #page-dashboard .dash-spub-buckets {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 0 !important;
    background: var(--m-sep) !important;
    border-radius: var(--m-r-sm) !important;
    overflow: hidden !important;
  }
  #page-dashboard .dash-spub-bucket {
    background: var(--m-surface) !important;
    padding: 14px 8px !important;
    text-align: center !important;
    border-left: 1px solid var(--m-sep) !important;
  }
  #page-dashboard .dash-spub-bucket:first-child {
    border-left: none !important;
  }
  #page-dashboard .dash-spub-bucket-val {
    font-size: 24px !important;
    font-weight: 800 !important;
    letter-spacing: -0.5px !important;
    line-height: 1 !important;
    margin-bottom: 3px !important;
  }
  #page-dashboard .dash-spub-bucket-lbl {
    font-size: 9.5px !important;
    color: var(--m-ink3) !important;
    font-weight: 500 !important;
    line-height: 1.2 !important;
  }

  /* TCA list */
  #page-dashboard .dash-tca-list {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  #page-dashboard .dash-tca-item {
    padding: 10px 0 !important;
    border-bottom: 0.5px solid var(--m-sep) !important;
    font-size: var(--m-t-sub) !important;
    gap: var(--m-xs) !important;
  }
  #page-dashboard .dash-tca-item:last-child {
    border-bottom: none !important;
    padding-bottom: 0 !important;
  }

  /* chart canvas — constrain height */
  #page-dashboard .dash-chart-wrap canvas {
    max-height: 160px !important;
  }

  /* iPhone SE — 1-col KPI */
  @media (max-width: 359px) {
    #page-dashboard .dash-kpi-row {
      grid-template-columns: minmax(0, 1fr) !important;
    }
    #page-dashboard .dash-kpi:nth-child(2n+1) {
      border-right: none !important;
    }
    #page-dashboard .dash-kpi:nth-child(n+2) {
      border-top: 1px solid var(--m-sep) !important;
    }
    #page-dashboard .dash-quick-grid {
      grid-template-columns: repeat(4, 1fr) !important;
    }
  }
}


/* ══════════════════════════════════════════════════════════════════════
   §5 · HERO  (pages: reg, cicir, disp, week, laporan, users, stok)
   ══════════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {

  /* Scoped to app pages — login overlay also uses .hero / .hero-title */
  #content-area .hero {
    margin-left: 0 !important;
    margin-right: 0 !important;
    width: 100% !important;
    max-width: none !important;
    box-sizing: border-box !important;
    border-radius: 0 !important;
    margin-bottom: 0 !important;
    overflow-x: hidden !important;
    overflow-y: visible !important;
  }

  #content-area .hero-inner {
    display: flex !important;
    align-items: flex-start !important;
    justify-content: space-between !important;
    padding: var(--m-md) var(--m-gutter) var(--m-sm) !important;
    gap: var(--m-sm) !important;
  }

  #content-area .hero-title {
    font-size: var(--m-t-hero) !important;
    font-weight: 800 !important;
    letter-spacing: -0.4px !important;
    line-height: 1.1 !important;
    margin-bottom: 2px !important;
    color: #fff !important;
  }

  #content-area .hero-sub,
  #content-area .hero-subtitle {
    font-size: var(--m-t-sub) !important;
    line-height: 1.35 !important;
    color: var(--m-ink-on-hero) !important;
    margin: 0 !important;
  }

  .prm-eyebrow {
    font-size: var(--m-t-badge) !important;
    letter-spacing: 0.08em !important;
    font-weight: 700 !important;
    margin-bottom: 5px !important;
    opacity: 0.85 !important;
  }

  /* date + time badge in hero-right */
  .prm-dt-badge {
    flex-shrink: 0 !important;
    padding: 8px 11px !important;
    border-radius: var(--m-r-sm) !important;
    background: rgba(255,255,255,0.10) !important;
    border: 1px solid rgba(255,255,255,0.12) !important;
    text-align: center !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 2px !important;
  }

  .prm-dt-date {
    font-size: 10px !important;
    opacity: 0.75 !important;
    color: #fff !important;
  }

  .prm-dt-time {
    font-size: 15px !important;
    font-weight: 700 !important;
    letter-spacing: 0.5px !important;
    color: #fff !important;
  }

  /* stat cards strip inside hero */
  .prm-stats-row {
    display: flex !important;
    flex-direction: row !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    scrollbar-width: none !important;
    -webkit-overflow-scrolling: touch !important;
    gap: var(--m-xs) !important;
    padding: var(--m-sm) var(--m-gutter) var(--m-md) !important;
    margin: 0 !important;
    -ms-overflow-style: none !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
  .prm-stats-row::-webkit-scrollbar { display: none !important; }

  #page-reg .prm-stats-row,
  #page-cicir .prm-stats-row,
  #page-laporan .prm-stats-row {
    border-top: 1px solid rgba(255,255,255,.07) !important;
    position: relative !important;
    z-index: 1 !important;
  }

  #page-reg .hero-left,
  #page-cicir .hero-left,
  #page-laporan .hero-left {
    flex: 1 1 auto !important;
    min-width: 0 !important;
  }

  #page-reg .hero-title,
  #page-cicir .hero-title,
  #page-laporan .hero-title {
    white-space: normal !important;
    overflow-wrap: break-word !important;
    line-height: 1.2 !important;
  }

  .prm-sc {
    flex: 0 0 auto !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    min-width: 76px !important;
    padding: 10px 10px 11px !important;
    border-radius: var(--m-r) !important;
    background: rgba(255,255,255,0.11) !important;
    border: 1px solid rgba(255,255,255,0.13) !important;
    box-shadow: none !important;
    gap: 5px !important;
  }

  .prm-sc-icon {
    width: 28px !important;
    height: 28px !important;
    min-width: 28px !important;
    border-radius: 8px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: rgba(255,255,255,0.15) !important;
  }
  .prm-sc-icon svg {
    width: 14px !important;
    height: 14px !important;
    stroke: rgba(255,255,255,0.85) !important;
    fill: none !important;
  }

  .prm-sc-v {
    font-size: 20px !important;
    font-weight: 800 !important;
    letter-spacing: -0.4px !important;
    color: #fff !important;
    line-height: 1 !important;
  }

  .prm-sc-l {
    font-size: 9px !important;
    letter-spacing: 0.4px !important;
    font-weight: 500 !important;
    color: rgba(255,255,255,0.65) !important;
    text-align: center !important;
    line-height: 1.2 !important;
    text-transform: uppercase !important;
  }

  .prm-sc-cmp {
    font-size: 8px !important;
    line-height: 1.2 !important;
    color: rgba(255,255,255,.5) !important;
    text-align: center !important;
    max-width: 100% !important;
    overflow-wrap: break-word !important;
    white-space: normal !important;
  }

  /* hide decorative bars — they eat space */
  .prm-hero-bar,
  .u-hero-bar {
    display: none !important;
  }

  /* Reg + Cicir + Laporan — 5 stats fit viewport, no horizontal scroll */
  #page-reg .prm-stats-row,
  #page-cicir .prm-stats-row,
  #page-laporan .prm-stats-row {
    display: grid !important;
    grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
    gap: 8px 6px !important;
    overflow: visible !important;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: auto !important;
    scroll-padding-inline: unset !important;
    padding: var(--m-sm) var(--m-gutter) var(--m-md) !important;
  }

  #page-reg .prm-sc,
  #page-cicir .prm-sc,
  #page-laporan .prm-sc {
    grid-column: span 2 !important;
    flex: unset !important;
    min-width: 0 !important;
    width: auto !important;
    max-width: none !important;
    padding: 10px 6px 11px !important;
    box-sizing: border-box !important;
  }

  /* Row 1: three equal cards; row 2: two centred */
  #page-reg .prm-sc:nth-child(4),
  #page-cicir .prm-sc:nth-child(4),
  #page-laporan .prm-sc:nth-child(4) {
    grid-column: 2 / span 2 !important;
  }

  #page-reg .prm-sc:nth-child(5),
  #page-cicir .prm-sc:nth-child(5),
  #page-laporan .prm-sc:nth-child(5) {
    grid-column: 4 / span 2 !important;
  }

  #page-reg .prm-sc-icon,
  #page-cicir .prm-sc-icon,
  #page-laporan .prm-sc-icon {
    width: 26px !important;
    height: 26px !important;
    min-width: 26px !important;
    border-radius: 7px !important;
  }

  #page-reg .prm-sc-icon svg,
  #page-cicir .prm-sc-icon svg,
  #page-laporan .prm-sc-icon svg {
    width: 13px !important;
    height: 13px !important;
  }

  #page-reg .prm-sc-v,
  #page-cicir .prm-sc-v,
  #page-laporan .prm-sc-v {
    font-size: 18px !important;
    letter-spacing: -0.35px !important;
    margin-bottom: 2px !important;
  }

  #page-reg .prm-sc-l,
  #page-cicir .prm-sc-l,
  #page-laporan .prm-sc-l {
    font-size: 8px !important;
    letter-spacing: 0.2px !important;
    line-height: 1.15 !important;
    overflow-wrap: break-word !important;
    word-break: break-word !important;
  }

  #page-laporan .prm-sc-cmp {
    font-size: 7px !important;
    line-height: 1.2 !important;
    margin-top: 4px !important;
    padding-top: 0 !important;
    border-top: none !important;
    overflow-wrap: break-word !important;
    word-break: break-word !important;
    text-align: center !important;
    display: block !important;
  }

  /* Laporan content — no hero tuck-under (fixes hidden “Ringkasan” label) */
  #page-laporan .main.lap-main {
    margin-top: 0 !important;
    padding: var(--m-md) var(--m-gutter) var(--m-lg) !important;
    gap: var(--m-md) !important;
    border-radius: 0 !important;
    overflow-x: hidden !important;
    box-sizing: border-box !important;
  }

  #page-laporan .lap-zone-label {
    margin: 0 0 6px !important;
    padding: 0 2px !important;
    position: relative !important;
    z-index: 1 !important;
  }

  #page-laporan .lap-zone--overview {
    gap: var(--m-sm) !important;
  }
}


/* ══════════════════════════════════════════════════════════════════════
   §5b · NEW PATIENT FORM — Jenis Pendaftaran segmented control
   Overrides touch-target label rules that break equal segment layout.
   ══════════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {

  #page-newpat .reg-segment {
    display: flex !important;
    align-items: stretch !important;
    width: 100% !important;
    border-radius: 12px !important;
  }

  #page-newpat .reg-segment-lbl {
    flex: 1 1 0 !important;
    min-width: 0 !important;
    min-height: 0 !important;
    display: flex !important;
    align-items: stretch !important;
    gap: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  #page-newpat .reg-segment-lbl input[type="radio"] {
    position: absolute !important;
    opacity: 0 !important;
    width: 0 !important;
    height: 0 !important;
    min-width: 0 !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    pointer-events: none !important;
  }

  #page-newpat .reg-segment-lbl .reg-seg-inner {
    flex: 1 1 auto !important;
    width: 100% !important;
    min-height: 52px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 4px !important;
    padding: 8px 4px !important;
    font-size: inherit !important;
    line-height: 1.1 !important;
    text-align: center !important;
    box-sizing: border-box !important;
    border-right-width: 1px !important;
  }

  #page-newpat .reg-seg-ico {
    font-size: 15px !important;
    line-height: 1 !important;
  }

  #page-newpat .reg-seg-txt {
    font-size: 10px !important;
    font-weight: 700 !important;
    line-height: 1.15 !important;
    letter-spacing: 0.01em !important;
    white-space: nowrap !important;
  }

  #page-newpat .reg-segment-lbl input:checked ~ .reg-seg-inner {
    color: #fff !important;
  }
}


/* ══════════════════════════════════════════════════════════════════════
   §6 · CONTENT PADDING — pages that follow hero
   ══════════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {

  /* All .main sections get consistent horizontal gutter and top gap */
  .main {
    padding: var(--m-md) var(--m-gutter) 0 !important;
    background: var(--m-bg) !important;
  }

  /* Dashboard has its own padding rules via §4 */
  #page-dashboard .main { padding: 0 !important; }

  /* Content area provides bottom clearance */
  #page-reg    .main,
  #page-cicir  .main,
  #page-laporan .main,
  #page-disp   .main,
  #page-week   .main,
  #page-stok   .main,
  #page-users  .main {
    padding-bottom: max(var(--m-lg), var(--m-sai-bot)) !important;
  }
}


/* ══════════════════════════════════════════════════════════════════════
   §7 · SEARCH BAR + FILTER CONTROLS (reg / cicir)
   ══════════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {

  #reg-ctrl-sticky,
  .ctrl {
    position: sticky !important;
    top: 0 !important;
    z-index: 20 !important;
    background: var(--m-bg) !important;
    padding: var(--m-sm) 0 !important;
    margin: 0 0 var(--m-sm) !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    border-bottom: 0.5px solid var(--m-border) !important;
    display: flex !important;
    flex-direction: column !important;
    gap: var(--m-xs) !important;
  }

  /* inner ctrl row */
  #reg-ctrl-sticky .ctrl,
  .ctrl > .ctrl {
    position: static !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin: 0 !important;
    flex-direction: row !important;
    gap: var(--m-xs) !important;
  }

  /* search input wrapper */
  .search-wrap {
    flex: 1 !important;
    position: relative !important;
  }

  /* search input */
  .sinp {
    height: var(--m-touch) !important;
    width: 100% !important;
    font-size: var(--m-t-sub) !important;
    border-radius: var(--m-r-sm) !important;
    border: 0.5px solid var(--m-border) !important;
    background: var(--m-surface) !important;
    padding: 0 10px 0 34px !important;
    color: var(--m-ink) !important;
    box-shadow: var(--m-sh1) !important;
    box-sizing: border-box !important;
  }
  .sinp::placeholder { color: var(--m-ink4) !important; }

  .si {
    position: absolute !important;
    left: 10px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    color: var(--m-ink4) !important;
    pointer-events: none !important;
  }

  /* select dropdown */
  .sel {
    height: var(--m-touch) !important;
    font-size: var(--m-t-sub) !important;
    border-radius: var(--m-r-sm) !important;
    border: 0.5px solid var(--m-border) !important;
    background: var(--m-surface) !important;
    padding: 0 8px !important;
    color: var(--m-ink) !important;
    box-shadow: var(--m-sh1) !important;
    flex-shrink: 0 !important;
  }

  /* view-toggle buttons */
  .view-toggle {
    display: flex !important;
    border-radius: var(--m-r-sm) !important;
    overflow: hidden !important;
    border: 0.5px solid var(--m-border) !important;
    background: var(--m-surface) !important;
    flex-shrink: 0 !important;
  }

  .vtbtn {
    height: var(--m-touch) !important;
    padding: 0 10px !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    display: flex !important;
    align-items: center !important;
    gap: 4px !important;
    background: transparent !important;
    border: none !important;
    color: var(--m-ink3) !important;
  }
  .vtbtn.active {
    background: #6366f1 !important;
    color: #fff !important;
  }

  /* pill filter tabs */
  .pills {
    display: flex !important;
    flex-direction: row !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    scrollbar-width: none !important;
    gap: 5px !important;
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
    -webkit-overflow-scrolling: touch !important;
  }
  .pills::-webkit-scrollbar { display: none !important; }

  .pill {
    flex: 0 0 auto !important;
    height: 32px !important;
    padding: 0 12px !important;
    border-radius: 8px !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    white-space: nowrap !important;
    border: 0.5px solid var(--m-border) !important;
    background: var(--m-surface) !important;
    color: var(--m-ink2) !important;
    display: flex !important;
    align-items: center !important;
    gap: 4px !important;
    min-height: 0 !important;
    max-height: none !important;
  }
  .pill.active {
    background: #6366f1 !important;
    color: #fff !important;
    border-color: transparent !important;
  }
  .pill .n {
    opacity: 0.75 !important;
    font-size: 10px !important;
  }

  /* count bar */
  .rbar {
    margin: var(--m-xs) 0 var(--m-sm) !important;
  }
  .rcount {
    font-size: 11px !important;
    color: var(--m-ink3) !important;
    font-weight: 500 !important;
  }

  /* Cicir — row 1: search; row 2: two filters side by side */
  #page-cicir .ctrl {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
    flex-direction: unset !important;
    align-items: stretch !important;
  }

  #page-cicir .ctrl .search-wrap {
    grid-column: 1 / -1 !important;
    width: 100% !important;
    min-width: 0 !important;
    flex: unset !important;
  }

  #page-cicir .ctrl .sel,
  #page-cicir .ctrl select {
    width: 100% !important;
    min-width: 0 !important;
    flex: unset !important;
    box-sizing: border-box !important;
  }
}


/* ══════════════════════════════════════════════════════════════════════
   §8 · PATIENT CARDS  (reg / cicir)
   ══════════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {

  #page-reg,
  #page-cicir {
    overflow-x: hidden !important;
    max-width: 100% !important;
  }

  #page-reg .main,
  #page-cicir .main {
    overflow-x: hidden !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  /* Single column — v2 cards need full width for 3-col clinical zone */
  #page-reg .pgrid,
  #page-cicir .pgrid {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: var(--m-sm) !important;
    padding: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  /* list view: single column grouped list */
  .pgrid.list-view {
    grid-template-columns: 1fr !important;
    gap: 1px !important;
    background: var(--m-sep) !important;
    border-radius: var(--m-r-lg) !important;
    overflow: hidden !important;
  }
  .pgrid.list-view .pcard {
    border-radius: 0 !important;
    border: none !important;
    box-shadow: none !important;
  }

  .pcard,
  .pcard-v2 {
    background: var(--m-surface) !important;
    border-radius: var(--m-r) !important;
    border: 0.5px solid var(--m-border) !important;
    box-shadow: var(--m-sh1) !important;
    overflow: hidden !important;
    min-width: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  .pcard-body {
    padding: var(--m-sm) var(--m-sm) var(--m-xs) !important;
    min-width: 0 !important;
  }

  /* V2 card header + clinical zone — prevent grid blow-out */
  .pcard-top {
    min-width: 0 !important;
    gap: 8px !important;
  }

  .pcard-top-inner {
    min-width: 0 !important;
  }

  .pcard-top-text {
    min-width: 0 !important;
    overflow: hidden !important;
  }

  .pcard-clinical {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 8px !important;
    min-width: 0 !important;
    width: 100% !important;
  }

  .pcard-zone-col {
    min-width: 0 !important;
    overflow: hidden !important;
  }

  .pcard-preskripsi {
    overflow-wrap: anywhere !important;
    word-break: break-word !important;
  }

  .pcard-dot-row {
    flex-wrap: wrap !important;
    min-width: 0 !important;
  }

  /* V2 action bar: 2×2 grid, NOT width:100% per btn in flex row */
  .pcard-v2 .pcard-actions,
  #page-reg .pcard-actions,
  #page-cicir .pcard-actions {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 6px !important;
    width: 100% !important;
    min-width: 0 !important;
    margin-top: 10px !important;
    padding-top: 10px !important;
    border-top: 0.5px solid var(--m-sep) !important;
  }

  .pcard-v2 .pcard-actions .pcard-act-btn,
  #page-reg .pcard-act-btn,
  #page-cicir .pcard-act-btn {
    width: auto !important;
    min-width: 0 !important;
    min-height: 36px !important;
    height: auto !important;
    padding: 8px 6px !important;
    border-radius: var(--m-r-sm) !important;
    font-size: 10px !important;
    font-weight: 600 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 3px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    border: 0.5px solid var(--m-border) !important;
    background: var(--m-surface2) !important;
    box-shadow: none !important;
    box-sizing: border-box !important;
  }

  #page-reg .pcard-act-btn.pcard-act-primary,
  #page-cicir .pcard-act-btn.pcard-act-primary {
    background: #0F6E56 !important;
    color: #fff !important;
    border-color: #0F6E56 !important;
  }

  /* Legacy/simple cards (non-v2): stacked full-width action */
  .pcard:not(.pcard-v2) .pcard-act-btn {
    width: 100% !important;
    border-radius: 0 0 var(--m-r) var(--m-r) !important;
    border-top: 0.5px solid var(--m-border) !important;
    background: transparent !important;
    border-left: none !important;
    border-right: none !important;
    border-bottom: none !important;
  }

  /* patient name */
  .pname {
    font-size: 13px !important;
    font-weight: 700 !important;
    line-height: 1.25 !important;
    color: var(--m-ink) !important;
    margin-bottom: 3px !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
  }

  .mname {
    font-size: 11px !important;
    color: var(--m-ink3) !important;
    margin-bottom: 5px !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }

  /* inline stat chips on card */
  .pic {
    font-size: 10px !important;
    line-height: 1.3 !important;
    color: var(--m-ink3) !important;
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 3px !important;
  }
}


/* ══════════════════════════════════════════════════════════════════════
   §9 · DISPENSE (PENGIRAAN DOS) page
   ══════════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {

  #page-disp .d-body,
  #page-disp #d-body {
    padding: var(--m-md) var(--m-gutter) !important;
    display: flex !important;
    flex-direction: column !important;
    gap: var(--m-sm) !important;
  }

  /* cards inside dispense */
  #page-disp .sc,
  #page-disp .d-card {
    background: var(--m-surface) !important;
    border-radius: var(--m-r-lg) !important;
    border: 0.5px solid var(--m-border) !important;
    box-shadow: var(--m-sh1) !important;
    padding: var(--m-md) !important;
  }

  /* table wrappers */
  #page-disp .tbl-wrap {
    border-radius: var(--m-r) !important;
    border: 0.5px solid var(--m-border) !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }
}


/* ══════════════════════════════════════════════════════════════════════
   §10 · LAPORAN / REPORTS
   ══════════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {

  #page-reports {
    overflow-x: hidden !important;
    max-width: 100% !important;
  }

  #page-reports .rpt-hero {
    margin-left: calc(-1 * var(--m-gutter)) !important;
    margin-right: calc(-1 * var(--m-gutter-r)) !important;
    width: auto !important;
    box-sizing: border-box !important;
    border-radius: 0 !important;
    padding: 14px var(--m-gutter) 12px !important;
    margin-bottom: 0 !important;
    overflow: visible !important;
  }

  #page-reports .rpt-hero-inner {
    flex-direction: column !important;
    gap: 14px !important;
    width: 100% !important;
  }

  #page-reports .rpt-hero-info {
    padding-bottom: 2px !important;
  }

  #page-reports .rpt-eyebrow {
    display: none !important;
  }

  #page-reports .rpt-title {
    font-size: 19px !important;
    line-height: 1.25 !important;
    margin-bottom: 4px !important;
  }

  #page-reports .rpt-subtitle {
    font-size: 11.5px !important;
    line-height: 1.4 !important;
    margin: 0 !important;
  }

  /* Month + year side-by-side; generate full width below */
  #page-reports .rpt-hero-controls {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 12px !important;
    align-items: end !important;
    width: 100% !important;
    margin-top: 2px !important;
  }

  #page-reports .rpt-ctrl-group {
    min-width: 0 !important;
  }

  #page-reports .rpt-ctrl-select {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    min-height: 42px !important;
    padding: 10px 32px 10px 11px !important;
    border-radius: 11px !important;
    border: 1px solid rgba(255, 255, 255, .2) !important;
    background-color: rgba(255, 255, 255, .1) !important;
    box-sizing: border-box !important;
    font-size: 13px !important;
  }

  #page-reports .rpt-ctrl-label {
    margin-bottom: 5px !important;
    font-size: 9px !important;
  }

  #page-reports .rpt-btn-generate {
    grid-column: 1 / -1 !important;
    width: 100% !important;
    min-height: 42px !important;
    padding: 11px 14px !important;
    justify-content: center !important;
    border-radius: 12px !important;
    font-size: 13px !important;
    letter-spacing: .01em !important;
    box-shadow: 0 4px 16px rgba(109, 40, 217, .32) !important;
    margin-top: 2px !important;
  }

  /* Tab bar → anchored picker inside hero */
  #page-reports .rpt-tab-bar {
    display: none !important;
  }

  #page-reports .rpt-tab-mobile {
    display: block !important;
    margin: 14px 0 0 !important;
    padding: 14px 0 0 !important;
    border-top: 1px solid rgba(255, 255, 255, .1) !important;
    background: transparent !important;
    box-sizing: border-box !important;
    position: relative !important;
    z-index: 3 !important;
  }

  #page-reports .rpt-tab-picker {
    padding: 0 8px !important;
    box-sizing: border-box !important;
  }

  #page-reports .rpt-tab-mobile-label {
    display: block !important;
    font-size: 9px !important;
    font-weight: 700 !important;
    letter-spacing: .65px !important;
    text-transform: uppercase !important;
    color: rgba(255, 255, 255, .5) !important;
    margin: 0 8px 7px !important;
  }

  #page-reports .rpt-tab-trigger {
    width: 100% !important;
    min-height: 42px !important;
    padding: 11px 16px !important;
    border-radius: 12px !important;
    font-size: 14px !important;
    box-shadow: none !important;
    border-color: rgba(167, 139, 250, 0.28) !important;
    background: rgba(255, 255, 255, 0.07) !important;
    box-sizing: border-box !important;
  }

  #page-reports .rpt-tab-trigger-leading {
    gap: 12px !important;
  }

  #page-reports .rpt-tab-menu {
    display: block !important;
  }

  #page-reports .rpt-tab-scrim {
    display: block !important;
  }

  #page-reports.rpt-menu-open .rpt-content {
    pointer-events: none !important;
  }

  #page-reports .rpt-content {
    padding: var(--m-md) var(--m-gutter) var(--m-lg) !important;
    overflow-x: hidden !important;
    box-sizing: border-box !important;
    min-width: 0 !important;
  }

  #page-reports .rpt-section-header {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 10px !important;
    margin-bottom: 14px !important;
  }

  #page-reports .rpt-section-title {
    flex-wrap: wrap !important;
    font-size: 15px !important;
    line-height: 1.3 !important;
    min-width: 0 !important;
  }

  #page-reports .rpt-section-actions {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
    width: 100% !important;
  }

  #page-reports .rpt-section-actions:has(.rpt-btn:only-child) {
    grid-template-columns: 1fr !important;
  }

  #page-reports .rpt-section-actions .rpt-btn {
    width: 100% !important;
    justify-content: center !important;
    min-height: 40px !important;
    padding: 10px 12px !important;
    border-radius: 11px !important;
    font-size: 12px !important;
    gap: 6px !important;
    white-space: nowrap !important;
    text-align: center !important;
    box-sizing: border-box !important;
  }

  #page-reports .rpt-export-card {
    padding: 16px !important;
    border-radius: var(--m-r-lg) !important;
    box-sizing: border-box !important;
  }

  #page-reports .rpt-export-card .rpt-btn {
    width: 100% !important;
    min-height: var(--m-touch) !important;
    justify-content: center !important;
    border-radius: 12px !important;
    padding: 12px 16px !important;
    font-size: 13px !important;
    margin-top: 4px !important;
  }

  #page-reports .rpt-history-head .rpt-btn,
  #page-reports .rpt-tbl-btn {
    min-height: 36px !important;
    border-radius: 10px !important;
  }

  #page-reports .rpt-kpi-grid,
  #page-reports .rpt-kpi-row {
    gap: var(--m-sm) !important;
    padding: 0 !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    min-width: 0 !important;
  }

  #page-reports .rpt-kpi-card {
    padding: var(--m-sm) var(--m-sm) !important;
    border-radius: var(--m-r) !important;
    border: 0.5px solid var(--m-border) !important;
    box-shadow: var(--m-sh1) !important;
    background: var(--m-surface) !important;
    min-width: 0 !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
  }

  #page-reports .rpt-kpi-title {
    font-size: 9px !important;
    overflow-wrap: anywhere !important;
    word-break: break-word !important;
    line-height: 1.25 !important;
  }

  #page-reports .rpt-kpi-value {
    font-size: 20px !important;
  }

  #page-reports .rpt-kpi-delta {
    font-size: 9px !important;
    overflow-wrap: anywhere !important;
  }

  #page-reports .rpt-charts-grid {
    grid-template-columns: 1fr !important;
    gap: var(--m-sm) !important;
    min-width: 0 !important;
  }

  #page-reports .rpt-chart-card {
    min-width: 0 !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
  }

  #page-reports .rpt-chart-title {
    font-size: 13px !important;
    flex-wrap: wrap !important;
  }

  #page-reports .rpt-stat-grid,
  #page-reports .rpt-export-grid {
    grid-template-columns: 1fr !important;
    min-width: 0 !important;
  }

  #page-reports .rpt-history-wrap,
  #page-reports .rpt-form-wrap {
    max-width: 100% !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }

  #page-reports table.rpt-table {
    min-width: 480px !important;
  }

  #page-laporan .lap-card {
    border-radius: var(--m-r-lg) !important;
    border: 0.5px solid var(--m-border) !important;
    box-shadow: var(--m-sh1) !important;
    background: var(--m-surface) !important;
  }
}


/* ══════════════════════════════════════════════════════════════════════
   §11 · STOK + USERS
   ══════════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {

  /* stok action bar — layout handled in §19 */
  #page-stok .stok-action-bar {
    gap: var(--m-xs) !important;
  }

  /* users table card */
  #page-users .tbl-wrap,
  #page-stok .tbl-wrap {
    border-radius: var(--m-r-lg) !important;
    border: 0.5px solid var(--m-border) !important;
    box-shadow: var(--m-sh1) !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }

  /* ── Users: Tambah Pengguna Baharu form ── */
  #page-users .main {
    padding: var(--m-md) var(--m-gutter) 0 !important;
    overflow-x: hidden !important;
    box-sizing: border-box !important;
  }

  #page-users .u-card,
  #page-users .u-list-card {
    max-width: 100% !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
  }

  #page-users .u-card-body {
    padding: var(--m-md) !important;
  }

  #page-users .u-card-header {
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 14px var(--m-md) !important;
  }

  #page-users .u-card-header-title {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    font-size: 14px !important;
    line-height: 1.25 !important;
    overflow-wrap: anywhere !important;
  }

  #page-users .u-btn-cancel {
    flex-shrink: 0 !important;
    min-height: var(--m-touch) !important;
    margin-left: auto !important;
  }

  #page-users .u-form-grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 14px !important;
    margin-bottom: 14px !important;
    min-width: 0 !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  #page-users .u-form-grid > div {
    min-width: 0 !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  #page-users .u-form-grid > div[style*="grid-column"] {
    grid-column: 1 !important;
  }

  #page-users .u-field-label {
    line-height: 1.3 !important;
    overflow-wrap: anywhere !important;
    word-break: break-word !important;
  }

  #page-users .u-field-note {
    display: inline !important;
    white-space: normal !important;
  }

  #page-users #u-form .minp {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    min-height: var(--m-touch) !important;
    font-size: 16px !important;
  }

  #page-users #u-form .minp[style*="padding-right"] {
    padding-right: 42px !important;
  }

  #page-users #u-form div[style*="font-size:11px"] {
    font-size: 11px !important;
    line-height: 1.45 !important;
    overflow-wrap: anywhere !important;
    word-break: break-word !important;
    max-width: 100% !important;
    margin-top: 6px !important;
  }

  #page-users #u-role-info {
    max-width: 100% !important;
    overflow-wrap: anywhere !important;
    word-break: break-word !important;
  }

  #page-users .u-form-actions {
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
    width: 100% !important;
    flex-wrap: nowrap !important;
  }

  #page-users .u-btn-primary,
  #page-users .u-btn-secondary {
    width: 100% !important;
    justify-content: center !important;
    min-height: var(--m-touch) !important;
    box-sizing: border-box !important;
    white-space: normal !important;
    text-align: center !important;
  }
}


/* ══════════════════════════════════════════════════════════════════════
   §12 · MONITORING PAGES (Active Patient / SPUB)
   ══════════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {

  .actpatmon-toolbar,
  .actpatmon-filter-row,
  .spubmon-toolbar {
    flex-wrap: wrap !important;
    gap: var(--m-xs) !important;
    padding: 0 !important;
  }

  .actpatmon-kpi-row {
    gap: var(--m-sm) !important;
    padding: 0 !important;
  }

  .actpatmon-kpi {
    border-radius: var(--m-r) !important;
    border: 0.5px solid var(--m-border) !important;
    box-shadow: var(--m-sh1) !important;
    padding: var(--m-sm) !important;
    background: var(--m-surface) !important;
  }

  /* monitoring heroes (custom inner wrappers) */
  .spubmon-hero-inner,
  .actpatmon-hero-inner,
  .memo-hero-inner {
    padding: var(--m-md) var(--m-gutter) var(--m-sm) !important;
  }
}


/* ══════════════════════════════════════════════════════════════════════
   §13 · PATIENT DETAIL  (modal / detail page)
   ══════════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {

  #page-patient-detail .pd-col-left,
  #page-patient-detail .pd-col-right {
    padding-bottom: max(var(--m-lg), var(--m-sai-bot)) !important;
  }

  .pd-card {
    border-radius: var(--m-r-lg) !important;
    border: 0.5px solid var(--m-border) !important;
    box-shadow: var(--m-sh1) !important;
    background: var(--m-surface) !important;
    padding: var(--m-md) !important;
    margin-bottom: var(--m-sm) !important;
  }

  /* tab bar */
  #page-patient-detail .pd-tab-bar {
    overflow-x: auto !important;
    scrollbar-width: none !important;
    -webkit-overflow-scrolling: touch !important;
    margin-bottom: var(--m-sm) !important;
    gap: 4px !important;
  }
  #page-patient-detail .pd-tab-bar::-webkit-scrollbar { display: none !important; }
}


/* ══════════════════════════════════════════════════════════════════════
   §14 · BUTTONS & INTERACTIVE  (shared, phones)
   ══════════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {

  .btn,
  button.btn {
    min-height: var(--m-touch) !important;
    border-radius: var(--m-r-sm) !important;
    font-size: var(--m-t-sub) !important;
    font-weight: 600 !important;
    padding: 0 16px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 5px !important;
  }

  /* primary CTA */
  .btn-primary,
  .btn.btn-primary {
    background: #6366f1 !important;
    color: #fff !important;
    border-color: transparent !important;
    box-shadow: 0 2px 8px rgba(99,102,241,0.3) !important;
  }

  /* danger */
  .btn-danger,
  .btn.btn-danger {
    background: #ef4444 !important;
    color: #fff !important;
    border-color: transparent !important;
  }

  /* tap feedback */
  .btn:active,
  button.btn:active,
  .pcard:active,
  .ntab:active,
  .pill:active,
  .dash-quick-btn:active {
    opacity: 0.75 !important;
    transform: scale(0.97) !important;
  }

  /* section label (headings above card groups) */
  .section-label,
  .nav-section-label {
    font-size: var(--m-t-cap) !important;
    letter-spacing: 0.07em !important;
    text-transform: uppercase !important;
    color: var(--m-ink3) !important;
    font-weight: 600 !important;
    padding: 0 4px !important;
    margin-bottom: 6px !important;
  }
}


/* ══════════════════════════════════════════════════════════════════════
   §15 · MODALS (overlay)
   ══════════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {

  .ov .modal {
    border-radius: var(--m-r-xl) var(--m-r-xl) 0 0 !important;
    max-height: 90dvh !important;
    width: 100% !important;
    margin: auto 0 0 0 !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
  }

  .mbody {
    -webkit-overflow-scrolling: touch !important;
    padding: var(--m-md) !important;
    overscroll-behavior-y: contain !important;
  }

  .modal-tab-nav {
    overflow-x: auto !important;
    scrollbar-width: none !important;
    -webkit-overflow-scrolling: touch !important;
    white-space: nowrap !important;
  }
  .modal-tab-nav::-webkit-scrollbar { display: none !important; }

  .modal-tab-btn {
    min-height: 40px !important;
    font-size: var(--m-t-sub) !important;
    padding: 0 14px !important;
    flex-shrink: 0 !important;
  }

  .modal-footer {
    padding: var(--m-sm) var(--m-md) max(var(--m-sm), var(--m-sai-bot)) !important;
    border-top: 0.5px solid var(--m-border) !important;
  }
}


/* ══════════════════════════════════════════════════════════════════════
   §16 · VISUAL CONTINUITY  — tablet only (769–1180px)
   Phone is handled by §4–§6 above.
   ══════════════════════════════════════════════════════════════════════ */

/* hero rounded bottom + content overlap on tablet */
@media (min-width: 769px) and (max-width: 1180px) {

  #content-area {
    background: #f0f2f8 !important;
  }

  #content-area .hero,
  #page-dashboard .dash-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;
  }

  #page-reports .rpt-hero {
    border-radius: 0 0 24px 24px !important;
    overflow: visible !important;
    position: relative !important;
    z-index: 4 !important;
    margin-bottom: 0 !important;
    padding-bottom: 14px !important;
  }

  .prm-stats-row {
    padding-bottom: 28px !important;
  }

  .prm-hero-bar,
  .u-hero-bar {
    display: none !important;
  }

  #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;
    border-radius: 24px 24px 0 0 !important;
    background: #f0f2f8 !important;
  }

  #page-stok .main,
  #page-laporan .main.lap-main {
    margin-top: 0 !important;
    padding-top: 16px !important;
    border-radius: 0 !important;
    background: #f0f2f8 !important;
  }

  #page-dashboard .dash-wrap {
    position: relative !important;
    z-index: 1 !important;
    margin-top: -24px !important;
    /* Extra top inset so KPI cards stay on the light surface, not the hero */
    padding-top: 52px !important;
    border-radius: 24px 24px 0 0 !important;
    background: var(--m-bg, #f0f2f8) !important;
  }

  #page-dashboard .dash-kpi-row {
    margin-top: 0 !important;
  }

  #content-area .hero,
  #page-dashboard .dash-hero {
    margin-left:  0 !important;
    margin-right: 0 !important;
    width:        100% !important;
    max-width:    none !important;
    box-sizing:   border-box !important;
  }

  #page-dashboard .dash-hero {
    padding-left:  max(16px, env(safe-area-inset-left,  0px)) !important;
    padding-right: max(16px, env(safe-area-inset-right, 0px)) !important;
    padding-top:    16px !important;
    padding-bottom: 16px !important;
  }

  #page-dashboard .dash-kpi-row,
  #page-dashboard .dash-grid {
    padding-left:  0 !important;
    padding-right: 0 !important;
  }

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

  .hero-inner {
    padding-left:  max(16px, env(safe-area-inset-left,  0px)) !important;
    padding-right: max(16px, env(safe-area-inset-right, 0px)) !important;
  }

  .prm-stats-row {
    padding-left:  max(16px, env(safe-area-inset-left,  0px)) !important;
    padding-right: max(16px, env(safe-area-inset-right, 0px)) !important;
  }

  /* card elevation */
  #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;
  }

  #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;
  }

  #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 flat on tablet too */
  #page-reg #reg-ctrl-sticky,
  #page-cicir .ctrl {
    background:    #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;
    top: 0 !important;
  }

  #page-reg .pills {
    border-top: none !important;
    padding-top: 0 !important;
    margin-top: 10px !important;
  }
}


/* ══════════════════════════════════════════════════════════════════════
   §16.5 · PURPLE HERO FOUNDATION — all operational module heroes
   Full bleed + overflow guard; preserve main.css gradients/textures.
   ══════════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {

  #page-disp .hero,
  #page-week .hero,
  #page-stok .hero,
  #page-reg .hero,
  #page-cicir .hero,
  #page-laporan .hero,
  #page-dashboard .dash-hero {
    width: 100% !important;
    max-width: none !important;
    box-sizing: border-box !important;
    overflow-x: hidden !important;
    position: relative !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  #page-laporan .prm-stats-row {
    overflow: visible !important;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: auto !important;
    scroll-padding-inline: unset !important;
  }

  #page-disp .hero-inner,
  #page-week .hero-inner,
  #page-stok .hero-inner {
    padding-left: var(--m-gutter) !important;
    padding-right: var(--m-gutter-r) !important;
  }

  #page-disp .hero-title,
  #page-week .hero-title,
  #page-stok .hero-title {
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: unset !important;
    overflow-wrap: break-word !important;
    line-height: 1.2 !important;
  }

  #page-disp .hero-sub,
  #page-week .hero-sub,
  #page-stok .hero-sub {
    white-space: normal !important;
    overflow-wrap: break-word !important;
    line-height: 1.35 !important;
  }
}


/* ══════════════════════════════════════════════════════════════════════
   §17 · DISP — hero stats  (phones ≤768px)
   2×3 KPI grid + stacked SPUB/MFlex; restore main.css strip effects.
   ══════════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {

  #page-disp .hero {
    padding: 14px 0 0 !important;
  }

  /* hero-inner: column stack (reg/cicir use side-by-side from §5) */
  #page-disp .hero-inner {
    flex-direction: column !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    gap: 12px !important;
    padding-bottom: 0 !important;
  }

  #page-disp .hero-sub {
    margin-bottom: 12px !important;
  }

  /* stats wrapper: flat divider strip from main.css */
  #page-disp .hero-stats {
    display: flex !important;
    flex-direction: column !important;
    gap: 0 !important;
    padding-bottom: var(--m-lg) !important;
    width: 100% !important;
    border-top: 1px solid rgba(255,255,255,.07) !important;
    background: rgba(255,255,255,.022) !important;
    border-radius: 0 !important;
    overflow: hidden !important;
  }

  /* 6 KPIs → 2 columns × 3 rows */
  #page-disp .hero-stats-kpi {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 0 !important;
    width: 100% !important;
    border-radius: 0 !important;
    overflow: hidden !important;
    border: none !important;
    background: transparent !important;
  }

  #page-disp .hstat.hstat-kpi {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 3px !important;
    padding: 12px 10px !important;
    text-align: center !important;
    min-height: 72px !important;
    min-width: 0 !important;
    position: relative !important;
    background: transparent !important;
    border-right: 1px solid rgba(255,255,255,.07) !important;
    border-bottom: 1px solid rgba(255,255,255,.07) !important;
    transition: background .18s !important;
    box-sizing: border-box !important;
  }

  #page-disp .hstat.hstat-kpi:nth-child(2n) {
    border-right: none !important;
  }

  #page-disp .hstat.hstat-kpi:hover {
    background: rgba(255,255,255,.04) !important;
  }

  #page-disp .hstat.hstat-kpi::before {
    content: '' !important;
    display: block !important;
    position: absolute !important;
    top: 0 !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    width: 32px !important;
    height: 2px !important;
    border-radius: 0 0 3px 3px !important;
    background: rgba(255,255,255,.12) !important;
  }

  #page-disp .hstat-v {
    font-size: 22px !important;
    font-weight: 800 !important;
    letter-spacing: -.4px !important;
    line-height: 1 !important;
    display: block !important;
    margin-bottom: 0 !important;
  }

  #page-disp .hstat-l {
    font-size: 10px !important;
    font-weight: 600 !important;
    color: rgba(255,255,255,.35) !important;
    text-transform: uppercase !important;
    letter-spacing: .3px !important;
    line-height: 1.3 !important;
    display: block !important;
    margin-top: 4px !important;
    word-break: break-word !important;
  }

  #page-disp .hstat-s {
    display: block !important;
    font-size: 9px !important;
    margin-top: 2px !important;
    color: rgba(255,255,255,.22) !important;
  }

  /* SPUB + MFlex: stacked full width */
  #page-disp .hero-stats-modules {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 0 !important;
    width: 100% !important;
    border-top: 1px solid rgba(255,255,255,.08) !important;
  }

  #page-disp .hstat.hstat-module {
    padding: 12px 10px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    min-height: 0 !important;
    border-bottom: none !important;
    border-right: none !important;
    box-sizing: border-box !important;
  }

  #page-disp .hstat-module::before {
    display: none !important;
  }

  #page-disp .hstat-module > div {
    width: 100% !important;
  }

  #page-disp .hstat-module > div > div[style*="background:linear-gradient"] {
    border-radius: 10px !important;
    padding: 10px 8px !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  #page-disp .hstat-module > div > div[style*="background:linear-gradient"] > div[style*="grid-template-columns"] {
    gap: 0 !important;
  }

  #page-disp .hstat-module > div > div[style*="background:linear-gradient"] span[style*="font-size:24px"] {
    font-size: 18px !important;
  }

  #page-disp .hstat-module > div > div[style*="background:linear-gradient"] span[style*="font-size:9px"] {
    font-size: 8px !important;
  }

  #spub-wknd-notice {
    border-radius: var(--m-r) !important;
    font-size: var(--m-t-sub) !important;
    margin-top: var(--m-xs) !important;
  }
}


/* ══════════════════════════════════════════════════════════════════════
   §18 · DATEBAR — date controls + action buttons  (phones ≤768px)
   ══════════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {

  /* Card wrap — flat white card inside .main */
  #page-disp .datebar {
    background:    var(--m-surface)  !important;
    border:        0.5px solid var(--m-border) !important;
    border-radius: var(--m-r-lg)     !important;
    padding:       var(--m-md)       !important;
    box-shadow:    var(--m-sh1)      !important;
    margin:        0 0 var(--m-sm)   !important;
    display:       flex              !important;
    flex-direction: column           !important;
    gap:           10px              !important;
  }

  /* top-level row → vertical */
  #page-disp .db-row {
    display:         flex    !important;
    flex-direction:  column  !important;
    align-items:     stretch !important;
    gap:             10px    !important;
  }

  /* date section: label + input + badge in a single row */
  #page-disp .db-row > div:first-child {
    display:     flex    !important;
    align-items: center  !important;
    gap:         8px     !important;
    width:       100%    !important;
  }

  #page-disp .db-label {
    flex-shrink:    0         !important;
    font-size:      10px      !important;
    font-weight:    700       !important;
    color:          var(--m-ink3) !important;
    white-space:    nowrap    !important;
    text-transform: uppercase !important;
    letter-spacing: .5px      !important;
  }

  #page-disp input.date-inp,
  #page-disp #d-date {
    flex:          1 1 auto           !important;
    height:        42px               !important;
    min-height:    42px               !important;
    border-radius: 10px               !important;
    border:        0.5px solid var(--m-border) !important;
    background:    var(--m-surface2)  !important;
    font-size:     14px               !important;
    font-weight:   600                !important;
    color:         var(--m-ink)       !important;
    box-shadow:    var(--m-sh1)       !important;
    padding:       0 10px             !important;
    margin:        0                  !important;
    box-sizing:    border-box         !important;
  }

  #page-disp .day-badge,
  #page-disp #d-day {
    flex-shrink:    0             !important;
    height:         42px          !important;
    min-width:      68px          !important;
    max-width:      90px          !important;
    border-radius:  10px          !important;
    font-size:      12px          !important;
    font-weight:    800           !important;
    display:        inline-flex   !important;
    align-items:    center        !important;
    justify-content: center       !important;
    padding:        0 10px        !important;
    margin:         0             !important;
    box-sizing:     border-box    !important;
  }

  /* actions: column of button-group rows */
  #page-disp .db-actions {
    display:        flex    !important;
    flex-direction: column  !important;
    gap:            8px     !important;
    width:          100%    !important;
  }

  /* each button-group div → 2-col equal grid */
  #page-disp .db-actions > div {
    display:               grid      !important;
    grid-template-columns: 1fr 1fr   !important;
    gap:                   6px       !important;
    padding:               0         !important;
    background:            transparent !important;
    border:                none      !important;
    border-radius:         0         !important;
    width:                 100%      !important;
    box-sizing:            border-box !important;
  }

  /* tools row (Laporan + Reset + CSV) → 3 equal cols */
  #page-disp .db-actions > div:last-child {
    grid-template-columns: repeat(3,1fr) !important;
  }

  /* visual separator between groups */
  #page-disp .db-actions > div:not(:last-child) {
    padding-bottom: 8px                           !important;
    border-bottom:  0.5px solid var(--m-sep)      !important;
  }

  /* buttons: full-width, 44px tall, touch-friendly */
  #page-disp .btn-action {
    height:         44px           !important;
    min-height:     44px           !important;
    width:          100%           !important;
    box-sizing:     border-box     !important;
    display:        flex           !important;
    align-items:    center         !important;
    justify-content: center        !important;
    gap:            5px            !important;
    border-radius:  10px           !important;
    font-size:      12px           !important;
    font-weight:    700            !important;
    white-space:    nowrap         !important;
    overflow:       hidden         !important;
    padding:        0 8px          !important;
    flex-shrink:    0              !important;
    text-overflow:  ellipsis       !important;
  }
  #page-disp .btn-action svg {
    flex-shrink: 0 !important;
    width:  13px   !important;
    height: 13px   !important;
  }
  #page-disp .btn-action:active {
    opacity:   .78 !important;
    transform: scale(.97) !important;
  }

  /* d-body table area: scroll container with card chrome */
  #page-disp .d-body,
  #page-disp #d-body {
    overflow-x:               auto              !important;
    -webkit-overflow-scrolling: touch           !important;
    border-radius:            var(--m-r-lg)     !important;
    border:                   0.5px solid var(--m-border) !important;
    background:               var(--m-surface)  !important;
    box-shadow:               var(--m-sh1)      !important;
    padding:                  0                 !important;
  }
}


/* ══════════════════════════════════════════════════════════════════════
   §19 · STOK — hero KPI + action buttons  (phones ≤768px)
   2×2 wk-kpi grid + vol bar; restore main.css strip effects.
   ══════════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {

  #page-stok .hero-inner {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 10px !important;
    padding-bottom: 0 !important;
  }

  #page-stok .wk-hero-top {
    display: flex !important;
    align-items: flex-start !important;
    justify-content: space-between !important;
    gap: 12px !important;
    width: 100% !important;
  }

  #page-stok .wk-hero-badge {
    flex-shrink: 0 !important;
  }

  /* 4 KPIs → 2×2 divider grid */
  #page-stok .wk-kpi-strip {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 0 !important;
    width: 100% !important;
    position: relative !important;
    z-index: 1 !important;
    border-top: 1px solid rgba(255,255,255,.07) !important;
    background: rgba(255,255,255,.018) !important;
    border-radius: 0 !important;
    overflow: hidden !important;
    border-left: none !important;
    border-right: none !important;
    border-bottom: none !important;
  }

  #page-stok .wk-kpi {
    position: relative !important;
    border-right: 1px solid rgba(255,255,255,.06) !important;
    border-bottom: 1px solid rgba(255,255,255,.06) !important;
    padding: 14px 12px !important;
    text-align: center !important;
    min-width: 0 !important;
    min-height: 0 !important;
    transition: background .18s !important;
    cursor: default !important;
  }

  #page-stok .wk-kpi:nth-child(2n) {
    border-right: none !important;
  }

  #page-stok .wk-kpi:nth-child(n+3) {
    border-bottom: none !important;
  }

  #page-stok .wk-kpi:hover {
    background: rgba(255,255,255,.04) !important;
  }

  #page-stok .wk-kpi::before {
    content: '' !important;
    display: block !important;
    position: absolute !important;
    top: 0 !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    width: 32px !important;
    height: 2px !important;
    border-radius: 0 0 4px 4px !important;
    opacity: 0 !important;
    transition: opacity .2s !important;
  }

  #page-stok .wk-kpi:hover::before {
    opacity: 1 !important;
  }

  #page-stok .wk-kpi-green::before  { background: #34d399 !important; }
  #page-stok .wk-kpi-red::before    { background: #f87171 !important; }
  #page-stok .wk-kpi-violet::before { background: #c4b5fd !important; }
  #page-stok .wk-kpi-amber::before  { background: #fcd34d !important; }

  #page-stok .wk-kpi-v {
    font-size: clamp(20px, 5vw, 26px) !important;
    font-weight: 800 !important;
    letter-spacing: -.4px !important;
    line-height: 1 !important;
    margin-bottom: 4px !important;
    display: block !important;
  }

  #page-stok .wk-kpi-l {
    font-size: 10px !important;
    letter-spacing: .4px !important;
    color: rgba(255,255,255,.28) !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    display: block !important;
  }

  /* Volume bar — stays inside hero, compact stacked layout */
  #page-stok .wk-vol-bar {
    position: relative !important;
    z-index: 1 !important;
    width: 100% !important;
    box-sizing: border-box !important;
    border-top: 1px solid rgba(255,255,255,.055) !important;
    background: rgba(103,232,249,.04) !important;
    padding: 12px var(--m-gutter) 14px !important;
    margin: 0 !important;
  }

  #page-stok .wk-vol-inner {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 6px !important;
    width: 100% !important;
  }

  #page-stok .wk-vol-label {
    white-space: normal !important;
    line-height: 1.25 !important;
    font-size: 9px !important;
  }

  #page-stok .wk-vol-v {
    margin-left: 0 !important;
    font-size: 17px !important;
    line-height: 1.15 !important;
    word-break: break-word !important;
  }

  /* Action buttons: 2×2 card — no overlap with hero vol bar */
  #page-stok .stok-action-bar {
    display:               grid  !important;
    grid-template-columns: 1fr 1fr !important;
    gap:                   10px  !important;
    flex-wrap:             unset !important;
    padding:               12px !important;
    background:            var(--m-surface) !important;
    border:                  0.5px solid var(--m-border) !important;
    border-radius:           var(--m-r-lg) !important;
    box-shadow:              var(--m-sh1) !important;
    position:                relative !important;
    z-index:                 2 !important;
    margin:                  0 !important;
  }

  #page-stok .stok-action-bar .btn,
  #page-stok .stok-action-bar > button {
    width:          100% !important;
    min-width:      0 !important;
    min-height:     44px !important;
    height:         auto !important;
    padding:        10px 8px !important;
    font-size:      12px !important;
    justify-content: center !important;
    align-items:    center !important;
    gap:            5px !important;
    box-sizing:     border-box !important;
    white-space:    normal !important;
    line-height:    1.2 !important;
    flex:           none !important;
  }

  /* Main: sit below hero — cancel overlap that hid buttons under vol bar */
  #page-stok .main {
    margin-top:      0 !important;
    padding:         var(--m-md) var(--m-gutter) 0 !important;
    gap:             var(--m-sm) !important;
    display:         flex !important;
    flex-direction:  column !important;
    border-radius:   0 !important;
    background:      var(--m-bg) !important;
    position:        relative !important;
    z-index:         1 !important;
  }

  /* DCF breakdown (7 cols): horizontal-scroll row */
  #dcf-breakdown {
    display:                  flex   !important;
    overflow-x:               auto   !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width:          none   !important;
  }
  #dcf-breakdown::-webkit-scrollbar { display: none !important; }
  #dcf-breakdown > div {
    min-width:  110px !important;
    flex-shrink: 0    !important;
    border-right: 1px solid var(--m-sep) !important;
  }
  #dcf-breakdown > div:last-child { border-right: none !important; }
}


/* ══════════════════════════════════════════════════════════════════════
   §20 · WEEK (Rekod Mingguan) — hero KPI + datebar  (phones ≤768px)
   2×2 wk-kpi grid + vol bar; preserve grid texture from main.css.
   ══════════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {

  #page-week .hero-inner {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 0 !important;
    padding-bottom: 0 !important;
  }

  #page-week .wk-hero-top {
    display: flex !important;
    align-items: flex-start !important;
    justify-content: space-between !important;
    gap: 12px !important;
    width: 100% !important;
    margin-bottom: 0 !important;
  }

  #page-week .wk-hero-text {
    flex: 1 1 auto !important;
    min-width: 0 !important;
  }

  #page-week .wk-hero-badge {
    flex-shrink: 0 !important;
  }

  /* 4 KPIs → 2×2 divider grid */
  #page-week .wk-kpi-strip {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 0 !important;
    width: 100% !important;
    position: relative !important;
    z-index: 1 !important;
    border-top: 1px solid rgba(255,255,255,.07) !important;
    background: rgba(255,255,255,.018) !important;
    border-radius: 0 !important;
    overflow: hidden !important;
    margin-bottom: 0 !important;
  }

  #page-week .wk-kpi {
    position: relative !important;
    border-right: 1px solid rgba(255,255,255,.06) !important;
    border-bottom: 1px solid rgba(255,255,255,.06) !important;
    padding: 14px 12px !important;
    text-align: center !important;
    min-width: 0 !important;
    transition: background .18s !important;
    cursor: default !important;
  }

  #page-week .wk-kpi:nth-child(2n) {
    border-right: none !important;
  }

  #page-week .wk-kpi:nth-child(n+3) {
    border-bottom: none !important;
  }

  #page-week .wk-kpi:hover {
    background: rgba(255,255,255,.04) !important;
  }

  #page-week .wk-kpi::before {
    content: '' !important;
    display: block !important;
    position: absolute !important;
    top: 0 !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    width: 32px !important;
    height: 2px !important;
    border-radius: 0 0 4px 4px !important;
    opacity: 0 !important;
    transition: opacity .2s !important;
  }

  #page-week .wk-kpi:hover::before {
    opacity: 1 !important;
  }

  #page-week .wk-kpi-green::before  { background: #34d399 !important; }
  #page-week .wk-kpi-red::before    { background: #f87171 !important; }
  #page-week .wk-kpi-violet::before { background: #c4b5fd !important; }
  #page-week .wk-kpi-blue::before   { background: #93c5fd !important; }

  #page-week .wk-kpi-v {
    font-size: clamp(20px, 5vw, 26px) !important;
    font-weight: 800 !important;
    letter-spacing: -.4px !important;
    line-height: 1 !important;
    margin-bottom: 4px !important;
    display: block !important;
  }

  #page-week .wk-kpi-l {
    font-size: 10px !important;
    letter-spacing: .4px !important;
    color: rgba(255,255,255,.28) !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    display: block !important;
  }

  /* Volume bar — full width below KPI grid */
  #page-week .wk-vol-bar {
    position: relative !important;
    z-index: 1 !important;
    width: 100% !important;
    box-sizing: border-box !important;
    border-top: 1px solid rgba(255,255,255,.055) !important;
    background: rgba(103,232,249,.04) !important;
    padding: 12px var(--m-gutter) !important;
    margin: 0 !important;
  }

  #page-week .wk-vol-inner,
  #page-week .wk-vol-left {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    width: 100% !important;
    min-width: 0 !important;
  }

  #page-week .wk-vol-inner {
    justify-content: space-between !important;
  }

  /* Week datebar: card + vertical stack */
  #page-week .datebar {
    background:     var(--m-surface)  !important;
    border:         0.5px solid var(--m-border) !important;
    border-radius:  var(--m-r-lg)     !important;
    padding:        var(--m-md)       !important;
    box-shadow:     var(--m-sh1)      !important;
    margin:         0 0 var(--m-sm)   !important;
    display:        flex              !important;
    flex-direction: column            !important;
    gap:            8px               !important;
  }

  /* Navigation + action buttons: 44px, full-width */
  #page-week .btn-action {
    height:         44px        !important;
    border-radius:  10px        !important;
    font-size:      12px        !important;
    font-weight:    700         !important;
    display:        flex        !important;
    align-items:    center      !important;
    justify-content: center     !important;
    gap:            5px         !important;
    width:          100%        !important;
    padding:        0 10px      !important;
    box-sizing:     border-box  !important;
  }
  #page-week .btn-action svg {
    width:  13px !important;
    height: 13px !important;
    flex-shrink: 0 !important;
  }
  #page-week .btn-action:active {
    opacity:   .78  !important;
    transform: scale(.97) !important;
  }
}


/* ══════════════════════════════════════════════════════════════════════
   §21 · LOGIN SHIELD — never inherit app mobile surfaces
   #login-overlay sits outside #content-area but shares .page / .hero
   class names; keep canvas + dark shell visible on phones.
   ══════════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {

  html.login-active,
  body.login-active {
    background: #060115 !important;
  }

  #login-overlay {
    background: #060115 !important;
  }

  #login-overlay .page {
    background: transparent !important;
  }

  #login-overlay .left-panel,
  #login-overlay .right-panel {
    background: transparent !important;
  }

  /* Undo app hero full-bleed if any earlier rule leaked in */
  #login-overlay .hero {
    margin-left:  0 !important;
    margin-right: 0 !important;
    border-radius: 0 !important;
    overflow: visible !important;
  }
}