/* Compact category selectors shared by the student and lecturer web portals. */
.board-filter-toolbar { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; min-width: 0; margin-bottom: 12px; }
.board-filter-toolbar:empty { display: none; }
.board-filter-toolbar .board-type-filters { gap: 5px; padding: 0; }
.board-filter-toolbar .board-type-filters button { min-height: 32px; padding: 5px 10px; border-radius: 8px; color: var(--color-text-secondary); }
.board-filter-toolbar .board-type-filters button.is-selected { border-color: color-mix(in srgb, var(--aurelia-brand) 22%, var(--color-border)); color: var(--aurelia-brand); background: var(--aurelia-wash); }
.board-filter-toolbar > .portal-board-filter { margin-inline-start: 0; }
.portal-board-filter {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 0;
    flex: 0 1 264px;
    width: 264px;
    max-width: 100%;
    min-width: 0;
    min-height: 36px;
    padding: 0 5px 0 0;
    border: 1px solid var(--color-border, #e5e8ed);
    border-radius: 9px;
    background: linear-gradient(150deg, #fff, var(--color-surface-subtle, #f7f8fa));
    box-shadow: inset 0 1px #fff, 0 1px 3px #20352b04;
    transition: border-color 150ms ease, box-shadow 150ms ease, background 150ms ease;
}
.portal-board-filter:hover { border-color: color-mix(in srgb, var(--aurelia-brand) 22%, var(--color-border)); }
.portal-board-filter:has(.portal-board-filter__clear) { border-color: color-mix(in srgb, var(--aurelia-brand) 20%, var(--color-border)); background: var(--aurelia-wash); }
.portal-board-filter:focus-within, .portal-board-filter.is-open { border-color: color-mix(in srgb, var(--aurelia-brand) 48%, var(--color-border)); box-shadow: 0 0 0 3px var(--aurelia-wash); }
.portal-board-filter__menu { display: block; flex: 1 1 0; min-width: 0; }
.portal-board-filter__menu .mud-menu-activator { display: block; width: 100%; }
.portal-board-filter__icon { display: inline-flex; align-items: center; flex: 0 0 16px; color: var(--aurelia-brand); }
.portal-board-filter__icon .mud-icon-root { width: 16px; height: 16px; }
.portal-board-filter__trigger {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    min-width: 0;
    min-height: 34px;
    padding: 5px 4px 5px 10px;
    border: 0;
    border-radius: 7px;
    background: transparent;
    color: var(--color-text-primary, #303238);
    font: inherit;
    font-size: 11px;
    font-weight: 500;
    line-height: 1.5;
    text-align: start;
    cursor: pointer;
}
.portal-board-filter__trigger:focus { outline: none; }
.portal-board-filter__caption { flex: 1 1 0; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.portal-board-filter__count { display: inline-flex; align-items: center; justify-content: center; min-width: 23px; height: 20px; padding: 0 5px; border: 1px solid var(--color-border, #e5e8ed); border-radius: 6px; background: #fff; color: var(--aurelia-brand); font-size: 10px; font-weight: 600; font-variant-numeric: tabular-nums; }
.portal-board-filter__chevron { display: inline-flex; flex: 0 0 16px; color: var(--color-text-muted); transition: transform 160ms ease; }
.portal-board-filter__chevron .mud-icon-root { width: 16px; height: 16px; }
.portal-board-filter.is-open .portal-board-filter__chevron { transform: rotate(180deg); }
.portal-board-filter__clear { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 26px; width: 26px; height: 26px; padding: 0; border: 0; border-radius: 6px; background: transparent; color: var(--color-text-muted); cursor: pointer; }
.portal-board-filter__clear .mud-icon-root { width: 14px; height: 14px; }
.portal-board-filter__clear:hover { color: var(--aurelia-brand); background: var(--aurelia-tint); }
.portal-board-filter__clear:focus-visible { outline: 2px solid var(--aurelia-brand); outline-offset: 1px; }

/* MudBlazor renders popovers outside the feed; keep their styling shared and global. */
.mud-popover.portal-board-filter-popover {
    width: 296px;
    /* The library sets unrestricted width and a fixed maximum height inline. */
    max-width: calc(100vw - 32px) !important;
    max-height: min(360px, calc(100dvh - 32px)) !important;
    margin-top: 5px;
    padding: 4px;
    border: 1px solid color-mix(in srgb, var(--aurelia-brand) 10%, #e5e8ed);
    border-radius: 11px;
    background: #fff;
    box-shadow: 0 16px 44px #24212c14, 0 3px 10px #24212c08;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: #d8d9de transparent;
}
.mud-popover.portal-board-filter-popover[data-mudpopover-flip^="top"] { margin-top: -5px; }
.portal-board-filter-popover .portal-board-filter-list { padding: 0; }
.portal-board-filter-popover .portal-board-filter__option {
    display: flex;
    align-items: center;
    gap: 7px;
    min-height: 34px;
    margin: 0;
    padding: 6px 8px;
    border-radius: 7px;
    color: var(--color-text-primary, #303238);
    font-family: inherit;
    white-space: normal;
    transition: background 130ms ease, color 130ms ease;
}
.portal-board-filter-popover .portal-board-filter__option:hover,
.portal-board-filter-popover .portal-board-filter__option:focus-visible { background: var(--aurelia-wash, #faf5f5); }
.portal-board-filter-popover .portal-board-filter__option:focus-visible { outline: 2px solid var(--aurelia-brand, #680b0e); outline-offset: -2px; }
.portal-board-filter-popover .portal-board-filter__option.is-selected { background: var(--aurelia-tint, #f6eaea); color: var(--aurelia-brand, #680b0e); }
.portal-board-filter-popover .portal-board-filter__option .mud-menu-item-text { display: flex; align-items: center; flex: 1 1 0; gap: 7px; min-width: 0; margin: 0; }
.portal-board-filter__selection { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 14px; width: 14px; height: 14px; }
.portal-board-filter__selection .mud-icon-root { width: 14px; height: 14px; }
.portal-board-filter__option-copy { display: flex; flex: 1 1 0; align-items: baseline; gap: 5px; min-width: 0; }
.portal-board-filter__option-caption { min-width: 0; overflow: hidden; font-size: 11px; font-weight: 500; line-height: 1.5; text-overflow: ellipsis; white-space: nowrap; }
.portal-board-filter__option-parent { flex: 0 0 auto; color: var(--color-text-muted, #818895); font-size: 9px; line-height: 1.5; white-space: nowrap; }
.portal-board-filter__option-parent::before { content: "·"; margin-inline-end: 5px; }
.portal-board-filter__option-count { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; min-width: 23px; height: 20px; padding: 0 5px; border-radius: 5px; background: var(--color-surface-subtle, #f7f8fa); color: var(--color-text-secondary, #69707c); font-size: 10px; font-weight: 500; font-variant-numeric: tabular-nums; }
.portal-board-filter__option.is-selected .portal-board-filter__option-count { background: #ffffffc4; color: var(--aurelia-brand, #680b0e); }
.portal-board-filter-popover .portal-board-filter__divider { margin: 3px 8px; border-color: var(--color-border, #e5e8ed); }
.portal-overview-section-head__tools { display: flex; align-items: center; justify-content: flex-end; gap: 8px; min-width: 0; margin-inline-start: auto; }
.portal-overview-section-head__tools .portal-board-filter { flex-basis: 240px; width: 240px; }
@media (max-width: 600px) {
    .board-filter-toolbar { gap: 8px; margin-bottom: 12px; }
    .board-filter-toolbar > .portal-board-filter { flex-basis: 100%; width: 100%; }
    .portal-board-filter { min-height: 42px; }
    .portal-board-filter__trigger { min-height: 40px; font-size: 12px; }
    .mud-popover.portal-board-filter-popover { width: 296px; }
    .portal-overview-section-head__tools { flex: 1 1 100%; justify-content: space-between; }
    .portal-overview-section-head__tools .portal-board-filter { flex: 1 1 0; width: auto; }
}
@media (pointer: coarse) {
    .portal-board-filter { min-height: 44px; }
    .portal-board-filter__trigger { min-height: 42px; font-size: 12px; }
    .portal-board-filter__clear { flex-basis: 32px; width: 32px; height: 36px; }
    .portal-board-filter-popover .portal-board-filter__option { min-height: 44px; }
    .portal-board-filter__option-caption { font-size: 12px; }
    .board-filter-toolbar .board-type-filters button { min-height: 40px; }
}
@media (prefers-reduced-motion: reduce) {
    .portal-board-filter, .portal-board-filter__chevron, .portal-board-filter-popover .portal-board-filter__option { transition: none; }
}