/* MudPivotContainer — unscoped fallback rules (scoped 版本在 MudPivotContainer.razor.css，
   带 ::deep + !important；这里保留不带 !important 的基础版本作为回退） */
.pivot-container {
    width: 100%;
    min-height: 500px;
    background-color: var(--mud-palette-surface);
    border-radius: 0;
    font-family: var(--mud-typography-default-family);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

/* 工具栏 — 内边距/高度由 MudBlazor 的 .mud-table-toolbar 提供，此处仅覆盖背景 */
.pivot-toolbar {
    background-color: var(--mud-palette-surface);
}

.pivot-toolbar .pivot-toolbar-icon-btn .mud-icon-root {
    color: var(--mud-palette-text-secondary);
    width: 20px;
    height: 20px;
    font-size: 20px;
}

.pivot-toolbar .pivot-toolbar-icon-btn:hover .mud-icon-root {
    color: var(--mud-palette-text-primary);
}

/* 主体布局 */
.pivot-body {
    display: flex;
    flex: 1;
    overflow: hidden;
}

/* 设计器面板 */
.pivot-designer-panel {
    width: 200px;
    background-color: var(--mud-palette-action-default-hover);
    overflow-y: auto;
    padding: 12px;
}

.designer-title {
    font-weight: 600;
    font-size: 0.875rem;
    color: var(--mud-palette-text-primary);
    margin-bottom: 8px;
}

.designer-section {
    margin-top: 12px;
}

.section-title {
    font-weight: 600;
    font-size: 0.75rem;
    color: var(--mud-palette-text-secondary);
    margin-bottom: 6px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.field-search {
    margin-bottom: 8px;
}

.field-search .mud-input-control {
    font-size: 0.8125rem;
}

.field-search input {
    background-color: var(--mud-palette-surface);
    color: var(--mud-palette-text-primary);
    font-size: 0.8125rem;
    padding: 6px 10px;
}

.field-list {
    min-height: 50px;
}

.field-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 6px 10px;
    background-color: var(--mud-palette-surface);
    border-radius: 4px;
    margin-bottom: 4px;
    border: 1px solid var(--mud-palette-divider);
    gap: 6px;
}

.field-item.assigned {
    background-color: var(--mud-palette-action-default-hover);
}

.field-item.value-field {
    flex-wrap: wrap;
}

.field-label {
    color: var(--mud-palette-text-primary);
    font-size: 0.8125rem;
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.field-item .mud-icon-button {
    color: var(--mud-palette-text-secondary);
    width: 24px;
    height: 24px;
}

.field-item .mud-icon-button svg {
    width: 16px;
    height: 16px;
}

.field-item .mud-icon-button.active {
    color: var(--mud-palette-primary);
}

.field-item .mud-icon-button:hover {
    color: var(--mud-palette-text-primary);
}

/* 移除按钮默认与同排的排序/筛选按钮同色，只有鼠标进入这条字段条目才转红。
   必须写在上面的 :hover 规则之后——同为 0,3,0 特异度，靠源码顺序决胜。 */
.field-item:hover .pivot-remove-btn {
    color: var(--mud-palette-error);
}

.aggregate-select {
    min-width: 70px;
    flex: 1;
}

.aggregate-select .mud-input-control {
    font-size: 0.75rem;
}

.aggregate-select .mud-input {
    min-height: 28px;
    font-size: 0.75rem;
}

.empty-hint {
    color: var(--mud-palette-text-disabled);
    font-style: italic;
    text-align: center;
    padding: 8px;
    font-size: 0.75rem;
}

.mud-drop-zone.drop-zone-dragging .empty-hint {
    display: none !important;
}

/* 表格区域 */
.pivot-table-area {
    flex: 1;
    overflow: auto;
    background-color: var(--mud-palette-surface);
}

.pivot-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 64px 32px;
    background-color: var(--mud-palette-surface);
}

.pivot-table-wrapper {
    overflow: auto;
    max-height: 70vh;
}

.pivot-table {
    width: auto;
    border-collapse: separate;
    border-spacing: 0;
    background-color: var(--mud-palette-surface);
}

.pivot-table thead th {
    background-color: var(--mud-palette-table-head);
    color: var(--mud-palette-text-primary);
    font-weight: 600;
    font-size: 0.8125rem;
    padding: 10px 12px;
    border-bottom: 2px solid var(--mud-palette-divider);
    height: 44px;
    position: sticky;
    top: 0;
    z-index: 10;
    white-space: nowrap;
}

.pivot-table tbody tr.pivot-row {
    transition: background-color 0.2s ease;
}

.pivot-table tbody tr.pivot-row:hover {
    background-color: var(--mud-palette-action-default-hover);
}

.pivot-table td {
    padding: 8px 12px;
    border-bottom: 1px solid var(--mud-palette-divider);
    font-size: 0.8125rem;
    height: 40px;
    color: var(--mud-palette-text-primary);
    vertical-align: middle;
}

.pivot-table thead th.pivot-corner {
    background-color: var(--mud-palette-background-gray);
    font-weight: 600;
    border-right: 2px solid var(--mud-palette-divider);
    border-bottom: 2px solid var(--mud-palette-divider);
}

.pivot-corner-labels {
    display: flex;
    flex-direction: column;
    gap: 2px;
    font-size: 0.6875rem;
}

.pivot-col-label,
.pivot-row-label {
    color: var(--mud-palette-text-secondary);
}

.pivot-col-header {
    background-color: var(--mud-palette-background-gray);
    font-weight: 600;
    text-align: center;
    border-right: 1px solid var(--mud-palette-divider);
}

.pivot-val-header {
    text-align: center;
    font-size: 0.6875rem;
}

.pivot-total-header {
    background-color: var(--mud-palette-background-gray);
    color: var(--mud-palette-text-primary);
    font-weight: 700;
    text-align: center;
    border-right: 2px solid var(--mud-palette-divider);
    border-bottom: 2px solid var(--mud-palette-divider);
}

.pivot-row-header {
    background-color: var(--mud-palette-background-gray);
    font-weight: 500;
    text-align: left;
    white-space: nowrap;
    border-right: 2px solid var(--mud-palette-divider);
    position: sticky;
    left: 0;
    z-index: 5;
}

.pivot-expand-icon {
    cursor: pointer;
    color: var(--mud-palette-text-secondary);
}

.pivot-expand-icon:hover {
    color: var(--mud-palette-text-primary);
}

.pivot-cell {
    text-align: right;
    font-family: var(--mud-typography-body2-family);
    color: var(--mud-palette-text-primary);
    font-variant-numeric: tabular-nums;
    cursor: pointer;
}

.pivot-cell:hover {
    background-color: var(--mud-palette-action-default-hover);
}

.pivot-total-cell {
    text-align: right;
    font-family: var(--mud-typography-body2-family);
    color: var(--mud-palette-text-primary);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.pivot-total-row td {
    background-color: var(--mud-palette-background-gray);
    border-top: 2px solid var(--mud-palette-divider);
}

.pivot-grand-total {
    background-color: var(--mud-palette-background-gray);
    font-weight: 700;
}

.pivot-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 64px 32px;
    text-align: center;
    gap: 16px;
}

.pivot-empty-icon {
    font-size: 48px;
    color: var(--mud-palette-text-disabled);
    opacity: 0.5;
}

.pivot-empty-text {
    color: var(--mud-palette-text-secondary);
    font-size: 1rem;
}

/* 响应式 */
@media (max-width: 480px) {
    .pivot-body {
        flex-direction: column;
    }
    
    .pivot-designer-panel {
        width: 100%;
        border-right: none;
        border-bottom: 1px solid var(--mud-palette-divider);
        max-height: 250px;
    }
}

/* Excel 视图 */
.pivot-table.pivot-excel tbody tr.excel-even td {
    background-color: var(--mud-palette-surface);
}

.pivot-table.pivot-excel tbody tr.excel-odd td {
    background-color: var(--mud-palette-background-gray);
}

.pivot-table.pivot-excel tbody tr:hover td {
    background-color: var(--mud-palette-action-default-hover) !important;
}

/* 热力图视图 */
.pivot-table.pivot-heatmap td.pivot-cell {
    transition: background-color 0.15s ease;
}

.pivot-table.pivot-heatmap td.pivot-cell:hover {
    filter: brightness(0.95);
}

/* 图表视图 */
.pivot-chart-view {
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    height: 100%;
}

.pivot-chart-controls {
    display: flex;
    align-items: center;
    gap: 12px;
}

.pivot-chart-type-select {
    min-width: 160px;
}

.pivot-chart-canvas {
    flex: 1;
    background-color: var(--mud-palette-surface);
    border-radius: var(--mud-default-borderradius);
    padding: 12px;
    min-height: 420px;
}

/* 筛选弹出面板 */
.pivot-filter-popover {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1000;
}

.pivot-filter-panel {
    width: 340px;
    max-height: 70vh;
    padding: 16px;
    display: flex;
    flex-direction: column;
    background-color: var(--mud-palette-surface);
}

.pivot-filter-title {
    font-weight: 600;
    margin-bottom: 12px;
}

.pivot-filter-values {
    flex: 1;
    overflow-y: auto;
    max-height: 40vh;
    border: 1px solid var(--mud-palette-divider);
    border-radius: 4px;
    padding: 8px;
    margin-bottom: 12px;
}

.pivot-filter-values .mud-checkbox {
    margin: 2px 0;
    font-size: 0.875rem;
}

.pivot-filter-actions {
    padding-top: 8px;
    border-top: 1px solid var(--mud-palette-divider);
}
/* _content/Microkeep.Blazor.PivotTable/Components/PivotTable/MudPivotTable.razor.rz.scp.css */
.pivot-container {
    /* 行色/悬停色/焦点色取自 ODataGrid（microkeep-blazor-odata.css 的 --odata-grid-row-bg-*） */
    --pivot-header-bg: var(--mud-palette-surface);
    --pivot-header-tint: linear-gradient(var(--mud-palette-action-default-hover), var(--mud-palette-action-default-hover));
    --pivot-row-bg-odd: var(--mud-palette-surface);
    --pivot-row-bg-even: color-mix(in oklab, var(--mud-palette-surface) 86%, var(--mud-palette-lines-default) 14%);
    --pivot-row-bg-hover: var(--dashboard-nav-hover, color-mix(in oklab, var(--mud-palette-action-default-hover) 80%, var(--mud-palette-primary) 20%));
    --pivot-cell-bg-focus: color-mix(in oklab, var(--mud-palette-primary) 10%, var(--mud-palette-surface) 90%);
    --pivot-cell-bg-focus-hover: color-mix(in oklab, var(--mud-palette-primary) 15%, var(--mud-palette-surface) 85%);
    width: 100% !important;
    min-height: 400px !important;
    background-color: var(--mud-palette-surface) !important;
    border-radius: 0 !important;
    font-family: var(--mud-typography-default-family) !important;
    font-size: var(--mud-typography-body2-size) !important;
    line-height: var(--mud-typography-body2-lineheight) !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05), 0 1px 2px rgba(0, 0, 0, 0.1) !important;
    padding: 0 !important;
}

.pivot-container  .pivot-loading {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 64px 32px !important;
    background-color: var(--mud-palette-surface) !important;
    border-radius: 0 !important;
}

.pivot-container  .pivot-table-wrapper {
    overflow: auto !important;
    max-height: 70vh !important;
    border-radius: 0 !important;
}

/* table-layout:fixed 让 colgroup 里前导列的宽度说了算，数据列等分剩余宽度；
   列数多时由内联 min-width 兜住横向滚动。
   overflow 必须留在 wrapper 上，table 上的 overflow 会成为 sticky 的 scrollport 从而让表头失去固定能力 */
.pivot-container  .pivot-table {
    width: 100% !important;
    table-layout: fixed !important;
    border-collapse: separate !important;
    border-spacing: 0 !important;
    background-color: var(--mud-palette-surface) !important;
    border-radius: 0 !important;
}

/* 表头样式 - 对齐 MudTable。
   字体五项（size/family/lineheight/letterspacing/text-transform）直接取 MudBlazor 给
   .mud-table-root .mud-table-head .mud-table-cell 用的 subtitle2 变量，不写死数值——
   换主题时透视表跟着 ODataGrid 一起变，不会出现两套字体。
   font-weight 单独提到 600，与 ODataGrid 皮肤 microkeep-blazor-odata.css 的
   「.mud-table-head .mud-table-cell, … .mud-table-cell *{font-weight:600}」同一条意图 */
.pivot-container  .pivot-table thead th {
    background-color: var(--pivot-header-bg) !important;
    background-image: var(--pivot-header-tint) !important;
    color: var(--mud-palette-text-primary) !important;
    font-size: var(--mud-typography-subtitle2-size) !important;
    font-family: var(--mud-typography-subtitle2-family) !important;
    line-height: var(--mud-typography-subtitle2-lineheight) !important;
    letter-spacing: var(--mud-typography-subtitle2-letterspacing) !important;
    text-transform: var(--mud-typography-subtitle2-text-transform) !important;
    font-weight: 600 !important;
    padding: 16px !important;
    border-bottom: 2px solid var(--mud-palette-divider) !important;
    /* 行高必须是定值：sticky 偏移按 行号×56px 计算（见 MudPivotContainer.HeaderTopStyle），
       box-sizing + nowrap 保证每行正好 56px，改了这里就要同步那里 */
    height: 56px !important;
    box-sizing: border-box !important;
    position: sticky !important;
    top: 0;
    z-index: 10 !important;
    white-space: nowrap !important;
    text-align: left !important;
    vertical-align: middle !important;
    /* 不裁剪背景：padding-box 会让 2px 分隔线底下没有底色，热力图滚动时底下的 rgba 热力色
       就从这条缝里透出来（分隔线本身是半透明的 divider）——冻结格必须把底色铺到边框区 */
}

/* 表头文字实际是单元格里的 MudText，它自带 mud-typography-* 类会覆盖继承来的字重，
   所以必须像 ODataGrid 皮肤那样对 th 的后代再点一次 600。
   左上角交叉格（.pivot-corner）里放的是「列: … / 行: …」图例，不是表头，保持它自己的 500 */
.pivot-container  .pivot-table thead th:not(.pivot-corner) * {
    font-weight: 600 !important;
}

/* 表体行样式：斑马纹 + 整行悬停，取 ODataGrid 的配色 */
.pivot-container  .pivot-table tbody tr.pivot-row {
    background-color: var(--pivot-row-bg-odd) !important;
    transition: background-color 0.15s ease !important;
}

.pivot-container  .pivot-table tbody tr.pivot-row:nth-of-type(even) {
    background-color: var(--pivot-row-bg-even) !important;
}

.pivot-container  .pivot-table tbody tr.pivot-row:hover {
    background-color: var(--pivot-row-bg-hover) !important;
}

/* 单元格基础样式：字号/行高取 MudBlazor 给 body 单元格用的 body2 变量，与 ODataGrid 同源。
   这里刻意不声明 font-family/font-weight——本选择器是 0,2,1，比 .pivot-cell/.pivot-total-cell
   这类 0,2,0 的类规则更高，写了就会把数值列的等宽字体和合计格的加粗一起压掉 */
.pivot-container  .pivot-table td {
    padding: 12px 16px !important;
    border-bottom: 1px solid var(--mud-palette-divider) !important;
    font-size: var(--mud-typography-body2-size) !important;
    line-height: var(--mud-typography-body2-lineheight) !important;
    height: 52px !important;
    box-sizing: border-box !important;
    color: var(--mud-palette-text-primary) !important;
    vertical-align: middle !important;
}

.pivot-container  .pivot-table td:last-child {
    border-right: none !important;
}

/* 列标题最右侧不留分隔线。合计格带 rowspan，不一定落在最后一行，所以按每行的 th:last-child 收口，
   并把带类名的形式写全，避免特异度低于下面的 * 列头规则 */
.pivot-container  .pivot-table thead th:last-child,
.pivot-container  .pivot-table thead th.pivot-col-header:last-child,
.pivot-container  .pivot-table thead th.pivot-val-header:last-child,
.pivot-container  .pivot-table thead th.pivot-total-header:last-child {
    border-right: none !important;
}

/* 角落单元格：交叉字段头，纵向跟着表头冻结、横向跟着行头冻结，所以 z-index 必须同时压过两者 */
.pivot-container  .pivot-table thead th.pivot-corner {
    left: 0 !important;
    z-index: 20 !important;
    background-color: var(--pivot-header-bg) !important;
    background-image: var(--pivot-header-tint) !important;
    font-weight: 600 !important;
    text-align: center !important;
    border-right: 2px solid var(--mud-palette-divider) !important;
    border-bottom: 2px solid var(--mud-palette-divider) !important;
}

.pivot-container  .pivot-table thead th.pivot-corner .d-flex {
    align-items: center !important;
    text-align: center !important;
}

/* 交叉格图例只负责排布；字体交给里面的 MudText（Typo.caption）。
   原先这里的 font-size/text-transform/letter-spacing 是死声明——
   text-transform 本来就不继承，另两项被 MudText 自带的 .mud-typography-caption 覆盖 */
.pivot-container  .pivot-corner-labels {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    gap: 4px !important;
}

.pivot-container  .pivot-col-label {
    color: var(--mud-palette-text-secondary) !important;
    font-weight: 500 !important;
    text-align: center !important;
}

.pivot-container  .pivot-row-label {
    color: var(--mud-palette-text-secondary) !important;
    font-weight: 500 !important;
    text-align: center !important;
}

/* 列头样式。选择器带上 thead th，否则 .pivot-container .pivot-table thead th 的
   text-align:left !important 特异度更高，居中永远不生效 */
.pivot-container  .pivot-table thead th.pivot-col-header {
    background-color: var(--pivot-header-bg) !important;
    background-image: var(--pivot-header-tint) !important;
    font-weight: 600 !important;
    text-align: center !important;
    border-right: 1px solid var(--mud-palette-divider) !important;
}

/* 列头内容是 MudStack 根 div（d-flex），text-align 对它无效，必须 justify-content */
.pivot-container  .pivot-table thead th.pivot-col-header .d-flex,
.pivot-container  .pivot-table thead th.pivot-total-header .d-flex {
    width: 100% !important;
    justify-content: center !important;
}

.pivot-container  .pivot-leaf-header {
    border-bottom: 2px solid var(--mud-palette-divider) !important;
}

/* 值字段头只补居中；字号/大小写交给里面的 MudText（Typo.subtitle2），
   否则这里写死会把表头字体重新拉离 ODataGrid */
.pivot-container  .pivot-table thead th.pivot-val-header {
    text-align: center !important;
}

/* 合计头样式 */
.pivot-container  .pivot-table thead th.pivot-total-header {
    background-color: var(--pivot-header-bg) !important;
    background-image: var(--pivot-header-tint) !important;
    color: var(--mud-palette-text-primary) !important;
    font-weight: 700 !important;
    text-align: center !important;
    border-right: 2px solid var(--mud-palette-divider) !important;
    border-bottom: 2px solid var(--mud-palette-divider) !important;
}

/* 合计头里的 MudText（Typo.subtitle2）自带 font-weight:400，会盖掉 th 继承下来的 700；
   通用 th:not(.pivot-corner) * 规则只给 600，所以这里单独再点一次 700 */
.pivot-container  .pivot-table thead th.pivot-total-header * {
    font-weight: 700 !important;
}

/* 行头样式 */
.pivot-container  .pivot-row-header {
    background-color: var(--pivot-header-bg) !important;
    background-image: var(--pivot-header-tint) !important;
    font-weight: 500 !important;
    text-align: left !important;
    white-space: nowrap !important;
    border-right: 2px solid var(--mud-palette-divider) !important;
}

/* 紧凑模式里带子级（有展开/折叠按钮）的行标题加粗。字重必须打在 MudText 自己的类上：
   body2 渲染出来的元素不是 <span>（实测行头格里 querySelector('span') 取不到东西），按标签名
   点会静默失配；而 MudText 自带 mud-typography-body2 又重声明字重，只写在 td 上继承不进去。
   和表头那条 th:not(.pivot-corner) * 是同一个坑 */
.pivot-container  .pivot-row-header.pivot-row-parent .pivot-row-header-label {
    font-weight: 700 !important;
}

/* 前导（行字段）列整块横向冻结。每列宽度由组件按内容估算（RecomputeLeadingColWidths 写进
   colgroup），left 就是「前面各列宽度之和」（RowHeaderLeftStyle）——colgroup 与偏移读同一份
   数字，所以冻结边界永远落在真实列边界上，不再依赖「各列等宽」这个前提。
   left 走内联，这里只给固定能力（底色不透明 + 不裁剪背景，滚动时不透底） */
.pivot-container  .pivot-table tbody td.pivot-row-header,
.pivot-container  .pivot-table tfoot td.pivot-total-header {
    position: sticky !important;
    z-index: 5 !important;
    overflow: hidden !important;
}

/* 前导列宽是组件按内容估算的（RecomputeLeadingColWidths），估窄了标题会顶出格子、
   压到从下面滚过去的列上，所以冻结格自己裁掉并给标题加省略号。
   flex 子项默认 min-width:auto 不肯收缩，必须显式 min-width:0 省略号才会出现 */
.pivot-container  .pivot-row-header .d-flex,
.pivot-container  .pivot-row-header .pivot-row-header-label,
.pivot-container  .pivot-table thead th.pivot-corner,
.pivot-container  .pivot-table thead th.pivot-corner span {
    min-width: 0 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

.pivot-container  .pivot-expand-icon {
    cursor: pointer !important;
    margin-right: 8px !important;
    font-size: 12px !important;
    color: var(--mud-palette-text-secondary) !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 20px !important;
    height: 20px !important;
    border-radius: 50% !important;
    transition: all 0.2s ease !important;
    flex: 0 0 auto !important;
}

.pivot-container  .pivot-expand-icon:hover {
    background-color: var(--mud-palette-action-default-hover) !important;
    color: var(--mud-palette-text-primary) !important;
}

/* 数值单元格。字体用 body2（ODataGrid 的数字列就是 MudText Typo.body2，全站没有等宽字体），
   原先的 Roboto Mono 是透视表自己加的，属于「和 ODataGrid 不一样」的那类差异；
   tabular-nums 保留——数字列等宽对齐靠它，不靠换字体 */
.pivot-container  .pivot-cell {
    text-align: right !important;
    font-family: var(--mud-typography-body2-family) !important;
    color: var(--mud-palette-text-primary) !important;
    font-variant-numeric: tabular-nums !important;
    cursor: pointer !important;
    transition: background-color 0.15s ease !important;
}

/* 焦点单元格：ODataGrid 选中行的焦点色 */
.pivot-container  .pivot-table td.pivot-cell-focus {
    background-color: var(--pivot-cell-bg-focus) !important;
    box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--mud-palette-primary) 45%, transparent) !important;
}

.pivot-container  .pivot-table tbody tr.pivot-row:hover td.pivot-cell-focus {
    background-color: var(--pivot-cell-bg-focus-hover) !important;
}

/* 合计单元格 */
.pivot-container  .pivot-total-cell {
    text-align: right !important;
    font-family: var(--mud-typography-body2-family) !important;
    color: var(--mud-palette-text-primary) !important;
    font-weight: 700 !important;
    font-variant-numeric: tabular-nums !important;
}

/* 合计格里的 MudText（Typo.body2）自带 font-weight:400，不继承 td 上的 700；
   必须对子元素再点一次 */
.pivot-container  .pivot-total-cell * {
    font-weight: 700 !important;
}

.pivot-container  .pivot-grand-total {
    background-color: var(--pivot-header-bg) !important;
    background-image: var(--pivot-header-tint) !important;
    font-weight: 700 !important;
    border-left: 2px solid var(--mud-palette-divider) !important;
}

.pivot-container  .pivot-grand-total * {
    font-weight: 700 !important;
}

/* 合计行 */
.pivot-container  .pivot-total-row td {
    background-color: var(--pivot-header-bg) !important;
    background-image: var(--pivot-header-tint) !important;
    border-top: 2px solid var(--mud-palette-divider) !important;
    border-bottom: none !important;
}

.pivot-container  .pivot-total-row .pivot-total-header {
    font-weight: 700 !important;
}

.pivot-container  .pivot-total-row .pivot-total-header * {
    font-weight: 700 !important;
}

/* 右栏表格区：必须是 flex 列，空状态/加载态才能靠 flex:1 拿到剩余高度后被垂直居中。
   min-width:0 是给 MudSplitPanel 用的，缺了它表格会把面板撑破 */
.pivot-container  .pivot-table-area {
    display: flex !important;
    flex-direction: column !important;
    min-width: 0 !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

/* 空状态 */
/* 空状态：flex:1 是先决条件——父级是 flex 列，不撑满高度的话
   justify-content:center 只在这个盒子自己的内容里居中，视觉上就是贴顶 */
.pivot-container  .pivot-empty {
    flex: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 64px 32px !important;
    text-align: center !important;
    gap: 16px !important;
}

.pivot-container  .pivot-empty-icon {
    font-size: 48px !important;
    color: var(--mud-palette-text-disabled) !important;
    opacity: 0.5 !important;
}

.pivot-container  .pivot-empty-text {
    color: var(--mud-palette-text-secondary) !important;
    font-size: 1rem !important;
}

/* 响应式调整。表头高度这里不能动：多级列头的 sticky top 是按每行 56px 在 C# 里算的
   （MudPivotContainer.HeaderTopStyle），窄屏改成 48px 会让第 2、3 行列头粘位错位、互相叠盖。
   字号也不再写死，保持与 ODataGrid 同一套 typography 变量 */
@media (max-width: 768px) {
    .pivot-container  .pivot-table thead th,
    .pivot-container  .pivot-table td {
        padding: 8px 12px !important;
    }

    .pivot-container  .pivot-table td {
        height: 44px !important;
    }
}

/* ── 下钻弹窗 & 工具栏：自包含的 ODataGrid 皮肤子集 ──
   MudPivotContainer 的下钻弹窗和工具栏按钮复用了 ODataGrid 的 CSS 类名
   （odata-grid-host / odata-grid-surface / odata-grid-row-active 等）。
   为避免隐式依赖 microkeep-blazor-odata.css，这里内嵌最小必需规则集。 */

.odata-grid-host {
    --odata-grid-row-bg-odd: var(--mud-palette-surface);
    --odata-grid-row-bg-even: color-mix(in oklab, var(--mud-palette-surface) 86%, var(--mud-palette-lines-default) 14%);
    --odata-grid-row-bg-hover: var(--dashboard-nav-hover, color-mix(in oklab, var(--mud-palette-action-default-hover) 80%, var(--mud-palette-primary) 20%));
    --odata-grid-row-bg-selected: color-mix(in oklab, var(--mud-palette-primary) 10%, var(--mud-palette-surface) 90%);
    --odata-grid-row-bg-selected-hover: color-mix(in oklab, var(--mud-palette-primary) 15%, var(--mud-palette-surface) 85%);
    --odata-grid-row-bg: var(--odata-grid-row-bg-odd);
    width: 100%;
    max-width: 100%;
    min-width: 0;
    overflow: visible;
    padding: 2px;
    box-sizing: border-box;
}

.odata-grid-host--fill-height {
    min-height: min(360px, 100%);
}

.odata-grid-host--fill-height .odata-grid-surface {
    height: min(60vh, 640px);
    max-height: min(60vh, 640px);
    display: flex;
    flex-direction: column;
}

.odata-grid-host .odata-grid-surface.mud-paper {
    border: 0 !important;
    box-shadow: var(--mud-elevation-1) !important;
}

.odata-grid-host .mud-data-grid,
.odata-grid-host .odata-grid-surface,
.odata-grid-host .mud-table-container {
    width: 100%;
    max-width: 100%;
    min-width: 0;
}

.odata-grid-host .mud-table-container {
    max-height: min(60vh, 640px);
    overflow: auto;
    overscroll-behavior: contain;
}

.odata-grid-host .odata-grid-surface .mud-table-body .mud-table-row > td {
    background-color: var(--odata-grid-row-bg) !important;
}

.odata-grid-host .odata-grid-surface .mud-table-body .mud-table-row:nth-of-type(even) > td {
    --odata-grid-row-bg: var(--odata-grid-row-bg-even);
}

.odata-grid-host .odata-grid-surface .mud-table-body .mud-table-row:hover > td {
    --odata-grid-row-bg: var(--odata-grid-row-bg-hover);
}

.odata-grid-host .odata-grid-surface .mud-table-body > .mud-table-row.odata-grid-row-active,
.odata-grid-host .odata-grid-surface .mud-table-body > .mud-table-row.odata-grid-row-active > td {
    --odata-grid-row-bg: var(--odata-grid-row-bg-selected);
    background-color: var(--odata-grid-row-bg-selected) !important;
}

.odata-grid-host .odata-grid-surface .mud-table-body > .mud-table-row.odata-grid-row-active > td:first-child {
    box-shadow: inset 4px 0 0 var(--mud-palette-primary) !important;
}

.odata-grid-host .odata-grid-surface .mud-table-body > .mud-table-row.odata-grid-row-active:hover,
.odata-grid-host .odata-grid-surface .mud-table-body > .mud-table-row.odata-grid-row-active:hover > td {
    --odata-grid-row-bg: var(--odata-grid-row-bg-selected-hover);
    background-color: var(--odata-grid-row-bg-selected-hover) !important;
}

.odata-grid-toolbar-actions-host,
.odata-grid-toolbar-slot {
    display: inline-flex;
    align-items: center;
}

.odata-grid-toolbar-actions-host .mud-icon-button .mud-icon-root,
.odata-grid-toolbar-slot .mud-icon-button .mud-icon-root {
    color: var(--mud-palette-text-secondary) !important;
    width: 20px;
    height: 20px;
    font-size: 20px;
}

.odata-grid-toolbar-actions-host .mud-icon-button:hover .mud-icon-root,
.odata-grid-toolbar-slot .mud-icon-button:hover .mud-icon-root {
    color: var(--mud-palette-text-primary) !important;
}

/* 弹窗标题栏下划线分隔 */
.mud-dialog-title {
    border-bottom: 1px solid var(--mud-palette-table-lines, rgba(255,255,255,0.12));
    padding-bottom: 12px;
    margin-bottom: 8px;
}