/* ================================================================
   DTTASA Portal — Shared iOS / Safe-Area Shim
   Loaded by every page (after page-specific CSS so it wins).
   No-ops on Android / desktop — every fix is guarded by feature
   queries, media queries or html.is-ios body classes set by
   js/ios-shim.js. Keep the rules cheap; this file is in-flight on
   every page load.
   ================================================================ */

/* ── 1. Safe-area inset on every fixed top header/banner ───────── */
@supports (padding: env(safe-area-inset-top)) {
  /* Generic fixed headers used across the portal */
  header#hdr,
  header#header,
  .hdr-fixed,
  #top-banner,
  #test-mode-banner,
  #maint-banner,
  .ios-safe-top {
    padding-top: max(env(safe-area-inset-top), 0px) !important;
  }
  /* Sticky elements (login overlay, modal headers) */
  .ios-safe-top-pad {
    padding-top: env(safe-area-inset-top) !important;
  }
  /* Push the page body down so content isn't covered by the
     safe-area-padded header. Pages that already use 100vh and the
     existing header inset will keep working — this only adds. */
  html.is-ios body {
    padding-top: env(safe-area-inset-top);
  }
  /* Bottom home-indicator inset for sticky bottom bars */
  .ios-safe-bottom,
  .sticky-bottom-bar,
  .fixed-bottom-bar {
    padding-bottom: max(env(safe-area-inset-bottom), 0px) !important;
  }
}

/* ── 2. Prevent iOS Safari zoom on input focus ─────────────────── */
/* iOS zooms when an input's computed font-size is below 16px. Force
   ≥16px on every focusable field inside the app shell. */
@media (pointer: coarse) {
  html.is-ios input:not([type=hidden]),
  html.is-ios textarea,
  html.is-ios select {
    font-size: 16px !important;
  }
}

/* ── 3. Use dynamic viewport units where available ─────────────── */
/* `100vh` includes the URL bar on iOS Safari, causing content to
   scroll off-screen when the bar collapses. `100dvh` follows the
   visible viewport. Promote where possible. */
@supports (height: 100dvh) {
  html.is-ios .vh-fallback-100,
  html.is-ios #shell.full-height,
  html.is-ios .modal-overlay,
  html.is-ios .mhr-modal-bg {
    min-height: 100dvh;
  }
  html.is-ios .vh-fallback-100v {
    height: 100dvh;
  }
}

/* ── 4. Touch target minimums (icon-only buttons) ──────────────── */
@media (pointer: coarse) {
  html.is-ios .btn-icon,
  html.is-ios .snav-arrow,
  html.is-ios .hdr-icon-btn,
  html.is-ios .mhr-modal-close {
    min-width: 44px;
    min-height: 44px;
  }
}

/* ── 5. Native scroll feel ─────────────────────────────────────── */
html.is-ios body { -webkit-overflow-scrolling: touch; }
html.is-ios .modal-body,
html.is-ios .snp-body,
html.is-ios .rota-scroll,
html.is-ios .dtbl-wrap { overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }

/* ── 6. iOS WKWebView fix for transparent dark inputs ──────────── */
html.is-ios input,
html.is-ios textarea,
html.is-ios select { -webkit-appearance: none; appearance: none; }

/* ── 7. Disable iOS long-press text callouts on buttons / links ─ */
html.is-ios button,
html.is-ios .btn,
html.is-ios a.btn { -webkit-touch-callout: none; -webkit-tap-highlight-color: transparent; }

/* ──────────────────────────────────────────────────────────────────
   8. Universal iPhone-width patches (≤540px / ≤414px / ≤400px)
   Single source of truth for narrow-viewport behaviour across every
   page that includes ios-shim.css (69 pages). Page CSS may still add
   its own rules — these run as the baseline.
   ────────────────────────────────────────────────────────────────── */

/* 8a. Modals — never breach the 24px safe-zone on phones */
@media (max-width: 540px) {
  .modal-box,
  .modal-card,
  .modal-overlay > .modal,
  .modal,
  .mhr-modal-box,
  .sa-modal,
  .ec-modal,
  .it-modal,
  .ops-modal {
    max-width: calc(100vw - 24px) !important;
    padding: 18px 14px !important;
  }
  .modal-overlay,
  .mhr-modal-bg { padding: 10px !important; }
}

/* 8b. Tables wider than the viewport → native horizontal scroll.
   Tables already wrapped in .rota-scroll / .dtbl-wrap keep working. */
@media (max-width: 540px) {
  .cv table,
  main table,
  .glass table,
  .dtbl,
  .data-table { display: block !important; overflow-x: auto; -webkit-overflow-scrolling: touch; max-width: 100%; }
}

/* 8c. Hide non-essential header decorations on phones (CLAUDE.md spec) */
@media (max-width: 640px) {
  .page-pill,
  .hdr-clock,
  .hdr-center { display: none !important; }
  .hdr-back-btn span,
  .back-btn span { display: none !important; }
}

/* 8d. Touch targets — broaden to any button-like element on coarse pointers */
@media (pointer: coarse) {
  .btn-sm,
  .btn-xs,
  .icon-btn,
  .hdr-icon-btn { min-height: 38px; min-width: 38px; }
}

/* 8e. Drawer panels — full-screen on phones so close-buttons stay on-canvas */
@media (max-width: 540px) {
  #cmp-drawer,
  .side-drawer,
  .right-drawer { width: 100vw !important; }
}

/* 8f. Floating action buttons — clear the iOS home-indicator gesture */
@supports (padding: env(safe-area-inset-bottom)) {
  html.is-ios .fab,
  html.is-ios [class*="-fab"] {
    bottom: calc(24px + env(safe-area-inset-bottom, 0px)) !important;
  }
}

/* ──────────────────────────────────────────────────────────────────
   9. DEMO MODE — hide pages demo users should not see. The
   `demo-mode` class is added to <body> by firebase-init.js when the
   signed-in user is on the demo allow-list.

   ▸ SA Control Centre — meta-admin (system flags, schema, the demo
     email list itself). Apple doesn't review this; demo users don't
     need it, and exposing it would be a recursive admin surface.

   ▸ To hide any future not-yet-built nav item, add its selector to
     the rule below. The demo user still sees every other admin
     surface their accessLevel (4) grants.
   ────────────────────────────────────────────────────────────────── */
body.demo-mode #sa-control-mi,
body.demo-mode [data-demo-hide] {
  display: none !important;
}

/* Demo banner sits fixed at bottom (z-index:10000000) — push the sidebar
   scroll area + main content up so the "Log Out System" button and any
   page footer aren't covered by it. ~38px banner + 8px breathing room. */
body.demo-mode #sidebar,
body.demo-mode #page-sidebar,
body.demo-mode main {
  padding-bottom: calc(46px + env(safe-area-inset-bottom, 0px)) !important;
}