/* ============================================================== */
/* responsive.css — Адаптивная вёрстка (iPad / планшеты / телефоны)*/
/* ЖК Новотомилино — Проектный дашборд                            */
/* ============================================================== */

/* Предотвращение горизонтального скролла всей страницы */
html, body {
  overflow-x: hidden !important;
  max-width: 100vw !important;
}

#dashboardApp {
  max-width: 100vw !important;
  overflow-x: hidden !important;
}

#mainScrollContainer {
  max-width: 100% !important;
  overflow-x: hidden !important;
}

/* Предотвращение распирания grid-колонок и flex-контейнеров широким содержимым */
*, *::before, *::after {
  box-sizing: border-box;
}

.grid,
.grid > *,
.chart-card,
[class*="col-span-"],
.table-scroll {
  min-width: 0 !important;
  max-width: 100% !important;
}

.table-scroll {
  display: block !important;
  width: 100% !important;
}

/* Перенос заголовков карточек и фильтров при нехватке места */
.chart-card > div > .flex,
.chart-card > .flex,
.kpi-card,
.kpi-card .flex {
  flex-wrap: wrap !important;
}

.kpi-card {
  min-width: 0 !important;
}

/* Бенчмарки на слайде 3: перенос легенды и строк на мобильных устройствах */
#benchmarksContainer {
  min-width: 0 !important;
  max-width: 100% !important;
}

#benchmarksContainer div,
#benchmarksContainer .flex {
  flex-wrap: wrap !important;
  min-width: 0 !important;
}

@media (max-width: 640px) {
  #benchmarksContainer .w-44,
  #benchmarksContainer [class*="w-44"],
  #benchmarksContainer [class*="w-56"] {
    width: 100% !important;
    margin-bottom: 0.25rem !important;
  }

  #benchmarksContainer .flex.items-center.gap-3 {
    flex-direction: column !important;
    align-items: stretch !important;
  }
}

/* ============================================================== */
/* 1. БОКОВОЕ МЕНЮ (ПЛАНШЕТЫ И СМАРТФОНЫ)                         */
/* Условие: @media (max-width: 1279px), (hover: none) and (pointer: coarse) */
/* Сайдбар скрывается и управляется через кнопку-гамбургер         */
/* ============================================================== */
@media (max-width: 1279px), (hover: none) and (pointer: coarse) {
  #dashboardSidebar {
    position: fixed !important;
    top: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
    z-index: 50 !important;
    width: 18rem !important;
    transform: translateX(-100%) !important;
    transition: transform 0.3s ease-in-out !important;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25) !important;
  }

  #dashboardSidebar.translate-x-0 {
    transform: translateX(0) !important;
  }

  #mobileMenuBtn {
    display: inline-flex !important;
  }

  #closeSidebarBtn {
    display: inline-flex !important;
  }

  #sidebarOverlay:not(.hidden) {
    display: block !important;
  }

  #sidebarOverlay.hidden {
    display: none !important;
  }

  #mainScrollContainer {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
  }
}

/* ============================================================== */
/* 2. ЛЕГЕНДЫ ДИАГРАММ И ГРАФИКОВ                                 */
/* ============================================================== */

/* Подписи легенд ApexCharts: не обрезать, разрешить перенос */
.apexcharts-legend {
  max-width: 100% !important;
  flex-wrap: wrap !important;
}

.apexcharts-legend-series {
  white-space: normal !important;
  max-width: 100% !important;
}

.apexcharts-legend-text {
  white-space: normal !important;
  word-break: break-word !important;
  max-width: 100% !important;
}

/* Адаптив диаграмм и HTML-легенд при ширине <= 1279px */
@media (max-width: 1279px) {
  /* Структура продаж по типам оплаты и структура товарного остатка (HTML-легенды под чартом) */
  .donut-row {
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
  }

  #paymentDonutLegend,
  #productDonutLegend {
    margin-left: 0 !important;
    margin-top: 0.75rem !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  #paymentDonutLegend table,
  #productDonutLegend table {
    width: 100% !important;
    max-width: 100% !important;
  }

  #paymentDonutLegend td,
  #productDonutLegend td {
    white-space: normal !important;
    word-break: break-word !important;
  }

  /* На слайде 2 у точечной диаграммы скрыть подписи на точках, оставив в легенде и тултипе */
  #scatterStatusChart .apexcharts-point-annotations {
    display: none !important;
  }
}

/* На слайде 4 вкладки-переключатели не должны вылезать за рамку */
#cfQueueTabs,
#covQueueTabs,
#kpTableQueueTabs,
#rcQueueTabs {
  max-width: 100% !important;
  flex-wrap: wrap !important;
  overflow-x: auto !important;
  -webkit-overflow-scrolling: touch !important;
}

#cfQueueTabs button,
#covQueueTabs button,
#kpTableQueueTabs button,
#rcQueueTabs button {
  white-space: nowrap !important;
}

/* ============================================================== */
/* 3. ШИРОКИЕ ТАБЛИЦЫ: ПРОКРУТКА, ЗАКРЕПЛЕННАЯ ПЕРВАЯ КОЛОНКА,    */
/*    И ГРАДИЕНТНАЯ ПОДСКАЗКА О ПРОКРУТКЕ СПРАВА                  */
/* ============================================================== */
.table-scroll {
  overflow-x: auto !important;
  -webkit-overflow-scrolling: touch !important;
  max-width: 100% !important;
  position: relative;
  background:
    /* Маска правого края (прокручивается вместе с содержимым) */
    linear-gradient(to left, #ffffff 30%, rgba(255, 255, 255, 0)) 100% 0,
    /* Градиентная тень правого края (зафиксирована у видимой границы) */
    radial-gradient(farthest-side at 100% 50%, rgba(15, 23, 42, 0.22), rgba(15, 23, 42, 0)) 100% 0;
  background-repeat: no-repeat;
  background-color: #ffffff;
  background-size: 36px 100%, 14px 100%;
  background-attachment: local, scroll;
  transition: box-shadow 0.2s ease-in-out;
}

.table-scroll table {
  min-width: max-content !important;
  border-collapse: separate !important;
  border-spacing: 0 !important;
}

/* Закрепленная первая колонка */
.table-scroll th:first-child,
.table-scroll td:first-child {
  position: sticky !important;
  left: 0 !important;
  z-index: 2 !important;
  background-color: #ffffff;
  box-shadow: 3px 0 6px -2px rgba(15, 23, 42, 0.12) !important;
}

.table-scroll th:first-child {
  z-index: 3 !important;
  background-color: #f8fafc;
}

/* Фон первой ячейки при наведении на строку */
.table-scroll tr:hover td:first-child {
  background-color: #f8fafc;
}

/* Сохранение фонового цвета строк-итогов и подсвеченных строк */
.table-scroll tr.bg-blue-50\/80 td:first-child,
.table-scroll tr[class*="bg-blue-50"] td:first-child,
.table-scroll tr[class*="bg-blue-100"] td:first-child,
.table-scroll thead tr[class*="bg-blue-50"] th:first-child {
  background-color: #eff6ff !important;
}

.table-scroll tr[class*="bg-rose-50"] td:first-child {
  background-color: #fff1f2 !important;
}

.table-scroll tr[class*="bg-rose-50"]:hover td:first-child {
  background-color: #ffe4e6 !important;
}

.table-scroll tr[class*="bg-slate-50"] td:first-child,
.table-scroll thead tr[class*="bg-slate-50"] th:first-child {
  background-color: #f8fafc !important;
}

.table-scroll tr[class*="bg-slate-100"] td:first-child,
.table-scroll thead tr[class*="bg-slate-100"] th:first-child {
  background-color: #f1f5f9 !important;
}

/* Подсказка о возможности прокрутки справа через класс can-scroll-right */
.table-scroll.can-scroll-right {
  box-shadow: inset -16px 0 12px -8px rgba(15, 23, 42, 0.22);
}