/* ============================================================================
   USER DETAIL — MOBILE / TABLET ADAPTATION  (admin-new)
   ----------------------------------------------------------------------------
   Страница настроек юзера (`#users/<tenant>/<addr>/<tab>`) рендерится из
   /macos/js/pages/user-detail.js в <main class="admin-main"> как:

     .page.user-page  (desktop: grid 380px + 1fr)
       .user-sidebar-stack
         aside.panel.user-card  (.uc-identity / .uc-stats / .uc-meta)
       section.user-workspace
         .tabs.user-tabs  (горизонтальные пилюли табов)
         <содержимое таба>  (.user-detail-grid, panel'ы, формы, .table, и т.д.)

   На десктопе двухколоночный reflow управляется классами
   .mac-window-frame.is-narrow/.is-compact (ResizeObserver), которых в admin-new
   НЕТ — поэтому на узких вьюпортах сетка не схлопывается и хардкод-ширины
   (380px рельса, 140-220px вторая колонка форм, nowrap-таблицы) дают
   горизонтальный скролл и обрезку слева.

   Этот файл — CSS-only фикс. Всё под @media и заскоплено на .admin-main, чтобы
   не задеть десктоп и другие страницы. ТОКЕНЫ ТОЛЬКО проекта (внутри .admin-main
   мост даёт --panel/--line/--text/--muted/--mono/--brand из --bg/--border/...).

   ВАЖНО (грабли проекта): НИКАКОГО overflow-x:hidden на body/.admin-main —
   это ломает вертикальный скролл. Горизонтальную защиту делаем схлопыванием
   гридов + min-width:0 + max-width:100% на потомках.
   ========================================================================== */

/* ---------------------------------------------------------------------------
   1. ≤1024px — планшет и ниже: двухколоночный user-page → одна колонка.
   Рельса (user-card) сверху, рабочая область (табы + контент) под ней.
   --------------------------------------------------------------------------- */
@media (max-width: 1024px) {

  /* Корневой грид страницы: 380px + 1fr  →  одна колонка. */
  .admin-main .user-page {
    grid-template-columns: 1fr !important;
    gap: 14px;
  }

  /* Рельса больше не липкая (на узком экране она бы наезжала на контент)
     и тянется на всю ширину, но не шире контейнера. */
  .admin-main .user-sidebar-stack {
    position: static !important;
    top: auto !important;
    width: 100%;
    min-width: 0;
    gap: 14px;
  }

  .admin-main .user-card {
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }

  /* Рабочая область — на всю ширину, ничему не даём раздувать её. */
  .admin-main .user-workspace {
    min-width: 0;
    max-width: 100%;
  }

  /* Контент таба (.user-detail-grid и пр.) — одна колонка, потомки не вылезают.
     На десктопе это auto-fit minmax(340px) — на планшете схлопываем. */
  .admin-main .user-detail-grid {
    grid-template-columns: 1fr !important;
    gap: 14px;
  }
  .admin-main .user-detail-grid > .udg-col {
    min-width: 0;
    max-width: 100%;
  }

  /* Любая панель таба — в рамках ширины. */
  .admin-main .user-workspace .panel {
    max-width: 100%;
    min-width: 0;
  }
  .admin-main .user-workspace .panel-body {
    min-width: 0;
  }
}

/* ---------------------------------------------------------------------------
   2. ≤768px — телефон: компактнее, формы label-над-инпутом, таблицы скроллятся
   внутри своей обёртки, мета и стат-грид доводим до идеала.
   --------------------------------------------------------------------------- */
@media (max-width: 768px) {

  /* ---- 2.1 Identity-шапка карточки --------------------------------------
     Имя/домен слева, бейдж верификации справа, ничего не вылезает. */
  .admin-main .uc-identity {
    gap: 10px;
  }
  .admin-main .uc-id-main {
    min-width: 0;          /* без этого ellipsis на .uc-login/.uc-domain не сработает */
    flex: 1 1 auto;
  }
  .admin-main .uc-login,
  .admin-main .uc-domain {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .admin-main .uc-verif {
    flex: 0 0 auto;
    white-space: nowrap;
  }

  /* ---- 2.2 Стат-грид: аккуратные 2×2 ------------------------------------
     На десктопе auto-fit minmax(130px) может дать 1×4 или ломаться на узком —
     фиксируем ровно 2 колонки, числа tabular, ничего не обрезается слева. */
  .admin-main .uc-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
  .admin-main .uc-stat {
    min-width: 0;          /* позволяет ellipsis значению, иначе колонка раздувается */
    padding: 12px 14px;
  }
  .admin-main .uc-stat-val {
    font-family: var(--mono);
    font-variant-numeric: tabular-nums;
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  /* ---- 2.3 Мета-строки: ключ слева, значение справа, длинное — обрезаем -- */
  .admin-main .uc-meta {
    padding: 4px 14px 8px;
  }
  .admin-main .uc-meta-row {
    /* ключ сжимается до контента, значение занимает остаток и обрезается */
    grid-template-columns: minmax(0, auto) minmax(0, 1fr);
    gap: 10px;
  }
  .admin-main .uc-meta-key {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .admin-main .uc-meta-val {
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  /* .uc-device — иконка + текст, текст обрезаем */
  .admin-main .uc-device {
    min-width: 0;
    max-width: 100%;
  }
  .admin-main .uc-device span {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  /* ---- 2.4 Таб-бар: горизонтальная лента пилюль -------------------------
     .tabs уже overflow-x:auto в макос-CSS; на телефоне даём ему «дышать»
     краями и гарантируем, что лента не переполняет ширину страницы. */
  .admin-main .user-tabs {
    max-width: 100%;
    margin-bottom: 14px;
    /* edge-to-edge скролл: лента касается краёв экрана, но контент в padding */
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x proximity;
  }
  .admin-main .user-tabs .tab {
    scroll-snap-align: start;
    flex: 0 0 auto;        /* пилюли не сжимаются — скроллим, а не давим текст */
  }

  /* ---- 2.5 Формы: label над инпутом ------------------------------------
     На десктопе .detail-field = grid 1fr + 160-220px; на телефоне правая
     колонка не влезает → стопкой. Покрывает Data + Notifications (wide-form). */
  .admin-main .user-workspace .detail-field,
  .admin-main .user-workspace .form-line,
  .admin-main .user-workspace .wide-form .detail-field {
    grid-template-columns: 1fr !important;
    align-items: stretch;
    gap: 6px;
    margin: 14px 0;
  }
  .admin-main .user-workspace .detail-field .input,
  .admin-main .user-workspace .detail-field .select,
  .admin-main .user-workspace .form-line .input,
  .admin-main .user-workspace .form-line .select,
  .admin-main .user-workspace .textarea {
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }

  /* Кнопки действий — переносятся, занимают ширину аккуратно */
  .admin-main .user-workspace .form-actions {
    flex-wrap: wrap;
  }

  /* Drainer / vf-auto формы — поля в одну колонку, без вылезания */
  .admin-main .user-workspace .vf-auto-form,
  .admin-main .user-workspace .drainer-form {
    grid-template-columns: 1fr !important;
  }
  .admin-main .user-workspace .vf-auto-field {
    min-width: 0;
    max-width: 100%;
  }
  .admin-main .user-workspace .vf-auto-field .input {
    width: 100%;
    min-width: 0;
  }

  /* ---- 2.6 Таблицы (Transactions) — скролл ВНУТРИ панели, не страницы ----
     Транзакции рендерятся как panel-body > table.table (без .table-wrap).
     Колонки nowrap → на телефоне таблица шире экрана. Делаем panel-body
     горизонтально-скроллируемым контейнером, чтобы скроллилась таблица, а не
     вся страница. Вертикальный скролл страницы при этом не трогаем. */
  .admin-main .user-workspace .panel-body {
    max-width: 100%;
  }
  .admin-main .user-workspace .panel-body > .table,
  .admin-main .user-workspace .panel-body > .table-wrap {
    display: block;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  /* table в display:block теряет 100% растяжение — задаём min-width по контенту */
  .admin-main .user-workspace .panel-body > .table {
    width: max-content;
    min-width: 100%;
  }
  /* Сегмент-переключатель транзакций — лента, скроллится если не влезает */
  .admin-main .user-workspace .tx-segmented {
    max-width: 100%;
    overflow-x: auto;
    scrollbar-width: none;
  }
  .admin-main .user-workspace .tx-segmented::-webkit-scrollbar { display: none; }
  .admin-main .user-workspace .tx-segmented > button {
    flex: 0 0 auto;
    white-space: nowrap;
  }

  /* ---- 2.7 Wallets / Logs / Notifications history — без вылезания --------
     Длинные адреса / hash / IP / user-agent обрезаются внутри ширины. */
  .admin-main .user-workspace .wallet-row,
  .admin-main .user-workspace .wb-addr-row,
  .admin-main .user-workspace .wb-tok-row,
  .admin-main .user-workspace .activity-row {
    min-width: 0;
    max-width: 100%;
  }
  .admin-main .user-workspace .wallet-address {
    max-width: 100%;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .admin-main .user-workspace .wb-addr-link,
  .admin-main .user-workspace .wb-tok-sym,
  .admin-main .user-workspace .wb-tok-chain {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  /* Логи: time / strong / small — в стопку, без горизонтального распирания */
  .admin-main .user-workspace .activity-row small,
  .admin-main .user-workspace .activity-row strong {
    min-width: 0;
    overflow-wrap: anywhere;   /* длинный UA/мета переносится, не растягивает */
    word-break: break-word;
  }
  .admin-main .user-workspace .activity-console {
    max-width: 100%;
    min-width: 0;
  }

  /* Danger-zone (superadmin) — текст и кнопка в стопку на телефоне */
  .admin-main .ud-danger-body {
    flex-wrap: wrap;
    gap: 12px;
  }
  .admin-main .ud-danger-body .ud-btn-delete {
    width: 100%;
    justify-content: center;
  }
}

/* ---------------------------------------------------------------------------
   3. ≤420px — узкие телефоны: стат-грид остаётся 2×2 (читаемо), но даём
   значениям чуть меньше шрифта чтобы крупные суммы не теряли цифры.
   --------------------------------------------------------------------------- */
@media (max-width: 420px) {
  .admin-main .uc-stat-val {
    font-size: 15px;
  }
  .admin-main .uc-stat {
    padding: 11px 12px;
  }
}

/* ===========================================================================
   === MOBILE PASS 2026-06-18 ===
   Закрываем пробелы аудита: баланс кошельков (Data-таб .wb-*), история
   нотификаций (.notif-*), логи (.activity-row), tx-сегмент, wallet-row,
   таб-бар, тач-таргеты. Плюс ремап захардкоженных dark-only цветов .wb-*
   на токены проекта — иначе светлая тема нечитаема.
   Всё заскоплено на .admin-main, чтобы не задеть macos-десктоп.
   ========================================================================= */

/* ---------------------------------------------------------------------------
   P2.1 — Цвета .wb-* (Wallet Balances). БЕЗ @media: правка тем, не лейаута.
   В style.css эти классы дают прямые hex (dark-only), под admin-new светлая
   тема их не переопределяет → серый-на-белом / невидимый текст. Ремапим на
   токены, которые сами адаптируются под обе темы.
   --------------------------------------------------------------------------- */
/* Символ / сумма токена / итоговая сумма строки — основной текст. */
.admin-main .wb-tok-sym { color: var(--text-strong); }
.admin-main .wb-tok-usd,
.admin-main .wb-chain-value,
.admin-main .wb-total-value,
.admin-main .wb-flat-total,
.admin-main .wb-item-amt { color: var(--text-strong); }
/* Количество токена — приглушённое, но читаемое. */
.admin-main .wb-tok-amount,
.admin-main .wb-item,
.admin-main .wb-item-sym { color: var(--text); }
/* Лейблы, сети, подписи — muted. */
.admin-main .wb-tok-chain,
.admin-main .wb-chain-label,
.admin-main .wb-addr-label,
.admin-main .wb-flat-label,
.admin-main .wb-total-label { color: var(--mkt-muted); }
/* Ссылка на адрес / explorer — акцент. */
.admin-main .wb-addr-link { color: var(--accent); }
.admin-main .wb-addr-link:hover { color: var(--accent); }
/* Разделители и hover — через токены/прозрачность. */
.admin-main .wb-total-row { border-bottom-color: var(--border); }
.admin-main a.wb-tok-row:hover,
.admin-main a.wb-chain-row:hover {
  background: color-mix(in srgb, var(--text-strong) 5%, transparent);
}
/* Refresh-кнопка панели — hover через токен, не белый hex. */
.admin-main .wb-refresh:hover {
  background: color-mix(in srgb, var(--text-strong) 6%, transparent);
  color: var(--text-strong);
}
/* Skeleton-полоски — нейтральный плейсхолдер на любом фоне. */
.admin-main .wb-sk-line {
  background: color-mix(in srgb, var(--text-strong) 7%, transparent);
}

/* ---------------------------------------------------------------------------
   P2.2 — ≤768px: лейаут wb-*, notif-*, activity, tx-segmented, wallet-row,
   таб-бар, тач-таргеты, iOS-zoom guard.
   --------------------------------------------------------------------------- */
@media (max-width: 768px) {

  /* ---- P2.2a Wallet Balances: строка токена не должна вылезать -----------
     Грид logo(16) + info(1fr) + amount + usd. На телефоне фиксируем минимумы
     и даём info сжиматься, а числам — уменьшенный шрифт. */
  .admin-main .wb-panel .wb-tok-row,
  .admin-main .user-workspace .wb-tok-row {
    display: grid !important;
    grid-template-columns: 16px minmax(0, 1fr) auto auto !important;
    column-gap: 8px;
    padding: 6px 8px;
  }
  .admin-main .wb-panel .wb-tok-info,
  .admin-main .user-workspace .wb-tok-info {
    min-width: 0;
    overflow: hidden;
  }
  .admin-main .wb-tok-amount,
  .admin-main .wb-tok-usd {
    min-width: 0;
    font-size: 11px;
  }
  /* USD-колонка теряет жёсткий min-width:52px — на узком он распирал строку. */
  .admin-main .wb-panel .wb-tok-usd,
  .admin-main .user-workspace .wb-tok-usd {
    min-width: 0;
  }
  /* Адрес-строка: лейбл слева, длинный адрес справа — переносим, не распираем. */
  .admin-main .wb-addr-row {
    flex-wrap: wrap;
    gap: 2px 8px;
  }
  .admin-main .wb-addr-link {
    min-width: 0;
    max-width: 100%;
    overflow-wrap: anywhere;
    word-break: break-all;
  }
  /* Per-chain строка: значение не уезжает за край. */
  .admin-main .wb-chain-row {
    min-width: 0;
    max-width: 100%;
  }
  .admin-main .wb-chain-mid {
    min-width: 0;
  }

  /* ---- P2.2b История нотификаций ----------------------------------------
     .notif-history-item = flex (main + кнопка Delete). На телефоне кнопка
     жмёт длинный заголовок → переносим main на всю ширину, кнопку под него. */
  .admin-main .notif-history-item {
    flex-wrap: wrap;
    gap: 8px;
  }
  .admin-main .notif-history-item__main {
    flex: 1 1 100%;
    min-width: 0;
  }
  .admin-main .notif-history-item__title,
  .admin-main .notif-history-item__desc,
  .admin-main .notif-history-item__link {
    overflow-wrap: anywhere;
    word-break: break-word;
  }
  .admin-main .notif-history-item .btn {
    width: 100%;
    justify-content: center;
    min-height: 36px;
  }
  /* Текстовое поле рассылки — на всю ширину, удобная высота. */
  .admin-main .user-workspace #notif-text-input.textarea {
    width: 100%;
    max-width: 100%;
    min-height: 120px;
    box-sizing: border-box;
  }

  /* ---- P2.2c Логи (Activity) — грид 156/1fr/1.2fr/34 в одну колонку ------
     На 390px четыре колонки нечитаемы. Стопка: время сверху, дальше детали. */
  .admin-main .user-workspace .activity-row {
    grid-template-columns: 1fr !important;
    gap: 4px;
    padding: 10px 12px;
  }
  .admin-main .user-workspace .activity-row time {
    font-size: 11px;
    color: var(--mkt-muted);
  }

  /* ---- P2.2d tx-segmented: macos держит display:grid → flex на детях не
     срабатывал. Принудительно flex-лента со скроллом. -------------------- */
  .admin-main .user-workspace .tx-segmented {
    display: flex !important;
    grid-template-columns: none !important;
    overflow-x: auto;
    gap: 6px;
  }
  .admin-main .user-workspace .tx-segmented > button {
    flex: 0 0 auto;
    min-width: auto;
    white-space: nowrap;
    padding: 0 12px;
    min-height: 36px;
  }

  /* ---- P2.2e wallet-row: macos схлопывает на 760px, наш брейк 768 → дыра.
     Гарантируем одну колонку в нашем брейке. ----------------------------- */
  .admin-main .user-workspace .wallet-row {
    grid-template-columns: 1fr !important;
    gap: 8px;
    align-items: start;
  }

  /* ---- P2.2f Таб-бар: только горизонтальный скролл, без переноса в 2 ряда. */
  .admin-main .user-tabs {
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .admin-main .user-tabs::-webkit-scrollbar { display: none; }
  .admin-main .user-tabs .tab {
    flex: 0 0 auto;
    white-space: nowrap;
    min-height: 40px;
  }

  /* ---- P2.2g Тач-таргеты в зоне юзера ----------------------------------- */
  .admin-main .uc-login { min-height: 32px; }
  .admin-main .user-workspace .btn,
  .admin-main .user-workspace .form-actions .btn,
  .admin-main .ud-danger-body .btn {
    min-height: 36px;
  }

  /* ---- P2.2h iOS zoom-guard: инпуты/textarea ≥16px, иначе Safari зумит. -- */
  .admin-main .user-workspace .input,
  .admin-main .user-workspace .select,
  .admin-main .user-workspace .textarea,
  .admin-main .user-workspace #notif-text-input.textarea {
    font-size: 16px;
  }
}