/* ═════════════════════════════════════════════════════════════════════════
   mobile-fixes.css — narrow, defensive mobile + iOS-safe-area helpers
   ─────────────────────────────────────────────────────────────────────────
   Earlier version of this file used broad attribute selectors to stack
   inline grids and force tables into block layout. Those rules had higher
   specificity than legitimate per-page responsive rules (e.g. `.vh-cal`)
   and broke things they were trying to help.

   This version is intentionally conservative — only includes rules that
   CANNOT make a page worse. Per-page grids + tables that need to stack
   on mobile are handled in the views themselves.

   What stays:
     • iOS safe-area-inset padding for fixed modals + .oh-cm
     • max-height: 90vh → 100svh safe for modal content
     • word-break on monospace strings <600px
     • html/body overflow-x clip (last-resort horizontal-scroll guard)
     • 44×44 minimum tap target on common buttons <600px

   What's NOT here anymore (removed because they broke vh-grid views):
     • Inline grid auto-stacking selector (collapsed vh-cal calendar)
     • `<table> { display: block; overflow-x: auto }` (broke vh-wo-table)
   ═════════════════════════════════════════════════════════════════════ */


/* ── (A0) Stack 3–6 column inline grids on phones ──────────────────
   Targeted selectors that catch the SPECIFIC patterns known to cause
   overflow on iPhone — `repeat(3,1fr)`, `repeat(4,1fr)`, etc. Does NOT
   match repeat(7+) which most calendars use; those have their own
   per-page responsive rules. Lower-specificity than class-based rules
   (0,1,0 vs 0,1,0 with !important on the class side), so any view that
   wants different behavior can still override via a class selector. */
@media (max-width: 600px) {
    [style*="grid-template-columns:repeat(3,1fr)"],
    [style*="grid-template-columns: repeat(3, 1fr)"],
    [style*="grid-template-columns:repeat(4,1fr)"],
    [style*="grid-template-columns: repeat(4, 1fr)"],
    [style*="grid-template-columns:repeat(5,1fr)"],
    [style*="grid-template-columns: repeat(5, 1fr)"],
    [style*="grid-template-columns:repeat(6,1fr)"],
    [style*="grid-template-columns: repeat(6, 1fr)"] {
        grid-template-columns: 1fr !important;
    }
}


/* ── (B1) iOS safe-area for fixed modals ───────────────────────────
   Adds env() safe-area-inset support to every modal backdrop that
   uses position:fixed. Without safe-area padding, the bottom 34px
   (home indicator) eats the action row on notched iPhones. */
@supports (padding: max(0px)) {
    [style*="position:fixed"][style*="inset"],
    .modal-backdrop,
    .oh-cm {
        padding-left:   max(16px, env(safe-area-inset-left));
        padding-right:  max(16px, env(safe-area-inset-right));
        padding-bottom: max(16px, env(safe-area-inset-bottom));
    }
}


/* ── (B2) Modal content max-height honors viewport, not 90vh ───────
   Many modals declare max-height: 90vh which on a notched iPhone
   leaves the action row in the home-indicator zone. Cap at
   100svh (small-viewport-height — modern Safari) minus safe area,
   with a fallback for browsers that don't support svh yet. */
.modal-content,
[style*="max-height:90vh"],
[style*="max-height: 90vh"] {
    max-height: calc(100vh - env(safe-area-inset-top) - env(safe-area-inset-bottom));
}
@supports (height: 100svh) {
    .modal-content,
    [style*="max-height:90vh"],
    [style*="max-height: 90vh"] {
        max-height: calc(100svh - env(safe-area-inset-top) - env(safe-area-inset-bottom));
    }
}


/* ── (C1) Word-break for long monospace strings ────────────────────
   UUIDs, blob keys, error IDs, long URLs in <code>, <pre>, or
   monospace inline styles can blow out their container on narrow
   viewports. Force them to wrap. */
@media (max-width: 600px) {
    code,
    pre,
    [style*="font-family:monospace"],
    [style*="font-family: monospace"] {
        word-break: break-all;
        overflow-wrap: anywhere;
    }
    pre {
        white-space: pre-wrap;
    }
}


/* ── (C2) Body horizontal-scroll guard ─────────────────────────────
   Last-resort: if any individual element does sneak past viewport
   width, clip it at the page edge rather than letting the whole
   viewport scroll sideways. Per-page fixes still need to stack the
   actual offending elements; this is the safety net. */
html,
body {
    overflow-x: clip;
    overscroll-behavior-x: contain;
}

/* ─────────────────────────────────────────────────────────────────────
   Live-fax-status row highlight. Class added by fax-status-live.js when
   a [data-fax-id="N"] row receives a hub event, then removed ~1.8s
   later so the flash is brief but noticeable. The animation tints the
   row with the brand accent so it works against any theme palette. */
.fax-live-updated {
    animation: faxLiveFlash 1.8s ease-out;
}
@keyframes faxLiveFlash {
    0%   { background: color-mix(in srgb, var(--accent, #2563eb) 22%, transparent); }
    100% { background: transparent; }
}


/* ── (C3) Tap target minimum 44x44 (Apple HIG) ────────────────────
   Many small action buttons in this codebase are < 44px tap height.
   Bump up only on narrow viewports so desktop densities stay tight. */
@media (max-width: 600px) {
    a.btn,
    button.btn,
    a.fax-action,
    button.fax-action,
    .nav-item,
    .suite-sub-link {
        min-height: 44px;
    }
}