/* ==========================================================================
   TaskManager — Responsive Rules
   ========================================================================== */

.projects-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 18px;
}

@media (max-width: 900px) {
  .main-content { padding: 26px 18px 60px; }
  .projects-grid { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
  .kanban-board { grid-template-columns: 1fr; }
  .column-body { max-height: none; }
}

@media (max-width: 640px) {
  .app-header { padding: 0 16px; }
  .brand span.brand-name { display: none; }
  .page-heading { flex-direction: column; align-items: flex-start; }
  .page-heading h1 { font-size: 22px; }
  .projects-grid { grid-template-columns: 1fr; }
  .modal { width: 100%; border-radius: var(--radius-lg) var(--radius-lg) 0 0; margin-top: auto; }
  .modal-overlay { align-items: flex-end; }
  .field-row { flex-direction: column; gap: 16px; }
  .analytics-grid { grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 8px; }
  .board-toolbar { flex-direction: column; align-items: stretch; }
  .search-box { max-width: none; }
  .toolbar-spacer { display: none; }
  #project-name-heading { font-size: 19px; }
}

@media (max-width: 420px) {
  .header-actions .btn span.btn-label { display: none; }
  .header-actions .btn { padding: 0 12px; }
}