/* ═══════════════════════════════════════════════════════════════════════
   OmniMeth / KKPMS — Responsive System (mobile-first, desktop-safe)
   Loaded before app-topbar + viewport-units. See css/viewport-units.css
   for dvh/svh/lvh shell height rules.
   ═══════════════════════════════════════════════════════════════════════ */

:root {
  --touch-min: 44px;
  --touch-edge: 16px;
  --touch-gap: 12px;
  --app-w: 100%;
  --bp-sm: 640px;
  --bp-md: 768px;
  --bp-lg: 1180px;
  --page-pad-x: max(var(--touch-edge), env(safe-area-inset-left, 0px));
  --page-pad-x-r: max(var(--touch-edge), env(safe-area-inset-right, 0px));
  --scroll-trap-radius: 12px;
}

/* ── Global containment (no page-level horizontal scroll) ─────────────── */
html,
body {
  max-width: var(--app-w) !important;
  overflow-x: clip;
}

#app-shell {
  max-width: var(--app-w) !important;
  width: var(--app-w) !important;
  overflow-x: clip;
}

#content-area {
  overflow-x: clip;
  overflow-y: auto;
  max-width: var(--app-w);
}

.page,
.page.active {
  max-width: var(--app-w);
  overflow-x: clip;
  box-sizing: border-box;
}

.main,
.dash-wrap,
.hero,
.hero-inner,
.wk-kpi-strip,
.wk-vol-bar {
  max-width: 100%;
  box-sizing: border-box;
}

img,
video,
canvas,
svg {
  max-width: 100%;
  height: auto;
}

/* ── Scroll trap: wide tables scroll INSIDE card, not the page ──────── */
.tbl-wrap,
.scroll-x-trap {
  overflow-x: auto;
  overflow-y: visible;
  -webkit-overflow-scrolling: touch;
  max-width: 100%;
  width: 100%;
  box-sizing: border-box;
  overscroll-behavior-x: contain;
}

.tbl-scroll-inner {
  display: inline-block;
  min-width: 100%;
  vertical-align: top;
  box-sizing: border-box;
}

/* ── Touch targets (iOS HIG 44px minimum) ─────────────────────────── */
@media (max-width: 1180px) {
  .btn,
  .ctrl .btn,
  .ctrl .sel,
  .topt,
  .pill,
  .pcard-act-btn,
  .dot-day-btn,
  .day-cell,
  .vtbtn,
  .modal-tab-btn,
  #mob-menu-btn,
  #ln-bell-btn,
  .side-logout-btn,
  .mob-logout-btn,
  .dash-action-btn,
  .dash-attention-btn,
  .dash-refresh-btn,
  .pd-clinical-edit-btn,
  .pd-btn-sm,
  .rpt-tab,
  .ln-dd-clear {
    min-height: var(--touch-min);
  }

  .mx,
  button.mx {
    width: var(--touch-min) !important;
    height: var(--touch-min) !important;
    min-width: var(--touch-min) !important;
    min-height: var(--touch-min) !important;
  }

  .pill,
  .pcard-act-btn {
    min-height: var(--touch-min);
    padding-top: 10px !important;
    padding-bottom: 10px !important;
  }
}

/* ── Topbar: legacy padding overrides neutralised by app-topbar.css ── */
@media (max-width: 640px) {
  #topbar {
    gap: 0 !important;
  }

  .topbar-title {
    /* Title lives in centered stack — see app-topbar.css */
    flex: none !important;
  }

  #nav-time,
  .nav-date {
    display: none !important;
  }

  #ln-bell-wrap {
    flex-shrink: 0;
  }

  #nav-user-badge {
    display: none !important;
  }
}

/* ── Collapse inline 2-col grids (modals, forms, alerts) ──────────── */
@media (max-width: 640px) {
  .mgrid,
  .modal .mgrid,
  .ov .mgrid,
  .confirm-box [style*="grid-template-columns: 1fr 1fr"],
  .confirm-box [style*="grid-template-columns:1fr 1fr"],
  .mbody [style*="grid-template-columns: 1fr 1fr"],
  .mbody [style*="grid-template-columns:1fr 1fr"],
  .modal [style*="grid-template-columns: 1fr 1fr"],
  .modal [style*="grid-template-columns:1fr 1fr"],
  #page-laporan .main > div[style*="grid-template-columns:1fr 1fr"],
  #page-laporan .main > div[style*="grid-template-columns: 1fr 1fr"],
  #page-users .main > div:first-child > div:last-child > div[style*="grid-template-columns"],
  .lap-cat-alert-row {
    grid-template-columns: 1fr !important;
  }

  .hero-stats-modules,
  .hero-stats-modules[style*="grid-template-columns"] {
    grid-template-columns: 1fr !important;
  }
}

/* ── Date / week controls ─────────────────────────────────────────── */
@media (max-width: 640px) {
  #w-week-label,
  .week-label-compact {
    min-width: 0 !important;
    flex: 1 1 auto !important;
    max-width: 100% !important;
    font-size: 12px !important;
    height: var(--touch-min) !important;
  }

  .datebar {
    flex-wrap: wrap !important;
    gap: 8px !important;
  }

  .datebar button[style*="min-width"] {
    min-width: 0 !important;
    flex: 1 1 calc(50% - 4px) !important;
    min-height: var(--touch-min) !important;
  }
}

/* ── Dashboard ─────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  #page-dashboard .dash-kpi-row {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  #page-dashboard .dash-grid {
    grid-template-columns: 1fr !important;
  }

  #page-dashboard .dash-action-btn,
  #page-dashboard .dash-attention-btn,
  #page-dashboard .dash-refresh-btn {
    min-height: var(--touch-min);
    width: 100%;
  }

  #page-dashboard .dash-chart-wrap {
    overflow-x: auto;
    overscroll-behavior-x: contain;
  }

  #page-dashboard .dash-chart-wrap canvas {
    max-width: 100%;
  }
}

/* ── Dose calculator & weekly records (tbl-scroll-inner contract) ─── */
@media (max-width: 768px) {
  #page-disp .tbl-wrap,
  #page-week .tbl-wrap {
    overflow-x: auto !important;
    max-width: 100% !important;
  }

  /* Single width contract — remove legacy 700/860px tiers */
  #page-disp .tbl-scroll-inner > .disp-hdr,
  #page-disp .tbl-scroll-inner > #d-body > .disp-row,
  #page-disp .tbl-scroll-inner > #d-body > .disp-cat-hdr,
  #page-disp .tbl-scroll-inner > #d-body {
    width: min(960px, max(100%, 960px)) !important;
    min-width: 960px !important;
    max-width: none !important;
  }

  #page-week .tbl-scroll-inner > .week-hdr,
  #page-week .tbl-scroll-inner > #w-body > .week-row,
  #page-week .tbl-scroll-inner > #w-body > .week-cat-hdr,
  #page-week .tbl-scroll-inner > #week-ext-rows > .week-ext-hdr,
  #page-week .tbl-scroll-inner > #week-ext-rows > .week-ext-row,
  #page-week .tbl-scroll-inner > #w-body {
    width: min(920px, max(100%, 920px)) !important;
    min-width: 920px !important;
    max-width: none !important;
  }
}

/* ── Stock control: enforce card layout (no page horizontal scroll) ── */
@media (max-width: 768px) {
  #page-stok .stok-table-card,
  #page-stok .main > div:last-child,
  #page-stok .stok-scroll-wrap,
  #page-stok #stok-table-body {
    overflow-x: visible !important;
    max-width: 100% !important;
    min-width: 0 !important;
    width: 100% !important;
  }

  #page-stok .stok-grid-hdr,
  #page-stok .stok-scroll-wrap > div[style*="grid-template-columns"]:first-child {
    display: none !important;
  }

  #page-stok .stok-row,
  #stok-table-body > div.stok-row,
  #stok-table-body > div[style*="grid-template-columns"] {
    display: flex !important;
    flex-direction: column !important;
    min-width: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  #page-stok .stok-row > div,
  #stok-table-body > div[aria-hidden="true"] {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }

  #page-stok .dcf-breakdown-grid {
    grid-template-columns: 1fr 1fr !important;
  }

  #page-stok .stok-action-bar {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
  }

  #page-stok .stok-action-bar > button {
    min-height: var(--touch-min) !important;
    width: 100% !important;
  }
}

@media (max-width: 480px) {
  #page-stok .dcf-breakdown-grid {
    grid-template-columns: 1fr !important;
  }

  #page-stok .stok-action-bar {
    grid-template-columns: 1fr !important;
  }
}

/* ── Registry archive table ────────────────────────────────────────── */
@media (max-width: 640px) {
  #page-registry .main > div:first-child > div > div:last-child {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  #reg-table {
    min-width: 900px;
    width: 100%;
  }
}

/* Search inputs: shrink on narrow screens */
@media (max-width: 640px) {
  #spubmon-att-search,
  #actpatmon-att-search,
  .actpatmon-search-inp {
    min-width: 0 !important;
    flex: 1 1 120px !important;
    max-width: 100% !important;
  }
}

/* ── Reports & analytics ─────────────────────────────────────────── */
@media (max-width: 768px) {
  #page-reports .rpt-charts-grid {
    grid-template-columns: 1fr !important;
  }

  #page-reports .rpt-kpi-row {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  #page-reports .rpt-tab-bar {
    overflow-x: auto;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
    max-width: 100%;
    flex-wrap: nowrap;
  }

  #page-reports .rpt-tab {
    flex-shrink: 0;
    min-height: var(--touch-min);
  }

  #page-reports .rpt-chart-canvas-wrap {
    height: min(220px, 50vw);
    min-height: 160px;
  }
}

@media (max-width: 480px) {
  #page-reports .rpt-kpi-row {
    grid-template-columns: 1fr !important;
  }
}

/* ── Laporan / trends ──────────────────────────────────────────────── */
@media (max-width: 640px) {
  #page-laporan .main > div[style*="grid-template-columns"] {
    grid-template-columns: 1fr !important;
  }

  #methadone-stats-body div[style*="grid-template-columns"],
  #methadone-daily-body div[style*="grid-template-columns"] {
    grid-template-columns: 1fr 1fr !important;
  }

  #page-laporan [style*="width:130px"][style*="height:130px"],
  #page-laporan [style*="width: 130px"][style*="height: 130px"] {
    width: min(130px, 28vw) !important;
    height: min(130px, 28vw) !important;
  }
}

/* ── Users / settings ──────────────────────────────────────────────── */
@media (max-width: 640px) {
  #page-users .main {
    padding: 14px var(--page-pad-x) calc(12px + env(safe-area-inset-bottom, 0px)) !important;
  }

  #page-users .main > div:last-child {
    overflow-x: auto;
    overscroll-behavior-x: contain;
    max-width: 100%;
  }

  #page-users #u-list > div,
  #page-users .u-user-row {
    min-width: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
  }
}

/* ── Patient detail ────────────────────────────────────────────────── */
@media (max-width: 1023px) {
  #page-patient-detail .pd-layout-grid {
    grid-template-columns: 1fr !important;
  }

  #page-patient-detail .pd-tab-bar {
    overflow-x: auto;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
    max-width: 100%;
  }

  #page-patient-detail .pd-tab {
    min-height: var(--touch-min);
    flex-shrink: 0;
  }
}

/* ── Modals: full-width safe, no clip ──────────────────────────────── */
@media (max-width: 640px) {
  .modal {
    width: 100% !important;
    max-width: 100% !important;
    border-radius: 14px 14px 0 0 !important;
  }

  .modal-tab-nav {
    overflow-x: auto;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
    max-width: 100%;
    flex-wrap: nowrap !important;
  }

  .modal-tab-btn {
    flex-shrink: 0;
    white-space: nowrap;
  }

  .mbody,
  .mhdr {
    max-width: 100%;
    overflow-x: hidden;
  }
}

/* ── Sidebar drawer ────────────────────────────────────────────────── */
@media (max-width: 1180px) {
  #sidebar .ntab,
  #mob-nav-drawer .ntab {
    min-height: var(--touch-min);
  }
}

/* ── Charts: responsive height ─────────────────────────────────────── */
@media (max-width: 640px) {
  canvas {
    max-width: 100% !important;
  }

  .lap-chart-grid,
  .lap-donut-grid {
    grid-template-columns: 1fr !important;
  }
}

/* ── Prevent layout shift from 100vw scrollbar bleed ───────────────── */
@supports (overflow: clip) {
  html,
  body,
  #app-shell,
  #content-area {
    overflow-x: clip;
  }
}