/* Dynamic coupon strategy v1 */


/* =========================================================
   ОБЩИЕ БЛОКИ СТРАТЕГИИ
   ========================================================= */

.strategy-horizon-note {
    display: flex;
    flex-direction: column;
    gap: .35rem;

    padding: .85rem .95rem;

    border: 1px solid rgba(141, 124, 255, .28);
    border-radius: .8rem;

    background: rgba(141, 124, 255, .06);
}

.strategy-horizon-note span {
    color: var(--muted);
    font-size: .86rem;
    line-height: 1.5;
}


.strategy-plan-card {
    margin-bottom: 1rem;
}

.strategy-plan-list {
    display: grid;
    gap: .55rem;
}


.strategy-plan-row {
    display: grid;

    grid-template-columns:
        minmax(125px, 1.1fr)
        90px
        90px
        90px
        minmax(150px, 1fr)
        minmax(145px, .9fr)
        auto;

    gap: .8rem;
    align-items: center;

    padding: .8rem;

    border: 1px solid var(--border);
    border-radius: .85rem;

    background: #0e1628;
}

.strategy-plan-row.is-closed {
    opacity: .78;
    background: rgba(94, 230, 168, .035);
}


.strategy-plan-bond,
.strategy-plan-number,
.strategy-plan-cost {
    display: flex;
    flex-direction: column;
    gap: .2rem;
}

.strategy-plan-bond span,
.strategy-plan-number span,
.strategy-plan-cost span,
.strategy-plan-progress small {
    color: var(--muted);
    font-size: .78rem;
}

.strategy-plan-number strong {
    font-size: 1.15rem;
}

.strategy-plan-progress {
    min-width: 0;
}


/* =========================================================
   ОБЩИЙ ПРОГРЕСС
   ========================================================= */

.strategy-progress-line {
    width: 100%;
    height: 7px;

    margin-bottom: .35rem;

    overflow: hidden;

    border: 1px solid var(--border);
    border-radius: 999px;

    background: #0a1020;
}

.strategy-progress-line > span {
    display: block;

    height: 100%;
    max-width: 100%;

    border-radius: inherit;

    background: linear-gradient(
        90deg,
        #7565ff,
        #9f92ff
    );
}


.strategy-closed-label {
    color: #7de5b0;
    white-space: nowrap;
}


/* =========================================================
   РЕКОМЕНДАЦИИ
   ========================================================= */

.recommendation-strategy-stats {
    display: flex;
    flex-wrap: wrap;

    gap: .55rem;

    margin-top: .85rem;
}

.recommendation-strategy-stats > div {
    min-width: 92px;

    display: flex;
    flex-direction: column;

    gap: .18rem;

    padding: .5rem .65rem;

    border: 1px solid rgba(141, 124, 255, .24);
    border-radius: .7rem;

    background: rgba(141, 124, 255, .07);
}

.recommendation-strategy-stats span {
    color: var(--muted);
    font-size: .72rem;
}

.recommendation-strategy-stats strong {
    font-size: 1.05rem;
}


/* =========================================================
   ЦЕЛЬ
   ========================================================= */

.strategy-goal-strip {
    display: grid;

    grid-template-columns:
        repeat(5, minmax(0, 1fr));

    gap: .7rem;

    margin-bottom: 1rem;
}

.strategy-goal-strip > div {
    display: flex;
    flex-direction: column;
    gap: .25rem;
}

.strategy-goal-strip span {
    color: var(--muted);
    font-size: .78rem;
}


.strategy-recommendation {
    align-items: flex-start;
}

.recommendation-banner-actions {
    flex: 0 0 auto;

    display: flex;
    gap: .55rem;
}


/* =========================================================
   КОМПАКТНАЯ ТАБЛИЦА ОФЗ
   ========================================================= */

.strategy-bond-table {
    width: 100%;

    /*
       ВАЖНО:
       таблица больше не имеет фиксированной минимальной
       ширины 1450/1850px и поэтому не выталкивает
       последнюю колонку за экран.
    */
    min-width: 0;
    max-width: 100%;

    table-layout: fixed;
    box-sizing: border-box;
}


/* Заголовки */

.strategy-bond-table th {
    font-size: 10px;
    line-height: 1.15;

    padding-left: 6px;
    padding-right: 6px;

    white-space: normal;

    vertical-align: middle;
}


/* Основной текст */

.strategy-bond-table td {
    font-size: 14px;

    padding-left: 6px;
    padding-right: 6px;

    vertical-align: middle;
}


/* Дополнительный мелкий текст */

.strategy-bond-table td small {
    display: block;

    margin-top: .2rem;

    color: var(--muted);

    font-size: 11px;
}


.strategy-row-closed {
    background: rgba(94, 230, 168, .025);
}


/* =========================================================
   ШИРИНА СТОЛБЦОВ
   ========================================================= */


/* 1. Стратегия */

.strategy-bond-table th:nth-child(1),
.strategy-bond-table td:nth-child(1) {
    width: 42px;
}


/* 2. ОФЗ */

.strategy-bond-table th:nth-child(2),
.strategy-bond-table td:nth-child(2) {
    width: 54px;
}


/* 3. Тип */

.strategy-bond-table th:nth-child(3),
.strategy-bond-table td:nth-child(3) {
    width: 44px;
}


/* 4. Цена */

.strategy-bond-table th:nth-child(4),
.strategy-bond-table td:nth-child(4) {
    width: 54px;
}


/* 5. НКД */

.strategy-bond-table th:nth-child(5),
.strategy-bond-table td:nth-child(5) {
    width: 34px;
}


/* 6. К оплате */

.strategy-bond-table th:nth-child(6),
.strategy-bond-table td:nth-child(6) {
    width: 44px;
}


/* 7. Котировка */

.strategy-bond-table th:nth-child(7),
.strategy-bond-table td:nth-child(7) {
    width: 44px;
}


/* 8. Доходность */

.strategy-bond-table th:nth-child(8),
.strategy-bond-table td:nth-child(8) {
    width: 44px;
}


/* 9. Купон */

.strategy-bond-table th:nth-child(9),
.strategy-bond-table td:nth-child(9) {
    width: 40px;
}


/* 10. Следующий купон */

.strategy-bond-table th:nth-child(10),
.strategy-bond-table td:nth-child(10) {
    width: 54px;
}


/* 11. В портфеле */

.strategy-bond-table th:nth-child(11),
.strategy-bond-table td:nth-child(11) {
    width: 44px;
}


/* 12. Нужно по стратегии */

.strategy-bond-table th:nth-child(12),
.strategy-bond-table td:nth-child(12) {
    width: 44px;
}


/* 13. Осталось купить */

.strategy-bond-table th:nth-child(13),
.strategy-bond-table td:nth-child(13) {
    width: 40px;
}


/* 14. Прогресс */

.strategy-bond-table th:nth-child(14),
.strategy-bond-table td:nth-child(14) {
    width: 44px;
}


/* 15. Погашение */

.strategy-bond-table th:nth-child(15),
.strategy-bond-table td:nth-child(15) {
    width: 54px;
}


/* 16. Купить */

.strategy-bond-table th:nth-child(16),
.strategy-bond-table td:nth-child(16) {
    width: 38px;
}


/* =========================================================
   ПРОГРЕСС В ТАБЛИЦЕ
   ========================================================= */

.strategy-table-progress {
    /*
       Раньше здесь было min-width: 72px,
       из-за чего колонка расталкивала таблицу.
    */

    width: 100%;
    min-width: 0;
    max-width: 100%;
}

.strategy-table-progress .strategy-progress-line {
    width: 100%;
    min-width: 0;
    max-width: 100%;

    height: 6px;
}


/* =========================================================
   КНОПКА ПОКУПКИ
   ========================================================= */

.strategy-buy-cell {
    text-align: center;

    padding-left: 2px !important;
    padding-right: 2px !important;
}


.strategy-buy-icon {
    width: 30px;
    height: 30px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    border: 1px solid rgba(141, 124, 255, .35);
    border-radius: 8px;

    background: rgba(141, 124, 255, .12);
    color: #c8c1ff;

    transition:
        background .15s ease,
        border-color .15s ease,
        transform .15s ease;
}


.strategy-buy-icon svg {
    width: 17px;
    height: 17px;

    fill: none;

    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}


.strategy-buy-icon:hover {
    background: rgba(141, 124, 255, .25);

    border-color: rgba(141, 124, 255, .65);

    transform: translateY(-1px);
}


/* =========================================================
   АДАПТИВ
   ========================================================= */

@media (max-width: 1200px) {

    .strategy-plan-row {
        grid-template-columns:
            minmax(150px, 1.2fr)
            repeat(3, 80px)
            minmax(150px, 1fr);
    }

    .strategy-plan-cost,
    .strategy-plan-row > .btn {
        grid-column: span 2;
    }

    .strategy-goal-strip {
        grid-template-columns:
            repeat(3, minmax(0, 1fr));
    }
}


/* На телефоне те же данные читаются карточками; desktop-таблица неизменна. */
@media (max-width: 850px) {
    .strategy-bond-wrap {
        padding: 0;
        border: 0;
        background: transparent;
        box-shadow: none;
        overflow: visible;
    }

    .strategy-bond-table,
    .strategy-bond-table tbody {
        display: block;
        width: 100%;
    }

    .strategy-bond-table thead {
        position: absolute;
        width: 1px;
        height: 1px;
        padding: 0;
        overflow: hidden;
        clip-path: inset(50%);
    }

    .strategy-bond-table tbody tr {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0 1rem;
        margin-bottom: 1rem;
        padding: 1rem;
        border: 1px solid var(--border);
        border-radius: 1rem;
        background: var(--panel);
    }

    .strategy-bond-table tbody tr.strategy-row {
        border-color: rgba(141, 124, 255, .35);
    }

    .strategy-bond-table tbody tr > td[data-label] {
        display: block;
        width: auto;
        min-width: 0;
        padding: .7rem 0;
        font-size: 14px;
        line-height: 1.45;
        overflow-wrap: anywhere;
    }

    .strategy-bond-table td[data-label]::before {
        content: attr(data-label);
        display: block;
        margin-bottom: .3rem;
        color: var(--muted);
        font-size: 11px;
    }

    .strategy-bond-table td[data-label="ОФЗ"],
    .strategy-bond-table td[data-label="Стратегия"],
    .strategy-bond-table td[data-label="Прогресс"],
    .strategy-bond-table td[data-label="Покупка"] {
        grid-column: 1 / -1;
    }

    .strategy-bond-table td[data-label="ОФЗ"] {
        order: -2;
        padding-top: 0;
    }

    .strategy-bond-table td[data-label="ОФЗ"] > strong {
        font-size: 20px;
    }

    .strategy-bond-table td[data-label="Стратегия"] {
        order: -1;
    }

    .strategy-bond-table td[data-label="Стратегия"] small {
        display: inline;
        margin-left: .5rem;
    }

    .strategy-bond-table td[data-label="Прогресс"] {
        order: 1;
    }

    .strategy-bond-table td[data-label="Покупка"] {
        order: 2;
        border-bottom: 0;
        padding-bottom: 0;
    }

    .strategy-bond-table td[data-label="Покупка"]::before {
        display: none;
    }

    .strategy-bond-table .strategy-buy-icon {
        width: 100%;
        min-height: 44px;
        gap: .65rem;
    }

    .strategy-bond-table .strategy-buy-icon::after {
        content: "Оформить покупку";
    }

    .strategy-bond-table .empty {
        grid-column: 1 / -1;
        border-bottom: 0;
    }
}

@media (max-width: 760px) {

    .strategy-plan-row {
        grid-template-columns:
            repeat(3, minmax(0, 1fr));
    }

    .strategy-plan-bond,
    .strategy-plan-progress,
    .strategy-plan-cost,
    .strategy-plan-row > .btn {
        grid-column: 1 / -1;
    }

    .strategy-goal-strip {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

    .strategy-recommendation {
        flex-direction: column;
    }

    .recommendation-banner-actions {
        width: 100%;
    }
}


@media (max-width: 480px) {

    .strategy-plan-row,
    .strategy-goal-strip {
        grid-template-columns: 1fr;
    }

    .strategy-plan-bond,
    .strategy-plan-progress,
    .strategy-plan-cost,
    .strategy-plan-row > .btn {
        grid-column: auto;
    }
}