/*
 * Billing admin layout fixes.
 *
 * Страница тарифов использует общие admin-компоненты, но её таблица имеет
 * четыре колонки, тогда как таблица ролей — пять. Отдельные overrides не дают
 * legacy-ширинам таблицы ролей сжимать форму настроек и накладывать текст.
 */
.admin-page[aria-labelledby="admin-billing-plans-title"]
.admin-table--role-management {
    min-width: 1040px;
    table-layout: fixed;
}

.admin-page[aria-labelledby="admin-billing-plans-title"]
.admin-table--role-management th:nth-child(1),
.admin-page[aria-labelledby="admin-billing-plans-title"]
.admin-table--role-management td:nth-child(1) {
    width: 17%;
}

.admin-page[aria-labelledby="admin-billing-plans-title"]
.admin-table--role-management th:nth-child(2),
.admin-page[aria-labelledby="admin-billing-plans-title"]
.admin-table--role-management td:nth-child(2) {
    width: 31%;
}

.admin-page[aria-labelledby="admin-billing-plans-title"]
.admin-table--role-management th:nth-child(3),
.admin-page[aria-labelledby="admin-billing-plans-title"]
.admin-table--role-management td:nth-child(3) {
    width: 37%;
}

.admin-page[aria-labelledby="admin-billing-plans-title"]
.admin-table--role-management th:nth-child(4),
.admin-page[aria-labelledby="admin-billing-plans-title"]
.admin-table--role-management td:nth-child(4) {
    width: 15%;
}

/*
 * В тарифе поля должны идти вертикально. Общий role-management form раскладывает
 * элементы в две колонки, что подходило роли, но ломало billing-настройки.
 */
.admin-page[aria-labelledby="admin-billing-plans-title"]
.admin-role-management-form {
    min-width: 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
    align-items: stretch;
}

.admin-page[aria-labelledby="admin-billing-plans-title"]
.admin-role-management-form .form-field,
.admin-page[aria-labelledby="admin-billing-plans-title"]
.admin-role-management-form .admin-permission-option {
    min-width: 0;
}

.admin-page[aria-labelledby="admin-billing-plans-title"]
.admin-role-management-form .portal-button {
    justify-self: start;
}

.admin-page[aria-labelledby="admin-billing-plans-title"]
.admin-table--role-management td {
    overflow-wrap: anywhere;
}

/* BILL-03A: отдельная раскладка каталога коммерческих предложений. */
.billing-offer-create-card {
    display: grid;
    grid-template-columns: minmax(220px, 1.4fr) repeat(3, minmax(150px, 1fr));
    gap: 16px;
    align-items: end;
}

.billing-offer-create-card > div:first-child {
    align-self: start;
}

.billing-offer-create-card .portal-button {
    justify-self: start;
}

.admin-page[aria-labelledby="admin-billing-offers-title"] .form-field select {
    width: 100%;
    min-height: 44px;
    padding: 10px 12px;
    border: 1px solid var(--portal-border);
    border-radius: 10px;
    background: #ffffff;
    color: var(--portal-text);
    font: inherit;
}

.billing-offer-table {
    min-width: 1040px;
    table-layout: fixed;
}

.billing-offer-table th:nth-child(1),
.billing-offer-table td:nth-child(1) {
    width: 20%;
}

.billing-offer-table th:nth-child(2),
.billing-offer-table td:nth-child(2) {
    width: 18%;
}

.billing-offer-table th:nth-child(3),
.billing-offer-table td:nth-child(3) {
    width: 17%;
}

.billing-offer-table th:nth-child(4),
.billing-offer-table td:nth-child(4) {
    width: 45%;
}

.billing-offer-table td {
    overflow-wrap: anywhere;
}

.billing-offer-table .admin-permission-editor {
    min-width: 0;
}

@media (max-width: 1080px) {
    .admin-page[aria-labelledby="admin-billing-plans-title"]
    .admin-table--role-management {
        min-width: 980px;
    }

    .billing-offer-create-card {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .billing-offer-create-card > div:first-child {
        grid-column: 1 / -1;
    }

    .billing-offer-table {
        min-width: 980px;
    }
}

@media (max-width: 760px) {
    .billing-offer-create-card {
        grid-template-columns: minmax(0, 1fr);
    }

    .billing-offer-create-card > div:first-child {
        grid-column: auto;
    }
}