/* ===== Общий контейнер ЛК ===== */

.moex-trading-account {
    max-width: 1080px;
    margin: 0 auto 40px;
    padding: 16px;
    font-size: 14px;
    line-height: 1.5;
}

.moex-trading-account h2 {
    margin-top: 0;
    margin-bottom: 1.2rem;
}

.moex-trading-account h3 {
    margin-top: 1.2rem;
    margin-bottom: 0.6rem;
}

/* ===== Макет: меню + контент ===== */

.moex-account-layout {
    display: flex;
    gap: 18px;
}

.moex-account-menu {
    width: 220px;
    flex-shrink: 0;
}

.moex-account-content {
    flex: 1;
}

/* Меню: десктоп */

.moex-account-menu-desktop {
    display: block;
}

.moex-account-menu-desktop button {
    display: block;
    width: 100%;
    text-align: left;
    border: none;
    background: transparent;
    padding: 8px 10px;
    margin: 0 0 4px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 14px;
    box-sizing: border-box;
}

.moex-account-menu-desktop button:hover {
    background: #f3f4f6;
}

.moex-account-menu-desktop button.is-active {
    background: #007cba;
    color: #ffffff;
}

/* Меню: мобильное (по умолчанию скрыто, показывается в media) */

.moex-account-menu-mobile {
    display: none;
    margin-bottom: 10px;
}

.moex-account-menu-mobile select {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    padding: 6px 8px;
    border-radius: 6px;
    border: 1px solid #d0d7de;
    background: #ffffff;
    font-size: 14px;
}

/* ===== Вкладки ===== */

.moex-tab {
    display: none;
}

.moex-tab.is-active {
    display: block;
}

/* ===== Секции внутри вкладок ===== */

.moex-section {
    margin-bottom: 20px;
    padding: 16px 18px;
    border: 1px solid #e5e5e5;
    border-radius: 8px;
    background: #fafafa;
}

.moex-section--summary {
    background: #ffffff;
}

.moex-trading-account p {
    margin: 0.3rem 0;
}

.moex-trading-account ul {
    margin: 0.4rem 0 0.4rem 1.2rem;
}

/* Кнопки */

.moex-trading-account .button-primary {
    padding: 4px 16px;
    font-size: 13px;
}

/* ===== Таблицы (инструменты и чаты) ===== */

.moex-table-instruments,
.moex-table-chats {
    width: 100%;
    margin-top: 10px;
    border-collapse: collapse;
    border: 1px solid #ddd;
    font-size: 13px;
    background: #ffffff;
}

.moex-table-instruments thead,
.moex-table-chats thead {
    background: #f5f5f5;
}

.moex-table-instruments th,
.moex-table-instruments td,
.moex-table-chats th,
.moex-table-chats td {
    padding: 6px 8px;
    border-bottom: 1px solid #eee;
    text-align: left;
    vertical-align: middle;
}

.moex-table-instruments tr:last-child td,
.moex-table-chats tr:last-child td {
    border-bottom: none;
}

.moex-table-instruments td code,
.moex-table-chats td code {
    background: transparent;
    padding: 0;
}

/* ===== Сообщения ===== */

.moex-msg {
    padding: 8px 12px;
    border-radius: 4px;
    margin-bottom: 10px;
    font-size: 13px;
}

.moex-msg--success {
    background: #e6f7eb;
    color: #156f2b;
    border: 1px solid #c2e5cc;
}

.moex-msg--error {
    background: #fdeaea;
    color: #b03030;
    border: 1px solid #f2c2c2;
}

.moex-msg--warning {
    background: #fff7e6;
    color: #7a4a00;
    border: 1px solid #ffe1a6;
}

/* ===== Адаптив ===== */

@media (max-width: 960px) {
    .moex-trading-account {
        padding: 12px;
    }
}

@media (max-width: 768px) {

    .moex-account-layout {
        flex-direction: column;
    }

    .moex-account-menu {
        width: 100%;
        margin-bottom: 8px;
    }

    /* Меню: на мобиле показываем select, скрываем боковые кнопки */

    .moex-account-menu-desktop {
        display: none;
    }

    .moex-account-menu-mobile {
        display: block;
    }

    .moex-section {
        padding: 12px 12px;
        margin-bottom: 16px;
        box-sizing: border-box;
        max-width: 100%;
        overflow-x: hidden; /* на всякий случай обрезаем то, что решит вылезти */
    }

    .moex-trading-account h2 {
        font-size: 20px;
    }

    .moex-trading-account h3 {
        font-size: 16px;
    }

    /* Таблицы → карточки */

    .moex-table-instruments thead,
    .moex-table-chats thead {
        display: none;
    }

    .moex-table-instruments,
    .moex-table-chats,
    .moex-table-instruments tbody,
    .moex-table-chats tbody,
    .moex-table-instruments tr,
    .moex-table-chats tr {
        display: block;
        width: 100%;
        box-sizing: border-box;
        max-width: 100%;
    }

    .moex-table-instruments tr,
    .moex-table-chats tr {
        border-bottom: 1px solid #ddd;
        margin-bottom: 10px;
        padding: 6px 8px;
        border-radius: 6px;
        background: #ffffff;
    }

    .moex-table-instruments td,
    .moex-table-chats td {
        display: flex;
        border: none;
        padding: 3px 2px;
        align-items: flex-start;
        flex-wrap: wrap;
        box-sizing: border-box;
        max-width: 100%;
    }

    .moex-table-instruments td[data-label]::before,
    .moex-table-chats td[data-label]::before {
        content: attr(data-label) ": ";
        font-weight: 600;
        margin-right: 6px;
        display: inline-block;
        min-width: 0;
        flex: 0 0 auto;
        white-space: nowrap;
    }

    .moex-table-instruments td code,
    .moex-table-chats td code {
        word-break: break-word;
    }
}