/* Opakované komponenty: hlavičky strán, lišty, dialógy, tlačidlá, značky, kroky. */
.head-row { display: flex; align-items: baseline; gap: 12px; margin-top: 16px; }
.head-row h2 { margin: 0; }
.page-head, .settings-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 8px; }
form.bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin: 0 0 8px;
}
form.bar label {
  display: flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
}
form.bar select, form.bar input {
  font: inherit;
  min-height: 34px;
  padding: 4px 8px;
  width: auto;
}
form.bar input { width: 7.5em; }
.settings-row { padding: 8px 0; border-bottom: 1px solid var(--line); }
.settings-row p { margin: 0; }
.page-head h1, .page-head h2 { margin: 0; }
a.cta, button.cta {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 6px 14px;
  background: var(--red);
  color: #fff;
  text-decoration: none;
  border: 1px solid var(--red);
}
dialog.teacher {
  width: min(760px, calc(100vw - 48px));
  max-height: min(860px, calc(100vh - 48px));
  overflow: auto;
  border: 1px solid var(--line);
  background: var(--panel);
  color: var(--text);
  padding: 16px;
}
dialog.teacher.narrow { width: min(440px, calc(100vw - 48px)); }
dialog.teacher::backdrop { background: rgba(0, 0, 0, .45); }
.form-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 12px;
}
.form-foot form { margin: 0; }
.form-foot button {
  min-height: 34px;
  padding: 6px 14px;
}
.form-foot > button.cta:only-child { margin-left: auto; }
dialog.teacher form.entry { max-width: none; border: 0; margin-top: 8px; padding: 0; }
button.quiet, a.quiet {
  background: transparent;
  color: var(--red);
  border: 1px solid var(--line);
  text-decoration: none;
  display: inline-block;
  font: inherit;
  padding: 4px 8px;
  cursor: pointer;
}
p { margin: 0 0 8px; }


.section-line {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 0;
  border-bottom: 1px solid var(--line);
}
.section-line .grow { flex: 1; margin: 0; }
.section-line form { margin: 0; }
form.switch { margin: 12px 0 0; }
.mark {
  width: 1.7em;
  height: 1.7em;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid currentColor;
  font-size: 11px;
  font-weight: 700;
  flex: 0 0 auto;
}
.mark.no { color: var(--red); }
.mark.yes { color: #1b7a32; }
button.gate, a.gate {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 6px 14px;
  border: 0;
  border-radius: 4px;
  background: #d5d5d5;
  color: #666;
  text-decoration: none;
  cursor: not-allowed;
}
button.gate.ready, a.gate.ready { background: #1b7a32; color: #fff; cursor: pointer; }
button.gate:disabled { background: #d5d5d5; color: #666; }
ul.gaps { margin: 8px 0 12px; padding-left: 1.2em; }
label.pick { display: flex; align-items: center; gap: 8px; padding: 2px 0; }
form.switch label { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
table.week td.busy[draggable="true"] { cursor: grab; }
table.week td.drop-over { outline: 2px solid var(--red); outline-offset: -2px; }
ol.steps { margin: 0; padding: 0; list-style: none; }
ol.steps li { padding: 8px 0; border-bottom: 1px solid var(--line); }