/* ============================================================
   Project Signal — Shared Mobile Responsiveness Layer
   Include on every page via:  <link rel="stylesheet" href="/mobile.css" />
   Standard breakpoints used app-wide:
     - Mobile:  ≤ 767px
     - Tablet:  768px – 1023px
     - Desktop: ≥ 1024px
   Touch target minimum: 44 × 44 px.
   This file PATCHES the existing inline page styles — it does not
   replace them. Most pages already define .nav / .hamburger-btn etc.
   ============================================================ */

/* ---------- Global safety ---------- */
html { -webkit-text-size-adjust: 100%; }
body { overflow-x: hidden; }  /* belt + braces against accidental horizontal scroll */

/* iOS safe-area-aware page bottom for any page using FAB / sticky bottom bars */
:root {
  --safe-bot: env(safe-area-inset-bottom, 0px);
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-l:   env(safe-area-inset-left, 0px);
  --safe-r:   env(safe-area-inset-right, 0px);
}

/* ---------- Touch targets ---------- */
@media (max-width: 767px) {
  button, .btn, a.btn,
  .hamburger-btn, .nav-item,
  input[type="button"], input[type="submit"],
  select, .pill-btn, .chip {
    min-height: 44px;
  }
  /* compact text inputs need to keep usable height too */
  input[type="text"], input[type="email"], input[type="password"],
  input[type="search"], input[type="number"], input[type="tel"],
  input[type="date"], textarea {
    min-height: 44px;
    font-size: 16px; /* prevents iOS auto-zoom on focus */
  }
}

/* ---------- Generic nav patches (most pages share .nav / .nav-page-title / .nav-dropdown) ---------- */
@media (max-width: 767px) {
  .nav { padding: 10px 14px !important; }
  .nav-page-title { display: none !important; }   /* page name visible via title bar / context */
  .nav-brand { font-size: 13px !important; }
  .nav-dropdown { min-width: 240px !important; max-width: calc(100vw - 24px) !important; }
}

/* ---------- Utility helpers (opt-in via class) ---------- */
.hide-on-mobile { /* desktop default: visible */ }
.show-on-mobile { display: none; }
@media (max-width: 767px) {
  .hide-on-mobile { display: none !important; }
  .show-on-mobile { display: initial !important; }
  .show-on-mobile.flex { display: flex !important; }
  .show-on-mobile.grid { display: grid !important; }
  .show-on-mobile.block { display: block !important; }
}

/* Force a child grid/flex container to stack on mobile */
@media (max-width: 767px) {
  .mobile-stack { grid-template-columns: 1fr !important; flex-direction: column !important; }
  .mobile-stack-2 { grid-template-columns: 1fr 1fr !important; }
}

/* Horizontal-scroll wrapper for wide tables (drop wide table inside a .mobile-scroll-x) */
.mobile-scroll-x { overflow-x: auto; -webkit-overflow-scrolling: touch; }
@media (max-width: 767px) {
  .mobile-scroll-x { margin-left: -12px; margin-right: -12px; padding-left: 12px; padding-right: 12px; }
  .mobile-scroll-x table { min-width: 600px; }
}

/* Sticky first column inside .mobile-sticky-first-col table */
@media (max-width: 767px) {
  .mobile-sticky-first-col table { border-collapse: separate; border-spacing: 0; }
  .mobile-sticky-first-col th:first-child,
  .mobile-sticky-first-col td:first-child {
    position: sticky;
    left: 0;
    background: white;
    z-index: 2;
    box-shadow: 1px 0 0 #E5E7EB;
  }
  .mobile-sticky-first-col thead th:first-child { background: #FAFAF8; z-index: 3; }
}

/* ---------- Stat-card grids — sensible auto-collapse if page opts in ---------- */
@media (max-width: 767px) {
  .grid-stats-4 { grid-template-columns: repeat(2, 1fr) !important; gap: 10px !important; }
  .grid-stats-3 { grid-template-columns: repeat(2, 1fr) !important; gap: 10px !important; }
  .grid-stats-2 { grid-template-columns: 1fr !important; }
}
@media (min-width: 768px) and (max-width: 1023px) {
  .grid-stats-4 { grid-template-columns: repeat(2, 1fr) !important; }
}

/* ---------- Forms ---------- */
@media (max-width: 767px) {
  /* Stack any side-by-side label/field layouts */
  .form-row, .field-row { flex-direction: column !important; align-items: stretch !important; gap: 6px !important; }
  .form-row label, .field-row label { width: auto !important; text-align: left !important; }
  .form-grid, .form-grid-2 { grid-template-columns: 1fr !important; }

  /* Full-width primary submit button */
  .submit-btn, .btn-primary-block, button[type="submit"].full-on-mobile { width: 100%; }
}

/* ---------- Modals / drawers → full-screen takeover on mobile ---------- */
@media (max-width: 767px) {
  .modal.mobile-fullscreen,
  .drawer.mobile-fullscreen,
  .side-drawer.mobile-fullscreen {
    position: fixed !important;
    inset: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    max-width: none !important;
    max-height: none !important;
    border-radius: 0 !important;
    margin: 0 !important;
    padding-bottom: calc(20px + var(--safe-bot)) !important;
  }
}

/* ---------- FAB pattern (floating action button) ---------- */
.fab {
  position: fixed;
  right: 20px;
  bottom: calc(20px + var(--safe-bot));
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: #FFB627;
  color: #0A1843;
  border: none;
  box-shadow: 0 6px 18px rgba(10, 24, 67, 0.18);
  display: none;                /* hidden by default; visible only on mobile */
  align-items: center;
  justify-content: center;
  font-size: 24px;
  font-weight: 600;
  cursor: pointer;
  z-index: 90;
}
.fab:hover { transform: translateY(-1px); box-shadow: 0 8px 22px rgba(10, 24, 67, 0.22); }
.fab:active { transform: translateY(0); }
@media (max-width: 767px) {
  .fab { display: flex; }
}

/* ---------- Table-to-card collapse helper ----------
   Mark <table class="collapse-on-mobile">. Use <td data-label="Col Name">…</td>
   so the column name is shown above each value on phones. */
@media (max-width: 767px) {
  table.collapse-on-mobile,
  table.collapse-on-mobile thead,
  table.collapse-on-mobile tbody,
  table.collapse-on-mobile tr,
  table.collapse-on-mobile td { display: block; width: 100%; }
  table.collapse-on-mobile thead { display: none; }
  table.collapse-on-mobile tr {
    background: white;
    border: 0.5px solid #E5E7EB;
    border-radius: 12px;
    padding: 12px 14px;
    margin-bottom: 10px;
    box-shadow: 0 1px 2px rgba(10,24,67,0.04);
  }
  table.collapse-on-mobile td {
    padding: 4px 0;
    border: none !important;
    text-align: left !important;
    font-size: 13px;
  }
  table.collapse-on-mobile td::before {
    content: attr(data-label);
    display: block;
    font-size: 10.5px;
    font-weight: 600;
    color: #6B7280;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    margin-bottom: 2px;
  }
  table.collapse-on-mobile td:empty,
  table.collapse-on-mobile td:not([data-label]) { display: none; }
}

/* ---------- Container — universal max-width + side padding ---------- */
.container, .shell, main {
  padding-left: max(16px, var(--safe-l));
  padding-right: max(16px, var(--safe-r));
}
@media (min-width: 1024px) {
  .container, .shell, main {
    padding-left: 24px;
    padding-right: 24px;
  }
}

/* ---------- Tighten metric values that may overflow on mobile ---------- */
@media (max-width: 767px) {
  .stat-num, .metric-value, .tv-metric-value, .s-stat-num {
    font-size: 22px !important;
    line-height: 1.1 !important;
  }
  h1 { font-size: 20px !important; }
  h2 { font-size: 17px !important; }
}

/* ---------- Body text minimum 14px on mobile ---------- */
@media (max-width: 767px) {
  body { font-size: 14px; }
}

/* ---------- Sticky bottom bar pattern (e.g. action buttons) ---------- */
.sticky-bottom-bar {
  position: sticky;
  bottom: 0;
  background: white;
  border-top: 0.5px solid #E5E7EB;
  padding: 12px 16px;
  padding-bottom: calc(12px + var(--safe-bot));
  display: flex;
  gap: 8px;
  z-index: 50;
}