/* ═════════════════════════════════════════════════════════════════════════
   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;
    }
}


/* ── (D1) Collapse TWO-COLUMN inline grids on phones ───────────────
   The most common mobile-overflow cause in this app: inline
   `grid-template-columns:2fr 1fr` (content+sidebar) and `1fr 1fr`
   (field pairs) that don't stack, so the right column runs off the
   right edge (Accounting header, Manual Journal Entry, most cards).
   Deliberately does NOT touch repeat(N) grids (calendars/tables have
   their own rules) — only the literal two-track patterns. A view that
   needs to keep two columns can override with a class + !important. */
@media (max-width: 560px) {
    [style*="grid-template-columns:2fr 1fr"],
    [style*="grid-template-columns: 2fr 1fr"],
    [style*="grid-template-columns:1fr 2fr"],
    [style*="grid-template-columns: 1fr 2fr"],
    [style*="grid-template-columns:1fr 1fr"],
    [style*="grid-template-columns: 1fr 1fr"],
    [style*="grid-template-columns:minmax(0,1fr) minmax(0,1fr)"] {
        grid-template-columns: 1fr !important;
    }
    /* A two-track grid item spanning "span 2" spans the single column. */
    [style*="grid-column:span 2"],
    [style*="grid-column: span 2"] { grid-column: 1 / -1 !important; }
}


/* ── (D2) Wide financial-report tables: horizontal scroll on phones ─
   Statement of Rev & Exp / A/R aging / trial balance carry 6–8 numeric
   columns that can't fit a phone. Wrap the table in a scroll container
   (.oh-tscroll) in the view; this makes it swipe horizontally and keeps
   a sensible min-width so numbers stay readable instead of crushing.
   Scoped to a class so it can't affect layout tables elsewhere. */
.oh-tscroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
/* Report tables render width:100% so they SHRINK instead of overflowing — give
   the KNOWN wide-report classes a min-width so columns stay readable + it scrolls.
   JS-auto-wrapped tables (D3) keep their natural width (wrapped only when they
   already overflow), so they don't need this. */
@media (max-width: 760px) {
    .oh-tscroll > table.sre, .oh-tscroll > table.ct { min-width: 640px; }
}


/* ── (D3) Auto-wrap ANY overflowing table on phones ────────────────
   Progressive enhancement (see wwwroot/js/mobile-table-wrap.js, loaded
   globally in _Layout): on narrow screens, tables whose content is wider
   than their container are wrapped in .oh-tscroll at runtime so they swipe
   instead of blowing out the page. Safe: only wraps tables that ACTUALLY
   overflow, never touches Razor, opt-out with data-no-wrap on a table. */