/* ══════════════════════════════════════════════════════════════════════
   TB Platform — Universal Mobile Responsive Layer
   Подключается последним в base.html и marketplace_base.html
   Breakpoints:  ≤ 991px (tablet), ≤ 767px (mobile L), ≤ 479px (mobile S)
   ══════════════════════════════════════════════════════════════════════ */

/* ──────────────────────────────────────────────────────────────────────
   1. SAFE AREA + GLOBAL SCROLL
   ────────────────────────────────────────────────────────────────────── */
:root {
  --mob-bottom-nav-h: 60px;
  --mob-safe-bottom: env(safe-area-inset-bottom, 0px);
}

/* ──────────────────────────────────────────────────────────────────────
   2. CRM — МОБИЛЬНАЯ НИЖНЯЯ НАВИГАЦИЯ (bottom tab bar)
   Показывается только на мобиле (≤ 991px), скрывается на десктопе
   ────────────────────────────────────────────────────────────────────── */
.mob-bottom-nav {
  display: none;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 1200;
  height: calc(var(--mob-bottom-nav-h) + var(--mob-safe-bottom));
  padding-bottom: var(--mob-safe-bottom);
  background: rgba(4, 10, 24, 0.96);
  border-top: 1px solid rgba(96, 165, 250, 0.14);
  backdrop-filter: blur(20px) saturate(130%);
  -webkit-backdrop-filter: blur(20px) saturate(130%);
  box-shadow: 0 -8px 32px rgba(2, 6, 23, 0.38);
}

.mob-bottom-nav-inner {
  display: grid;
  grid-template-columns: repeat(var(--mob-nav-cols, 5), minmax(0, 1fr));
  height: var(--mob-bottom-nav-h);
  align-items: stretch;
}

.mob-nav-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  text-decoration: none;
  color: rgba(148, 163, 184, 0.75);
  font-size: 0.6rem;
  font-weight: 700;
  padding: 4px 2px;
  border: 0;
  background: transparent;
  cursor: pointer;
  transition: color 0.14s;
  -webkit-tap-highlight-color: transparent;
  position: relative;
}

.mob-nav-item.is-active { color: #60a5fa; }
.mob-nav-item.is-active::before {
  content: "";
  position: absolute;
  top: 0;
  left: 20%;
  right: 20%;
  height: 2px;
  border-radius: 0 0 3px 3px;
  background: linear-gradient(90deg, #3b82f6, #8b5cf6);
}

.mob-nav-item-icon {
  font-size: 1.2rem;
  line-height: 1;
}

.mob-nav-item-label {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 60px;
}

/* Кнопка "ещё" — открывает drawer */
.mob-nav-more-btn { cursor: pointer; }

/* Мобильный drawer (slide-up с полной навигацией) */
.mob-nav-drawer {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 1300;
}

.mob-nav-drawer.is-open { display: flex; flex-direction: column; justify-content: flex-end; }

.mob-nav-drawer-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(2, 6, 23, 0.64);
  backdrop-filter: blur(4px);
  cursor: pointer;
}

.mob-nav-drawer-panel {
  position: relative;
  background: rgba(5, 12, 28, 0.98);
  border-top: 1px solid rgba(96, 165, 250, 0.16);
  border-radius: 24px 24px 0 0;
  padding: 0.6rem 1rem calc(var(--mob-bottom-nav-h) + var(--mob-safe-bottom) + 0.5rem);
  max-height: 80vh;
  overflow-y: auto;
  animation: mob-drawer-in 0.22s cubic-bezier(0.22, 1, 0.36, 1) both;
}

@keyframes mob-drawer-in {
  from { transform: translateY(100%); }
  to   { transform: none; }
}

.mob-nav-drawer-handle {
  width: 40px;
  height: 4px;
  border-radius: 999px;
  background: rgba(96, 165, 250, 0.24);
  margin: 0 auto 1rem;
}

.mob-nav-drawer-title {
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #60a5fa;
  padding: 0.2rem 0 0.5rem;
}

.mob-nav-drawer-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.5rem;
}

.mob-nav-drawer-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.3rem;
  padding: 0.7rem 0.4rem;
  border-radius: 14px;
  border: 1px solid rgba(96, 165, 250, 0.1);
  background: rgba(255, 255, 255, 0.025);
  text-decoration: none;
  color: rgba(203, 213, 225, 0.85);
  font-size: 0.68rem;
  font-weight: 700;
  text-align: center;
  transition: background 0.13s, border-color 0.13s;
  -webkit-tap-highlight-color: transparent;
}

.mob-nav-drawer-item.is-active {
  background: rgba(37, 99, 235, 0.15);
  border-color: rgba(96, 165, 250, 0.26);
  color: #eff6ff;
}

.mob-nav-drawer-item span:first-child { font-size: 1.4rem; }

/* ──────────────────────────────────────────────────────────────────────
   3. МАРКЕТ — МОБИЛЬНАЯ НИЖНЯЯ НАВИГАЦИЯ
   ────────────────────────────────────────────────────────────────────── */
.mob-market-bottom-nav {
  display: none;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 1200;
  height: calc(58px + var(--mob-safe-bottom));
  padding-bottom: var(--mob-safe-bottom);
  background: rgba(255, 255, 255, 0.96);
  border-top: 1px solid rgba(0, 0, 0, 0.08);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.08);
}

.market-body--tb-dark .mob-market-bottom-nav {
  background: rgba(5, 14, 30, 0.97);
  border-top-color: rgba(96, 165, 250, 0.14);
}

.mob-market-nav-inner {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  height: 58px;
  align-items: stretch;
}

.mob-market-nav-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  text-decoration: none;
  color: #64748b;
  font-size: 0.58rem;
  font-weight: 700;
  padding: 4px 2px;
  transition: color 0.14s;
  -webkit-tap-highlight-color: transparent;
  position: relative;
}

.mob-market-nav-item.is-active { color: #2563eb; }
.mob-market-nav-item.is-active::before {
  content: "";
  position: absolute;
  top: 0;
  left: 25%;
  right: 25%;
  height: 2px;
  border-radius: 0 0 3px 3px;
  background: #2563eb;
}

.market-body--tb-dark .mob-market-nav-item { color: rgba(148, 163, 184, 0.65); }
.market-body--tb-dark .mob-market-nav-item.is-active { color: #60a5fa; }

.mob-market-nav-item span:first-child { font-size: 1.15rem; line-height: 1; }

/* ──────────────────────────────────────────────────────────────────────
   4. CRM — TABLET (≤ 991px)
   ────────────────────────────────────────────────────────────────────── */
@media (max-width: 991px) {
  /* Показываем мобильную навигацию */
  .mob-bottom-nav { display: block; }

  /* Основной контент не перекрывается таббаром */
  body[data-tbos-module="crm"] .page-wrap {
    padding-bottom: calc(var(--mob-bottom-nav-h) + var(--mob-safe-bottom) + 0.5rem) !important;
  }

  /* Таблицы — горизонтальный скролл */
  body[data-tbos-module="crm"] .table-responsive,
  body[data-tbos-module="crm"] table {
    min-width: 0;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* Убираем transform hover эффект на touch */
  body[data-tbos-module="crm"] .sidebar-link:hover { transform: none; }

  /* Настройки — Settings hub */
  .cc-layout {
    grid-template-columns: 1fr !important;
  }
  .cc-sidebar, .cc-insights { display: none !important; }
  .cc-workspace { padding: 0 !important; }

  /* Панели настроек — 1 колонка */
  .cc-settings-grid,
  .cc-setting-cards-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }

  /* Карточки сотрудников — 2 колонки на планшете */
  .emp-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }

  /* Форма сотрудника — 1 колонка */
  .eform-layout { grid-template-columns: 1fr !important; }
  .eform-aside { position: static !important; }

  /* Карточка сотрудника — 1 колонка */
  .ecard-layout { grid-template-columns: 1fr !important; }
}

/* ──────────────────────────────────────────────────────────────────────
   5. CRM — MOBILE (≤ 767px)
   ────────────────────────────────────────────────────────────────────── */
@media (max-width: 767px) {
  /* Карточки сотрудников — 1 колонка */
  .emp-grid { grid-template-columns: 1fr !important; }

  /* Settings cards — 1 колонка */
  .cc-settings-grid,
  .cc-setting-cards-grid { grid-template-columns: 1fr !important; }

  /* Settings toolbar */
  .cc-toolbar { grid-template-columns: 1fr !important; }
  .cc-toolbar-search { display: none; }
  .cc-toolbar-actions .cc-toolbar-chip { display: none; }

  /* Settings summary strip */
  .cc-summary-strip { grid-template-columns: repeat(2, minmax(0,1fr)) !important; }

  /* Статистика CRM — 2 колонки вместо 4 */
  body[data-tbos-module="crm"] .stats-grid,
  body[data-tbos-module="crm"] [class*="stats-col"],
  body[data-tbos-module="crm"] .row.g-3 { --bs-gutter-x: 0.5rem; }

  /* Toolbar/section headers — стак */
  body[data-tbos-module="crm"] .d-flex.justify-content-between {
    flex-direction: column;
    align-items: stretch !important;
    gap: 0.5rem;
  }

  /* Кнопки в шапке секций на мобиле */
  body[data-tbos-module="crm"] .section-block,
  body[data-tbos-module="crm"] .toolbar { padding: 0.8rem !important; }

  /* Платформенный модал — полноэкранный на мобиле */
  .tbpm-panel {
    max-width: 100% !important;
    max-height: 100vh !important;
    border-radius: 0 !important;
    margin: 0 !important;
    height: 100%;
  }
  .tbpm-grid { grid-template-columns: 1fr !important; }
  .tbpm-grid [style*="grid-column:span 2"] { grid-column: span 1 !important; }

  /* Dispatcher hub — убираем многоколоночный grid */
  body[data-tbos-module="crm"] .dispatcher-grid,
  body[data-tbos-module="crm"] [class*="kanban"] {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 0.5rem;
  }

  /* Модальные окна Bootstrap — full screen на мобиле */
  body[data-tbos-module="crm"] .modal-dialog:not(.modal-sm):not(.modal-dialog-centered) {
    margin: 0 !important;
    max-width: 100% !important;
    height: 100%;
  }
  body[data-tbos-module="crm"] .modal-dialog:not(.modal-sm):not(.modal-dialog-centered) .modal-content {
    border-radius: 0 !important;
    min-height: 100vh;
  }

  /* Фильтры / тулбар заказов */
  body[data-tbos-module="crm"] .filters-row,
  body[data-tbos-module="crm"] .filter-bar {
    flex-direction: column !important;
    gap: 0.5rem !important;
  }

  body[data-tbos-module="crm"] .filters-row input,
  body[data-tbos-module="crm"] .filters-row select,
  body[data-tbos-module="crm"] .filter-bar input,
  body[data-tbos-module="crm"] .filter-bar select { width: 100%; }

  /* Типографика */
  body[data-tbos-module="crm"] h1 { font-size: clamp(1.3rem, 5vw, 1.8rem); }
  body[data-tbos-module="crm"] h2 { font-size: clamp(1.1rem, 4vw, 1.5rem); }
}

/* ──────────────────────────────────────────────────────────────────────
   6. МАРКЕТ — TABLET (≤ 991px)
   ────────────────────────────────────────────────────────────────────── */
@media (max-width: 991px) {
  .mob-market-bottom-nav { display: block; }

  /* Отступ снизу под нижнюю навигацию */
  .market-body .market-footer,
  .market-body main,
  .market-body .market-shell { padding-bottom: calc(58px + var(--mob-safe-bottom) + 0.5rem); }

  /* Скрыть десктопную навигацию маркета */
  .market-nav.market-nav-inline,
  .tb-global-nav { display: none !important; }

  /* Скрыть desktop city/search в хедере */
  .tbm-city-menu { display: none !important; }
}

/* ──────────────────────────────────────────────────────────────────────
   7. МАРКЕТ — MOBILE (≤ 767px)
   ────────────────────────────────────────────────────────────────────── */
@media (max-width: 767px) {
  /* Хедер маркета */
  .market-header,
  .market-header-compact {
    padding: 10px 12px !important;
    min-height: 60px !important;
  }
  .market-brand-copy small { display: none; }
  .market-brand-copy strong { font-size: 1rem; }

  /* Поиск — раскрывается на кнопку */
  .tbm-header-search__field { display: none; }
  .tbm-header-search__toggle { display: flex !important; }

  /* Каталог — 1 колонка объявлений */
  .market-catalog-hero { grid-template-columns: 1fr !important; }
  .market-catalog-hero-visual { display: none; }

  .market-listing-grid,
  .market-listings-grid { grid-template-columns: 1fr !important; }

  /* Фильтры — скролл по горизонтали */
  .market-filter-bar { overflow-x: auto; flex-wrap: nowrap !important; padding-bottom: 4px; }
  .market-filter-bar::-webkit-scrollbar { display: none; }

  /* Карточки специалистов — 2 в ряд */
  .market-specialists-grid,
  .tbm-specialists-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }

  /* Детальная страница объявления */
  .market-ad-layout,
  .market-ad-detail-grid { grid-template-columns: 1fr !important; }

  /* Чат маркета */
  .market-chat-layout { grid-template-columns: 1fr !important; }
  .market-chat-list { display: none; }
  .market-chat-list.is-visible { display: block; }

  /* Кабинет */
  .market-cabinet-grid { grid-template-columns: 1fr !important; }
  .market-cabinet-sidebar { display: none; }

  /* Формы */
  .market-create-ad-layout,
  .market-form-layout { grid-template-columns: 1fr !important; }

  /* Страница специалиста */
  .market-specialist-layout { grid-template-columns: 1fr !important; }

  /* Регистрация */
  .market-register-grid { grid-template-columns: 1fr !important; }
  .market-register-visual { display: none; }

  /* Типографика */
  .market-hero-copy h1,
  .market-section h1,
  .market-catalog-hero-copy h1 { font-size: clamp(1.6rem, 7vw, 2.4rem) !important; letter-spacing: -0.03em; }

  /* Панель монетизации */
  .market-monetization-grid { grid-template-columns: 1fr !important; }

  /* Аналитика */
  .market-analytics-grid { grid-template-columns: 1fr !important; }

  /* Споры/диспуты */
  .market-dispute-layout { grid-template-columns: 1fr !important; }

  /* Платёжная страница */
  .market-payment-grid { grid-template-columns: 1fr !important; }
}

/* ──────────────────────────────────────────────────────────────────────
   8. МАРКЕТ — SMALL MOBILE (≤ 479px)
   ────────────────────────────────────────────────────────────────────── */
@media (max-width: 479px) {
  /* Специалисты — 1 колонка */
  .market-specialists-grid,
  .tbm-specialists-grid { grid-template-columns: 1fr !important; }

  /* Категории — 2 в ряд */
  .market-category-grid,
  .tbm-categories-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }

  /* Мета блоки */
  .market-metrics,
  .market-metrics-cabinet { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }

  /* Shell паддинг */
  .market-shell { padding: 0 8px !important; }
}

/* ──────────────────────────────────────────────────────────────────────
   9. MARKETPLACE ADMIN — MOBILE
   ────────────────────────────────────────────────────────────────────── */
@media (max-width: 767px) {
  .market-admin-layout { grid-template-columns: 1fr !important; }
  .market-admin-sidebar { display: none !important; }
  .market-admin-stats-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .market-admin-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
}

/* ──────────────────────────────────────────────────────────────────────
   10. SETTINGS HUB — MOBILE
   ────────────────────────────────────────────────────────────────────── */
@media (max-width: 767px) {
  .settings-shell { gap: 0.5rem !important; }

  .settings-header {
    grid-template-columns: 1fr !important;
    padding: 0.9rem !important;
    gap: 0.6rem !important;
  }

  .settings-header-search { display: none !important; }

  .settings-header-stats {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0.4rem;
  }

  .settings-page-stage { padding: 0.8rem !important; }

  /* Settings навигация — горизонтальный скролл */
  .settings-nav { overflow-x: auto; display: flex !important; gap: 0.4rem; padding-bottom: 4px; }
  .settings-nav::-webkit-scrollbar { display: none; }

  /* Settings section items — подгоняем ширину */
  .settings-nav-item { flex: 0 0 auto; }
}

/* ──────────────────────────────────────────────────────────────────────
   11. ТАБЛИЦЫ — ГОРИЗОНТАЛЬНЫЙ СКРОЛЛ ВЕЗДЕ
   ────────────────────────────────────────────────────────────────────── */
@media (max-width: 767px) {
  .table-responsive { overflow-x: auto !important; -webkit-overflow-scrolling: touch; }
  table { min-width: 520px; }
}

/* ──────────────────────────────────────────────────────────────────────
   12. DISPATCHER HUB — МОБИЛЬНЫЙ КАНБАН
   ────────────────────────────────────────────────────────────────────── */
@media (max-width: 767px) {
  /* Горизонтальный скролл канбана */
  .kanban-board,
  [class*="kanban-board"],
  .dispatcher-kanban { overflow-x: auto !important; display: flex !important; flex-direction: row !important; gap: 0.5rem !important; padding-bottom: 1rem; scroll-snap-type: x mandatory; }

  .kanban-column,
  [class*="kanban-col"] {
    min-width: 280px !important;
    flex: 0 0 280px !important;
    scroll-snap-align: start;
  }

  /* Статистические карточки диспетчера */
  .dispatcher-stats-grid { grid-template-columns: repeat(2, minmax(0,1fr)) !important; }
}

/* ──────────────────────────────────────────────────────────────────────
   13. CHAT PAGE — МОБИЛЬНЫЙ
   ────────────────────────────────────────────────────────────────────── */
@media (max-width: 767px) {
  body[data-tbos-module="crm"] .chats-layout,
  body[data-tbos-module="crm"] .chat-split { display: flex !important; flex-direction: column !important; }

  body[data-tbos-module="crm"] .chats-list-panel,
  body[data-tbos-module="crm"] .chat-list-pane {
    height: auto !important;
    max-height: 50vh !important;
    overflow-y: auto;
  }
}

/* ──────────────────────────────────────────────────────────────────────
   14. ФОРМЫ — ОБЩЕЕ
   ────────────────────────────────────────────────────────────────────── */
@media (max-width: 767px) {
  /* Bootstrap row в формах */
  .row > [class*="col-"] { padding-right: 0.4rem !important; padding-left: 0.4rem !important; }

  /* Кнопки в формах — растянуть на всю ширину */
  .form-actions-row { flex-wrap: wrap !important; }
  .form-actions-row .btn { flex: 1 1 auto; min-width: 120px; }

  /* input и select — нормальный размер шрифта (iOS не зумит) */
  input[type="text"],
  input[type="email"],
  input[type="password"],
  input[type="search"],
  input[type="number"],
  input[type="tel"],
  input[type="date"],
  select,
  textarea { font-size: 16px !important; }
}

/* ──────────────────────────────────────────────────────────────────────
   15. PLATFORM MODAL — MOBILE FULL SCREEN
   ────────────────────────────────────────────────────────────────────── */
@media (max-width: 767px) {
  #tbPlatformModal .tbpm-panel {
    max-width: 100% !important;
    width: 100% !important;
    max-height: 100svh !important;
    height: 100svh !important;
    border-radius: 0 !important;
    margin: 0 !important;
  }

  .tbpm-tabs { padding: 0.5rem 0.8rem 0; gap: 0.2rem; }
  .tbpm-tab { padding: 0 0.6rem; font-size: 0.7rem; }
  .tbpm-body { padding: 0.7rem 0.8rem 1rem; }
}

/* ──────────────────────────────────────────────────────────────────────
   16. АНАЛИТИКА / ФИНАНСЫ
   ────────────────────────────────────────────────────────────────────── */
@media (max-width: 767px) {
  body[data-tbos-module="crm"] .analytics-grid,
  body[data-tbos-module="crm"] .finance-grid { grid-template-columns: 1fr !important; }

  body[data-tbos-module="crm"] .analytics-stats,
  body[data-tbos-module="crm"] .finance-stats { grid-template-columns: repeat(2, minmax(0,1fr)) !important; }
}

/* ──────────────────────────────────────────────────────────────────────
   17. PRINT — скрываем мобильную навигацию
   ────────────────────────────────────────────────────────────────────── */
@media print {
  .mob-bottom-nav,
  .mob-nav-drawer,
  .mob-market-bottom-nav { display: none !important; }
}