.cash-count-header {
    width: 100%;
    min-width: 0;
}

.cash-count-lines,
.cash-count-field {
    min-width: 0;
}

.cash-count-table {
    width: 100%;
    table-layout: fixed;
}

.cash-count-table th,
.cash-count-table td {
    padding: 0.25rem;
    text-align: left;
}

.cash-count-table th:last-child,
.cash-count-table td:last-child {
    width: 2.75rem;
}

.cash-count-field {
    display: block;
}

.cash-count-field select,
.cash-count-field input {
    width: 100%;
    min-width: 0;
    min-height: 2.75rem;
    box-sizing: border-box;
}

.cash-count-mobile-label {
    display: none;
}

.cash-count-remove-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    min-height: 2.75rem;
    border-radius: 0.25rem;
}

.cash-count-remove-button:focus-visible {
    outline: 2px solid var(--mud-palette-primary, #253dc1);
    outline-offset: 2px;
}

@media (max-width: 600px) {
    .cash-count-header > .flex {
        flex-wrap: wrap;
        align-items: flex-start;
    }

    .cash-count-header .localized-dialog-title {
        /* The shared header uses an important Tailwind flex-1 utility. */
        flex: 1 0 100% !important;
    }

    .cash-count-header .localized-dialog-title + div {
        margin-left: auto;
    }

    .cash-count-table,
    .cash-count-table tbody {
        display: block;
    }

    .cash-count-table thead {
        display: none;
    }

    .cash-count-table tr {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 2.75rem;
        gap: 0.5rem;
        padding-bottom: 0.75rem;
        margin-bottom: 0.75rem;
        border-bottom: 1px solid var(--mud-palette-lines-default, #e2e8f0);
    }

    .cash-count-table tr:last-child {
        padding-bottom: 0;
        margin-bottom: 0;
        border-bottom: 0;
    }

    .cash-count-table td {
        display: block;
        min-width: 0;
        padding: 0;
    }

    .cash-count-table td:last-child {
        width: auto;
    }

    .cash-count-kind {
        grid-column: 1 / 3;
    }

    .cash-count-value {
        grid-column: 1;
    }

    .cash-count-quantity {
        grid-column: 2 / 4;
    }

    .cash-count-remove {
        grid-column: 3;
        grid-row: 1;
        align-self: end;
    }

    .cash-count-mobile-label {
        display: block;
        margin-bottom: 0.25rem;
        font-size: 0.75rem;
        font-weight: 600;
        line-height: 1.25;
    }
}