/**
 * Стили модуля ЭТрН (электронная транспортная накладная).
 * Вынесены из inc/mods/styles.css в отдельный файл, чтобы не засорять общий styles.css.
 * Секции ниже соответствуют фичам/DEV-задачам, в которых были добавлены (см. заголовки блоков).
 */


/* ------------------------------------------------------------------------ *
 * ЭТрН — реестр входящих документов (DEV-1128)
 * ------------------------------------------------------------------------ */

.etrn-registry-title {
    font-size: 20px;
    font-weight: 600;
    color: #1E1E1E;
}

.etrn-hint-block {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    background: #eaf2f0;
    border: 1px solid #cbdcd9;
    border-radius: 8px;
    padding: 14px 16px;
}

.etrn-hint-block__dot {
    display: block;
    flex: none;
    width: 11px;
    height: 11px;
    margin-top: 2px;
    border-radius: 50%;
    background: #2F5B5D;
}

.etrn-hint-block__body {
    /* DEV-1145: без flex-grow этот блок сжимался под контент (самую длинную
       непереносимую строку одного из <li>), а не растягивался на всю строку —
       из-за этого скроллбар списка справа оставался с заметным отступом от
       границы блока, сколько бы padding/margin мы ни подбирали у самого списка. */
    flex: 1 1 auto;
    min-width: 0;
}

.etrn-hint-block__title {
    font-weight: 600;
    color: #1E1E1E;
    margin-bottom: 10px;
}

.etrn-hint-block__text {
    color: #4a4a4a;
    font-size: 13px;
    line-height: 18px;
}

/* DEV-1148: вспомогательная строка под текстом блока (время последней попытки,
   см. hintBlock.js meta) — приглушена так же, как подпись «Последняя проверка»
   в чек-листе готовности (.etrn-deal-readiness__last-checked), чтобы читалась
   как метаданные, а не как продолжение сообщения. */
.etrn-hint-block__meta {
    margin-top: 8px;
    color: #4a4a4a;
    font-size: 12px;
    opacity: 0.7;
}

.etrn-filter-btn {
    border: 1px solid #d5dbe3 !important;
    border-radius: 20px !important;
    background: #fff !important;
    color: #1E1E1E !important;
    padding: 0 16px !important;
    height: 32px;
    display: flex !important;
    align-items: center;
    justify-content: center;
}

.etrn-filter-btn .x-btn-inner {
    color: inherit;
    font-weight: 500;
}

.etrn-filter-btn--active {
    border-color: #2F5B5D !important;
    background: #2F5B5D !important;
}

.etrn-filter-btn--active .x-btn-inner {
    color: #fff;
}

.etrn-incoming-registry-grid .x-grid-cell {
    vertical-align: middle !important;
}


.etrn-incoming-registry-grid .x-docked-bottom {
    left: -16px !important;
    right: -16px !important;
    width: auto !important;
    box-sizing: border-box !important;
    padding-left: 16px !important;
    padding-right: 16px !important;
}

.etrn-incoming-registry-grid .x-grid-cell-inner {
    white-space: nowrap;
}

.etrn-reason-cell {
    display: flex;
    align-items: center;
    gap: 6px;
}

.etrn-reason-icon {
    flex: none;
}

.etrn-action-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    height: 26px;
    border: 1px solid #2F5B5D;
    border-radius: 6px;
    background: #fff;
    color: #2F5B5D;
    font-family: inherit;
    font-size: 12px;
    line-height: 1;
    padding: 0 10px;
    margin-right: 6px;
    cursor: pointer;
}

.etrn-action-btn:last-child {
    margin-right: 0;
}

.etrn-action-btn:hover {
    opacity: 0.85;
}

.etrn-action-btn--icon {
    width: 26px;
    padding: 0;
}

.etrn-action-btn--icon svg {
    display: block;
}

.etrn-action-btn--primary {
    background: #2F5B5D;
    color: #fff;
}
.etrn-edo-buttons {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
}

.etrn-edo-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    height: 28px;
    border: 1px solid #2F5B5D;
    border-radius: 6px;
    background: #fff;
    color: #2F5B5D;
    font-family: inherit;
    font-size: 13px;
    line-height: 1;
    padding: 0 14px;
    cursor: pointer;
}

.etrn-edo-btn:hover {
    opacity: 0.85;
}

.etrn-edo-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.etrn-edo-btn--primary {
    background: #2F5B5D;
    color: #fff;
}

/* Кнопка запуска Т1 в readinessChecklist — единственный CTA на всей вкладке
   и физически внизу страницы (после чек-листа и подсказки), легко теряется
   на фоне остального контента. Крупнее, чем стандартный .etrn-edo-btn, но
   не трогаем сам .etrn-edo-btn--primary — он общий с client2/edoTab.js. */
.etrn-edo-btn--lg {
    height: 40px;
    padding: 0 22px;
    font-size: 15px;
    font-weight: 600;
    border-radius: 8px;
}

.etrn-edo-btn--lg .x-btn-inner{
    font-size: 14px!important;
    letter-spacing: 0.3px;
    font-weight: 500!important;
}


/* Ext's own button skin sets a dark default color on the inner text span with
   higher specificity than a plain .etrn-edo-btn--primary{color} rule, so on a
   dark (primary) button the label rendered unreadably dark-on-dark. */
.etrn-edo-btn--primary .x-btn-inner {
    color: #fff;
}

/* Отключённая кнопка запуска — свои цвета вместо стандартного Ext-затемнения:
   так на тёмном primary-фоне отключённое состояние не превращается в грязно-
   тёмный полупрозрачный прямоугольник (opacity: 0.5), а выглядит явно
   "выключенным" (светло-серый фон) + курсор "запрещено" вместо pointer.
   Классы x-item-disabled/x-btn-disabled — Ext сам добавляет их на ту же
   обёртку (table), на которой висит наш cls, при disabled:true. */
.etrn-edo-btn.x-item-disabled,
.etrn-edo-btn.x-btn-disabled {
    cursor: not-allowed;
}

.etrn-edo-btn--primary.x-item-disabled,
.etrn-edo-btn--primary.x-btn-disabled {
    background: #B7C2C2 !important;
    border-color: #B7C2C2 !important;
    opacity: 1;
}

.etrn-edo-btn--primary.x-item-disabled .x-btn-inner,
.etrn-edo-btn--primary.x-btn-disabled .x-btn-inner {
    color: #ffffff;
}

.etrn-edo-buttons__warning {
    color: #ed6c02;
    font-size: 13px;
}

/* ------------------------------------------------------------------------ *
 * ЭТрН — вкладка сделки (DEV-1112)
 * ------------------------------------------------------------------------ */

.etrn-deal-titles-rail__heading {
    font-size: 18px;
    font-weight: 600;
    color: #1E1E1E;
}

.etrn-deal-step {
    border: 1px solid #e2e6ec;
    border-radius: 8px;
    padding: 12px;
    background: #fff;
    cursor: pointer;
}

.etrn-deal-step--active {
    border: 2px solid #2F5B5D;
    padding: 11px;
}

.etrn-deal-step__row {
    display: flex;
    align-items: flex-start;
    gap: 10px;
}

.etrn-deal-step__icon {
    flex: none;
    line-height: 0;
}

.etrn-deal-step__body {
    flex: 1;
    min-width: 0;
}

.etrn-deal-step__title {
    font-weight: 600;
    color: #1E1E1E;
    margin-bottom: 6px;
}

.etrn-deal-step__pills {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 4px;
}

.etrn-deal-step__subcaption {
    font-size: 12px;
    color: #4a4a4a;
}

.etrn-deal-step__subcaption--warning {
    color: #ed6c02;
}

/* Участник перевозки на этой роли (см. stepMarker.js) — отдельной строкой под
   subcaption, тонкой границей сверху, чтобы не сливаться с пилюлями статуса
   выше по карточке. Название — акцентным тилом модуля (#2F5B5D), чтобы быть
   заметнее обычного текста; overflow-wrap/word-break — чтобы длинное название
   (особенно без пробелов) переносилось внутри карточки, а не вылезало за неё. */
.etrn-deal-step__participant {
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid #eef0f3;
}

.etrn-deal-step__participant-name {
    display: block;
    color: #2F5B5D;
    font-size: 13px;
    font-weight: 500;
    padding: 2px;
    /* длинное название (особенно без пробелов) не должно вылезать за карточку. */
    overflow-wrap: anywhere;
    word-break: break-word;
}

.etrn-status-pill {
    display: inline-block;
    padding: 2px 10px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 500;
    line-height: 18px;
}

.etrn-status-pill--neutral {
    background: #f0f1f3;
    color: #4a4a4a;
}

.etrn-status-pill--success {
    background: #e6f4ea;
    color: #2e7d32;
}

.etrn-status-pill--warning {
    background: #fdf1e3;
    color: #ed6c02;
}

.etrn-status-pill--error {
    background: #fbe9e7;
    color: #c62828;
}

/* Вариант пилюли для read-only свойства «Статус титула» в .etrn-deal-title-details__row —
   тот же цветовой словарь тонов, но с рамкой и местом под иконку-галочку, чтобы
   статус визуально выделялся среди обычных значений (see DEV-1112 сессия 7). */
.etrn-status-pill--with-icon {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    border: 1px solid transparent;
}

.etrn-status-pill--with-icon svg {
    flex: none;
}

.etrn-status-pill--with-icon.etrn-status-pill--neutral {
    border-color: #dfe2e8;
}

.etrn-status-pill--with-icon.etrn-status-pill--success {
    border-color: #bfe3c4;
}

.etrn-status-pill--with-icon.etrn-status-pill--warning {
    border-color: #f6dcb0;
}

.etrn-status-pill--with-icon.etrn-status-pill--error {
    border-color: #f3c6c0;
}

.etrn-deal-header {
    display: flex;
    border: 1px solid #d5dbe3;
    border-radius: 8px;
    background: #fff;
}

.etrn-deal-header__cell {
    display: flex;
    align-items: center;
    flex: 1 1 0;
    min-width: 0;
}

.etrn-deal-header__cell-text {
    min-width: 0;
}

.etrn-deal-header__divider {
    flex: none;
    width: 1px;
    background: #e2e6ec;
    align-self: stretch;
}

.etrn-deal-header__icon {
    width: 38px;
    height: 38px;
    flex: none;
    border-radius: 50%;
    background: #eef2f4;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 0;
}

.etrn-deal-header__label {
    font-size: 12px;
    color: #4a4a4a;
}

.etrn-deal-header__value {
    font-size: 15px;
    font-weight: 600;
    color: #1E1E1E;
    margin-top: 2px;
}

.etrn-deal-header__cell-text--status {
    display: flex;
    align-items: center;
}

.etrn-deal-header__label--status {
    padding-right: 10px;
    font-weight: bold;
}

.etrn-deal-header__cell-text--status .etrn-deal-header__value {
    margin-top: 0;
}

.etrn-hint-block--success {
    background: #e6f4ea;
    border-color: #bfe3c6;
}

.etrn-hint-block--success .etrn-hint-block__dot {
    background: #2e7d32;
}

.etrn-hint-block--warning {
    background: #fdf1e3;
    border-color: #f3d9b3;
}

.etrn-hint-block--warning .etrn-hint-block__dot {
    background: #ed6c02;
}

.etrn-hint-block--error {
    background: #fbe9e7;
    border-color: #f0c4bd;
}

.etrn-hint-block--error .etrn-hint-block__dot {
    background: #c62828;
}

.etrn-hint-block__list {
    /* DEV-1145: список причин — нумерованный (<ol>, см. hintBlock.js). Явно
       восстанавливаем list-style — общий сброс Ext (ext-all.css) обнуляет его
       для всех ul/ol, иначе номера не отображаются вовсе. */
    list-style: decimal;
    list-style-position: outside;
    margin: 0;
    padding-left: 21px;
    color: #4a4a4a;
    font-size: 13px;
    line-height: 20px;
}

.etrn-hint-block__list li {
    /* DEV-1145: Ext-овский сброс задаёт `li{list-style:none}` прямо на <li> —
       наследуемого list-style с родительского <ol> тут недостаточно, нужно
       перебить на самом <li>. */
    list-style: decimal;
    margin-bottom: 4px;
}

/* DEV-1145: инструкция под нумерованным списком причин (см. hintBlock.js
   renderContent) — отдельным стилем (курсив, приглушённее), чтобы не читалась
   как ещё один пункт списка. */
.etrn-hint-block__list + .etrn-hint-block__text {
    margin-top: 8px;
    font-style: italic;
    opacity: 0.75;
}

/* DEV-1145: список блокирующих причин в правой колонке чек-листа готовности
   может быть длинным (десятки полей валидации T1Validator) — без внутреннего
   скролла блок разрастался на всю страницу и прятал кнопку запуска ниже экрана.
   Скроллим список внутри своей высоты; левая колонка (.etrn-deal-readiness__rows)
   и заголовок/кнопка справа остаются видны без прокрутки страницы.
   Правый padding у самого блока .etrn-hint-block в этом контексте убираем и
   переносим на заголовок/список/текст по отдельности — так у списка (и, значит,
   у его скроллбара) правая граница совпадает с границей розового блока, без
   расчёта отрицательного margin, который должен был бы точно совпасть с чужим
   padding (это оказалось хрупко — см. обсуждение задачи). */
.etrn-deal-readiness__col-right .etrn-hint-block {
    padding-right: 0;
}

.etrn-deal-readiness__col-right .etrn-hint-block__title,
.etrn-deal-readiness__col-right .etrn-hint-block__list,
.etrn-deal-readiness__col-right .etrn-hint-block__text,
.etrn-deal-readiness__col-right .etrn-hint-block__meta {
    padding-right: 16px;
    box-sizing: border-box;
}

.etrn-deal-readiness__col-right .etrn-hint-block__list {
    max-height: 260px;
    overflow-y: auto;
}

/* Тонкий скроллбар в корпоративном (более светлом) тоне вместо системного
   серого — тот же зелёный, что у .etrn-outline-btn/.etrn-hint-block__dot
   (#2F5B5D), но светлее, чтобы не спорил с текстом ошибок. */
.etrn-deal-readiness__col-right .etrn-hint-block__list {
    scrollbar-width: thin;
    scrollbar-color: #9fb8b9 transparent;
}

.etrn-deal-readiness__col-right .etrn-hint-block__list::-webkit-scrollbar {
    width: 6px;
}

.etrn-deal-readiness__col-right .etrn-hint-block__list::-webkit-scrollbar-track {
    background: transparent;
}

.etrn-deal-readiness__col-right .etrn-hint-block__list::-webkit-scrollbar-thumb {
    background-color: #9fb8b9;
    border-radius: 3px;
}

.etrn-deal-rightcol .x-clear {
    display: none;
}

.etrn-deal-readiness__header-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    width: 50%;
    padding-right: 14px;
    padding-top: 12px;
}

.etrn-deal-readiness__title {
    font-size: 16px;
    font-weight: 600;
    color: #1E1E1E;
}

.etrn-deal-readiness__header-row .etrn-deal-readiness__title {
    padding-left: 16px;
}

/* DEV-1145: дата последней проверки — одной строкой под заголовком (было:
   двумя строками справа от заголовка, рядом с кнопкой «Проверить готовность»,
   без видимой связи с заголовком — readiness пересчитывается при каждом заходе
   на вкладку, поэтому дата почти всегда есть уже при первой отрисовке). */
.etrn-deal-readiness__last-checked {
    font-size: 12px;
    color: #4a4a4a;
    opacity: 0.7;
    margin-top: 10px;
    padding-left: 16px;
}

.etrn-deal-readiness__rows {
    border: 1px solid #e2e6ec;
    border-radius: 8px;
    overflow: hidden;
}

.etrn-deal-readiness__row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    border-bottom: 1px solid #eef0f3;
    color: #4a4a4a;
}

.etrn-deal-readiness__row:last-child {
    border-bottom: none;
}

.etrn-deal-readiness__row-icon {
    flex: none;
    color: #4a4a4a;
    line-height: 0;
}

.etrn-deal-readiness__row-label {
    flex: 1;
    color: #1E1E1E;
}

.etrn-deal-readiness__row-value {
    font-weight: 500;
}

.etrn-deal-readiness__row.is-ok .etrn-deal-readiness__row-value {
    color: #2e7d32;
}

.etrn-deal-readiness__row.is-error .etrn-deal-readiness__row-value {
    color: #c62828;
}

.etrn-deal-readiness__signer-change {
    color: #2F5B5D;
    font-weight: 500;
    text-decoration: none;
}

/* Чек-лист слева / подсказка+кнопка справа — только у MOCK_SHIPPER_READY и
   MOCK_SHIPPER_BLOCKED (единственные кейсы, где readiness не null). */
.etrn-deal-readiness__body-row {
    display: flex;
    align-items: stretch;
    gap: 16px;
}

.etrn-deal-readiness__col-left {
    width: 50%;
    box-sizing: border-box;
}

.etrn-deal-readiness__col-right {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
}

/* Обёртка hint+launch-row — растягивается на всю высоту .col-right (которая,
   в свою очередь, уже равна высоте .col-left за счёт align-items: stretch на
   .body-row), а сам .etrn-hint-block внутри неё дорастает до launch-row —
   так у карточки «сообщение + кнопка» и у чек-листа слева одинаковая высота,
   а не разная с карточкой по центру колонки. */
.etrn-deal-readiness__cta-col {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
}

.etrn-deal-readiness__col-right .etrn-hint-block {
    flex: 1 1 auto;
}

/* Подсказка (.etrn-hint-block) и строка запуска сведены в одну карточку —
   без зазора, с общим фоном/рамкой на тон. Верх карточки — обычный скруглённый
   .etrn-hint-block, но с плоским низом (снимаем нижнюю рамку и скругление);
   низ — сама launch-row, плоский верх и скруглённый низ, фон/рамка по тону
   через смежный селектор от предыдущего .etrn-hint-block--{tone}. */
.etrn-deal-readiness__col-right .etrn-hint-block {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    border-bottom: none;
}

.etrn-deal-readiness__launch-row {
    display: flex;
    align-items: center;
    padding: 12px 16px 14px;
    border: 1px solid transparent;
    border-top: none;
    border-bottom-left-radius: 8px;
    border-bottom-right-radius: 8px;
}

.etrn-deal-readiness__col-right .etrn-hint-block--success + .etrn-deal-readiness__launch-row {
    background: #e6f4ea;
    border-color: #bfe3c6;
}

.etrn-deal-readiness__col-right .etrn-hint-block--error + .etrn-deal-readiness__launch-row {
    background: #fbe9e7;
    border-color: #f0c4bd;
}

.etrn-deal-readiness__launch-hint {
    font-size: 12px;
    color: #4a4a4a;
    max-width: 380px;
}

/* Внешний контейнер теперь просто вертикальный стек (подсказка, затем строка
   карточка+действия) — сам flex-row переехал в .__body ниже. */
.etrn-deal-title-details__hint {
    /*width: 50%;*/
    margin-bottom: 16px;
}

.etrn-deal-title-details__body {
    display: flex;
    align-items: stretch;
}

/* flex:none (не 1) — раньше .__main растягивался на весь остаток строки, из-за
   чего .__actions (флекс:none, 220px) улетал к правому краю колонки далеко от
   самой карточки «Информация по титулу» (та ограничена max-width:480px, но
   .__main вокруг неё оставался растянут).
   width:50% — не просто "сжаться по контенту" (flex:none без ширины считает
   max-content по САМОМУ широкому ребёнку — здесь это hintBlock с длинным
   абзацем текста без собственного ограничения ширины, и без явной ширины
   .__main "распухал" на всю нередактированную длину этого текста, ~1200px).
   Те же 50%, что и у остальных списков/карточек модуля (readiness/waiting-
   signature) — держит консистентный ритм колонок и даёт тексту hintBlock
   нормально переноситься. */
.etrn-deal-title-details__main {
    flex: none;
    width: 50%;
    display: flex;
    flex-direction: column;
}

/* Read-only список свойств «лэйбл → значение»: раньше значения были прижаты к
   правому краю (flex + text-align:right) — читалось как таблица чисел/метрик.
   Потом — grid с ФИКСИРОВАННОЙ колонкой лэйблов (170px) на КАЖДОЙ строке отдельно —
   но при коротких лэйблах («Отправлен») перед значением оставался зазор "на глазок".
   Сейчас (DEV-1112 сессия 8, вариант 4 из обсуждения) — колонка лэйблов не
   фиксирована числом: grid объявлен НА КОНТЕЙНЕРЕ-КАРТОЧКЕ (.__card/.__rows), а
   каждая строка — display:contents (не создаёт свой бокс, её label/value участвуют
   в РОДИТЕЛЬСКОМ grid напрямую) — значит ширина колонки лэйблов автоматически
   подстраивается под самый длинный лэйбл именно в этой конкретной карточке, и
   значение всегда стоит вплотную после лэйбла, без лишнего зазора. */
.etrn-deal-title-details__row {
    /*display: contents;*/
}

.etrn-deal-title-details__row-label {
    font-size: 12px;
    line-height: 22px;
    color: #6b7280;
    font-weight: 400;
}

.etrn-deal-title-details__row-value {
    font-size: 14px;
    line-height: 22px;
    color: #1f2937;
    font-weight: 500;
    text-align: left;
}

/* «Статус титула» — значение это пилюля (свой padding/line-height, а не текст на
   общей базовой линии), поэтому общий align-items:baseline сажает её невпопад
   относительно лэйбла. display:contents не мешает адресоваться к детям этой
   конкретной строки через обычный descendant-селектор — задаём center только им. */
.etrn-deal-title-details__row--status .etrn-deal-title-details__row-label,
.etrn-deal-title-details__row--status .etrn-deal-title-details__row-value {
    align-self: center;
}

/* Ext layout:'auto' молча добавляет служебный <div class="x-clear"> последним
   ребёнком КАЖДОГО такого контейнера (см. баг из сессии 4) — и у самой карточки
   (.__card/.__rows), и у каждой строки (.__row) внутри неё. Раньше это было
   безобидно (строка была независимым grid/flex-контейнером), но теперь, когда
   строка — display:contents, её x-clear стал бы ТРЕТЬИМ элементом родительского
   grid и сдвигал бы колонки во всех следующих строках. Прячем оба уровня x-clear
   внутри карточек с этим паттерном. */
.etrn-deal-title-details__card .x-clear,
.etrn-deal-waiting-signature__rows .x-clear {
    display: none;
}

/* «Что сейчас происходит» больше не через SectionCard (см. waitingSignaturePanel.js) —
   заголовок снаружи, а сама рамка списка — тот же паттерн и почти тот же вид,
   что у .etrn-deal-readiness__rows (список «Готовность к запуску Т1»): простая
   белая карточка с нейтральной рамкой, без запечённого внутрь заголовка. Сама
   карточка — grid-контейнер для строк-детей (см. выше, вариант 4). */
.etrn-deal-waiting-signature__rows {
    border: 1px solid #e2e6ec;
    border-radius: 8px;
    width: 50%;
    padding: 10px 14px;
    display: grid;
    grid-template-columns: max-content minmax(0, 1fr);
    column-gap: 20px;
    row-gap: 10px;
    align-items: baseline;
}

/* «Информация по титулу» больше не через SectionCard — та же простая белая
   карточка с нейтральной рамкой, что у .etrn-deal-readiness__rows и
   .etrn-deal-waiting-signature__rows, заголовок снаружи (см. titleDetailsPanel.js).
   DEV-1112 сессия 8, вариант 2 (по выбору пользователя вместо варианта 4 — было
   решено, что здесь полей достаточно много и одна колонка оставляет широкой
   карточке мало содержания): карточка — flex-строка из 2 под-колонок
   (.__col), каждая — свой grid-контейнер строк-детей (та же техника
   display:contents на строке, что и в варианте 4, просто теперь два таких grid'а
   рядом, а не один на всю карточку). */
.etrn-deal-title-details__card {
    border: 1px solid #e2e6ec;
    border-radius: 8px;
    padding: 10px 14px;
    flex: 1;
    display: flex;
    justify-content: space-between;   /* было gap:32px + flex:1 на колонках — теперь
                                          обе колонки сами по себе shrink-to-fit
                                          (см. .__col ниже), а карточка сама
                                          раздвигает их к краям, чтобы левый и
                                          правый паддинг были визуально одинаковы */
}

.etrn-deal-title-details__col {
    flex: none;
    min-width: 0;
    display: grid;
    /*grid-template-columns: max-content minmax(0, 1fr);*/
    column-gap: 20px;   /* было 16px — увеличено по просьбе (лэйбл→значение "тесно") */
    row-gap: 12px;
    align-items: baseline;
}

/* .__actions — теперь только позиционирующая обёртка (ширина/отступ слева),
   сам видимый бокс с рамкой — .__actions-box ниже, вокруг одних только строк
   действий, заголовок «Действия» — снаружи, тем же паттерном. */
.etrn-deal-title-details__actions {
    width: 220px;
    flex: none;
    margin-left: 16px;
    display: flex;
    flex-direction: column;
}

/* flex:1 — .body теперь stretch (не flex-start), обе колонки одной высоты по
   самой высокой; здесь растягиваем именно рамку с действиями (не заголовок
   над ней) на всю освободившуюся высоту, вровень с карточкой «Информация по
   титулу» слева, а не только по верхнему краю. */
.etrn-deal-title-details__actions-box {
    border: 1px solid #e2e6ec;
    border-radius: 8px;
    padding: 6px;
    flex: 1;
}

.etrn-deal-summary-card {
    width: 50%;
    border: 1px solid #e2e6ec;
    border-radius: 8px;
    padding: 12px 14px;
}

.etrn-deal-summary-row {
    padding: 8px 0;
    border-bottom: 1px dashed #e2e6ec;
}

.etrn-deal-summary-row:last-child {
    border-bottom: none;
}

.etrn-deal-summary-row__title {
    font-weight: 600;
    color: #1E1E1E;
}

.etrn-deal-summary-row__text {
    font-size: 13px;
    color: #4a4a4a;
    margin-top: 2px;
}

.etrn-deal-stub {
    padding: 40px 16px;
    text-align: center;
}

.etrn-deal-stub__title {
    font-size: 16px;
    font-weight: 600;
    color: #1E1E1E;
    margin-bottom: 8px;
}

.etrn-deal-stub__text {
    color: #4a4a4a;
    max-width: 480px;
    margin: 0 auto;
}

.etrn-deal-error-overlay {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    background: #fdf1e3;
    border: 1px solid #f3d9b3;
    border-radius: 6px;
    padding: 10px 12px;
}

.etrn-deal-error-overlay__icon {
    flex: none;
    margin-top: 2px;
}

.etrn-deal-error-overlay__text {
    color: #c62828;
    font-size: 13px;
}

.etrn-deal-history-grid .x-grid-cell {
    vertical-align: middle !important;
}

/* Рамка грида по умолчанию (тема ExtJS, .x-panel-default/.x-grid-header-ct) —
   синяя (#99bce8); заменяем на нейтральный серый, как у остальных карточек
   ЭТрН (см. .etrn-deal-title-details__card и др. выше, border: #e2e6ec). */
.etrn-deal-history-grid.x-panel-default {
    border-color: #e2e6ec;
}

.etrn-deal-history-grid .x-grid-header-ct {
    border-color: #e2e6ec;
}

.etrn-deal-history-grid .x-grid-body {
    border-color: #e2e6ec;!important;
}

.etrn-outline-btn {
    border: 1px solid #2F5B5D !important;
    background: #fff !important;
    border-radius: 6px !important;
}

.etrn-outline-btn .x-btn-inner {
    color: #2F5B5D;
    font-weight: 500;
}

.etrn-outline-btn:hover {
    background: rgba(47, 91, 93, 0.08) !important;
}

.etrn-deal-action-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 6px;
    border-radius: 6px;
    cursor: pointer;
}

.etrn-deal-action-row:hover {
    background: rgba(47, 91, 93, 0.08);
}

.etrn-deal-action-row__icon {
    flex: none;
    width: 24px;
    height: 24px;
    border-radius: 4px;
    background: rgba(47, 91, 93, 0.14);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #2F5B5D;
    line-height: 0;
}

.etrn-deal-action-row__label {
    font-size: 13px;
    font-weight: 500;
    color: #2F5B5D;
}