/* Typography comes from PortalTheme. These tokens cover compact UI roles. */
:root {
    --portal-font-compact: .8125rem;
    --portal-font-mobile-label: .6875rem;
    --portal-panel-border: color-mix(in srgb, var(--mud-palette-primary) 24%, var(--mud-palette-surface));
    --portal-table-border: color-mix(in srgb, var(--mud-palette-primary) 13%, var(--mud-palette-surface));
    --portal-table-header: color-mix(in srgb, var(--mud-palette-primary) 2%, var(--mud-palette-surface));
    --portal-table-hover: color-mix(in srgb, var(--mud-palette-primary) 5%, var(--mud-palette-surface));
}

.portal-panel {
    min-width: 0;
    overflow: hidden;
    border: 1px solid var(--portal-panel-border);
    border-radius: var(--mud-default-borderradius);
    background: var(--mud-palette-surface);
}

.portal-compact-text {
    font-size: var(--portal-font-compact);
}

/* Text uses contrast-tested variants; icons, charts and accents retain base colours. */
.mud-typography.mud-success-text,
.portal-status-chip.mud-chip-text.mud-chip-color-success {
    color: var(--mud-palette-success-darken) !important;
}

.mud-typography.mud-warning-text,
.portal-status-chip.mud-chip-text.mud-chip-color-warning {
    color: var(--mud-palette-warning-darken) !important;
}

.mud-typography.mud-error-text,
.portal-status-chip.mud-chip-text.mud-chip-color-error,
.portal-layout span.mud-error-text,
.portal-layout .mud-input-control .mud-input-label.mud-input-error,
.portal-layout .mud-input-control .mud-input-helper-text.mud-input-error,
.portal-layout .mud-input-control .mud-input-helper-text.mud-error-text {
    color: var(--mud-palette-error-darken) !important;
}

/* Chart cards respond to their own width, independently of the viewport. */
@container (max-width: 600px) {
    .portal-chart-title {
        font-size: var(--mud-typography-h3-size);
    }
}

.portal-metric {
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
}

.portal-metric-small {
    font-size: 1.25rem;
}

.portal-profile-heading {
    display: flex;
    align-items: center;
    width: 100%;
    padding: 8px;
    border-radius: var(--mud-default-borderradius);
    background: var(--mud-palette-primary);
    color: var(--mud-palette-primary-text);
}

/* Opt-in styles on each MudTable/MudDataGrid root. Direct children exclude nested tables.
   Mobile card layouts retain their component-specific padding and borders. */
.portal-table > :where(.mud-table-container) > :where(.mud-table-root) > :where(thead, tbody) > .mud-table-row > .mud-table-cell,
.portal-table > :where(.mud-table-container) > :where(.mud-drop-container) > :where(.mud-table-root) > :where(thead, tbody) > .mud-table-row > .mud-table-cell {
    color: var(--mud-palette-text-primary);
    font-size: var(--portal-font-compact);
    line-height: var(--mud-typography-body2-lineheight);
}

@media (min-width: 761px) {
    .portal-table > :where(.mud-table-container) > :where(.mud-table-root) > :where(thead, tbody) > .mud-table-row > .mud-table-cell,
    .portal-table > :where(.mud-table-container) > :where(.mud-drop-container) > :where(.mud-table-root) > :where(thead, tbody) > .mud-table-row > .mud-table-cell {
        padding: 6px 12px;
        border-right: 1px solid var(--portal-table-border);
        border-bottom: 1px solid var(--portal-table-border);
    }

    .portal-table > :where(.mud-table-container) > :where(.mud-table-root) > :where(thead) > .mud-table-row > .mud-table-cell,
    .portal-table > :where(.mud-table-container) > :where(.mud-drop-container) > :where(.mud-table-root) > :where(thead) > .mud-table-row > .mud-table-cell {
        background: var(--portal-table-header);
        font-weight: 700;
    }

    .portal-table > :where(.mud-table-container) > :where(.mud-table-root) > :where(tbody) > .mud-table-row:hover,
    .portal-table > :where(.mud-table-container) > :where(.mud-drop-container) > :where(.mud-table-root) > :where(tbody) > .mud-table-row:hover {
        background: var(--portal-table-hover);
    }
}

.portal-table > .mud-table-pagination {
    flex-wrap: wrap;
    border-top: 1px solid var(--mud-palette-divider);
}