/* =========================================================
   BRAVO CRM — MOBILE RESPONSIVE OVERRIDES
   Только @media-правила для адаптации под мобильные.
   НЕ меняет существующие стили — только добавляет.
   ========================================================= */


/* ==========================================================
   ▸ GLOBAL / BASE
   ========================================================== */

@media (max-width: 768px) {
    .content-wrapper {
        padding-top: 105px !important;
    }

    .content-wrapper > .container {
        padding-left: 14px;
        padding-right: 14px;
    }

    .assets--wide {
        padding-left: 10px;
        padding-right: 10px;
    }
}

@media (max-width: 480px) {
    .content-wrapper {
        padding-top: 97px !important;
    }

    .content-wrapper > .container {
        padding-left: 10px;
        padding-right: 10px;
    }
}


/* ==========================================================
   ▸ HEADER / NAV
   ========================================================== */

@media (max-width: 768px) {
    .header__wrapper {
        padding: 12px 0;
    }

    .header__actions {
        gap: 6px;
    }

    .nav-btn {
        padding: 6px 12px;
        font-size: 12px;
    }

    .nav-btn--buy {
        margin-right: 0;
    }

    .theme-toggle,
    .theme-toggle--fixed {
        width: 36px;
        height: 36px;
        font-size: 16px;
    }

    .bravo-logo-text {
        font-size: 18px;
        letter-spacing: 3px;
    }

    .search-trigger {
        padding: 5px 10px;
        font-size: 12px;
    }

    .search-trigger__kbd {
        display: none;
    }

    .header-sep {
        height: 20px;
        margin: 0;
    }

    .lang-compact__btn {
        padding: 5px 7px;
        font-size: 11px;
    }

    .lang-compact__btn span {
        display: none;
    }

    .lang-compact__chevron {
        display: none;
    }

    .user-chip__avatar {
        width: 30px;
        height: 30px;
    }

    .user-chip__avatar svg {
        width: 14px;
        height: 14px;
    }

    .user-chip__chevron {
        display: none;
    }
}

@media (max-width: 480px) {
    .header__actions {
        gap: 4px;
    }

    .nav-btn {
        padding: 5px 10px;
        font-size: 11px;
    }

    .bravo-logo-text {
        font-size: 16px;
        letter-spacing: 2px;
    }

    .header-impersonation__body {
        display: none;
    }

    .search-trigger span,
    .search-trigger svg {
        /* Keep icon only on very small screens */
    }

    .theme-toggle {
        width: 32px;
        height: 32px;
        font-size: 14px;
    }

    .user-chip__avatar {
        width: 28px;
        height: 28px;
    }

    .user-chip__avatar svg {
        width: 12px;
        height: 12px;
    }

    .lang-compact__btn {
        padding: 4px 6px;
    }

    .lang-compact__btn svg:first-child {
        width: 12px;
        height: 12px;
    }
}


/* ==========================================================
   ▸ DASHBOARD
   ========================================================== */

@media (max-width: 768px) {
    .dashboard {
        gap: 20px;
    }

    .balance-card__label {
        font-size: 11px;
    }

    .balance-card__change {
        font-size: 12px;
        padding: 3px 8px;
    }

    .balance-card__sub {
        font-size: 13px;
    }

    .security-grid {
        flex-direction: column;
        gap: 12px;
    }

    .security-item {
        min-width: 0;
        width: 100%;
    }

    .info-card {
        padding: 18px;
    }

    .info-card__head {
        margin-bottom: 14px;
    }

    .info-card__title {
        font-size: 15px;
    }
}

@media (max-width: 480px) {
    .dashboard {
        gap: 16px;
    }

    .balance-card__amount {
        font-size: 26px;
    }

    .balance-card {
        padding: 18px 16px;
    }

    .quick-actions {
        grid-template-columns: 1fr 1fr;
        gap: 10px;
    }

    .quick-action {
        padding: 12px;
        gap: 10px;
        flex-direction: column;
        align-items: flex-start;
    }

    .quick-action__name {
        font-size: 13px;
    }

    .quick-action__icon {
        width: 32px;
        height: 32px;
    }

    .info-card {
        padding: 14px;
        border-radius: 14px;
    }

    .asset-row {
        padding: 10px 8px;
        margin: 0 -8px;
    }

    .activity-row {
        gap: 10px;
        padding: 10px 6px;
        margin: 0 -6px;
    }

    .activity-row__icon {
        width: 32px;
        height: 32px;
    }

    .activity-row__amount {
        font-size: 12px;
    }

    .security-item {
        padding: 12px 14px;
    }
}


/* ==========================================================
   ▸ PORTFOLIO / ASSETS (pf__*)
   ========================================================== */

@media (max-width: 768px) {
    .pf__header {
        flex-direction: column;
        align-items: flex-start;
        gap: 14px;
        margin-bottom: 22px;
    }

    .pf__title {
        font-size: 20px;
    }

    .pf__summary {
        grid-template-columns: 1fr;
        gap: 12px;
        margin-bottom: 20px;
    }

    .pf__big {
        font-size: 24px;
    }

    .pf__value {
        font-size: 26px;
    }

    .pf__card {
        padding: 18px 16px;
    }

    .pf__tabs {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        white-space: nowrap;
        flex-wrap: nowrap;
        width: 100%;
    }

    .pf__tab {
        flex-shrink: 0;
    }

    .pf__tableCard {
        padding: 16px !important;
        border-radius: 14px !important;
    }

    .pf__tableHead {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
        margin-bottom: 14px;
    }

    .pf__filters {
        width: 100%;
    }

    .pf__input,
    .pf__select {
        width: 100%;
        min-width: 0;
    }

    .pf__tableWrap {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        margin: 0 -16px;
        padding: 0 16px;
    }

    .pf__table {
        min-width: 600px;
    }

    .pf__table th,
    .pf__table td {
        padding: 10px 10px;
        font-size: 12px;
    }
}

@media (max-width: 480px) {
    .pf__title {
        font-size: 18px;
    }

    .pf__big {
        font-size: 20px;
    }

    .pf__value {
        font-size: 22px;
    }

    .pf__card {
        padding: 14px 12px;
        border-radius: 14px;
    }

    .pf__tableCard {
        padding: 12px !important;
        border-radius: 12px !important;
    }

    .pf__table {
        min-width: 520px;
    }
}


/* ==========================================================
   ▸ PORTFOLIO ASSETS TABLE (assets__row grid)
   ========================================================== */

@media (max-width: 768px) {
    .assets__tabs {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        flex-wrap: nowrap;
        white-space: nowrap;
        padding-bottom: 4px;
    }

    .assets__tab {
        flex-shrink: 0;
    }

    .assets__row--cols-tx7 {
        grid-template-columns: 120px 70px 80px 1fr 70px 100px 1fr 80px;
        font-size: 12px;
    }

    .assets__row--cols-tx6 {
        grid-template-columns: 120px 70px 80px 100px 1fr 80px;
        font-size: 12px;
    }

    .assets__row--cols-hist {
        grid-template-columns: 120px 80px 80px 100px 60px 100px 1fr 80px;
        font-size: 12px;
    }

    .assets__row {
        padding: 10px 12px;
    }
}

@media (max-width: 640px) {
    /* Переключаем grid-таблицу в карточный вид на маленьких экранах */
    .assets__row--head {
        display: none !important;
    }

    .assets__row--cols-tx7,
    .assets__row--cols-tx6,
    .assets__row--cols-hist {
        grid-template-columns: 1fr 1fr;
        gap: 6px 12px;
        padding: 12px 14px;
        border-radius: 12px;
        margin-bottom: 8px;
    }

    .assets__row {
        border-radius: 12px;
        margin-bottom: 8px;
    }
}


/* ==========================================================
   ▸ ORDERS LIST
   ========================================================== */

@media (max-width: 768px) {
    .orders-page {
        gap: 18px;
    }

    .orders-page__title {
        font-size: 20px;
    }

    .orders-filter {
        flex-direction: column;
        gap: 10px;
        padding: 12px 14px;
    }

    .orders-filter__input {
        min-width: 0;
        width: 100%;
    }

    .orders-filter__select {
        width: 100%;
    }
}

@media (max-width: 480px) {
    .orders-page__title {
        font-size: 18px;
    }

    .orders-list {
        border-radius: 14px;
    }
}


/* ==========================================================
   ▸ ORDER DETAIL
   ========================================================== */

@media (max-width: 768px) {
    .order-detail__head-card {
        padding: 18px 16px;
        border-radius: 14px;
    }

    .order-detail__head-label {
        font-size: 17px;
    }

    .order-detail__card {
        padding: 18px 16px;
        border-radius: 14px;
    }

    .order-detail__row {
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
    }

    .order-detail__row-value {
        text-align: left;
    }

    .order-detail__row-value--mono {
        text-align: left;
        max-width: 100%;
    }

    .order-detail__row-label {
        min-width: 0;
    }

    .order-detail__icon {
        width: 44px;
        height: 44px;
    }
}

@media (max-width: 480px) {
    .order-detail__head-card {
        flex-direction: column;
        align-items: flex-start;
        gap: 14px;
        padding: 16px 14px;
    }

    .order-detail__head-label {
        font-size: 16px;
    }

    .order-detail__card {
        padding: 14px 12px;
    }
}


/* ==========================================================
   ▸ SETTINGS
   ========================================================== */

@media (max-width: 768px) {
    .settings-page {
        gap: 18px;
    }

    .settings-page__title {
        font-size: 20px;
    }

    .settings-page__tabs {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        white-space: nowrap;
        flex-wrap: nowrap;
        max-width: 100%;
    }

    .settings-page__tab {
        flex-shrink: 0;
    }

    .settings-card {
        padding: 18px 16px;
        border-radius: 14px;
    }

    .settings-card__head {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
        margin-bottom: 18px;
        padding-bottom: 14px;
    }

    .settings-card__action-btn {
        align-self: flex-start;
    }

    .settings-card__expand {
        padding: 14px;
        margin-top: 16px;
    }

    .settings-banner {
        flex-direction: column;
        gap: 10px;
        padding: 14px 16px;
    }

    /* Whitelist items */
    .wl-item {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }

    .wl-item__right {
        align-self: flex-end;
    }

    .wl-item__left {
        width: 100%;
    }

    .wl-form-collapse {
        padding: 14px;
    }
}

@media (max-width: 480px) {
    .settings-page__title {
        font-size: 18px;
    }

    .settings-card {
        padding: 14px 12px;
    }

    .settings-card__head-left {
        gap: 10px;
    }

    .settings-card__icon {
        width: 36px;
        height: 36px;
    }

    .settings-card__title {
        font-size: 15px;
    }

    .sf-upload-field {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }
}


/* ==========================================================
   ▸ BANK ACCOUNTS  (ba-*)
   ========================================================== */

@media (max-width: 480px) {
    .ba-row {
        padding: 12px;
        gap: 8px;
    }
}


/* ==========================================================
   ▸ PAYMENT / OP SELECTOR
   ========================================================== */

@media (max-width: 768px) {
    .op {
        padding: 8px 10px 30px;
    }

    .op__head {
        margin-bottom: 24px;
    }

    .op__title {
        font-size: 22px;
    }

    .op__grid {
        grid-template-columns: 1fr;
        gap: 14px;
    }

    .op__card {
        padding: 16px 18px;
    }

    .sfpage {
        padding: 8px 10px 30px;
    }

    .sfcard__head {
        padding: 14px 14px 8px;
    }

    .sfcard__title {
        font-size: 18px;
    }

    .sfcard__body {
        padding: 14px;
    }

    .sfcard__icon {
        width: 38px;
        height: 38px;
    }

    .sfcalc {
        padding: 14px;
    }

    .sfcalc__value {
        font-size: 16px;
    }

    .sfinfo {
        padding: 14px;
    }
}

@media (max-width: 480px) {
    .op__title {
        font-size: 20px;
    }

    .op__card {
        padding: 14px 16px;
    }

    .sfcard__head {
        padding: 12px 12px 8px;
    }

    .sfcard__body {
        padding: 12px;
    }

    .sfcard__title {
        font-size: 16px;
    }

    .sf__btn {
        padding: 12px 16px;
        font-size: 14px;
    }
}


/* ==========================================================
   ▸ SEND FORM (sf__*)
   ========================================================== */

@media (max-width: 480px) {
    .sf__card {
        padding: 14px;
    }

    .sf__cardTitle {
        font-size: 14px;
    }

    .sf__qrImg {
        max-width: 160px;
    }

    .sf__addrWrap {
        padding: 8px 10px;
        gap: 8px;
    }

    .sf__addr {
        font-size: 12px;
    }

    .sf__calc.is-open {
        padding: 12px;
    }
}


/* ==========================================================
   ▸ PURCHASE FLOW  (pur-*)
   ========================================================== */

@media (max-width: 768px) {
    .pur-card__body {
        padding: 18px 16px;
    }

    .pur-card__head {
        padding: 14px 16px;
    }

    .pur-info {
        padding: 16px 18px;
    }

    .pur-steps {
        gap: 0;
    }

    .pur-row__value--big {
        font-size: 18px;
    }
}

@media (max-width: 480px) {
    .purchase-wrap {
        gap: 14px;
    }

    .pur-card__body {
        padding: 14px 12px;
    }

    .pur-card__head {
        padding: 12px;
        font-size: 13px;
    }

    .pur-field__input {
        height: 44px;
        font-size: 14px;
    }

    .pur-btn {
        height: 42px;
        font-size: 13px;
        padding: 0 18px;
    }

    .pur-info {
        padding: 14px 16px;
    }
}


/* ==========================================================
   ▸ TOTAL PROCESSING (tp-*)
   ========================================================== */

@media (max-width: 480px) {
    .tp-card {
        padding: 18px 14px;
    }

    .tp-amount-value {
        font-size: 26px;
    }
}


/* ==========================================================
   ▸ PAYMENT METHOD CARDS
   ========================================================== */

@media (max-width: 480px) {
    .payment-method-card {
        padding: 14px;
        border-radius: 12px;
    }
}


/* ==========================================================
   ▸ 2FA SETTINGS  (tf-*)
   ========================================================== */

@media (max-width: 768px) {
    .tf-form__row {
        flex-direction: column;
    }

    .tf-input--short {
        max-width: 100%;
        flex: 1;
    }

    .tf-qr-wrap {
        flex-direction: column;
        align-items: center;
    }

    .tf-secret-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 6px;
    }

    .tf-secret {
        word-break: break-all;
        max-width: 100%;
    }

    .tf-actions {
        width: 100%;
    }

    .tf-actions .brand-btn,
    .tf-actions button.brand-btn {
        width: 100%;
        justify-content: center;
    }
}

@media (max-width: 480px) {
    .tf-card__head {
        padding: 14px 14px;
    }

    .tf-card__body {
        padding: 14px 14px;
    }

    .tf-card__badge {
        position: static;
        margin-top: 8px;
        grid-column: 2;
    }
}


/* ==========================================================
   ▸ SEARCH MODAL
   ========================================================== */

@media (max-width: 768px) {
    .search-modal {
        padding-top: 8vh;
    }

    .search-modal__box {
        max-width: calc(100% - 24px);
        border-radius: 16px;
    }

    .search-modal__results {
        max-height: 50vh;
    }
}


/* ==========================================================
   ▸ AUTH PAGES
   ========================================================== */

@media (max-width: 768px) {
    .bravo-auth__heroTitle {
        font-size: 26px;
    }

    .bravo-auth__heroText {
        font-size: 14px;
    }

    .bravo-auth__heroList li {
        font-size: 13px;
    }

    .bravo-auth__heroInner {
        padding: 24px 22px;
    }

    .bravo-auth__body {
        padding: 26px 22px 20px;
    }

    /* Registration stepper */
    .reg-stepper__dot {
        width: 30px;
        height: 30px;
        font-size: 11px;
    }

    .reg-stepper__label {
        font-size: 10px;
    }

    .reg-step-hero {
        padding: 14px 16px 12px;
        gap: 10px;
    }

    .reg-step-hero__icon {
        width: 36px;
        height: 36px;
    }

    .reg-step-hero__title {
        font-size: 14px;
    }
}

@media (max-width: 480px) {
    .bravo-auth__heroTitle {
        font-size: 22px;
    }

    .bravo-auth__hero {
        min-height: 0;
    }

    .bravo-auth__heroInner {
        padding: 20px 18px;
        gap: 10px;
    }

    .bravo-auth__body {
        padding: 20px 16px 16px;
    }

    .reg-stepper__label {
        display: none;
    }

    .reg-stepper__line {
        margin-bottom: 0;
    }
}


/* ==========================================================
   ▸ MODALS (redesign)
   ========================================================== */

@media (max-width: 480px) {
    .modal-content {
        border-radius: 12px;
    }

    .modal-close {
        top: 12px;
        right: 16px;
    }
}


/* ==========================================================
   ▸ FOOTER
   ========================================================== */

@media (max-width: 480px) {
    .site-footer {
        margin-top: 40px;
    }
}


/* ==========================================================
   ▸ TABLES & DATAGRIDS (prevent horizontal overflow)
   ========================================================== */

@media (max-width: 768px) {
    /* b-table mobile card стили уже в redesign.css для min-width:0;
       здесь добавляем доп. адаптации */
    .card__body .table {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .card__body .b-table {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
}


/* ==========================================================
   ▸ UTILITY: prevent horizontal overflow on body
   ========================================================== */

@media (max-width: 768px) {
    html, body {
        overflow-x: hidden;
    }
}


/* ==========================================================
   ▸ FLASH MESSAGES / ALERTS
   ========================================================== */

@media (max-width: 480px) {
    .alert-dismissible {
        top: 90px;
        max-width: calc(100% - 24px);
    }

    .bravo-flash {
        padding: 10px 12px !important;
    }
}


/* ==========================================================
   ▸ RESULT PAGES / ICONS
   ========================================================== */

@media (max-width: 480px) {
    .result-icon {
        width: 80px;
        height: 80px;
        font-size: 36px;
    }
}


/* ==========================================================
   ▸ FORM ELEMENTS GLOBAL
   ========================================================== */

@media (max-width: 768px) {
    /* Prevent zoom on input focus on iOS */
    input[type="text"],
    input[type="email"],
    input[type="password"],
    input[type="number"],
    input[type="tel"],
    select,
    textarea {
        font-size: 16px !important;
    }
}


/* ==========================================================
   ▸ ONCHAIN TX DETAIL
   ========================================================== */

@media (max-width: 768px) {
    .txd__top {
        flex-direction: column;
        align-items: flex-start;
    }

    .txd__header {
        flex-direction: column;
        align-items: flex-start;
        padding: 18px 16px;
        gap: 12px;
    }

    .txd__title {
        font-size: 17px;
    }

    .txd__summary {
        flex-direction: column;
        gap: 16px;
        padding: 16px 18px;
    }

    .txd__summaryRight {
        width: 100%;
        justify-content: space-between;
    }

    .txd__card {
        padding: 16px;
    }

    .txd__row {
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
    }
}

@media (max-width: 480px) {
    .txd__header {
        padding: 14px 12px;
        border-radius: 14px;
    }

    .txd__title {
        font-size: 16px;
    }

    .txd__amount {
        font-size: 20px;
    }

    .txd__card {
        padding: 12px;
        border-radius: 14px;
    }

    .txd__summary {
        padding: 14px;
        border-radius: 14px;
    }

    .txd__meta {
        gap: 6px;
    }

    .txd__pill {
        font-size: 11px;
        padding: 3px 8px;
    }
}


/* ==========================================================
   ▸ VERIFY 2FA PAGE
   ========================================================== */

@media (max-width: 768px) {
    .verify__card {
        padding: 20px 16px;
        border-radius: 14px;
    }

    .verify__head {
        flex-direction: column;
        gap: 8px;
    }

    .verify__title {
        font-size: 18px;
    }

    .verify__actions {
        flex-direction: column;
    }
}

@media (max-width: 480px) {
    .verify__card {
        padding: 16px 14px;
    }
}


/* ==========================================================
   ▸ ANIMATIONS — reduce motion on mobile for performance
   ========================================================== */

@media (max-width: 768px) {
    /* Отключаем hover-анимации на мобильных */
    .quick-action:hover,
    .op__card:hover,
    .balance-card:hover,
    .pf__card:hover {
        transform: none;
    }

    .quick-action:hover::before,
    .op__card:hover::before {
        opacity: 0;
    }

    .quick-action:hover::after,
    .op__card:hover::after {
        opacity: 0;
    }

    .asset-row:hover,
    .assets__row:hover,
    .activity-row:hover {
        transform: none;
    }

    /* Background ambience — убираем плавающую анимацию */
    body::after {
        animation: none;
    }
}


/* ==========================================================
   ▸ ONBOARDING WIZARD (ob-*)
   ========================================================== */

@media (max-width: 768px) {
    .ob-page {
        padding-bottom: 40px;
    }

    .ob-hd {
        margin-top: 20px;
    }

    .ob-title {
        font-size: 22px;
    }

    /* Progress steps: compact horizontal scroll */
    .ob-progress {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        flex-wrap: nowrap;
        padding-bottom: 4px;
        gap: 8px;
    }

    .ob-step {
        flex-shrink: 0;
        min-width: 120px;
        padding: 10px 14px;
    }

    .ob-card {
        padding: 22px 18px;
        border-radius: 16px;
    }

    .ob-card__title {
        font-size: 16px;
    }

    /* Form grid: always single column */
    .ob-form-grid {
        grid-template-columns: 1fr;
    }

    /* Actions bar */
    .ob-actions {
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
    }

    .ob-btn {
        justify-content: center;
    }

    /* Document upload section */
    .ob-field--file {
        flex-direction: column;
        align-items: flex-start;
    }
}

@media (max-width: 480px) {
    .ob-hd {
        margin-top: 12px;
    }

    .ob-title {
        font-size: 19px;
    }

    .ob-subtitle {
        font-size: 13px;
    }

    /* Stack progress steps vertically on very small phones */
    .ob-progress {
        flex-direction: column;
        overflow-x: visible;
        gap: 6px;
    }

    .ob-step {
        min-width: 0;
        width: 100%;
        padding: 8px 12px;
        border-radius: 12px;
    }

    .ob-step__name {
        font-size: 12px;
    }

    .ob-step__badge {
        font-size: 10px;
    }

    .ob-card {
        padding: 16px 14px;
        border-radius: 14px;
    }

    .ob-card__title {
        font-size: 15px;
    }

    .ob-card__subtitle {
        font-size: 12px;
        margin-bottom: 18px;
    }
}


/* ==========================================================
   ▸ TRADINGVIEW CARD (tv-card)
   ========================================================== */

@media (max-width: 768px) {
    .tv-card__tabs {
        padding: 10px 14px 10px;
        gap: 4px;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        flex-wrap: nowrap;
    }

    .tv-tab {
        flex-shrink: 0;
        padding: 6px 10px;
        font-size: 12px;
    }

    .tv-card__attribution {
        display: none;
    }
}

@media (max-width: 480px) {
    .tv-tab {
        padding: 5px 9px;
        font-size: 11px;
    }

    .tv-tab__icon {
        width: 16px;
        height: 16px;
    }
}


/* ==========================================================
   ▸ ALLOCATION CARD (alloc-card)
   ========================================================== */

@media (max-width: 768px) {
    .alloc-card__body {
        flex-direction: column;
        align-items: flex-start;
        gap: 18px;
    }

    .alloc-card__donut {
        align-self: center;
    }
}

@media (max-width: 480px) {
    .alloc-card__body {
        gap: 14px;
    }

    .alloc-card__donut,
    .alloc-card__donut canvas {
        width: 100px !important;
        height: 100px !important;
    }
}


/* ==========================================================
   ▸ DATAGRID CLIENT — дополнительные overrides
   ========================================================== */

/* datagrid-client.css уже покрывает 768px; добавляем 480px */
@media (max-width: 480px) {
    .datagrid th,
    .datagrid td {
        padding: 6px 8px;
        font-size: 11px;
    }

    .datagrid-toolbar {
        padding: 10px 12px;
        gap: 8px;
    }

    .datagrid-toolbar .btn,
    .datagrid-exports .btn {
        padding: 4px 10px;
        font-size: 11px;
    }

    /* Pagination: wrap на мелких экранах */
    .datagrid .row-grid-bottom {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
        padding: 10px 12px;
    }

    .datagrid .pagination {
        flex-wrap: wrap;
        gap: 2px;
    }

    .datagrid .pagination .page-item .page-link {
        padding: 4px 8px;
        font-size: 11px;
    }
}


/* ==========================================================
   ▸ HEADER IMPERSONATION — 480px
   ========================================================== */

/* dashboard.css уже скрывает badge на 768px; прячем email на 480px */
@media (max-width: 480px) {
    .header-impersonation {
        gap: 4px;
        padding: 3px 4px;
    }

    .header-impersonation__email {
        display: none;
    }

    .header-impersonation__back {
        padding: 4px 10px;
        font-size: 10px;
    }
}


/* ==========================================================
   ▸ USER CHIP DROPDOWN — предотвращаем выход за экран
   ========================================================== */

@media (max-width: 480px) {
    .user-chip__drop {
        /* Прижимаем к правому краю, но не даём выйти за экран */
        min-width: 0;
        width: calc(100vw - 24px);
        max-width: 290px;
        right: 0;
    }

    .user-chip__name {
        font-size: 13px;
    }

    .user-chip__email {
        font-size: 11px;
    }
}


/* ==========================================================
   ▸ MOBILE MENU — исправление видимости
   nav.css перебивает фон header__mob на var(--surface) [белый],
   но ссылки внутри имеют tc-white → невидимо.
   Восстанавливаем тёмный фон и правильные цвета.
   Применяется до 1199px — выше хедер переключается на десктоп.
   ========================================================== */

@media (max-width: 1199px) {
    /* Восстанавливаем тёмный фон мобильного меню */
    .header__mob {
        background: #1a1e31 !important;
    }

    /* Фон скролл-обёртки тоже тёмный */
    .header__mob-scroll {
        background: #1a1e31;
    }

    /* Ссылки навигации — читаемый светлый цвет */
    .header__mob .link--header {
        color: rgba(255, 255, 255, .70) !important;
        font-size: 18px;
        font-weight: 500;
        padding: 14px 16px;
        display: flex;
        align-items: center;
    }

    .header__mob .link--header:hover,
    .header__mob .link--header.active {
        color: #ffffff !important;
        background: rgba(255, 255, 255, .06);
        border-radius: 8px;
    }

    .header__mob .link--header.active::after {
        display: none; /* убираем нижний border-индикатор внутри меню */
    }

    /* Разделители строк внутри меню */
    .header__mob .header__row:first-child {
        border-bottom-color: rgba(92, 102, 145, .35) !important;
    }

    .header__mob .header__row:last-child {
        border-top-color: rgba(92, 102, 145, .35) !important;
    }

    /* Email пользователя */
    .mob-user-info__email {
        color: rgba(255, 255, 255, .65) !important;
    }

    .mob-user-info .user-chip__avatar {
        background: rgba(237, 192, 22, .18) !important;
        border-color: rgba(237, 192, 22, .30) !important;
        color: #EDC016;
    }

    /* Кнопки "Купить крипто" и "Выйти" */
    .header__mob .nav-btn--buy {
        /* кнопка покупки уже со своим золотым градиентом — оставляем */
    }

    .header__mob .nav-btn--logout {
        background: rgba(255, 255, 255, .10) !important;
        color: rgba(255, 255, 255, .80) !important;
        border-color: rgba(255, 255, 255, .15) !important;
    }

    .header__mob .nav-btn--logout:hover {
        background: rgba(255, 255, 255, .18) !important;
        color: #ffffff !important;
    }

    /* Полоски кнопки-гамбургера: цвет в тёмном меню */
    .toggle__checkbox:checked + div i:nth-of-type(1),
    .toggle__checkbox:checked + div i:nth-of-type(3) {
        background: #ffffff !important;
    }
}


/* ==========================================================
   ▸ SMALL PHONE — глобальные tweaks (max-width: 360px)
   ========================================================== */

@media (max-width: 360px) {
    /* Контентная область */
    .content-wrapper {
        padding-top: 88px !important;
    }

    .content-wrapper > .container {
        padding-left: 8px;
        padding-right: 8px;
    }

    /* Карточки */
    .info-card,
    .settings-card,
    .order-detail__card,
    .pf__card,
    .ob-card,
    .balance-card {
        border-radius: 12px !important;
    }

    /* Заголовки страниц */
    .settings-page__title,
    .orders-page__title,
    .pf__title,
    .op__title,
    .ob-title {
        font-size: 17px !important;
    }

    /* Кнопки в хедере */
    .nav-btn {
        padding: 5px 8px;
        font-size: 10px;
    }

    .nav-btn--buy {
        padding: 5px 10px;
    }

    /* Баланс */
    .balance-card__amount {
        font-size: 24px !important;
    }

    .balance-card__top {
        padding: 16px 14px 12px !important;
    }

    /* Таблицы portfolio */
    .pf__table {
        min-width: 460px !important;
    }

    .pf__table th,
    .pf__table td {
        padding: 8px 8px !important;
        font-size: 11px !important;
    }

    /* Быстрые действия — одна колонка */
    .quick-actions {
        grid-template-columns: 1fr !important;
    }

    /* Op selector — одна карточка в ряд */
    .op__grid {
        grid-template-columns: 1fr !important;
    }
}