/*
    Search / filter toolbars.

    Loaded after material-dashboard.css so these win on source order rather than
    on !important. Two Material Dashboard rules make every search row in the app
    render wrong, and this file undoes both in one place:

      .form-control { padding: 0.5rem 0 }  - no horizontal padding at all, so the
                                             placeholder and typed text sit flush
                                             against the border.
      .btn { margin-bottom: 1rem }         - inside an .input-group (which is
                                             align-items: stretch) that margin
                                             sets the group's height, so the
                                             input stretches ~16px taller than
                                             the buttons beside it and the row
                                             looks unbalanced.

    Apply .search-bar to whichever element wraps the group - the toolbar row for
    the full-width lists, or the .input-group itself for the compact card-header
    ones. Selectors below cover both placements.
*/

.search-bar {
    /* One height for the input, the buttons and any filter selects, so the row
       lines up without the per-page style="height: 43px" patches it grew. */
    --search-control-height: 2.75rem;
    --search-control-padding-x: 0.875rem;
    --search-control-padding-y: 0.5rem;
    --search-control-radius: 0.5rem;
}

.search-bar .input-group,
.search-bar.input-group {
    align-items: center;
    gap: 0.5rem;
    flex-wrap: nowrap;
}

.search-bar .form-control,
.search-bar .form-select,
.search-bar .btn,
.search-bar .input-group-text {
    height: var(--search-control-height);
    min-height: var(--search-control-height);
    margin-bottom: 0;
    border-radius: var(--search-control-radius);
}

.search-bar .form-control,
.search-bar .form-select {
    padding: var(--search-control-padding-y) var(--search-control-padding-x);
    line-height: 1.5;
}

/* Only the text input absorbs the spare width; the buttons and filter selects
   keep their natural size instead of being squashed by flex-wrap: nowrap.
   width is reset alongside flex because .input-group > .form-select carries
   Bootstrap width: 1%, which collapses the select once it stops flex-growing. */
.search-bar .btn,
.search-bar .form-select,
.search-bar .input-group-text {
    flex: 0 0 auto;
    width: auto;
}

/* Buttons and the icon affixes centre their glyph rather than sitting it on the
   text baseline, which is what left the magnifier looking high in the box. */
.search-bar .btn,
.search-bar .input-group-text {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.375rem;
    white-space: nowrap;
}

.search-bar .input-group-text {
    padding: 0 0.75rem;
}

/* gap on the group already spaces the controls; the hand-placed ms-2 on a
   trailing filter button would double it. */
.search-bar .input-group > .ms-2,
.search-bar.input-group > .ms-2 {
    margin-left: 0 !important;
}

/* An icon-only button reads as a square. Material Dashboard already ships
   .btn-icon-only; this only resizes it to match the row. A :has(:only-child)
   test would not work here - :only-child ignores text nodes, so it also matches
   the icon inside the Clear Filters button, which has a label. */
.search-bar .btn.btn-icon-only {
    width: var(--search-control-height);
    height: var(--search-control-height);
    padding: 0;
}

.search-bar .btn .material-icons,
.search-bar .btn .material-icons-round,
.search-bar .input-group-text .material-icons,
.search-bar .input-group-text .material-icons-round {
    font-size: 1.125rem;
    line-height: 1;
}

/* Bootstrap's input-group corner rounding assumes the controls sit flush. They
   are separated by a gap here, so every control keeps its own radius. */
.search-bar .input-group > :not(:first-child),
.search-bar .input-group > :not(:last-child),
.search-bar.input-group > :not(:first-child),
.search-bar.input-group > :not(:last-child) {
    border-radius: var(--search-control-radius);
}

/*
    Compact variant: the card-header boxes that use .input-group-sm and put the
    icon in a leading affix. Those inputs carry .ps-0 on purpose - the affix
    supplies the left inset - so only the affix needs padding, and the controls
    stay flush rather than gapped.
*/
.search-bar.search-bar--compact {
    --search-control-height: 2.25rem;
    --search-control-padding-x: 0.75rem;
    --search-control-padding-y: 0.375rem;
    --search-control-radius: 0.4rem;
}

.search-bar--compact .input-group,
.search-bar--compact.input-group {
    gap: 0;
}

.search-bar--compact .input-group > :not(:first-child),
.search-bar--compact.input-group > :not(:first-child) {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

.search-bar--compact .input-group > :not(:last-child),
.search-bar--compact.input-group > :not(:last-child) {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

/* Narrow screens: let the row wrap instead of crushing the input to nothing. */
@media (max-width: 575.98px) {
    .search-bar .input-group,
    .search-bar.input-group {
        flex-wrap: wrap;
    }

    .search-bar .input-group > .form-control,
    .search-bar.input-group > .form-control {
        flex: 1 1 100%;
    }

    .search-bar .form-select {
        flex: 1 1 auto;
        max-width: none !important;
    }
}