/* ============================== the forms inside popups (components/Modal.js and the editors that open it) ==============================
   Roi 20/10: "the fields collide" - every popup's form gets one layout: the label above its control, the controls as wide as
   their column, pairs (from / to) side by side, one column on a phone. Loaded last on the staff pages, new design only.
   The dialogs build their forms in a few legacy shapes, each handled below:
     A. a label/control table - table.missing-rep > tr > td.td-label + td (absence reports, teacher card records)
     B. bootstrap groups - .form-group > label[.col-sm-N] + .col-sm-M / control [+ p.help-block] (TableEditor, FormInput,
        school events, password and staff editors)
     C. inline lines: a label that wraps its control (C1), a text and one control in a plain div (C2), a label and its
        control as siblings (C3) - mostly the timetable builder (scheduler/TimetablePlan.js) and the attendance screen
   ======================================================================================================================== */

/* ---- shared: labels, required marks, the controls ---- */
:root[data-ui="new"] .modal-body label:is(:not([class]), .control-label, [class*="col-"]) { font-size: 13px; font-weight: 600; color: #4a5a73; line-height: 1.35; }
/* a required field that is still empty paints its label red inline (style="color: red") - the brand red instead */
:root[data-ui="new"] .modal-body label[style*="red"] { color: #b0202d !important; }
/* one height for the fields of a form (the filter row of a table inside a popup keeps its own) */
:root[data-ui="new"] .modal-body select.form-control:not([multiple]):not([size]):not(:where(thead *, .reports-table *, .t3p-table *, .f-hours)),
:root[data-ui="new"] .modal-body input.form-control:not([type="checkbox"]):not([type="radio"]):not(.score):not(.tiny):not(:where(thead *, .reports-table *, .t3p-table *)) { height: 42px; min-height: 42px; }
:root[data-ui="new"] .modal-body select.short.form-control { line-height: 20px; box-shadow: none; }
/* a number box after its text (מס. ש"ש) - the field's height, a readable width, apart from the text */
:root[data-ui="new"] .modal-body input.tiny.form-control:not(:where(td *, th *, label > *)) { width: 96px; max-width: 96px; height: 42px; min-height: 42px; padding: 10px 12px; margin-inline-start: 8px; vertical-align: middle; text-align: center; display: inline-block; }
/* the date picker: its wrapper is the field, the input fills it and the calendar opens over the dialog */
:root[data-ui="new"] .modal-body .widget-wrapper:has(> input.w-date) { position: relative; }
:root[data-ui="new"] .modal-body .widget-wrapper > .widget-inner { z-index: 1060; }

/* a date with its time (InputDate with hours / minutes: select.f-hours ':' select.f-hours + the date) is one line:
   the two time boxes narrow, the date takes the rest */
/* (the table cell is named in full to outweigh the label/control table's own cell rules here and in ui3-teacher.css) */
:root[data-ui="new"] .modal-body table.missing-rep > tbody > tr > td:has(> select.f-hours),
:root[data-ui="new"] .modal-body :is(td, div, label):has(> select.f-hours) { display: flex; align-items: center; gap: 6px; }
:root[data-ui="new"] .modal-body table.missing-rep > tbody > tr > td > select.f-hours.form-control,
:root[data-ui="new"] .modal-body select.f-hours.form-control { flex: 0 0 auto; width: 76px !important; min-width: 76px; max-width: 76px !important; height: 42px; margin: 0 !important; display: inline-block; }
:root[data-ui="new"] .modal-body :is(td, div, label):has(> select.f-hours) > strong { flex: 0 0 auto; }
:root[data-ui="new"] .modal-body :is(td, div, label):has(> select.f-hours) > .widget-wrapper { flex: 1 1 auto; min-width: 0; }

/* ---- A. the label/control table ---- */
:root[data-ui="new"] .modal-body table.missing-rep { display: block; width: 100%; margin: 0 0 14px; border: 0; }
:root[data-ui="new"] .modal-body table.missing-rep > tbody { display: flex; flex-direction: column; gap: 14px; }
:root[data-ui="new"] .modal-body table.missing-rep > tbody > tr { display: grid; grid-template-rows: auto auto; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 6px 16px; }
:root[data-ui="new"] .modal-body table.missing-rep > tbody > tr > td { display: block; padding: 0; width: auto; min-width: 0; border: 0; text-align: start; vertical-align: top; }
:root[data-ui="new"] .modal-body table.missing-rep td.td-label label { display: block; margin: 0; }
:root[data-ui="new"] .modal-body table.missing-rep :is(select, input, textarea).form-control:not([type="checkbox"]):not([type="radio"]):not(.f-hours) { display: block; width: 100% !important; max-width: none !important; margin: 0 !important; }
:root[data-ui="new"] .modal-body table.missing-rep .widget-wrapper { display: block; width: 100%; }
:root[data-ui="new"] .modal-body table.missing-rep .files-uploader { margin: 0; }
/* the files uploader's list is empty until a file is attached - no blank line between the label and the button */
:root[data-ui="new"] .modal-body .files-uploader > ol:empty { display: none; }
/* the free-text lines after the table ("הערה:", "הערה פנימית:") - the text is the label, the box under it */
:root[data-ui="new"] .modal-body table.missing-rep ~ div { margin: 0 0 14px; font-size: 13px; font-weight: 600; color: #4a5a73; }
:root[data-ui="new"] .modal-body table.missing-rep ~ div:last-child { margin-bottom: 0; }
:root[data-ui="new"] .modal-body table.missing-rep ~ div > textarea.form-control { display: block; width: 100%; margin-top: 6px; font-weight: 400; resize: vertical; }

/* ---- B. bootstrap form groups: label on its own line, the controls of the group share the line under it ---- */
:root[data-ui="new"] .modal-body .form-group { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: 0 0 14px; }
:root[data-ui="new"] .modal-body .form-group::before,
:root[data-ui="new"] .modal-body .form-group::after { content: none; display: none; }
:root[data-ui="new"] .modal-body .form-group > label:not(.radio-inline, .checkbox-inline) { flex: 1 1 100%; margin: 0; padding: 0 !important; text-align: start; float: none; width: auto; min-height: 0; }
:root[data-ui="new"] .modal-body .form-group > :not(label) { flex: 1 1 0; min-width: 0; }
:root[data-ui="new"] .modal-body .form-group > [class*="col-"] { float: none; width: auto; padding: 0; margin: 0; min-height: 0; text-align: start; }
:root[data-ui="new"] .modal-body .form-group > .help-block,
:root[data-ui="new"] .modal-body .form-group > [class*="col-"] > .help-block { flex: 1 1 100%; margin: 0; font-size: 12px; font-weight: 400; color: #8090a8; }
:root[data-ui="new"] .modal-body .form-group > .help-block:empty { display: none; }
:root[data-ui="new"] .modal-body .form-group :is(select, input, textarea).form-control:not([type="checkbox"]):not([type="radio"]):not(.f-hours) { width: 100% !important; max-width: none !important; margin: 0; }
:root[data-ui="new"] .modal-body .form-group .widget-wrapper:has(> input.w-date) { display: block; width: 100%; }
:root[data-ui="new"] .modal-body .form-group > [class*="col-"] > .checkbox { margin: 0; }
/* a rule line after a field (the password editors' em.small "8 תווים לפחות") belongs to the field above it */
:root[data-ui="new"] .modal-body .form-group + em.small { display: block; margin: -8px 0 14px; font-size: 12px; font-style: normal; color: #8090a8; }
/* a form-group that holds only a checkbox (FormInput's bool field has no label) */
:root[data-ui="new"] .modal-body .form-group > [class*="col-"]:only-child { flex-basis: 100%; }

/* B2. the record editors (TableEditor / CollectionEditor / StoreItemEditor through FormInput): many short fields, so a grid
   of fields - two side by side in a popup, one on a phone - instead of one long column; wide controls take a whole line */
:root[data-ui="new"] .modal-body .form-horizontal:has(> .form-group.form-group-sm > label.col-sm-3 + .col-sm-6) { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px 16px; align-items: start; }
:root[data-ui="new"] .modal-body .form-horizontal:has(> .form-group.form-group-sm > label.col-sm-3 + .col-sm-6)::before,
:root[data-ui="new"] .modal-body .form-horizontal:has(> .form-group.form-group-sm > label.col-sm-3 + .col-sm-6)::after { content: none; display: none; }
:root[data-ui="new"] .modal-body .form-horizontal:has(> .form-group.form-group-sm > label.col-sm-3 + .col-sm-6) > .form-group { margin: 0; }
:root[data-ui="new"] .modal-body .form-horizontal:has(> .form-group.form-group-sm > label.col-sm-3 + .col-sm-6) > :not(.form-group),
:root[data-ui="new"] .modal-body .form-horizontal:has(> .form-group.form-group-sm > label.col-sm-3 + .col-sm-6) > .form-group:has(textarea, .multiselect, .radioselect, .w-multiselect, .files-uploader, form, table) { grid-column: 1 / -1; }
/* a field of two controls (a date + "כל היום" / its hour) takes a whole line, the two side by side */
:root[data-ui="new"] .modal-body .form-horizontal:has(> .form-group.form-group-sm > label.col-sm-3 + .col-sm-6) > .form-group:has(> div[class*="col-"] + div[class*="col-"]) { grid-column: 1 / -1; }
/* a checkbox field sits on the line of the fields beside it */
:root[data-ui="new"] .modal-body .form-horizontal:has(> .form-group.form-group-sm > label.col-sm-3 + .col-sm-6) > .form-group:not(:has(> label)) { align-self: end; min-height: 42px; }
:root[data-ui="new"] .modal-body .form-horizontal:has(> .form-group.form-group-sm > label.col-sm-3 + .col-sm-6) > .form-group:not(:has(> label)) .checkbox { display: flex; align-items: center; min-height: 42px; }

/* ---- C. inline fields ---- */
/* C1. a label that wraps its control - label('שעות תקן: ', input) - is one field: the text above, the control under it, the
   fields of a line side by side and wrapping */
:root[data-ui="new"] .modal-body label:not([class]):has(> :is(select, textarea, input:not([type="checkbox"]):not([type="radio"])).form-control, > .widget-wrapper > input.w-date) {
    display: inline-flex; flex-direction: column; align-items: stretch; gap: 6px; vertical-align: top;
    margin: 0 0 14px; margin-inline-end: 16px; max-width: 100%;
}
/* one width for the fields of a line, so they read as columns; a colour swatch is a swatch */
:root[data-ui="new"] .modal-body label:not([class]):has(> :is(select, textarea, input:not([type="checkbox"]):not([type="radio"])).form-control) > .form-control { width: 200px !important; max-width: 100% !important; margin: 0 !important; }
:root[data-ui="new"] .modal-body label:not([class]):has(> :is(select, textarea, input:not([type="checkbox"]):not([type="radio"])).form-control) > input[type="color"].form-control { width: 64px !important; height: 42px; padding: 4px; cursor: pointer; }
/* a long text in its label takes the whole line */
:root[data-ui="new"] .modal-body label:not([class]):has(> textarea.form-control) { display: flex; width: 100%; margin-inline-end: 0; }
:root[data-ui="new"] .modal-body label:not([class]):has(> .form-control) > textarea.form-control { width: 100% !important; }
:root[data-ui="new"] .modal-body label:not([class]):has(> .form-control) > input.tiny.form-control { height: 42px; padding: 10px 12px; }
/* a label that wraps a check box (CheckItem simple) - the same field: the text above, the box on the line of the controls */
:root[data-ui="new"] .modal-body label:not([class]):has(> label.checkit) { display: inline-flex; flex-direction: column; align-items: flex-start; gap: 6px; vertical-align: top; margin: 0 0 14px; margin-inline-end: 16px; }
:root[data-ui="new"] .modal-body label:not([class]):has(> label.checkit) > label.checkit { display: inline-flex; align-items: center; min-height: 42px; margin: 0; }
/* C2. a plain line of a text and one control - m('', 'מורה: ', select) - the same field, as wide as the dialog */
:root[data-ui="new"] .modal-body div:not([class]):has(> :is(select, textarea, input:not([type="checkbox"]):not([type="radio"]):not([type="color"])).form-control):not(:has(> :not(.form-control, span.charslimit))):not(:has(> .form-control ~ .form-control)) {
    display: flex; flex-direction: column; align-items: stretch; gap: 6px; margin: 0 0 14px; font-size: 13px; font-weight: 600; color: #4a5a73;
}
:root[data-ui="new"] .modal-body div:not([class]):has(> .form-control):not(:has(> :not(.form-control, span.charslimit))):not(:has(> .form-control ~ .form-control)) > .form-control { width: 100% !important; max-width: none !important; margin: 0; font-weight: 400; }
/* C3. a label and its control as two siblings - m('label', 'שם פרטי: '), m(InputText) - the label on its own line and the
   control under it across the dialog (not inside a table cell, a form-group or an inline form, which lay out by themselves) */
/* (only a label with ONE control after it - a label before a row of controls, the hour lines of "שיבוץ שעות", keeps the row) */
/* (a :has() may not hold another :has(), so "the control is not followed by another" is spelled as a sibling chain) */
:root[data-ui="new"] .modal-body label:not([class]):not(:where(td *, th *, .form-group > *, .form-inline *)):has(+ :is(select, textarea, input:not([type="checkbox"]):not([type="radio"]):not([type="color"])).form-control):not(:has(+ .form-control + .form-control, + .form-control + .widget-wrapper)),
:root[data-ui="new"] .modal-body label:not([class]):not(:where(td *, th *, .form-group > *, .form-inline *)):has(+ .widget-wrapper > input.w-date) { display: block; margin: 0 0 6px; }
:root[data-ui="new"] .modal-body label:not([class]):not(:where(td *, th *, .form-group > *, .form-inline *)) + :is(select, textarea, input:not([type="checkbox"]):not([type="radio"]):not([type="color"])).form-control:not(:has(+ .form-control, + .widget-wrapper)) { display: block; width: 100% !important; max-width: none !important; margin: 0 0 14px !important; }
:root[data-ui="new"] .modal-body label:not([class]):not(:where(td *, th *, .form-group > *, .form-inline *)) + .widget-wrapper:has(> input.w-date) { display: block; width: 100%; margin: 0 0 14px; }
:root[data-ui="new"] .modal-body label:not([class]):not(:where(td *, th *, .form-group > *, .form-inline *)) + .widget-wrapper > input.w-date { width: 100% !important; }
:root[data-ui="new"] .modal-body :is(input, select).inlined.form-control { vertical-align: middle; }

@media (max-width: 600px) {
    /* the inline fields two to a line, each as wide as its half */
    :root[data-ui="new"] .modal-body label:not([class]):has(> :is(select, input:not([type="checkbox"]):not([type="radio"]):not([type="color"])).form-control) { width: calc(50% - 12px); margin-inline-end: 8px; }
    :root[data-ui="new"] .modal-body label:not([class]):has(> :is(select, textarea, input:not([type="checkbox"]):not([type="radio"])).form-control) > .form-control:not([type="color"]) { width: 100% !important; }
    :root[data-ui="new"] .modal-body table.missing-rep > tbody > tr { grid-template-rows: none; grid-auto-flow: row; grid-auto-columns: auto; grid-template-columns: minmax(0, 1fr); }
    :root[data-ui="new"] .modal-body .form-group > :not(label) { flex-basis: 100%; }
    :root[data-ui="new"] .modal-body select.form-control:not([multiple]):not([size]):not(:where(thead *, .reports-table *, .t3p-table *)),
    :root[data-ui="new"] .modal-body input.form-control:not([type="checkbox"]):not([type="radio"]):not(.score):not(.tiny):not(:where(thead *, .reports-table *, .t3p-table *)) { height: 44px; min-height: 44px; font-size: 16px; }
}