/* Таблица на десктопе — «резиновая» */
.payments-table {
    table-layout: auto;
}

    .payments-table th, .payments-table td {
        white-space: nowrap;
        vertical-align: middle;
    }

    .payments-table .shrink {
        width: 1%;
    }

/* Инпуты и «оплата» в таблице */
.fit-input {
    width: auto !important;
    max-width: 12rem;
}

.pay-cell {
    display: flex;
    flex-wrap: wrap;
    gap: .25rem;
}

/* Цвета остатков */
.text-red {
    color: #d32f2f;
}

.text-green {
    color: #2e7d32;
}

/* ===== Графики (единая версия) ===== */
.chart-with-labels {
    position: relative;
    padding-left: 40px; /* место для подписи Y */
    padding-bottom: 64px; /* место для подписи X и ленты дат */
}

    .chart-with-labels .y-axis-label {
        position: absolute;
        top: 50%;
        left: 8px;
        transform: rotate(-90deg) translateY(-50%);
        transform-origin: left top;
        font-size: .82rem;
        opacity: .7;
    }

    .chart-with-labels .x-axis-label {
        position: absolute;
        bottom: 44px;
        left: 50%;
        transform: translateX(-50%);
        font-size: .82rem;
        opacity: .7;
    }
    /* Лента дат под графиком */
    .chart-with-labels .x-ticks {
        position: absolute;
        left: 40px;
        right: 12px;
        bottom: 8px;
        display: grid;
        gap: 0;
    }

        .chart-with-labels .x-ticks .tick {
            text-align: center;
            font-size: .76rem;
            opacity: .85;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            transform: rotate(-20deg);
            transform-origin: center top; /* лёгкий наклон для плотных меток */
        }

/* фон и рамка канваса — контрастнее сетки */
.payments-chart canvas {
    background: #f6f8fb;
    border-radius: 12px;
    box-shadow: inset 0 0 0 1px rgba(0,0,0,.06);
}

.payments-chart {
    border: 1px solid rgba(0,0,0,0.10);
    border-radius: 12px;
    padding: 8px;
    background-color: #fff;
}

/* ===== Медиа-запросы (в конце) ===== */
@media (max-width: 960px) {
    .fit-input {
        width: 100% !important;
        max-width: 100%;
    }

    .payments-table {
        overflow-x: auto;
        display: block;
    }
    /* Чуть меньше подписи под графиком на узких экранах */
    .chart-with-labels {
        padding-bottom: 56px;
    }

        .chart-with-labels .x-axis-label {
            bottom: 38px;
        }

        .chart-with-labels .x-ticks .tick {
            font-size: .7rem;
            transform: rotate(-25deg);
        }
}

/* Переключатели макетов при ширине < 1550px */
.show-desktop-1550 {
    display: block;
}

.show-mobile-1550 {
    display: none;
}

@media (max-width: 1550px) {
    .show-desktop-1550 {
        display: none;
    }

    .show-mobile-1550 {
        display: block;
    }
}