/*
 * MudBlazor framework class overrides.
 * Only put rules here that target MudBlazor's own .mud-* classes for theming
 * or fixing default-behavior issues. App-specific styling goes in scoped
 * .razor.css files; reusable utilities live in utilities.css; grid-specific
 * rules live in data-grids.css; media queries live in responsive.css.
 */

.mud-toolbar-gutters {
    padding-left: 16px;
    padding-right: 8px;
}

/*
 * MudBlazor's .mud-toolbar always applies padding: 8px, even on the dense
 * variant. In the dense (48px) app bar the 48px icon buttons then extend
 * 8px below the bar. Strip the vertical padding on the dense toolbar so
 * the icon buttons fill the bar instead of overhanging it.
 */
.mud-appbar .mud-toolbar-dense {
    padding-top: 0;
    padding-bottom: 0;
}

/* Highlight nested tables so they stand out from their parent row */
.mud-table-row .mud-table-cell:has(.mud-table) {
    background-color: var(--mud-palette-background-grey, #f0f0f0);
}

/*
 * MudDataGrid's HideSmall hides columns by adding .mud-table-cell-hide which
 * sets visibility: collapse. That works for display: table-cell but the
 * framework also applies display: flex to .mud-table-cell, where collapse
 * makes the cell invisible without removing its width contribution. The
 * table container (width: max-content) then still sizes to include the
 * hidden columns, so the data grid scrolls horizontally even when every
 * visible column would otherwise fit. Force display: none so the hidden
 * columns drop out of layout entirely.
 *
 * IMPORTANT: MudBlazor adds the .mud-table-cell-hide class to a column
 * permanently when HideSmall="true", and only hides it at <600px via its
 * own media query. We must scope this override to the same breakpoint or
 * we will hide the column on desktop too.
 */
@media (max-width: 599.95px) {
    .mud-table-cell.mud-table-cell-hide {
        display: none;
    }
}

/*
 * Notification bell unread-count badge: MudBadge's default origin=TopRight +
 * Overlap=true pushes the badge half-outside the wrapped icon (translate
 * 50%, -50%). Inside the 48px dense AppBar that means the top half of the
 * badge sits above the bar and gets clipped. Anchor the badge inside the
 * icon's top-right corner instead so it stays visible and visually attached
 * to the bell.
 */
.mud-appbar .notification-bell-badge .mud-badge {
    top: 6px !important;
    right: 8px !important;
    left: auto !important;
    bottom: auto !important;
    transform: none !important;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    font-size: 10px;
    line-height: 16px;
}