/* ═══ mobile-solo.css — полноценный мобильный режим СОЛО-мастера (Босс 17.07.2026) ═══
   Активация двухслойная:
   1) viewport device-width ставится ТОЛЬКО при html.solo-mobile (выбор соло-мастера);
   2) все правила ниже — @media (max-width:820px): салонная админка живёт на
      viewport width=1280 (директива Босса №1) и НИКОГДА не попадает под эти правила.
   Исследование (mobile-first чеклист):
   · базовый шрифт ≥16px, инпуты 16px (iOS не зумит поля)
   · тач-цели ≥44px · ноль горизонтального переполнения экрана
   · нижняя навигация в зоне большого пальца · сайдбар = выезжающая шторка
   · таблицы в скролл-контейнерах · модалки на весь экран · safe-area инсеты */

@media (max-width: 820px) {
  /* ── База: типографика и переполнение ── */
  html { -webkit-text-size-adjust: 100%; }
  body { font-size: 16px; overflow-x: hidden; }
  .content { padding: 14px 12px calc(76px + env(safe-area-inset-bottom)); }
  .content h1 { font-size: 21px; }
  .content h2 { font-size: 18px; }
  .content h3 { font-size: 16px; }
  img, video, canvas { max-width: 100%; height: auto; }

  /* ── Сайдбар-шторка: используем ШТАТНУЮ систему CRM (.sidebar.open + #sidebarBackdrop).
     Дубль-оверлей был поверх меню и глотал тапы (баг «не нажимается») — удалён. ── */
  .sidebar.open { z-index: 1200 !important; }
  .sidebar { overflow-y: auto; -webkit-overflow-scrolling: touch; }
  .sidebar-item, .sidebar-group-header { min-height: 46px; font-size: 15px; }
  /* Подвал шторки: був на чверть екрана (мова+версія+вийти) — тепер компактний рядок */
  .sidebar-footer { padding: 6px 10px calc(6px + env(safe-area-inset-bottom)); display: flex; align-items: center; gap: 6px; flex-wrap: nowrap; }
  .sidebar-footer .sidebar-lang { flex: 1; min-width: 0; margin: 0; }
  .sidebar-footer .sidebar-lang select { width: 100%; min-height: 36px; font-size: 13px !important; padding: 4px 6px; }
  .sidebar-footer button { width: auto; min-height: 36px; font-size: 12.5px; padding: 5px 9px; margin: 0; white-space: nowrap; }
  .sidebar-footer button .material-icons-round { font-size: 16px; }

  /* ── Нижняя навигация (зона большого пальца) ── */
  .sm-bottomnav {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 1000;
    display: flex; background: var(--card,#fff); border-top: 1px solid var(--border,#e5e5ee);
    padding-bottom: env(safe-area-inset-bottom);
    box-shadow: 0 -4px 16px rgba(0,0,0,.07);
  }
  .sm-bottomnav button {
    flex: 1; border: 0; background: none; padding: 7px 2px 6px; cursor: pointer;
    display: flex; flex-direction: column; align-items: center; gap: 2px;
    font-size: 10.5px; color: var(--text-secondary,#777); min-height: 54px;
  }
  .sm-bottomnav button .material-icons-round { font-size: 22px; }
  .sm-bottomnav button.active { color: var(--primary,#6c5ce7); font-weight: 600; }

  /* ── Сетки → колонны ── */
  .kpi-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .kpi-card { padding: 12px; }
  .grid2, .set-grid, .row { grid-template-columns: 1fr !important; }
  .card { border-radius: 12px; }

  /* ── Таблицы: горизонтальный скролл вместо разъезда ── */
  .card { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  table { min-width: 520px; }
  table th, table td { padding: 9px 10px; font-size: 13.5px; white-space: nowrap; }

  /* ── Формы: пальце-дружелюбно, без iOS-зума ── */
  input, select, textarea { font-size: 16px !important; min-height: 44px; }
  textarea { min-height: 80px; }
  button, .btn { min-height: 42px; font-size: 15px; }
  .btn.sm, .btn-sm { min-height: 36px; font-size: 13px; }
  label { font-size: 14px; }

  /* ── Модалки: во весь экран ── */
  .modal-overlay { padding: 0; align-items: flex-end; }
  .modal {
    max-width: 100vw !important; width: 100vw !important;
    max-height: 94vh; border-radius: 18px 18px 0 0;
    padding-bottom: env(safe-area-inset-bottom);
  }
  .modal-body { padding: 14px; }

  /* ── Журнал (календарь): естественный скролл ── */
  #calendarGrid, .cal-grid, .journal-grid { overflow-x: auto; -webkit-overflow-scrolling: touch; }

  /* ── Разное ── */
  .page-header { flex-wrap: wrap; gap: 8px; }
  .toolbar, .filters { flex-wrap: wrap; gap: 6px; }
  ::-webkit-scrollbar { height: 4px; width: 4px; }
}

@media (max-width: 820px) {
  /* AI-помічник: панель на весь екран, позиціювання JS ігноруємо */
  #aiPanel {
    left: 0 !important; right: 0 !important; top: auto !important;
    bottom: 0 !important; width: 100vw !important;
    height: min(86vh, 640px) !important; border-radius: 18px 18px 0 0;
  }
  /* голова AI-помічника — в кут над нижньою навігацією, не на шапці */
  #aiFab {
    top: auto !important; left: auto !important;
    right: 10px !important; bottom: calc(66px + env(safe-area-inset-bottom)) !important;
  }
  /* штатна кнопка меню в topbar — видима і палецедружня */
  .mobile-toggle { display: inline-flex !important; width: 42px; height: 42px; align-items: center; justify-content: center; }
  .sb-toggle { display: none !important; }
  .topbar { flex-wrap: wrap; gap: 6px; position: sticky; top: 0; z-index: 900; background: var(--bg,#f5f6fa); }
  .topbar-title { font-size: 17px; max-width: 52vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  #userBadge { display: none !important; }
  .sidebar.open { transform: translateX(0); }
}

/* Нижняя навигация существует только в solo-mobile — вне его скрыта всегда */
html:not(.solo-mobile) .sm-bottomnav { display: none !important; }