/* ─────────────────────────────────────────────────────────────
   MOBILE RESPONSIVE — комплексная адаптация под телефоны.
   Срабатывает при ширине ≤ 768px (планшет/телефон) и ≤ 480px.
   Только overrides — базовые стили остаются неизменными.
   ───────────────────────────────────────────────────────────── */

/* ============ ПЛАНШЕТЫ И ТЕЛЕФОНЫ (≤ 768px) ============ */
@media (max-width: 768px) {

  :root {
    --p-page: 10px !important;
    --gap-page: 10px !important;
    --header-h: 56px !important;
  }

  html, body {
    overflow-x: hidden !important;
    max-width: 100vw !important;
  }

  /* ── ЛАЙАУТ ───────────────────────────────── */
  #app.visible {
    flex-direction: column !important;
  }

  .main-area {
    width: 100vw !important;
    max-width: 100vw !important;
    overflow-x: hidden !important;
  }

  .content {
    padding: 10px !important;
    overflow-x: hidden !important;
  }

  /* Сайдбар — мобильный (поверх) */
  .sidebar {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    bottom: 0 !important;
    margin: 0 !important;
    width: 280px !important;
    min-width: 280px !important;
    max-width: 85vw !important;
    height: 100vh !important;
    border-radius: 0 24px 24px 0 !important;
    transform: translateX(-100%);
    z-index: 1000 !important;
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
  }
  .sidebar.mobile-open {
    transform: translateX(0) !important;
  }

  /* ── НАВИГАЦИЯ — скрыть Календарь и Автоматизацию ────────── */
  .nav-item[data-page="calendar"],
  .nav-item[data-page="automation"] {
    display: none !important;
  }

  /* ── ТОПБАР — скрыть, освободить место ───────────────────── */
  .topbar {
    height: 0 !important;
    min-height: 0 !important;
    overflow: visible !important;
    padding: 0 !important;
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
  }
  /* Скрыть всё в топбаре кроме кнопки-бургера */
  .topbar > *:not(.topbar-left),
  .topbar-left > *:not(#mobileMenuBtn) {
    display: none !important;
  }
  /* Бургер — фиксированная плавающая кнопка снизу-слева */
  #mobileMenuBtn {
    display: flex !important;
    position: fixed !important;
    bottom: 20px !important;
    left: 16px !important;
    z-index: 1100 !important;
    width: 48px !important;
    height: 48px !important;
    min-width: 48px !important;
    background: var(--accent) !important;
    border-radius: 14px !important;
    box-shadow: 0 4px 20px rgba(0,0,0,0.35) !important;
    color: #fff !important;
    border: none !important;
    cursor: pointer !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 20px !important;
  }
  /* Главный контент — занять всю высоту */
  .main-area {
    height: 100vh !important;
  }
  .content {
    height: 100vh !important;
    padding-bottom: 80px !important; /* место под FAB-кнопку */
  }

  /* Pomodoro — скрыть на мобильных, мешает */
  .topbar-pomodoro {
    display: none !important;
  }
  .topbar-actions {
    gap: 4px !important;
  }
  .topbar-user {
    padding: 4px 6px !important;
    gap: 0 !important;
  }
  .tb-user-info {
    display: none !important;
  }
  .tb-avatar {
    width: 34px !important;
    height: 34px !important;
    min-width: 34px !important;
  }
  .icon-btn {
    width: 36px !important;
    height: 36px !important;
    font-size: 14px !important;
  }

  /* ── ОБЩИЕ ЗАГОЛОВКИ СТРАНИЦ ───────────────── */
  .page-header,
  .ph-row,
  .header-bar {
    flex-wrap: wrap !important;
    gap: 8px !important;
  }
  .page h1, .page h2, .page-title {
    font-size: 18px !important;
  }

  /* ── ТАБЛИЦЫ — горизонтальный скролл ───────── */
  table {
    display: block !important;
    overflow-x: auto !important;
    white-space: nowrap !important;
    -webkit-overflow-scrolling: touch;
    border-radius: 12px !important;
  }
  th, td {
    padding: 8px 10px !important;
    font-size: 12px !important;
  }

  /* ── СЕТКИ КАРТОЧЕК — одна колонка ─────────── */
  .cards-grid,
  .cards,
  .grid,
  .grid-2,
  .grid-3,
  .grid-4,
  .stats-grid,
  .dashboard-grid,
  .dash-grid,
  .kpi-grid,
  .metrics-grid,
  .widgets-grid,
  .settings-grid,
  .team-grid,
  .franchisees-grid,
  .marketplace-grid {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }

  /* Универсально для всех CSS Grid с колонками */
  [class*="-grid"]:not(.kanban-board) {
    grid-template-columns: 1fr !important;
  }

  /* ── КАРТОЧКИ — уменьшаем отступы ──────────── */
  .card,
  .stat-card,
  .kpi-card,
  .widget,
  .panel {
    padding: 12px !important;
    border-radius: 14px !important;
  }

  /* ── МОДАЛКИ — почти полноэкранно ──────────── */
  .modal,
  .modal-content,
  .modal-body,
  .popup,
  .popup-content,
  .lead-modal,
  .ql-form,
  .modal-window {
    width: calc(100vw - 16px) !important;
    max-width: calc(100vw - 16px) !important;
    min-width: 0 !important;
    max-height: calc(100vh - 32px) !important;
    margin: 8px !important;
    border-radius: 16px !important;
  }
  .modal-overlay,
  .popup-overlay {
    padding: 0 !important;
  }

  /* ── КАНБАН — горизонтальный скролл колонок ── */
  .kanban-board {
    padding: 6px 8px !important;
    gap: 8px !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
  }
  .kanban-col {
    min-width: 260px !important;
    max-width: 280px !important;
    flex: 0 0 auto !important;
  }
  .kb-top {
    flex-wrap: wrap !important;
    padding: 8px !important;
  }
  .kb-filters {
    flex-wrap: wrap !important;
    gap: 6px !important;
    padding: 6px 8px !important;
  }
  .kb-search {
    flex: 1 1 100% !important;
  }

  /* ── ЧАТ — на мобильных одна колонка ────────── */
  .chat-layout,
  .chat-container,
  .chat-wrap {
    flex-direction: column !important;
    height: 100vh !important;
  }
  .chat-sidebar,
  .chat-list,
  .chat-dialogs {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    height: auto !important;
    max-height: 50vh !important;
  }
  .chat-main,
  .chat-window {
    width: 100% !important;
    flex: 1 1 auto !important;
  }

  /* ── НАСТРОЙКИ — только профиль, убрать боковое меню ─────── */
  .settings-layout,
  .settings-wrap {
    flex-direction: column !important;
  }
  .settings-nav {
    display: none !important;
  }
  .settings-body,
  .settings-content {
    width: 100% !important;
    padding: 10px !important;
  }

  /* ── ДИСК / ДОКУМЕНТЫ ──────────────────────── */
  .drive-layout,
  .drive-wrap {
    flex-direction: column !important;
  }
  .drive-tree,
  .drive-sidebar {
    width: 100% !important;
    max-height: 200px !important;
  }
  .drive-grid,
  .docs-grid {
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)) !important;
  }

  /* ── КАЛЕНДАРЬ ─────────────────────────────── */
  .calendar-layout,
  .calendar-wrap {
    flex-direction: column !important;
  }
  .fc-toolbar {
    flex-direction: column !important;
    gap: 6px !important;
  }
  .fc-toolbar-chunk {
    display: flex !important;
    justify-content: center !important;
  }

  /* ── ИНПУТЫ И КНОПКИ — комфортнее тачу ─────── */
  input[type="text"],
  input[type="email"],
  input[type="password"],
  input[type="number"],
  input[type="tel"],
  input[type="search"],
  input[type="url"],
  input[type="date"],
  textarea,
  select {
    font-size: 16px !important; /* iOS не зумит */
    min-height: 40px !important;
  }
  textarea {
    min-height: 80px !important;
  }
  button,
  .btn {
    min-height: 38px !important;
  }

  /* ── ТАБЫ — горизонтальный скролл ──────────── */
  .tabs,
  .tabs-nav,
  .tab-list {
    overflow-x: auto !important;
    white-space: nowrap !important;
    -webkit-overflow-scrolling: touch;
    flex-wrap: nowrap !important;
  }
  .tab,
  .tab-btn {
    flex: 0 0 auto !important;
  }

  /* ── ТОСТЫ И УВЕДОМЛЕНИЯ ───────────────────── */
  .toast,
  .notification {
    left: 8px !important;
    right: 8px !important;
    max-width: calc(100vw - 16px) !important;
    font-size: 13px !important;
  }

  /* ── СТАТЫ И ДАШБОРД ──────────────────────── */
  .stats-row,
  .kpi-row {
    flex-wrap: wrap !important;
    gap: 10px !important;
  }
  .stats-row > *,
  .kpi-row > * {
    flex: 1 1 calc(50% - 5px) !important;
    min-width: 0 !important;
  }

  /* Скрываем pomodoro контролы если они есть в других местах */
  .pomodoro-controls .pomodoro-btn:not(.toggle):not(.reset) {
    display: none !important;
  }
}

/* ============ ТЕЛЕФОНЫ (≤ 480px) ============ */
@media (max-width: 480px) {

  .content {
    padding: 8px !important;
    padding-bottom: 80px !important;
  }

  /* Совсем мелкий экран — стэкаем 2-колоночные блоки */
  .stats-row > *,
  .kpi-row > * {
    flex: 1 1 100% !important;
  }

  .modal,
  .modal-content,
  .modal-body,
  .popup-content,
  .lead-modal {
    width: 100vw !important;
    max-width: 100vw !important;
    height: 100vh !important;
    max-height: 100vh !important;
    margin: 0 !important;
    border-radius: 0 !important;
  }

  .kanban-col {
    min-width: 240px !important;
    max-width: 250px !important;
  }

  .lead-card .lead-card-name {
    font-size: 12px !important;
  }

  /* Шапки страниц — заголовок на отдельной строке */
  .page-header,
  .ph-row {
    flex-direction: column !important;
    align-items: stretch !important;
  }

  /* Кнопки в шапке — на всю ширину */
  .page-header .actions,
  .ph-actions {
    flex-wrap: wrap !important;
    width: 100% !important;
  }
  .page-header .actions > *,
  .ph-actions > * {
    flex: 1 1 auto !important;
  }
}

/* Дополнительно: если topbar absolute pomodoro — глушим её на любом узком экране */
@media (max-width: 1100px) {
  .topbar-pomodoro {
    display: none !important;
  }
}