/* ============================================================================
 * responsive.css — mobile + tablet refinements layered on top of theme.css.
 *
 * Loaded with `<link rel="stylesheet" href="/responsive.css">` after
 * theme.css. Keeps theme.css focused on the desktop-first base; this file
 * houses the small-screen overrides so they're easy to find and tune.
 *
 * Breakpoints:
 *   * Tablet  : ≤ 1024px — kanban, heatmap and dense grids relax slightly
 *   * Phone   : ≤ 640px  — single-column forms, full-width modals,
 *                          tables get horizontal scroll, top-nav strips
 *                          decoration, touch targets enforced
 * ============================================================================ */

/* ── Touch-target sizing: enforce 44×44 minimum on phones (Apple HIG) ─── */
@media (max-width: 640px) {
  button, .primary-btn, [type="button"], [type="submit"], a.report-link,
  .app-sidebar-link, .ms-btn {
    min-height: 44px;
  }
  /* Buttons inside data tables and toolbars look weird at 44px — explicitly
     keep small inline ones smaller. */
  .pl-table button, .rn-table button, .fc-table button,
  .os-dh-table button, .saved-actions button, .os-saved-footer button {
    min-height: 32px;
  }
}

/* ── Form grids: collapse to single column on phones ──────────────────── */
@media (max-width: 640px) {
  .form-grid {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }
  /* `.wide` becomes a no-op when grid is already 1fr — stays full-width */
}

/* ── Tables: wrap in horizontal scroll if the page didn't ─────────────── */
@media (max-width: 640px) {
  .pl-table, .rn-table, .fc-table, .os-dh-table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    white-space: nowrap;
    /* keep header sticky-ish: not actually sticky inside overflow but at
       least make the column labels readable */
  }
  .pl-table thead, .rn-table thead, .fc-table thead, .os-dh-table thead {
    /* Keep table semantics so SR users still get a header row */
    display: table-header-group;
  }
  .pl-table tbody, .rn-table tbody, .fc-table tbody, .os-dh-table tbody {
    display: table-row-group;
  }
  .pl-table tr, .rn-table tr, .fc-table tr, .os-dh-table tr { display: table-row; }
  .pl-table th, .pl-table td,
  .rn-table th, .rn-table td,
  .fc-table th, .fc-table td,
  .os-dh-table th, .os-dh-table td { display: table-cell; }
}

/* ── Toolbars: tighter spacing + full-width controls on phones ────────── */
@media (max-width: 640px) {
  .pl-toolbar, .rn-toolbar, .fc-toolbar, .kb-toolbar, .ml-toolbar {
    padding: 10px 12px !important;
    gap: 10px !important;
  }
  .pl-toolbar > div, .rn-toolbar > div, .fc-toolbar > div, .kb-toolbar > div,
  .ml-toolbar > div {
    flex: 1 1 100% !important;
    min-width: 0 !important;
  }
  .pl-toolbar input, .pl-toolbar select,
  .rn-toolbar input, .rn-toolbar select,
  .fc-toolbar input, .fc-toolbar select,
  .kb-toolbar input, .kb-toolbar select,
  .ml-toolbar input, .ml-toolbar select {
    width: 100%;
    box-sizing: border-box;
  }
  /* Quick-window buttons in forecasting toolbar should wrap, not overflow */
  .fc-period-quick { flex-wrap: wrap; }
}

/* ── Top navigation: drop the brand subtitle + tenant code on phones ──── */
@media (max-width: 640px) {
  .app-brand-sub { display: none !important; }
  .app-nav-tenant { display: none !important; }
  .app-nav-inner { padding-left: 12px !important; padding-right: 12px !important; }
  .app-brand-text { font-size: 16px !important; }
}

/* ── Page header: tighter padding on phones ───────────────────────────── */
@media (max-width: 640px) {
  .page-header { padding: var(--space-4) var(--space-4) var(--space-3); }
  .page-header h1 { font-size: 22px !important; }
  .header-note { font-size: 13px !important; }
}

/* ── Modals: full-width on phones ─────────────────────────────────────── */
@media (max-width: 640px) {
  .rn-modal-dialog,
  .nav-choice-dialog,
  .dialog,
  .photo-drawer,
  .ml-drawer {
    width: calc(100vw - 16px) !important;
    max-width: calc(100vw - 16px) !important;
    box-sizing: border-box;
  }
}

/* ── Stats grids: keep auto-fit but tighten the minmax ────────────────── */
@media (max-width: 640px) {
  .fc-stats, .rn-stats {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 8px !important;
  }
  .fc-stat, .rn-stat {
    padding: 10px 12px !important;
  }
  .fc-stat-value, .rn-stat-value {
    font-size: 18px !important;
  }
}

/* ── Kanban board: horizontal scroll-snap on phones ──────────────────── */
@media (max-width: 640px) {
  .kb-board {
    grid-template-columns: repeat(7, 80vw) !important;
    gap: 8px !important;
    scroll-snap-type: x mandatory;
  }
  .kb-col {
    scroll-snap-align: start;
    min-height: 320px;
  }
}

/* ── Forecasting funnel: shrink labels on phone ──────────────────────── */
@media (max-width: 640px) {
  .fc-funnel-row {
    grid-template-columns: 80px 1fr 80px !important;
    font-size: 12px !important;
  }
  .fc-funnel-bar { font-size: 10px !important; }
}

/* ── Forecast monthly chart: bars get thinner; date labels rotate steeper */
@media (max-width: 640px) {
  .fc-chart { height: 160px !important; }
  .fc-chart-bars { height: 140px !important; gap: 1px !important; }
  .fc-chart-x { font-size: 9px !important; transform: rotate(-45deg) !important; }
}

/* ── Saved-footer: stack vertically on phones ────────────────────────── */
@media (max-width: 640px) {
  .os-saved-footer {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 8px !important;
  }
  .os-saved-footer .os-saved-spacer { display: none !important; }
  .os-saved-footer button, .os-saved-footer a {
    text-align: center;
    width: 100%;
  }
}

/* ── Action rows: stack-and-stretch on phones ────────────────────────── */
@media (max-width: 640px) {
  .actions, .form-actions {
    flex-direction: column !important;
    align-items: stretch !important;
  }
  .actions button, .actions a,
  .form-actions button, .form-actions a {
    width: 100% !important;
    text-align: center;
  }
}

/* ── Inventory heatmap: keep the existing horizontal scroll, just make
       the face-name column sticky so users can scroll dates without losing
       the row label. theme.css already handles this on tablet; we just
       guarantee it survives on phone. ──────────────────────────────── */
@media (max-width: 640px) {
  .inv-heatmap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}

/* ── Photo / maintenance panels: tighter inner spacing on phone ──────── */
@media (max-width: 640px) {
  .pp-grid {
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)) !important;
  }
  .ml-table th, .ml-table td { padding: 6px 8px !important; font-size: 12px !important; }
}

/* ── Headers in section blocks: keep readable line-height ────────────── */
@media (max-width: 640px) {
  .section-title { font-size: 14px !important; }
  .section { padding: 12px !important; }
}

/* ── Tablet sweet-spot adjustments (641–1024px) ───────────────────────── */
@media (min-width: 641px) and (max-width: 1024px) {
  /* Forecasting + renewals stat grids look cramped at 6-up here */
  .fc-stats { grid-template-columns: repeat(3, 1fr); }
  .rn-stats { grid-template-columns: repeat(3, 1fr); }
  /* Form grids: still 2 columns but slightly tighter */
  .form-grid { gap: 10px 14px; }
}