/* Prispôsobenie malému oknu. Načítava sa ako posledné.
   Okno prehliadača riešia @media, šírku obsahu (main) @container — obsah sa zužuje aj
   vtedy, keď je otvorené menu a pomocník, hoci okno je široké. */

main { min-width: 0; container: main / inline-size; }

/* ---- rozloženie stránky ---- */
@media (max-width: 760px) {
  html, body { height: auto; min-height: 100%; }
  .frame { display: block; flex: none; }
  aside { overflow: visible; }
  main { overflow-x: auto; overflow-y: visible; }
  #side { border-right: 0; border-bottom: 1px solid var(--line); }
  body.menu-closed #side { display: none; }
  .frame > .right { max-height: none; overflow: visible; }
  .right .guide-scroll { overflow: visible; }
  .top { gap: 8px; }
  nav.steps { flex: 1 0 100%; flex-wrap: nowrap; overflow-x: auto; padding-bottom: 4px; }
  .paths { gap: 8px; }
  .page-head, .settings-row, .form-foot { flex-wrap: wrap; }
  dialog.teacher, dialog.teacher.narrow, dialog.mail { width: calc(100vw - 24px); max-height: calc(100vh - 24px); }
}

/* ---- formuláre podľa šírky obsahu ---- */
@container main (max-width: 680px) {
  form.entry .pair, form.rules .pair { grid-template-columns: 1fr; }
  form.entry .hours, form.rules .hours { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  form.entry .days, form.rules .days { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  form.entry .programmes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  form.entry .rooms, form.rules .rooms { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  form.profile { grid-template-columns: 1fr; }
  form.add-item { grid-template-columns: 1fr 1fr; }
  form.add-item label.fresh, form.add-item label.sheet { grid-column: 1 / -1; }
}

@container main (max-width: 440px) {
  form.entry .hours, form.rules .hours { grid-template-columns: 1fr; }
  form.entry .days, form.rules .days { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  form.entry .programmes { grid-template-columns: 1fr; }
  form.entry .rooms, form.rules .rooms { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  form.add-item { grid-template-columns: 1fr; }
}

/* Formuláre v dialógoch nie sú vnútri main, preto idú podľa okna. */
@media (max-width: 680px) {
  dialog form.entry .pair, dialog form.rules .pair { grid-template-columns: 1fr; }
  dialog form.entry .hours, dialog form.rules .hours { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  dialog form.entry .days, dialog form.rules .days { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  dialog form.entry .programmes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---- tabuľka harmonogramu: v úzkom obsahu každý riadok ako karta ---- */
@container main (max-width: 760px) {
  table.calendar, table.calendar tbody, table.calendar tr, table.calendar td { display: block; width: 100%; }
  table.calendar colgroup, table.calendar tr:has(> th) { display: none; }
  table.calendar tr { padding: 8px 0; border-bottom: 1px solid var(--line); }
  table.calendar td { border: 0; padding: 2px 0; }
  table.calendar td.when { display: inline-block; width: auto; margin-right: 12px; }
  table.calendar td.when:not(:has(input)) { display: none; }
  table.calendar td.when::before {
    content: attr(data-label);
    display: block;
    color: var(--muted);
    font-size: 12px;
  }
  table.calendar select, table.calendar input.place, table.calendar td.item input[type="text"] { max-width: 100%; width: 100%; }
}