/* ═══════════════════════════════════════════════════════════════
   CRM-Kovalyov v2.0 — Responsive overrides
   Брейкпоинты: <768px мобильный, 768-1023px планшет, ≥1024px ПК
   Зависит от design-system.css + layout.css
   ═══════════════════════════════════════════════════════════════ */

/* ── Планшет (768px – 1023px) ────────────────────────────────── */
@media (max-width: 1023px) {
  :root {
    --sidebar-width: 220px;
  }

  #content {
    padding: var(--space-4) var(--space-4);
  }

  .stat-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .form-grid-3 {
    grid-template-columns: 1fr 1fr;
  }

  /* Таблицы: скрываем второстепенные столбцы */
  .col-hide-tablet { display: none !important; }

  /* Модалки — чуть шире на планшете */
  .modal { max-width: 95vw; }

  /* Топбар — убрать длинный заголовок если нет места */
  .topbar-title { font-size: var(--text-lg); }
}

/* ── ПК (≥1024px): карточка клиента вдвое шире + фикс. высота ─── */
@media (min-width: 1024px) {
  /* Базовая .modal = 560px; карточка клиента — в 2 раза шире (1120px).
     Фиксированная высота 88vh — модалка не «прыгает» при переключении
     вкладок с разной высотой содержимого; .modal-body (flex:1;overflow-y:auto)
     прокручивается внутри. width:100% не даёт выйти за края на узких десктопах. */
  #modal-client-detail .modal { max-width: 1120px; height: 88vh; }
  /* Окно «Создать договор» — в 2 раза шире (база .modal = 560px). */
  #modal-contract-gen .modal { max-width: 1120px; }
}

/* ── Мобильный (< 768px) ────────────────────────────────────── */
@media (max-width: 767px) {
  :root {
    --topbar-height: 52px;
  }

  /* ── Сайдбар на мобильном — полноэкранный оверлей ── */
  #sidebar {
    position: fixed;
    top: 0;
    left: 0;
    height: 100%;
    width: 280px;
    transform: translateX(-100%);
    transition: transform var(--transition-md);
    z-index: var(--z-sidebar);
    box-shadow: none;
  }

  #sidebar.mobile-open {
    transform: translateX(0);
    box-shadow: var(--shadow-xl);
  }

  /* Оверлей за сайдбаром */
  #sidebar-overlay.visible { display: block; }

  /* Не скрывать лейблы на мобильном: полный сайдбар */
  #sidebar.collapsed {
    width: 280px;
    transform: translateX(-100%);
  }
  #sidebar.collapsed .sidebar-brand,
  #sidebar.collapsed .nav-label,
  #sidebar.collapsed .nav-badge,
  #sidebar.collapsed .nav-section-label,
  #sidebar.collapsed .user-info { display: block; }
  #sidebar.collapsed .nav-item { justify-content: flex-start; padding: var(--space-2) var(--space-3); }
  #sidebar.collapsed .sidebar-header { justify-content: flex-start; }
  #sidebar.collapsed .sidebar-user { justify-content: flex-start; }

  /* ── Основной контент ── */
  #content {
    padding: var(--space-3) var(--space-3);
  }

  /* ── Топбар ── */
  #topbar {
    padding: 0 var(--space-3);
    gap: var(--space-2);
  }
  .topbar-title { font-size: var(--text-base); }

  /* ── Страница ── */
  .page-header {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-2);
  }
  .page-title { font-size: var(--text-xl); }

  /* ── Статкарточки — 1 колонка ── */
  .stat-grid { grid-template-columns: 1fr; }

  /* ── Формы — 1 колонка ── */
  .form-grid,
  .form-grid-3 { grid-template-columns: 1fr; }

  /* ── Тулбар страницы — вертикально ── */
  .page-toolbar { flex-direction: column; align-items: stretch; }
  .page-toolbar .search-box { min-width: 0; }

  /* ── Таблицы — скрываем лишние столбцы ── */
  .col-hide-mobile { display: none !important; }
  .table-wrap { margin: 0 calc(-1 * var(--space-3)); }

  /* ── Модалки — полноэкранные ── */
  .modal-overlay { padding: 0; align-items: flex-end; }
  .modal {
    max-width: 100%;
    max-height: 92vh;
    border-radius: var(--radius-xl) var(--radius-xl) 0 0;
  }
  .modal-body { padding: var(--space-4); }
  .modal-header,
  .modal-footer { padding: var(--space-3) var(--space-4); }

  /* Карточка клиента: верхний край привязан к верху экрана телефона
     (id+класс — приоритет над общим .modal-overlay{align-items:flex-end}) */
  #modal-client-detail.modal-overlay { align-items: flex-start; padding: 0; }
  #modal-client-detail .modal {
    max-width: 100%;
    max-height: 100vh;
    border-radius: 0 0 var(--radius-xl) var(--radius-xl);
  }

  /* ── Кнопки ── */
  .btn-responsive {
    width: 100%;
    justify-content: center;
  }

  /* ── Тосты — снизу по центру ── */
  .toast-container {
    bottom: var(--space-4);
    right: var(--space-3);
    left: var(--space-3);
    max-width: none;
  }

  /* ── Логин ── */
  .login-card { padding: var(--space-6) var(--space-4); }

  /* ── Страница чата ── */
  .chat-layout { flex-direction: column; }
  .chat-sidebar { width: 100% !important; height: 35vh; }
  .chat-area { flex: 1; }

  /* ── Финансы: скрыть некритичные колонки ── */
  .col-hide-mobile,
  td.col-hide-mobile,
  th.col-hide-mobile { display: none !important; }

  /* ── ЛК клиента ── */
  #cc-root { font-size: 15px; }
  /* НЕ трогаем .cc-sidebar/.cc-main: у портала собственные адаптивные стили
     (off-canvas-сайдбар через _injectStyles). Старые !important-правила здесь
     перебивали position:fixed, но не transform:translateX(-100%) → сайдбар
     занимал место в потоке, но был сдвинут за экран (пустота сверху, контент вниз). */

  /* ── Пагинация — компактная ── */
  .pagination { justify-content: center; }
  .page-btn { min-width: 28px; height: 28px; font-size: var(--text-xs); }

  /* ── Аккордеон ── */
  .accordion-header { padding: var(--space-3); }
  .accordion-content { padding: var(--space-3); }

  /* ── Tabs — горизонтальный скролл ── */
  .tabs { gap: 0; }
  .tab { padding: var(--space-2) var(--space-3); font-size: var(--text-xs); }
}

/* ── Очень малые экраны (< 360px) ──────────────────────────── */
@media (max-width: 359px) {
  html { font-size: 14px; }
  #content { padding: var(--space-2); }
  .login-card { padding: var(--space-4) var(--space-3); }
}

/* ── Большие экраны (≥ 1440px) — ограничить ширину контента ── */
@media (min-width: 1440px) {
  .content-constrained {
    max-width: 1200px;
    margin: 0 auto;
  }
}

/* ── Печать ─────────────────────────────────────────────────── */
@media print {
  #sidebar,
  #topbar,
  .no-print,
  .btn,
  .modal-overlay { display: none !important; }

  #main { overflow: visible; }
  #content { overflow: visible; padding: 0; }

  body { background: #fff; color: #000; font-size: 12pt; }

  table { font-size: 10pt; }
  thead tr { background: #eee !important; color: #000 !important; }

  a[href]::after { content: " (" attr(href) ")"; font-size: 8pt; }
}