/* Shared course list/map filters: one panel moves between the sidebar and mobile dialog. */
/* Keep result messages in normal flow; the theme's negative grid margin overlaps the summary. */
body:is([data-site-page="course-list"], [data-site-page="course-map"]) [data-site-section="results"] > .rbt-course-grid-column {
    margin-top: 0;
    row-gap: 30px;
}

body:is([data-site-page="course-list"], [data-site-page="course-map"]) [data-site-section="results"] > .rbt-course-grid-column > .course-grid-3 {
    margin-top: 0;
}

body:is([data-site-page="course-list"], [data-site-page="course-map"]) [data-site-section="results"] > .rbt-course-grid-column > :is(p, [data-course-load-error]) {
    flex: 0 0 100%;
    min-width: 0;
    margin: 0;
    padding: 16px 15px;
    overflow-wrap: anywhere;
}

#course-filter-panel,
#course-filter-dialog,
.course-filter-mobile-bar {
    --cf-surface: var(--sa-surface, #fff);
    --cf-text: var(--sa-text, var(--course-text, #1e293b));
    --cf-primary: var(--sa-primary, var(--course-primary, #4f46e5));
    --cf-border: var(--course-border, #e2e8f0);
    --cf-subtle: color-mix(in srgb, var(--cf-primary) 8%, var(--cf-surface));
    color: var(--cf-text);
    font-family: var(--course-font);
    font-size: 1.5rem;
    line-height: 1.6;
}
#course-filter-panel {
    padding: 1.6rem;
    display: flex;
    flex-direction: column;
    min-width: 0;
    background: var(--cf-surface);
}
#course-filter-panel [hidden],
#course-filter-mobile-bar[hidden] { display: none !important; }
.course-filter-search { flex: 0 0 auto; padding-bottom: 1.2rem; }
#course-filter-panel #searchInput {
    background: var(--cf-surface);
    color: var(--cf-text);
    border: 1px solid var(--cf-border);
    font-size: 1.6rem;
    box-shadow: none;
    border-radius: 8px;
    width: 100%;
}
#course-filter-panel .search-btn { color: var(--cf-primary); min-width: 40px; min-height: 40px; }
.course-filter-scroll { min-height: 0; }
/* Keep the filter scroll affordance quiet until the user interacts with it. */
#course-filter-panel .course-filter-scroll,
#course-filter-dialog-body {
    --cf-scrollbar-thumb: transparent;
    scrollbar-width: thin;
    scrollbar-color: var(--cf-scrollbar-thumb) transparent;
}
#course-filter-panel .course-filter-scroll:is(:hover, :focus-within),
#course-filter-dialog-body:is(:hover, :focus-within) {
    --cf-scrollbar-thumb: color-mix(in srgb, var(--cf-text) 12%, transparent);
}
/* Let Chromium/WebKit use the narrow custom scrollbar instead of native arrows. */
@supports selector(::-webkit-scrollbar) {
    #course-filter-panel .course-filter-scroll,
    #course-filter-dialog-body {
        scrollbar-width: auto;
        scrollbar-color: auto;
    }
}
#course-filter-panel .course-filter-scroll::-webkit-scrollbar,
#course-filter-dialog-body::-webkit-scrollbar { width: 3px; height: 3px; }
#course-filter-panel .course-filter-scroll::-webkit-scrollbar-track,
#course-filter-dialog-body::-webkit-scrollbar-track { background: transparent; }
#course-filter-panel .course-filter-scroll::-webkit-scrollbar-thumb,
#course-filter-dialog-body::-webkit-scrollbar-thumb {
    border-radius: 99px;
    background: var(--cf-scrollbar-thumb);
}
#course-filter-panel .course-filter-scroll::-webkit-scrollbar-button,
#course-filter-dialog-body::-webkit-scrollbar-button { display: none; width: 0; height: 0; }
@media (forced-colors: active) {
    #course-filter-panel .course-filter-scroll,
    #course-filter-dialog-body { scrollbar-width: auto; scrollbar-color: auto; }
    #course-filter-panel .course-filter-scroll::-webkit-scrollbar,
    #course-filter-dialog-body::-webkit-scrollbar { width: 12px; height: 12px; }
    #course-filter-panel .course-filter-scroll::-webkit-scrollbar-thumb,
    #course-filter-dialog-body::-webkit-scrollbar-thumb { background: CanvasText; }
}
#course-filter-panel .rbt-single-widget { margin-bottom: 0.6rem; padding-bottom: 0.8rem; }
#course-filter-panel .rbt-widget-title { margin-bottom: 0.3rem; }
.course-filter-group-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    min-height: 44px;
    gap: 0.6rem;
    padding: 0.4rem 0;
    background: transparent;
    color: var(--cf-text);
    border: 0;
    text-align: left;
    font: inherit;
    font-weight: 700;
}
.course-filter-group-toggle i { flex: none; transition: transform 0.15s; }
.course-filter-group-toggle[aria-expanded="false"] i { transform: rotate(-90deg); }
#course-filter-panel .rbt-sidebar-list-wrapper li { margin: 0; padding: 0; position: relative; }
#course-filter-panel .rbt-sidebar-list-wrapper li label {
    display: block;
    min-height: 40px;
    margin: 0;
    padding: 0.8rem 3.6rem 0.8rem 2.8rem;
    font-size: 1.4rem;
    line-height: 1.6;
    color: var(--cf-text);
    white-space: normal;
    overflow: visible;
    overflow-wrap: anywhere;
    text-overflow: clip;
    border-radius: 6px;
}
#course-filter-panel .rbt-sidebar-list-wrapper label:hover { background: var(--cf-subtle); }
#course-filter-panel .rbt-sidebar-list-wrapper label::before,
#course-filter-panel .rbt-sidebar-list-wrapper label::after { display: none; }
#course-filter-panel input[type="checkbox"] {
    position: absolute;
    opacity: 1;
    left: 1px;
    top: 1.2rem;
    width: 18px;
    height: 18px;
    padding: 0;
    margin: 0;
    accent-color: var(--cf-primary);
    z-index: 1;
}
#course-filter-panel .rbt-lable.count {
    position: absolute;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    right: 0;
    top: 0.8rem;
    min-width: 2.7rem;
    margin: 0;
    padding: 0.1rem 0.3rem;
    border-radius: 5px;
    background: var(--cf-subtle);
    color: var(--cf-text);
    font-size: 1.2rem;
    font-variant-numeric: tabular-nums;
    text-align: center;
}
#course-filter-panel .rbt-show-more-btn {
    background: transparent;
    border: 0;
    color: var(--cf-primary);
    min-height: 40px;
    width: 100%;
    margin-top: 0;
    text-align: left;
    font-size: 1.4rem;
}
#course-lesson-range {
    display: block;
    width: 100%;
    min-width: 0;
    height: 40px;
    padding: 0;
    accent-color: var(--cf-primary);
    cursor: pointer;
}
#course-lesson-range:disabled { cursor: default; }
#course-filter-panel .lesson-slider-labels { margin-top: 0; color: var(--cf-text); }
.course-filter-selection { padding-bottom: 1.2rem; margin-bottom: 0.8rem; border-bottom: 1px solid var(--cf-border); }
.course-filter-selection-heading { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; }
#course-filter-clear-all { padding: 0.4rem 0; min-height: 40px; border: 0; background: transparent; color: var(--cf-primary); font-size: 1.4rem; }
.course-filter-chips { display: flex; gap: 0.6rem; flex-wrap: wrap; }
.course-filter-chip {
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.6rem;
    max-width: 100%;
    min-height: 40px;
    padding: 0.5rem 0.8rem;
    border: 1px solid var(--cf-border);
    border-radius: 8px;
    background: var(--cf-subtle);
    color: var(--cf-text);
    font-size: 1.3rem;
    line-height: 1.5;
    text-align: left;
}
.course-filter-chip span:first-child { min-width: 0; overflow-wrap: anywhere; }
.course-filter-chip span:last-child { flex: none; font-size: 1.8rem; }
#course-filter-panel :is(button, input):focus-visible,
#course-filter-dialog button:focus-visible,
#course-filter-trigger:focus-visible { outline: 2px solid var(--cf-primary); outline-offset: 2px; }

.course-filter-dialog:not([open]) { display: none; }
.course-filter-dialog[open] {
    display: grid;
    grid-template-rows: auto minmax(0, 1fr) auto;
    position: fixed;
    inset: auto 0 0;
    margin: 0;
    width: 100%;
    max-width: none;
    height: 90vh;
    height: 90dvh;
    max-height: 90vh;
    max-height: 90dvh;
    padding: 0;
    border: 1px solid var(--cf-border);
    border-bottom: 0;
    border-radius: 18px 18px 0 0;
    background: var(--cf-surface);
    overflow: hidden;
    box-shadow: 0 -4px 30px rgba(0, 0, 0, 0.18);
}
.course-filter-dialog::backdrop { background: rgba(15, 23, 42, 0.46); }
.course-filter-dialog-header { display: flex; align-items: center; justify-content: space-between; padding: 1.2rem 1.6rem; gap: 1rem; border-bottom: 1px solid var(--cf-border); }
#course-filter-dialog-title { margin: 0; color: var(--cf-text); font-size: 2rem; line-height: 1.4; }
#course-filter-dialog-hint { margin: 0.3rem 0 0; color: var(--cf-text); font-size: 1.3rem; line-height: 1.5; }
#course-filter-close { width: 44px; height: 44px; flex: none; border: 0; border-radius: 8px; background: var(--cf-subtle); color: var(--cf-text); font-size: 2rem; }
.course-filter-dialog-body { min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
.course-filter-dialog #course-filter-panel { max-height: none; border-radius: 0; box-shadow: none; }
.course-filter-dialog .course-filter-scroll { overflow: visible; }
.course-filter-dialog-footer { padding: 0.8rem 1.6rem calc(1.2rem + env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--cf-border); background: var(--cf-surface); }
#course-filter-status { margin: 0 0 0.5rem; color: var(--cf-text); font-size: 1.3rem; line-height: 1.5; }
.course-filter-dialog-footer > div { display: flex; gap: 1rem; }
.course-filter-dialog-footer button { min-height: 44px; padding: 0.8rem 1.2rem; border: 1px solid var(--cf-border); border-radius: 8px; font-size: 1.6rem; line-height: 1.5; }
#course-filter-clear { background: var(--cf-surface); color: var(--cf-text); }
#course-filter-clear:disabled { opacity: 0.55; cursor: default; }
#course-filter-results { flex: 1; background: var(--cf-primary); color: var(--sa-on-primary, #fff); border-color: var(--cf-primary); }
body.course-filter-dialog-open { overflow: hidden !important; }

@media (min-width: 992px) {
    #course-filter-sidebar { align-self: stretch; }
    #course-filter-panel { position: sticky; top: 10rem; max-height: calc(100vh - 12rem); max-height: calc(100dvh - 12rem); }
    #course-filter-panel .course-filter-scroll { overflow-y: auto; overscroll-behavior: contain; scrollbar-gutter: stable; }
    .course-filter-mobile-bar { display: none; }
}
@media (max-width: 991px) {
    body.course-filters-enhanced { padding-bottom: calc(8rem + env(safe-area-inset-bottom, 0px)); }
    body.course-filters-enhanced #course-filter-sidebar { display: contents; }
    body.course-filters-enhanced #course-filter-sidebar > #course-filter-panel { display: none; }
    .course-filter-mobile-bar {
        position: fixed;
        inset: auto 0 0;
        z-index: 1030;
        padding: 1rem 1.6rem calc(1rem + env(safe-area-inset-bottom, 0px));
        background: var(--cf-surface);
        border-top: 1px solid var(--cf-border);
        box-shadow: 0 -3px 18px rgba(0, 0, 0, 0.08);
    }
    #course-filter-trigger { display: flex; align-items: center; justify-content: center; gap: 0.8rem; width: 100%; min-height: 48px; border: 1px solid var(--cf-primary); border-radius: 10px; padding: 0.8rem 1.2rem; font-size: 1.6rem; font-weight: 600; background: var(--cf-primary); color: var(--sa-on-primary, #fff); }
    #course-filter-selected-count { padding: 0.1rem 0.6rem; border-radius: 5px; background: rgba(255, 255, 255, 0.18); font-size: 1.3rem; }
    body.course-filters-enhanced .rbt-progress-parent { bottom: calc(8rem + env(safe-area-inset-bottom, 0px)); }
}