/* gf/mobile.css — Mobile + tablet adaptations for the unified GrowFlow shell.
   Applied on top of gf/app.css. Two breakpoints:
     ≤ 880px  → tablet (sidebar becomes drawer, denser headers)
     ≤ 600px  → phone (cards instead of tables, full-width buttons, bottom nav bar) */

/* ── Touch-friendly defaults everywhere ── */
@media (hover: none) and (pointer: coarse) {
  .btn, .btn-sm, .icon-btn, .pill { min-height: 36px; }
  .nav-item { padding-top: 12px; padding-bottom: 12px; }
  input, select, textarea { font-size: 16px !important; /* iOS no-zoom */ }
}

/* ════════════ TABLET (≤ 880px) ════════════ */
@media (max-width: 880px) {
  .sidebar { width: 280px; box-shadow: 0 20px 60px rgba(0,0,0,.5); }
  .header { padding: 0 14px; gap: 8px; height: 56px; }
  .search { max-width: none; padding: 0 12px; }
  .search input { padding: 9px 0; font-size: 14px; }
  .header .btn:not(.hamburger):not(.btn-primary):not(.btn-orange) { display: none; }
  .lang-toggle { display: none; }
  .nav-badge { display: none; }
  .workspace { padding: 0; }
  .week-strip { padding: 14px 16px 6px; }
  .day-pills { padding: 6px 16px; }
  .telemetry { margin: 10px 16px 4px; }
  .panels { padding: 6px 16px 28px; }
  #content > div { padding: 16px !important; }
  [style*="grid-template-columns"] { font-size: 12px !important; }
}

/* ════════════ TASK CARDS → stacked rows (≤ 760px) ════════════
   On narrow screens the one-line task row (title + meta + days + people +
   status + priority) squeezes every field into an unreadable narrow column.
   Break it into full-width rows instead: row 1 = checkbox + title + meta +
   chevron; row 2 = the whole badge cluster (days · people · status · priority)
   left-aligned on its own line. */
@media (max-width: 760px) {
  .card-head { flex-wrap: wrap; align-items: flex-start; gap: 8px 10px; padding: 12px 14px; }
  .check { margin-top: 2px; }
  .card-main { flex: 1 1 auto; min-width: 0; }
  .card-head .chev-card { margin-top: 3px; }
  .card-side { flex-basis: 100%; order: 10; justify-content: flex-start; margin-top: 4px; gap: 8px; }
}

/* ════════════ PHONE (≤ 600px) ════════════ */
@media (max-width: 600px) {
  /* ── Header collapses to brand + ham + search ── */
  .header { padding: 0 10px; gap: 6px; }
  .header h2 { font-size: 14px !important; }
  .header h2 span { display: none; }
  #header-avatar .avatar { width: 32px !important; height: 32px !important; font-size: 11px !important; }
  .header .btn-primary, .header .btn-orange { padding: 8px 10px; font-size: 12px; }
  .header .btn-primary span, .header .btn-orange span { display: none; }
  .icon-btn { width: 34px; height: 34px; }

  /* ── Sidebar fills 90% on phones ── */
  .sidebar { width: 86vw; max-width: 320px; }

  /* ── Hide all data-table-style grids' less-important columns ── */
  #content [style*="display:grid"][style*="grid-template-columns"]:not([style*="repeat(12"]):not([style*="repeat(7"]) {
    grid-template-columns: 1fr 1fr !important;
    padding: 10px 12px !important;
    row-gap: 4px;
  }
  #content [style*="display:grid"][style*="grid-template-columns"] > div { padding: 2px 0 !important; }

  /* ── KPI cards stack vertically ── */
  .row[style*="gap:14px"], .row[style*="gap:16px"], .row[style*="gap:12px"] {
    flex-direction: column !important;
    align-items: stretch !important;
  }
  .row[style*="gap:14px"] > *, .row[style*="gap:16px"] > *, .row[style*="gap:12px"] > * { width: 100%; }

  /* ── Two-pane Progressive Review stacks ── */
  div[style*="display:flex"][style*="height:100%"] { flex-direction: column !important; }
  div[style*="width:380px"], div[style*="width:340px"], div[style*="width:320px"], div[style*="width:300px"] {
    width: 100% !important; border-left: none !important; border-top: 1px solid var(--line) !important;
  }

  /* ── Modals fill screen ── */
  .modal { max-width: 100% !important; border-radius: 16px 16px 0 0 !important; max-height: 92vh; margin-top: auto; }
  .overlay { padding: 0; align-items: flex-end; }
  .modal-head { padding: 14px 18px; }
  .modal-body { padding: 16px 18px; }
  .modal-foot { padding: 12px 18px; flex-direction: column-reverse; }
  .modal-foot .btn { width: 100%; justify-content: center; }

  /* ── Voice modal: bigger mic, full screen ── */
  .voice-modal { border-radius: 24px 24px 0 0; }
  .mic-rings { width: 140px !important; height: 140px !important; }
  .mic-core { width: 96px !important; height: 96px !important; }

  /* ── Task card badges shrink a touch more on phones ── */
  .card-head .pill, .card-head .prtag { font-size: 11px; padding: 3px 8px; }
  .card-meta { font-size: 10.5px; }

  /* ── Buttons full-width inline rows ── */
  .row[style*="gap:8px"] .btn, .row[style*="gap:10px"] .btn { flex: 1; justify-content: center; }

  /* ── Toasts span full width with safe area ── */
  #toasts { left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom)); }
  .toast { width: auto; }

  /* ── Hide non-critical decorations ── */
  .pp-wordmark, .pp-wordmark--sm { display: none; }
  .pp-brand-text { font-size: 20px !important; }
  .brand { padding: 16px 18px 12px; }
  .mode-switch { margin: 0 10px 6px; }
  .side-divider { margin: 10px 18px; }
}

/* ════════════ BOTTOM NAV BAR (phone only) ════════════ */
@media (max-width: 600px) {
  .mobile-bottombar {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 50;
    display: flex; height: 64px;
    padding-bottom: env(safe-area-inset-bottom);
    background: var(--glass-bg);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border-top: 1px solid var(--glass-border);
    box-shadow: 0 -8px 24px rgba(0,0,0,.5);
  }
  .mobile-bottombar button {
    flex: 1; display: flex; flex-direction: column; align-items: center;
    justify-content: center; gap: 3px;
    background: none; border: none; cursor: pointer;
    font-size: 10px; font-weight: 700; color: var(--ink-3); font-family: var(--font);
    padding: 8px 4px;
  }
  .mobile-bottombar button.on { color: var(--primary); }
  .mobile-bottombar button .icon { width: 22px; height: 22px; stroke-width: 2; }
  .main { padding-bottom: 64px; }
  /* Bronze floating action button */
  .mobile-fab {
    position: fixed; bottom: calc(80px + env(safe-area-inset-bottom)); right: 18px;
    width: 56px; height: 56px; border-radius: 999px; border: none; cursor: pointer;
    background: var(--orange); color: #fff;
    box-shadow: 0 8px 24px rgba(224,167,62,.40);
    display: flex; align-items: center; justify-content: center; z-index: 49;
  }
  .mobile-fab .icon { width: 28px; height: 28px; stroke-width: 2; }
}
@media (min-width: 601px) {
  .mobile-bottombar, .mobile-fab { display: none !important; }
}

/* ════════════ REPORT + AUDIT views on phones (~390px) ════════════ */
@media (max-width: 600px) {
  #report-view .report-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  #report-view table { min-width: 520px; }
  #report-view h2 { font-size: 16px !important; }
  #report-view > div[style*="grid-template-columns"] {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  #report-view div[style*="overflow-x:auto"] { -webkit-overflow-scrolling: touch; }

  .audit-entry summary { flex-wrap: wrap; row-gap: 4px; padding: 10px 12px !important; }
  .audit-entry summary > span[style*="min-width:148px"] { min-width: 0 !important; flex-basis: 100%; }
  .audit-entry details > div > div[style*="grid-template-columns"],
  .audit-entry div[style*="grid-template-columns:170px"] {
    grid-template-columns: 1fr !important;
  }
  .audit-select { flex: 1 1 100%; }
}

/* ════════════ Print-friendly tweaks ════════════ */
@media print {
  .sidebar, .header, .mobile-bottombar, .mobile-fab, .overlay { display: none !important; }
  .main { margin: 0 !important; padding: 0 !important; }
  body { background: #fff !important; color: #000 !important; }
}