/*
 * Orchedule Filter Form Standard
 * -----------------------------------------------------------------------------
 * Shared styling for every `.form-filter-bg` filter panel across the app.
 * Implements the Orchedule Form Style Standard: a clean, theme-token surface
 * with field labels placed in notches on the controls' top borders.
 *
 * Markup convention:
 *   <form class="form-filter-bg" ...>
 *     <div class="filter-form-inner">
 *       <div class="row g-2">
 *         <div class="ff-field col-md-2">
 *           <label class="form-label" for="...">Field</label>
 *           {{ form.field }}            (plain control or a .select2 widget)
 *         </div>
 *         ...
 *       </div>
 *     </div>
 *   </form>
 *
 * Notes:
 *   - `.ff-field` is the positioned field cell; its label renders as the notch.
 *   - Icon-only buttons use `.ff-btn-icon` (square 31x31).
 *   - Compact sizing (31px controls) is intentional and shared by all filters.
 */

/* ---------------------------------------------------------------- surface -- */
/* Field-label notches paint over the panel surface. */
.form-filter-bg {
    --ff-notch-bg: var(--card-background, #ffffff);
    --ff-notch-clearance: 6px;
    --form-field-label-size: 0.75rem;
    border-radius: var(--radius-md, 10px);
    padding: 0;
}

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

/* --------------------------------------------------------- notched label -- */
.form-filter-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 `.ff-field`; any filter-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.
   a horizontal search group) are intentionally left inline. */
.form-filter-bg .ff-field,
.form-filter-bg .row>[class*="col-"]:has(>.form-label),
.form-filter-bg .row>[class*="col-"]:has(>label) {
    position: relative;
    isolation: isolate;
    padding-top: var(--ff-notch-clearance);
}

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

/* Select2 may move focus into its detached dropdown. Use the state retained
   on the generated in-field container so label state remains dependable. */
.form-filter-bg .ff-field:has(>.select2-container--focus)>.form-label,
.form-filter-bg .ff-field:has(>.select2-container--open)>.form-label,
.form-filter-bg .ff-field:has(>.select2-container--focus)>label,
.form-filter-bg .ff-field:has(>.select2-container--open)>label,
.form-filter-bg .row>[class*="col-"]:has(>.select2-container--focus)>.form-label,
.form-filter-bg .row>[class*="col-"]:has(>.select2-container--open)>.form-label,
.form-filter-bg .row>[class*="col-"]:has(>.select2-container--focus)>label,
.form-filter-bg .row>[class*="col-"]:has(>.select2-container--open)>label {
    color: var(--primary-color, #2563eb);
}

/* Vertical breathing room so notches clear neighbouring rows/fields.
   `.row + .row` only matches multi-row filter forms, so the moderate gap below
   applies to them (schedule planners, institution schedule list, lesson list,
   load list) without affecting single-row filters. Templates must not add
   bootstrap `mt-*`/`mb-*` utilities to these rows or the !important utility
   would override this shared spacing. */
.form-filter-bg .row {
    --bs-gutter-y: 0;
    row-gap: 16px;
}

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

/* ---------------------------------------------------------------- controls -- */
.form-filter-bg .form-control,
.form-filter-bg .form-select,
.form-filter-bg select,
.form-filter-bg textarea,
.form-filter-bg input[type="text"],
.form-filter-bg input[type="search"],
.form-filter-bg input[type="email"],
.form-filter-bg input[type="number"],
.form-filter-bg input[type="date"],
.form-filter-bg input:not([type]) {
    height: 31px;
    padding: .35rem .5rem .15rem;
    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);
    position: relative;
    z-index: 1;
}

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

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

/* Select2 single-select parity with native controls. */
.form-filter-bg .select2-container {
    position: relative;
    /* Modal helpers may raise every open Select2 container. Keep the in-field
       selection below its notch label; detached dropdowns retain their layer. */
    z-index: 1 !important;
    border: none !important;
    box-shadow: none !important;
    background: transparent !important;
    padding: 0 !important;
    width: 100% !important;
}

.form-filter-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-filter-bg .select2-container--default.select2-container--focus .select2-selection--single,
.form-filter-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;
    outline: none !important;
}

.form-filter-bg .select2-container--default .select2-selection--single .select2-selection__rendered {
    height: 29px;
    line-height: 26px;
    font-size: 0.8rem;
    font-weight: 500;
    color: var(--text-primary, #1e293b);
    padding-top: 2px;
    padding-inline-start: 8px;
}

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

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

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

/* ----------------------------------------------------------------- buttons -- */
.form-filter-bg .btn {
    height: 31px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8rem;
    font-weight: 500;
    padding: 0 0.85rem;
    /* Controls carry a legacy 0.5em bottom margin from app-shell.css
       (`form input, form select, form textarea`). Match it so buttons
       bottom-align with the field boxes in align-items-end rows. */
    margin: 0 0 0.5em !important;
    border-radius: var(--radius-sm, 6px);
    line-height: 1;
}

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

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

/* Filter/Reset action group: bottom-align with the field row. */
.form-filter-bg .section-filter-tools {
    display: flex;
    justify-content: flex-end;
    align-items: flex-end;
    height: auto;
    overflow: visible;
}

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

/* ------------------------------------------------------------ search field -- */
.filter-search-wrap {
    display: flex;
    justify-content: flex-end;
}

/* Search input with a leading (magnifier) icon, no notch label. */
.form-filter-bg .ff-search {
    position: relative;
    display: flex;
    align-items: center;
}

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