/* Timetable & Substitution (School ERP 3.2.80; laid out like Students in 3.2.82).
   Scoped to [data-gap-module="substitution"] — the combined page's wrapper, so
   the timetable's own panes are styled here too. Dialogs carry .sub-dialog and
   printed papers .sub-print, both outside the root. Only ERP tokens are used,
   so dark mode follows the workspace. Nothing here is wider than its panel:
   registers scroll inside their own .data-table-wrap, bars and forms wrap. */

/* Registers: the filter bar, the search and the count, as every ERP register has them. */
[data-gap-module="substitution"] .register-filter input[type="date"],
[data-gap-module="substitution"] .register-filter input[type="month"] {
  min-height: 36px; max-width: 100%; padding: 6px 9px; border: 1px solid var(--line); border-radius: 9px;
  background: var(--surface); color: var(--ink); font-size: 13px; font-weight: 650;
}
[data-gap-module="substitution"] .register-search .register-count { flex: 0 0 auto; color: var(--muted); font-size: 11px; font-weight: 800; letter-spacing: .04em; white-space: nowrap; }
[data-gap-module="substitution"] .register-subhead { margin: 18px 0 4px; color: var(--ink); font-size: 14px; font-weight: 760; }
[data-gap-module="substitution"] .register-subhead + .form-note { margin: 0 0 8px; }
[data-gap-module="substitution"] .data-table td small { display: block; margin-top: 3px; color: var(--muted); font-size: 11px; line-height: 1.45; overflow-wrap: anywhere; }
[data-gap-module="substitution"] .data-table td strong { color: var(--ink); overflow-wrap: anywhere; }

/* The day's toolbar: the date and its arrows, then the day's own actions. */
[data-gap-module="substitution"] .sub-toolbar { align-items: flex-end; }
[data-gap-module="substitution"] .sub-toolbar .record-actions { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
[data-gap-module="substitution"] .sub-toolbar-end { margin-left: auto; }
[data-gap-module="substitution"] .sub-toolbar-note { flex: 1 1 220px; margin: 0 0 8px; color: var(--muted); font-size: 12px; }
[data-gap-module="substitution"] .sub-dayline { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 12px 0 14px; color: var(--ink); font-size: 14px; }
[data-gap-module="substitution"] .sub-dayline span { color: var(--muted); }
[data-gap-module="substitution"] .sub-warn-text,
.sub-dialog .sub-warn-text { color: var(--warning) !important; font-weight: 650; }

/* Tick boxes in the settings and the Add absent teacher card. */
[data-gap-module="substitution"] .sub-fieldset,
.sub-dialog .sub-fieldset { display: flex; flex-wrap: wrap; gap: 8px 18px; min-width: 0; margin: 0; padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; }
[data-gap-module="substitution"] .sub-fieldset legend,
.sub-dialog .sub-fieldset legend { padding: 0 6px; color: var(--ink); font-size: 12px; font-weight: 750; }
[data-gap-module="substitution"] .sub-fieldset[hidden],
.sub-dialog .sub-fieldset[hidden] { display: none; }
[data-gap-module="substitution"] .sub-ticks { display: flex; flex-wrap: wrap; gap: 8px 18px; }
[data-gap-module="substitution"] .form-sections .section-grid label.sub-check,
[data-gap-module="substitution"] .sub-check,
.sub-dialog .sub-check { display: inline-flex !important; align-items: center; gap: 6px; color: var(--ink); font-size: 12px; font-weight: 600; }
[data-gap-module="substitution"] .sub-check input,
.sub-dialog .sub-check input { width: auto !important; min-height: 0 !important; }
.sub-dialog .sub-check select { max-width: 100%; min-height: 32px; padding: 0 8px; border: 1px solid var(--line); border-radius: 8px; color: var(--ink); background: var(--surface); }

/* The timetable's editors keep their compact rows inside the numbered sections,
   and scroll inside their own box rather than widening the page. */
[data-gap-module="substitution"] .form-sections .section-grid .period-editor,
[data-gap-module="substitution"] .form-sections .section-grid .timetable-editor { max-width: 100%; }
[data-gap-module="substitution"] .form-sections .section-grid .period-editor input:not([type="checkbox"]),
[data-gap-module="substitution"] .form-sections .section-grid .timetable-editor input,
[data-gap-module="substitution"] .form-sections .section-grid .timetable-editor select {
  min-height: 35px; padding: 7px 8px; border-radius: 8px;
}
[data-gap-module="substitution"] .form-sections .section-grid .period-editor input[type="checkbox"] { justify-self: start; }
/* Print timetable: the class or the teacher picker, whichever the mode asks for. */
[data-gap-module="substitution"] .tt-print-part:not([hidden]) { display: contents; }
[data-gap-module="substitution"] [data-tt-print-when][hidden] { display: none !important; }

/* Dialogs: the ranked suggestions and the auto-assign result. */
.sub-dialog .sub-table td small { display: block; margin-top: 3px; color: var(--muted); font-size: 11px; line-height: 1.45; }
.sub-dialog .sub-table td strong { color: var(--ink); }
.sub-dialog .record-status { white-space: nowrap; }
.sub-dialog .sub-reasons { margin: 0; padding-left: 16px; color: var(--muted); font-size: 11.5px; line-height: 1.5; }
.sub-dialog .sub-reasons strong { color: var(--ink); }
.sub-dialog .sub-details { margin-top: 12px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--canvas); }
.sub-dialog .sub-details summary { cursor: pointer; color: var(--ink); font-size: 12px; font-weight: 750; }
.sub-dialog .sub-details[open] summary { margin-bottom: 8px; }
.sub-dialog .form-grid { margin-top: 12px; }
.sub-dialog .form-actions { margin-top: 14px; }
.sub-dialog .sub-register h3 { color: var(--ink); }

/* The papers: the staff-room sheet, the register and the workload report —
   portrait A4, fixed-layout tables that wrap rather than run off the page. */
.sub-print h3 { margin: 5mm 0 2mm; color: var(--brand-ink); font-size: 11pt; }
.sub-print-table { width: 100%; min-width: 0; table-layout: fixed; border-collapse: collapse; font-size: 8.5pt; }
.sub-print-table th, .sub-print-table td { padding: 1.6mm 2mm; border: 1px solid var(--line); color: var(--ink); text-align: left; vertical-align: top; overflow-wrap: anywhere; word-break: normal; }
.sub-print-table th { background: var(--brand-soft); color: var(--brand-ink); font-weight: 700; }
.sub-print-table td small { display: block; color: var(--muted); font-size: 7pt; }
.sub-print-table th:first-child { width: 22%; }
.sub-print-sheet th:first-child { width: 14%; }
.sub-print-sheet th:last-child { width: 18mm; }
.sub-print-workload { font-size: 7.5pt; }
.sub-print-workload th, .sub-print-workload td { padding: 1.2mm 1.4mm; }
.sub-print-note { margin: 3mm 0 0; color: var(--muted); font-size: 8pt; }
.jpraxc-print-mono .sub-print-table th, .jpraxc-print-mono .sub-print-table td { border-color: #000; background: #fff; color: #000; }

@media (max-width: 720px) {
  [data-gap-module="substitution"] .sub-toolbar-end { margin-left: 0; }
  [data-gap-module="substitution"] .sub-toolbar .record-actions { flex: 1 1 100%; }
  [data-gap-module="substitution"] .sub-toolbar .record-actions .btn { flex: 1 1 auto; }
  [data-gap-module="substitution"] .register-filter input[type="date"],
  [data-gap-module="substitution"] .register-filter input[type="month"] { width: 100%; }
  [data-gap-module="substitution"] .register-search { flex-wrap: wrap; }
}