/* Root wrapper: align with MudPaper / MudBlazor look */
.mud-pivot-root {
    font-family: var(--mud-typography-body1-font-family, Roboto, "Helvetica Neue", Arial, sans-serif);
    font-size: 0.875rem;
    color: rgba(0, 0, 0, 0.87);
    overflow: auto;
    margin-top: 8px; /* pushes it nicely under the toggle buttons */
    width: 100%;
}

    /* Base pivot table styling */
    .mud-pivot-root .pvtTable {
        width: 100%;
        border-collapse: collapse;
        border-spacing: 0;
        table-layout: auto;
        background-color: #fff;
    }

        /* Header cells (columns & row headers top-left) */
        .mud-pivot-root .pvtTable th {
            padding: 6px 12px;
            border-bottom: 1px solid rgba(0, 0, 0, 0.12);
            border-right: 1px solid rgba(0, 0, 0, 0.06);
            background-color: rgba(28, 58, 140, 0.08); /* soft primary-like */
            text-align: left;
            font-weight: 500;
            white-space: nowrap;
        }

        /* Data cells */
        .mud-pivot-root .pvtTable td {
            padding: 6px 12px;
            border-bottom: 1px solid rgba(0, 0, 0, 0.06);
            border-right: 1px solid rgba(0, 0, 0, 0.03);
            text-align: right;
        }

    /* Row label column cells (ItemNrDescription, etc.) */
    .mud-pivot-root .pvtRowLabel ,
    .mud-pivot-root .pvtSubtotalRowLabel ,
    .mud-pivot-root .pvtTotalLabel {
        text-align: left;
        vertical-align: top !important;
        white-space: normal !important;
        padding-top: 4px !important;
    }

    /* Striping (like MudTable Dense + hover) */
    .mud-pivot-root .pvtTable tbody tr:nth-child(even):not(.pvtGrandTotal):not(.pvtTotal) {
        background-color: rgba(0, 0, 0, 0.02);
    }

    /* Hover state */
    .mud-pivot-root .pvtTable tbody tr:hover:not(.pvtGrandTotal):not(.pvtTotal) {
        background-color: rgba(28, 58, 140, 0.04);
    }

    /* Subtotals: bold + soft primary background + colored text */
    .mud-pivot-root .pvtSubtotal,
    .mud-pivot-root .pvtSubtotalRowLabel {
        font-weight: 600;
        background-color: rgba(28, 58, 140, 0.06); /* Mud primary-ish */
        color: rgba(28, 58, 140, 0.9);
    }

    /* Grand totals: stronger */
    .mud-pivot-root .pvtTotal,
    .mud-pivot-root .pvtGrandTotal,
    .mud-pivot-root .pvtTotalLabel {
        font-weight: 700;
        background-color: rgba(28, 58, 140, 0.12);
        color: rgba(0, 0, 0, 0.87);
    }

    /* Drag & drop UI top area: make it look like Mud inputs/chips */
    .mud-pivot-root .pvtUi {
        font-size: 0.875rem;
    }

    .mud-pivot-root .pvtAxisContainer,
    .mud-pivot-root .pvtVals,
    .mud-pivot-root .pvtRendererArea {
        border-radius: 4px;
        border: 1px solid rgba(0, 0, 0, 0.12);
        padding: 4px 6px;
        background-color: #fafafa;
    }

    /* “Field” pills (draggable fields) */
    .mud-pivot-root .pvtAttr {
        display: inline-flex;
        align-items: center;
        padding: 2px 8px;
        margin: 2px;
        border-radius: 999px;
        border: 1px solid rgba(0, 0, 0, 0.12);
        background-color: #fff;
        cursor: grab;
        user-select: none;
    }

        /* Field pill hover */
        .mud-pivot-root .pvtAttr:hover {
            border-color: rgba(28, 58, 140, 0.7);
            box-shadow: 0 0 0 1px rgba(28, 58, 140, 0.15);
        }

    /* Dropdowns for renderer/aggregator – mimic MudSelect */
    .mud-pivot-root select {
        border-radius: 4px;
        border: 1px solid rgba(0, 0, 0, 0.23);
        padding: 4px 28px 4px 8px;
        font-size: 0.875rem;
        line-height: 1.5;
        background-color: #fff;
    }

    /* Numbers: keep them aligned and not too wide */
    .mud-pivot-root .pvtVal,
    .mud-pivot-root .pvtTotal,
    .mud-pivot-root .pvtGrandTotal {
        font-variant-numeric: tabular-nums;
    }

    /* Small chips for +/- where used by subtotal plugin */
    .mud-pivot-root .pvtCollapsible {
        cursor: pointer;
        padding-right: 4px;
    }

    /* Make top controls area breathe a bit */
    .mud-pivot-root .pvtUiCell {
        padding: 4px 4px;
    }