/* Модуль «Отпуска и график»: свой отпуск крупными числами, табель
   (месяц, неделя, год), сроки и события строкой над людьми, признак
   «видно не всем» у вкладок решающих.

   Перенесено из public/styles.css как было (24 сентября 2026). Порядок
   правил сохранён: подписи чисел (`.vstat__label`) стояли в общем списке
   «подписей как в штампе» ниже по файлу и перебивали собственный кегль —
   это правило теперь здесь же, последним, чтобы вид не сдвинулся. */

/* Статистика отпуска */
/* Свой отпуск — то, ради чего сотрудник сюда и заходит: сколько накоплено,
   сколько потрачено, сколько осталось. Числа были набраны почти как обычный
   текст, а подписи под ними — мельче некуда, и весь блок читался служебной
   строкой над табелем. Теперь это четыре крупных числа с внятными подписями:
   их видно, не наклоняясь к экрану. */
.vstats { display: flex; gap: var(--s-6); flex-wrap: wrap; }
.vstat__value {
  font-size: var(--t-2xl); font-weight: 600; letter-spacing: -.3px;
  font-variant-numeric: tabular-nums; line-height: 1.15;
}
.vstat__value.is-neg { color: var(--critical); }
.vstat__value.is-pos { color: var(--ok); }
.vstat__label { font-size: var(--t-base); color: var(--text-dim); margin-top: var(--s-1); }

/* Табель отпусков: сетка год × сотрудники */
.vgrid { border-collapse: collapse; font-size: var(--t-xs); width: 100%; }
.vgrid th, .vgrid td { border: 1px solid var(--border); text-align: center; }
.vgrid th {
  padding: var(--s-1) var(--s-05); font-weight: 500; color: var(--text-dim);
  background: var(--surface-2); min-width: 17px;
}
.vgrid th.is-off { color: var(--text-faint); background: var(--surface-3, var(--surface-2)); }
.vgrid .vgrid__name {
  text-align: left; padding: var(--s-1) var(--s-2); white-space: nowrap;
  font-weight: 500; color: var(--text); background: var(--surface);
  position: sticky; left: 0; z-index: 1; min-width: 130px;
}
.vgrid thead .vgrid__name { background: var(--surface-2); font-weight: 600; }
/* Полное имя — на широком, инициал с фамилией — на телефоне. Переключает
   ширина, а не устройство: столбец мешает ровно тогда, когда он не влезает. */
.vgrid__short { display: none; }
@media (max-width: 760px) {
  .vgrid .vgrid__name { min-width: 96px; padding-left: var(--s-1); }
  .vgrid__full { display: none; }
  .vgrid__short { display: inline; }
}
td.vcell { height: 20px; min-width: 17px; padding: 0; }
.vcell--off  { background: var(--surface-2); }
.vcell--hol  { background: var(--critical-soft); }
.vcell--paid { background: var(--ok); }
.vcell--unpaid { background: #e0932a; }
.vcell--dayoff { background: #8b5cf6; }
.vcell--sick { background: #38bdf8; }
.vcell--plan {
  background: repeating-linear-gradient(45deg,
    var(--accent-soft), var(--accent-soft) 3px, transparent 3px, transparent 6px);
  outline: 1px dashed var(--accent); outline-offset: -2px;
}
.vleg { display: inline-flex; gap: var(--s-1); align-items: center; font-size: var(--t-sm); color: var(--text-dim); }
.vleg .vcell { display: inline-block; width: 14px; height: 14px; border-radius: var(--radius-sm); border: 1px solid var(--border); }
/* Сегодняшний день видно сразу: без него календарь месяца — просто сетка,
   и «кто сейчас на месте» приходится вычислять по числу в углу экрана */
.vgrid th.is-today { color: var(--accent); font-weight: 700; }
.vgrid td.vcell.is-today { box-shadow: inset 1px 0 0 var(--accent), inset -1px 0 0 var(--accent); }
/* Дни, выбранные под заявку */
.vgrid td.vcell.is-picked { outline: 2px solid var(--accent); outline-offset: -2px; }

/* Буква дня недели над числом: выходные различались только оттенком,
   а в тёмной теме почти никак */
.vgrid__wd {
  display: block; font-size: 9px; line-height: 1.1; color: var(--text-faint);
  text-transform: lowercase;
}
.vgrid__d { display: block; line-height: 1.2; font-variant-numeric: tabular-nums; }
.vgrid th.is-off .vgrid__wd { color: var(--critical); }

/* Своя строка: восемь одинаковых фамилий, и свою искали глазами каждый раз.
   Двухпиксельной черты слева и жирного имени не хватало — на сетке из
   трёхсот шестидесяти клеток они терялись. Теперь подсвечена вся строка
   целиком, а не только имя: полоса тянется через весь год, и найти себя
   можно не глядя на левый край. */
.vgrid tbody tr.is-me .vgrid__name {
  font-weight: 700; color: var(--accent);
  box-shadow: inset 3px 0 0 var(--accent);
  background: var(--accent-soft);
}
.vgrid tbody tr.is-me td.vcell {
  border-top-color: var(--accent); border-bottom-color: var(--accent);
}
/* Подсветка ложится под цветные клетки отпусков, а не поверх: отпуск должен
   оставаться того же цвета, что у соседей, иначе по табелю не сравнить */
.vgrid tbody tr.is-me td.vcell:not([class*='vcell--']) { background: var(--accent-soft); }

/* День, в который отсутствует не один человек: пересечения видно сразу,
   а не при построчном сравнении */
.vgrid td.vcell.is-crowd { box-shadow: inset 0 0 0 1px var(--text); }

/* Неделя: семь одинаковых столбцов.

   В неделе на день приходится широкий столбец, и в него пишется, что в этот
   день сдаём и что происходит. Ширину таблица считала по содержимому — и
   день с планёркой раздувался на пол-экрана, а шесть пустых сжимались
   в полоски. Сетка недели переставала быть сеткой: столбцы разной ширины
   нельзя сравнить глазом, а календарь только для этого и читают.

   Поэтому раскладка задаётся, а не считается: столбец имён своей ширины,
   остальное поровну на семь дней. Длинное название в ячейке не растягивает
   её, а обрезается многоточием — целиком оно всё равно есть в подсказке. */
.vgrid--week { table-layout: fixed; }
.vgrid--week th, .vgrid--week td.vcell { min-width: 0; }
.vgrid--week .vgrid__name { width: 168px; min-width: 168px; }
@media (max-width: 760px) {
  .vgrid--week .vgrid__name { width: 96px; min-width: 96px; }
}

/* Год целиком. Смысл вида — увидеть все двенадцать месяцев разом, поэтому
   таблица раскладывается по ширине окна, а не по ширине содержимого:
   на день приходится пара пикселей, зато отпуск в две недели — заметная
   полоска, и пересечения читаются с одного взгляда. */
.vgrid--year { table-layout: fixed; width: 100%; }
.vgrid--year th, .vgrid--year td.vcell { min-width: 0; }
.vgrid--year .vgrid__name { width: 120px; min-width: 120px; }
.vgrid--year td.vcell { border-left: none; border-right: none; }
.vgrid__mo {
  display: block; font-size: 9px; color: var(--text-dim); text-align: left;
  white-space: nowrap; position: relative; left: 1px;
}

/* Кто сегодня отсутствует — словами над сеткой */
.vaway { display: flex; align-items: center; gap: var(--s-2); flex-wrap: wrap; }
.vstat__hint { font-size: var(--t-xs); color: var(--text-faint); margin-top: var(--s-05); }

/* Признак «видно не всем» — замком после названия вкладки */
.tab__priv { margin-left: var(--s-1); font-size: var(--t-2xs); opacity: .7; }
.vstat__value.is-adv { color: var(--warn); }

/* Подписи чисел — как надписи в штампе листа, тем же приёмом, что поля
   форм и шапки таблиц портала (было в общем списке public/styles.css). */
.vstat__label {
  text-transform: uppercase;
  letter-spacing: .1em;
  font-size: var(--t-2xs);
  font-weight: 600;
}
/* Крупные значения — моноширинные, но своим кеглем, а не кеглем размерных
   надписей портала. */
.vstat__value { font-family: var(--mono); letter-spacing: -.01em; }

/* ── Сроки в календаре ───────────────────────────────────────────────────────

   Строка над людьми, в той же сетке дней: вопрос «успеваем ли мы этой
   неделей» складывается из двух вещей сразу — кто на месте и что сдаём. */
.vgrid__sroki td.vgrid__name { color: var(--text-dim); font-weight: 600; }
.vcell--srok { background: none; }
.vcell--srok.is-srok { background: var(--accent-soft); }
.vsrok__name {
  display: block; padding: 0 var(--s-1);
  font-size: var(--t-2xs); color: var(--accent); font-weight: 600;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.vsrok__dot {
  display: block; width: 6px; height: 6px; margin: 0 auto;
  border-radius: 50%; background: var(--accent);
}

/* События в календаре — та же строка-сетка, что и сроки, но своим цветом:
   срок это обещание наружу, событие — то, что происходит внутри бюро,
   и путать их по цвету нельзя. */
.vcell--sob.is-srok { background: var(--ok-soft); }
.vcell--sob .vsrok__name { color: var(--ok); }
.vsrok__dot--sob { background: var(--ok); }
/* Пустая ячейка события кликабельна — намекаем на это тихо, при наведении. */
.vcell--sob:hover { background: var(--surface-2); }