/* ============================================================
   mobile.css — phone and small-tablet layer.

   Loaded LAST so it wins on equal specificity without needing
   !important. The other stylesheets carry ~21 media queries across
   13 different breakpoints, which is why layouts broke at sizes
   nothing was designed for; everything here uses two:

     <= 768px   phone
     <= 1024px  small tablet (touch targets only)

   Existing per-file queries are left alone rather than rewritten —
   they mostly tune spacing and still apply. This layer handles the
   structural work: what stacks, what scrolls, what becomes a sheet.
   ============================================================ */

/* ── Touch targets ──────────────────────────────────────────
   Anything tappable gets a 44px minimum, the smallest reliably
   hittable target on a phone. Applied by pointer type rather than
   width so a touch laptop benefits too. */
@media (hover: none) and (pointer: coarse) {
  .btn,
  .nav-item,
  .tab-btn,
  .sidebar-user,
  .sidebar-logout,
  .org-switcher-trigger,
  .user-orgs-trigger,
  [data-action] {
    min-height: 44px;
  }

  .btn-sm  { min-height: 40px; }
  .btn-icon { min-width: 44px; }

  /* Hover styling sticks after a tap on touch devices; suppress the
     ones that read as "still selected". */
  .nav-item:hover  { background: inherit; }
  .org-card:hover  { background: var(--surface-2); border-color: var(--border); }
}

@media (max-width: 768px) {

  /* ── Shell ────────────────────────────────────────────────
     The rail is a fixed icon strip on desktop. On a phone that
     column is dead space, so the drawer takes over and the content
     reclaims the full width. */
  .main-wrapper {
    margin-left: 0 !important;
    width: 100%;
  }

  .sidebar {
    width: 264px;
    min-width: 264px;
    box-shadow: var(--shadow-lg);
  }

  /* Inside the drawer the labels come back — it is a full menu here,
     not a rail, so the collapsed-state rules must not apply. */
  body.sidebar-collapsed .sidebar        { width: 264px; min-width: 264px; }
  body.sidebar-collapsed .nav-label,
  body.sidebar-collapsed .sidebar-user-info,
  body.sidebar-collapsed .sidebar-menu-label {
    opacity: 1;
    max-width: none;
    display: block;
  }
  body.sidebar-collapsed .nav-item,
  body.sidebar-collapsed .sidebar-user   { justify-content: flex-start; padding: 11px 14px; }
  body.sidebar-collapsed .sidebar-header { justify-content: flex-start; padding: 14px 16px; }
  body.sidebar-collapsed .sidebar-nav    { padding: 10px 8px; }

  /* Tooltips are a pointer affordance — on touch they would fire on
     tap and sit over the thing just tapped. */
  body.sidebar-collapsed .nav-item::after,
  body.sidebar-collapsed .sidebar-user::after { display: none; }

  /* ── Topbar ───────────────────────────────────────────────── */
  .topbar {
    padding: 0 12px;
    gap: 8px;
    position: sticky;
    top: 0;
    z-index: 90;
  }
  .topbar-title   { font-size: 15px; }
  .topbar-actions { gap: 6px; margin-left: auto; }

  /* The workspace name is the first thing to overflow. Cap it and
     ellipsise rather than letting it push the actions off-screen. */
  .org-switcher-name {
    max-width: 34vw;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .page-content { padding: 14px 12px 28px; }

  /* ── KPI cards ────────────────────────────────────────────
     One per row. Two columns at this width leaves the numbers —
     the entire point of the card — too small to scan. */
  .kpi-grid { grid-template-columns: 1fr !important; gap: 12px; }
  .kpi-card { padding: 16px; }
  .kpi-card-value { font-size: 26px; }
  .kpi-card-subs  { flex-wrap: wrap; gap: 10px 16px; }

  /* ── Cards and sections ───────────────────────────────────── */
  .card { border-radius: var(--r); }
  .card-header {
    flex-wrap: wrap;
    gap: 10px;
    padding: 14px;
  }
  .card-title { font-size: 15px; }

  /* ── Tables ───────────────────────────────────────────────
     Kept as tables with horizontal scroll rather than reflowed into
     cards: these are dense operational grids where comparing rows
     down a column is the actual task, and a card list destroys that.
     The scroll is made obvious instead of hidden. */
  .table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    /* Fade on the right edge signals there is more to the side. */
    background:
      linear-gradient(to right, var(--surface) 30%, transparent),
      linear-gradient(to left,  var(--surface) 30%, transparent) 100% 0;
    background-repeat: no-repeat;
    background-size: 24px 100%, 24px 100%;
    background-attachment: local, local;
  }
  .table-wrap table { min-width: 640px; }
  .table-wrap th,
  .table-wrap td { padding: 10px 12px; font-size: 13px; white-space: nowrap; }

  /* ── Filter bars ──────────────────────────────────────────── */
  .filter-bar {
    flex-wrap: wrap;
    gap: 8px;
    padding: 12px;
  }
  .filter-bar .form-input,
  .filter-bar .form-select { flex: 1 1 100%; width: 100% !important; min-width: 0; }
  .filter-bar .btn { flex: 1 1 auto; }

  /* ── Forms ────────────────────────────────────────────────
     16px is the threshold below which iOS Safari zooms the viewport
     on focus, which then leaves the page scrolled and scaled. */
  .form-input,
  .form-select,
  .form-textarea { font-size: 16px; }
  .form-row { flex-direction: column; gap: 12px; }
  .form-row > * { width: 100%; }

  /* ── Modals become bottom sheets ──────────────────────────
     Anchored to the bottom, where thumbs are, and capped so a long
     form scrolls inside the sheet rather than the page behind it. */
  .modal-overlay { align-items: flex-end; padding: 0; }
  .modal {
    max-width: 100% !important;
    width: 100%;
    max-height: 92vh;
    border-radius: var(--r-xl) var(--r-xl) 0 0;
    display: flex;
    flex-direction: column;
    animation: sheetUp .22s var(--ease);
  }
  .modal-header { padding: 16px 18px; flex-shrink: 0; }
  .modal-body   { padding: 0 18px 18px; overflow-y: auto; flex: 1 1 auto; -webkit-overflow-scrolling: touch; }
  .modal-footer {
    padding: 12px 18px calc(12px + env(safe-area-inset-bottom));
    flex-shrink: 0;
    flex-wrap: wrap;
    gap: 8px;
    border-top: 1px solid var(--border);
    background: var(--surface);
  }
  .modal-footer .btn { flex: 1 1 auto; }

  @keyframes sheetUp {
    from { transform: translateY(100%); }
    to   { transform: translateY(0); }
  }

  /* ── Settings tabs ────────────────────────────────────────
     Scroll horizontally instead of wrapping onto two rows, which
     shifted the panel down and hid the content below the fold. */
  .tab-list {
    overflow-x: auto;
    flex-wrap: nowrap;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .tab-list::-webkit-scrollbar { display: none; }
  .tab-btn { flex: 0 0 auto; white-space: nowrap; }

  /* ── Auth screens ─────────────────────────────────────────── */
  .login-card,
  .no-org-card { padding: 28px 20px; border-radius: var(--r-lg); }

  /* The hover-reveal agency mark is pointer-only; on touch it would
     need a tap that also follows the link. */
  .brand-mark { display: none; }

  /* ── Charts ───────────────────────────────────────────────
     Fixed pixel heights leave charts letterboxed or clipped on a
     phone; cap by viewport instead. */
  .chart-wrap,
  canvas { max-height: 46vh; }

  /* ── Pagination ───────────────────────────────────────────── */
  .pagination { flex-wrap: wrap; gap: 8px; padding: 12px; }
  .pagination-info { flex: 1 1 100%; text-align: center; order: 2; }
}

/* ── Very small phones ────────────────────────────────────── */
@media (max-width: 380px) {
  .page-content   { padding: 12px 10px 24px; }
  .kpi-card-value { font-size: 23px; }
  .topbar-title   { font-size: 14px; }
  .org-switcher-name { max-width: 26vw; }
}

/* ── Landscape phones ─────────────────────────────────────
   Short viewport: a bottom sheet capped at 92vh leaves almost no
   room, so let it use the full height and drop the rounded lip. */
@media (max-width: 900px) and (max-height: 480px) and (orientation: landscape) {
  .modal { max-height: 100vh; border-radius: 0; }
  .modal-overlay { align-items: stretch; }
}