/* ============================================================
   Pitch2Retail · Mobile-first overrides
   ------------------------------------------------------------
   Drop-in stylesheet that retrofits any dashboard page with
   touch-friendly mobile behaviors. Loaded AFTER theme.css so
   it overrides desktop defaults at the small-viewport breakpoint.

   Pages should also include shared/mobile-nav.js for the bottom
   tab bar (or include the <p2r-mobile-nav> markup inline).

   Tested: iPhone SE / 13 / 15 Pro Max, Pixel 6, iPad mini.
============================================================ */

/* ── Safe-area insets (notched iPhones, in-browser PWA) ────── */
:root {
  --safe-top:    env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left:   env(safe-area-inset-left, 0px);
  --safe-right:  env(safe-area-inset-right, 0px);
}

/* ── Bottom nav bar (mobile-only, fixed, safe-area aware) ── */
.p2r-mobile-nav {
  display: none;
  position: fixed;
  left: 0; right: 0; bottom: 0;
  background: rgba(15,18,24,0.96);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-top: 1px solid rgba(255,255,255,0.06);
  z-index: 90;
  padding: 6px 4px calc(6px + var(--safe-bottom)) 4px;
  flex: 0 0 auto;
}
.p2r-mobile-nav-row {
  display: flex; justify-content: space-around; align-items: stretch;
  max-width: 600px; margin: 0 auto;
}
.p2r-mobile-nav-item {
  flex: 1 1 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 3px;
  padding: 8px 2px;
  color: var(--cream-dim, #A39E96);
  text-decoration: none;
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  border-radius: 10px;
  transition: color 0.15s, background 0.15s;
  -webkit-tap-highlight-color: transparent;
}
.p2r-mobile-nav-item .ico {
  font-size: 1.25rem; line-height: 1;
  filter: grayscale(0.4);
}
.p2r-mobile-nav-item.active {
  color: var(--amber, #E8A838);
  background: rgba(232,168,56,0.08);
}
.p2r-mobile-nav-item.active .ico { filter: none; }
.p2r-mobile-nav-item:active { background: rgba(255,255,255,0.04); }

/* ── Mobile breakpoint: ≤ 760px ──────────────────────────── */
@media (max-width: 760px) {
  /* Show bottom nav, hide desktop sidebar */
  .p2r-mobile-nav { display: block; }
  .nav-sidebar, .sidebar, aside.nav, .left-nav, .broker-sidebar { display: none !important; }

  /* Reclaim full width — most desktop layouts have margin-left for sidebar */
  body, .page-wrapper, .main-content, .app-content {
    margin-left: 0 !important;
    padding-left: 0 !important;
    width: 100% !important;
    max-width: 100vw !important;
  }
  .main-content, .app-content, .page-wrapper > main {
    padding: 12px 14px calc(80px + var(--safe-bottom)) 14px !important;
  }

  /* Headings shrink on mobile — desktop sizes are too big */
  h1, .page-title { font-size: 1.4rem !important; }
  h2 { font-size: 1.15rem !important; }
  h3 { font-size: 1rem !important; }

  /* Top bars + filters → stack vertically */
  .queue-topbar, .topbar, .page-header {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 10px !important;
  }
  .queue-filters, .filter-row {
    flex-wrap: wrap !important;
    gap: 8px !important;
  }
  .filter-select, select.filter, .input.filter {
    flex: 1 1 calc(50% - 4px); min-width: 0;
  }

  /* Buttons go full-width on mobile */
  .btn-cta, .btn-primary, .btn.btn-lg {
    width: 100% !important;
    justify-content: center !important;
    padding: 12px 18px !important;
    font-size: 0.95rem !important;
  }
  .btn-row, .button-row {
    flex-direction: column !important;
    gap: 8px !important;
  }

  /* Tables → cards (apply class .mobile-cards on the table) */
  table.mobile-cards {
    display: block;
    width: 100%;
  }
  table.mobile-cards thead { display: none; }
  table.mobile-cards tbody, table.mobile-cards tr { display: block; }
  table.mobile-cards tr {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 12px;
    margin-bottom: 10px;
  }
  table.mobile-cards td {
    display: flex; justify-content: space-between; align-items: center;
    border: 0; padding: 6px 0;
    font-size: 0.88rem;
  }
  table.mobile-cards td::before {
    content: attr(data-label);
    color: var(--cream-dim);
    font-size: 0.74rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 600;
    margin-right: 12px;
  }

  /* Stats / KPI grids → 2-up on mobile */
  .stats-bar, .stats-row, .kpi-grid, .stats-band {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
  }
  .stat-item, .stat-card, .stat-cell {
    padding: 12px 10px !important;
  }
  .stat-item .n, .stat-num, .num {
    font-size: 1.3rem !important;
  }

  /* Pitch cards (review queue) → tighter mobile spacing */
  .pitch-card { margin-bottom: 8px !important; }
  .pc-main {
    padding: 12px 14px !important;
    gap: 10px !important;
  }
  .pc-avatar { display: none !important; }
  .pc-meta { font-size: 0.78rem !important; }
  .pc-body, .pc-actions { padding: 12px 14px !important; }

  /* Review action row → sticky mobile-only "Approve / Edit / Skip" footer */
  .pc-actions {
    position: sticky; bottom: calc(80px + var(--safe-bottom));
    background: var(--bg-card); z-index: 50;
    padding: 10px 14px !important;
    display: grid !important;
    grid-template-columns: 1fr 1fr 1fr !important;
    gap: 6px !important;
  }
  .pc-actions .btn {
    padding: 10px 6px !important;
    font-size: 0.82rem !important;
  }

  /* Modals → full-screen on mobile */
  .modal, .dialog, .overlay-card {
    inset: 0 !important;
    width: 100vw !important;
    max-width: 100vw !important;
    height: 100vh !important;
    max-height: 100vh !important;
    border-radius: 0 !important;
    margin: 0 !important;
    padding-top: calc(20px + var(--safe-top)) !important;
    padding-bottom: calc(20px + var(--safe-bottom)) !important;
  }

  /* Forms — bigger tap targets */
  input, textarea, select, button {
    font-size: 16px !important;       /* prevents iOS zoom-on-focus */
    min-height: 44px;                  /* Apple HIG minimum touch target */
  }
  input[type="checkbox"], input[type="radio"] {
    min-height: auto;
    width: 22px; height: 22px;
  }
  textarea { min-height: 120px; }
  label { font-size: 0.92rem; }

  /* Hide things that don't make sense on mobile */
  .desktop-only, .hide-on-mobile { display: none !important; }
  .show-on-mobile { display: block !important; }

  /* Penny widget — relocate above bottom nav */
  .pny-pub-launcher {
    bottom: calc(85px + var(--safe-bottom)) !important;
  }
  .pny-pub-panel {
    bottom: calc(85px + var(--safe-bottom)) !important;
    height: calc(100vh - 85px - var(--safe-top) - var(--safe-bottom)) !important;
  }

  /* Sticky CTA bar on landing — push above bottom nav too */
  .l-sticky-cta {
    bottom: calc(74px + var(--safe-bottom)) !important;
  }
}

/* ── Tablet portrait (760-960px) — narrower sidebar, bottom nav still hidden ── */
@media (min-width: 761px) and (max-width: 960px) {
  .nav-sidebar, .sidebar { width: 200px !important; }
  body, .main-content { padding-left: 200px !important; }
}

/* ── PWA standalone mode (running as installed app) ──────── */
@media (display-mode: standalone) {
  /* Hide the "install" CTA when already installed */
  .pwa-install-only { display: none !important; }
  /* Add safe-area padding to the body */
  body { padding-top: var(--safe-top); }
}

/* ── Large phones in landscape — keep bottom nav, expand content ── */
@media (max-width: 960px) and (orientation: landscape) and (max-height: 500px) {
  .p2r-mobile-nav { padding-top: 4px; padding-bottom: 4px; }
  .p2r-mobile-nav-item { padding: 4px 2px; }
  .p2r-mobile-nav-item .ico { font-size: 1rem; }
  .p2r-mobile-nav-item { font-size: 0.6rem; }
}

/* ── Reduce motion respected ─────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .p2r-mobile-nav-item, .pitch-card { transition: none !important; }
}