/*
 * Admin report MudDataGrid styling.
 * Scoped by the .report-grid class added to the MudDataGrid in
 * Reports.razor. Blazor CSS isolation doesn't reach into MudBlazor
 * component markup, so we keep these rules global but namespaced by class.
 */

/* Numeric values stay on one line. */
.report-grid td.mud-table-cell {
    white-space: nowrap;
}

.report-grid .mud-table-root {
    width: min-content !important;
}

/* Let the long column titles wrap so each column is sized to its data
   (a small number) instead of its one-line header text. */
.report-grid th.mud-table-cell {
    min-width: 60px !important;
    white-space: normal !important;
    overflow-wrap: break-word !important;
    vertical-align: bottom;
}

.family-report-grid th.mud-table-cell:nth-child(n+3),
.family-report-grid td.mud-table-cell:nth-child(n+3),
.event-report-grid th.mud-table-cell:nth-child(n+2),
.event-report-grid td.mud-table-cell:nth-child(n+2),
.monthly-caregiver-report-grid th.mud-table-cell:nth-child(n+3),
.monthly-caregiver-report-grid td.mud-table-cell:nth-child(n+3) {
    width: 1% !important;
    min-width: 60px !important;
}

.family-report-grid th.mud-table-cell:nth-child(n+3),
.event-report-grid th.mud-table-cell:nth-child(n+2),
.monthly-caregiver-report-grid th.mud-table-cell:nth-child(n+3) {
    text-align: center !important;
}

.family-report-grid td.mud-table-cell:nth-child(n+3),
.event-report-grid td.mud-table-cell:nth-child(n+2),
.monthly-caregiver-report-grid td.mud-table-cell:nth-child(n+3) {
    text-align: center !important;
}

.family-report-grid th.mud-table-cell:nth-child(1),
.family-report-grid td.mud-table-cell:nth-child(1),
.monthly-caregiver-report-grid th.mud-table-cell:nth-child(1),
.monthly-caregiver-report-grid td.mud-table-cell:nth-child(1) {
    width: 140px !important;
    min-width: 120px !important;
    max-width: 140px !important;
}

.family-report-grid th.mud-table-cell:nth-child(2),
.family-report-grid td.mud-table-cell:nth-child(2),
.event-report-grid th.mud-table-cell:nth-child(1),
.event-report-grid td.mud-table-cell:nth-child(1),
.monthly-caregiver-report-grid th.mud-table-cell:nth-child(2),
.monthly-caregiver-report-grid td.mud-table-cell:nth-child(2) {
    width: 180px !important;
    min-width: 140px !important;
    max-width: 180px !important;
}

.report-grid th .sortable-column-header {
    white-space: normal !important;
    overflow-wrap: normal !important;
    word-break: normal !important;
    line-height: 1.25;
}

.family-report-grid th.mud-table-cell:nth-child(n+3) .sortable-column-header,
.event-report-grid th.mud-table-cell:nth-child(n+2) .sortable-column-header,
.monthly-caregiver-report-grid th.mud-table-cell:nth-child(n+3) .sortable-column-header {
    display: block;
    text-align: center !important;
    white-space: pre-line !important;
    overflow-wrap: normal !important;
    word-break: normal !important;
    line-height: 1.25;
}

/* Collapse the inner MudBlazor table-container scroll so the sticky Month
   cell binds to the outer scroll context (.family-report-grid itself) rather
   than the inner container which never overflows. */
.family-report-grid .mud-table-container {
    overflow: visible !important;
}

.family-report-grid th.family-report-sticky-cell,
.family-report-grid td.family-report-sticky-cell {
    position: sticky;
    left: 0;
    z-index: 2;
    background: var(--mud-palette-surface);
    box-shadow: 2px 0 4px rgba(0, 0, 0, 0.08);
}

/* Phone tweaks: stack the toolbar vertically and tighten cell text. */
@media (max-width: 599px) {
    .report-grid {
        margin-top: 8px;
    }
    .report-grid .mud-table-toolbar {
        flex-direction: column;
        align-items: stretch;
        height: auto;
        gap: 4px;
        padding: 8px;
    }
    .report-grid .mud-table-cell,
    .report-grid .mud-table-cell-header {
        padding: 4px 6px;
        font-size: 0.85rem;
    }
}