html, body {
    height: 100%;
    margin: 0;
    font-family: system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif
}

a {
    text-decoration: none
}

a:hover {
    text-decoration: underline
}

.mud-table-container,
.mud-table-root {
    border: none !important;
    box-shadow: none !important;
    background: transparent !important;
}

/* Keep a light divider line under the header table */
.mud-table thead th {
    border-bottom: 1px solid var(--mud-palette-lines-default) !important;
}

/* Remove any vertical borders in the body table */
.mud-table tbody td {
    border-bottom: none !important;
}

/* Keep uniform padding and spacing */
.mud-table thead th,
.mud-table tbody td {
    padding: 8px 16px !important;
}

/* Align numbers cleanly in their columns */
.text-right {
    text-align: right !important;
    font-variant-numeric: tabular-nums !important;
}


.ledger .mud-table-container,
.ledger .mud-table-root {
    border: none;
    box-shadow: none;
    background: transparent;
}

/* Header cells: a touch bigger and stronger */
.ledger.head-table .mud-table thead th {
    border-bottom: 1px solid var(--mud-palette-lines-default);
    font-size: 0.95rem; /* was ~0.875rem */
    font-weight: 600;
    letter-spacing: .015em;
    padding: 12px 18px; /* more presence */
}

/* Body cells: bigger, comfy padding, tabular numbers for columns */
.ledger.body-table .mud-table tbody td {
    font-size: 0.975rem; /* was ~0.875–0.9rem */
    padding: 12px 18px; /* taller rows */
    border-bottom: none; /* keep the minimalist look */
}

/* Right-aligned numeric columns look crisper with tabular figures */
.ledger .text-right {
    text-align: right;
}

.ledger .tabnums {
    font-variant-numeric: tabular-nums;
}

/* Optional: emphasize numeric columns slightly */
.ledger .num-strong {
    font-weight: 600;
}

.head-two-line .mud-table thead th {
    padding: 10px 16px;
    vertical-align: middle;
}

.hdr-label {
    opacity: .8;
    line-height: 1;
}

.hdr-value {
    line-height: 1.15;
    margin-top: 2px;
}

.tabnums {
    font-variant-numeric: tabular-nums;
}

.drawer-header-bg {
    background-color: var(--mud-palette-background-gray);
    border-radius: 12px;
}


.ellipsis {
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 100%;
}

.mud-tooltip-root {
    display: block;
    max-width: 100%;
}

.mud-tooltip-root > div {
    display: block;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.budget-header {
    display: grid;
    grid-template-columns: 39% 16.5% 17.5% 17.5%;
    align-items: center;
    column-gap: 16px; /* similar to table cell spacing */
    padding: 12px 8px; /* match MudTable row padding */
}

.income-header {
    padding: 12px 0px 12px 8px;
}

.budget-header .right {
    text-align: right;
}

/* Base row: reserve space for the border so nothing shifts */
.budget-row,
.drop-target {
    position: relative;
    border-radius: 8px;
    background-color: var(--mud-palette-surface);
    border: 2px dashed transparent;
    /* no outline at all */
    outline: none;
}

    /* Optional subtle hover wash, not the border color */
    .budget-row:hover::before,
    .drop-target:hover::before {
        content: "";
        position: absolute;
        inset: 0;
        border-radius: inherit;
        background: var(--mud-palette-info);
        opacity: .04;
        pointer-events: none;
    }

    /* When your CanDrop flag/class is applied, flip only the border color */
    .budget-row-can-drop,
    .drop-target.hover,
    .can-drop {
        border-color: var(--mud-palette-info); /* instant blue, no gray flash */
    }

        /* Stronger can-drop background if you want */
        .budget-row-can-drop::before,
        .drop-target.hover::before,
        .can-drop::before {
            content: "";
            position: absolute;
            inset: 0;
            border-radius: inherit;
            background: var(--mud-palette-info);
            opacity: .08;
            pointer-events: none;
        }

/* Avoid any accidental transitions that cause brief gray */
.budget-row, .drop-target {
    transition: none;
}




/* Optional responsive tweak: stack on small screens */
@media (max-width: 600px) {
    .budget-header {
        grid-template-columns: 1fr;
        row-gap: 8px;
    }

    .budget-header .right {
        text-align: left;
    }
}



.unassigned-tray {
    height: 100%;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.tray-header {
    position: sticky;
    top: 0;
    z-index: 1;
    background: var(--mud-palette-surface); /* matches Paper */
    padding: 12px 16px;
    border-bottom: 1px solid var(--mud-palette-lines-default);
}

.tray-list {
    flex: 1 1 auto;
    min-height: 0;
    overflow: auto;
    max-height: calc(100vh - 220px); /* adjust for header/nav height */
    padding: 0px 12px 12px 12px;
}

.tray-footer {
    position: sticky;
    bottom: 0;
    margin-bottom: 48px;
    margin-right: 12px;
    display: flex;
    justify-content: flex-end;
}

    /* Ensure the FAB doesn't stretch; keep it to content width */
    .tray-footer .mud-fab,
    .tray-footer .mud-button-root {
        width: auto;
        white-space: nowrap;
        align-self: flex-end;
        box-shadow: none;
    }

.tx-row {
    padding: 4px 6px;
    border-radius: 10px;
    transition: background .15s ease, box-shadow .15s ease;
    margin-bottom: 8px;
    margin-top: 8px;
    border-left: 3px solid transparent;
    padding-left: 0.5rem;
}

    .tx-row:hover {
        background: linear-gradient( 0deg, color-mix(in srgb, var(--mud-palette-info) 7%, transparent), color-mix(in srgb, var(--mud-palette-info) 7%, transparent) );
    }

    .tx-row.dragging {
        opacity: .9;
    }

.tx-row-expense {
    border-left-color: var(--mud-palette-warning);
}

.tx-row-income {
    border-left-color: var(--mud-palette-success);
}

.tx-row-refund {
    border-left-color: var(--mud-palette-primary);
}


.muted {
    opacity: .75;
}

.tabnums {
    font-variant-numeric: tabular-nums;
}

/* Drop affordance on envelopes (you'll add .drop-target class there) */
.drop-target {
    outline: 2px dashed transparent;
    transition: outline-color .1s ease, background .1s ease;
}

.env-row {
    padding: 0.35rem 0.5rem;
    border-radius: 6px;
    border: 1px solid transparent;
    transition: background-color 0.15s ease, border-color 0.15s ease;
}

    .env-row + .env-row {
        margin-top: 4px;
    }

.env-row-active {
    background-color: rgba(0, 0, 0, 0.03);
    border-color: rgba(0, 0, 0, 0.08);
}

.env-row-overspent {
    background-color: rgba(244, 67, 54, 0.08); /* error-ish */
    border-color: rgba(244, 67, 54, 0.4);
}

.env-row-underfunded {
    background-color: rgba(255, 193, 7, 0.08); /* warning-ish */
    border-color: rgba(255, 193, 7, 0.4);
}

.env-row-unused {
    opacity: 0.7;
}

.env-progress {
    margin-top: 2px;
}



.empty-state .mud-icon-root {
    opacity: .7;
}

.empty-state {
    background: transparent;
    border: 1px dashed var(--mud-palette-lines-default);
    border-radius: 12px;
}

.assign-menu-popover {
    max-height: 380px; /* scroll if long */
    overflow: auto;
    padding-block: 6px;
}

.assign-menu-header {
    font-weight: 600;
    opacity: .85;
    pointer-events: none; /* stays non-clickable */
}


.fund-card {
    border-left: 3px solid var(--mud-palette-info);
    background: color-mix(in srgb, var(--mud-palette-surface) 92%, transparent);
}