/* ===========================================================================
   responsive.css — mobile-first enhancements & all-device coverage.
   Loaded after app.css so these rules win. The base layout is fluid;
   these breakpoints tune density, touch targets and overflow per device.
   =========================================================================== */

/* --- Global overflow safety: nothing scrolls the page sideways ---------- */
html, body { max-width: 100%; overflow-x: hidden; }
.main { max-width: 100vw; min-width: 0; }
.content { max-width: 100%; }
.card, .dt-wrap, .kanban, .tabs { max-width: 100%; }
img, svg, table { max-width: 100%; }

/* Wide content (tables, steppers, tab bars) scrolls inside its own box ---- */
.tabs { overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.tabs::-webkit-scrollbar { display: none; }
.tab { white-space: nowrap; }
.stepper { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* =======================================================================
   TABLET  (≤ 1024px)
   ======================================================================= */
@media (max-width: 1024px) {
  .grid-stats { grid-template-columns: repeat(2, 1fr); }
  .grid-3 { grid-template-columns: repeat(2, 1fr); }
  .grid-12 { grid-template-columns: 1fr; }
  .content { padding: var(--sp-5); }
}

/* =======================================================================
   MOBILE  (≤ 900px) — sidebar goes off-canvas (base rule in app.css)
   ======================================================================= */
@media (max-width: 900px) {
  .js-collapse { display: none !important; }          /* collapse is meaningless off-canvas */
  .topbar { padding: 0 var(--sp-3); gap: var(--sp-2); }
  .topbar .search { display: block; flex: 1; min-width: 0; max-width: none; }
  /* dim + catch taps behind the open drawer */
  .app.nav-open::before {
    content: ""; position: fixed; inset: 0; background: rgba(51,54,59,.42);
    z-index: calc(var(--z-drawer) - 1); animation: fade var(--t-fast) ease;
  }
  .sidebar { box-shadow: var(--shadow-lg); }
}

/* =======================================================================
   PHONE  (≤ 560px) — touch-first
   ======================================================================= */
@media (max-width: 560px) {
  /* Touch targets ≥ 40px, and 16px inputs so iOS Safari doesn't zoom */
  .btn { height: 40px; padding: 0 var(--sp-3); }
  .btn-sm { height: 34px; }
  .btn-icon { width: 40px; height: 40px; }
  .input, .select, textarea.input { font-size: 16px; height: 42px; }
  textarea.input { height: auto; }
  .chip, .badge { min-height: 26px; }

  .grid-stats { grid-template-columns: 1fr 1fr; gap: var(--sp-3); }
  .statcard { padding: var(--sp-3) var(--sp-4); }
  .statcard .value { font-size: 20px; }

  /* Page header: title on top, actions stretch full-width beneath */
  .page-head { margin-bottom: var(--sp-4); align-items: stretch; }
  .page-head h1 { font-size: 26px; }
  .page-head .js-actions { width: 100%; }
  .page-head .js-actions .btn { flex: 1; justify-content: center; }

  /* Definition lists stack label-over-value */
  .dl { grid-template-columns: 1fr; gap: 0; }
  .dl dt { margin-top: var(--sp-2); }
  .dl dd { margin-bottom: 2px; }

  /* Cards & dialogs: tighter padding */
  .card-pad, .card-body { padding: var(--sp-4); }
  .modal-body, .drawer-body, .modal-head, .drawer-head, .modal-foot, .drawer-foot { padding: var(--sp-4); }
  .modal-foot, .drawer-foot { flex-wrap: wrap; }
  .modal-foot .btn, .drawer-foot .btn { flex: 1; justify-content: center; }

  /* Kanban columns nearly full-width so they read like a swipe deck */
  .kcol { flex-basis: 84vw; max-height: none; }

  /* Topbar: keep menu · search · bell · user; tuck away the rest */
  .topbar .js-density, .topbar .js-tour { display: none; }
  .topbar-select.js-branch { max-width: 128px; }

  /* DataTable toolbar stacks cleanly */
  .dt-toolbar { gap: var(--sp-2); }
  .dt-toolbar .search { max-width: none !important; flex: 1 1 100%; }

  /* Login */
  .login-form { padding: var(--sp-6); }

  /* Two-up detail grids collapse */
  .grid-2 { grid-template-columns: 1fr; }
  .toast-stack { left: var(--sp-3); right: var(--sp-3); bottom: var(--sp-3); }
  .toast { min-width: 0; width: 100%; }
}

/* =======================================================================
   SMALL PHONE  (≤ 400px)
   ======================================================================= */
@media (max-width: 400px) {
  .content { padding: var(--sp-3); }
  .grid-stats { grid-template-columns: 1fr; }
  .userchip .who { display: none; }                   /* avatar only */
  .topbar-select.js-branch { max-width: 104px; font-size: 12px; }
  .page-head h1 { font-size: 22px; }
  .cmdk input { font-size: 16px; }
}

/* =======================================================================
   Coarse-pointer (touch) devices of any width — bigger hit areas
   ======================================================================= */
@media (pointer: coarse) {
  .nav-item { padding-top: var(--sp-3); padding-bottom: var(--sp-3); }
  table.dt tbody td { height: max(var(--row-h), 44px); }
  .tab { padding-top: var(--sp-4); padding-bottom: var(--sp-4); }
}

/* Landscape phones: don't waste vertical space in dialogs */
@media (max-height: 480px) and (orientation: landscape) {
  .modal { max-height: 94vh; }
  .drawer-body, .modal-body { padding: var(--sp-3); }
}