/* Zentrack — shared responsive layer  (Phase 0 of the mobile-friendly plan)
   ---------------------------------------------------------------------------
   Loaded AFTER theme.css on every page. Everything here is either an OPT-IN utility
   class (inert until a page adds the class) or lives inside a `max-width` media query,
   so desktop layouts ABOVE the breakpoint are never touched — that is the guarantee that
   making the app mobile-friendly cannot regress the desktop view.

   Canonical breakpoints (match index.php's existing ones):
     768px → tablet / large phone landscape
     480px → phone
*/

/* Stop iOS Safari auto-inflating text in landscape. Global and safe. */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

/* ── Opt-in utilities ─────────────────────────────────────────────────────── */

/* Honour the notch / rounded-corner safe areas on fixed top/bottom bars that opt in. */
.zt-safe-top    { padding-top:    env(safe-area-inset-top,    0); }
.zt-safe-bottom { padding-bottom: env(safe-area-inset-bottom, 0); }

/* Horizontal-scroll wrapper for wide tables (used from Phase 4). Wrap a <table> in it. */
.zt-table-wrap { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.zt-table-wrap > table { min-width: max-content; }

@media (max-width: 768px) {
  /* Comfortable tap target for icon buttons on touch layouts. Opt-in via .zt-tap. */
  .zt-tap { min-width: 40px; min-height: 40px; }
}

/* ── Bottom-sheet pattern for "map + fixed side panel" pages (used from Phase 2) ──
   A page adds `.zt-sheet-host` to the flex row and `.zt-sheet` to the side panel, and
   drops a `<div class="zt-sheet-handle">` as the panel's FIRST child (tap toggles `.open`).
   Below 768px the panel detaches into a bottom drawer that starts peeked (only the handle
   shows) and slides up when it also has `.open`. Inert on desktop and on pages that don't
   opt in — the handle is display:none until the media query below reveals it. */
.zt-sheet-handle { display: none; }

@media (max-width: 768px) {
  .zt-sheet-host { flex-direction: column; }
  .zt-sheet {
    position: fixed; left: 0; right: 0; bottom: 0;
    width: 100% !important; max-height: 60vh;
    border-left: none; border-top: 1px solid var(--border);
    border-radius: 14px 14px 0 0;
    box-shadow: 0 -6px 24px rgba(0, 0, 0, 0.5);
    z-index: 800;
    transform: translateY(calc(100% - 42px));
    transition: transform 0.25s ease;
    padding-bottom: env(safe-area-inset-bottom, 0);
  }
  .zt-sheet.open { transform: translateY(0); }
  /* Grab handle — the only part of the sheet visible while peeked. */
  .zt-sheet-handle {
    display: block; width: 44px; height: 5px; border-radius: 3px;
    background: var(--border-dark); margin: 9px auto; flex: none; cursor: pointer;
  }
  /* Lift Leaflet's bottom controls above the 42px peeked sheet so zoom stays tappable. */
  .zt-sheet-host .leaflet-bottom { margin-bottom: 46px; }
}