/* responsive.css — breakpoints + reduced-motion fallback. */

/* ===== < 1100px: tighten grids ===== */
@media (max-width: 1100px) {
  .overview-split { grid-template-columns: 1fr; }
  .board { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ===== < 992px: sidebar collapses to icon rail ===== */
@media (max-width: 992px) {
  .app-shell {
    grid-template-columns: 84px minmax(0, 1fr);
  }
  .sidebar { padding: var(--space-4) var(--space-2); align-items: center; }
  .sidebar__top { justify-content: center; }
  .brand__name,
  .collapse-btn,
  .nav__label,
  .nav-pill__text,
  .user-chip__meta { display: none; }
  .nav-pill { justify-content: center; padding: var(--space-3); }
  .user-chip { justify-content: center; padding: var(--space-2); }

  .kpi-row { grid-template-columns: repeat(2, 1fr); }
  .glance-grid { grid-template-columns: 1fr; }
}

/* ===== < 768px: tighter ===== */
@media (max-width: 768px) {
  .project-grid,
  .team-grid { grid-template-columns: 1fr; }
  .settings-grid { grid-template-columns: 1fr; }
  .board { grid-template-columns: 1fr; }
}

/* ===== < 640px: bottom nav + hamburger ===== */
@media (max-width: 640px) {
  .app-shell {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "topbar"
      "content";
    padding: var(--space-3);
    padding-bottom: 96px;
    gap: var(--space-4);
  }
  .sidebar {
    position: fixed;
    left: 0; right: 0; bottom: 0;
    top: auto;
    height: auto;
    flex-direction: row;
    align-items: center;
    justify-content: space-around;
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    padding: var(--space-3);
    z-index: 60;
    gap: 0;
  }
  .sidebar__top,
  .nav__label,
  .user-chip { display: none; }
  .nav {
    flex-direction: row;
    justify-content: space-around;
    width: 100%;
    gap: var(--space-1);
  }
  .nav-pill { flex-direction: column; gap: 2px; padding: var(--space-2); }

  .greeting h1 { font-size: var(--fs-xl); }
}

/* ===== <= 375px: single column everywhere ===== */
@media (max-width: 375px) {
  .kpi-row { grid-template-columns: 1fr; }
  .chart__bars { gap: var(--space-1); }
  .glance-card { flex-direction: column; align-items: flex-start; }
  .modal { padding: var(--space-5); }
}

/* ===== Reduced motion: disable all transitions/animations, keep end state ===== */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  .modal { animation: none; }
  .nav-pill:hover,
  .btn:hover,
  .project-card:hover,
  .task-card:hover,
  .icon-btn:hover,
  .collapse-btn:hover,
  .avatar-btn:hover,
  .swatch label:hover { transform: none; }
}