/* dividends-mobile.css — «Ближайшие дивиденды» на дашборде, телефон.
   Карточки как свёрнутый скринер, без шеврона. Десктоп не трогаем. */

.divlist-cards {
    display: none;
}

@media (max-width: 767.98px) {
    .card:has(#dividends-list-container) > .card-body {
        padding-left: 12px !important;
        padding-right: 12px !important;
    }

    #dividends-list-container .table-responsive,
    #dividends-list-container .scroll-hint {
        display: none !important;
    }

    #dividends-table-container {
        height: auto !important;
        margin-bottom: 0 !important;
    }

    #dividends-list-container .badge.bg-success-lt {
        display: none;
    }

    .divlist-cards {
        display: flex;
        flex-direction: column;
        gap: 8px;
        padding: 4px 0 4px;
        width: 100%;
        box-sizing: border-box;
    }

    .divlist-mc {
        position: relative;
        background: var(--tblr-body-bg);
        border: 1px solid var(--tblr-border-color);
        border-radius: 12px;
        padding: 10px 10px 10px 14px;
        width: 100%;
        min-width: 0;
        box-sizing: border-box;
        overflow: hidden;
    }

    [data-bs-theme="dark"] .divlist-mc {
        background: #161e2a;
    }

    [data-bs-theme="light"] .divlist-mc {
        background: #e8eef5;
    }

    .divlist-mc-accent {
        position: absolute;
        left: 0;
        top: 10px;
        bottom: 10px;
        width: 3px;
        border-radius: 2px;
        background: #206bc4;
    }

    .divlist-mc-head {
        display: flex;
        align-items: flex-start;
        gap: 8px;
        width: 100%;
        color: inherit;
        text-align: left;
        text-decoration: none !important;
    }

    .divlist-mc-head:hover {
        text-decoration: none !important;
        color: inherit;
    }

    .divlist-mc-left {
        min-width: 0;
        flex: 1;
    }

    .divlist-mc-idrow {
        display: flex;
        align-items: center;
        gap: 8px;
        min-width: 0;
    }

    .divlist-mc-logo {
        width: 30px;
        height: 30px;
        border-radius: 50%;
        object-fit: contain;
        flex-shrink: 0;
    }

    .divlist-mc-who {
        min-width: 0;
        flex: 1;
    }

    .divlist-mc-name {
        font-size: 0.9375rem;
        font-weight: 700;
        line-height: 1.2;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .divlist-mc-ticker {
        font-size: 0.75rem;
        color: var(--tblr-secondary);
    }

    .divlist-mc-price-row {
        display: flex;
        align-items: baseline;
        flex-wrap: nowrap;
        gap: 8px;
        margin: 6px 0 0;
        font-variant-numeric: tabular-nums;
        min-width: 0;
    }

    .divlist-mc-price {
        font-size: 1.125rem;
        font-weight: 700;
        line-height: 1.2;
        white-space: nowrap;
    }

    .divlist-mc-chg {
        font-size: 0.8125rem;
        font-weight: 600;
        font-variant-numeric: tabular-nums;
        white-space: nowrap;
        flex-shrink: 0;
    }

    .divlist-mc-chg.is-up { color: #2fb344; }
    .divlist-mc-chg.is-down { color: #d63939; }
    .divlist-mc-chg.is-flat { color: var(--tblr-secondary); }

    .divlist-mc-yield {
        display: flex;
        flex-direction: column;
        align-items: flex-end;
        flex-shrink: 0;
        width: max-content;
        max-width: 46%;
        margin-left: auto;
    }

    .divlist-mc-yield-lbl {
        display: block;
        font-size: 0.6875rem;
        color: var(--tblr-secondary);
        line-height: 1.2;
        white-space: nowrap;
    }

    .divlist-mc-yield-val {
        display: block;
        width: 100%;
        font-size: 1.55rem;
        font-weight: 700;
        font-variant-numeric: tabular-nums;
        line-height: 1.5;
        white-space: nowrap;
        text-align: right;
    }

    .divlist-mc-metrics {
        display: grid;
        grid-template-columns: minmax(3.2em, 0.85fr) minmax(4.6em, 1fr) minmax(0, 2.15fr);
        grid-template-rows: auto auto;
        column-gap: 10px;
        row-gap: 4px;
        margin-top: 10px;
        align-items: center;
    }

    .divlist-mc-metrics > .divlist-mc-metric,
    .divlist-mc-metrics > .divlist-mc-paypair {
        display: grid;
        grid-template-rows: subgrid;
        grid-row: span 2;
        min-width: 0;
    }

    .divlist-mc-metrics .divlist-mc-metric-lbl,
    .divlist-mc-metrics .divlist-mc-metric-val {
        text-align: center;
        margin-bottom: 0;
        width: 100%;
    }

    .divlist-mc-metrics .divlist-mc-metric-val {
        display: flex;
        align-items: center;
        justify-content: center;
        min-height: 22px;
        line-height: 22px;
    }

    .divlist-mc-paypair {
        display: grid;
        grid-template-columns: 1fr auto 1fr;
        grid-template-rows: subgrid;
        width: 100%;
    }

    .divlist-mc-paypair > :nth-child(1),
    .divlist-mc-paypair > :nth-child(3),
    .divlist-mc-paypair > :nth-child(4),
    .divlist-mc-paypair > :nth-child(6) {
        text-align: center;
    }

    .divlist-mc-paypair > :nth-child(2),
    .divlist-mc-paypair > :nth-child(5) {
        text-align: center;
        padding: 0 6px;
    }

    .divlist-mc-arrow {
        color: var(--tblr-secondary);
        opacity: 0.75;
    }

    .divlist-mc-metric-lbl {
        display: block;
        font-size: 0.6875rem;
        color: var(--tblr-secondary);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .divlist-mc-metric-val {
        font-size: 0.8125rem;
        font-weight: 700;
        font-variant-numeric: tabular-nums;
        white-space: nowrap;
    }

    .divlist-mc-ltd {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        box-sizing: border-box;
        height: 22px;
        color: #fff;
        border-radius: 6px;
        padding: 0 6px;
        font-size: 0.75rem;
        font-weight: 700;
        min-width: 28px;
    }

    .divlist-mc-lock {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: 28px;
        height: 22px;
        padding: 0 6px;
        border-radius: 6px;
        background: var(--tblr-bg-surface-secondary);
        color: var(--tblr-secondary);
    }

    .divlist-mc-all {
        display: flex;
        align-items: center;
        justify-content: center;
        margin-top: 4px;
        background: #206bc4;
        color: #fff !important;
        border-radius: 8px;
        padding: 12px 14px;
        font-size: 0.875rem;
        font-weight: 600;
        text-align: center;
        text-decoration: none !important;
        line-height: 1.3;
    }

    .divlist-mc-all:hover {
        text-decoration: none !important;
        color: #fff !important;
    }
}