/* ============================================================================
   mobile-tables.css — на мобиле (≤768px) ВСЕ таблицы админки PolyFucked
   превращаются в КАРТОЧКИ (как у доменов). Горизонтального скролла больше нет —
   «показываем всё сразу»: каждая строка = карточка, каждая ячейка = строка
   «ПОДПИСЬ: значение». Подписи берутся из <thead> и проставляются в data-label
   декоратором /new/js/table-cards.js (CSS показывает их через ::before).

   Первая ячейка строки = заголовок карточки (крупно, без подписи).
   Сложные ячейки (NS-список, действия, список кошельков) раскладываются
   вертикально: подпись сверху, контент на всю ширину.

   Покрываются классы .table, .us-table (users/finance/user-detail),
   .pc-table (промокоды). .dom2-tbl (домены) НЕ включён — у него свои карточки
   в domains.css (@container) с зашитыми в разметку data-label.

   На десктопе (контент >768px) ничего не меняется — обычные таблицы.
   Подключён последним → перекрывает .panel{overflow:hidden} и .table из base.

   NB: брейкпоинт — @container (ширина КОНТЕНТА .admin-main), а не @media
   (ширина окна). Иначе в Telegram Mini-App webview (viewport > 768px, но за
   248px-рейлом реальный контент ~490px) карточки не включались и таблица
   ужимала колонки в наезд. См. память admin-container-vs-viewport-media.
   ========================================================================== */

@container (max-width: 768px) {

  /* ── Панель/обёртка больше НЕ скролл-контейнер: карточки влезают по ширине. ─ */
  .admin-main .panel:has(> .table),
  .admin-main .panel:has(> .table-toolbar),
  .admin-main .panel:has(.table),
  .admin-main .panel:has(.payout-table),
  .admin-main .table-wrap,
  .admin-main .md-table-wrap,
  .admin-main .pd-history,
  .admin-main .us-tablewrap,
  .admin-main .pc-tablewrap {
    overflow: visible !important;
  }
  /* На мобиле: ВСЕ фильтры (период/поиск/дропдауны + статус-табы + чипы
     сортировки) едут в ОДИН отдельный框рованный блок СВЕРХУ, а карточки плавают
     ОТДЕЛЬНО ниже. Саму dtile-панель делаем прозрачным контейнером, а рамку/фон
     рисуем сегментами (верх/середина/низ), соединяя их в единый блок. */
  .admin-main .us-panel.dtile,
  .admin-main .pc-list.dtile {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    padding: 0 !important;
    gap: 0 !important;
  }
  /* ВЕРХНИЙ сегмент — фильтры (ниже всегда идёт ещё сегмент: табы/чипы) */
  .admin-main .us-panel.dtile > .us-filters,
  .admin-main .pc-list.dtile > .pc-toolbar {
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-bottom: 0;
    border-radius: 14px 14px 0 0;
    padding: 14px;
  }
  /* СРЕДНИЙ сегмент — статус-табы (users): без верх/низ рамки, dashed-разделитель */
  .admin-main .us-panel.dtile > .us-stabs {
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-top: 1px dashed var(--border);
    border-bottom: 0;
    border-radius: 0;
    padding: 12px 14px;
    margin: 0;
  }
  /* НИЖНИЙ сегмент блока = строка чипов-сортировки (thead таблицы) */
  .admin-main .us-panel.dtile .us-table:has(> thead th.us-th--sortable) > thead {
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-top: 1px dashed var(--border);
    border-radius: 0 0 14px 14px;
    padding: 12px 14px !important;
    margin: 0 0 14px !important;   /* отступ до карточек */
  }
  /* НИЖНИЙ сегмент для промокодов = период-табы (чипов сортировки нет) */
  .admin-main .pc-list.dtile > .us-filters__periods {
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-top: 1px dashed var(--border);
    border-radius: 0 0 14px 14px;
    padding: 12px 14px;
    margin: 0;
  }
  /* Карточки НЕСУТ свою обводку — scroll-контейнер (tablewrap) без рамки/фона.
     margin-top:0 у us-tablewrap, чтобы чипы-thead примыкали к блоку фильтров;
     у промокодов (без чипов) tablewrap отступает от блока. */
  .admin-main .us-tablewrap,
  .admin-main .pc-tablewrap,
  .admin-main .table-wrap,
  .admin-main .md-table-wrap,
  .admin-main .pd-history {
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    padding: 0 !important;
  }
  .admin-main .us-panel.dtile > .us-tablewrap { margin-top: 0 !important; }
  .admin-main .us-panel.dtile .us-table { margin: 0 !important; }
  .admin-main .pc-list.dtile > .pc-tablewrap { margin-top: 14px !important; }
  /* us-table/pc-table и user-detail transactions несут жёсткий min-width
     (660px / inline style="min-width:640px") — на моб. сбрасываем, чтобы
     карточкам не отрезало правый край. */
  .admin-main .us-table,
  .admin-main .pc-table,
  .admin-main .us-table[style*="min-width"] {
    min-width: 0 !important;
  }

  /* ── TABLE → CARDS (общий каркас для всех таблиц) ───────────────────────── */
  .admin-main :is(.table, .us-table, .pc-table),
  .admin-main :is(.table, .us-table, .pc-table) > tbody,
  .admin-main :is(.table, .us-table, .pc-table) > tbody > tr,
  .admin-main :is(.table, .us-table, .pc-table) > tbody > tr > td {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }
  .admin-main :is(.table, .us-table, .pc-table) {
    table-layout: auto !important;
    min-width: 0 !important;
    border: 0 !important;
    border-collapse: collapse !important;
    box-shadow: none !important;
  }
  .admin-main :is(.table, .pc-table) > thead { display: none !important; }
  /* .us-table по умолчанию тоже прячет thead… */
  .admin-main .us-table > thead { display: none !important; }

  /* …НО таблицы с сортируемыми колонками (Пользователи, Депозиты, Выплаты)
     показывают их строкой чипов-сортировки над карточками. Клик-хендлеры на
     th[data-us-sort]/[data-fin-sort] уже привязаны в users.js/finance.js и
     срабатывают на любом viewport → сортировка на мобиле без нового JS.
     Только .us-th--sortable видимы (у остальных th — display:none). */
  .admin-main .us-table:has(> thead th.us-th--sortable) > thead {
    display: block !important;
    margin: 0 0 12px;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .admin-main .us-table > thead::-webkit-scrollbar { display: none; }
  .admin-main .us-table:has(> thead th.us-th--sortable) > thead > tr {
    display: flex !important;
    flex-wrap: nowrap;
    align-items: center;
    gap: 6px;
    width: max-content;
    min-width: 100%;
  }
  .admin-main .us-table > thead > tr > th { display: none !important; }
  .admin-main .us-table > thead > tr > th.us-th--sortable {
    display: inline-flex !important;
    align-items: center;
    gap: 5px;
    flex: 0 0 auto;
    height: 38px;
    padding: 0 14px;
    margin: 0;
    border: 1px solid var(--border) !important;
    border-radius: 999px;
    /* same fill as the card blocks (--card-bg), not the page bg, so the sort
       chips read as part of the same surface as the cards below them */
    background: var(--card-bg) !important;
    color: var(--text-muted) !important;
    font: 600 12.5px/1 var(--font-ui) !important;
    letter-spacing: 0.01em;
    text-transform: none !important;
    white-space: nowrap;
    cursor: pointer;
    user-select: none;
    transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease;
  }
  .admin-main .us-table > thead > tr > th.us-th--sortable > span:first-child {
    display: inline-block;
  }
  .admin-main .us-table > thead > tr > th.us-th--sortable:hover {
    border-color: var(--border-hover, var(--accent)) !important;
    color: var(--text-strong) !important;
  }
  .admin-main .us-table > thead > tr > th.us-th--sortable .us-sort-arrow {
    display: inline-flex;
    align-items: center;
    font-size: 11px;
    line-height: 1;
    color: var(--text-muted);
  }
  .admin-main .us-table > thead > tr > th.us-th--sortable .us-sort-arrow svg {
    width: 13px; height: 13px;
  }
  /* активный (отсортированный) столбец — accent-подсветка чипа */
  .admin-main .us-table > thead > tr > th.us-th--sortable:has(.us-sort-arrow.is-active) {
    border-color: var(--accent) !important;
    color: var(--text-strong) !important;
    background: color-mix(in srgb, var(--accent) 10%, var(--card-bg)) !important;
  }
  .admin-main .us-table > thead > tr > th.us-th--sortable:has(.us-sort-arrow.is-active) .us-sort-arrow {
    color: var(--accent);
  }

  /* строка = карточка. Фон/обводка — как у десктопной .dtile-плитки
     (--card-bg + 1px var(--border)), чтобы моб. карточки визуально совпадали
     с ПК-версией. В тёмной теме --card-bg (#1e2428) светлее фона страницы
     --bg (#15191d) → карточки читаемо отделяются; в светлой они равны (#fff). */
  .admin-main :is(.table, .us-table, .pc-table) > tbody > tr {
    border: 1px solid var(--border) !important;
    border-radius: 10px !important;
    background: var(--card-bg) !important;
    padding: 6px 14px !important;
    margin: 0 0 10px !important;
    box-shadow: none !important;
  }
  .admin-main :is(.table, .us-table, .pc-table) > tbody > tr:last-child { margin-bottom: 0 !important; }
  .admin-main :is(.table, .us-table, .pc-table) > tbody > tr:hover { background: var(--card-bg) !important; }

  /* ячейка = строка «подпись | значение» */
  .admin-main :is(.table, .us-table, .pc-table) > tbody > tr > td {
    height: auto !important;
    min-height: 0 !important;
    border: 0 !important;
    border-bottom: 1px solid color-mix(in srgb, var(--border) 55%, transparent) !important;
    padding: 9px 0 !important;
    white-space: normal !important;
    text-align: right !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 14px !important;
    vertical-align: top !important;
    /* Ячейки на десктопе имеют background:var(--card-bg) (фон таблицы). Внутри
       карточки (tr = var(--bg)) это давало светлые «серые квадраты» в dark-теме.
       Сбрасываем — карточка становится единым фоном. */
    background: transparent !important;
  }
  .admin-main :is(.table, .us-table, .pc-table) > tbody > tr > td:last-child { border-bottom: 0 !important; }
  /* hover тоже не должен красить ячейки в card-bg-квадраты */
  .admin-main :is(.table, .us-table, .pc-table) > tbody > tr:hover > td { background: transparent !important; }

  /* подпись слева (из data-label, ставит JS-декоратор) */
  .admin-main :is(.table, .us-table, .pc-table) > tbody > tr > td::before {
    content: attr(data-label);
    flex: 0 0 auto;
    text-align: left;
    color: var(--mkt-muted) !important;
    font-weight: 600 !important;
    font-size: 11px !important;
    letter-spacing: 0.04em !important;
    text-transform: uppercase !important;
    white-space: nowrap !important;
    font-family: var(--font-ui) !important;
  }
  /* ячейки без подписи — значение на всю ширину */
  .admin-main :is(.table, .us-table, .pc-table) > tbody > tr > td:not([data-label])::before,
  .admin-main :is(.table, .us-table, .pc-table) > tbody > tr > td[data-label=""]::before { content: none !important; }
  /* пустые ячейки не плодят пустые строки */
  .admin-main :is(.table, .us-table, .pc-table) > tbody > tr > td:empty { display: none !important; }

  /* значение справа — переносим длинное (адреса/хэши), не режем */
  .admin-main :is(.table, .us-table, .pc-table) > tbody > tr > td > * { min-width: 0 !important; max-width: 100% !important; }
  .admin-main :is(.table, .us-table, .pc-table) .mono-value,
  .admin-main :is(.table, .us-table, .pc-table) .truncate,
  .admin-main :is(.table, .us-table, .pc-table) code {
    overflow-wrap: anywhere !important;
    white-space: normal !important;
    text-overflow: clip !important;
  }

  /* ── Первая ячейка = заголовок карточки (крупно, без подписи) ──────────── */
  .admin-main :is(.table, .us-table, .pc-table) > tbody > tr > td:first-child {
    display: block !important;
    text-align: left !important;
    border-bottom: 1px solid var(--border) !important;
    padding: 4px 0 9px !important;
    margin-bottom: 3px !important;
  }
  .admin-main :is(.table, .us-table, .pc-table) > tbody > tr > td:first-child::before { content: none !important; }
  .admin-main :is(.table, .us-table, .pc-table) > tbody > tr > td:first-child,
  .admin-main :is(.table, .us-table, .pc-table) > tbody > tr > td:first-child .truncate,
  .admin-main :is(.table, .us-table, .pc-table) > tbody > tr > td:first-child > span {
    font-size: 15px !important;
    font-weight: 600 !important;
    color: var(--text-strong) !important;
  }

  /* ── Блочный контент (NS-список, кошельки, транзакции): подпись сверху,
        контент на всю ширину карточки. ТОЛЬКО эти — чтобы не плодить высокие
        пустые карточки из обычных ячеек. ──────────────────────────────────── */
  .admin-main :is(.table, .us-table, .pc-table) > tbody > tr > td:has(.ns-list),
  .admin-main :is(.table, .us-table, .pc-table) > tbody > tr > td:has(.wallet-list),
  .admin-main :is(.table, .us-table, .pc-table) > tbody > tr > td:has(.tx-list) {
    flex-direction: column !important;
    align-items: stretch !important;
    text-align: left !important;
    gap: 8px !important;
  }
  .admin-main :is(.table, .us-table, .pc-table) > tbody > tr > td:has(.ns-list)::before,
  .admin-main :is(.table, .us-table, .pc-table) > tbody > tr > td:has(.wallet-list)::before { align-self: flex-start; }

  /* ── Ячейки ДЕЙСТВИЙ — иконки в ОДИН ГОРИЗОНТАЛЬНЫЙ РЯД, прижаты вправо,
        подпись слева. Никаких вертикальных столбцов иконок и высоких пустых
        карточек. Работает и для .actions-обёртки (domains/users), и для голых
        .icon-btn/<button> прямо в <td> (promocodes/finance). ──────────────── */
  .admin-main :is(.table, .us-table, .pc-table) > tbody > tr > td:has(> .icon-btn),
  .admin-main :is(.table, .us-table, .pc-table) > tbody > tr > td:has(> button),
  .admin-main :is(.table, .us-table, .pc-table) > tbody > tr > td:has(> .actions),
  .admin-main :is(.table, .us-table, .pc-table) > tbody > tr > td:has(.row-actions) {
    flex-direction: row !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 6px !important;
  }
  .admin-main :is(.table, .us-table, .pc-table) > tbody > tr > td:has(> .icon-btn)::before,
  .admin-main :is(.table, .us-table, .pc-table) > tbody > tr > td:has(> button)::before,
  .admin-main :is(.table, .us-table, .pc-table) > tbody > tr > td:has(> .actions)::before,
  .admin-main :is(.table, .us-table, .pc-table) > tbody > tr > td:has(.row-actions)::before {
    margin-right: auto !important;       /* подпись влево, кнопки сгруппированы вправо */
    align-self: center !important;
  }
  /* Кнопки-иконки в ячейках — ровный тап-таргет, в ряд. */
  .admin-main :is(.table, .us-table, .pc-table) > tbody > tr > td > .icon-btn,
  .admin-main :is(.table, .us-table, .pc-table) > tbody > tr > td .row-actions .btn-sm {
    width: 40px !important; height: 40px !important; flex: 0 0 auto !important;
  }

  /* NS-записи столбиком на всю ширину */
  .admin-main .ns-list {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 6px !important;
  }
  .admin-main .ns-pill {
    width: 100% !important;
    max-width: 100% !important;
    justify-content: space-between !important;
    min-height: 38px !important;
  }

  /* действия — крупные тап-таргеты в ряд, видны без скролла */
  .admin-main :is(.table, .us-table, .pc-table) .actions {
    display: inline-flex !important;
    gap: 8px !important;
    border: 0 !important;
    background: transparent !important;
  }
  .admin-main :is(.table, .us-table, .pc-table) .actions button,
  .admin-main :is(.table, .us-table, .pc-table) .actions .icon-link {
    width: 40px !important;
    height: 40px !important;
  }

  /* строка-ссылка (users/finance) кликается целиком — оставляем курсор */
  .admin-main :is(.table, .us-table, .pc-table) > tbody > tr.row-link,
  .admin-main :is(.table, .us-table, .pc-table) > tbody > tr.us-tr { cursor: pointer; }

  /* ==========================================================================
     TABLE-TOOLBAR — на десктопе flex space-between; на мобиле в колонку:
     инпут на всю ширину, кнопки/селекты — крупный тап-таргет.
     ========================================================================== */
  .admin-main .table-toolbar {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 10px !important;
  }
  .admin-main .table-toolbar .filters {
    justify-content: flex-start !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
  }
  .admin-main .table-toolbar .input { width: 100% !important; }
  .admin-main .table-toolbar .btn-sm,
  .admin-main .table-toolbar .btn { min-height: 40px !important; }
  .admin-main .table-toolbar .select,
  .admin-main .table-toolbar .select-button { width: 100% !important; }

  /* Пагинация под карточками — переносим, крупные стрелки. */
  .admin-main .pagination {
    flex-wrap: wrap !important;
    gap: 8px !important;
    justify-content: center !important;
  }
}