/* Responsive adaptations — desktop-first overrides down to 360px */

@media (min-width: 1600px) {
  .content { padding-left: var(--sp-10); padding-right: calc(var(--sp-10) + var(--safe-right)); }
}

@media (max-width: 1365px) {
  .kpi-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .att-overview { grid-template-columns: minmax(0, 1fr) 230px; }
  .facts { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 1199px) {
  .dash-span-4 { grid-column: span 6; }
  .dash-span-8 { grid-column: 1 / -1; }
  .split, .split--wide { grid-template-columns: minmax(0, 1fr); }
  .class-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .announce-list--cols { grid-template-columns: minmax(0, 1fr); }
  .announce-list--cols .announce { padding-left: var(--sp-3); }
  .topbar__year { display: none; }
  .topbar__search { width: 240px; }
  .welcome { grid-template-columns: minmax(0, 1fr) 240px; }
  .fee-hero { grid-template-columns: minmax(0, 1fr) 300px; }
  .act-form { grid-template-columns: minmax(0, 1fr); }
  .kpi-grid--5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}

/* ---------- Tablet: rail sidebar, overlay when opened ---------- */
@media (max-width: 1023px) {
  .app, body[data-sidebar='collapsed'] .app { grid-template-columns: var(--sidebar-rail) minmax(0, 1fr); }
  .topbar .topbar__menu-btn { display: inline-grid; }
  .topbar { padding-left: var(--sp-5); padding-right: calc(var(--sp-5) + var(--safe-right)); gap: var(--sp-3); }
  .content { padding: var(--sp-5) calc(var(--sp-5) + var(--safe-right)) var(--sp-10) var(--sp-5); }
  .topbar__search { display: none; }
  .topbar .topbar__search-btn { display: inline-grid; }

  body:not(.nav-open) .sidebar { padding-left: var(--sp-3); padding-right: var(--sp-3); }
  body:not(.nav-open) .brand__word,
  body:not(.nav-open) .sidebar__school > :not(.school-badge),
  body:not(.nav-open) .nav-item__label,
  body:not(.nav-open) .user-chip > :not(.avatar),
  body:not(.nav-open) .sidebar__collapse { display: none; }
  body:not(.nav-open) .sidebar__brand { justify-content: center; padding-left: 0; padding-right: 0; }
  body:not(.nav-open) .sidebar__school { justify-content: center; padding: 8px 0; border-color: transparent; background: none; }
  body:not(.nav-open) .nav-item { justify-content: center; padding: 0; }
  body:not(.nav-open) .nav-label { height: 1px; padding: 0; margin: 10px 8px; background: var(--border); font-size: 0; }
  body:not(.nav-open) .sidebar .nav-badge { position: absolute; top: 3px; right: 6px; min-width: 16px; height: 16px; font-size: 10px; padding: 0 4px; }
  body:not(.nav-open) .user-chip { justify-content: center; }

  body.nav-open .sidebar {
    position: fixed; left: 0; top: 0; width: var(--sidebar-w); z-index: 45;
    box-shadow: var(--shadow-lg); animation: slide-in var(--dur-slow) var(--ease) both;
  }
  body.nav-open .app { padding-left: 0; }
  @keyframes slide-in { from { transform: translateX(-24px); opacity: 0.6; } to { transform: none; opacity: 1; } }

  .grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .welcome { padding: var(--sp-6); }
  .activity-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .activity-feature { grid-template-columns: 1fr; }
  .activity-feature__img { aspect-ratio: 16 / 9; }
  .activity-feature__body { padding: var(--sp-6); }
  .leave-list { grid-template-columns: minmax(0, 1fr); }
  .settings-grid { grid-template-columns: minmax(0, 1fr); }
  .att-overview { grid-template-columns: minmax(0, 1fr); }
  .kpi-grid--5 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .stat-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---------- Mobile ---------- */
@media (max-width: 767px) {
  html { scroll-padding-top: 76px; }
  .app, body[data-sidebar='collapsed'] .app { grid-template-columns: minmax(0, 1fr); }
  .sidebar {
    position: fixed; left: 0; top: 0; bottom: 0; width: min(300px, 86vw); height: 100dvh; z-index: 45;
    transform: translateX(-105%); transition: transform var(--dur-slow) var(--ease), visibility var(--dur-slow);
    visibility: hidden; box-shadow: var(--shadow-lg);
    padding-top: calc(var(--sp-4) + var(--safe-top)); padding-bottom: calc(var(--sp-3) + var(--safe-bottom));
  }
  body.nav-open .sidebar { transform: none; visibility: visible; animation: none; width: min(300px, 86vw); }
  .bottom-nav { display: block; }
  .topbar .topbar__menu-btn { display: none; }
  .topbar__mobile-brand { display: inline-flex; }
  .topbar { height: calc(60px + var(--safe-top)); padding-left: calc(var(--sp-4) + var(--safe-left)); padding-right: calc(var(--sp-3) + var(--safe-right)); gap: var(--sp-2); }
  .topbar__crumbs { display: none; }
  .topbar__heading { font-size: var(--fs-md); }
  .topbar__profile { display: none; }
  .topbar__actions { gap: 2px; }
  .child-switch__meta { display: none; }
  .child-switch { height: 36px; }
  .content { padding: var(--sp-4) calc(var(--sp-4) + var(--safe-right)) calc(var(--bottomnav-h) + var(--safe-bottom) + var(--sp-8)) calc(var(--sp-4) + var(--safe-left)); }
  .app-banner { padding: 10px var(--sp-4); flex-wrap: wrap; }

  .page-head { margin-bottom: var(--sp-4); align-items: stretch; }
  .page-head__title { font-size: 22px; }
  .page-head__actions { width: 100%; }
  .page-head__actions .btn { flex: 1; }

  .grid-2, .grid-3, .grid-4 { grid-template-columns: minmax(0, 1fr); }
  .form-grid { grid-template-columns: minmax(0, 1fr); }
  .kpi-grid, .kpi-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-3); }
  .kpi-grid--5 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kpi-grid--5 > :first-child { grid-column: 1 / -1; }
  .kpi { padding: var(--sp-4); }
  .kpi-grid .kpi__value { font-size: 22px; }

  .dash-grid { gap: var(--sp-4); }
  .dash-span-4, .dash-span-6, .dash-span-8 { grid-column: 1 / -1; }
  .card__head { padding: var(--sp-3) var(--sp-4); min-height: 54px; }
  .card__body { padding: var(--sp-4); }
  .list-row { padding: 12px var(--sp-4); }
  .card--pad { padding: var(--sp-4); }

  .welcome { grid-template-columns: minmax(0, 1fr); padding: var(--sp-5); gap: var(--sp-4); border-radius: var(--r-lg); }
  .welcome__pattern { width: 100%; opacity: 0.5; }
  .welcome__title { font-size: 24px; }
  .welcome__actions { display: grid; grid-template-columns: 1fr 1fr; }
  .welcome__actions .btn { min-width: 0; height: auto; min-height: 44px; padding: 8px 10px; font-size: var(--fs-sm); white-space: normal; line-height: 1.25; justify-content: flex-start; text-align: left; }
  .welcome__aside { padding: var(--sp-4); }
  .welcome__big { font-size: 32px; }

  .child-hero { padding: var(--sp-5); border-radius: var(--r-lg); }
  .child-hero__name { font-size: 22px; }
  .child-hero__switch { display: none; }
  .child-hero__stats { gap: 8px; margin-top: var(--sp-4); }
  .child-stat { padding: 10px; }
  .child-stat__value { font-size: 18px; }
  .child-stat__label { font-size: 11px; }
  .today-strip { flex-direction: column; }
  .today-strip__item + .today-strip__item { border-left: 0; border-top: 1px solid var(--border); }
  .quick-grid { gap: 8px; }
  .quick { padding: 12px 4px; font-size: 12px; }

  .activity-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-3); }
  .class-cards { grid-template-columns: minmax(0, 1fr); }

  .toolbar { padding: var(--sp-3) var(--sp-4); }
  .toolbar .input-icon { flex: 1 1 100%; max-width: none; }
  .toolbar .select { flex: 1 1 140px; min-width: 0; }
  .toolbar > label.row { flex: 1 1 100%; justify-content: space-between; }
  .toolbar > label.row .input { flex: 1; max-width: 200px; }
  .tabs { padding: 0 !important; }
  .tab { padding: 12px 12px; }

  /* Dialogs become bottom sheets */
  .dlg, .dlg--lg, .dlg--xl, .dlg--sm {
    width: 100%; max-width: 100%; margin: auto 0 0; max-height: 92dvh;
    border-radius: var(--r-xl) var(--r-xl) 0 0;
  }
  .dlg[open] { animation: sheet-in var(--dur-slow) var(--ease) both; }
  .dlg.is-closing { animation: sheet-out var(--dur) var(--ease) both; }
  @keyframes sheet-in { from { transform: translateY(40px); opacity: 0.4; } to { transform: none; opacity: 1; } }
  @keyframes sheet-out { to { transform: translateY(40px); opacity: 0; } }
  .dlg__head { padding: var(--sp-4) var(--sp-5) var(--sp-3); position: relative; }
  .dlg__head::before { content: ''; position: absolute; top: 6px; left: 50%; transform: translateX(-50%); width: 36px; height: 4px; border-radius: 4px; background: var(--border-strong); }
  .dlg__body { padding: var(--sp-4) var(--sp-5); }
  .dlg__foot { padding: var(--sp-3) var(--sp-5) calc(var(--sp-3) + var(--safe-bottom)); }
  .dlg__foot .note { flex-basis: 100%; }
  .dlg__foot .btn { flex: 1; }
  .dlg__foot .btn--ghost { flex: 0 0 auto; }
  .dlg--drawer { height: 100dvh; max-height: 100dvh; border-radius: 0; margin: 0; }
  .lightbox, .dlg.lightbox { max-height: 100dvh; height: 100dvh; border-radius: 0; margin: 0; }
  .lightbox .dlg__body { padding: 56px 8px 56px; }
  .lightbox__nav { top: auto; bottom: 16px; transform: none; }
  .dl { grid-template-columns: 110px minmax(0, 1fr); }

  .toast-region { left: 12px; right: 12px; bottom: calc(var(--bottomnav-h) + var(--safe-bottom) + 12px); align-items: stretch; }
  .toast { min-width: 0; max-width: none; }
  .update-pill { bottom: calc(var(--bottomnav-h) + var(--safe-bottom) + 12px); }
  .notif-pop { position: fixed; left: 8px; right: 8px; top: calc(64px + var(--safe-top)); width: auto; }
  .child-pop { position: fixed; left: 8px; right: 8px; top: calc(64px + var(--safe-top)); }

  /* Login */
  .auth { grid-template-columns: minmax(0, 1fr); }
  .auth__brand { display: none; }
  .auth__panel { padding: calc(var(--sp-8) + var(--safe-top)) var(--sp-4) calc(var(--sp-8) + var(--safe-bottom)); align-items: start; }
  .auth__logo-mobile { display: block; }
  .auth__title { font-size: 24px; }
  .role-card { padding: 12px 10px; }
  .role-card__desc { display: none; }
  .public-header { padding: calc(10px + var(--safe-top)) var(--sp-4) 10px; }
  .public-header__school { display: none; }
  .public-main { padding: var(--sp-5) var(--sp-3) var(--sp-10); }
  .apply__card { padding: var(--sp-4); }
  .apply__nav .text-xs { display: none; }
  .stepper .step__label { font-size: 0; gap: 0; }
  .stepper .step__num { font-size: 11px; }
  .stepper .step.is-current .step__label { font-size: 11px; gap: 6px; }

  /* Calendar → compact grid + agenda below */
  .cal-toolbar { padding: var(--sp-3) var(--sp-4); gap: var(--sp-2); }
  .cal-toolbar .ml-auto { margin-left: 0; width: 100%; }
  .cal-toolbar .segmented { width: 100%; }
  .cal-toolbar .segmented button { flex: 1; justify-content: center; }
  .cal-title { font-size: var(--fs-lg); min-width: 0; flex: 1; }
  .cal-filters { padding: 0 var(--sp-4) var(--sp-3); }
  .cal-grid__head span { padding: 8px 0; text-align: center; font-size: 11px; }
  .cal-day { min-height: 54px; padding: 4px; align-items: center; }
  .cal-day__btn { justify-content: center; padding: 4px; }
  .cal-day__events { display: none; }
  .cal-day__dots { display: flex; gap: 3px; position: absolute; bottom: 7px; left: 50%; transform: translateX(-50%); }
  .cal-day.is-selected .cal-day__num { box-shadow: 0 0 0 2px var(--primary); }
  .agenda { padding: var(--sp-3) var(--sp-4); }

  /* Attendance */
  .att-controls { padding: var(--sp-4); }
  .att-controls .field { min-width: 0; flex: 1 1 100%; }
  .att-controls__status { margin-left: 0; padding-bottom: 0; }
  .att-summary__item { padding: 10px 8px; font-size: 11px; }
  .att-summary__num { font-size: 18px; }
  .roster-row { flex-wrap: wrap; padding: 12px var(--sp-4); }
  .mark-group { width: 100%; }
  .mark { flex: 1; justify-content: center; padding: 0 4px; height: 40px; }
  .mark__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .mark__short { width: 26px; height: 22px; }
  .save-bar { bottom: calc(var(--bottomnav-h) + var(--safe-bottom) + 10px); padding: 10px 10px 10px 14px; }
  .save-bar__text { font-size: var(--fs-xs); }
  .att-cal { padding: 0 var(--sp-3) var(--sp-3); }
  .att-cal__head, .att-cal__row { gap: 4px; }
  .att-cal__day { min-height: 40px; border-radius: 8px; }
  .att-cal__tag { font-size: 8.5px; padding: 0 3px; }

  /* Misc screens */
  .profile-head__main { padding: var(--sp-5); gap: var(--sp-4); }
  .profile-head__main > .row { width: 100%; }
  .profile-head__main > .row .btn, .profile-head__main > .btn { flex: 1; }
  .class-summary { gap: var(--sp-4); }
  .class-summary .btn { width: 100%; margin-left: 0; }
  .fee-hero { grid-template-columns: minmax(0, 1fr); padding: var(--sp-5); }
  .fee-hero__amount { font-size: 32px; }
  .hw-item { padding: var(--sp-4); gap: var(--sp-3); flex-wrap: wrap; }
  .hw-item__actions { width: 100%; justify-content: flex-end; }
  .hw-cards, .fee-cards, .activity-grid, .roster-grid { grid-template-columns: minmax(0, 1fr); }
  .activity-hero { min-height: 260px; border-radius: var(--r-lg); }
  .activity-hero__content { padding: var(--sp-5); }
  .activity-feature__title { font-size: 22px; }
  .gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-2); }
  .school-hero { min-height: 240px; border-radius: var(--r-lg); }
  .school-hero__content { padding: var(--sp-5); gap: var(--sp-3); }
  .school-hero__content .btn { width: 100%; }
  .school-hero__logo { width: 56px; height: 56px; font-size: 18px; }
  .facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .facts .fact:last-child { grid-column: 1 / -1; }
  .repeat__row { flex-wrap: wrap; padding: 10px; border: 1px solid var(--border); border-radius: var(--r-md); }
  .repeat__row .input:first-of-type, .repeat__icon { max-width: none; width: 100%; flex: 1 1 100%; }
  .notif-list .notif { padding-right: 48px; }
  .stat-pill__num { font-size: 22px; }
  .legend { grid-template-columns: 1fr 1fr; }
  .chart__bars { gap: 4px; }
  .chart__label small { display: none; }
  .kbd { display: none; }
  .table--stack td.is-right .row { justify-content: flex-end; }
  .cat-progress { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-2); }
  .cat-progress__item { padding: var(--sp-3); }
  .cat-progress__pct { font-size: 24px; }
}

@media (max-width: 389px) {
  .content { padding-left: calc(12px + var(--safe-left)); padding-right: calc(12px + var(--safe-right)); }
  .welcome__actions { grid-template-columns: 1fr; }
  .child-stat__meta { display: none; }
  .quick { font-size: 11px; }
  .role-card__label { font-size: 12px; }
  .kpi-grid .kpi__value { font-size: 20px; }
  .bottom-nav__item { font-size: 10px; }
  .bottom-nav__item .icon-wrap { width: 46px; }
}

@media (hover: none) {
  .card--hover:hover { transform: none; box-shadow: var(--shadow-xs); }
}

@media print {
  .sidebar, .topbar, .bottom-nav, .toast-region, .save-bar, .net-status { display: none !important; }
  .app { display: block; }
  .content { padding: 0; }
}
@media (max-width: 767px) {
  .toast-region[popover] { inset: auto 12px calc(var(--bottomnav-h) + var(--safe-bottom) + 12px) 12px; }
}
@media (max-width: 479px) {
  .chart__col:nth-child(-n + 3) { display: none; }
}
@media (max-width: 767px) {
  .table--stack td:not(.td-primary) { display: grid; grid-template-columns: minmax(90px, auto) minmax(0, 1fr); column-gap: var(--sp-3); align-items: start; }
  .table--stack td:not(.td-primary)::before { grid-row: 1 / span 4; }
  .table--stack td:not(.td-primary) > * { grid-column: 2; justify-self: end; text-align: right; }
}

/* QA pass: give the page title room next to the child switcher on small phones */
@media (max-width: 420px) {
  .child-switch__text { display: none; }
  .child-switch { padding-right: 8px; gap: 4px; }
}