/*
 * Orchedule Create Form Standard
 * -----------------------------------------------------------------------------
 * Shared styling for object create/update (data-entry) forms across the app —
 * panels whose main purpose is to fill in fields to create or edit a single
 * object (a Campus, a Level, a Component, a Section, a Load, …). Mirrors the
 * Filter Form Standard (filter-form.css) and Select Form Standard
 * (select-form.css): a clean, theme-token surface with each field label placed
 * in a notch on the control's top border. Kept in a separate file/class so
 * create/update panels can evolve independently of filter and select panels.
 *
 * Markup convention:
 *   <form class="form-create-bg" method="post" ...>
 *     {% csrf_token %}
 *     <div class="create-form-inner">
 *       <div class="create-form-title"><i class="bi bi-plus-lg"></i> Title</div>
 *       <div class="row g-2">
 *         <div class="cf-field col-md-4">
 *           <label class="form-label" for="...">Field</label>
 *           {{ form.field }}            (plain control or a .select2 widget)
 *         </div>
 *         ...
 *       </div>
 *       <div class="create-form-actions">
 *         <button type="submit" class="btn btn-primary">Save</button>
 *         <a href="..." class="btn btn-secondary">Cancel</a>
 *       </div>
 *     </div>
 *   </form>
 *
 * Notes:
 *   - Panels are frameless: no fill and no border. The controls carry the only
 *     visible edges, so `<fieldset>`/`<legend>` are reset here to undo the
 *     boxed treatment app-shell.css applies to them globally.
 *   - `.cf-field` is the positioned field cell; its label renders as the notch.
 *   - `--cf-notch-bg` is what a notch paints over the control's top border; it
 *     follows the page surface, or the card surface inside a modal.
 *   - Icon-only buttons use `.cf-btn-icon` (square 31x31).
 *   - Compact sizing (31px controls) matches the filter/select standards.
 *   - Textareas grow vertically; checkbox/radio rows keep an inline label.
 *   - Multi-select (`select2` multiple) support is included for many-value
 *     fields such as instructor or class pickers.
 *   - `.cf-group` is a repeating group inside one form (one per component).
 *   - `.cf-rows` holds list-valued data as `.cf-row` lines of controls.
 *   - `.cf-switch` is the app-wide toggle; `.cf-switch-field` notches it onto
 *     the control's inline-end top border, opposite the label notch.
 */

/* ---------------------------------------------------------------- surface -- */
/* Create forms are white panels on the page canvas. `--cf-notch-bg` is the
   colour a notch label paints over the control's top border, so it matches
   the panel surface. */
.form-create-bg {
    --cf-notch-bg: var(--card-background, #ffffff);
    --cf-notch-clearance: 6px;
    --form-field-label-size: 0.75rem;
    --form-section-label-size: 0.8rem;
    --form-micro-label-size: 0.7rem;
    border-radius: var(--radius-md, 10px);
    padding: 0;
}

.form-create-bg .create-form-inner {
    border: 1px solid var(--border-color, #e2e8f0);
    border-radius: var(--radius-md, 10px);
    background: var(--card-background, #ffffff);
    padding: 18px 14px 14px;
}

/* The app shell frames every `fieldset` with a fill, border and radius, and
   themes colour `legend`. Create forms group fields with plain headings. */
.form-create-bg fieldset {
    border: 0;
    border-radius: 0;
    padding: 0;
    margin: 0 0 18px;
}

.form-create-bg legend,
.create-form-title {
    float: none;
    width: 100%;
    padding: 0;
    font-size: var(--form-section-label-size, 0.8rem);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0;
    color: var(--primary-color, #1e293b);
    margin-bottom: 14px;
}

.create-form-title {
    white-space: nowrap;
}

.form-create-bg legend i,
.create-form-title i {
    margin-inline-end: 4px;
}

/* A grouping nested inside another group (e.g. instructors under a component)
   needs clear separation from the fields above it. */
.form-create-bg fieldset.cf-subsection {
    margin-top: 26px;
}

/* Keep the instructor-assignment section label consistently bold in
   section creation and component creation/update forms. */
.form-create-bg fieldset.assign-instructors>legend,
.form-create-bg #load-form-instructors-fieldset>legend {
    font-weight: 700;
}

/* --------------------------------------------------------- notched label -- */
.form-create-bg .form-label {
    font-size: var(--form-field-label-size, 0.75rem);
    font-weight: 700;
    letter-spacing: 0;
    color: var(--text-primary, #1e293b);
    white-space: nowrap;
    margin-bottom: 3px;
}

/* Field cell becomes a positioning context for its notch label.
   Canonical convention is `.cf-field`; any create-form column that has a
   direct-child label is also treated as a field cell, so existing forms get
   notches without markup changes. Labels nested inside another wrapper (e.g.
   an inline checkbox group) are intentionally left inline. */
.form-create-bg .cf-field,
.form-create-bg .row>[class*="col-"]:has(>.form-label),
.form-create-bg .row>[class*="col-"]:has(>label:not(.cf-switch-field)) {
    position: relative;
    isolation: isolate;
    padding-top: var(--cf-notch-clearance);
}

.form-create-bg .cf-field>.form-label,
.form-create-bg .cf-field>label:not(.cf-switch-field),
.form-create-bg .row>[class*="col-"]>.form-label,
.form-create-bg .row>[class*="col-"]>label:not(.cf-switch-field) {
    position: absolute;
    top: var(--cf-notch-clearance);
    inset-inline-start: 9px;
    transform: translateY(-50%);
    z-index: 5;
    margin: 0;
    padding: 0 4px;
    background: linear-gradient(to bottom,
            var(--cf-notch-bg, var(--card-background, #ffffff)) 0 50%,
            var(--card-background, #ffffff) 50% 100%);
    border: 0;
    border-radius: 0;
    box-shadow: none;
    color: var(--text-primary, #1e293b);
    font-size: var(--form-field-label-size, 0.75rem);
    font-weight: 700;
    text-transform: none;
    letter-spacing: 0;
    line-height: 1.15;
    max-width: calc(100% - 16px);
    overflow: hidden;
    text-overflow: ellipsis;
    pointer-events: none;
}

.form-create-bg .cf-field:focus-within>.form-label,
.form-create-bg .cf-field:focus-within>label:not(.cf-switch-field),
.form-create-bg .row>[class*="col-"]:focus-within>.form-label,
.form-create-bg .row>[class*="col-"]:focus-within>label:not(.cf-switch-field) {
    color: var(--primary-color, #2563eb);
}

/* Select2 can move DOM focus into its dropdown, outside the field. Its own
   state classes remain on the generated container, so label state does not
   depend on where Select2 happens to put focus. */
.form-create-bg .cf-field:has(>.select2-container--focus)>.form-label,
.form-create-bg .cf-field:has(>.select2-container--open)>.form-label,
.form-create-bg .cf-field:has(>.select2-container--focus)>label:not(.cf-switch-field),
.form-create-bg .cf-field:has(>.select2-container--open)>label:not(.cf-switch-field),
.form-create-bg .row>[class*="col-"]:has(>.select2-container--focus)>.form-label,
.form-create-bg .row>[class*="col-"]:has(>.select2-container--open)>.form-label,
.form-create-bg .row>[class*="col-"]:has(>.select2-container--focus)>label:not(.cf-switch-field),
.form-create-bg .row>[class*="col-"]:has(>.select2-container--open)>label:not(.cf-switch-field) {
    color: var(--primary-color, #2563eb);
}

/* Vertical breathing room so notches clear neighbouring rows/fields. */
.form-create-bg .row {
    --bs-gutter-y: 0;
    row-gap: 16px;
}

.form-create-bg .row+.row {
    margin-top: 18px;
}

/* ---------------------------------------------------------------- controls -- */
.form-create-bg .form-control,
.form-create-bg .form-select,
.form-create-bg select,
.form-create-bg textarea,
.form-create-bg input[type="text"],
.form-create-bg input[type="search"],
.form-create-bg input[type="email"],
.form-create-bg input[type="password"],
.form-create-bg input[type="tel"],
.form-create-bg input[type="url"],
.form-create-bg input[type="number"],
.form-create-bg input[type="date"],
.form-create-bg input[type="time"],
.form-create-bg input:not([type]) {
    height: 36px;
    margin: 0;
    padding: .45rem .5rem .2rem;
    font-size: 0.8rem;
    font-weight: 500;
    line-height: 1.25;
    border: 1px solid var(--input-border-color, #cbd5e1);
    border-radius: var(--radius-sm, 6px);
    background-color: var(--card-background, #ffffff);
    color: var(--text-primary, #1e293b);
    width: 100%;
    position: relative;
    z-index: 1;
}

.form-create-bg textarea {
    height: auto;
    min-height: 36px;
    line-height: 1.4;
}

.form-create-bg .form-control:focus,
.form-create-bg .form-select:focus,
.form-create-bg select:focus,
.form-create-bg textarea:focus,
.form-create-bg input[type="text"]:focus,
.form-create-bg input[type="search"]:focus,
.form-create-bg input[type="email"]:focus,
.form-create-bg input[type="password"]:focus,
.form-create-bg input[type="tel"]:focus,
.form-create-bg input[type="url"]:focus,
.form-create-bg input[type="number"]:focus,
.form-create-bg input[type="date"]:focus,
.form-create-bg input[type="time"]:focus,
.form-create-bg input:not([type]):focus {
    outline: none;
    border-color: var(--input-focus-border, var(--primary-color, #2563eb));
    border-top-color: var(--input-border-color, #cbd5e1);
    box-shadow: none !important;
    outline: none !important;
}

/* Native select trailing chevron room. */
.form-create-bg select.form-select,
.form-create-bg select.form-control {
    padding-inline-end: 1.75rem;
}

/* Dropdown entries inherit the control's type size, not the browser default. */
.form-create-bg select option,
.form-create-bg select optgroup {
    font-size: 0.8rem;
    font-weight: 500;
}

/* Select2 single-select parity with native controls. Two select2 themes ship
   with the app (`--default` and `--bootstrap-5`); the bootstrap-5 theme sets
   min-height/padding/line-height of its own, so pin all three here or single
   selects render taller than the plain <select> beside them. */
.form-create-bg .select2-container {
    position: relative;
    /* Page-level Select2 helpers may raise every open container for modal
       dropdowns. Keep the in-field selection below its notch label. */
    z-index: 1 !important;
    border: none !important;
    box-shadow: none !important;
    background: transparent !important;
    padding: 0 !important;
    width: 100% !important;
}

.form-create-bg .select2-container .select2-selection--single {
    height: 36px;
    min-height: 36px;
    padding: 0;
    line-height: 34px;
    border: 1px solid var(--input-border-color, #cbd5e1);
    border-radius: var(--radius-sm, 6px);
    background-color: var(--card-background, #ffffff);
}

.form-create-bg .select2-container--default.select2-container--focus .select2-selection--single,
.form-create-bg .select2-container--default.select2-container--open .select2-selection--single {
    border-color: var(--input-focus-border, var(--primary-color, #2563eb));
    border-top-color: var(--input-border-color, #cbd5e1);
    box-shadow: none !important;
}

.form-create-bg .select2-container .select2-selection--single .select2-selection__rendered {
    height: 34px;
    line-height: 30px;
    font-size: 0.8rem;
    font-weight: 500;
    color: var(--text-primary, #1e293b);
    padding-top: 3px;
    padding-inline-start: 8px;
    padding-inline-end: 24px;
}

.form-create-bg .select2-container .select2-selection--single .select2-selection__arrow {
    height: 34px;
    top: 0;
}

/* Placeholder text (native inputs and Select2) matches the notched-label
   font size and style so empty controls read consistently with the form
   labels. Color stays muted so it still reads as a placeholder. */
.form-create-bg ::placeholder,
.form-create-bg .select2-container .select2-selection__placeholder {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    color: var(--text-muted, #64748b);
    opacity: 1;
    /* Firefox lowers placeholder opacity by default */
}

/* Select2 multi-select parity (instructor/class pickers and similar). Grows
   with the number of chips but starts flush with single controls. */
.form-create-bg .select2-container .select2-selection--multiple {
    min-height: 36px;
    line-height: 1.4;
    border: 1px solid var(--input-border-color, #cbd5e1);
    border-radius: var(--radius-sm, 6px);
    background-color: var(--card-background, #ffffff);
    padding: 5px 4px 2px;
}

.form-create-bg .select2-container.select2-container--focus .select2-selection,
.form-create-bg .select2-container.select2-container--open .select2-selection {
    border-color: var(--input-focus-border, var(--primary-color, #2563eb));
    border-top-color: var(--input-border-color, #cbd5e1);
    box-shadow: none !important;
    outline: none !important;
}

/* Chips read as tinted primary pills: a white chip on a white control is
   invisible. `gap` keeps the remove control off the label in both select2
   themes (each renders the remove element before the text). */
.form-create-bg .select2-container .select2-selection--multiple .select2-selection__rendered .select2-selection__choice {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.75rem;
    line-height: 1.4;
    padding: 1px 8px;
    border-radius: var(--radius-sm, 6px);
    border: 1px solid rgba(37, 99, 235, 0.25);
    background-color: rgba(37, 99, 235, 0.1);
    color: var(--primary-color, #2563eb);
    margin-top: 3px;
}

.form-create-bg .select2-container .select2-selection--multiple .select2-selection__rendered .select2-selection__choice__remove {
    position: static;
    order: 2;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    color: inherit;
    font-size: 0.85rem;
    line-height: 1;
    opacity: 0.7;
}

.form-create-bg .select2-container .select2-selection--multiple .select2-selection__rendered .select2-selection__choice__remove:hover {
    opacity: 1;
    background: transparent;
    color: inherit;
}

/* The multi-select inline search is a <textarea>; keep the textarea min-height
   rule above from inflating the compact selection box. */
.form-create-bg .select2-container .select2-search--inline .select2-search__field {
    min-height: 0;
    height: 23px;
    margin-top: 0;
    padding: 0 2px;
    line-height: 21px;
    resize: none;
}

/* -------------------------------------------------------- checkbox / radio -- */
/* Inline binary controls keep their label beside the box (no notch). Toggle
   switches (`.form-switch`) keep their own knob geometry, so they are excluded
   from the compact box sizing below. */
.form-create-bg .form-check:not(.form-switch) {
    display: flex;
    align-items: center;
    gap: 6px;
    min-height: 31px;
    margin: 0;
    padding-inline-start: 0;
}

.form-create-bg .form-check:not(.form-switch) .form-check-input {
    width: 1rem;
    height: 1rem;
    margin: 0;
    flex: 0 0 auto;
    border: 1px solid var(--input-border-color, #cbd5e1);
}

.form-create-bg .form-check .form-check-input:focus {
    border-color: var(--input-focus-border, var(--primary-color, #2563eb));
    box-shadow: var(--input-focus-shadow, 0 0 0 2px rgba(37, 99, 235, 0.15));
}

.form-create-bg .form-check .form-check-label,
.form-create-bg .cf-check-inline>.form-label {
    position: static;
    transform: none;
    background: transparent;
    padding: 0;
    margin: 0;
    font-size: 0.8rem;
    font-weight: 500;
    text-transform: none;
    letter-spacing: 0;
    color: var(--text-primary, #1e293b);
    pointer-events: auto;
    white-space: normal;
}

/* ---------------------------------------------------------------- help/err -- */
.form-create-bg .form-text,
.form-create-bg .cf-help {
    display: block;
    margin-top: 4px;
    font-size: 0.68rem;
    color: var(--text-muted, #64748b);
    line-height: 1.3;
}

.form-create-bg .invalid-feedback,
.form-create-bg .cf-error {
    display: block;
    margin-top: 4px;
    font-size: 0.68rem;
    color: var(--danger-color, #dc2626);
    line-height: 1.3;
}

.form-create-bg .is-invalid,
.form-create-bg .form-control.is-invalid,
.form-create-bg .form-select.is-invalid {
    border-color: var(--danger-color, #dc2626);
}

/* ------------------------------------------------------------------ layout -- */
.form-create-bg .row.g-2 {
    --bs-gutter-x: 0.35rem;
}

.form-create-bg .row>[class^="col"],
.form-create-bg .row>[class*=" col"] {
    padding-top: 0;
    padding-bottom: 0;
    /* Columns are flex items: without this a wide control (a select2 showing a
       long option) keeps its min-content width and wraps the row. */
    min-width: 0;
}

/* ----------------------------------------------------------------- buttons -- */
.form-create-bg .btn {
    height: 31px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    font-size: 0.8rem;
    font-weight: 500;
    padding: 0 0.85rem;
    margin: 0 !important;
    border-radius: var(--radius-sm, 6px);
    line-height: 1;
}

.form-create-bg .btn i {
    font-size: 0.75rem;
}

/* Button rows that are not already gap-spaced flex containers. */
.form-create-bg legend,
.form-create-bg .modal-footer {
    gap: 8px;
}

.form-create-bg .btn.cf-btn-icon {
    width: 31px;
    min-width: 31px;
    padding: 0;
}

/* Action group: Save / Cancel row aligned to the inline end. */
.form-create-bg .create-form-actions {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 8px;
    margin-top: 18px;
}

.form-create-bg .create-form-actions.cf-actions-start {
    justify-content: flex-start;
}

/* ------------------------------------------------------------ search field -- */
.form-create-bg .cf-search {
    position: relative;
    display: flex;
    align-items: center;
}

.form-create-bg .cf-search>i {
    position: absolute;
    inset-inline-start: 10px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-muted, #64748b);
    font-size: 0.8rem;
    pointer-events: none;
    z-index: 2;
}

.form-create-bg .cf-search>input,
.form-create-bg .cf-search>.form-control {
    width: 100%;
    padding-inline-start: 30px;
}

/* ------------------------------------------------- page section helpers -- */
/* For action/dashboard pages that stack several `.create-form-inner` panels
   directly on the page (Auto-Generate, Export, Send Email, Prioritized Course
   Offerings, …). Wrap the page body in `.form-create-bg` so panels and fields
   inherit the standard, then use these helpers for layout between panels. */
.cf-page {
    margin: 15px auto;
    max-width: 1100px;
    padding: 12px;
}

.cf-page-narrow {
    max-width: 900px;
}

/* Spacing between stacked panels. */
.form-create-bg .create-form-inner+.create-form-inner,
.form-create-bg .cf-section-heading+.create-form-inner,
.form-create-bg .create-form-inner {
    margin-bottom: 14px;
}

/* Section label separating groups of panels. */
.cf-section-heading {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: var(--form-section-label-size, 0.8rem);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0;
    color: var(--text-muted, #64748b);
    margin: 20px 0 10px;
}

.cf-section-heading.cf-section-danger {
    color: var(--danger-color, #dc2626);
}

/* Thin neutral divider between sections. */
.cf-section-divider {
    border: 0;
    border-top: 1px solid var(--border-color, #e5e7eb);
    margin: 20px 0 4px;
}

/* Page header bar: white panel matching the form standard. */
.cf-page-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    padding: 12px 14px;
    margin-bottom: 12px;
    border: 1px solid var(--border-color, #e5e7eb);
    border-radius: var(--radius-md, 10px);
    background: var(--card-background, #ffffff);
}

.cf-page-header h1,
.cf-page-header h2,
.cf-page-header h3,
.cf-page-header h4,
.cf-page-header h5 {
    margin: 0;
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--text-primary, #1e293b);
}

/* Danger panels: a danger accent on the inline-start edge, no fill. */
.form-create-bg .create-form-inner.cf-panel-danger {
    border-inline-start: 3px solid var(--danger-color, #dc2626);
    padding-inline-start: 12px;
}

.create-form-title.cf-title-danger {
    color: var(--danger-color, #dc2626);
}

/* Helper/description text inside panels. */
.form-create-bg .cf-panel-help {
    font-size: 0.72rem;
    color: var(--text-muted, #64748b);
    margin-bottom: 10px;
    line-height: 1.4;
}

/* ------------------------------------------------------------ modal bodies -- */
/* A scrollable `.modal-body` clips anything outside its padding box, which
   would swallow the notch label of the first row. Reserve room for it. */
.form-create-bg .modal-body {
    padding-top: 18px;
}

/* Select2 renders its dropdown at the end of <body>, outside `.form-create-bg`,
   so option sizing has to be matched globally to the 31px control type size.
   Selector depth mirrors select2-bootstrap-5-theme so it wins on load order. */
.select2-container .select2-dropdown .select2-results__options .select2-results__option,
.select2-container .select2-dropdown .select2-search .select2-search__field {
    padding: 0.25rem 0.5rem;
    font-size: 0.8rem;
    line-height: 1.5;
}

/* --------------------------------------------------- advanced field panel -- */
/* The shared "advanced" search panel injected under a classes/lessons field.
   Frameless like every other create surface, with room above for the notches
   of its own first row. */
.form-create-bg .advanced-classes-field,
.form-create-bg .advanced-lessons-field,
.form-create-bg .advanced-loads-field {
    margin-top: 18px;
}

.form-create-bg .advanced-classes-field .acf-actions,
.form-create-bg .advanced-loads-field .acf-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 14px;
}

/* --------------------------------------------------- grouped field cards -- */
/* Repeating groups inside one form (one per Course component in the section
   and load create/update forms). Frameless like every other create panel; a
   hairline separates consecutive groups. */
.form-create-bg .cf-group {
    margin-bottom: 18px;
}

.form-create-bg .cf-group+.cf-group {
    border-top: 1px solid var(--border-color, #e5e7eb);
    padding-top: 18px;
}

.form-create-bg .cf-group-header {
    font-size: var(--form-section-label-size, 0.8rem);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0;
    color: var(--primary-color, #1e293b);
    margin-bottom: 14px;
}

.form-create-bg .cf-group-header i {
    margin-inline-end: 4px;
}

/* ----------------------------------------------------- repeating row-set -- */
/* Inline rows of controls for list-valued data (component hours, plan-level
   maps, …). One `.cf-row` per record: `.cf-col` grows, `.cf-col-sm` is a fixed
   narrow cell, `.cf-row-action` holds the trailing icon button. Column names
   live once in `.cf-rows-header` instead of a notch label per cell, so the
   controls themselves need no extra styling — they inherit the standard. */
.form-create-bg .cf-rows {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.form-create-bg .cf-rows-header,
.form-create-bg .cf-row {
    display: flex;
    align-items: center;
    gap: 8px;
}

.form-create-bg .cf-rows-header {
    padding-inline-start: 4px;
    color: var(--text-muted, #64748b);
    font-size: var(--form-micro-label-size, 0.7rem);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0;
    line-height: 1.15;
}

.form-create-bg .cf-col {
    flex: 1 1 0;
    min-width: 0;
}

.form-create-bg .cf-col-sm {
    flex: 0 0 120px;
    min-width: 0;
}

.form-create-bg .cf-row-action {
    flex: 0 0 31px;
}

/* ---------------------------------------------------------- field actions -- */
/* Secondary action attached to a field (e.g. "Search or Create Classes").
   Rendered as a notch on the control's top border at the inline-end corner,
   mirroring the label notch on the inline-start corner, so it never changes
   the field's flow geometry. */
.form-create-bg .cf-field-action {
    position: absolute;
    top: var(--cf-notch-clearance);
    inset-inline-end: 8px;
    transform: translateY(-50%);
    z-index: 3;
    display: inline-flex;
    align-items: center;
    margin: 0;
    padding: 0 4px;
    background: var(--cf-notch-bg, var(--card-background, #ffffff));
}

.form-create-bg .cf-field-action .btn {
    height: 18px;
    padding: 0 6px;
    gap: 4px;
    font-size: 0.62rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    border-radius: var(--radius-sm, 6px);
}

.form-create-bg .cf-field-action .btn i {
    font-size: 0.62rem;
}

.form-create-bg .cf-class-assignment-option {
    display: flex;
    justify-content: flex-end;
    margin-top: 8px;
}

.form-create-bg .cf-class-assignment-option label {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin: 0;
    color: var(--text-muted, #64748b);
    font-size: var(--form-micro-label-size, 0.7rem);
    font-weight: 600;
    cursor: pointer;
}

.form-create-bg .classes-deferred .select2-container {
    opacity: 0.65;
}

/* --------------------------------------------------------- switch field -- */
/* A toggle that modifies its field (Auto-Name). Rendered as a notch on the
   control's top border at the inline-end corner, mirroring the label notch on
   the inline-start corner, so it never changes the field's flow geometry. */
.form-create-bg .cf-switch-field {
    position: absolute;
    top: var(--cf-notch-clearance);
    inset-inline-end: 8px;
    transform: translateY(-50%);
    z-index: 3;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin: 0;
    padding: 0 4px;
    background: var(--cf-notch-bg, var(--card-background, #ffffff));
    cursor: pointer;
}

.form-create-bg .cf-switch-text {
    color: var(--text-muted, #64748b);
    font-size: var(--form-micro-label-size, 0.7rem);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0;
    line-height: 1.15;
    user-select: none;
}

/* ------------------------------------------------------------------ switch -- */
/* The single toggle-switch style used throughout the application: a 40x22
   rounded track with a 16px knob that travels 18px. Add `.cf-switch-warning`
   for the amber warning/break variant. */
.cf-switch {
    -webkit-appearance: none;
    appearance: none;
    position: relative;
    flex: 0 0 auto;
    width: 40px;
    height: 22px;
    margin: 0;
    border: none;
    border-radius: 999px;
    background-color: #d1d5db;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.cf-switch::before {
    content: "";
    position: absolute;
    top: 3px;
    inset-inline-start: 3px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background-color: #ffffff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
    transition: transform 0.2s ease;
}

.cf-switch:checked {
    background-color: #6366f1;
}

.cf-switch.cf-switch-warning:checked {
    background-color: #f59e0b;
}

.cf-switch:checked::before {
    transform: translateX(18px);
}

[dir="rtl"] .cf-switch:checked::before {
    transform: translateX(-18px);
}

.cf-switch:focus-visible {
    outline: none;
    box-shadow: var(--input-focus-shadow, 0 0 0 2px rgba(37, 99, 235, 0.15));
}