/* ============================================================
   GD Stats — общие адаптивные утилиты (Фаза 1 моб-рефактора)
   Подключается в base.html, index.html, account.html.
   Паттерны opt-in: применяются только к элементам с нужными
   классами, поэтому файл инертен, пока классы не проставлены.
   Главный брейкпоинт телефона: max-width 640px.
   Узкие телефоны (iPhone SE / компактный Android): max-width 400px.
   ============================================================ */

/* ---- Резерв места под полосу прокрутки: убирает горизонтальный сдвиг
   интерфейса при появлении/исчезновении скроллбара (дёрганье между вкладками) ---- */
html { scrollbar-gutter: stable; }

/* ---- Хелперы видимости ---- */
@media (max-width: 640px) { .desktop-only { display: none !important; } }
@media (min-width: 641px) { .mobile-only  { display: none !important; } }

/* ============================================================
   1) REFLOW-TABLE — широкая таблица → вертикальные карточки
   Использование:
     <table class="reflow-table"> ... </table>
     В каждой <td> ставить data-label="Подпись".
     Первая ячейка строки = «шапка карточки» (имя/ранг),
     ей подпись не нужна.
   ============================================================ */
@media (max-width: 640px) {
    /* перебиваем возможный inline min-width на таблице (десктоп-скролл) */
    table.reflow-table { width: 100% !important; min-width: 0 !important; border-collapse: collapse; }
    /* обёртка горизонтального скролла больше не нужна — карточки переносятся */
    .dtm-wrap { overflow-x: visible !important; }

    /* прячем thead (подписи берём из data-label), но оставляем доступным скринридерам */
    table.reflow-table thead {
        position: absolute; width: 1px; height: 1px;
        overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
    }

    table.reflow-table tbody,
    table.reflow-table tr,
    table.reflow-table td { display: block; width: 100%; }

    /* строка = glass-карточка */
    table.reflow-table tr {
        margin-bottom: 0.6rem;
        border: 1px solid rgba(255,255,255,0.08);
        border-radius: 12px;
        background: rgba(255,255,255,0.03);
        box-shadow: inset 0 1px 0 rgba(255,255,255,0.05);
        overflow: hidden;
    }
    table.reflow-table tr:nth-child(even) td { background: transparent; }
    table.reflow-table tr:hover td { background: transparent !important; }

    /* ячейка = строка «подпись — значение» */
    table.reflow-table td {
        display: flex; align-items: center; justify-content: space-between;
        gap: 1rem;
        padding: 0.55rem 0.9rem;
        border: none !important;
        text-align: right;
        font-size: 0.85rem;
        white-space: normal;
        min-width: 0;
    }
    table.reflow-table td::before {
        content: attr(data-label);
        font-size: 0.6rem; text-transform: uppercase; letter-spacing: 0.06em;
        color: #555; font-weight: 600;
        text-align: left; flex-shrink: 0;
    }
    /* ячейка без data-label не рисует пустую подпись */
    table.reflow-table td:not([data-label])::before { content: none; }

    /* первая ячейка строки = шапка карточки */
    table.reflow-table td:first-child {
        justify-content: flex-start;
        gap: 0.55rem;
        text-align: left;
        font-weight: 600; color: #ddd; font-size: 0.92rem;
        padding: 0.7rem 0.9rem;
        background: rgba(255,255,255,0.025);
        border-bottom: 1px solid rgba(255,255,255,0.06) !important;
    }
    table.reflow-table td:first-child::before { content: none; }

    /* картинки-иконки внутри карточек не растягиваем */
    table.reflow-table td img { flex-shrink: 0; }
}

/* ============================================================
   2) CHART-FIT — график Chart.js ужимается по ширине экрана
   Использование: обернуть <canvas> в
     <div class="chart-fit"><canvas ...></canvas></div>
   и в Chart.js-опциях: responsive:true, maintainAspectRatio:false,
   а высоту задавать на .chart-fit (или его родителе).
   ============================================================ */
.chart-fit { position: relative; width: 100%; }
@media (max-width: 640px) {
    .chart-fit { min-width: 0 !important; overflow: visible; }
    .chart-fit canvas { max-width: 100% !important; }
}

/* ============================================================
   3) Узкие телефоны — общий «поджим» (≤400px)
   ============================================================ */
@media (max-width: 400px) {
    table.reflow-table td { font-size: 0.8rem; padding: 0.5rem 0.75rem; }
    table.reflow-table td:first-child { font-size: 0.86rem; }
}