/*
 * Orchedule Select Form Standard
 * -----------------------------------------------------------------------------
 * Shared styling for object-selection forms across the app — panels whose main
 * purpose is to pick an object (a Course, an instructor, a time-off entity, …)
 * and act on it. Mirrors the Filter Form Standard (see filter-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 object-selection
 * panels can evolve independently of filter panels.
 *
 * Markup convention:
 *   <form class="form-select-bg" ...>            (or a wrapping <div>)
 *     <div class="select-form-inner">
 *       <div class="select-form-title"><i class="bi bi-collection"></i> Title</div>
 *       <div class="row g-2">
 *         <div class="sf-field col-md-4">
 *           <label class="form-label" for="...">Field</label>
 *           <select class="form-control select2">...</select>   (or plain control)
 *         </div>
 *         ...
 *         <div class="col-md-2">
 *           <div class="select-form-actions">
 *             <button class="btn btn-primary">Action</button>
 *           </div>
 *         </div>
 *       </div>
 *     </div>
 *   </form>
 *
 * Notes:
 *   - `.sf-field` is the positioned field cell; its label renders as the notch.
 *   - Icon-only buttons use `.sf-btn-icon` (square 31x31).
 *   - Compact sizing (31px controls) matches the filter-form standard.
 *   - Multi-select (`select2` multiple) support is included for instructor
 *     pickers and similar many-value fields.
 */

/* ---------------------------------------------------------------- surface -- */
/* Select forms are white panels on the page canvas. `--sf-notch-bg` is the
   panel surface that notch labels paint over a control's top border. */
.form-select-bg {
    --sf-notch-bg: var(--card-background, #ffffff);
    --form-field-label-size: 0.75rem;
    --form-section-label-size: 0.8rem;
    border-radius: var(--radius-md, 10px);
    padding: 0;
}

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

.select-form-title {
    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;
    white-space: nowrap;
}

.select-form-title i {
    margin-inline-end: 4px;
}

/* --------------------------------------------------------- notched label -- */
.form-select-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 `.sf-field`; any select-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 are
   intentionally left inline. */
.form-select-bg .sf-field,
.form-select-bg .row>[class*="col-"] {
    position: relative;
}

.form-select-bg .sf-field>.form-label,
.form-select-bg .sf-field>label,
.form-select-bg .row>[class*="col-"]>.form-label,
.form-select-bg .row>[class*="col-"]>label {
    position: absolute;
    top: 0;
    inset-inline-start: 9px;
    transform: translateY(-50%);
    z-index: 3;
    margin: 0;
    padding: 0 4px;
    background: var(--sf-notch-bg, var(--card-background, #ffffff));
    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-select-bg .sf-field:focus-within>.form-label,
.form-select-bg .sf-field:focus-within>label,
.form-select-bg .row>[class*="col-"]:focus-within>.form-label,
.form-select-bg .row>[class*="col-"]:focus-within>label {
    color: var(--primary-color, #2563eb);
}

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

.form-select-bg .row+.row {
    margin-top: 24px;
}

/* ---------------------------------------------------------------- controls -- */
.form-select-bg .form-control,
.form-select-bg .form-select,
.form-select-bg select,
.form-select-bg textarea,
.form-select-bg input[type="text"],
.form-select-bg input[type="search"],
.form-select-bg input[type="email"],
.form-select-bg input[type="number"],
.form-select-bg input[type="date"],
.form-select-bg input:not([type]) {
    height: 31px;
    margin: 0;
    padding: .25rem .5rem;
    font-size: 0.8rem;
    font-weight: 500;
    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);
}

.form-select-bg textarea {
    height: auto;
    min-height: 31px;
}

.form-select-bg .form-control:focus,
.form-select-bg .form-select:focus,
.form-select-bg select:focus,
.form-select-bg textarea:focus,
.form-select-bg input[type="text"]:focus,
.form-select-bg input[type="search"]:focus,
.form-select-bg input[type="email"]:focus,
.form-select-bg input[type="number"]:focus,
.form-select-bg input[type="date"]:focus,
.form-select-bg input:not([type]):focus {
    outline: none;
    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));
}

/* Select2 single-select parity with native controls. */
.form-select-bg .select2-container {
    position: relative;
    /* Keep the in-field selection below its notch label. Detached dropdown
       containers are appended outside .form-select-bg and retain their layer. */
    z-index: 1 !important;
    border: none !important;
    box-shadow: none !important;
    background: transparent !important;
    padding: 0 !important;
    width: 100% !important;
}

.form-select-bg .select2-container .select2-selection--single {
    height: 31px;
    border: 1px solid var(--input-border-color, #cbd5e1);
    border-radius: var(--radius-sm, 6px);
    background-color: var(--card-background, #ffffff);
}

.form-select-bg .select2-container--default.select2-container--focus .select2-selection--single,
.form-select-bg .select2-container--default.select2-container--open .select2-selection--single {
    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-select-bg .select2-container--default .select2-selection--single .select2-selection__rendered {
    line-height: 29px;
    font-size: 0.8rem;
    font-weight: 500;
    color: var(--text-primary, #1e293b);
    padding-inline-start: 8px;
}

.form-select-bg .select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 29px;
}

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

.form-select-bg .select2-container--default.select2-container--focus .select2-selection--multiple,
.form-select-bg .select2-container--default.select2-container--open .select2-selection--multiple {
    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-select-bg .select2-container--default .select2-selection--multiple .select2-selection__choice {
    font-size: 0.75rem;
    line-height: 1.4;
    border-radius: var(--radius-sm, 6px);
    border-color: var(--input-border-color, #cbd5e1);
    background-color: var(--card-background, #ffffff);
    color: var(--text-primary, #1e293b);
    margin-top: 3px;
}

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

.form-select-bg .row>[class^="col"],
.form-select-bg .row>[class*=" col"] {
    padding-top: 0;
    padding-bottom: 0;
}

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

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

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

/* Action group: bottom-align with the field row. */
.form-select-bg .select-form-tools {
    display: flex;
    justify-content: flex-end;
    align-items: flex-end;
    height: 100%;
    overflow: visible;
}

.form-select-bg .select-form-actions {
    display: flex;
    align-items: flex-end;
    gap: 8px;
}

/* Compact trailing action bars on select panels (e.g. the timetable
   headers): tight gaps and slim buttons so the tools stay subordinate to
   the selects. Buttons are flex containers, so the whitespace text node
   between the icon and the label is dropped — `gap` restores the spacing
   and mirrors automatically in RTL. */
.form-select-bg .sf-select-actions {
    display: flex;
    justify-content: flex-end;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 6px;
}

.form-select-bg .sf-select-actions .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    min-width: 30px;
    height: 28px;
    padding: 0 8px;
    font-size: 0.72rem;
    font-weight: 500;
    line-height: 1;
    text-align: center;
    border-radius: var(--radius-sm, 6px);
    box-shadow: none;
}

.form-select-bg .sf-select-actions .btn>i {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    vertical-align: middle;
}

.form-select-bg .sf-select-actions .btn>i::before {
    line-height: 1;
}

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

.form-select-bg .sf-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-select-bg .sf-search>input,
.form-select-bg .sf-search>.form-control {
    width: 100%;
    padding-inline-start: 30px;
}