/* ==========================================================================
   New UI: Roster filter rails (shared/components/*-filters) in the asr-rail look.
   Every selector under .nui-on. Reusable pieces belong in new-ui-kit.css.
   ========================================================================== */

/* ---- rail root: variables the asr-* family reads (normally set on .asr-page) -- */
.nui-on .nrf-rail {
    --asr-blue: var(--aa-blue, #0074C5);
    --asr-blue-soft: rgba(0, 116, 197, .10);
    --asr-teal: var(--aa-teal, #00AEC4);
    --asr-ink: var(--dc-ink, #222831);
    --asr-muted: var(--dc-muted, #7B8E92);
    --asr-text: var(--aa-grey-700, #4A5358);
    --asr-border: var(--dc-border, #E3E8EB);
    --asr-bg: var(--aa-off-white, #F7F9FA);
    --asr-white: #fff;
    --asr-radius: 14px;
    --asr-radius-sm: 8px;
    --asr-font: var(--font-display, "Montserrat", sans-serif);
    font-family: var(--asr-font);
    color: var(--asr-ink);
    flex: 1 1 auto;
    width: 100%;
    height: 100%;
    min-height: 0;
    overflow: visible;
}
/* the host <aside class="page-sidebar overflauto"> would clip the edge toggle */
.nui-on aside:has(> .nrf-rail) { overflow: visible !important; }
/* collapsed: the aside shrinks to the 44px strip and the content takes the rest */
.nui-on aside.page-sidebar:has(> .nrf-rail.is-collapsed) { width: 53px; transition: width .18s ease; }
.nui-on aside.page-sidebar:has(> .nrf-rail.is-collapsed) + .page-content-wSidebar,
.nui-on aside.page-sidebar:has(> .nrf-rail.is-collapsed) + main.page-content-wSidebar { width: calc(100% - 53px); }
.nui-on .nrf-rail.is-collapsed { flex-basis: 44px; }

/* ---- search box + match row ------------------------------------------------ */
.nui-on .nrf-rail .nrf-search { position: relative; margin: 8px 6px 4px; }
.nui-on .nrf-rail .nrf-search > i { position: absolute; left: 11px; top: 11px; font-size: 12px; color: var(--asr-muted); pointer-events: none; }
.nui-on .nrf-rail .nrf-search > .asr-input { padding-left: 30px; }
.nui-on .nrf-rail .nrf-search > button[type="submit"] { position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; padding: 0; border: 0; }
.nui-on .nrf-rail .nrf-match {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px 12px;
    margin: 0 6px 6px;
    padding: 6px 8px 10px;
    border-bottom: 1px solid var(--asr-border);
    font-size: 12px;
    color: var(--asr-muted);
}
.nui-on .nrf-rail .nrf-match label { display: inline-flex; align-items: center; gap: 5px; margin: 0; font-weight: 600; color: var(--asr-text); cursor: pointer; }
.nui-on .nrf-rail .nrf-match input[type="radio"] { margin: 0; accent-color: var(--asr-blue); cursor: pointer; }

/* ---- toggle-button inside an asr-toggle-row renders as the asr-switch -------- */
.nui-on .nrf-rail .asr-toggle-row { margin: 0; padding: 9px 8px; border-bottom: 1px solid var(--asr-border); }
.nui-on .nrf-rail .asr-toggle-row .btn-toggle {
    flex: 0 0 auto;
    width: 32px;
    height: 18px;
    min-width: 0;
    padding: 0 !important;
    border: 0;
    background: transparent;
    box-shadow: none;
    border-radius: 9px;
}
.nui-on .nrf-rail .asr-toggle-row .btn-toggle .tbLabel { display: none; }
.nui-on .nrf-rail .asr-toggle-row .btn-toggle-bg { background: var(--asr-border); box-shadow: none; }
.nui-on .nrf-rail .asr-toggle-row .btn-toggle-knob:before {
    aspect-ratio: auto;
    top: 2px;
    width: 14px;
    height: 14px;
    background: #fff;
    box-shadow: 0 1px 2px rgba(34, 40, 49, .25);
}
.nui-on .nrf-rail .asr-toggle-row .btn-toggle-cbox:checked ~ .btn-toggle-bg { background: var(--asr-blue); box-shadow: none; }
.nui-on .nrf-rail .asr-toggle-row .btn-toggle-cbox:checked ~ .btn-toggle-knob:before { background: #fff; }

/* ---- sections: options lists, selects, inline inputs ----------------------- */
.nui-on .nrf-rail .asr-options-form select.form-control,
.nui-on .nrf-rail .asr-options-form input.form-control { width: 100%; height: 34px; border-radius: 8px; font-size: 12.5px; box-shadow: none; }
.nui-on .nrf-rail .asr-options-form .select2-container { width: 100% !important; }
.nui-on .nrf-rail .nrf-scroll { max-height: 260px; overflow-y: auto; }
.nui-on .nrf-rail .asr-option { margin: 0; font-weight: 500; cursor: pointer; }
.nui-on .nrf-rail .asr-option > .asr-option-label { white-space: normal; }
.nui-on .nrf-rail .asr-option > .nrf-warn { font-size: 11px; }
.nui-on .nrf-rail .asr-option > .nrf-warn.is-text-warning { color: #B7791F; }
.nui-on .nrf-rail .asr-option > .nrf-warn.is-text-danger { color: #C0392B; }
.nui-on .nrf-rail .asr-option > .nrf-warn.is-text-success { color: #2F855A; }
.nui-on .nrf-rail .asr-field-label { margin: 2px 0 -4px; }
.nui-on .nrf-rail .asr-rail-head .asr-btn { white-space: nowrap; }
.nui-on .nrf-rail .asr-rail-head a.asr-link { white-space: nowrap; }
.nui-on .nrf-rail .asr-rail-body { padding-bottom: 14px; }
.nui-on .nrf-rail .asr-btn-row { margin-top: 2px; }