/*
 * Shared MFSA control primitives.
 * The mfsa-standard-* selectors are compatibility aliases for the existing
 * Forms shortcode markup. New components should use mfsa-ui-* classes.
 */

.mfsa-ui-toolbar,
form.mfsa-standard-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--mfsa-ui-gap);
    width: 100%;
    margin: 0 0 20px;
    padding: 12px;
    box-sizing: border-box;
    color: var(--mfsa-ui-text);
    background: var(--mfsa-ui-surface-subtle);
    border: 1px solid var(--mfsa-ui-border-light);
    border-radius: var(--mfsa-ui-radius);
}

.mfsa-ui-toolbar__start,
.mfsa-toolbar-left,
.mfsa-ui-toolbar__end,
.mfsa-toolbar-right {
    display: flex;
    align-items: center;
    gap: var(--mfsa-ui-gap);
    min-width: 0;
    margin: 0;
    padding: 0;
}

.mfsa-ui-toolbar__start,
.mfsa-toolbar-left {
    flex: 0 0 auto;
}

.mfsa-ui-toolbar__end,
.mfsa-toolbar-right {
    flex: 1 1 auto;
    justify-content: flex-end;
}

.mfsa-toolbar-left .mfsa-counts,
.mfsa-ui-toolbar__count {
    margin: 0;
    color: var(--mfsa-ui-text-muted);
    font-size: 0.9375rem;
    font-weight: 600;
    line-height: 1.35;
    white-space: nowrap;
}

.mfsa-input-wrap,
.mfsa-ui-field {
    position: relative;
    display: flex;
    align-items: center;
    min-width: 0;
    margin: 0;
}

.mfsa-input-wrap input,
.mfsa-input-wrap select,
.mfsa-ui-field input,
.mfsa-ui-field select {
    min-height: var(--mfsa-ui-control-height);
    margin: 0;
    padding: 8px 12px;
    box-sizing: border-box;
    color: var(--mfsa-ui-text);
    background: var(--mfsa-ui-surface);
    border: 1px solid var(--mfsa-ui-border);
    border-radius: var(--mfsa-ui-radius);
    box-shadow: none;
    font: inherit;
    line-height: 1.25;
}

.mfsa-ui-search,
.search-wrap {
    flex: 1 1 260px;
    width: auto;
    min-width: 180px;
    max-width: 420px;
}

.mfsa-ui-search input,
.search-wrap input {
    width: 100%;
    padding-inline-start: 42px;
}

.mfsa-ui-search .dashicons,
.search-wrap .dashicons {
    position: absolute;
    inset-inline-start: 12px;
    top: 50%;
    z-index: 1;
    width: 20px;
    height: 20px;
    margin: 0;
    color: var(--mfsa-ui-text-muted);
    font-size: 20px;
    line-height: 1;
    pointer-events: none;
    transform: translateY(-50%);
}

.mfsa-ui-sort,
.sort-wrap {
    flex: 0 1 240px;
    min-width: 170px;
}

.mfsa-ui-sort select,
.sort-wrap select {
    width: 100%;
    padding-inline-end: 36px;
    cursor: pointer;
}

.mfsa-ui-view-toggle,
.mfsa-view-toggles {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: stretch;
    gap: 2px;
    margin: 0;
}

.mfsa-ui-view-button,
.mfsa-view-toggles .view-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--mfsa-ui-control-height);
    min-width: var(--mfsa-ui-control-height);
    min-height: var(--mfsa-ui-control-height);
    margin: 0;
    padding: 8px;
    color: var(--mfsa-ui-text);
    background: var(--mfsa-ui-surface);
    border: 1px solid var(--mfsa-ui-border);
    border-radius: var(--mfsa-ui-radius);
    box-shadow: none;
    cursor: pointer;
}

.mfsa-ui-view-button:hover,
.mfsa-ui-view-button:focus-visible,
.mfsa-view-toggles .view-btn:hover,
.mfsa-view-toggles .view-btn:focus-visible {
    color: #ffffff;
    background: var(--mfsa-ui-teal-dark);
    border-color: var(--mfsa-ui-teal-dark);
}

.mfsa-ui-view-button[aria-pressed="true"],
.mfsa-ui-view-button.is-active,
.mfsa-view-toggles .view-btn.active {
    color: #ffffff;
    background: var(--mfsa-ui-teal);
    border-color: var(--mfsa-ui-teal);
}

.mfsa-ui-view-button .dashicons,
.mfsa-view-toggles .view-btn .dashicons {
    width: 20px;
    height: 20px;
    margin: 0;
    color: currentColor;
    font-size: 20px;
    line-height: 1;
}

.mfsa-input-wrap input:focus-visible,
.mfsa-input-wrap select:focus-visible,
.mfsa-ui-field input:focus-visible,
.mfsa-ui-field select:focus-visible,
.mfsa-ui-view-button:focus-visible,
.mfsa-view-toggles .view-btn:focus-visible {
    outline: 3px solid var(--mfsa-ui-focus);
    outline-offset: 2px;
}

@media (max-width: 980px) {
    .mfsa-ui-toolbar,
    form.mfsa-standard-toolbar {
        align-items: flex-start;
        flex-wrap: wrap;
    }

    .mfsa-ui-toolbar__end,
    .mfsa-toolbar-right {
        flex-wrap: wrap;
        justify-content: flex-start;
        width: 100%;
    }

    .mfsa-ui-search,
    .search-wrap {
        max-width: none;
    }
}

@media (max-width: 640px) {
    .mfsa-ui-toolbar__start,
    .mfsa-toolbar-left,
    .mfsa-ui-toolbar__end,
    .mfsa-toolbar-right {
        width: 100%;
    }

    .mfsa-ui-search,
    .search-wrap,
    .mfsa-ui-sort,
    .sort-wrap {
        flex: 1 1 100%;
        width: 100%;
        max-width: none;
    }
}