/* =====================================================================
   responsive.css — Breakpoints (last in cascade)
   ===================================================================== */

/* Laptop */
@media (max-width: 1280px) {
  .stats-grid { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
}

/* Tablet */
@media (max-width: 1024px) {
  :root { --column-w: 300px; }
  .brand-title { font-size: var(--fs-base); white-space: normal; }
  .header-clock { display: none; }
  .search-box { min-width: 190px; }
  .toolbar { top: auto; position: static; }
}

/* Small tablet / large phone — revert to normal page scroll */
@media (max-width: 820px) {
  /* drop the fixed-height app shell so the whole page scrolls */
  body { height: auto; min-height: 100vh; display: block; overflow-x: hidden; overflow-y: auto; }
  .board-wrap { display: block; flex: none; min-height: 0; padding: 0 var(--sp-4) var(--sp-4); }
  .kanban-board { flex: none; min-height: 50vh; }
  .kanban-column { max-height: none; }

  .header-inner { flex-wrap: wrap; gap: var(--sp-2); padding: var(--sp-3) var(--sp-4); }
  .header-brand { order: 1; }
  .header-actions { order: 3; width: 100%; margin-left: 0; flex-wrap: wrap; }
  .search-box { order: 2; flex: 1 1 100%; min-width: 0; }
  .stats-section { padding: var(--sp-3) var(--sp-4) var(--sp-1); }
  .toolbar { padding: var(--sp-2) var(--sp-4) var(--sp-3); }
  .banner, .diagnostics-panel { margin-left: var(--sp-4); margin-right: var(--sp-4); }
}

/* Phone */
@media (max-width: 560px) {
  :root { --column-w: 84vw; }
  .brand-subtitle .project-name { display: none; }
  .stats-grid { grid-template-columns: repeat(2, 1fr); }
  .stat-value { font-size: var(--fs-xl); }
  .modal-overlay { padding: 0; align-items: flex-end; }
  .modal { max-height: 94vh; border-radius: var(--radius-lg) var(--radius-lg) 0 0; width: 100%; }
  .modal-tabs { overflow-x: auto; }
  .modal-header, .modal-body, .modal-footer { padding-left: var(--sp-4); padding-right: var(--sp-4); }
  .toast-stack { right: var(--sp-3); left: var(--sp-3); width: auto; }
  .export-menu { right: var(--sp-4); left: var(--sp-4); }
  .header-clock { display: none; }
  .icon-btn { width: 34px; height: 34px; }
}

/* Wide desktop — let stats breathe */
@media (min-width: 1600px) {
  .stats-grid { grid-template-columns: repeat(8, 1fr); }
}

/* Print */
@media print {
  .app-header, .toolbar, .diagnostics-panel, .toast-stack, .card-footer, .card-pin { display: none !important; }
  .kanban-board { flex-wrap: wrap; overflow: visible; }
  .branch-card { break-inside: avoid; }
}