/* ═══════════════════════════════════════════════════════════════════════
   Native iOS mobile UX — spacing, motion, sheets, typography, cards
   Usability only — preserves existing color palette & branding.
   Loaded last (after touch-targets.css).
   ═══════════════════════════════════════════════════════════════════════ */

:root {
  --ios-ease: cubic-bezier(0.32, 0.72, 0, 1);
  --ios-ease-out: cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --ios-duration: 0.38s;
  --ios-duration-fast: 0.22s;
  --ios-radius-sm: 10px;
  --ios-radius-md: 14px;
  --ios-radius-lg: 18px;
  --ios-sheet-radius: 20px;
  --ios-space-xs: 8px;
  --ios-space-sm: 12px;
  --ios-space-md: 16px;
  --ios-space-lg: 20px;
  --ios-space-xl: 24px;
  --ios-shadow-card:
    0 1px 2px rgba(26, 9, 56, 0.04),
    0 4px 16px rgba(26, 9, 56, 0.06);
  --ios-shadow-elevated:
    0 8px 28px rgba(26, 9, 56, 0.12),
    0 2px 8px rgba(26, 9, 56, 0.06);
  --ios-shadow-sheet:
    0 -4px 32px rgba(26, 9, 56, 0.14),
    0 -1px 0 rgba(221, 216, 240, 0.6);
  --ios-backdrop: rgba(26, 9, 56, 0.42);
  --ios-type-body: 16px;
  --ios-type-sub: 14px;
  --ios-type-cap: 12px;
  --ios-type-title: 22px;
  --ios-leading: 1.45;
}

/* ── Typography & rendering ────────────────────────────────────────── */
@media (max-width: 1180px) {
  body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    font-size: var(--ios-type-body);
    line-height: var(--ios-leading);
  }

  .hero-title {
    font-size: var(--ios-type-title) !important;
    letter-spacing: -0.35px !important;
    line-height: 1.2 !important;
  }

  .hero-sub,
  .hero-subtitle,
  .dash-subtitle {
    font-size: var(--ios-type-sub) !important;
    line-height: var(--ios-leading) !important;
    color: var(--ink3) !important;
  }

  .sc-l,
  .dash-kpi-lbl,
  .hstat-l,
  .rcount,
  .nav-section-label {
    font-size: var(--ios-type-cap) !important;
    letter-spacing: 0.02em;
  }

  .pname,
  .mname,
  .dash-title {
    font-size: 17px !important;
    letter-spacing: -0.2px;
  }

  .pic,
  .mbody,
  .main,
  .ctrl .btn,
  .btn {
    font-size: var(--ios-type-body);
  }
}

/* ── Page rhythm & spacing ─────────────────────────────────────────── */
@media (max-width: 1180px) {
  .main,
  .dash-wrap {
    padding: var(--ios-space-md) var(--ios-space-sm) var(--ios-space-xl) !important;
  }

  .hero-inner {
    padding: var(--ios-space-lg) var(--ios-space-sm) !important;
  }

  .scards,
  .pgrid,
  #page-dashboard .dash-kpi-row,
  #page-dashboard .dash-grid,
  #page-reports .rpt-kpi-grid,
  #page-reports .rpt-charts-grid {
    gap: var(--ios-space-sm) !important;
  }

  .ctrl,
  .datebar,
  .rbar,
  .reg-ctrl-sticky,
  #reg-ctrl-sticky {
    margin-bottom: var(--ios-space-sm) !important;
    gap: var(--ios-space-sm) !important;
  }

  .pgrid {
    gap: var(--ios-space-sm) !important;
  }
}

/* ── Rounded cards & iOS shadows (palette unchanged) ──────────────── */
@media (max-width: 1180px) {
  .sc,
  .pcard,
  #page-dashboard .dash-kpi,
  #page-dashboard .dash-panel,
  #page-reports .rpt-kpi-card,
  #page-reports .rpt-chart-card,
  .actpatmon-kpi,
  .actpatmon-widget,
  .pd-card,
  .lap-card,
  .confirm-box,
  .modal-tab-nav,
  .tbl-wrap {
    border-radius: var(--ios-radius-md) !important;
    box-shadow: var(--ios-shadow-card) !important;
    border-color: rgba(221, 216, 240, 0.9) !important;
  }

  .pcard {
    border-width: 1px !important;
  }

  .sc {
    padding: var(--ios-space-md) !important;
  }

  .pcard-body {
    padding: var(--ios-space-md) !important;
  }

  @media (hover: none) {
    .pcard:hover,
    .sc:hover,
    #page-dashboard .dash-kpi:hover {
      transform: none !important;
      box-shadow: var(--ios-shadow-card) !important;
    }

    .pcard:active {
      transform: scale(0.985);
      transition: transform var(--ios-duration-fast) var(--ios-ease);
    }
  }
}

/* ── Smooth scrolling ──────────────────────────────────────────────── */
#content-area,
.mbody,
.modal,
.confirm-box,
.tbl-wrap,
.mob-drawer-scroll,
#sidebar .side-nav,
.modal-tab-nav,
.actpatmon-table-wrap,
.pd-col-right {
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-y: contain;
}

@media (prefers-reduced-motion: no-preference) {
  #content-area {
    scroll-behavior: smooth;
  }
}

/* ── Scroll lock when overlays open ────────────────────────────────── */
body.ios-scroll-lock,
body.mob-sidebar-open,
body:has(.ov.open),
body:has(.confirm-ov.open) {
  overflow: hidden;
  overscroll-behavior: none;
}

/* ── Native press feedback ─────────────────────────────────────────── */
@media (max-width: 1180px) {
  button,
  .btn,
  .ntab,
  .pill,
  .topt,
  .pcard-act-btn,
  .dash-action-btn,
  .dash-refresh-btn,
  .rpt-tab,
  .modal-tab-btn {
    transition:
      transform var(--ios-duration-fast) var(--ios-ease),
      background var(--ios-duration-fast) ease,
      box-shadow var(--ios-duration-fast) ease,
      opacity var(--ios-duration-fast) ease;
  }

  button:active:not(:disabled),
  .btn:active:not(:disabled),
  .ntab:active,
  .pill:active,
  .pcard-act-btn:active {
    transform: scale(0.97);
    opacity: 0.92;
  }
}

/* ── Page enter transition ─────────────────────────────────────────── */
@media (max-width: 1180px) and (prefers-reduced-motion: no-preference) {
  .page.active {
    animation: ios-page-in var(--ios-duration-fast) var(--ios-ease) both;
  }
}

@keyframes ios-page-in {
  from {
    opacity: 0.88;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ── Drawer / sidebar motion ───────────────────────────────────────── */
@media (max-width: 1180px) {
  #sidebar,
  #mob-nav-drawer > .mob-nav-drawer,
  #mob-nav-drawer > nav.mob-nav-drawer {
    transition: transform var(--ios-duration) var(--ios-ease) !important;
  }

  #sidebar-backdrop,
  #mob-nav-drawer {
    transition: opacity var(--ios-duration-fast) ease,
      background var(--ios-duration-fast) ease;
  }

  #mob-nav-drawer .ntab,
  #sidebar .ntab {
    border-radius: var(--ios-radius-sm);
    margin-bottom: 2px;
  }
}

/* ══ Bottom sheet modals (phone) ═══════════════════════════════════ */
@media (max-width: 640px) {
  .ov.open {
    align-items: flex-end !important;
    justify-content: center !important;
    padding: 0 !important;
    padding-bottom: 0 !important;
    background: var(--ios-backdrop) !important;
    -webkit-backdrop-filter: blur(6px) saturate(120%);
    backdrop-filter: blur(6px) saturate(120%);
    animation: ios-backdrop-in var(--ios-duration-fast) ease both;
  }

  .ov.open .modal,
  #modal-ov.open .modal {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    border-radius: var(--ios-sheet-radius) var(--ios-sheet-radius) 0 0 !important;
    max-height: min(92dvh, calc(100dvh - var(--app-header-total, 52px))) !important;
    box-shadow: var(--ios-shadow-sheet) !important;
    animation: ios-sheet-up var(--ios-duration) var(--ios-ease) both !important;
    transform-origin: bottom center;
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }

  /* Sheet grab handle */
  .ov.open .modal::before,
  #modal-ov.open .modal::before {
    content: '';
    display: block;
    width: 36px;
    height: 5px;
    margin: 10px auto 6px;
    border-radius: 3px;
    background: rgba(124, 110, 154, 0.35);
    flex-shrink: 0;
  }

  #modal-ov.open .modal {
    display: flex;
    flex-direction: column;
  }

  #modal-ov.open .modal::before {
    order: -2;
  }

  #modal-ov.open .modal-stripe {
    order: -1;
    border-radius: 0 !important;
  }

  .ov.open .mhdr {
    padding-top: var(--ios-space-sm) !important;
  }

  .modal-footer-sticky,
  .mftr {
    padding-bottom: max(var(--ios-space-md), env(safe-area-inset-bottom, 0px)) !important;
    border-top: 1px solid var(--rule);
    background: rgba(255, 255, 255, 0.94);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
  }

  /* Confirm dialogs — centered card with spring (iOS alert style) */
  .confirm-ov.open {
    align-items: center !important;
    background: var(--ios-backdrop) !important;
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    animation: ios-backdrop-in var(--ios-duration-fast) ease both;
  }

  .confirm-ov.open .confirm-box {
    border-radius: var(--ios-radius-lg) !important;
    animation: ios-alert-in var(--ios-duration) var(--ios-ease) both !important;
    box-shadow: var(--ios-shadow-elevated) !important;
    margin: var(--ios-space-md);
  }

  .confirm-btns {
    gap: var(--ios-space-sm) !important;
  }

  .confirm-btns .btn {
    border-radius: var(--ios-radius-sm) !important;
    font-weight: 600 !important;
  }
}

@keyframes ios-sheet-up {
  from {
    opacity: 0.6;
    transform: translateY(100%);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes ios-backdrop-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes ios-alert-in {
  from {
    opacity: 0;
    transform: scale(0.92);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

/* Tablet: centered modal with soft spring (not full bottom sheet) */
@media (min-width: 641px) and (max-width: 1180px) {
  .ov.open {
    background: var(--ios-backdrop) !important;
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
    align-items: center !important;
    padding: var(--ios-space-lg) !important;
  }

  .ov.open .modal {
    border-radius: var(--ios-radius-lg) !important;
    box-shadow: var(--ios-shadow-elevated) !important;
    animation: ios-alert-in var(--ios-duration) var(--ios-ease) both !important;
    max-height: min(88dvh, calc(100dvh - var(--app-header-total) - 32px)) !important;
  }
}

/* ── Toast — native pill ───────────────────────────────────────────── */
@media (max-width: 1180px) {
  .toast {
    border-radius: 999px !important;
    padding: 12px 20px !important;
    font-size: var(--ios-type-sub) !important;
    font-weight: 600 !important;
    box-shadow: var(--ios-shadow-elevated) !important;
    bottom: calc(var(--ios-space-md) + env(safe-area-inset-bottom, 0px)) !important;
    transition:
      transform var(--ios-duration) var(--ios-ease),
      opacity var(--ios-duration-fast) ease !important;
  }

  .toast.show {
    animation: ios-toast-in var(--ios-duration) var(--ios-ease) both;
  }
}

@keyframes ios-toast-in {
  from {
    opacity: 0;
    transform: translateX(-50%) translateY(16px) scale(0.94);
  }
  to {
    opacity: 1;
    transform: translateX(-50%) translateY(0) scale(1);
  }
}

/* ── Loading boot screen polish ────────────────────────────────────── */
#loading-screen,
#loading-screen-2,
.kkpms-loading-screen {
  -webkit-backdrop-filter: blur(0);
}

.kkpms-loading-card {
  transition:
    opacity 0.55s var(--ios-ease),
    transform 0.55s var(--ios-ease) !important;
}

.kkpms-loading-visible .kkpms-loading-card {
  animation: ios-loading-card-in 0.65s var(--ios-ease) both;
}

@keyframes ios-loading-card-in {
  from {
    opacity: 0;
    transform: translateY(14px) scale(0.97);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.kkpms-loading-bar-fill,
.kkpms-loading-bar-track {
  border-radius: 999px !important;
}

.kkpms-loading-bar-fill {
  transition: width 0.45s var(--ios-ease) !important;
}

@media (prefers-reduced-motion: no-preference) {
  .kkpms-loading-logo-circle {
    animation: ios-loading-breathe 2.4s ease-in-out infinite !important;
  }

  .kkpms-loading-pill {
    animation: ios-loading-pill 1.1s var(--ios-ease-in-out, ease-in-out) infinite !important;
  }
}

@keyframes ios-loading-breathe {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.04); opacity: 0.92; }
}

@keyframes ios-loading-pill {
  0%, 100% { transform: translateY(0); opacity: 0.55; }
  50% { transform: translateY(-4px); opacity: 1; }
}

/* Inline / skeleton loading states */
.loading,
.is-loading,
.rpt-kpi-value.loading,
[data-loading="true"] {
  position: relative;
}

.rpt-kpi-value.loading,
.shimmer,
.ios-skeleton {
  background: linear-gradient(
    90deg,
    rgba(221, 216, 240, 0.35) 25%,
    rgba(221, 216, 240, 0.65) 50%,
    rgba(221, 216, 240, 0.35) 75%
  ) !important;
  background-size: 200% 100% !important;
  animation: ios-shimmer 1.4s ease-in-out infinite !important;
  border-radius: var(--ios-radius-sm) !important;
}

@keyframes ios-shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

.dash-refresh-btn.is-loading .ti-refresh,
.btn.is-loading .ti-refresh {
  animation: ios-spin 0.85s linear infinite;
}

@keyframes ios-spin {
  to { transform: rotate(360deg); }
}

/* ── Form inputs — iOS comfortable height ──────────────────────────── */
@media (max-width: 1180px) {
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
  select,
  textarea,
  .sel {
    border-radius: var(--ios-radius-sm) !important;
    min-height: var(--touch-min, 44px);
    font-size: 16px !important; /* prevents iOS zoom on focus */
  }

  textarea {
    min-height: 88px;
    padding: var(--ios-space-sm) !important;
  }
}

/* ── SPUB / active patient bottom sheets (module overlays) ─────────── */
@media (max-width: 768px) {
  .actpatmon-clinical-ov.open,
  .actpatmon-clinical-ov[style*="display: flex"],
  .actpatmon-clinical-ov[style*="display:flex"] {
    align-items: flex-end !important;
    background: var(--ios-backdrop) !important;
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
  }

  .actpatmon-clinical-modal {
    border-radius: var(--ios-sheet-radius) var(--ios-sheet-radius) 0 0 !important;
    box-shadow: var(--ios-shadow-sheet) !important;
    animation: ios-sheet-up var(--ios-duration) var(--ios-ease) both;
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }
}

/* ── Reduced motion ────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  .page.active {
    animation: none !important;
  }
}