/*
 * Shared mobile adaptations.
 *
 * Loaded as <link rel="stylesheet" href="/mobile.css"> in <head> AFTER
 * each page's inline <style> so these rules override under the breakpoint
 * without bumping specificity. Per-page styles win at desktop sizes.
 *
 * Two breakpoints:
 *   ≤ 720px — tablets / large phones in landscape. Mostly tightens
 *             padding and shrinks fixed grid widths.
 *   ≤ 480px — phones. Aggressive: stacks the nav into two rows,
 *             collapses 2-/3-/4-/5-column grids to 1-2 columns,
 *             allows wide tables to scroll horizontally.
 *
 * If you find a layout that still breaks on a real device, prefer
 * adding the rule here over a per-page tweak — keeps the responsive
 * logic in one place across all 26 hand-written HTML pages.
 */

/* ── Tablet / large phone landscape ───────────────────────────── */
@media (max-width: 720px) {
  .nav-inner {
    padding: 10px 14px !important;
    min-height: 52px !important;
  }
  .main {
    padding: 18px 14px !important;
  }
  /* 4-/5-/6-column metric grids → 2 columns. Targets the tile rows
     used on /provider-dashboard, /customer-dashboard, the 5/6 metric
     cards on /provider-stat etc. No `.main >` prefix: many of these
     grids are nested inside a `.card` (task-monitor, provider-stat
     breakdowns) so a direct-child selector missed them and they
     stayed 4-/5-/6-wide on phones. Inline `repeat(N)` always wants to
     stack — broaden to catch the nested ones too. */
  div[style*="grid-template-columns:repeat(3"],
  div[style*="grid-template-columns:repeat(4"],
  div[style*="grid-template-columns:repeat(5"],
  div[style*="grid-template-columns:repeat(6"],
  div[style*="grid-template-columns: repeat(3"],
  div[style*="grid-template-columns: repeat(4"],
  div[style*="grid-template-columns: repeat(5"],
  div[style*="grid-template-columns: repeat(6"],
  /* Class-based metric/card grids that the inline-style selectors above
     can't see (the responsive rules used to live per-page; these had
     none). Homepage stat band + 4-up tiles, customer KPI rows,
     register choice cards. */
  .grid-4, .stats-bar, .kpi-grid, .cards {
    grid-template-columns: 1fr 1fr !important;
  }
  /* 2-column "content + fixed side panel" layouts. The side column is a
     fixed px width (catalog filters / dashboard panes 280px; the order &
     pricing panel on task-form `.layout` and agent-profile 260px). On a
     phone that fixed column overflows the viewport and the panel "уезжает"
     off-screen (см. task-form / agent-profile). Stack to one column.
       * `.layout` — the main 2-col wrapper (task-form; dispute-detail and
         task-monitor already self-collapse, this is harmless on them).
       * inline 1fr 260px / 1fr 280px — agent-profile order panel, catalog.
     minmax(0,1fr) (not plain 1fr): plain 1fr is minmax(auto,1fr) and a wide
     child (long token strings, <pre>) in the left column can blow the track
     back past the viewport; minmax(0,…) lets it shrink. */
  .layout,
  div[style*="grid-template-columns:1fr 260px"],
  div[style*="grid-template-columns: 1fr 260px"],
  div[style*="grid-template-columns:1fr 280px"],
  div[style*="grid-template-columns: 1fr 280px"] {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  /* Admin + back-office sidebar: at tablet width 220px sidebar
     leaves little room for the queue. Shrink to 170px so the queue
     stays usable in landscape; full collapse happens at <=480px. */
  .admin-side {
    width: 170px !important;
  }
}

/* ── Phone portrait ───────────────────────────────────────────── */
@media (max-width: 480px) {
  /*
   * Nav: stack the top row into two lines if needed.
   *
   * Default desktop nav is a single flex row:
   *   [logo]   [nav-links]   [user-link / login buttons]
   *
   * At < 480px we let the row wrap. The center nav-links group keeps
   * its original order but flows to a second line under the logo when
   * there isn't enough horizontal space, with the user/auth slot
   * staying on the first row next to the logo. This keeps the most
   * frequent action (logo home / profile) reachable without scrolling.
   */
  .nav-inner {
    flex-wrap: wrap !important;
    gap: 4px 10px !important;
    padding: 8px 12px !important;
  }
  /* The middle nav-link group (Каталог / Мои задачи / Провайдер).
     `.nav-inner > div` selects the centre cluster as long as it's a
     bare div — nav-auth and other named slots use IDs and aren't
     captured. Order: 99 to push it to the end of the wrapped row. */
  .nav-inner > div:not([id]):not([class]) {
    order: 99 !important;
    width: 100% !important;
    justify-content: flex-start !important;
    gap: 14px !important;
    font-size: 12px !important;
  }
  .nav-logo {
    font-size: 16px !important;
  }
  /* User-link span: shrink so it fits next to the logo. */
  #nav-user-link, #nav-auth, #nav-info {
    font-size: 12px !important;
  }

  .main {
    padding: 14px 12px !important;
    max-width: 100% !important;
  }

  /* All metric grids collapse to 1 column on portrait. No `.main >`
     prefix (see the 720px note): catches nested-in-card grids too. */
  div[style*="grid-template-columns:repeat(4"],
  div[style*="grid-template-columns:repeat(5"],
  div[style*="grid-template-columns:repeat(6"],
  div[style*="grid-template-columns:repeat(3"],
  div[style*="grid-template-columns: repeat(4"],
  div[style*="grid-template-columns: repeat(5"],
  div[style*="grid-template-columns: repeat(6"],
  div[style*="grid-template-columns: repeat(3"],
  /* Inline 2-column grids inside cards stack too. */
  div[style*="grid-template-columns:1fr 1fr"],
  div[style*="grid-template-columns: 1fr 1fr"],
  /* Class-based grids the inline selectors can't see. Homepage
     featured-agent grid + 4-up tile/stat band, customer KPI rows,
     register customer/provider choice cards. */
  .agent-grid, .grid-4, .grid-2, .kpi-grid, .cards {
    grid-template-columns: 1fr !important;
  }
  /* Homepage stat band keeps 2-up on phone — stacking it to 1 column
     leaves the per-cell border-right dividers dangling full-width. */
  .stats-bar {
    grid-template-columns: 1fr 1fr !important;
  }

  /* Net-breakdown / KPI strips defined at page level (provider-stat,
     customer-stat). Collapse to two columns so the 5 cards become
     5 short rows of 2 (last is wide). */
  #net-breakdown {
    grid-template-columns: 1fr 1fr !important;
  }

  /* Dispute decision cards (admin-disputes): a literal `1fr 1fr 1fr`
     grid the inline-`repeat()` selectors above can't see. Three cards
     at ~360px are unreadably narrow — drop to one column. */
  .decision-cards {
    grid-template-columns: 1fr !important;
  }

  /* Fixed-position toasts (dispute-detail / task-form / withdraw):
     top-right anchored with no width cap — on a narrow phone the text
     can run off the right edge. Cap width and move clear of the nav. */
  .toast {
    max-width: calc(100vw - 24px) !important;
    right: 12px !important;
    left: auto !important;
  }

  /* Wide transaction-style tables — let them scroll horizontally
     instead of squashing columns into illegibility. The wrapper is
     usually a `.card` so the scroll bar stays inside the card border. */
  /* Back-office wide grids use bespoke row classes (.esc-row 9-col,
     .audit-row 5-col), NOT the .tx-row pattern, with min-width up to
     1080px → without these they distend the .card past the viewport and
     scroll the WHOLE page horizontally. Same treatment: cap the row's
     min-width and let the card scroll internally. */
  .card .tx-row,
  .card .tx-head,
  .card .esc-row,
  .card .esc-head,
  .card .audit-row,
  .card .audit-head {
    min-width: 520px;
  }
  .card:has(.tx-row),
  .card:has(.esc-row),
  .card:has(.audit-row) {
    overflow-x: auto;
  }

  /* Forms */
  input, select, textarea {
    font-size: 16px !important;     /* >=16px stops iOS Safari from auto-zooming */
  }
  .btn-submit, .btn-primary {
    width: 100% !important;
  }

  /* Buttons & dropdowns inside .card row clusters often live in
     `display:flex;gap:8px` and overflow on narrow phones. Wrap. */
  .card div[style*="display:flex"][style*="gap"] {
    flex-wrap: wrap;
  }

  /* Modals (delete confirmation, dispute decision, session-expired
     overlay). Their inner panels are usually `max-width:380-440px;
     width:90%`, fine — just guarantee they fit. */
  [id$="-modal-bg"] > div,
  #__session_expired > div {
    max-width: 92vw !important;
  }

  /* Sidebar layouts (admin disputes, /profile-settings) — collapse
     so the content panel takes the full screen.
     .admin-layout uses display:flex (NOT grid) in admin-agents,
     back-office-*.html — grid-template-columns has no effect there.
     Force the column stack via flex-direction so both flex- and
     grid-based sidebar layouts collapse cleanly. */
  .admin-layout,
  .ps-layout {
    flex-direction: column !important;
    grid-template-columns: 1fr !important;
  }
  .admin-side,
  .ps-side {
    width: 100% !important;
    min-height: auto !important;
    border-right: none !important;
    border-bottom: 0.5px solid var(--border) !important;
    padding: 10px 12px !important;
  }
  /* Sidebar nav links inside admin-side — laid out as a horizontal
     scroll strip on narrow screens so the user can swipe between
     sections. Back-office-nav.js renders <a class="side-link">. */
  .admin-side > .brand {
    padding: 0 0 8px !important;
    margin-bottom: 8px !important;
  }
  .admin-side > nav,
  .admin-side > .side-nav {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    gap: 6px !important;
    -webkit-overflow-scrolling: touch;
  }
  .admin-side .side-link,
  .admin-side > a {
    flex-shrink: 0 !important;
    white-space: nowrap !important;
    padding: 6px 10px !important;
    font-size: 12px !important;
  }

  /* Admin agent-queue rows (admin-agents.html): 5-column grid is
     totally unreadable on phone. Stack the columns vertically with
     the agent name as headline, the rest as small meta lines. */
  .row,
  .row-head {
    grid-template-columns: 1fr !important;
    min-height: auto !important;
  }
  .row {
    padding: 10px 12px !important;
    gap: 4px !important;
  }
  .row-head {
    display: none !important;  /* column labels useless when stacked */
  }
  .row > * {
    min-width: 0 !important;
    overflow-wrap: anywhere !important;
  }

  /* Modal cards on admin/back-office pages — mod-card max-width is
     usually 680px which is fine, but the inline <style>'s padding of
     22px 26px wastes horizontal space on phones. */
  .mod-card {
    padding: 16px !important;
    max-width: 94vw !important;
  }
  .kv {
    grid-template-columns: 1fr !important;
    gap: 2px !important;
    padding: 6px 0 !important;
  }
  .kv-k {
    font-size: 11px !important;
    color: var(--muted) !important;
    text-transform: uppercase !important;
    letter-spacing: .04em !important;
  }

  /* Audit / transactions tables in back-office — they're explicit
     <table>, not the .tx-row pattern. Let them scroll the card. */
  .card table {
    min-width: 480px;
  }
  .card:has(table) {
    overflow-x: auto;
  }

  /* Toolbars (homepage + catalog: count-label on the left, sort/filter
     selects on the right via justify-between). On a phone the row can't
     hold both — wrap so the selects drop to a second line instead of
     overflowing horizontally. */
  .toolbar {
    flex-wrap: wrap !important;
    gap: 8px !important;
  }

  /* Recommendation / similar-agent strips are horizontal scrollers of
     fixed-width cards (reco.js). 240px is wide on a ~360px phone — trim
     so the next card peeks in and signals the strip scrolls. */
  .reco-card {
    width: 200px !important;
  }

  /* agent-profile tab bar (Обзор/Тарифы/Отзывы/Задачи) is an
     overflow-x:auto strip, so it never overflows the viewport — but at
     18px side-padding the 4 tabs need a scroll to all show. Tighten so
     they fit a ~360px phone without scrolling. */
  .tab-item {
    padding: 8px 11px !important;
    font-size: 12px !important;
  }

  /* customer-history search box has a fixed width:180px inside a
     no-wrap flex row next to the Экспорт CSV button — on a ~320px phone
     the pair overflows. Let the input flex-shrink to share the row. */
  #search-input {
    flex: 1 1 auto !important;
    width: auto !important;
    min-width: 0 !important;
  }

  /* Тач-таргеты ≥44px (Apple/Google HIG): пальцем по мелким кнопкам/ссылкам
     навигации/чипам легко промахнуться. Высоту растим через min-height +
     выравнивание по центру, не раздувая визуальный размер текста. Иконочные
     элементы навигации (колокольчик уведомлений, бургер) получают квадрат. */
  /* ВАЖНО: исключаем элементы, скрытые инлайн-стилем display:none —
     иначе `display: inline-flex !important` перебивал JS-скрытие кнопок
     (btn-accept/btn-cancel/… на /task-monitor) и они показывались все
     на мобиле, хотя на десктопе скрыты. :not покрывает оба варианта
     сериализации ('display:none' в HTML и 'display: none' от el.style). */
  .btn:not([style*="display:none"]):not([style*="display: none"]),
  .btn-submit:not([style*="display:none"]):not([style*="display: none"]),
  .btn-primary:not([style*="display:none"]):not([style*="display: none"]),
  .tab-item, .seg-opt, .side-link {
    min-height: 44px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
  /* Ссылки-иконки в навбаре (уведомления и т.п.) — кликабельный квадрат. */
  #nav-auth a, .nav-links a, #nav-bell, [data-nav-icon] {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }
}
