/* ═══════════════════════════════════════════════════════════════
   SpectsVista — Global Mobile Header Fix
   Auto-injected into every HTML response by server.js middleware.
   Desktop (>1024px) = ZERO change.
   ═══════════════════════════════════════════════════════════════ */

/* ── Safe-area for notched phones ───────────────────────────── */
@supports (padding: env(safe-area-inset-top)) {
  body { padding-top: env(safe-area-inset-top); }
}

/* ── TABLET (768px – 1024px) ────────────────────────────────── */
@media (min-width: 769px) and (max-width: 1024px) {
  header, nav, .topbar, .page-header, .toolbar, [role="tablist"] {
    justify-content: center !important;
  }
  header button, nav button, .tab, .topbar button {
    min-height: 40px;
    padding: 8px 14px !important;
    font-size: 14px !important;
    white-space: nowrap;
  }
}

/* ── MOBILE (<= 768px) ──────────────────────────────────────── */
@media (max-width: 768px) {
  /* Any horizontal bar becomes scrollable */
  header, nav, .topbar, .page-header, .toolbar,
  [role="tablist"], .tabs, .tab-list, .nav-tabs,
  .btn-group, .action-bar, .header-actions {
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    flex-wrap: nowrap !important;
    justify-content: center !important;
    gap: 6px !important;
    padding: 8px 10px !important;
    scroll-snap-type: x proximity;
  }
  header::-webkit-scrollbar,
  nav::-webkit-scrollbar,
  .topbar::-webkit-scrollbar,
  .toolbar::-webkit-scrollbar,
  .tabs::-webkit-scrollbar,
  [role="tablist"]::-webkit-scrollbar { display: none; }

  /* Uniform tab/button sizing inside headers */
  header button, header a, header .tab,
  nav button, nav a, nav .tab,
  .topbar button, .topbar a,
  .toolbar button, .toolbar a,
  [role="tablist"] > *, .tabs > *, .nav-tabs > * {
    flex: 0 0 auto !important;
    min-height: 38px !important;
    min-width: auto !important;
    padding: 7px 12px !important;
    font-size: 13px !important;
    line-height: 1.2 !important;
    white-space: nowrap !important;
    border-radius: 8px !important;
    scroll-snap-align: center;
  }

  /* Never let a child push itself with margin-left:auto on mobile */
  header > *, nav > *, .topbar > *, .toolbar > * {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  /* Typography clamp inside headers */
  header h1, header h2, header .title,
  .topbar h1, .topbar h2, .page-header h1, .page-header h2 {
    font-size: clamp(15px, 4vw, 18px) !important;
    line-height: 1.25 !important;
  }

  /* Main content safe padding when header is sticky */
  main, .main, .container, .content, .page-body {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }

  /* Tables scroll horizontally — never overflow viewport */
  table { display: block; overflow-x: auto; white-space: nowrap; -webkit-overflow-scrolling: touch; }

  /* Hide oversized inline SVG logos on very small screens */
  @media (max-width: 380px) {
    header .logo-text, nav .logo-text { display: none !important; }
  }
}