/* ============================================================
   adaptive.css — адаптация интерфейса под разрешения и масштабы Windows
   ------------------------------------------------------------
   Подключается ПОСЛЕ tabler.css и demo.css, поэтому переопределяет их.
   Цель — чтобы UI был «чётким и вместительным» на эффективных CSS-ширинах
   примерно от 1280px (2K при масштабе 200%) до 2560px (2K при 100%),
   а также на 1366×768 и 1920×1080.

   Принцип: только мягкие переопределения существующих размеров.
   На больших экранах поведение не меняется (правила включаются media-запросами
   или функцией min(), которая на широких экранах отдаёт исходное значение).

   Замечание про масштаб Windows: при 125%/150%/200% браузер отдаёт меньшую
   CSS-ширину (1920px @150% = 1280 CSS-px), поэтому «адаптация под масштаб»
   = корректная адаптивность под меньшие эффективные ширины. Отдельных правил
   под devicePixelRatio не нужно: иконки Tabler векторные (SVG) и остаются чёткими.
   ============================================================ */


/* ------------------------------------------------------------
   00. Компоненты пользователей (<user-avatar> / <avatar-stack>)
   ------------------------------------------------------------ */
.ua-wrap { position: relative; display: inline-block; line-height: 0; }
.ua-online {
  position: absolute; right: -1px; bottom: -1px;
  width: 9px; height: 9px; background: #34c759;
  border: 2px solid #fff; border-radius: 50%;
}
.avatar.ua-more { background: #626976; color: #fff; font-weight: 600; }
.ua-haslabel { display: inline-flex; align-items: center; gap: 6px; vertical-align: middle; }
.ua-label { line-height: 1.15; font-weight: 600; }

/* Лёгкое увеличение аватара при наведении — по всему проекту.
   transform не вызывает реверстку и создаёт stacking-context, поэтому
   наведённый аватар поднимается над соседями в стопке. */
.avatar { transition: transform .12s ease; }
.avatar:hover { transform: scale(1.5); z-index: 5; }
/* читаемые инициалы в мелких аватарах (на фото-аватары не влияет) */
.avatar-sm2 { font-size: .62rem; }
.avatar-sm3 { font-size: .52rem; }


/* ------------------------------------------------------------
   0. ГЛОБАЛЬНАЯ ЧИТАЕМОСТЬ — базовый шрифт +15%
   ------------------------------------------------------------
   База Tabler: --tblr-body-font-size: 0.85rem (~13.6px), а большинство
   размеров шрифта/отступов заданы в rem (считаются от html = 16px).
   Поднимаем размер шрифта на html до 115% (= 18.4px) — это равномерно
   увеличивает ВЕСЬ интерфейс (текст, кнопки, бейджи, поля, отступы),
   как встроенный зум ~115%, но без ручного масштабирования браузера.
   Фиксированные px-контейнеры (ширины колонок/модалок) не растут —
   поэтому переполнения не возникает.

   Ограничено экранами ≥768px: телефоны (мобильная вёрстка) не трогаем,
   там размеры уже подобраны под маленький экран.
*/
@media (min-width: 768px) {
  html { font-size: 115%; }
}

/* ------------------------------------------------------------
   1. МОДАЛЬНЫЕ ОКНА — не вылезать за пределы экрана
   ------------------------------------------------------------
   Исходные .modal-* имеют жёсткий max-width (до 1400px) без привязки к экрану,
   поэтому на узких/масштабированных экранах появлялся горизонтальный скролл
   и окно «обрезалось». Ограничиваем шириной вьюпорта (96vw), сохраняя исходный
   максимум на широких экранах через min().
*/
.modal-300  { max-width: min(300px,  96vw) !important; }
.modal-500  { max-width: min(500px,  96vw) !important; }
.modal-800  { max-width: min(800px,  96vw) !important; }
.modal-1000 { max-width: min(1000px, 96vw) !important; }
.modal-1200 { max-width: min(1200px, 96vw) !important; }
.modal-1400 { max-width: min(1400px, 96vw) !important; }
/* Штатные размеры Bootstrap/Tabler — на всякий случай тоже подстрахуем */
.modal-lg, .modal-xl { max-width: min(720px, 96vw) !important; }


/* ------------------------------------------------------------
   2. ДОСКА — широкие колонки + «снап» по целым колонкам
   ------------------------------------------------------------
   По просьбе: колонки шире (помещается больше информации в задачах), и при
   горизонтальной прокрутке доска «прилипает» к целым колонкам, а не показывает
   половину колонки с краю.
   Ширину колонки .col-350 (исходно 320px) увеличиваем до 380px.
   На телефонах колонка = почти вся ширина экрана (одна колонка целиком).
*/
.col-350 { width: 380px; }
@media (max-width: 575.98px) {
  .col-350 { width: calc(100vw - 28px); }
}

/* Прилипание прокрутки к началу колонок — для трекпада/скроллбара/колёсика.
   Режим proximity («мягкий»), чтобы не мешать «хватанию» доски мышью;
   для мыши точный снап на отпускании делает JS-метод snapBoardToColumn(). */
.board-container {
  scroll-snap-type: x proximity;
  scroll-padding-left: 10px;
}
.board-container .col-350 {
  scroll-snap-align: start;
  /* Колонка не выше доски: шапка остаётся на месте, скроллится только список задач */
  max-height: calc(100vh - 110px);
}

/* Скроллится ТОЛЬКО список задач внутри колонки (.card-height); сама колонка
   с заголовком не скроллится. .card-height заполняет колонку по высоте (flex:1)
   и прокручивается с «прилипанием» по одной задаче — задачи показываются целиком,
   без половинок сверху/снизу. min-height:0 нужен, чтобы flex-элемент мог сжиматься
   и появился внутренний скролл. Ограничено .board-container, чтобы не затронуть
   .card-height на других страницах (например, отчёты 11_2_xisobot). */
.board-container .card-height {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  scroll-snap-type: y mandatory;
  scroll-padding-top: 6px;
}
/* Верхнеуровневые задачи — точки «прилипания» (скролл по одной задаче). */
.board-container .snap-task {
  scroll-snap-align: start;
}


/* ------------------------------------------------------------
   3. ЧАТ-ВИДЖЕТ — вписать в экран по ширине и высоте
   ------------------------------------------------------------
   Исходно .chat-container = 550×700px жёстко: на низких экранах
   (например, 2K @200% = 1280×640 CSS) окно вылезало по высоте.
*/
.chat-container {
  width: min(550px, 96vw);
  height: min(700px, calc(100vh - 80px));
  max-height: calc(100vh - 80px);
}


/* ------------------------------------------------------------
   4. НАВБАР И ВКЛАДКИ ДОСОК — компактнее на узких экранах
   ------------------------------------------------------------
   Полоса вкладок досок уже скроллится (.horizontal-scroll2), но на узких
   экранах делаем кнопки-вкладки чуть компактнее, чтобы их помещалось больше
   без скролла. Ничего не ломает: только уменьшение отступов/шрифта.
*/
@media (max-width: 1366px) {
  .horizontal-scroll2 .btn {
    padding-top: .15rem;
    padding-bottom: .15rem;
    font-size: .9rem;
  }
}
@media (max-width: 1200px) {
  .horizontal-scroll2 .btn {
    font-size: .85rem;
  }
}


/* ------------------------------------------------------------
   5. ОКНО «ПУТЬ ЗАДАЧИ» — крупнее и читаемее
   ------------------------------------------------------------
   Раньше текст шёл через .small (~12px) и инлайновые 11px у времени —
   на низком DPI выглядело «пиксельно», на 2K@150% было чётко, но мелко
   (приходилось масштабировать браузер). Поднимаем до комфортных размеров.
   Селектор #modal-card-path покрывает и десктоп, и мобайл (одинаковый id).
*/
#modal-card-path .modal-title { font-size: 1.45rem; }
#modal-card-path .modal-body  { font-size: 15px; line-height: 1.55; }

/* Название шага (заголовок карточки в дереве) */
#modal-card-path .card-body .d-flex.align-items-center > strong { font-size: 18px; }

/* Бейджи статуса/отдела/мостика — крупнее и с большим паддингом */
#modal-card-path .badge { font-size: .85rem; padding: .4em .7em; }

/* Строки «Заказчик / Ответственный / Исполнители» и сообщения переписки.
   Перебиваем bootstrap .small, чтобы текст не ужимался до 12px. */
#modal-card-path .small { font-size: 14px !important; }

/* Сами сообщения переписки шага — заметно крупнее */
#modal-card-path .card-body .mb-1.small { font-size: 15px !important; }

/* Время сообщений: было задано инлайном font-size:11px — перебиваем !important */
#modal-card-path span[style*="font-size:11px"],
#modal-card-path span[style*="font-size: 11px"] { font-size: 13px !important; }

/* Кнопка «Показать/Скрыть переписку» */
#modal-card-path .btn-outline-primary.btn-sm { font-size: 14px; padding: .3rem .7rem; }


/* ------------------------------------------------------------
   6. ЧАТ — крупнее текст сообщений (главная жалоба на читаемость)
   ------------------------------------------------------------
   Пузыри чата наследовали мелкий базовый шрифт (~14px). Поднимаем,
   чтобы не приходилось масштабировать браузер. Безопасно: текст переносится.
*/
.chat-bubble { font-size: 15px; line-height: 1.5; }
.chat-bubble-author { font-size: 14px; }
.chat-bubble-date { font-size: 13px; }
.message { font-size: 16px; }
.message .meta { font-size: 13px; }


/* ------------------------------------------------------------
   7. БОЛЬШИЕ ЭКРАНЫ (2K/4K при 100%) — без огромных пустот
   ------------------------------------------------------------
   На очень широких экранах диалоги-«дропдауны» с жёсткой шириной 400px
   и т.п. оставляем как есть (они и так компактные). Тут специально ничего
   не растягиваем, чтобы интерфейс не «разъезжался».
*/

/* ------------------------------------------------------------
   8. ЧАТ: полоса прогресса загрузки/скачивания файлов
   ------------------------------------------------------------ */
.upload-bar {
  position: relative;
  height: 6px;
  background: #e3e8ef;
  border-radius: 4px;
  margin-top: 4px;
  overflow: hidden;
}
.upload-bar-fill {
  height: 100%;
  background: #1e88e5;
  width: 0;
  transition: width .15s ease;
}
.upload-bar small {
  position: absolute;
  right: 2px;
  top: -16px;
  font-size: 10px;
  color: #555;
}