/* Мобильный слой. Подключается после layout.css на всех страницах.
   До него на узких экранах сайдбар просто прятался (display:none в
   layout.css) без какой-либо замены — навигации не существовало. */

@media (max-width: 1024px) {
  /* Сайдбар превращается в выдвижную панель. Правило display:none из
     layout.css перебиваем нарочно. */
  .sidebar {
    display: flex !important;
    position: fixed;
    top: 0; left: 0; bottom: 0;
    width: min(300px, 85vw);
    transform: translateX(-105%);
    transition: transform 0.25s ease;
    z-index: 150;
    box-shadow: 4px 0 24px rgba(0, 0, 0, 0.25);
  }
  .sidebar.mob-open { transform: translateX(0); }

  .mob-nav-overlay {
    position: fixed; inset: 0;
    background: rgba(0, 0, 0, 0.45);
    opacity: 0; pointer-events: none;
    transition: opacity 0.2s;
    z-index: 140;
  }
  .mob-nav-overlay.mob-open { opacity: 1; pointer-events: auto; }

  .mob-burger {
    position: fixed;
    left: 10px; bottom: 14px;      /* внизу: большой палец достаёт, шапку не толкает */
    width: 48px; height: 48px;
    border-radius: 50%;
    border: 1px solid var(--border-soft);
    background: var(--accent);
    color: #10130c;
    font-size: 22px;
    line-height: 1;
    z-index: 130;
    cursor: pointer;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.3);
  }
}
@media (min-width: 1025px) {
  .mob-burger, .mob-nav-overlay { display: none; }
}

@media (max-width: 640px) {
  /* Карточка лида: грид-ячейки не должны распираться контентом —
     min-width:auto у грид-детей давал колонку 503px в окне 375 и
     обрезал правую треть карточки. */
  .card-columns { grid-template-columns: 1fr !important; }
  .card-columns > div { min-width: 0; }
  .card-columns .card-mini,
  .card-columns table { max-width: 100%; }

  /* Ряды кнопок и полей внутри карточки переносим, а не режем. */
  .drawer [style*="display:flex"], .drawer [style*="display: flex"] { flex-wrap: wrap; }
  .drawer input, .drawer select, .drawer textarea { max-width: 100%; }

  /* iOS вздёргивает зум на инпутах со шрифтом меньше 16px. */
  input, select, textarea { font-size: 16px; }

  /* Пальцевые цели: фильтры-плашки и статусные кнопки карточки. */
  .stat-cell { min-height: 44px; }
  .status-btn, .drawer .btn { min-height: 40px; }
}

@media (max-width: 640px) {
  /* Таблицы-списки складываются в карточки: горизонтальная прокрутка
     девяти колонок на телефоне — подзорная труба. data-label на td
     превращается в подпись строки. */
  .resp-table { min-width: 0 !important; }
  .resp-table thead { display: none; }
  .resp-table tbody tr {
    display: block;
    border: 1px solid var(--border-soft);
    border-radius: var(--radius-md);
    background: var(--bg-surface);
    margin-bottom: 10px;
    padding: 10px 12px;
  }
  .resp-table tbody td {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 10px;
    padding: 3px 0;
    border: none !important;
    text-align: left !important;
  }
  .resp-table tbody td::before {
    content: attr(data-label);
    color: var(--text-tertiary);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    flex-shrink: 0;
  }
  .resp-table tbody td[data-label=""]::before,
  .resp-table tbody td:not([data-label])::before { display: none; }
  /* На телефоне менеджеру нужно понять, кому звонить; разбираться он
     будет за столом. Второстепенные поля и пустые значения прячем. */
  .resp-table tbody td.m-extra { display: none; }
  .resp-table tbody td.m-empty { display: none; }
  .resp-table .lead-inn { display: none; }
  /* Обёртка со скроллом больше не нужна */
  .resp-scroll { overflow-x: visible !important; }
}

@media (max-width: 640px) {
  /* Шапка переносит свои элементы, а не распирает страницу: правила
     остались от слайдера надбавки (убран 15.08), но нужны и другим
     страницам с содержимым в .header-actions — /opty, /team. */
  .header { flex-wrap: wrap; min-width: 0; }
  .header-actions { min-width: 0; max-width: 100%; flex-wrap: wrap; }
  /* Закрытый drawer уезжает за экран translateX(100%) и не должен
     считаться в ширину страницы. */
  .drawer:not(.open) { visibility: hidden; }
  .resp-table { width: 100%; table-layout: fixed; }
  .resp-table tbody tr { overflow: hidden; }
}