:root {
    --cc-primary: var(--mud-palette-primary);
    --cc-accent: #f46524;
    --cc-ink: var(--mud-palette-text-primary);
    --cc-muted: var(--mud-palette-text-secondary);
    --cc-card: var(--mud-palette-surface);
    --cc-bg: var(--mud-palette-background);
}

html,
body {
    margin: 0;
    min-height: 100%;
    font-family: "Space Grotesk", "IBM Plex Sans", sans-serif;
    color: var(--mud-palette-text-primary);
    background-color: var(--mud-palette-background);
}

/* LoginLayout has no host HTML element, so scoped/::deep CSS cannot
   reach MudMainContent. Zero AppBar padding for the auth full-bleed layout. */
.mud-main-content.auth-layout-main {
    padding: 0 !important;
    min-height: 100vh;
}

* {
    box-sizing: border-box;
}

a {
    color: var(--cc-primary);
}

.dashboard-chart-panel {
    overflow: hidden;
}

.dashboard-chart-canvas {
    width: 100%;
    max-width: 260px;
    margin-inline: auto;
    overflow: hidden;
}

.dashboard-chart-legend-swatch {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    flex-shrink: 0;
}

.dashboard-chart-legend-label {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dashboard-chart-legend-leader {
    flex: 1 1 auto;
    min-width: 16px;
    border-bottom: 1px solid var(--mud-palette-lines-default);
}

.dashboard-chart-legend-amount {
    flex-shrink: 0;
    font-variant-numeric: tabular-nums;
}

.mud-main-content {
    min-width: 0;
}

.page-toolbar,
.page-toolbar-title,
.page-toolbar-actions {
    flex-wrap: wrap;
    row-gap: 0.75rem;
    min-width: 0;
}

.page-toolbar > .mud-typography,
.page-toolbar-title > .mud-typography {
    min-width: 0;
    overflow-wrap: anywhere;
}

.record-card-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.record-card {
    min-width: 0;
}

.record-card__head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 0.75rem;
    min-width: 0;
}

.record-card__head--center {
    align-items: center;
}

.record-card__title {
    flex: 1 1 auto;
    min-width: 0;
    font-weight: 600;
    line-height: 1.3;
    overflow-wrap: break-word;
}

.record-card__amount {
    flex-shrink: 0;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.record-card__meta {
    color: var(--mud-palette-text-secondary);
    overflow-wrap: break-word;
}

.record-card__facts {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem 1rem;
    margin-top: 0.75rem;
}

.record-card__facts--stacked {
    grid-template-columns: minmax(0, 1fr);
}

.record-card__fact {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
    min-width: 0;
}

.record-card__fact--wide {
    grid-column: 1 / -1;
}

.record-card__fact > .mud-typography-caption {
    color: var(--mud-palette-text-secondary);
}

.record-card__fact > .mud-typography-body1,
.record-card__fact > .mud-typography-body2 {
    font-variant-numeric: tabular-nums;
    overflow-wrap: break-word;
}

.record-card .record-card__actions {
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 0.25rem;
    padding: 0.25rem 0.5rem;
    border-top: 1px solid var(--mud-palette-lines-default);
}

.record-card .mud-icon-button {
    padding: 8px;
}

.record-card__inline-actions {
    display: flex;
    flex-shrink: 0;
    margin: -0.5rem -0.5rem -0.5rem 0;
}

@media (max-width: 599.98px) {
    .content-shell .page-root.mt-8 {
        margin-top: 1rem !important;
        margin-bottom: 1.5rem !important;
    }

    .auth-card.pa-8 {
        padding: 1.25rem !important;
    }

    .page-toolbar,
    .page-toolbar-actions {
        align-items: stretch !important;
    }

    .page-toolbar > .mud-button-root:not(.mud-icon-button),
    .page-toolbar-actions,
    .page-toolbar-actions > .mud-button-root:not(.mud-icon-button) {
        width: 100%;
        align-self: stretch;
    }

    .record-card .record-card__actions > .mud-button-root:not(.mud-icon-button) {
        flex: 1 1 auto;
    }
}