/* ==========================================================================
   responsive.css — ultrawide → mobile (loads last)
   Breakpoints: 1600 ultrawide · 1180 laptop · 1024 tablet · 900 drawer · 620 phone
   ========================================================================== */

/* --- Ultra-wide: cap the content, keep the grid dense ---------------------- */
@media (min-width: 1600px) {
  :root { --content-max: 1520px; --gap: var(--space-8); }
  .grid--cards { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .grid--tools { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* --- Laptop --------------------------------------------------------------- */
@media (max-width: 1180px) {
  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* --- Tablet --------------------------------------------------------------- */
@media (max-width: 1024px) {
  :root { --gap: var(--space-5); }

  .tool { grid-template-columns: minmax(0, 1fr); }
  .tool__output { position: static; }
  .grid--cards { grid-template-columns: repeat(auto-fill, minmax(min(224px, 100%), 1fr)); }
}

/* --- Mobile drawer -------------------------------------------------------- */
@media (max-width: 900px) {
  .sidebar {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 70;
    width: min(292px, 86vw);
    transform: translateX(-100%);
    box-shadow: var(--shadow-lg);
  }

  /* Below this width the hamburger opens the drawer, so the desktop rail state
     must not leak in. */
  .app.is-collapsed .sidebar { width: min(292px, 86vw); }
  .app.is-collapsed .brand__text,
  .app.is-collapsed .nav__text,
  .app.is-collapsed .nav__count,
  .app.is-collapsed .nav__label,
  .app.is-collapsed .accordion__chevron { display: revert; }
  .app.is-collapsed .sidebar__brand { justify-content: flex-start; padding: 0 var(--space-4); }
  .app.is-collapsed .brand { justify-content: flex-start; }
  .app.is-collapsed .nav__link,
  .app.is-collapsed .accordion__trigger { justify-content: flex-start; padding: 9px var(--space-3); }
  .app.is-collapsed .accordion__panel { display: grid; }
  .app.is-collapsed .nav__link::after,
  .app.is-collapsed .accordion__trigger::after { content: none; }

  .app.is-drawer-open .sidebar { transform: translateX(0); }

  .sidebar__close {
    display: grid;
    place-items: center;
    flex: none;
    width: 32px;
    height: 32px;
    border-radius: var(--radius-sm);
    color: var(--text-subtle);
    transition: background-color var(--t), color var(--t);
  }
  .sidebar__close:hover { background: rgba(255, 255, 255, 0.06); color: var(--text); }

  .main__inner { padding-top: var(--space-6); gap: var(--space-8); }
  .page-head { flex-wrap: wrap; }
  .page-head__aside { margin-left: 0; }
}

/* --- Phone ---------------------------------------------------------------- */
@media (max-width: 620px) {
  :root { --gap: var(--space-4); --header-h: 62px; }

  .header { gap: var(--space-2); }

  /* Search shrinks to an icon and expands on focus. */
  .search { width: 38px; transition: width var(--t-slow); }
  .search__input { padding: 0 10px 0 36px; cursor: pointer; }
  .search__input::placeholder { color: transparent; }
  .search__kbd { display: none; }
  .search.is-expanded { width: min(220px, 48vw); }
  .search.is-expanded .search__input { cursor: text; }
  .search.is-expanded .search__input::placeholder { color: var(--text-subtle); }
  /* The collapsed search box is 38px wide and sits ~110px in from the right
     edge, so a dropdown anchored to it always hung off the left of the screen.
     Pin it to the viewport gutters instead. .header carries a backdrop-filter,
     which makes it the containing block for fixed descendants — but the header
     spans the full width and is stuck to the top, so the insets resolve to the
     same place with or without that support. */
  .search__results {
    position: fixed;
    top: calc(var(--header-h) + 6px);
    right: var(--space-4);
    left: var(--space-4);
    width: auto;
    max-height: calc(100vh - var(--header-h) - var(--space-8));
    max-height: calc(100dvh - var(--header-h) - var(--space-8));
    transform-origin: top center;
  }

  .breadcrumb { display: none; }

  /* minmax(0, …), not a bare 1fr: a bare `1fr` floors the track at the widest
     item's min-content — the nowrap tagline on .tool-card — which is what used
     to stretch the dashboard ~200px past the viewport. */
  .stats { grid-template-columns: minmax(0, 1fr); }
  .grid--cards,
  .grid--tools,
  .field-pair { grid-template-columns: minmax(0, 1fr); }

  .panel__body { padding: var(--space-4); gap: var(--space-4); }
  .panel__head,
  .panel__foot { padding: var(--space-3) var(--space-4); }
  .panel__foot .btn { flex: 1; }

  .page-head { padding: var(--space-5); gap: var(--space-4); }
  .page-head__icon { width: 48px; height: 48px; }

  /* Tables scroll inside their own container — the page never does. */
  .table th,
  .table td { padding: 11px var(--space-4); }
  .table__hide-sm { display: none; }

  .pagination { justify-content: center; }
  .pagination__info { width: 100%; text-align: center; }

  .toasts { right: var(--space-4); left: var(--space-4); bottom: var(--space-4); width: auto; }
  .modal__actions { flex-direction: column-reverse; }

  .footer { justify-content: center; text-align: center; }
  .footer__links { flex-wrap: wrap; justify-content: center; gap: var(--space-4); }
}

/* --- Very narrow ---------------------------------------------------------- */
@media (max-width: 420px) {
  .header__right .icon-btn[data-notifications] { display: none; }
  .section__head .tabs { width: 100%; overflow-x: auto; }
}