/* Оформление поверх темы Bootstrap.
   Всё, что относится к кнопкам, полям, таблицам и карточкам, берётся из темы —
   здесь только то, что специфично для нашей системы. Цвета — из переменных темы,
   поэтому светлая и тёмная тема работают без отдельной правки стилей.

   Размеры задаём в относительных единицах (rem), а не в пикселях: тогда ползунок
   масштаба в информационной панели меняет весь интерфейс целиком — текст, кнопки,
   таблицы, поля, отступы. Пиксели оставлены там, где так и надо: рамки толщиной
   1 пиксель, точки перехода для телефона, и вся информационная панель — она
   по решению Алексея (25.09.2026) масштабированию не подлежит. */

:root {
  --infobar-h: 48px;          /* высота информационной панели: панель не масштабируется */
  /* Шрифт один и тот же в обеих темах: Roboto лежит на нашем сервере, вместе с кириллицей */
  --bs-body-font-family: Roboto, "Segoe UI", Arial, sans-serif;
  --bs-font-sans-serif: Roboto, "Segoe UI", Arial, sans-serif;
}

/* Иконка-подсказка «?» у поля: при наведении всплывает пояснение */
.help-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 1.9rem; cursor: help; font-weight: 600;
  color: var(--bs-secondary-color);
}
.help-icon:hover { color: var(--bs-body-color); background: var(--bs-secondary-bg); }

/* Рабочая область (информационная панель + содержимое) */
.content-col { min-width: 0; }

/* Информационная панель: только над рабочей областью, не уезжает при прокрутке.
   ВАЖНО: панель не участвует в масштабировании (решение Алексея, 25.09.2026) — поэтому
   все её размеры заданы в пикселях, а элементы темы внутри панели переопределены ниже. */
.infobar {
  position: sticky; top: 0; z-index: 1030;
  height: var(--infobar-h); flex-shrink: 0;
  display: flex; align-items: center; gap: 12px;
  padding: 0 16px;
  font-size: 14px;
  background: var(--bs-tertiary-bg);
  border-bottom: 1px solid var(--bs-border-color);
}
.infobar .clock { font-weight: 600; font-variant-numeric: tabular-nums; font-size: 17px; }
.infobar .tz { color: var(--bs-secondary-color); font-size: 12.5px; }
/* Группы внутри панели: свои классы, а не служебные классы темы — те заданы в относительных
   единицах и с пометкой «важно», поэтому тянулись бы за масштабом. */
.infobar-group { display: flex; align-items: center; gap: 12px; }
.infobar-right { margin-left: auto; gap: 10px; }
.infobar-clock-group { display: flex; align-items: baseline; gap: 6px; }
/* Кнопки и списки внутри панели — фиксированного размера (в теме они заданы в относительных единицах) */
.infobar .btn,
.infobar .form-select {
  --bs-btn-font-size: 13px;
  --bs-btn-padding-y: 4px;
  --bs-btn-padding-x: 8px;
  --bs-btn-border-radius: 4px;          /* иначе скругление кнопок в панели тянется за масштабом */
  --bs-form-select-font-size: 13px;
  font-size: 13px;
  border-radius: 4px;
}
.infobar .form-select { padding: 4px 28px 4px 8px; background-position: right 8px center; background-size: 12px; }
/* Кнопка «Назад»: слева в панели, размер постоянный (панель не масштабируется) */
.infobar .back-btn { display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px; }

/* Ползунок масштаба отображения (рядом с переключателем тем).
   Ширина ползунка — в пикселях, а не в относительных единицах: иначе при перетаскивании
   он сам менял бы размер и «убегал» из-под курсора — из-за этого настройка ощущалась резкой. */
.scale-box { display: flex; flex-direction: column; align-items: center; gap: 2px; line-height: 1; }
.scale-caption { font-size: 11px; color: var(--bs-secondary-color); letter-spacing: .02em; }
.scale-row { display: flex; align-items: center; gap: 6px; }
.scale-box .form-range { width: 150px; height: 16px; margin: 0; cursor: pointer; }
.scale-value {
  font-size: 12.5px; color: var(--bs-secondary-color);
  font-variant-numeric: tabular-nums; min-width: 37px; text-align: right;
}
/* Бегунок и дорожка ползунка тоже фиксированного размера — иначе они «поедут» с масштабом */
.infobar .form-range::-webkit-slider-runnable-track { height: 6px; }
.infobar .form-range::-webkit-slider-thumb { width: 16px; height: 16px; margin-top: -5px; }
.infobar .form-range::-moz-range-track { height: 6px; }
.infobar .form-range::-moz-range-thumb { width: 16px; height: 16px; border: 0; }
/* Плавная смена масштаба: короткий переход, чтобы страница не «дёргалась» */
html { transition: font-size .08s linear; }

/* Левое меню: во всю высоту экрана, от самого верха, не перекрывается панелью.
   ВАЖНО: меню не участвует в масштабировании (решение Алексея, 25.09.2026) — все размеры
   заданы в пикселях, а ширину сотрудник задаёт сам, потянув за правый край меню. */
.side {
  width: var(--side-w, 245px); flex-shrink: 0;
  position: sticky; top: 0; height: 100vh; overflow-y: auto;
  padding: 12px 14px;
  background: var(--bs-tertiary-bg); border-right: 1px solid var(--bs-border-color);
}
.side .brand { font-weight: 600; font-size: 15px; margin-bottom: 4px; color: var(--bs-body-color); }
.side .brand-sub { font-size: 12px; margin-bottom: 16px; color: var(--bs-secondary-color); }
.side .nav-link {
  color: var(--bs-body-color); border-radius: 6px; padding: 7px 10px; font-size: 13.5px;
  border-left: 3px solid transparent; text-decoration: none;
  white-space: normal; overflow-wrap: break-word;   /* длинные названия переносятся, а не обрезаются */
}
.side .nav-link:hover { background: var(--bs-secondary-bg); }
.side .nav-link.active {
  background: rgba(42, 159, 214, .16); border-left-color: var(--bs-primary); font-weight: 600;
}
.side .nav-link.soon { color: var(--bs-secondary-color); opacity: .55; cursor: default; }
/* «Рабочий стол» — главный пункт меню, выделен полужирным для всех сотрудников */
.side .nav-link.home { font-weight: 600; }
.side .foot { margin-top: auto; padding-top: 12px; border-top: 1px solid var(--bs-border-color); font-size: 12px; color: var(--bs-secondary-color); }
.side .foot-links { margin-top: 8px; }
/* «Выйти» отделено от остальных пунктов — чтобы не нажать случайно */
.side .foot-links .logout-link { margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--bs-border-color); }
.side .verrow { display: flex; align-items: center; gap: 6px; margin-top: 12px; }
.side a.plain { color: var(--bs-secondary-color); text-decoration: none; }
.side a.plain:hover { color: var(--bs-body-color); }

/* Если сотрудник включил «меню растёт вместе с масштабом» — размеры меню задаются в
   относительных единицах, поэтому текст растёт вместе с масштабом, а ширина меню
   пропорционально увеличивается (--scale-k — это масштаб как множитель, например 1.15). */
html.menu-scales .side { width: calc(var(--side-w, 245px) * var(--scale-k, 1)); padding: .75rem .875rem; }
html.menu-scales .side .brand { font-size: .9375rem; margin-bottom: .25rem; }
html.menu-scales .side .brand-sub { font-size: .75rem; margin-bottom: 1rem; }
html.menu-scales .side .nav-link { font-size: .84375rem; padding: .4375rem .625rem; border-radius: .375rem; }
html.menu-scales .side .foot { font-size: .75rem; padding-top: .75rem; }
html.menu-scales .side .foot-links { margin-top: .5rem; }
html.menu-scales .side .foot-links .logout-link { margin-top: .75rem; padding-top: .625rem; }
html.menu-scales .side .verrow { margin-top: .75rem; gap: .375rem; }
html.menu-scales .icon-btn { width: 1.625rem; height: 1.625rem; }

/* Граница для изменения ширины меню: невидимая полоска у правого края */
.side-resizer {
  position: absolute; top: 0; right: 0; width: 7px; height: 100%;
  cursor: col-resize; z-index: 5; touch-action: none;
}
.side-resizer:hover, .side-resizer.active { background: var(--bs-primary); opacity: .5; }

.icon-btn {
  display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px;
  border-radius: 6px; color: var(--bs-secondary-color); text-decoration: none;
}
.icon-btn:hover { background: var(--bs-secondary-bg); color: var(--bs-body-color); }

/* Плитки рабочего стола */
.tile { display: block; height: 100%; text-decoration: none; color: inherit; transition: border-color .15s, transform .15s; }
.tile:hover { color: inherit; border-color: var(--bs-primary); transform: translateY(-1px); }
.tile .tile-num { font-size: 1.625rem; font-weight: 700; color: var(--bs-primary); line-height: 1.1; }
.tile.soon { opacity: .55; }
.tile.soon:hover { border-color: var(--bs-border-color); transform: none; }

/* Мелочи, которых нет в теме */
.strike { text-decoration: line-through; color: var(--bs-secondary-color); }
.nowrap { white-space: nowrap; }
.changelog li { line-height: 1.3; }
.changelog h6 { text-transform: uppercase; letter-spacing: .03em; color: var(--bs-secondary-color); }
.field-row { display: flex; align-items: center; gap: .375rem; }

@media (max-width: 820px) {
  /* На телефоне: сначала рабочая область с панелью, меню — ниже */
  body > .d-flex { flex-direction: column-reverse; }
  .side { position: static; height: auto; width: auto; padding: 12px 14px; border-right: 0; border-top: 1px solid var(--bs-border-color); }
  .infobar { position: sticky; }
  /* На телефоне ползунок делаем короче, чтобы панель не расползалась */
  .scale-box .form-range { width: 96px; }
  /* На телефоне у кнопки «Назад» остаётся только стрелка */
  .infobar .back-text { display: none; }
  /* На телефоне меню во всю ширину — тянуть его границу не нужно */
  .side-resizer { display: none; }
}