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

/* ── DESKTOP (>= 1025px) — global centering polish ─────────────
   Many pages cap their main content at 900px which leaves wide
   side gutters on 1400+ screens. Globally raise the cap to 1400px
   AND centre common nav rows so the page never appears to sit on
   one side of the viewport. Per-page styles still win when more
   specific (these rules use single-class specificity).
   Updated 2026-05-08.
   ─────────────────────────────────────────────────────────────── */
@media (min-width: 1025px) {
  /* Core dashboard pattern — `.main > div` boxes were 900px capped */
  .main > div,
  .main > [x-show],
  main > .page-wrap,
  main > .container,
  main > .content {
    max-width: 1400px !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  /* Generic content wrappers used across the rest of the suite */
  .page-content,
  .page-body,
  .container,
  .content-wrap,
  .sv-page {
    max-width: 1400px;
    margin-left: auto;
    margin-right: auto;
  }

  /* Headers / navs that span full width should centre their items
     instead of left-aligning them when the row is short. Pages that
     intentionally use space-between for a logo/actions split are
     unaffected because they set `justify-content` directly on the
     element and that wins via specificity. */
  body > header:not([class*="justify-"]),
  body > nav:not([class*="justify-"]),
  .topnav:not([class*="justify-"]),
  .topbar:not([class*="justify-"]) {
    justify-content: center;
  }
}