/* Custom styles for table filter popover and tri-state toggle */

.filter-icon-btn .mud-badge-dot {
    top: 2px;
    right: 2px;
}

.mud-table-head th {
    padding-top: 12px !important;
    overflow: visible;
}

.mud-table-head {
    overflow: visible;
}

    .mud-table-head tr {
        overflow: visible;
    }

.filter-popover .mud-popover-paper {
    border-radius: 10px;
    box-shadow: 0 4px 24px rgba(30,40,90,0.13);
    overflow: hidden;
}

.filter-item-selected {
    background: rgba(var(--mud-palette-primary-rgb, 25,118,210), 0.10) !important;
}

/* Override MudBlazor's default selected/active states in filter popovers */
.filter-popover .mud-list-item.mud-selected,
.filter-popover .mud-list-item:active,
.filter-popover .mud-list-item.mud-list-item-clickable:active {
    background: transparent !important;
}

.filter-popover .mud-list-item.filter-item-selected,
.filter-popover .mud-list-item.filter-item-selected:active {
    background: rgba(var(--mud-palette-primary-rgb, 25,118,210), 0.10) !important;
}

.filter-count-header {
    font-size: 12px;
    font-weight: 700;
    color: var(--mud-palette-text-primary);
}

    .filter-count-header span {
        color: var(--mud-palette-primary);
    }

/* Requirements filter rows */
.req-filter-row {
    display: flex;
    align-items: flex-start;
    padding: 8px 14px;
    gap: 10px;
    border-bottom: 1px solid var(--mud-palette-divider);
}

    .req-filter-row:last-child {
        border-bottom: none;
    }

/* Tri-state toggle styling */
.req-toggle {
    flex: 1;
}

    .req-toggle .mud-toggle-group {
        border-radius: 8px;
        padding: 2px;
        background: rgba(0,0,0,0.04);
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 4px;
    }

    .req-toggle .mud-toggle-item {
        border-radius: 6px !important;
        font-weight: 600;
        font-size: 12px;
        padding: 4px 8px;
        white-space: nowrap;
        border: 1px solid var(--mud-palette-lines-default) !important;
        margin: 0 2px 4px 0;
    }

        .req-toggle .mud-toggle-item.mud-selected {
            background: var(--mud-palette-primary) !important;
            color: white !important;
        }