/* Responsive / mobile layer — loaded LAST so it wins on equal specificity.
   Phone layout: <=560px (tuned for iPhone 17 Pro Max ~440px). Stacking: <=900px. */

/* day-card week is hidden until phone (desktop uses the .cal--week time grid) */
.week-cards { display: none; }

/* ---------- tablet / small-laptop stacking ---------- */
@media (max-width: 900px) {
  .app { margin: 16px auto; min-height: auto; }
  .dash-grid { grid-template-columns: 1fr; }
  .book-body { grid-template-columns: 1fr; }
}

/* ---------- phone ---------- */
@media (max-width: 560px) {
  /* shell: full-bleed, no card chrome, content scrolls the page */
  .app { width: 100%; margin: 0; border-radius: 0; box-shadow: none;
    min-height: 100dvh; overflow: visible; }
  .main { min-width: 0; padding-bottom: calc(66px + env(safe-area-inset-bottom)); }
  .screen { padding: var(--space-5) var(--space-4); }

  /* rail -> fixed bottom tab bar */
  .rail { position: fixed; inset: auto 0 0 0; width: 100%; height: auto;
    flex-direction: row; justify-content: space-around; align-items: center; gap: 0;
    padding: 7px 4px calc(7px + env(safe-area-inset-bottom));
    border-right: none; border-top: 1px solid #E6EFEC; z-index: 100; }
  .rail__brand, .rail__spacer { display: none; }
  .rail__item { width: 46px; height: 46px; }
  .rail__avatar { width: 40px; height: 40px; margin: 0; }

  /* keep the drag/delete feedback toast clear of the bottom tab bar */
  .cal-toast { bottom: calc(66px + env(safe-area-inset-bottom) + 12px);
    max-width: calc(100vw - 32px); text-align: center; }

  /* headers wrap */
  .screen-head, .week-head { flex-wrap: wrap; gap: var(--space-3); }
  .week-head .week-actions { width: 100%; }
  .dash-greet { font-size: var(--text-4xl); }

  /* dashboard hero stacks */
  .hero.dash-hero { flex-direction: column; align-items: flex-start; gap: var(--space-4); }
  .dash-hero__actions { width: 100%; flex-wrap: wrap; }

  /* ---- Schedule: hide desktop week grid, show day-cards ---- */
  .cal--week, .weekgrid__head, .cal-hint { display: none; }
  /* day-cards become mini time-grids that fill the screen (no scroll). Height +
     grid-rows are set by fitcards.js; lessons are positioned by time (top/height
     %, computed in the template) so gaps read as free slots, like the desktop. */
  .week-head { margin-bottom: var(--space-4); }
  .week-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  .week-cards .day-card { padding: 6px 7px; }
  .week-cards .day-card__head { gap: 3px; margin-bottom: 5px; }
  .week-cards .day-card__day { font-size: var(--text-md); }
  .week-cards .day-card__date { font-size: var(--text-xs); }
  .week-cards .day-card__body { position: relative; flex: 1; min-height: 0; }
  .week-cards .dc-lesson { position: absolute; left: 1px; right: 1px; margin: 0;
    display: flex; align-items: center; gap: 5px; padding: 1px 4px; min-height: 8px;
    border-radius: 4px; overflow: hidden; }
  /* start–end on one line, name to the right. One fixed small font;
     end time is faded. */
  .week-cards .dc-lesson__time { flex: none; display: flex; flex-direction: row;
    align-items: center; line-height: 1; gap: 1px; }
  .week-cards .dc-lesson__s { font-size: 7px; font-weight: var(--weight-bold); color: var(--ink); }
  .week-cards .dc-lesson__s::after { content: '–'; font-weight: var(--weight-medium);
    color: var(--grey-400); padding: 0 1px; }
  .week-cards .dc-lesson__e { font-size: 7px; font-weight: var(--weight-medium); color: var(--grey-400); }
  .week-cards .dc-lesson__n { align-self: center; font-size: 8px; color: var(--ink);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

  /* ---- day time-grid: tighten so it fits ~440px ---- */
  .cal__gutter { width: 40px; }
  .cal__hour { right: 7px; }
  .cal-ev { padding: 3px 7px; gap: 6px; }
  .cal-ev__actions { gap: 3px; }
  .cal-ev__actions a, .cal-ev__actions button, .confirm-btn { width: 22px; height: 22px; }
  .cal-ev__name { font-size: var(--text-xs); }

  /* ---- lists: condense columns + stack the header search ---- */
  .colhead-search { flex-direction: column; align-items: stretch; gap: 8px; }
  .col-search { flex: none; width: 100%; }
  .list__head, .list__row { padding: 12px 16px; }
  .cols-students { grid-template-columns: 1.5fr auto; }
  .cols-students > :nth-child(2), .cols-students > :nth-child(3) { display: none; }
  .cols-payments { grid-template-columns: 1.3fr auto 38px; }
  .cols-payments > :nth-child(2), .cols-payments > :nth-child(4) { display: none; }
  .cols-groups { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
  .cols-groups > .list__name { flex: 1 1 auto; min-width: 0; }
  .cols-groups > .list__actions, .cols-groups > form { flex: none; margin-left: auto; }
  .cols-groups > .list__meta { flex: 1 1 100%; order: 9; font-size: var(--text-sm); }
  .list__head.cols-groups > span:last-child { display: none; }
  .pager { justify-content: center; }

  /* ---- forms / cards go full width ---- */
  .form-card, .book-card { max-width: none; }
  .form-grid-2 { grid-template-columns: 1fr; }
  .detail-grid { grid-template-columns: 1fr; }

  /* booking slots stay 2-up; controls already wrap */
  .slot-grid { max-height: 260px; }

  /* modals + dropdowns fit the viewport */
  .dialog, .modal { width: min(92vw, 420px); max-width: 92vw; }
  .ta__menu { max-width: 100%; }
}