/* ============================================================
   Responsive behaviour.

   Breakpoints
     > 1024   desktop  — persistent sidebar, full grids
     <= 1024  tablet   — sidebar becomes an overlay drawer
     <= 900   dense    — grids collapse to one or two columns
     <= 720   mobile   — bottom tab bar, no sidebar, sheet filters
   ============================================================ */

/* ---------- Wide desktop trims ---------- */
@media (max-width: 1280px) {
  .view { padding-inline: var(--s-5); }
}

@media (max-width: 1120px) {
  .grid--split { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); }
}

/* ---------- Tablet: overlay sidebar ---------- */
@media (max-width: 1024px) {
  .shell { grid-template-columns: minmax(0, 1fr); }

  .sidebar {
    position: fixed;
    inset-block: 0;
    inset-inline-start: 0;
    width: min(288px, 84vw);
    z-index: var(--z-drawer);
    transform: translateX(-102%);
    transition: transform var(--dur) var(--ease);
    box-shadow: var(--shadow-dialog);
  }
  .shell[data-drawer="open"] .sidebar { transform: none; }
  .shell[data-drawer="open"] .shell__scrim {
    display: block;
    position: fixed;
    inset: 0;
    z-index: calc(var(--z-drawer) - 1);
    background: var(--scrim);
  }
  .sidebar__close { display: inline-grid; }
  .topbar__menu { display: inline-grid; }

  .grid--kpi   { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid--split { grid-template-columns: minmax(0, 1fr); }

  .settings-grid { grid-template-columns: minmax(0, 1fr); }
  .settings-nav {
    position: static;
    grid-auto-flow: column;
    grid-auto-columns: max-content;
    overflow-x: auto;
    gap: var(--s-1);
    padding-bottom: var(--s-2);
  }
  .settings-nav__item { white-space: nowrap; }
}

/* ---------- Dense ---------- */
@media (max-width: 900px) {
  .grid--halves { grid-template-columns: minmax(0, 1fr); }
  .topbar__search { max-width: none; }
  .tx-daygroup { top: 0; }
}

/* ---------- Mobile ---------- */
@media (max-width: 720px) {
  :root { --topbar-h: 56px; }

  .view {
    padding: var(--s-5) var(--s-4) calc(var(--tabbar-h) + var(--s-8));
  }

  /* The drawer is redundant once the tab bar exists. */
  .sidebar,
  .shell__scrim,
  .topbar__menu { display: none !important; }

  .topbar {
    padding-inline: var(--s-4);
    gap: var(--s-2);
  }
  .topbar__title { display: block; flex: 1; font-size: var(--fs-h2); }
  .topbar__search { display: none; }
  .topbar__add { width: 36px; padding: 0; }
  .topbar__add span { display: none; }

  /* Bottom tab bar */
  .tabbar {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
    position: fixed;
    inset-inline: 0;
    bottom: 0;
    z-index: var(--z-sticky);
    height: var(--tabbar-h);
    padding-bottom: env(safe-area-inset-bottom, 0);
    background: var(--surface);
    border-top: 1px solid var(--border);
  }
  .tab {
    display: grid;
    justify-items: center;
    align-content: center;
    gap: 3px;
    padding: var(--s-1);
    color: var(--text-3);
    text-decoration: none;
    font-family: var(--font-mono);
    font-size: 9px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    min-height: 44px;
  }
  .tab[aria-current="page"] { color: var(--brand); }

  .page-head { margin-bottom: var(--s-5); }
  .page-head__title { font-size: 1.5rem; }
  .page-head__actions { width: 100%; }

  .grid--kpi   { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-3); }
  .grid--cards { grid-template-columns: minmax(0, 1fr); }
  .grid { gap: var(--s-3); }

  .stat { padding: var(--s-3) var(--s-4); }
  .stat__value { font-size: 1.25rem; }

  .card__head, .card__body { padding: var(--s-4); }
  .row, .rec-row, .upnext__item, .upcoming__item, .setting-row { padding-inline: var(--s-4); }
  .tx-daygroup { padding-inline: var(--s-4); }

  /* Touch targets */
  .btn { height: 40px; }
  .btn--sm { height: 34px; }
  .btn-icon { width: 40px; height: 40px; }
  .input, .select, .textarea { min-height: 44px; font-size: 1rem; }

  /* Filters live in a sheet, not the toolbar. Every control moves into the
     sheet — including the date inputs, whose intrinsic width alone is wider
     than half a 360px screen. */
  .tx-toolbar { padding: var(--s-3) var(--s-4); }
  .tx-toolbar__row > .select,
  .tx-toolbar__row > .input { display: none; }
  .tx-filters-btn { display: inline-flex; flex: 1; }
  .tx-toolbar__row { display: flex; gap: var(--s-2); }

  .rec-row { flex-wrap: wrap; }
  .rec-row__main { flex: 1 1 100%; }
  .rec-row__end { flex: 1 1 100%; justify-content: space-between; }

  .goal-card__stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .goal-card { padding: var(--s-4); }
  .import-stats { grid-template-columns: minmax(0, 1fr); }
  .field-row { grid-template-columns: minmax(0, 1fr); }

  .onboarding__panel { padding: var(--s-5); gap: var(--s-5); }
  .onboarding__title { font-size: 1.625rem; }

  .toaster {
    left: var(--s-4);
    right: var(--s-4);
    bottom: calc(var(--tabbar-h) + var(--s-4));
    width: auto;
  }

  /* Dialogs become bottom sheets */
  .dialog-backdrop { padding: 0; align-items: end; }
  .dialog {
    max-width: none;
    max-height: 92vh;
    border-radius: var(--r-lg) var(--r-lg) 0 0;
    border-inline: 0;
    border-bottom: 0;
    animation: sheet-in var(--dur) var(--ease);
  }
  @keyframes sheet-in {
    from { transform: translateY(14px); opacity: 0; }
    to   { transform: none; opacity: 1; }
  }
  .dialog__foot { padding-bottom: calc(var(--s-4) + env(safe-area-inset-bottom, 0)); }
  .dialog__foot .btn { flex: 1; }
}

/* ---------- Very narrow (360px and below) ---------- */
@media (max-width: 380px) {
  .page-head__actions { flex-direction: column; align-items: stretch; }

  .view { padding-inline: var(--s-3); }
  .card__head, .card__body { padding: var(--s-3); }
  .row, .rec-row, .upnext__item, .upcoming__item, .setting-row,
  .tx-daygroup { padding-inline: var(--s-3); }
  .grid--kpi { grid-template-columns: minmax(0, 1fr); }
  .stat__value { font-size: 1.1875rem; }
  .goal-card__stats { grid-template-columns: minmax(0, 1fr); }
  .breakdown__item { grid-template-columns: auto minmax(0, 1fr); }
  .breakdown__figures { grid-column: 1 / -1; justify-content: flex-end; }
}

/* ---------- Print ---------- */
@media print {
  .sidebar, .topbar, .tabbar, .toaster, .page-head__actions { display: none !important; }
  .view { padding: 0; }
  .card { break-inside: avoid; }
}