/* ============================================================
   responsive.css — breakpoints and mobile adaptations.
   Loaded last so it can override base layout rules.
   ============================================================ */

/* Tablet and below: turn the sidebar into a horizontal scroll strip. */
@media (max-width: 820px) {
  .app-body { flex-direction: column; }
  .sidebar {
    flex: none; display: flex; gap: 8px; overflow-x: auto;
    border-inline-end: none; border-bottom: 1px solid var(--c-border);
    padding: 10px 12px;
  }
  .sidebar__label { display: none; }
  .sidebar__item { flex: 0 0 auto; margin-bottom: 0; white-space: nowrap; }
  .app-outlet { padding: 16px; }
}

/* Phones. */
@media (max-width: 520px) {
  .navbar__title { font-size: 16px; }
  .navbar__link { font-size: 13px; padding: 6px 10px; }
  .dashboard__title { font-size: 23px; }
  .feature-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
  .feature-card { padding: 18px 14px; }
  .feature-card__icon { width: 66px; height: 66px; font-size: 38px; }
}

/* Respect users who prefer reduced motion. */
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}