/* ═══════════════════════════════════════════════════════════════════════════
 * NEXUM MOBILE — iPhone / iPad full-experience overrides
 * © 2026 Luddan Services LLC. Confidential and proprietary.
 *
 * Loaded after design.css and page-level <style> blocks.
 * Breakpoints:
 *   ≤430px   iPhone SE / iPhone 16
 *   ≤768px   iPhone Plus / all phones
 *   768–1024 iPad portrait
 *   1024+    iPad landscape — desktop layout restored
 *
 * Class inventory (from real pages):
 *   header.bar / header  — top bar
 *   .brand .by           — logo text
 *   .nav / .nx-nav       — nav links
 *   main / .nx-main      — page body
 *   .nx-bar              — sticky top bar (design.css variant)
 *   .nx-stat-grid        — stats grid
 *   .nx-stat             — individual stat tile
 *   .nx-table / .tbl     — data tables
 *   .nx-card             — card container
 *   .nx-btn / button     — buttons
 *   .nx-input / input    — inputs
 *   .nx-pill / .pill     — badge pills
 *   .nx-section          — section wrapper
 *   .h1 / .nx-h1         — page title
 *   .sub / .nx-sub       — subtitle
 *   .nx-foot / .foot     — page footer
 *   #nexum-voice-btn     — floating voice button (voice-widget.js)
 * ═══════════════════════════════════════════════════════════════════════════ */

/* ─────────────────────────────────────────────────────────────────────────
 * MOBILE VIEWPORT META — ensure this file can't override the meta tag but
 * we set safe-area-inset support on the root layout.
 * ───────────────────────────────────────────────────────────────────────── */
:root {
  --mobile-tab-height: 60px;
  --mobile-bottom-pad: calc(var(--mobile-tab-height) + env(safe-area-inset-bottom, 0px));
}

/* ═══════════════════════════════════════════════════════════════════════════
 * 1. PHONES — everything up to 768px
 * ═══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {

  /* ── Body / root ────────────────────────────────────────────────────── */
  html, body {
    font-size: 15px;         /* slightly bigger for readability */
    -webkit-text-size-adjust: 100%;
    overflow-x: hidden;
  }

  /* ── Top bars: hide on mobile (bottom tab replaces nav) ─────────────── */
  header.bar .nav,
  header .nav,
  .nx-bar .nx-nav {
    display: none !important;
  }

  header.bar,
  header,
  .nx-bar {
    padding: 12px 16px;
    position: sticky;
    top: 0;
    z-index: 100;
  }

  /* ── Bottom tab bar ─────────────────────────────────────────────────── */
  .nx-mobile-tabs {
    display: flex !important;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: var(--mobile-tab-height);
    padding-bottom: env(safe-area-inset-bottom, 0px);
    background: var(--panel);
    border-top: 1px solid var(--line);
    z-index: 200;
    justify-content: space-around;
    align-items: center;
  }

  .nx-mobile-tabs a {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: var(--dim);
    font-size: 10px;
    font-weight: 500;
    text-decoration: none;
    gap: 3px;
    padding: 6px 0;
    min-height: 44px;
    -webkit-tap-highlight-color: transparent;
  }

  .nx-mobile-tabs a.on,
  .nx-mobile-tabs a:hover {
    color: var(--accent);
  }

  .nx-mobile-tabs a svg,
  .nx-mobile-tabs a .tab-icon {
    font-size: 20px;
    line-height: 1;
  }

  /* ── Main content: no left margin, full-width ────────────────────────── */
  main,
  .nx-main {
    padding: 16px 16px var(--mobile-bottom-pad);
    max-width: 100%;
    margin: 0;
  }

  /* ── Page titles ─────────────────────────────────────────────────────── */
  h1.h1,
  .nx-h1 {
    font-size: 22px;
    margin-bottom: 4px;
  }

  .sub,
  .nx-sub {
    font-size: 13px;
    margin-bottom: 20px;
  }

  /* ── Stats grid: 2-up on phone ───────────────────────────────────────── */
  .nx-stat-grid,
  .summary-grid,
  .posture-grid,
  .grid-2col {
    grid-template-columns: 1fr 1fr !important;
    gap: 10px;
  }

  .nx-stat,
  .stat-card {
    padding: 12px;
  }

  .nx-stat .val,
  .stat-card .val {
    font-size: 20px;
  }

  /* ── Cards ───────────────────────────────────────────────────────────── */
  .nx-card {
    padding: 14px;
    border-radius: 12px;
    margin-bottom: 12px;
  }

  /* ── Tables → horizontal scroll on mobile ────────────────────────────── */
  .nx-table,
  .tbl {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    font-size: 12px;
    border-radius: 10px;
  }

  .nx-table th,
  .nx-table td,
  .tbl th,
  .tbl td {
    padding: 10px 12px;
    white-space: nowrap;
  }

  /* ── Buttons: 44pt touch target minimum ─────────────────────────────── */
  .nx-btn,
  button,
  .btn-primary,
  .btn-secondary,
  .btn-danger {
    min-height: 44px;
    min-width: 44px;
    padding: 10px 16px;
    font-size: 14px;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
  }

  /* Remove hover states that feel wrong on touch */
  @media (hover: none) {
    .nx-btn:hover,
    .nx-nav a:hover,
    .nav a:hover,
    .nx-table tr:hover td {
      background: inherit;
      color: inherit;
      border-color: inherit;
    }
  }

  /* ── Form inputs: full-width, large touch area ───────────────────────── */
  .nx-input,
  input[type="text"],
  input[type="password"],
  input[type="number"],
  input[type="time"],
  input[type="email"],
  select,
  textarea {
    width: 100%;
    min-height: 44px;
    font-size: 16px !important; /* prevents iOS zoom-on-focus */
    padding: 10px 12px;
    border-radius: 10px;
    -webkit-appearance: none;
    appearance: none;
  }

  /* ── Actions row: vertical stack on small screens ────────────────────── */
  .actions {
    flex-direction: column;
    gap: 10px;
  }
  .actions button,
  .actions .nx-btn {
    width: 100%;
    text-align: center;
    justify-content: center;
  }

  /* ── Modals / dialogs → bottom sheet ─────────────────────────────────── */
  .nx-modal,
  [role="dialog"] {
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    top: auto !important;
    border-radius: 20px 20px 0 0 !important;
    max-height: 85vh !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
    padding: 20px 16px calc(16px + env(safe-area-inset-bottom)) !important;
    transform: none !important;
    margin: 0 !important;
  }

  /* ── Section headers ─────────────────────────────────────────────────── */
  .nx-section {
    margin-bottom: 32px;
  }

  .nx-section h2,
  section h2 {
    font-size: 11px;
    margin-bottom: 12px;
  }

  /* ── Camera grids → single column ───────────────────────────────────── */
  .cam-grid,
  .camera-grid,
  [class*="grid"] {
    grid-template-columns: 1fr !important;
  }

  /* ── Device/control cards → full-width rows ─────────────────────────── */
  .device-row,
  .device-card,
  .control-card {
    min-height: 56px;
    padding: 14px 16px;
    display: flex;
    align-items: center;
    gap: 12px;
  }

  /* ── Waterfall / progress charts → compact ───────────────────────────── */
  .waterfall .row {
    flex-wrap: wrap;
    gap: 4px;
  }

  .waterfall .label {
    width: 100%;
    font-size: 11px;
  }

  /* ── Widget rows (dashboard prefs) ───────────────────────────────────── */
  .widget-row {
    padding: 12px 0;
    gap: 10px;
  }

  /* ── Notification rows ───────────────────────────────────────────────── */
  .notif-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
  }

  .notif-row label {
    width: auto;
  }

  .notif-row input[type="time"],
  .notif-row input[type="number"] {
    width: 100%;
  }

  /* ── Pills / badges: bigger tap area ────────────────────────────────── */
  .nx-pill,
  .pill {
    padding: 3px 10px;
    font-size: 10px;
  }

  /* ── Voice button: move above bottom tab bar ─────────────────────────── */
  #nexum-voice-btn {
    bottom: calc(var(--mobile-tab-height) + env(safe-area-inset-bottom, 0px) + 12px) !important;
  }

  /* ── Footer ─────────────────────────────────────────────────────────── */
  .nx-foot,
  footer.foot,
  .foot {
    margin-top: 32px;
    padding: 12px 16px;
    font-size: 11px;
  }

  /* ── Services hub / link grids ───────────────────────────────────────── */
  .services-grid,
  .apps-grid,
  .link-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 10px;
  }

  /* ── Chart / canvas wrappers ─────────────────────────────────────────── */
  canvas {
    max-width: 100%;
    height: auto !important;
  }

  /* ── Insights grid → single column ──────────────────────────────────── */
  .insights-grid {
    grid-template-columns: 1fr !important;
  }

  /* ── Toggle controls: bigger ─────────────────────────────────────────── */
  .toggle {
    width: 52px;
    height: 28px;
    flex-shrink: 0;
  }

  .toggle-thumb {
    width: 22px;
    height: 22px;
  }

  .toggle input:checked ~ .toggle-thumb {
    transform: translateX(24px);
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
 * 2. iPhone — tighter layouts for ≤430px
 * ═══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 430px) {

  /* ── Stats: stack to 1-up if they don't fit ─────────────────────────── */
  .nx-stat-grid,
  .summary-grid,
  .posture-grid {
    grid-template-columns: 1fr 1fr !important;
  }

  /* On very narrow phones, some grids may need 1-col */
  .grid-2col {
    grid-template-columns: 1fr !important;
  }

  /* ── Brand: smaller ──────────────────────────────────────────────────── */
  .brand,
  .nx-brand {
    font-size: 15px;
  }

  .brand .by,
  .nx-brand .by {
    display: none; /* hide "by Luddan Svcs" on tiny screens */
  }

  /* ── Page title ──────────────────────────────────────────────────────── */
  h1.h1,
  .nx-h1 {
    font-size: 20px;
  }

  /* ── Services grid: single column on SE ─────────────────────────────── */
  .services-grid,
  .apps-grid,
  .link-grid {
    grid-template-columns: 1fr !important;
  }

  /* ── Nav tabs: icon-only labels truncated ────────────────────────────── */
  .nx-mobile-tabs a span.tab-label {
    font-size: 9px;
    max-width: 56px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
 * 3. iPad portrait — 768–1024px: 2-column layout, keep desktop nav
 * ═══════════════════════════════════════════════════════════════════════════ */
@media (min-width: 769px) and (max-width: 1024px) {

  /* ── Restore desktop top nav ─────────────────────────────────────────── */
  header.bar .nav,
  header .nav,
  .nx-bar .nx-nav {
    display: flex !important;
  }

  /* ── Hide mobile bottom tabs ─────────────────────────────────────────── */
  .nx-mobile-tabs {
    display: none !important;
  }

  /* ── 2-column content grid ───────────────────────────────────────────── */
  .nx-stat-grid,
  .summary-grid,
  .posture-grid {
    grid-template-columns: repeat(3, 1fr) !important;
  }

  .grid-2col {
    grid-template-columns: 1fr 1fr !important;
  }

  .insights-grid {
    grid-template-columns: 1fr 1fr !important;
  }

  main,
  .nx-main {
    padding: 24px 24px 80px;
  }

  /* ── Tables: allow scrolling but not as small as phone ──────────────── */
  .nx-table,
  .tbl {
    font-size: 13px;
  }

  /* ── Voice button: standard position ─────────────────────────────────── */
  #nexum-voice-btn {
    bottom: 24px !important;
  }
}

/* ═══════════════════════════════════════════════════════════════════════════
 * 4. Bottom tab bar injection utility — injected by voice-widget.js
 *    Hidden by default on desktop, shown on mobile via the rules above.
 * ═══════════════════════════════════════════════════════════════════════════ */
.nx-mobile-tabs {
  display: none; /* shown only on mobile via @media above */
}

/* ═══════════════════════════════════════════════════════════════════════════
 * 5. Voice widget modal — mobile-specific overrides (base in voice-widget.js)
 * ═══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  #nexum-voice-modal {
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    top: auto !important;
    width: 100% !important;
    max-width: 100% !important;
    border-radius: 20px 20px 0 0 !important;
    padding: 20px 16px calc(env(safe-area-inset-bottom, 16px) + 16px) !important;
    transform: none !important;
    margin: 0 !important;
  }
}