/* mobile.css — single-file responsive overrides
 *
 * Goal: make the workspace app actually usable on phones without
 * touching every component. We override the desktop-first layout at
 * a single ≤760px breakpoint; tablets keep the desktop layout.
 *
 * Strategy
 *   1. Collapse the fixed-width sidebar into an off-canvas drawer.
 *      A hamburger toggle in the topbar sets `body.is-mobile-nav-open`
 *      to slide the sidebar in. A scrim absorbs the click-out and
 *      prevents background scroll.
 *   2. Promote the side-drawer (task drawer) to full-screen on
 *      mobile so the half-width panel doesn't get squeezed.
 *   3. Promote .modal-backdrop modals to full-screen at a consistent
 *      bottom-radius-only frame so the OS keyboard doesn't shove the
 *      footer out of view.
 *   4. Wrap tables in horizontal scroll containers — tables stay
 *      desktop-width but become scrollable instead of overflowing.
 *   5. Stack two-column grids (.ms-row-split etc.) to a single column.
 *   6. Shrink the topbar — drop crumbs to the active leaf and
 *      tighten icon-button sizes.
 *
 * Rules of engagement
 *   - No layout changes above 760px. Desktop is unchanged.
 *   - Use !important sparingly — only where a more-specific desktop
 *     selector would otherwise win.
 *   - All inputs ≥ 16px font-size at <=760px so iOS doesn't auto-zoom
 *     on focus.
 */

/* ── Touch-target hygiene applies everywhere, not just mobile ── */
button, .btn, .icon-btn, input, select, textarea {
  -webkit-tap-highlight-color: transparent;
}

/* ── Default-hide mobile-only chrome on desktop ──────────────
 * The hamburger and the off-canvas scrim render in the DOM
 * unconditionally so React doesn't have to remount them on
 * resize. CSS gates visibility at the breakpoint below.
 */
.mobile-nav-toggle { display: none; }
.mobile-nav-scrim {
  position: fixed; inset: 0; z-index: 60;
  background: rgba(15,23,41,.45);
  opacity: 0; pointer-events: none;
  transition: opacity .18s ease-out;
  display: none;            /* hidden on desktop */
}

@media (max-width: 760px) {

  /* ── Root document tweaks ─────────────────────────────────── */
  html, body {
    overscroll-behavior-y: none;
    -webkit-text-size-adjust: 100%;
  }
  body.is-mobile-nav-open {
    overflow: hidden;     /* no background scroll while the sidebar is open */
  }

  /* ── App shell: collapse the sidebar column ─────────────── */
  .app {
    grid-template-columns: 1fr !important;
  }

  /* The sidebar slides in from the left over the main content. */
  .sidebar {
    position: fixed;
    top: 0; left: 0; bottom: 0;
    width: 78vw; max-width: 320px;
    z-index: 70;
    transform: translateX(-105%);
    transition: transform .22s ease-out;
    box-shadow: 0 16px 40px rgba(0,0,0,.3);
  }
  body.is-mobile-nav-open .sidebar {
    transform: translateX(0);
  }

  /* Scrim becomes a real layer on mobile (default hidden via the
     desktop rules above). Clicking it closes the sidebar — that's
     wired in app.jsx. */
  .mobile-nav-scrim { display: block; }
  body.is-mobile-nav-open .mobile-nav-scrim {
    opacity: 1; pointer-events: auto;
  }

  /* Hamburger button injected into the topbar at runtime. */
  .mobile-nav-toggle {
    display: inline-flex !important;
    align-items: center; justify-content: center;
    width: 36px; height: 36px;
    border: none; background: transparent;
    color: var(--ink, #0f1729);
    cursor: pointer;
    border-radius: 8px;
    margin-right: 6px;
    flex-shrink: 0;
  }
  .mobile-nav-toggle:hover { background: rgba(15,23,41,.06); }
  .mobile-nav-toggle svg { width: 22px; height: 22px; }

  /* ── Topbar tightening ──────────────────────────────────── */
  .topbar {
    padding-left: 6px !important;
    padding-right: 8px !important;
    gap: 6px !important;
  }
  /* Show only the last (leaf) crumb on mobile to save space. */
  .breadcrumb {
    flex-shrink: 1; min-width: 0; overflow: hidden;
    white-space: nowrap; text-overflow: ellipsis;
    font-size: 13px;
  }
  .breadcrumb svg, .breadcrumb > span:not(:last-of-type) {
    display: none !important;
  }
  /* Compact AI bar — drop the long hint, keep the prompt + kbd */
  .topbar-search .ai-bar-hint { display: none !important; }
  .topbar-search .ai-bar-text { gap: 6px !important; }
  .topbar-search .ai-bar-prompt { font-size: 13px !important; }
  .topbar-search-kbd, .ai-bar-kbd { display: none !important; }
  .topbar-actions { gap: 4px !important; }
  .topbar-actions .icon-btn { width: 34px; height: 34px; }
  /* Hide the help button on mobile — saves room and the help panel
     isn't really mobile-friendly anyway. */
  .topbar-actions .icon-btn:not(.nf-bell):not(:last-child) {
    display: none !important;
  }
  /* "Acting as" switcher hidden on mobile — owner-only debug tool. */
  .acting-as { display: none !important; }

  /* ── Side drawer (task drawer) — full screen on mobile ── */
  .drawer {
    width: 100% !important;
    max-width: 100% !important;
    border-radius: 0 !important;
  }
  .drawer-backdrop { display: block !important; }
  .drawer-head { padding: 12px 14px !important; }
  .drawer-head-actions .icon-btn { width: 34px; height: 34px; }
  .drawer-body { padding: 12px 14px 80px !important; }
  /* Detail grid: stack the label/value rows into a single column. */
  .drawer-grid { grid-template-columns: 1fr !important; }
  .drawer-task-title { font-size: 18px !important; line-height: 1.3 !important; }

  /* ── Modals — full-screen-ish ───────────────────────────── */
  .modal-backdrop {
    align-items: flex-end !important;
    padding: 0 !important;
  }
  .modal {
    width: 100% !important;
    max-width: 100% !important;
    max-height: 92vh !important;
    border-radius: 14px 14px 0 0 !important;
    margin: 0 !important;
    animation: mobileModalIn .18s ease-out !important;
  }
  @keyframes mobileModalIn {
    from { transform: translateY(20px); opacity: 0 }
    to { transform: none; opacity: 1 }
  }
  .modal-header { padding: 14px 16px 12px !important; }
  .modal-body { padding: 4px 16px 18px !important; }
  .modal-footer {
    padding: 10px 14px calc(env(safe-area-inset-bottom, 0px) + 10px) !important;
    flex-wrap: wrap;
  }
  .modal-footer .btn,
  .modal-footer .btn-primary,
  .modal-footer .btn-ghost {
    flex: 1 1 auto;
  }

  /* ── Form rows — stack on mobile ───────────────────────── */
  .ms-row-split { grid-template-columns: 1fr !important; }
  .ms-input,
  input[type=text], input[type=email], input[type=password],
  input[type=number], input[type=search], input[type=url],
  textarea, select {
    font-size: 16px !important;       /* prevent iOS auto-zoom on focus */
    min-height: 40px;
  }
  textarea { min-height: 80px; }

  /* ── Buttons — bigger touch targets ─────────────────────── */
  .btn, .btn-primary, .btn-ghost {
    min-height: 36px;
    padding: 0 14px;
  }

  /* ── Tables — make them horizontally scrollable ─────────── */
  .table-wrap, .owner-dash-table-wrap, .admin-table-wrap, .wlh-scroll, .sup-list, .crm-table-wrap {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
  }
  .table-wrap table, .owner-dash-table, .admin-table, .crm-table {
    min-width: 720px;
  }

  /* ── Owner dashboard — compact at small sizes ───────────── */
  .owner-dash { padding: 12px !important; }
  .owner-dash h1 { font-size: 22px !important; }
  .owner-dash-status-cards {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 8px !important;
  }
  .owner-dash-card { padding: 10px 12px !important; }
  .owner-dash-status-pills {
    flex-wrap: wrap; padding: 8px 10px !important;
  }
  /* Heatmap: hide the totals columns on mobile, keep the grid; the
     "Open" column is restored via Open Tasks chip in the per-row
     detail. */
  .wlh-name-col, .wlh-name-cell { min-width: 160px !important; }
  .wlh-day-col { min-width: 36px !important; }
  .wlh-cell-btn { width: 30px !important; height: 28px !important; font-size: 11px !important; }
  /* Reduce the heatmap toolbar to just the range picker + reload.
     The legend doesn't fit on a phone — desktop users still see it. */
  .wlh-legend { display: none !important; }
  /* Daily activity rows stack — already handled by the existing
     980px media query inside the inline CSS, so this is a no-op
     here, but the topbar is also affected so we re-state it for
     priority. */
  .dap-row { grid-template-columns: 1fr !important; gap: 10px !important; }

  /* ── Admin people page ──────────────────────────────────── */
  .admin-page { padding: 0 !important; }
  .admin-header { padding: 12px 14px 0 !important; }
  .admin-tabs { padding: 0 14px !important; overflow-x: auto; flex-wrap: nowrap !important; }
  .admin-tab { white-space: nowrap; }
  .admin-seats {
    grid-template-columns: 1fr 1fr !important;
    padding: 12px 14px !important;
    gap: 10px !important;
  }
  .seat-card { padding: 10px 12px !important; }
  .admin-filters { padding: 12px 14px !important; flex-wrap: wrap; }
  .admin-filters .search-input { flex: 1 1 100%; }
  .admin-table-wrap { margin: 0 14px 14px !important; }
  /* People-detail row — collapse to a card on mobile */
  .admin-table { font-size: 12.5px; }

  /* ── New Task modal ─────────────────────────────────────── */
  .nt-modal { width: 100% !important; }
  .nt-mode-toggle { display: none !important; }   /* the toggle saves a
                                                     row on mobile;
                                                     the form itself
                                                     adapts */
  .nt-type-row { gap: 6px !important; flex-wrap: wrap; }
  .nt-type-chip { flex: 1 1 calc(50% - 6px); justify-content: center; }
  .nt-assignees { gap: 6px !important; }
  .ms-grid > .ms-row { gap: 4px; }

  /* ── Bug report modal — full-screen-ish too ─────────────── */
  .bug-rt-area { min-height: 100px; max-height: 220px; }
  .bug-rec-pill {
    padding: 6px 4px 6px 12px !important;
    font-size: 12px !important;
  }
  .bug-floating-btn {
    bottom: 76px !important;
    right: 14px !important;
    padding: 8px 12px !important;
    font-size: 12.5px !important;
  }

  /* ── CRM ─────────────────────────────────────────────────── */
  .crm-toolbar { flex-wrap: wrap; gap: 8px !important; padding: 10px 12px !important; }
  .crm-stats { grid-template-columns: 1fr 1fr !important; gap: 8px !important; padding: 0 12px !important; }
  .crm-content { flex-direction: column !important; }
  .crm-detail { width: 100% !important; max-width: 100% !important; }

  /* ── Calendar ────────────────────────────────────────────── */
  .cal-cell { min-height: 84px !important; padding: 4px !important; }
  .cal-cell-day { font-size: 11px !important; }
  .cal-task { font-size: 10px !important; padding: 2px 5px !important; }

  /* ── Personal ─────────────────────────────────────────────
     Home is handled in home.css's own @media block — those rules
     match the real class names (.home-body, .home-stats,
     .home-projects-grid). Keep this section for the Personal
     page (Notes / Todo) which still uses generic *-grid classes. */

  /* ── Notifications panel — full-width slide-down ─────────── */
  .nf-panel { width: 100vw !important; right: 0 !important; left: 0 !important; max-width: 100% !important; }

  /* ── Chat bubble — keep above the bug button ─────────────── */
  .chat-bubble-app .cb-launcher { right: 14px !important; bottom: 22px !important; }
  .chat-bubble-app .cb-panel {
    right: 0 !important; left: 0 !important; bottom: 0 !important; top: 0 !important;
    width: 100vw !important; height: 100% !important;
    border-radius: 0 !important;
  }

  /* ── Workspace add modals + Project access modal ─────────── */
  .access-panel { max-height: 75vh !important; }

  /* ── Hide the desktop "Acting as" + impersonation chrome on
       mobile across the board. ───────────────────────────────── */
  .topbar-actions > .acting-as { display: none !important; }

  /* ── Misc — long lines wrap, tooltips don't overflow viewport ── */
  .topbar, .topbar-search, .topbar-actions { min-width: 0; }
  .topbar-search { flex: 1 1 0; min-width: 0; }
}

/* ── Tiny phones (≤380px) — extra tightening ─────────────────── */
@media (max-width: 380px) {
  .topbar-search .ai-bar-prompt { display: none; }
  .topbar-search .ai-bar-text::after {
    content: "Search";
    color: var(--ink-muted, #676879);
    font-size: 13px;
  }
  .nt-type-chip { flex: 1 1 100%; }
  .owner-dash-status-cards { grid-template-columns: 1fr 1fr !important; }
}