/* ═══════════════════════════════════════════════════════════════════════
   Touch target audit — 44×44px minimum, 16px screen-edge inset, button spacing
   Loaded last. Overrides legacy compact controls on phone / tablet / PWA.
   ═══════════════════════════════════════════════════════════════════════ */

:root {
  --touch-min: 44px;
  --touch-edge: 16px;
  --touch-gap: 12px;
  --touch-row-gap: 10px;
  --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));
  --page-pad-b: max(var(--touch-edge), env(safe-area-inset-bottom, 0px));
}

/* ── Screen-edge inset: scroll shell + chrome ───────────────────────── */
#content-area {
  padding-left: var(--page-pad-x) !important;
  padding-right: var(--page-pad-x-r) !important;
}

.app-topbar__bar {
  padding-left: var(--page-pad-x) !important;
  padding-right: var(--page-pad-x-r) !important;
}

@media (min-width: 641px) and (max-width: 1180px) {
  #sidebar-toggle {
    left: calc(var(--page-pad-x) + 2px) !important;
  }
}

.ov,
.confirm-ov {
  padding-left: max(var(--touch-edge), env(safe-area-inset-left, 0px)) !important;
  padding-right: max(var(--touch-edge), env(safe-area-inset-right, 0px)) !important;
  padding-bottom: max(var(--touch-edge), env(safe-area-inset-bottom, 0px)) !important;
}

.toast {
  max-width: calc(100% - var(--page-pad-x) - var(--page-pad-x-r) - 16px) !important;
}

.ln-toast-stack {
  right: calc(var(--touch-edge) + env(safe-area-inset-right, 0px)) !important;
}

@media (max-width: 480px) {
  .ln-toast-stack {
    left: var(--page-pad-x) !important;
    right: var(--page-pad-x-r) !important;
  }
}

/* Fixed / sticky action bars — keep controls off screen edges */
.reg-ctrl-sticky,
#reg-ctrl-sticky,
.pd-save-bar,
.stok-action-bar,
.mftr,
.modal .mftr,
.confirm-actions,
.confirm-box .confirm-actions {
  padding-left: max(var(--touch-edge), env(safe-area-inset-left, 0px)) !important;
  padding-right: max(var(--touch-edge), env(safe-area-inset-right, 0px)) !important;
  box-sizing: border-box !important;
}

/* ── Spacing between adjacent controls ─────────────────────────────── */
.ctrl,
.datebar,
.hero-actions,
.hero-inner .ctrl,
.side-quick,
.mob-side-quick,
.stok-action-bar,
.reg-ctrl-sticky,
#reg-ctrl-sticky,
.mftr,
.confirm-actions,
.modal-tab-nav,
.actpatmon-toolbar,
.actpatmon-filter-row,
#page-reports .rpt-tab-bar,
.ln-dd-foot,
.app-topbar__leading,
.app-topbar__trailing {
  gap: var(--touch-gap) !important;
}

.side-quick,
.mob-side-quick {
  padding-left: max(8px, calc(var(--touch-edge) - 8px));
  padding-right: max(8px, calc(var(--touch-edge) - 8px));
}

#mob-nav-drawer .mob-drawer-scroll {
  padding-left: max(8px, calc(var(--touch-edge) - 8px));
  padding-right: max(8px, calc(var(--touch-edge) - 8px));
}

#sidebar .side-nav,
#sidebar .side-quick {
  padding-left: max(8px, calc(var(--touch-edge) - 8px));
  padding-right: max(8px, calc(var(--touch-edge) - 8px));
}

/* ── 44px minimum height — all primary tap targets ─────────────────── */
@media (max-width: 1180px), (hover: none) and (pointer: coarse) {
  button,
  [role="button"],
  a.btn,
  .btn,
  .ctrl .btn,
  .ctrl .sel,
  .ctrl select,
  .topt,
  .pill,
  .pcard-act-btn,
  .dot-day-btn,
  .day-cell,
  .vtbtn,
  .modal-tab-btn,
  .ntab,
  .side-logout-btn,
  .mob-logout-btn,
  .dash-action-btn,
  .dash-attention-btn,
  .dash-refresh-btn,
  .pd-clinical-edit-btn,
  .pd-btn-sm,
  .pd-btn,
  .rpt-tab,
  .ln-dd-clear,
  .actpatmon-tab,
  .actpatmon-outline-btn,
  .actpatmon-primary-btn,
  .lo-submit-btn,
  .lo-role,
  .tpf-cta,
  .tpf-back-btn,
  input[type="submit"],
  input[type="button"],
  input[type="reset"],
  .sel,
  select,
  .datebar input[type="date"],
  .datebar input[type="text"],
  .datebar input[type="search"],
  .hero input[type="search"],
  #spubmon-att-search,
  #actpatmon-att-search,
  .actpatmon-search-inp {
    min-height: var(--touch-min) !important;
  }

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

  /* Icon-only controls — width + height */
  #mob-menu-btn,
  #ln-bell-btn,
  #sidebar-toggle,
  .mx,
  button.mx,
  .modal .mx,
  .ov .mx,
  .app-topbar__icon-btn,
  .app-topbar__logout-btn,
  .lap-close-btn,
  .lap-icon-btn,
  #page-laporan button[onclick*="close"],
  #page-laporan button[onclick*="Close"],
  .actpatmon-icon-btn,
  .dash-icon-btn,
  .ln-dd-head button,
  .pcard-menu-btn,
  .stok-row-action-icon,
  .wk-nav-btn,
  .disp-nav-btn {
    min-width: var(--touch-min) !important;
    min-height: var(--touch-min) !important;
    width: max(var(--touch-min), auto) !important;
    height: max(var(--touch-min), auto) !important;
  }

  #ln-bell-btn {
    width: var(--touch-min) !important;
    height: var(--touch-min) !important;
  }

  #sidebar-toggle {
    width: var(--touch-min) !important;
    height: var(--touch-min) !important;
    min-width: var(--touch-min) !important;
    min-height: var(--touch-min) !important;
  }

  @media (min-width: 1181px) {
    #sidebar-toggle {
      left: calc(var(--side-w) - 22px) !important;
    }

    body.sidebar-collapsed #sidebar-toggle {
      left: calc(62px - 22px) !important;
    }
  }

  .app-topbar__clinic-select,
  .app-topbar__clinic-static {
    min-height: var(--touch-min);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding-top: 8px !important;
    padding-bottom: 8px !important;
  }

  /* Inline compact overrides in pages */
  #page-disp .ctrl .btn,
  #page-disp .datebar button,
  #page-week .ctrl .btn,
  #page-week .datebar button,
  #page-cicir .ctrl .btn,
  #page-cicir .ctrl select,
  #page-stok .stok-action-bar > button,
  #page-reg .ctrl .btn,
  #page-users .ctrl .btn {
    min-height: var(--touch-min) !important;
  }

  #page-disp .ctrl .btn[style*="height:38"],
  #page-disp .datebar button[style*="height:38"] {
    height: auto !important;
  }
}

/* ── Desktop: still enforce 44px on header + sidebar toggle ────────── */
#mob-menu-btn,
#ln-bell-btn,
#sidebar-toggle,
.app-topbar__icon-btn {
  min-width: var(--touch-min) !important;
  min-height: var(--touch-min) !important;
}

.app-topbar__logout-btn {
  min-height: var(--touch-min) !important;
  padding-left: 14px !important;
  padding-right: 14px !important;
}

.app-topbar__trailing {
  gap: var(--touch-gap) !important;
}

/* ── Laporan / reports compact icons ───────────────────────────────── */
@media (max-width: 1180px) {
  #page-laporan .lap-close-btn,
  #page-laporan button[onclick*="closeComplianceModal"],
  #page-laporan button[onclick*="closeTrendModal"],
  #page-laporan .tk-action-btn,
  #page-reports .rpt-kpi-icon,
  #page-reports .rpt-export-btn,
  .lap-cat-alert-row button {
    min-width: var(--touch-min) !important;
    min-height: var(--touch-min) !important;
  }

  #page-laporan #tk-icon-wrap {
    width: var(--touch-min) !important;
    height: var(--touch-min) !important;
  }
}

/* ── Patient cards — action chips ──────────────────────────────────── */
@media (max-width: 640px) {
  .pcard-act-row {
    gap: var(--touch-gap) !important;
  }

  .pcard-act-btn {
    min-height: var(--touch-min) !important;
  }
}

/* ── Modals: footer buttons full tap height ────────────────────────── */
@media (max-width: 640px) {
  .mftr .btn,
  .confirm-actions button,
  .confirm-actions .btn {
    min-height: var(--touch-min) !important;
    flex: 1 1 calc(50% - var(--touch-gap) / 2);
  }

  .mftr {
    flex-wrap: wrap !important;
    gap: var(--touch-gap) !important;
  }
}

/* ── Reduce accidental edge taps on narrow screens ─────────────────── */
@media (max-width: 640px) {
  .hero-inner,
  .main > .ctrl:first-child,
  .datebar:first-child {
    padding-left: max(0px, calc(var(--touch-edge) - 12px));
    padding-right: max(0px, calc(var(--touch-edge) - 12px));
  }

  /* Keep first/last control off the physical screen bezel */
  .ctrl > .btn:first-child,
  .datebar > button:first-child,
  .hero-actions > button:first-child {
    margin-left: 0;
  }

  .ctrl > .btn:last-child,
  .datebar > button:last-child,
  .hero-actions > button:last-child {
    margin-right: 0;
  }
}

/* ── Checkbox / radio — expand hit area ────────────────────────────── */
@media (max-width: 1180px), (hover: none) and (pointer: coarse) {
  input[type="checkbox"],
  input[type="radio"] {
    width: 20px;
    height: 20px;
    min-width: 20px;
    min-height: 20px;
  }

  label:has(> input[type="checkbox"]),
  label:has(> input[type="radio"]) {
    min-height: var(--touch-min);
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding-block: 6px;
  }
}

/* ── Login flow (mobile PWA) ───────────────────────────────────────── */
@media (max-width: 1180px) {
  .tpf-back-btn,
  .tpf-cta,
  #tpf-form-wrap .lo-submit-btn,
  #tpf-form-wrap .lo-role,
  .lo-eye-btn,
  .lo-back-btn {
    min-height: var(--touch-min) !important;
    min-width: var(--touch-min);
  }

  .tpf-back-btn,
  .lo-back-btn,
  .lo-eye-btn {
    min-width: var(--touch-min) !important;
  }

  #login-overlay .left-panel,
  #login-overlay .right-panel {
    padding-left: var(--page-pad-x) !important;
    padding-right: var(--page-pad-x-r) !important;
  }
}

/* ── Active patient monitoring tables ─────────────────────────────── */
@media (max-width: 1180px) {
  .actpatmon-tab,
  .actpatmon-outline-btn,
  .actpatmon-primary-btn,
  .actpatmon-att-btn {
    min-height: var(--touch-min) !important;
  }
}

/* ── Tap highlight — subtle, no double-tap zoom on controls ────────── */
button,
[role="button"],
.ntab,
.btn,
a.btn {
  touch-action: manipulation;
  -webkit-tap-highlight-color: rgba(124, 110, 154, 0.12);
}