/* =============================================================================
 * responsive.css — mobile layout layer.
 *
 * Loaded LAST on every page (after modern.css, utilities.css, and any inline
 * <style>) so these rules win the cascade without !important. Everything is
 * wrapped in width media queries, so desktop is untouched.
 *
 * Goal: no horizontal PAGE scroll on phones + a readable, stacked layout.
 * Breakpoints: <=768px (small tablet), <=640px (phone).
 * ========================================================================== */

/* ---- Tablet: the shared 4-up metric grids drop to 2-up ---- */
@media (max-width: 1024px) {
  .stats-grid,
  .c-stats-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ---- Phone ---- */
@media (max-width: 640px) {

  /* Collapse every multi-column grid to a single column. */
  .stats-grid,
  .c-stats-grid,
  .u-grid-2,
  .u-grid-3,
  .c-grid-cols-3,
  .c-grid-180-af,
  .c-grid-200-af,
  .info-grid,
  .quick-stats,
  .detail-grid,
  .form-row,
  .form-grid { grid-template-columns: 1fr; }

  /* Let grid/flex children shrink rather than force the page wide. The
     `> *` rules are the important bit: a grid/flex track defaults to
     min-width:auto (= content min-width), so non-wrapping content like a
     tab strip drags the whole column wide. min-width:0 lets it shrink and
     the inner scroll/wrap take over. */
  .stat-card,
  .card,
  .sidebar-card,
  .quick-stat,
  .info-item,
  .app-content,
  .app-main { min-width: 0; }
  .detail-grid > *,
  .app-main > *,
  .app-content > * { min-width: 0; }

  /* Media never forces the page wider than the viewport. */
  img,
  canvas,
  video,
  svg { max-width: 100%; height: auto; }

  /* Card headers (title + tabs/actions) wrap instead of forcing the card
     wider than the screen — fixes the dashboard chart header on ~360px phones. */
  .card-header { flex-wrap: wrap; gap: 0.4rem; }
  .dashboard-grid > * { min-width: 0; }

  /* Deal quick-stats: compact single-line rows (label left, value right)
     instead of tall centered blocks — much less vertical space on phones. */
  .quick-stats { gap: 0.4rem; }
  .quick-stat {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    text-align: left;
    padding: 0.5rem 0.85rem;
  }
  .quick-stat-value { font-size: 15px; margin-bottom: 0; }
  .quick-stat-label { order: -1; }

  /* Horizontal tab strips: swipe instead of breaking the page. */
  .main-tabs,
  .tabs,
  .filter-tabs,
  .entity-tabs {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .main-tabs::-webkit-scrollbar,
  .tabs::-webkit-scrollbar,
  .filter-tabs::-webkit-scrollbar,
  .entity-tabs::-webkit-scrollbar { height: 0; }
  .main-tab,
  .tab,
  .filter-tab { white-space: nowrap; }

  /* Filter bars / toolbars wrap; search + selects go full width. */
  .filter-bar,
  .filters-row,
  .toolbar { flex-wrap: wrap; }
  .filters-row .search-filter,
  .filter-bar .search-filter,
  .filters-row .filter-select,
  .search-box { max-width: 100%; min-width: 0; }

  /* App top bar: condense so the page title + action buttons fit. The title
     ellipsises and the icon+text action buttons collapse to icon-only — a
     standard mobile top-bar pattern that keeps every action reachable. */
  .app-header { padding: 0 0.5rem; gap: 0.4rem; }
  .app-header h1,
  .header-title,
  .app-header .c-breadcrumb,
  .app-header .header-breadcrumb {
    min-width: 0;
    flex: 0 1 auto;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 1.05rem;
  }
  .header-actions { gap: 0.2rem; min-width: 0; }
  .header-actions .btn .material-symbols-outlined + span { display: none; }
  .header-actions .btn { padding: 0.4rem; }
  /* Breadcrumb: show only the current location (drop parent links + separators)
     so the header fits alongside the action buttons. */
  .app-header .c-breadcrumb a,
  .app-header .c-breadcrumb .separator,
  .app-header .c-breadcrumb .material-symbols-outlined,
  .app-header .header-breadcrumb a,
  .app-header .header-breadcrumb .separator { display: none; }
  /* reports' date-range picker: shrink its inputs so the bar fits */
  .date-range-picker { min-width: 0; flex-shrink: 1; }
  .date-range-picker input { min-width: 0; width: 72px; }

  /* In-content header rows (title + action buttons) wrap instead of pushing
     buttons off-screen. Opt-in (mirrors .tbl-stack) — a blanket rule on
     .flex.justify-between would also wrap things like chart axis labels. */
  .u-wrap-mobile { flex-wrap: wrap; gap: 0.5rem; }

  /* ----- Responsive stacked tables (opt-in via .tbl-stack) -----
     Each row becomes a card; each cell shows "Label: value" from data-label
     (set by App.stackLabels from the header cells). */
  table.tbl-stack thead { display: none; }
  table.tbl-stack,
  table.tbl-stack tbody,
  table.tbl-stack tr,
  table.tbl-stack td { display: block; width: auto; }
  table.tbl-stack tr {
    border: 1px solid var(--border);
    border-radius: 12px;
    margin-bottom: 0.6rem;
    padding: 0.35rem 0.85rem;
    background: var(--card);
  }
  table.tbl-stack td {
    display: flex;
    gap: 1rem;
    align-items: center;
    justify-content: space-between;
    padding: 0.4rem 0;
    border: none;
    text-align: right;
    min-width: 0;
    white-space: normal;
  }
  table.tbl-stack td > * { min-width: 0; }
  table.tbl-stack td::before {
    content: attr(data-label);
    font-weight: 600;
    color: var(--muted-foreground);
    text-align: left;
    white-space: nowrap;
    flex: 0 0 auto;
  }
  /* cells with no label (e.g. the actions menu): drop the prefix, right-align */
  table.tbl-stack td:not([data-label]) { justify-content: flex-end; }
  table.tbl-stack td:not([data-label])::before { content: none; }
  /* the bulk-select checkbox column is desktop-only */
  table.tbl-stack td:has(.row-checkbox) { display: none; }

  /* Any non-stacked table: contain its scroll inside its card. */
  .table-container { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  table:not(.tbl-stack) { display: block; overflow-x: auto; max-width: 100%; }

  /* Label/value rows (detail pages, forms) stack vertically with full,
     readable label width instead of a cramped fixed column. */
  .info-row,
  .detail-row,
  .field-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.15rem;
  }
  .info-label,
  .detail-label,
  .form-label {
    width: auto;
    min-width: 0;
    white-space: normal;
  }

  /* Eliminate the classic 100vw scrollbar overflow. */
  .notification-dropdown-menu { width: 100%; max-width: 100%; }

  /* Dialogs/modals fit within the viewport. */
  .dialog,
  .modal-content { max-width: calc(100vw - 1.5rem); }
}