/* ============================================================
   mobile.css — компактная мобильная версия дашборда.
   Overlay поверх styles.css, не ломает desktop (только @media).
   ============================================================ */

/* ===== Smartphone: ≤640px ===== */
@media (max-width: 640px) {

  /* ---------- Типографика и spacing ---------- */
  html, body { font-size: 13px; }
  h1, .page-title, [class*="page-title"] { font-size: 19px !important; line-height: 1.2; margin: 0 0 4px !important; }
  h2 { font-size: 15px !important; margin: 0 0 6px !important; }
  h3 { font-size: 13px !important; }
  p, label, .muted-small { font-size: 12px !important; }

  /* ---------- App-shell ---------- */
  .app-shell { grid-template-columns: 1fr !important; }
  .main-area, .app-main, .dashboard-main, main {
    margin-left: 0 !important;
    padding: 50px 10px 12px !important;
  }
  .container, .wrap, .page { padding-left: 10px !important; padding-right: 10px !important; }

  /* ---------- Sidebar — выезжает по hamburger ---------- */
  .sidebar {
    position: fixed; top: 0; left: -260px; bottom: 0; width: 240px;
    z-index: 9998;
    background: var(--surface, #fff);
    box-shadow: 0 0 20px rgba(0,0,0,0.18);
    transition: left .25s ease;
    overflow-y: auto;
    padding: 12px 8px;
  }
  body.sidebar-open .sidebar { left: 0; }
  body.sidebar-open::after {
    content: ''; position: fixed; inset: 0;
    background: rgba(15,23,42,0.4); z-index: 9997;
  }
  .sidebar .nav-item {
    padding: 10px 12px !important;
    font-size: 14px !important;
    gap: 10px !important;
  }
  .sidebar-note,
  .sidebar [class*="legend"],
  .sidebar [class*="footer"] { display: none !important; }

  /* ---------- Hamburger button ---------- */
  #mobileNavToggle {
    position: fixed; top: 8px; left: 8px; z-index: 9999;
    width: 36px; height: 36px;
    border: 0; border-radius: 8px;
    background: #fff;
    box-shadow: 0 2px 8px rgba(0,0,0,0.12);
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    font-size: 18px; color: #475569;
    transition: transform .15s ease;
  }
  #mobileNavToggle:active { transform: scale(0.94); }

  /* ---------- Заголовок страницы ---------- */
  .page-header,
  .header-top,
  header.app-header,
  [class*="page-head"] {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 6px !important;
    padding: 0 !important;
    margin-bottom: 10px !important;
  }
  .page-header > *,
  .header-top > * { width: 100%; }

  /* «Демо обновлено» / "✓ Данные обновлены" — компактная плашка */
  .demo-banner, .data-status, [class*="data-fresh"] {
    font-size: 11px !important;
    padding: 4px 8px !important;
  }

  /* ---------- Sticky toolbar (фильтры всегда видны) ---------- */
  .filters-row,
  .controls-row,
  .form-row,
  .toolbar,
  [class*="filter-bar"],
  [class*="controls-bar"] {
    position: sticky;
    top: 0;
    z-index: 100;
    background: var(--bg, #f8fafc);
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 6px !important;
    padding: 8px 0 !important;
    margin: 0 -10px 8px !important;
    padding-left: 10px !important;
    padding-right: 10px !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.04);
  }

  /* ---------- Form inputs ---------- */
  select,
  input[type="date"],
  input[type="search"],
  input[type="text"],
  input[type="number"] {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    font-size: 16px !important; /* iOS no-zoom */
    height: 38px !important;
    padding: 6px 10px !important;
    box-sizing: border-box !important;
    border-radius: 8px !important;
  }

  /* Date pair — две в ряд, не убежать за экран */
  [class*="date-from"], [class*="date-to"], .date-range,
  .date-range-input, .form-row .date-input {
    width: 100% !important;
  }
  /* Wrap для пары дат если они в одном flex-блоке */
  .date-range, [class*="date-range"] {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 6px !important;
  }

  /* ---------- Range-кнопки (Сегодня/Вчера/7д/...) ---------- */
  .range-buttons,
  [class*="range-buttons"] {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 4px !important;
  }
  .range-button {
    width: 100%;
    padding: 8px 4px !important;
    font-size: 11.5px !important;
    min-height: 36px !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  /* ---------- KPI карточки — компактные ---------- */
  .metric-cards,
  .kpi-grid,
  .cards-grid,
  [class*="metric-grid"] {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 6px !important;
  }
  .metric-card {
    padding: 8px 10px !important;
    min-height: auto !important;
    border-radius: 10px !important;
  }
  .metric-card strong,
  .metric-card .value,
  .metric-card [class*="value"] {
    font-size: 17px !important;
    line-height: 1.15 !important;
    word-break: break-all;
  }
  .metric-card small,
  .metric-card [class*="subtitle"],
  .metric-card .kpi-share {
    font-size: 10px !important;
    line-height: 1.25;
  }
  .metric-card [class*="title"],
  .metric-card .label,
  .metric-card .metric-title {
    font-size: 10px !important;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    color: #64748b;
  }

  /* ---------- Очень узкий экран — одна колонка KPI ---------- */
  @media (max-width: 380px) {
    .metric-cards,
    .kpi-grid,
    .cards-grid,
    [class*="metric-grid"] {
      grid-template-columns: 1fr !important;
    }
  }

  /* ---------- Chart-panel (карточка-обёртка для графиков/таблиц) ---------- */
  .chart-panel,
  [class*="panel"] {
    padding: 12px 10px !important;
    margin-bottom: 8px !important;
    border-radius: 12px !important;
  }
  .panel-header,
  [class*="panel-header"] {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 4px !important;
    margin-bottom: 8px !important;
  }
  .panel-header h2 { font-size: 15px !important; }

  /* ---------- Таблицы — h-scroll ---------- */
  .table-wrap,
  [class*="table-container"],
  [class*="table-wrap"] {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    margin-left: -10px;
    margin-right: -10px;
    padding-left: 10px;
    padding-right: 10px;
  }
  .report-table,
  table {
    min-width: max-content;
    font-size: 11.5px !important;
  }
  .report-table th,
  .report-table td,
  table th,
  table td {
    padding: 6px 8px !important;
    white-space: nowrap;
  }
  .report-table thead th {
    font-size: 10px !important;
    letter-spacing: 0.3px;
  }

  /* ---------- Кнопки ---------- */
  button,
  .primary-button,
  .ghost-button,
  .secondary-button {
    min-height: 38px;
    font-size: 13.5px !important;
  }
  .primary-button,
  .ghost-button,
  .secondary-button {
    padding: 8px 12px !important;
  }

  /* ---------- Графики ---------- */
  canvas {
    max-height: 240px !important;
    width: 100% !important;
  }

  /* ---------- Скрыть «Динамика прибыли по дням» на mobile ---------- */
  /* Tooltip графика большой, перекрывает контент. Сама динамика не критична на маленьком
     экране — итоги видны в KPI вверху страницы. */
  .offer-trend-panel,
  .offer-dashboard-panel.offer-trend-panel {
    display: none !important;
  }
  /* Делаем «Расходы периода» во всю ширину (раньше был 2-col grid с динамикой) */
  .offers-overview-grid {
    grid-template-columns: 1fr !important;
    gap: 8px !important;
  }

  /* ---------- Фикс наложения текста в таблице офферов ---------- */
  /* По умолчанию все td прижимаются друг к другу, на узком экране цифры
     с %-подписями (например «80.00% грн») накладываются друг на друга. */
  table td, table th {
    border-right: 1px solid rgba(0,0,0,0.04);
  }
  table td:last-child, table th:last-child {
    border-right: 0;
  }
  /* Чтобы числа с подписями типа «5 (10.00%)» не сливались */
  .stat-pair {
    display: inline-flex !important;
    flex-direction: column !important;
    line-height: 1.1 !important;
    text-align: right !important;
  }
  .stat-pair strong { display: block !important; }
  .stat-pair small { font-size: 9px !important; opacity: 0.7; }

  /* ============================================================
     Card-layout для таблиц офферов на мобильном.
     Каждая строка таблицы превращается в карточку,
     каждая ячейка — flex-row «Label: Value».
     Все колонки видны, ничего не накладывается.
     ============================================================ */

  /* ===== Таблица «Офферы за период» (16 колонок) ===== */
  .report-table[data-sort-table="offers"] {
    display: block !important;
    min-width: 0 !important;
    width: 100% !important;
    border: 0;
  }
  .report-table[data-sort-table="offers"] thead { display: none !important; }
  .report-table[data-sort-table="offers"] tbody,
  .report-table[data-sort-table="offers"] tfoot { display: block; }
  .report-table[data-sort-table="offers"] tr {
    display: block;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    padding: 10px 12px;
    margin-bottom: 10px;
    box-shadow: 0 1px 2px rgba(0,0,0,0.04);
  }
  .report-table[data-sort-table="offers"] td {
    display: flex !important;
    justify-content: space-between;
    align-items: baseline;
    padding: 4px 0 !important;
    border: 0 !important;
    white-space: normal !important;
    text-align: right;
    font-size: 12.5px !important;
    gap: 8px;
  }
  .report-table[data-sort-table="offers"] td::before {
    content: attr(data-mlabel);
    flex: 1;
    text-align: left;
    color: #64748b;
    font-size: 11px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.3px;
  }
  /* Первая ячейка (Товар) — заголовок карточки, без префикса, на всю ширину */
  .report-table[data-sort-table="offers"] td:nth-child(1) {
    font-size: 15px !important;
    font-weight: 700;
    border-bottom: 1px solid #f1f5f9 !important;
    margin-bottom: 6px;
    padding-bottom: 6px !important;
    display: block !important;
    text-align: left;
  }
  .report-table[data-sort-table="offers"] td:nth-child(1)::before { content: ''; }

  /* Лейблы — по nth-child (порядок колонок из index.php) */
  .report-table[data-sort-table="offers"] td:nth-child(2)::before  { content: 'Выкупы'; }
  .report-table[data-sort-table="offers"] td:nth-child(3)::before  { content: 'Допродажи'; }
  .report-table[data-sort-table="offers"] td:nth-child(4)::before  { content: 'Отказы'; }
  .report-table[data-sort-table="offers"] td:nth-child(5)::before  { content: 'Возвраты'; }
  .report-table[data-sort-table="offers"] td:nth-child(6)::before  { content: '% выкупа'; }
  .report-table[data-sort-table="offers"] td:nth-child(7)::before  { content: 'Средний чек'; }
  .report-table[data-sort-table="offers"] td:nth-child(8)::before  { content: 'Приход'; }
  .report-table[data-sort-table="offers"] td:nth-child(9)::before  { content: 'Расход товар'; }
  .report-table[data-sort-table="offers"] td:nth-child(10)::before { content: 'Доставка возвратов'; }
  .report-table[data-sort-table="offers"] td:nth-child(11)::before { content: 'Закупка возвратов'; }
  .report-table[data-sort-table="offers"] td:nth-child(12)::before { content: 'Реклама'; }
  .report-table[data-sort-table="offers"] td:nth-child(13)::before { content: 'Реклама/отправку'; }
  .report-table[data-sort-table="offers"] td:nth-child(14)::before { content: 'Прибыль/отправку'; }
  .report-table[data-sort-table="offers"] td:nth-child(15)::before { content: 'Чистая прибыль'; }
  .report-table[data-sort-table="offers"] td:nth-child(16)::before { content: 'Чистая маржа'; }

  /* ИТОГО — выделить */
  .report-table[data-sort-table="offers"] tfoot tr {
    background: #eef2ff;
    border-color: #c7d2fe;
  }

  /* ===== Таблица «Воронка каждого оффера» (страница Статистика) ===== */
  /* Колонки: Оффер(1), Лиды(2), Спам(3), Чистые(4), Апрув(5), Отказ(6), В обр.(7), % апрува(8), Обработано(9) */
  .stats-offers-table {
    display: block !important;
    min-width: 0 !important;
    width: 100% !important;
  }
  .stats-offers-table thead { display: none !important; }
  .stats-offers-table tbody, .stats-offers-table tfoot { display: block; }
  .stats-offers-table tr {
    display: block;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    padding: 10px 12px;
    margin-bottom: 10px;
    box-shadow: 0 1px 2px rgba(0,0,0,0.04);
  }
  .stats-offers-table td {
    display: flex !important;
    justify-content: space-between;
    padding: 4px 0 !important;
    border: 0 !important;
    white-space: normal !important;
    text-align: right;
    font-size: 12.5px !important;
    gap: 8px;
  }
  .stats-offers-table td::before {
    content: '';
    flex: 1;
    text-align: left;
    color: #64748b;
    font-size: 11px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.3px;
  }
  .stats-offers-table td:nth-child(1) {
    font-size: 15px !important;
    font-weight: 700;
    border-bottom: 1px solid #f1f5f9 !important;
    margin-bottom: 6px;
    padding-bottom: 6px !important;
    display: block !important;
    text-align: left;
  }
  .stats-offers-table td:nth-child(2)::before { content: 'Лиды'; }
  .stats-offers-table td:nth-child(3)::before { content: 'Спам'; }
  .stats-offers-table td:nth-child(4)::before { content: 'Чистые'; }
  .stats-offers-table td:nth-child(5)::before { content: 'Апрув'; }
  .stats-offers-table td:nth-child(6)::before { content: 'Отказ'; }
  .stats-offers-table td:nth-child(7)::before { content: 'В обработке'; }
  .stats-offers-table td:nth-child(8)::before { content: '% апрува'; }
  .stats-offers-table td:nth-child(9)::before { content: 'Обработано'; }
  .stats-offers-table tfoot tr {
    background: #eef2ff;
    border-color: #c7d2fe;
  }

  /* ---------- Скрыть второстепенные элементы ---------- */
  .print-btn,
  button[data-action="print"],
  [class*="print"] {
    display: none !important;
  }

  /* «Сравнить с прошлым периодом» checkbox — мелче */
  .compare-toggle, .check-row { font-size: 12px !important; }

  /* ---------- Realtime badge — точка-only когда всё OK ---------- */
  .realtime-badge {
    bottom: 8px !important;
    right: 8px !important;
    padding: 4px !important;
  }
  .realtime-badge[data-state="fresh"] .rt-text,
  .realtime-badge[data-state="mid"] .rt-text {
    display: none;
  }
  .realtime-badge .rt-fetch {
    display: none !important; /* на mobile не показываем — есть в settings */
  }

  /* ---------- Modal «↻ История» — полноэкранный ---------- */
  .realtime-dlg .rt-dlg-card {
    width: calc(100vw - 16px) !important;
    margin: 8px !important;
    max-height: calc(100vh - 16px);
    overflow-y: auto;
  }

  /* ---------- Этапы движения лидов — компактные bars ---------- */
  .funnel-bars,
  [class*="funnel-bar"],
  [class*="stage"] {
    font-size: 11.5px !important;
  }

  /* ---------- Звонки таблица — оптимизация ---------- */
  #callsTable tr td:nth-child(n+7) {
    /* Скрыть редко нужные столбцы (политeneess, CRM, кнопки) — оставить главное */
    /* Раскомментировать если будет нужно более радикально:
    display: none; */
  }

  /* ---------- Footer-плашка статусов ---------- */
  .status-legend, [class*="status-legend"] {
    font-size: 10px !important;
    padding: 6px 8px !important;
  }
}

/* ===== Mid-tablet: 641-960px ===== */
@media (min-width: 641px) and (max-width: 960px) {
  /* Sidebar — узкий, только иконки + tooltip на hover */
  .sidebar {
    width: 60px;
  }
  .sidebar .nav-item span,
  .sidebar-note,
  .nav-group-title { display: none; }
  .sidebar .nav-item {
    padding: 8px;
    justify-content: center;
  }

  /* KPI grid — 3 колонки */
  .metric-cards,
  .kpi-grid,
  [class*="metric-grid"] {
    grid-template-columns: repeat(3, 1fr) !important;
  }
}

/* ===== Touch devices: убрать hover-only state ===== */
@media (hover: none) and (pointer: coarse) {
  .calls-qa-tile:hover,
  .metric-card:hover,
  .nav-item:hover,
  button:hover {
    transform: none !important;
    background: inherit !important;
  }
}

/* ===== Landscape mobile: keep usable ===== */
@media (max-width: 900px) and (orientation: landscape) and (max-height: 500px) {
  .main-area, .app-main, main { padding-top: 44px !important; }
  canvas { max-height: 200px !important; }
}