/* ─────────────────────────────────────────────────────────────
   Дизайн-токены: спокойный минимализм, тёплый off-white, графит
   ───────────────────────────────────────────────────────────── */
:root {
  /* base surfaces */
  --bg: #FAFAF7;
  --surface: #FFFFFF;
  --surface-2: #F4F2EC;
  --surface-3: #EDEAE2;
  --hairline: #D8D4C8;
  --hairline-2: #C5C1B5;

  /* ink */
  --ink: #14171A;
  --ink-2: #4A4F56;
  --ink-3: #6E7480;
  --ink-4: #9499A0;

  /* accent (tweakable) */
  --accent: #1A1A1A;
  --accent-soft: rgba(26,26,26,0.06);

  /* event hues — muted, dignified */
  --hue-doc: #1F4E66;        /* свидетельство */
  --hue-exam: #4A3A78;       /* экзамен / проверка знаний */
  --hue-trip: #B36A2E;       /* командировка */
  --hue-vac: #5C7A4A;        /* отпуск */
  --hue-vac-2: #8FA47A;      /* доп. отпуск */
  --hue-vlek: #B23A2F;       /* ВЛЭК */
  --hue-courses: #2E6663;    /* курсы ПК */
  --hue-icao: #8A4A2E;       /* ICAO English */
  --hue-stazh: #735A3E;      /* стажировка */
  --hue-duty: #6E7480;       /* дежурство */
  --hue-sim: #3F5A8A;        /* тренажёр */

  /* type */
  --font-sans: "Instrument Sans", -apple-system, BlinkMacSystemFont, "Helvetica Neue", sans-serif;
  --font-serif: "Instrument Serif", "Cormorant Garamond", Georgia, serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* metrics (tweakable) */
  --text-scale: 1;
  --radius: 14px;
  --radius-sm: 10px;
  --radius-lg: 22px;
  --density-py: 14px;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--font-sans);
  font-feature-settings: "ss01", "ss02", "tnum";
  color: var(--ink);
  background: var(--bg);
  font-size: calc(15px * var(--text-scale));
  line-height: 1.4;
  -webkit-font-smoothing: antialiased;
}

/* ─────────────────────────────────────────────────────────────
   Screen reset (inside iOS frame)
   ───────────────────────────────────────────────────────────── */
.screen {
  background: var(--bg);
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.screen-scroll {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
}
.screen-scroll::-webkit-scrollbar { width: 0; height: 0; }

/* ─────────────────────────────────────────────────────────────
   Typographic primitives
   ───────────────────────────────────────────────────────────── */
.eyebrow {
  font-family: var(--font-mono);
  font-size: calc(10px * var(--text-scale));
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-3);
  font-weight: 500;
}
.display {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: calc(34px * var(--text-scale));
  line-height: 1.05;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.h-section {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: calc(22px * var(--text-scale));
  line-height: 1.15;
  letter-spacing: -0.005em;
}
.label {
  font-family: var(--font-sans);
  font-size: calc(13px * var(--text-scale));
  font-weight: 500;
  letter-spacing: 0.005em;
}
.label-sm {
  font-family: var(--font-sans);
  font-size: calc(11px * var(--text-scale));
  font-weight: 500;
  color: var(--ink-2);
}
.mono {
  font-family: var(--font-mono);
  font-feature-settings: "tnum";
}
.num {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}

/* ─────────────────────────────────────────────────────────────
   Components
   ───────────────────────────────────────────────────────────── */
.card {
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  overflow: hidden;
}
.card-flush {
  background: var(--surface);
  border-top: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
}
.hairline {
  height: 1px;
  background: var(--hairline);
  width: 100%;
}
.hairline-v {
  width: 1px;
  background: var(--hairline);
  height: 100%;
}

/* tab bar */
.tabbar {
  background: var(--surface);
  border-top: 1px solid var(--hairline);
  padding: 8px 8px 0;
  display: flex;
  justify-content: space-around;
  align-items: stretch;
  flex-shrink: 0;
}
.tab {
  flex: 1;
  padding: 8px 4px 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  color: var(--ink-3);
  font-size: calc(10px * var(--text-scale));
  font-family: var(--font-sans);
  font-weight: 500;
  letter-spacing: 0.01em;
  border: none;
  background: transparent;
  cursor: pointer;
  transition: color 0.15s;
}
.tab.active { color: var(--ink); }
.tab svg { display: block; }

/* btn */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 18px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--hairline);
  background: var(--surface);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: calc(13px * var(--text-scale));
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s;
  letter-spacing: 0.005em;
}
.btn:hover { background: var(--surface-2); }
.btn-primary {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}
.btn-primary:hover { background: var(--ink); opacity: 0.92; }
.btn-ghost {
  border-color: transparent;
  background: transparent;
}
.btn-ghost:hover { background: var(--surface-2); }
.btn-icon {
  width: 36px; height: 36px;
  padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 999px;
  border: 1px solid var(--hairline);
  background: var(--surface);
  cursor: pointer;
}

/* status badges */
.badge {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 8px 4px;
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: calc(10px * var(--text-scale));
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  background: var(--surface-2);
  color: var(--ink-2);
}
.badge.urgent { background: rgba(178,58,47,0.08); color: #8e2c23; }
.badge.soon { background: rgba(179,106,46,0.08); color: #8a5022; }
.badge.ok { background: rgba(46,102,99,0.08); color: #1f4845; }

/* event dot */
.dot {
  display: inline-block;
  width: 8px; height: 8px;
  border-radius: 999px;
  flex-shrink: 0;
}

/* row */
.row-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: var(--density-py) 16px;
  border-bottom: 1px solid var(--hairline);
  background: transparent;
  cursor: pointer;
  transition: background 0.12s;
  width: 100%;
  text-align: left;
  border-left: none;
  border-right: none;
  border-top: none;
  font-family: var(--font-sans);
}
.row-item:last-child { border-bottom: none; }
.row-item:active { background: var(--surface-2); }

/* progress arc */
.ring-track { stroke: var(--hairline); fill: none; }
.ring-progress { stroke: var(--ink); fill: none; stroke-linecap: round; }

/* scroll snap (year)  */
.year-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}
.year-month {
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-sm);
  padding: 10px 10px 8px;
  cursor: pointer;
  transition: border-color 0.15s, transform 0.15s;
}
.year-month:hover { border-color: var(--ink-3); }
.year-month.current { border-color: var(--ink); }
.year-month-label {
  font-family: var(--font-mono);
  font-size: calc(10px * var(--text-scale));
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-2);
  margin-bottom: 6px;
  font-weight: 500;
}
.day-cell {
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  font-size: calc(8.5px * var(--text-scale));
  color: var(--ink-3);
  position: relative;
  border-radius: 3px;
}
.day-cell.weekend { color: var(--ink-4); }
.day-cell.today {
  background: var(--ink);
  color: #fff;
  font-weight: 600;
}
.day-cell.has-event::after {
  content: '';
  position: absolute;
  bottom: 2px;
  width: 3px; height: 3px;
  border-radius: 999px;
  background: var(--bg-hue, var(--ink));
}

/* fab */
.fab {
  position: absolute;
  bottom: 20px;
  right: 20px;
  width: 56px; height: 56px;
  border-radius: 999px;
  background: var(--ink);
  color: #fff;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 14px rgba(20,23,26,0.18), 0 1px 3px rgba(20,23,26,0.08);
  cursor: pointer;
  transition: transform 0.18s, box-shadow 0.18s;
  z-index: 5;
}
.fab:hover { transform: translateY(-1px); box-shadow: 0 6px 18px rgba(20,23,26,0.22); }
.fab:active { transform: translateY(0); }

/* sheet (modal) */
.sheet-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(20,23,26,0.32);
  z-index: 50;
  display: flex;
  align-items: flex-end;
  animation: bd-in 0.2s ease;
}
@keyframes bd-in { from { opacity: 0; } to { opacity: 1; } }
.sheet {
  width: 100%;
  background: var(--surface);
  border-radius: 24px 24px 0 0;
  max-height: 92%;
  display: flex;
  flex-direction: column;
  animation: sheet-in 0.28s cubic-bezier(0.2, 0.8, 0.2, 1);
}
@keyframes sheet-in { from { transform: translateY(100%); } to { transform: translateY(0); } }
.sheet-grip {
  width: 36px; height: 5px;
  background: var(--hairline-2);
  border-radius: 999px;
  margin: 8px auto 4px;
}

/* notification dot pulse */
.pulse {
  animation: pulse 2.4s ease-in-out infinite;
}
@keyframes pulse {
  0%, 100% { opacity: 0.4; }
  50% { opacity: 1; }
}

/* ─────────────────────────────────────────────────────────────
   Canvas chrome
   ───────────────────────────────────────────────────────────── */
.canvas-host {
  background: #EAE7DE;
  min-height: 100vh;
  font-family: var(--font-sans);
}
.canvas-meta {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-3);
}

/* ─────────────────────────────────────────────────────────────
   SOVD Tracker: десктоп-каркас (240px sidebar + topbar + content)
   ───────────────────────────────────────────────────────────── */
.app {
  display: grid;
  grid-template-columns: 232px 1fr;  /* было 192px, расширили на ~20% */
  height: 100vh;
  background: var(--bg);
}
.sidebar {
  background: var(--surface);
  border-right: 1px solid var(--hairline);
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.sidebar-head {
  padding: 20px 18px 14px;
  border-bottom: 1px solid var(--hairline);
}
.sidebar-head .brand {
  font-family: var(--font-serif);
  font-size: 18px;
  line-height: 1.1;
  letter-spacing: -0.005em;
}
.sidebar-head .brand-city {
  color: var(--ink-3);
  font-style: italic;
}
.sidebar-nav {
  padding: 8px;
  flex: 1;
  overflow-y: auto;
}
.nav-section {
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-4);
  padding: 12px 12px 6px;
}
.nav-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 9px 12px;
  width: 100%;
  border: none;
  border-radius: 8px;
  margin-bottom: 2px;
  background: transparent;
  color: var(--ink-2);
  font-family: var(--font-sans);
  font-size: 13.5px;
  text-align: left;
  cursor: pointer;
  transition: background 0.12s, color 0.12s;
}
.nav-item:hover { background: var(--surface-2); }
.nav-item.active {
  background: var(--surface-2);
  color: var(--ink);
  font-weight: 500;
}
.nav-item-label { flex: 1; }
.nav-item-count {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink-3);
}
.sidebar-user {
  padding: 0;
  border-top: 1px solid var(--hairline);
  display: flex;
  flex-direction: column;
}
.sidebar-user-row {
  padding: 14px;
  display: flex;
  align-items: center;
  gap: 10px;
  border-top: 1px solid var(--hairline);
}
.logs-btn {
  background: transparent;
  border: 0;
  padding: 10px 14px;
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-sans);
  font-size: 12px;
  color: var(--ink-2);
  cursor: pointer;
  width: 100%;
  text-align: left;
}
.logs-btn:hover { background: var(--surface-2); color: var(--ink); }
.logs-count {
  margin-left: auto;
  background: var(--ink);
  color: #fff;
  font-family: var(--font-mono);
  font-size: 10px;
  padding: 2px 6px;
  border-radius: 10px;
}
/* Inline-панель «История действий» внутри сайдбара — раскрывается над кнопкой
   «Логи» при клике. Видны ~20 строк, остальное прокручивается внутри. */
.logs-panel {
  display: flex;
  flex-direction: column;
  max-height: 460px;
  min-height: 0;
  border-top: 1px solid var(--hairline);
  background: var(--surface-2);
}
.logs-panel-head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.06em;
  color: var(--ink-3);
  text-transform: uppercase;
  border-bottom: 1px solid var(--hairline);
}
.logs-panel-title { flex: 1; }
.logs-panel-meta {
  background: var(--ink);
  color: #fff;
  padding: 1px 6px;
  border-radius: 8px;
  font-size: 10px;
}
.logs-panel-clear {
  background: transparent;
  border: 0;
  color: var(--ink-3);
  cursor: pointer;
  font-size: 14px;
  padding: 0 4px;
  line-height: 1;
}
.logs-panel-clear:hover { color: #B23A2F; }
.logs-list {
  flex: 1;
  overflow-y: auto;
  padding: 4px 0;
}
.logs-row {
  display: flex;
  gap: 8px;
  padding: 3px 14px;
  font-family: var(--font-sans);
  font-size: 10.5px;
  line-height: 1.4;
  border-bottom: 1px dashed var(--hairline);
  white-space: nowrap;
  overflow: hidden;
}
.logs-row:last-child { border-bottom: 0; }
.logs-when {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--ink-3);
  letter-spacing: 0.02em;
  flex-shrink: 0;
}
.logs-msg {
  color: var(--ink);
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
}
.logs-row:hover { background: var(--surface); white-space: normal; }
.logs-row:hover .logs-msg { white-space: normal; }
.logs-empty {
  color: var(--ink-3);
  font-style: italic;
  padding: 16px 14px;
  text-align: center;
  font-size: 11px;
}
.logs-chev { margin-left: 4px; color: var(--ink-3); font-size: 10px; }
.logs-btn.is-open { background: var(--surface-2); color: var(--ink); }
.avatar {
  width: 32px;
  height: 32px;
  border-radius: 999px;
  background: var(--ink);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.02em;
  flex-shrink: 0;
}
.avatar.sm { width: 24px; height: 24px; font-size: 9.5px; }
.avatar.md { width: 28px; height: 28px; font-size: 10.5px; }
.avatar.lg { width: 56px; height: 56px; font-size: 18px; font-family: var(--font-serif); font-weight: 400; }

.main {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  height: 100%;
}
/* Sticky-режим для main активируется только во вкладке «Графики и табель» */
body.is-schedules .main { overflow: hidden; }
/* Топбар (поиск + дата + Отменить/Вернуть) — только в Графиках */
body:not(.is-schedules) .topbar { display: none; }
.topbar {
  padding: 6px 24px;
  border-bottom: 1px solid var(--hairline);
  background: var(--surface);
  display: flex;
  align-items: center;
  gap: 16px;
  flex-shrink: 0;
}
.topbar-title {
  font-family: var(--font-serif);
  font-size: 20px;
  line-height: 1;
  color: var(--ink);
  margin-right: 16px;
  white-space: nowrap;
}
.topbar-title:empty { display: none; }
/* content-head в режиме «Графики и табель» — горизонтальная строка:
   [pill «закрыт»?] [+ Сотрудник] [показано: N из M] [месяцы] [Сегодня] [Закрыть месяц] */
.content-head.content-head-schedules {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 12px;
  flex-wrap: nowrap;
}
.content-head-schedules .btn-emp-add {
  padding: 6px 12px;
  font-size: 12px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}
.content-head-schedules .head-result {
  display: inline-flex;
  align-items: baseline;
  gap: 5px;
  flex-shrink: 0;
}
.head-result-num {
  font-family: var(--font-serif);
  font-size: 18px;
  color: var(--ink);
}
/* Блок «Закрепить с этого дня в новую смену» — вверху popover клетки */
.cp-reassign-block {
  margin: 4px 4px 8px;
  padding: 8px 10px;
  border: 1px solid var(--hairline);
  border-radius: 8px;
  background: var(--surface-2);
}
.cp-reassign-name {
  font-family: var(--font-serif);
  font-size: 14px;
  color: var(--ink);
  margin-bottom: 2px;
}
.cp-reassign-title {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.04em;
  color: var(--ink-3);
  text-transform: lowercase;
  margin-bottom: 6px;
}
.cp-reassign-btns { display: flex; gap: 4px; flex-wrap: wrap; }
.cp-reassign-btn {
  flex: 1;
  min-width: 48px;
  padding: 6px 4px;
  border: 1px solid var(--hairline);
  background: var(--surface);
  color: var(--ink-2);
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  border-radius: 4px;
  cursor: pointer;
}
.cp-reassign-btn:hover { background: var(--surface-2); border-color: var(--ink-3); color: var(--ink); }
.cp-reassign-btn.is-current { opacity: 0.4; cursor: default; }

/* История закреплений в карточке (read-only) */
.reassign-current-mark {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--hue-vac);
  margin-left: 4px;
}
.reassign-row.is-current { background: rgba(92,122,74,0.10); }
.reassign-hint {
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: var(--ink-3);
  margin-top: 6px;
  padding: 4px 0;
  font-style: italic;
}

/* Блок переводов сотрудника в другие смены (карточка) */
.reassign-block { width: 100%; }
.reassign-list { display: flex; flex-direction: column; gap: 4px; margin-bottom: 8px; }
.reassign-empty {
  font-family: var(--font-sans); font-size: 11px; color: var(--ink-3); font-style: italic;
  padding: 4px 0;
}
.reassign-row {
  display: flex; align-items: center; gap: 8px;
  padding: 4px 8px;
  background: var(--surface-2);
  border-radius: 4px;
  font-family: var(--font-mono);
  font-size: 11.5px;
}
.reassign-date { color: var(--ink-2); }
.reassign-shift { color: var(--ink); font-weight: 500; }
.reassign-del {
  margin-left: auto;
  background: transparent;
  border: 0;
  color: var(--ink-3);
  cursor: pointer;
  font-size: 14px;
  padding: 0 4px;
}
.reassign-del:hover { color: #B23A2F; }
.reassign-add-row {
  display: flex; align-items: center; gap: 6px;
  padding: 6px 0;
  border-top: 1px dashed var(--hairline);
}
.reassign-add-lbl { font-family: var(--font-mono); font-size: 11px; color: var(--ink-3); }
.reassign-add-row input[type="date"],
.reassign-add-row select {
  font-family: var(--font-mono); font-size: 11px;
  padding: 4px 6px; border: 1px solid var(--hairline);
  border-radius: 4px; background: var(--surface); color: var(--ink);
}
.reassign-add-row button {
  padding: 5px 10px;
  font-family: var(--font-sans); font-size: 11px;
  border: 1px solid var(--ink);
  background: var(--ink); color: #fff;
  border-radius: 4px; cursor: pointer; white-space: nowrap;
}
.reassign-add-row button:hover { background: var(--ink-2); border-color: var(--ink-2); }

.head-divider {
  display: inline-block;
  width: 1px;
  align-self: stretch;
  background: var(--hairline);
  margin: 4px 4px;
  flex-shrink: 0;
}

/* Кнопка «Подтвердить всё» — массовая отвязка от xlsx/docx-исходников.
   Жёлто-голубой акцент (цвета штриховок) + counter-badge с количеством. */
.btn-confirm-all,
.btn-confirm-revert {
  padding: 6px 11px;
  font-size: 12px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
  border: 1px solid var(--hairline);
  background: var(--surface);
  color: var(--ink-2);
  cursor: pointer;
  border-radius: 6px;
  white-space: nowrap;
  font-family: var(--font-sans);
}
.btn-confirm-all:hover {
  background: linear-gradient(135deg, rgba(230,170,0,0.10), rgba(63,90,138,0.10));
  border-color: var(--ink-3);
  color: var(--ink);
}
.btn-confirm-all .confirm-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  padding: 0 5px;
  height: 16px;
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 500;
  border-radius: 8px;
  background: rgba(20,23,26,0.08);
  color: var(--ink);
  margin-left: 2px;
}
.btn-confirm-revert {
  background: rgba(178,58,47,0.06);
  border-color: rgba(178,58,47,0.30);
  color: #8a3a2f;
}
.btn-confirm-revert:hover {
  background: rgba(178,58,47,0.12);
  border-color: rgba(178,58,47,0.45);
  color: #6b2c24;
}
.topbar-title-mon {
  color: var(--ink-3);
  font-style: italic;
  font-size: 17px;
}
.topbar-search {
  flex: 1;
  max-width: 380px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 14px;
  background: var(--surface-2);
  border-radius: 8px;
  color: var(--ink-3);
}
.topbar-section-label {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-3);
  white-space: nowrap;
}
.topbar-section-label:empty { display: none; }
.topbar-search input {
  flex: 1;
  border: none;
  background: transparent;
  outline: none;
  font-family: var(--font-sans);
  font-size: 13px;
  color: var(--ink);
}
.kbd {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--ink-4);
  border: 1px solid var(--hairline-2);
  padding: 1px 5px;
  border-radius: 3px;
}
.topbar-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}
.topbar-date {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--ink-3);
  letter-spacing: 0.05em;
}
.content {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 10px 24px;
}
/* В Графиках content становится flex-колонкой со внутренним sticky-скроллом таблицы.
   В остальных вкладках обычная вертикальная прокрутка содержимого. */
body.is-schedules .content {
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
body.is-schedules .content > .content-head,
body.is-schedules .content > .filter-bar { flex-shrink: 0; }
.content-head {
  margin-bottom: 8px;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
}
.content-head h1 {
  margin: 0;
  font-family: var(--font-serif);
  font-size: 32px;
  font-weight: 400;
  letter-spacing: -0.01em;
  line-height: 1.05;
}
.segmented {
  display: flex;
  gap: 4px;
}
.seg-btn {
  padding: 6px 12px;
  border: 1px solid var(--hairline);
  background: var(--surface);
  color: var(--ink-2);
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 500;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.12s;
}
.seg-btn:hover { background: var(--surface-2); }
.seg-btn.active {
  background: #3D5562;
  color: #fff;
  border-color: #3D5562;
}
.seg-btn.today-marker {
  font-weight: 600;
}
.seg-btn.today-marker::before {
  content: '';
  width: 5px;
  height: 5px;
  border-radius: 999px;
  background: var(--hue-vlek);
  display: inline-block;
  margin-right: 5px;
  vertical-align: middle;
}

/* Кнопка «Сегодня» */
.today-btn {
  padding: 6px 12px;
  border: 1px solid var(--hairline);
  background: var(--surface);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 500;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.12s;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.today-btn:hover { background: var(--surface-2); border-color: var(--ink-3); }
.today-btn:disabled { opacity: 0.4; cursor: default; }
.today-btn .dot {
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: var(--hue-vlek);
}

/* Кнопка замка месяца */
.lock-btn {
  padding: 6px 12px;
  border: 1px solid var(--hairline);
  background: var(--surface);
  color: var(--ink-2);
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 500;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.12s;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.lock-btn:hover { background: var(--surface-2); border-color: var(--ink-3); }
.lock-btn.is-locked {
  background: rgba(178,58,47,0.08);
  color: var(--hue-vlek);
  border-color: var(--hue-vlek);
}
.lock-btn.is-locked:hover { background: var(--hue-vlek); color: #fff; }

/* Закрытый месяц в ленте — лёгкая красная диагональная штриховка */
.seg-btn.locked {
  background-image: repeating-linear-gradient(
    -45deg,
    rgba(178,58,47,0.10),
    rgba(178,58,47,0.10) 3px,
    transparent 3px,
    transparent 7px
  );
  border-color: rgba(178,58,47,0.30);
}
.seg-btn.locked:hover { border-color: var(--hue-vlek); }
/* Если месяц одновременно активен и закрыт — штриховка поверх тёмного фона тоже видна */
.seg-btn.locked.active {
  background-color: var(--ink);
  background-image: repeating-linear-gradient(
    -45deg,
    rgba(255,255,255,0.10),
    rgba(255,255,255,0.10) 3px,
    transparent 3px,
    transparent 7px
  );
}

/* Плашка «закрыт» рядом с заголовком */
.lock-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-left: 12px;
  padding: 4px 10px;
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 500;
  font-style: normal;
  background: rgba(178,58,47,0.10);
  color: var(--hue-vlek);
  border-radius: 999px;
  vertical-align: middle;
}

/* ─── Слайд-анимация между месяцами (длинная лента дней года) ──── */
.slide-stage {
  position: relative;
  overflow: hidden;
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}
.slide-out-fwd {
  animation: slideOutLeft 0.28s cubic-bezier(0.5, 0, 0.2, 1) forwards;
}
.slide-out-bwd {
  animation: slideOutRight 0.28s cubic-bezier(0.5, 0, 0.2, 1) forwards;
}
.slide-in-fwd {
  animation: slideInRight 0.32s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.slide-in-bwd {
  animation: slideInLeft 0.32s cubic-bezier(0.2, 0.8, 0.2, 1);
}
@keyframes slideOutLeft  { from { transform: translateX(0); opacity: 1; } to { transform: translateX(-3%); opacity: 0; } }
@keyframes slideOutRight { from { transform: translateX(0); opacity: 1; } to { transform: translateX(3%);  opacity: 0; } }
@keyframes slideInRight  { from { transform: translateX(4%); opacity: 0; } to { transform: translateX(0); opacity: 1; } }
@keyframes slideInLeft   { from { transform: translateX(-4%); opacity: 0; } to { transform: translateX(0); opacity: 1; } }

/* Переключатель месяцев — обёртка со «лентой» */
.month-bar {
  display: flex;
  align-items: center;
  gap: 8px;
}
.month-bar .segmented { flex-wrap: wrap; }

/* ─── Фильтр-бар (чипы по службам + счётчик) ───────────────────── */
.filter-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 6px;
  gap: 16px;
  flex-wrap: wrap;
}
.filter-chips {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.filter-chip {
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid var(--hairline);
  background: var(--surface);
  color: var(--ink-2);
  font-family: var(--font-sans);
  font-size: 12.5px;
  font-weight: 500;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: all 0.12s;
}
.filter-chip:hover { background: var(--surface-2); border-color: var(--ink-3); }
.filter-chip.active {
  background: var(--ink);
  color: #fff;
  border-color: var(--ink);
}
.filter-chip .cnt {
  font-family: var(--font-mono);
  font-size: 10.5px;
  background: rgba(0,0,0,0.06);
  padding: 1px 7px;
  border-radius: 999px;
  color: inherit;
  opacity: 0.85;
}
.filter-chip.active .cnt { background: rgba(255,255,255,0.18); }
.filter-result {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--ink-2);
}

/* ─── Цвета по службе (РП/РДЦ/ДПВ) ──────────────────────────── */
:root {
  --svc-rp:  #4A3A78;
  --svc-rdc: #1F4E66;
  --svc-dpv: #5C7A4A;
}
.filter-chip.svc-all { border-color: rgba(61,85,98,0.45); color: #3D5562; background: rgba(61,85,98,0.06); }
.filter-chip.svc-rp  { border-color: var(--svc-rp);  color: var(--svc-rp);  background: rgba(74,58,120,0.06); }
.filter-chip.svc-rdc { border-color: var(--svc-rdc); color: var(--svc-rdc); background: rgba(31,78,102,0.06); }
.filter-chip.svc-dpv { border-color: var(--svc-dpv); color: var(--svc-dpv); background: rgba(92,122,74,0.06); }
.filter-chip.svc-all.active { background: #3D5562; color: #fff; border-color: #3D5562; }
.filter-chip.svc-rp.active  { background: var(--svc-rp);  color: #fff; border-color: var(--svc-rp); }
.filter-chip.svc-rdc.active { background: var(--svc-rdc); color: #fff; border-color: var(--svc-rdc); }
.filter-chip.svc-dpv.active { background: var(--svc-dpv); color: #fff; border-color: var(--svc-dpv); }
/* Чип «Скрытые» — серый/пунктирный */
.filter-chip.filter-hidden {
  border-style: dashed;
  border-color: var(--ink-3);
  color: var(--ink-3);
  background: var(--surface);
}
.filter-chip.filter-hidden:hover { color: var(--ink); border-color: var(--ink); border-style: solid; }
.filter-chip.filter-hidden.active {
  background: var(--ink-2); color: #fff; border-color: var(--ink-2); border-style: solid;
}

/* Разделитель между блоками чипов (служба | смена цикла) */
.filter-sep {
  display: inline-block;
  width: 1px;
  align-self: stretch;
  background: var(--hairline);
  margin: 4px 4px;
}

/* Чипы «См 1..5» — цвета 1:1 с .shift-marker (бейджи перехода в смену) */
/* Палитра смен — 5 контрастных оттенков. Раньше См 2/3 и См 4/5 были близки;
   теперь чётко различимы: фиолетовый / синий / зелёный / оранжевый / малиновый. */
.filter-chip.cm-1 { border-color: rgba(94,53,177,0.45);  color: #5E35B1; background: rgba(94,53,177,0.06); }
.filter-chip.cm-2 { border-color: rgba(21,101,192,0.45); color: #1565C0; background: rgba(21,101,192,0.06); }
.filter-chip.cm-3 { border-color: rgba(46,125,50,0.45);  color: #2E7D32; background: rgba(46,125,50,0.06); }
.filter-chip.cm-4 { border-color: rgba(230,81,0,0.45);   color: #E65100; background: rgba(230,81,0,0.06); }
.filter-chip.cm-5 { border-color: rgba(173,20,87,0.45);  color: #AD1457; background: rgba(173,20,87,0.06); }
/* Бледная подсветка клетки с датой закрепления в новую смену.
   Цвет соответствует цвету фильтр-чипа той же смены, но более прозрачный. */
.cell-reassigned { position: relative; }
.cell-reassigned-cm-1 { background-color: rgba(94,53,177,0.16) !important; }
.cell-reassigned-cm-2 { background-color: rgba(21,101,192,0.16) !important; }
.cell-reassigned-cm-3 { background-color: rgba(46,125,50,0.16) !important; }
.cell-reassigned-cm-4 { background-color: rgba(230,81,0,0.16) !important; }
.cell-reassigned-cm-5 { background-color: rgba(173,20,87,0.16) !important; }

.filter-chip.cm-1.active { background: #5E35B1; color: #fff; border-color: #5E35B1; }
.filter-chip.cm-2.active { background: #1565C0; color: #fff; border-color: #1565C0; }
.filter-chip.cm-3.active { background: #2E7D32; color: #fff; border-color: #2E7D32; }
.filter-chip.cm-4.active { background: #E65100; color: #fff; border-color: #E65100; }
.filter-chip.cm-5.active { background: #AD1457; color: #fff; border-color: #AD1457; }

/* Пип-маркер службы в строке сотрудника */
.svc-pip {
  width: 4px;
  align-self: stretch;
  border-radius: 2px;
  flex-shrink: 0;
  min-height: 24px;
}
.svc-pip.svc-rp  { background: var(--svc-rp); }
.svc-pip.svc-rdc { background: var(--svc-rdc); }
.svc-pip.svc-dpv { background: var(--svc-dpv); }

/* Статусы сотрудника — подсветка строки и маркер слева от ФИО */
.row-mark {
  display: inline-flex;
  align-items: center;
  margin-right: 4px;
  cursor: help;
}
.row-reason {
  font-weight: 500;
}

/* Стажёр — охра. Solid surface + tint оверлей: иначе бейджи дневных клеток просвечивают сквозь sticky col-fio. */
.schedule-table tbody tr.emp-row.status-trainee td.col-fio {
  background-color: var(--surface);
  background-image: linear-gradient(rgba(179,106,46,0.06), rgba(179,106,46,0.06));
  border-left: 3px solid var(--hue-trip);
}
.schedule-table tbody tr.emp-row.status-trainee td.col-fio > div > div > div:first-child { color: #8a5022; }
.schedule-table tbody tr.emp-row.status-trainee .row-reason { color: #8a5022; }
.schedule-table tbody tr.emp-row.status-trainee .svc-pip { background: var(--hue-trip) !important; }
.row-mark.mark-trainee { color: var(--hue-trip); }

/* Уволен — приглушённый серый. Solid + tint. */
.schedule-table tbody tr.emp-row.status-fired td.col-fio {
  background-color: var(--surface);
  background-image: linear-gradient(rgba(110,116,128,0.06), rgba(110,116,128,0.06));
  border-left: 3px solid var(--ink-3);
}
.schedule-table tbody tr.emp-row.status-fired td.col-fio > div > div > div:first-child { color: var(--ink-3); }
.schedule-table tbody tr.emp-row.status-fired .row-reason { color: var(--ink-3); }
.schedule-table tbody tr.emp-row.status-fired .svc-pip { background: var(--ink-3) !important; }
.row-mark.mark-fired { color: var(--ink-3); }

/* Архив — почти не показывается, фильтр сам прячет */
.schedule-table tbody tr.emp-row.status-archive td.col-fio { opacity: 0.5; }

/* Пустой график (только если статус active) — мягкая охра. Solid + tint. */
.schedule-table tbody tr.emp-row.status-empty-sched td.col-fio {
  background-color: var(--surface);
  background-image: linear-gradient(rgba(179,106,46,0.04), rgba(179,106,46,0.04));
  border-left: 3px solid rgba(179,106,46,0.6);
}
.schedule-table tbody tr.emp-row.status-empty-sched td.col-fio > div > div > div:first-child { color: #8a5022; }
.schedule-table tbody tr.emp-row.status-empty-sched .row-reason { color: #8a5022; }
.row-mark.mark-empty { color: var(--hue-trip); }

/* Кнопка-стрелка для разворачивания табельных часов под именем */
.expander {
  width: 18px;
  height: 18px;
  border: none;
  background: transparent;
  color: var(--ink-3);
  cursor: pointer;
  border-radius: 4px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  flex-shrink: 0;
}
.expander:hover { background: var(--surface-2); color: var(--ink); }
.emp-row.expanded .expander { color: var(--ink); }
.expander-right { margin-left: auto; }

/* Иконка-кнопка «Открыть карточку» (слева от ФИО) */
.emp-card-icon {
  width: 28px; height: 28px;
  border: none;
  background: transparent;
  color: var(--ink-3);
  cursor: pointer;
  border-radius: 6px;
  display: inline-flex; align-items: center; justify-content: center;
  padding: 0; flex-shrink: 0;
  transition: background 0.12s, color 0.12s;
}
.emp-card-icon:hover { background: var(--surface-2); color: var(--ink); }

/* Большая зона ФИО — клик раскрывает табель */
.emp-row-clickname {
  min-width: 0; flex: 1;
  cursor: pointer;
  padding: 2px 4px;
  border-radius: 6px;
  transition: background 0.12s;
  overflow: hidden;
}
.emp-row-clickname:hover { background: var(--surface-2); }
.emp-fio-line {
  display: flex; align-items: center; gap: 4px;
  flex-wrap: nowrap;
  white-space: nowrap;
  overflow: hidden;
}
.emp-fio-text {
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 4 подписи в раскрытом col-fio: график / общие / ОВД / ночные */
.col-fio-labels {
  margin-top: 10px;
  display: flex; flex-direction: column;
  gap: 2px;
}
.col-fio-labels .cfl-row {
  font-family: var(--font-sans); font-size: 11.5px;
  color: var(--ink-3);
  padding: 4px 2px;
}
.col-fio-labels .cfl-row:first-child {
  font-weight: 500;
  color: var(--ink-2);
}

/* Доп. строки табеля (код / ОВД / ночные) под основной строкой графика */
.schedule-table tbody tr.emp-row-code td,
.schedule-table tbody tr.emp-row-ovd td,
.schedule-table tbody tr.emp-row-night td {
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: var(--ink-2);
  height: 28px;
  text-align: center;
}
.schedule-table tbody tr.emp-row-code td:not(.col-fio):not(.col-total),
.schedule-table tbody tr.emp-row-ovd td:not(.col-fio):not(.col-total),
.schedule-table tbody tr.emp-row-night td:not(.col-fio):not(.col-total) {
  background: rgba(20,23,26,0.012);
}
.schedule-table tbody tr.emp-row-code td:not(.col-fio):not(.col-total) {
  background: rgba(20,23,26,0.025);
  color: var(--ink);
  font-weight: 500;
}
.schedule-table tbody tr.emp-row-night td:not(.col-fio):not(.col-total) {
  background: rgba(63,90,138,0.05);
}
.schedule-table tbody tr.emp-row-night td {
  border-bottom: 2px solid var(--hairline);
}
.schedule-table tbody tr.emp-row-code td.today,
.schedule-table tbody tr.emp-row-ovd td.today,
.schedule-table tbody tr.emp-row-night td.today {
  background: rgba(46,102,99,0.10);
}
.schedule-table tbody tr.emp-row-code td.weekend,
.schedule-table tbody tr.emp-row-ovd td.weekend,
.schedule-table tbody tr.emp-row-night td.weekend {
  background: rgba(20,23,26,0.03);
}
.schedule-table tbody tr.emp-row-code td.holiday,
.schedule-table tbody tr.emp-row-ovd td.holiday,
.schedule-table tbody tr.emp-row-night td.holiday {
  background: rgba(178,58,47,0.06);
}
.schedule-table tbody tr.emp-row-code td.holiday-religious,
.schedule-table tbody tr.emp-row-ovd td.holiday-religious,
.schedule-table tbody tr.emp-row-night td.holiday-religious {
  background: rgba(179,106,46,0.06);
}
/* Метки строк слева внутри col-fio — какой ряд что значит (видно при раскрытии) */
.schedule-table tbody tr.emp-row.expanded td.col-fio { padding-bottom: 4px; }

/* «Виртуальные» часы — отпускные дни (О/Оп/ОЗ/ОЖ) с табельными часами «как если бы был отозван».
   В Факт.отработано НЕ идут. Светло-зелёный фон (тот же тон что у «О» в графике),
   чтобы визуально было сразу видно «эти часы за отпуск, не в зачёт». */
.schedule-table tbody td.row-virtual {
  background-color: rgba(92,122,74,0.18) !important;
  background-image: none !important;
  color: #3d5031;
}
.schedule-table tbody td.row-virtual .cell-code {
  background: rgba(255,255,255,0.5);
  color: #3d5031;
  font-weight: 400;
}

/* Блок-плитка под таблицей убран — оставляю стили на случай возврата */
.schedule-table tbody tr.emp-row-breakdown { display: none; }
.schedule-table tbody tr.emp-row-breakdown td {
  background: var(--surface-2);
  padding: 12px 14px 14px;
  border-bottom: 3px solid var(--ink);
  border-right: none;
  position: sticky;
  left: 0;
}
.breakdown {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  align-items: start;
}
.breakdown-empty {
  font-family: var(--font-sans);
  font-size: 12px;
  color: var(--ink-3);
  font-style: italic;
}
.bk-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.bk-title {
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-4);
  margin-bottom: 4px;
  padding-bottom: 4px;
  border-bottom: 1px solid var(--hairline);
}
.bk-item {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  padding: 3px 0;
  font-family: var(--font-sans);
  font-size: 11.5px;
  color: var(--ink-2);
}
.bk-lbl {
  flex: 1;
  min-width: 0;
}
.bk-val {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  color: var(--ink);
  text-align: right;
  white-space: nowrap;
}
.bk-val small {
  font-family: var(--font-sans);
  font-size: 9.5px;
  color: var(--ink-3);
  font-weight: 400;
  letter-spacing: 0.04em;
}
.bk-item.accent .bk-val { color: var(--hue-courses); }
.bk-item.positive .bk-val { color: var(--hue-courses); }
.bk-item.urgent .bk-val { color: var(--hue-vlek); }
/* В развёрнутом виде нижняя граница "пачки" должна быть жирной — визуально отделить от следующего сотрудника */
.schedule-table tbody tr.emp-row.expanded td.col-fio,
.schedule-table tbody tr.emp-row.expanded td.col-total {
  border-bottom: 2px solid var(--hairline);
  vertical-align: top;
  padding-top: 8px;
}


/* Разделитель между службами в одной таблице */
.svc-divider td {
  background: var(--surface-2) !important;
  padding: 10px 16px !important;
  border-bottom: 1px solid var(--hairline) !important;
  border-right: none !important;
  position: sticky;
  left: 0;
  height: auto !important;
}
.svc-tag {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 3px 8px 4px;
  border-radius: 999px;
  color: #fff;
  margin-right: 10px;
  font-weight: 500;
}
.svc-tag.svc-rp  { background: var(--svc-rp); }
.svc-tag.svc-rdc { background: var(--svc-rdc); }
.svc-tag.svc-dpv { background: var(--svc-dpv); }
.svc-name {
  font-family: var(--font-serif);
  font-size: 14px;
  font-style: italic;
  color: var(--ink-2);
}
.svc-cnt {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink-3);
  margin-left: 10px;
}

/* ─── Графики смен: таблица ────────────────────────────────────── */
.schedule-table-wrap {
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  overflow: auto;
  max-width: 100%;
  width: 100%;
  flex: 1;
  min-height: 0;
}
/* Контролы масштаба таблицы графика */
.tbl-zoom {
  display: inline-flex;
  align-items: center;
  margin-right: 14px;
  border: 1px solid var(--hairline);
  border-radius: 6px;
  overflow: hidden;
  background: var(--surface);
}
.tbl-zoom-btn,
.tbl-zoom-val {
  background: transparent;
  border: 0;
  padding: 4px 8px;
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--ink-2);
  cursor: pointer;
  min-width: 28px;
  line-height: 1;
}
.tbl-zoom-btn:hover,
.tbl-zoom-val:hover { background: var(--surface-2); color: var(--ink); }
.tbl-zoom-val {
  border-left: 1px solid var(--hairline);
  border-right: 1px solid var(--hairline);
  min-width: 44px;
  font-weight: 500;
  font-size: 11px;
}
.schedule-table {
  border-collapse: collapse;
  font-family: var(--font-sans);
}
.schedule-table thead th {
  background: var(--surface-2);
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: var(--ink-2);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-weight: 600;
  padding: 8px 4px;
  border-bottom: 1px solid var(--hairline);
  border-right: 1px solid var(--hairline);
  text-align: center;
  white-space: nowrap;
  min-width: 36px;
  position: sticky;
  top: 0;
  z-index: 5;
}
.schedule-table thead th.col-fio {
  text-align: left;
  padding-left: 14px;
  position: sticky;
  left: 0;
  top: 0;
  background: var(--surface-2);
  z-index: 15;
  min-width: 200px;
}
.schedule-table thead th.col-total {
  position: sticky;
  right: 0;
  top: 0;
  background: var(--surface-2);
  z-index: 15;
  border-left: 1px solid var(--hairline);
  border-right: none;
  min-width: 90px;
}
/* Маркер выходных и праздников — только в шапке, тонко.
   Базовый фон solid (--surface-2), оверлей через gradient — иначе при
   sticky-скролле строки тела таблицы просвечивают сквозь полупрозрачный thead. */
.schedule-table thead th.weekend {
  color: var(--ink-3);
  background-color: var(--surface-2);
  background-image: linear-gradient(rgba(20,23,26,0.04), rgba(20,23,26,0.04));
}
.schedule-table thead th.holiday {
  color: #8e2c23;
  background-color: var(--surface-2);
  background-image: linear-gradient(rgba(178,58,47,0.04), rgba(178,58,47,0.04));
}
.schedule-table thead th.holiday-religious {
  color: #8a5022;
  background-color: var(--surface-2);
  background-image: linear-gradient(rgba(179,106,46,0.05), rgba(179,106,46,0.05));
}
.schedule-table tbody td {
  padding: 0;
  border-bottom: 1px solid var(--hairline);
  border-right: 1px solid var(--hairline);
  font-family: var(--font-mono);
  font-size: 11.5px;
  text-align: center;
  vertical-align: middle;
  height: 38px;
  background: var(--surface);
  cursor: pointer;
  position: relative;
}
.schedule-table tbody td.col-fio {
  font-family: var(--font-sans);
  font-size: 12.5px;
  text-align: left;
  padding: 8px 14px;
  position: sticky;
  left: 0;
  background: var(--surface);
  z-index: 12;
  min-width: 200px;
  font-weight: 500;
  cursor: pointer;
  /* Расширяем правый край: 3px фоном surface (закрывает любой контент в этих 3px),
     потом 1px hairline для визуального разделителя. Всё solid — ничего не просвечивает. */
  box-shadow: 3px 0 0 0 var(--surface), 4px 0 0 0 var(--hairline);
}
.schedule-table tbody td.col-fio .pos {
  font-size: 10.5px;
  font-weight: 400;
  color: var(--ink-3);
  margin-top: 1px;
}
/* «См N» в строке должности — стиль текста как у должности (sans, обычный вес),
   только окрашен в цвет смены. Без подложки, без mono. */
.pos-shift {
  font-family: inherit;
  font-size: inherit;
  font-weight: 400;
  background: transparent;
  padding: 0;
  border-radius: 0;
  letter-spacing: 0;
  vertical-align: baseline;
  margin: 0;
}
.pos-shift.cm-1,
.pos-shift.cm-2,
.pos-shift.cm-3,
.pos-shift.cm-4,
.pos-shift.cm-5 { color: var(--ink-3); }
.schedule-table tbody td.col-total {
  position: sticky;
  right: 0;
  background: var(--surface);
  z-index: 12;
  border-left: 1px solid var(--hairline);
  font-weight: 500;
  font-size: 12px;
  color: var(--ink);
  min-width: 90px;
  /* Solid левый край — закрываем контент скроллящихся клеток слева */
  box-shadow: -3px 0 0 0 var(--surface), -4px 0 0 0 var(--hairline);
}
.schedule-table tbody td.col-total small {
  display: block;
  font-size: 10px;
  color: var(--ink-3);
  font-weight: 400;
  margin-top: 1px;
}

/* Развёрнутая карточка итогов — список «лейбл : значение» */
.tc-card {
  display: flex;
  flex-direction: column;
  gap: 0;
  min-width: 200px;
  line-height: 1.15;
}
.tc-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  padding: 0;
  font-family: var(--font-sans);
  font-size: 11px;
  color: var(--ink-2);
  border-bottom: 1px dashed transparent;
}
.tc-lbl {
  color: var(--ink-3);
  font-size: 10.5px;
  text-align: left;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.tc-pair, .tc-num {
  font-family: var(--font-mono);
  color: var(--ink);
  white-space: nowrap;
}
.tc-pair b, .tc-num b { font-weight: 600; }
.tc-pair i, .tc-num i {
  font-style: normal;
  font-family: var(--font-sans);
  font-size: 8.5px;
  color: var(--ink-3);
  margin: 0 1px 0 2px;
  letter-spacing: 0.04em;
}
.tc-num.pos b { color: var(--hue-courses); }
.tc-num.neg b { color: var(--hue-vlek); }
/* Факт.отраб. — зелёные числа */
.tc-row.tc-fact .tc-pair b,
.tc-row.tc-fact .tc-num b { color: var(--hue-vac); }
.tc-sep {
  height: 1px;
  background: var(--hairline);
  margin: 4px 0;
}
/* Сепаратор с подписью «из них:» как в xlsx */
.tc-sep-label {
  height: auto;
  background: transparent;
  margin: 6px 0 2px;
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--ink-3);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border-top: 1px solid var(--hairline);
  padding-top: 4px;
}
/* Когда внутри карточка развёрнутого вида — колонка расширяется только у этой ячейки */
.schedule-table tbody td.col-total:has(.tc-card) {
  min-width: 198px;
  padding: 10px 12px;
  vertical-align: top;
}
.tc-card { min-width: 186px; }
.schedule-table tbody tr:hover td.col-fio,
.schedule-table tbody tr:hover td.col-total { background: var(--surface-2); }
/* Тело таблицы: тонкие вертикальные акценты на колонках выходных/праздников */
.schedule-table tbody td.weekend { background: rgba(20,23,26,0.015); }
.schedule-table tbody td.holiday { background: rgba(178,58,47,0.025); }
.schedule-table tbody td.holiday-religious { background: rgba(179,106,46,0.03); }
.schedule-table tbody td.day-cell-edit { background: var(--accent-soft); }

/* Клетка которую сейчас редактируют — чёрная обводка */
.schedule-table tbody td.editing {
  box-shadow: inset 0 0 0 2px var(--ink);
  background: var(--accent-soft);
  z-index: 5;
}
/* Клетка вне периода работы сотрудника — серая штриховка */
.schedule-table tbody td.out-of-range {
  cursor: not-allowed;
  background: repeating-linear-gradient(
    -45deg,
    rgba(20,23,26,0.025),
    rgba(20,23,26,0.025) 4px,
    transparent 4px,
    transparent 8px
  );
}

/* Клетка из табеля (xlsx), а в графике не выставлена — жёлтая «подтвердить в графике» */
.schedule-table tbody td.from-tabel {
  background-image: repeating-linear-gradient(
    135deg,
    rgba(230,170,0,0.10),
    rgba(230,170,0,0.10) 3px,
    transparent 3px,
    transparent 7px
  );
  box-shadow: inset 0 0 0 1px rgba(230,170,0,0.35);
}
.schedule-table tbody td.from-tabel:hover {
  box-shadow: inset 0 0 0 1px rgba(230,170,0,0.6);
}

/* Аномалия: начало отпуска (О / Оп) попало в отсыпной (день после ночной).
   Это ошибка администрации — в отсыпной не отправляют в отпуск. Подсвечиваем
   красным с пунктирной красной обводкой чтобы сразу было видно. */
.schedule-table tbody td.cell-anomaly-vac-rest {
  /* !important — иначе .today / .weekend / .holiday / .from-tabel / .from-sched-only
     стили (определены позже в CSS) перекрывают красный сигнал аномалии. */
  background-color: rgba(178,58,47,0.14) !important;
  background-image: repeating-linear-gradient(
    -45deg,
    rgba(178,58,47,0.22),
    rgba(178,58,47,0.22) 4px,
    transparent 4px,
    transparent 9px
  ) !important;
  box-shadow: inset 0 0 0 2px var(--hue-vlek) !important;
}
.schedule-table tbody td.cell-anomaly-vac-rest:hover {
  background-color: rgba(178,58,47,0.20) !important;
}
.schedule-table tbody td.cell-anomaly-vac-rest .cell-code {
  color: var(--hue-vlek);
  font-weight: 700;
}

/* Legacy «голая цифра» в Row 1 «График смен» — забыли букву Т.
   Розовая клетка-маркер. Юзер вручную проходится и заменяет на Т<N>
   через popover, после фикса класс снимается автоматически (код
   перестаёт быть чистой цифрой). */
.schedule-table tbody td.cell-legacy-digit {
  background-color: rgba(255,105,180,0.22) !important;
  background-image: none !important;
}
.schedule-table tbody td.cell-legacy-digit:hover {
  background-color: rgba(255,105,180,0.32) !important;
}
/* Контент клетки-аномалии: значок ⚠ + «отпуск» зачёркнут + ОТСЫПНОЙ жирным */
.anom-cell {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0;
  line-height: 1;
  color: var(--hue-vlek);
  padding: 2px 0;
}
.anom-cell .anom-icon { display: block; margin-bottom: 1px; }
/* Зачёркнутая «О» — тот же стиль что у отпускной клетки, плюс линия зачёркивания.
   Размер/шрифт/цвет берутся из .cell-code.c-O — НЕ переопределяем. */
.anom-cell .anom-strike {
  text-decoration: line-through;
  text-decoration-color: var(--hue-vlek);
  text-decoration-thickness: 1.5px;
}
.anom-cell .anom-strong {
  font-family: var(--font-sans);
  font-size: 7px;
  font-weight: 700;
  color: var(--hue-vlek);
  letter-spacing: 0.02em;
  line-height: 1.1;
  margin-top: 2px;
}

/* Умный детектор аномалий (session 9).
   Универсальный стиль красной обводки + значка ⚠ в правом верхнем углу клетки.
   Используется для всех cell-anomaly-* подклассов (d-after-n, night-streak). */
.schedule-table tbody td.cell-anomaly {
  background-color: rgba(178,58,47,0.08) !important;
  box-shadow: inset 0 0 0 1.5px var(--hue-vlek) !important;
  position: relative;
}
.schedule-table tbody td.cell-anomaly:hover {
  background-color: rgba(178,58,47,0.16) !important;
}
.schedule-table tbody td.cell-anomaly::after {
  content: '';
  position: absolute;
  top: 1px;
  right: 1px;
  width: 7px;
  height: 7px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23B23A2F' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><path d='M10.29 3.86 1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0Z'/><line x1='12' y1='9' x2='12' y2='13'/><line x1='12' y1='17' x2='12.01' y2='17'/></svg>");
  background-size: contain;
  background-repeat: no-repeat;
  pointer-events: none;
}
/* Подвид: «Д сразу после Н» — оранжевая обводка (мягче, всё-таки бывает по подмене) */
.schedule-table tbody td.cell-anomaly-d-after-n {
  box-shadow: inset 0 0 0 1.5px #E65100 !important;
}
.schedule-table tbody td.cell-anomaly-d-after-n::after {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23E65100' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><path d='M10.29 3.86 1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0Z'/><line x1='12' y1='9' x2='12' y2='13'/><line x1='12' y1='17' x2='12.01' y2='17'/></svg>");
}

/* Клетка из графика (docx), а в табеле этот день пустой — голубая «зафиксировать в табеле» */
.schedule-table tbody td.from-sched-only {
  background-image: repeating-linear-gradient(
    45deg,
    rgba(63,90,138,0.10),
    rgba(63,90,138,0.10) 3px,
    transparent 3px,
    transparent 7px
  );
  box-shadow: inset 0 0 0 1px rgba(63,90,138,0.35);
}
.schedule-table tbody td.from-sched-only:hover {
  box-shadow: inset 0 0 0 1px rgba(63,90,138,0.6);
}

/* Сегодняшний день — сплошная вертикальная мятная полоса через всю колонку */
.schedule-table thead th.today {
  background-color: var(--surface-2);
  background-image: linear-gradient(rgba(46,102,99,0.10), rgba(46,102,99,0.10));
  color: var(--hue-courses);
  font-weight: 700;
  border-bottom: 2px solid var(--hue-courses) !important;
}
.schedule-table thead th.today div { color: var(--hue-courses) !important; font-weight: 600; }
.schedule-table thead th.today::after {
  content: '';
  display: block;
  width: 4px;
  height: 4px;
  border-radius: 999px;
  background: var(--hue-vlek);
  margin: 3px auto 0;
}
.schedule-table tbody td.today {
  background: rgba(46,102,99,0.06);
  box-shadow: none;
}
/* Тонкие мятные «нити» у первой/последней клетки колонки — визуально замыкают колонку */
.schedule-table tbody tr:first-child td.today { border-top: 2px solid var(--hue-courses); }
.schedule-table tbody tr:last-child  td.today { border-bottom: 2px solid var(--hue-courses); }

/* Коды смен — цветовая разметка */
.cell-code { display: inline-block; padding: 2px 5px; border-radius: 4px; min-width: 22px; font-weight: 500; }
.cell-code.c-D { background: rgba(31,78,102,0.12); color: #1F4E66; }
.cell-code.c-N { background: rgba(63,90,138,0.18); color: #2F4A7A; }
.cell-code.c-O { background: rgba(92,122,74,0.15); color: #3d5031; }
.cell-code.c-K { background: rgba(179,106,46,0.14); color: #8a5022; }
.cell-code.c-B { background: rgba(178,58,47,0.12); color: #8e2c23; }
.cell-code.c-U { background: rgba(74,58,120,0.12); color: #4A3A78; }
.cell-code.c-T { background: rgba(46,102,99,0.14); color: #2E6663; }
.cell-code.c-E { background: rgba(115,90,62,0.16); color: #735A3E; }
.cell-code.c-P { background: rgba(178,58,47,0.20); color: #8e2c23; }
.cell-code.c-misc { background: var(--surface-2); color: var(--ink-2); }
/* Двухстрочный код в строке табеля: буквы сверху, число снизу — чтобы клетки
   не расширялись горизонтально на УК8.25 / У12 / Кт7 / Т3 и т.п.
   Цифра рендерится тем же размером шрифта что и обычные однострочные числа
   (11.5px из table td — наследуется), буквы — мельче. */
.cell-code.cc-2line {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  line-height: 1;
  padding: 1px 4px;
  min-width: 22px;
}
.cell-code.cc-2line b {
  font-weight: 600;
  font-size: 9px;
  letter-spacing: 0.02em;
}
.cell-code.cc-2line i {
  font-style: normal;
  font-weight: 500;
  margin-top: 1px;
}

/* Маркер смены (См 1..5) — бейдж сверху клетки */
.shift-marker {
  position: absolute;
  top: 4px;
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 600;
  padding: 1px 6px;
  border-radius: 999px;
  color: #fff;
  white-space: nowrap;
  letter-spacing: 0.04em;
  box-shadow: 0 1px 2px rgba(20,23,26,0.18);
  z-index: 2;
  pointer-events: none;
}
.shift-marker-1 { background: #5E35B1; }   /* фиолетовый */
.shift-marker-2 { background: #1565C0; }   /* синий */
.shift-marker-3 { background: #2E7D32; }   /* зелёный */
.shift-marker-4 { background: #E65100; }   /* оранжевый */
.shift-marker-5 { background: #AD1457; }   /* малиновый */

/* Возврат в свою закреплённую смену — двойная обводка (белая + чёрная),
   видна на любом цвете бейджа смены */
.shift-marker.shift-marker-return {
  box-shadow: 0 0 0 1px rgba(255,255,255,0.85), 0 0 0 2px #1a1a1a;
  outline: none;
}

/* Последний день отпуска со счётчиком дней (О + бейдж "30 дн") */
.cell-code.vac-end {
  position: relative;
  overflow: visible;
}
.cell-code.vac-end .vac-badge {
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translate(-50%, -2px);
  font-family: var(--font-mono);
  font-size: 8.5px;
  font-weight: 600;
  padding: 1px 5px;
  border-radius: 999px;
  background: var(--hue-vac);
  color: #fff;
  white-space: nowrap;
  letter-spacing: 0.02em;
  box-shadow: 0 1px 3px rgba(20,23,26,0.15);
  pointer-events: none;
  z-index: 3;
}
/* Красный "+1" бейдж в верх-право клетки — отпуск пересёкся с гос-праздником.
   Не пересекается с центральным vac-badge "N дн" — они могут стоять на одной клетке. */
.vac-plus-one {
  position: absolute;
  top: 4px;
  right: 1px;
  font-family: var(--font-mono);
  font-size: 8px;
  font-weight: 700;
  padding: 0 4px;
  border-radius: 999px;
  background: #B23A2F;
  color: #fff;
  line-height: 1.4;
  white-space: nowrap;
  letter-spacing: 0.02em;
  box-shadow: 0 1px 2px rgba(20,23,26,0.18);
  pointer-events: none;
  z-index: 4;
}

/* ─── Выпадашка выбора кода ────────────────────────────────────── */
/* Баннер подтверждения значения из табеля поверх popover */
.cp-tabel-banner {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  margin: -8px -8px 8px;
  background: rgba(230,170,0,0.10);
  border-bottom: 1px solid rgba(230,170,0,0.30);
  border-radius: 8px 8px 0 0;
}
.cp-tb-text {
  flex: 1;
  font-family: var(--font-sans);
  font-size: 12.5px;
  color: var(--ink);
  line-height: 1.3;
}
.cp-tb-text b { font-family: var(--font-mono); padding: 1px 5px; background: var(--surface); border-radius: 4px; }
.cp-tb-hint {
  font-size: 10.5px;
  color: var(--ink-3);
  margin-top: 3px;
}
.cp-tb-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 6px 12px;
  background: var(--hue-courses);
  color: #fff;
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 500;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  white-space: nowrap;
}
.cp-tb-btn:hover { background: #1f4845; }

.code-popover {
  position: fixed;
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(20,23,26,0.12), 0 2px 6px rgba(20,23,26,0.06);
  padding: 8px;
  z-index: 50;
  min-width: 280px;
}
.cp-close-btn {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 6px;
  color: var(--ink-3);
  cursor: pointer;
  transition: all 0.12s;
  z-index: 1;
}
.cp-close-btn:hover {
  background: var(--surface-2);
  border-color: var(--hairline);
  color: var(--ink);
}
.code-popover-section {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-2);
  font-weight: 600;
  padding: 8px 8px 4px;
}
/* Раскрываемый заголовок группы «Ещё коды» */
.code-popover-section-toggle {
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  user-select: none;
  border-top: 1px dashed var(--hairline);
  margin-top: 6px;
  padding-top: 10px;
}
.code-popover-section-toggle:hover {
  color: var(--ink-2);
  background: var(--surface-2);
  border-radius: 4px;
}
.code-popover-section-toggle .cp-chevron {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink-3);
  margin-left: 6px;
}
.code-popover-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 4px;
  padding: 0 4px 4px;
}
/* Узкая сетка — для блоков с малым числом кнопок (например «События (основные)»:
   К + ВК). Кнопки в ~3 раза уже стандартной (по 1/6 ширины), идут слева. */
.code-popover-grid-compact {
  grid-template-columns: repeat(12, 1fr);
}
.code-popover-grid-compact > * { grid-column: span 2; }
.code-popover-btn {
  padding: 8px 4px;
  border: 1px solid var(--hairline);
  background: var(--surface);
  color: var(--ink);
  font-family: var(--font-mono);
  font-size: 12px;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.1s;
  text-align: center;
}
.code-popover-btn:hover { background: var(--surface-2); border-color: var(--ink-3); }
.code-popover-btn.active { background: var(--ink); color: #fff; border-color: var(--ink); }
.code-popover-btn .lbl {
  display: block;
  font-family: var(--font-sans);
  font-size: 10px;
  color: var(--ink-2);
  margin-top: 2px;
  font-weight: 500;
}
.code-popover-btn:hover .lbl,
.code-popover-btn.active .lbl { color: inherit; opacity: 0.85; }

/* Блок «Тех. учёба» — кнопка Т + ряд цифр 1..8 в одной обведённой карточке */
.cp-teh-block {
  margin: 4px 4px 6px;
  padding: 8px;
  border: 1px solid rgba(46,102,99,0.25);
  border-radius: 8px;
  background: rgba(46,102,99,0.03);
  display: flex;
  align-items: stretch;
  gap: 8px;
  min-height: 60px;
}
/* Контейнер для подписи «выбор кол-ва часов» + ряда цифр (Т и Э блоки) */
.cp-teh-grid-wrap {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.cp-pick-hint {
  font-family: var(--font-sans);
  font-size: 10px;
  font-weight: 500;
  color: var(--ink-3);
  letter-spacing: 0.02em;
  text-transform: lowercase;
  padding-left: 2px;
}
.cp-teh-main-btn {
  flex-shrink: 0;
  min-width: 64px;
  padding: 10px 6px;
  border: 1px solid rgba(46,102,99,0.4);
  background: var(--surface);
  color: #2E6663;
  font-family: var(--font-mono);
  font-size: 15px;
  font-weight: 700;
  border-radius: 6px;
  cursor: pointer;
  text-align: center;
  transition: all 0.1s;
}
.cp-teh-main-btn .lbl {
  display: block;
  font-family: var(--font-sans);
  font-size: 10px;
  font-weight: 500;
  color: var(--ink-2);
  margin-top: 2px;
  letter-spacing: 0.02em;
}
.cp-teh-main-btn:hover { background: rgba(46,102,99,0.10); border-color: #2E6663; }
.cp-teh-main-btn.active { background: #2E6663; color: #fff; border-color: #2E6663; }
.cp-teh-main-btn.active .lbl { color: rgba(255,255,255,0.9); }
.cp-teh-grid {
  flex: 1;
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 3px;
}
.code-popover-btn.cp-teh-btn {
  padding: 6px 2px;
  font-size: 12.5px;
  min-height: 28px;
  font-weight: 600;
  color: #2E6663;
  border-color: rgba(46,102,99,0.25);
  background: rgba(46,102,99,0.03);
}
.code-popover-btn.cp-teh-btn:hover {
  background: rgba(46,102,99,0.10);
  border-color: rgba(46,102,99,0.55);
}
.code-popover-btn.cp-teh-btn.active {
  background: #2E6663;
  color: #fff;
  border-color: #2E6663;
}

/* Блок «Отпуска» в карточке сотрудника */
.vac-block {
  margin: 14px 0 6px;
  padding: 12px 14px;
  background: rgba(92,122,74,0.04);
  border: 1px solid rgba(92,122,74,0.20);
  border-radius: 8px;
}
.vac-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 10px;
}
.vac-add-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 500;
  text-transform: none;
  letter-spacing: 0;
  background: #5C7A4A;
  color: #fff;
  border: 1px solid #5C7A4A;
  border-radius: 5px;
  cursor: pointer;
}
.vac-add-btn:hover { background: #4d6a3d; border-color: #4d6a3d; }
.vac-add-form {
  display: flex;
  gap: 8px;
  align-items: flex-end;
  padding: 8px 0 10px;
  margin-bottom: 8px;
  border-bottom: 1px dashed rgba(92,122,74,0.20);
  flex-wrap: wrap;
}
.vac-form-label {
  display: flex;
  flex-direction: column;
  gap: 3px;
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.vac-form-label input {
  padding: 5px 7px;
  border: 1px solid var(--hairline);
  border-radius: 4px;
  font-family: var(--font-mono);
  font-size: 11.5px;
}
.vac-apply-btn, .vac-cancel-btn {
  padding: 6px 12px;
  font-size: 11.5px;
  height: 28px;
}
.vac-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.vac-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 10px;
  background: rgba(255,255,255,0.6);
  border: 1px solid var(--hairline);
  border-radius: 5px;
}
.vac-range {
  flex: 1;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  color: var(--ink);
}
.vac-days {
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: var(--ink-2);
  padding: 2px 8px;
  background: rgba(92,122,74,0.10);
  border-radius: 4px;
}
.vac-remove {
  background: transparent;
  border: none;
  color: var(--ink-3);
  cursor: pointer;
  padding: 3px 6px;
  border-radius: 4px;
  display: inline-flex;
}
.vac-remove:hover { background: rgba(142,44,35,0.10); color: #8e2c23; }
.vac-empty {
  font-style: italic;
  color: var(--ink-3);
  font-size: 11.5px;
  padding: 4px 0;
}

/* История смен в карточке сотрудника (read-only) */
.shift-history-block {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 6px 0;
  font-family: var(--font-mono);
  font-size: 11.5px;
}
.shift-history-row {
  display: flex;
  align-items: center;
  gap: 10px;
}
.shift-history-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 42px;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.04em;
  background: var(--surface-2);
  border: 1px solid var(--hairline);
}
.shift-history-badge.shift-marker-1 { color: #5E35B1; border-color: rgba(94,53,177,0.35);  background: rgba(94,53,177,0.08); }
.shift-history-badge.shift-marker-2 { color: #1565C0; border-color: rgba(21,101,192,0.35); background: rgba(21,101,192,0.08); }
.shift-history-badge.shift-marker-3 { color: #2E7D32; border-color: rgba(46,125,50,0.35);  background: rgba(46,125,50,0.08); }
.shift-history-badge.shift-marker-4 { color: #E65100; border-color: rgba(230,81,0,0.35);   background: rgba(230,81,0,0.08); }
.shift-history-badge.shift-marker-5 { color: #AD1457; border-color: rgba(173,20,87,0.35);  background: rgba(173,20,87,0.08); }

/* Кнопка раскрытия/сворачивания истории смен */
.shift-history-toggle {
  display: block;
  width: 100%;
  margin: 4px 0;
  padding: 6px 10px;
  font-family: var(--font-mono); font-size: 11.5px; color: var(--ink-3);
  background: var(--surface-2);
  border: 1px dashed var(--hairline);
  border-radius: 6px;
  cursor: pointer;
  text-align: left;
  transition: background 0.12s, color 0.12s, border-color 0.12s;
}
.shift-history-toggle:hover {
  background: var(--surface);
  color: var(--ink);
  border-color: var(--ink-4);
}
.shift-history-range {
  color: var(--ink-2);
  font-size: 11px;
}
.shift-history-empty {
  color: var(--ink-3);
  font-style: italic;
  font-size: 11.5px;
}

/* Диапазон отпуска (sub-row под кнопкой О) */
/* Блок «Экзамен» — кнопка Э + ряд цифр 1..6 в коричневой карточке (как Э в графике) */
.cp-exm-block {
  margin: 4px 4px 6px;
  padding: 8px;
  border: 1px solid rgba(115,90,62,0.30);
  border-radius: 8px;
  background: rgba(115,90,62,0.04);
  display: flex;
  align-items: stretch;
  gap: 8px;
  min-height: 60px;
}
.cp-exm-main-btn {
  flex-shrink: 0;
  min-width: 64px;
  padding: 10px 6px;
  border: 1px solid rgba(115,90,62,0.45);
  background: var(--surface);
  color: #735A3E;
  font-family: var(--font-mono);
  font-size: 15px;
  font-weight: 700;
  border-radius: 6px;
  cursor: pointer;
  text-align: center;
  transition: all 0.1s;
}
.cp-exm-main-btn .lbl {
  display: block;
  font-family: var(--font-sans);
  font-size: 10px;
  font-weight: 500;
  color: var(--ink-2);
  margin-top: 2px;
  letter-spacing: 0.02em;
}
.cp-exm-main-btn:hover { background: rgba(115,90,62,0.10); border-color: #735A3E; }
.cp-exm-main-btn.active { background: #735A3E; color: #fff; border-color: #735A3E; }
.cp-exm-main-btn.active .lbl { color: rgba(255,255,255,0.9); }
.cp-exm-grid {
  flex: 1;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 3px;
}
.code-popover-btn.cp-exm-btn {
  padding: 6px 2px;
  font-size: 12.5px;
  min-height: 28px;
  font-weight: 600;
  color: #735A3E;
  border-color: rgba(115,90,62,0.25);
  background: rgba(115,90,62,0.03);
}
.code-popover-btn.cp-exm-btn:hover {
  background: rgba(115,90,62,0.10);
  border-color: rgba(115,90,62,0.55);
}
.code-popover-btn.cp-exm-btn.active {
  background: #735A3E;
  color: #fff;
  border-color: #735A3E;
}

/* Блок «Учёба» — кнопка У + диапазон дат + Применить, в фиолетовой карточке (как У в графике) */
.cp-study-block {
  margin: 4px 4px 6px;
  padding: 8px;
  border: 1px solid rgba(74,58,120,0.30);
  border-radius: 8px;
  background: rgba(74,58,120,0.04);
  display: flex;
  align-items: stretch;
  gap: 8px;
  min-height: 60px;
}
.cp-study-main-btn {
  flex-shrink: 0;
  min-width: 64px;
  padding: 10px 6px;
  border: 1px solid rgba(74,58,120,0.45);
  background: var(--surface);
  color: #4A3A78;
  font-family: var(--font-mono);
  font-size: 15px;
  font-weight: 700;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.1s;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.cp-study-main-btn .lbl {
  display: block;
  font-family: var(--font-sans);
  font-size: 10px;
  font-weight: 500;
  color: var(--ink-2);
  margin-top: 2px;
  letter-spacing: 0.02em;
  text-transform: lowercase;
}
.cp-study-main-btn:hover { background: rgba(74,58,120,0.10); border-color: #4A3A78; }
.cp-study-main-btn.active { background: #4A3A78; color: #fff; border-color: #4A3A78; }
.cp-study-main-btn.active .lbl { color: rgba(255,255,255,0.9); }
.cp-study-form {
  flex: 1;
  min-width: 0;
  display: grid;
  grid-template-columns: 1fr 1fr auto;
  gap: 6px;
  align-items: end;
}
.cp-study-form .cp-study-input { min-width: 0; width: 100%; }
.cp-study-apply { white-space: nowrap; }
.cp-study-label {
  display: flex;
  flex-direction: column;
  gap: 3px;
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--ink-2);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-weight: 500;
}
.cp-study-input {
  padding: 5px 6px;
  border: 1px solid var(--hairline);
  border-radius: 4px;
  font-family: var(--font-mono);
  font-size: 11px;
  background: var(--surface);
  color: var(--ink);
  width: 100%;
  box-sizing: border-box;
}
.cp-study-input:focus { border-color: #4A3A78; outline: none; }
.cp-study-apply {
  padding: 6px 10px;
  background: #4A3A78;
  color: #fff;
  border: 1px solid #4A3A78;
  border-radius: 4px;
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 500;
  cursor: pointer;
  white-space: nowrap;
  align-self: end;
}
.cp-study-apply:hover { background: #382b5c; border-color: #382b5c; }

/* Блок «Отпуск» — кнопка О + диапазон дат + Применить, всё в одной светло-зелёной карточке (как О в графике) */
.cp-vac-block {
  margin: 4px 4px 6px;
  padding: 8px;
  border: 1px solid rgba(92,122,74,0.32);
  border-radius: 8px;
  background: rgba(92,122,74,0.05);
  display: flex;
  align-items: stretch;
  gap: 8px;
  min-height: 60px;
}
.cp-vac-main-btn {
  flex-shrink: 0;
  min-width: 64px;
  padding: 10px 6px;
  border: 1px solid rgba(92,122,74,0.50);
  background: var(--surface);
  color: #3d5031;
  font-family: var(--font-mono);
  font-size: 15px;
  font-weight: 700;
  border-radius: 6px;
  cursor: pointer;
  text-align: center;
  transition: all 0.1s;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.cp-vac-main-btn .lbl {
  display: block;
  font-family: var(--font-sans);
  font-size: 10px;
  font-weight: 500;
  color: var(--ink-2);
  margin-top: 2px;
  letter-spacing: 0.02em;
  text-transform: lowercase;
}
.cp-vac-main-btn:hover { background: rgba(92,122,74,0.12); border-color: #5C7A4A; }
.cp-vac-main-btn.active { background: #5C7A4A; color: #fff; border-color: #5C7A4A; }
.cp-vac-main-btn.active .lbl { color: rgba(255,255,255,0.9); }

/* ОЗ-блок: тот же зелёный что у отпуска (codeClass для ОЗ возвращает c-O),
   но переопределяем поверх cp-study-main-btn (фиолетовый по умолчанию). */
.cp-oz-main-btn,
.cp-study-main-btn.cp-oz-main-btn {
  border-color: rgba(92,122,74,0.45);
  color: #3d5031;
  font-size: 13px;
}
.cp-oz-main-btn:hover { background: rgba(92,122,74,0.12); border-color: #5C7A4A; }
.cp-oz-main-btn.active { background: #5C7A4A; color: #fff; border-color: #5C7A4A; }
.cp-oz-main-btn.active .lbl { color: rgba(255,255,255,0.9); }

/* Смены + Очистить в одной строке. Все 3 кнопки (Д / Н / Выходной) одной
   ширины, просторные. Каждая колонка имеет свой мини-заголовок над кнопками. */
.cp-shifts-row {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 8px;
  align-items: stretch;
  margin: 0 4px 6px;
}
.cp-shifts-col {
  grid-column: span 2;
  display: grid;
  grid-template-rows: auto 1fr;
}
.cp-clear-col {
  grid-column: span 1;
  display: grid;
  grid-template-rows: auto 1fr;
}
.cp-shifts-col .code-popover-grid {
  grid-template-columns: 1fr 1fr;
  padding: 0;
}
.cp-clear-col .code-popover-grid {
  grid-template-columns: 1fr;
  padding: 0;
}
.cp-shifts-col .code-popover-section,
.cp-clear-col .code-popover-section { margin-top: 0; }
.cp-shifts-col .code-popover-btn,
.cp-clear-col .code-popover-btn {
  padding: 14px 6px;
  font-size: 13px;
}
.cp-shifts-col .code-popover-btn .lbl,
.cp-clear-col .code-popover-btn .lbl {
  font-size: 11px;
  margin-top: 4px;
}

/* Единая высота для всех main-кнопок (Т, Э, О, У, ОЗ, Б): занимают всю
   высоту своей карточки (за счёт align-items: stretch у блока). */
.cp-teh-main-btn,
.cp-exm-main-btn,
.cp-study-main-btn,
.cp-vac-main-btn {
  align-self: stretch;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 6px 8px;
}
/* Цифровые ряды (1-8 для Т, 1-6 для Э) — тоже на полную высоту карточки */
.cp-teh-grid,
.cp-exm-grid {
  align-self: stretch;
  align-items: stretch;
}
.cp-teh-grid .code-popover-btn,
.cp-exm-grid .code-popover-btn {
  padding: 8px 4px;
  display: flex;
  align-items: center;
  justify-content: center;
}
/* Контейнер с подписью «выбор кол-ва часов» + цифры — на полную высоту */
.cp-teh-grid-wrap { align-self: stretch; justify-content: center; }

/* События (основные) + Учёба в одной строке. Слева — компактная карточка с
   К/ВК (рамка как у учёбы), справа — блок учёбы сжатый на ~30%. Высоты обоих
   блоков одинаковы за счёт align-items: stretch и height:100% у кнопок. */
.cp-events-row {
  display: flex;
  gap: 8px;
  align-items: stretch;
  margin: 0 4px 6px;
}
.cp-events-col {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
}
.cp-events-col .code-popover-section { margin-top: 0; margin-bottom: 4px; }
.cp-events-card {
  flex: 1;
  display: flex;
  gap: 6px;
  padding: 8px;
  border: 1px solid rgba(46,102,99,0.25);
  border-radius: 8px;
  background: rgba(46,102,99,0.03);
  align-items: stretch;
  min-height: 0;
}
.cp-events-btn {
  flex: 1 1 0;
  min-width: 64px;
  padding: 8px 6px;
  border: 1px solid rgba(178,89,38,0.32);
  background: rgba(178,89,38,0.05);
  color: #8a4419;
  font-family: var(--font-mono);
  font-size: 15px;
  font-weight: 700;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.1s;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.cp-events-btn:hover { background: rgba(178,89,38,0.14); border-color: #B25926; }
.cp-events-btn.active { background: #B25926; color: #fff; border-color: #B25926; }
.cp-events-btn .lbl {
  display: block;
  font-family: var(--font-sans);
  font-size: 10px;
  font-weight: 500;
  color: var(--ink-2);
  margin-top: 2px;
  letter-spacing: 0.02em;
  text-transform: lowercase;
}
.cp-events-btn.active .lbl { color: rgba(255,255,255,0.9); }
.cp-events-study {
  flex: 1 1 70%;
  min-width: 0;
  display: flex;
  flex-direction: column;
}
.cp-events-study .cp-study-block { margin: 0; flex: 1; }
.cp-events-study .cp-study-form {
  grid-template-columns: 1fr 1fr auto;
}

/* Б-блок: красно-кирпичный (c-B), переопределяем поверх cp-study-main-btn. */
.cp-bol-main-btn,
.cp-study-main-btn.cp-bol-main-btn {
  border-color: rgba(178,58,47,0.45);
  color: #8e2c23;
}
.cp-bol-main-btn:hover { background: rgba(178,58,47,0.12); border-color: #B23A2F; }
.cp-bol-main-btn.active { background: #B23A2F; color: #fff; border-color: #B23A2F; }
.cp-bol-main-btn.active .lbl { color: rgba(255,255,255,0.9); }
.cp-vac-form {
  flex: 1;
  display: grid;
  grid-template-columns: 1fr 1fr auto;
  gap: 6px;
  align-items: end;
}
.cp-vac-label {
  display: flex;
  flex-direction: column;
  gap: 3px;
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--ink-2);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-weight: 500;
}
.cp-vac-input {
  padding: 5px 6px;
  border: 1px solid var(--hairline);
  border-radius: 4px;
  font-family: var(--font-mono);
  font-size: 11px;
  background: var(--surface);
  color: var(--ink);
  width: 100%;
  box-sizing: border-box;
}
.cp-vac-input:focus {
  border-color: #5C7A4A;
  outline: none;
}
.cp-vac-apply {
  padding: 6px 10px;
  background: #5C7A4A;
  color: #fff;
  border: 1px solid #5C7A4A;
  border-radius: 4px;
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 500;
  cursor: pointer;
  white-space: nowrap;
  align-self: end;
}
.cp-vac-apply:hover {
  background: #3d5031;
  border-color: #3d5031;
}

/* Цветные кнопки popover — те же цвета что в графике (codeClass) */
.code-popover-btn.cp-c-D { color: #1F4E66; border-color: rgba(31,78,102,0.28); background: rgba(31,78,102,0.06); }
.code-popover-btn.cp-c-D:hover { background: rgba(31,78,102,0.14); border-color: #1F4E66; }
.code-popover-btn.cp-c-D.active { background: #1F4E66; color: #fff; border-color: #1F4E66; }

.code-popover-btn.cp-c-N { color: #2F4A7A; border-color: rgba(63,90,138,0.30); background: rgba(63,90,138,0.07); }
.code-popover-btn.cp-c-N:hover { background: rgba(63,90,138,0.16); border-color: #2F4A7A; }
.code-popover-btn.cp-c-N.active { background: #2F4A7A; color: #fff; border-color: #2F4A7A; }

.code-popover-btn.cp-c-O { color: #3d5031; border-color: rgba(92,122,74,0.32); background: rgba(92,122,74,0.07); }
.code-popover-btn.cp-c-O:hover { background: rgba(92,122,74,0.16); border-color: #5C7A4A; }
.code-popover-btn.cp-c-O.active { background: #5C7A4A; color: #fff; border-color: #5C7A4A; }

.code-popover-btn.cp-c-K { color: #8a5022; border-color: rgba(179,106,46,0.30); background: rgba(179,106,46,0.06); }
.code-popover-btn.cp-c-K:hover { background: rgba(179,106,46,0.14); border-color: #B36A2E; }
.code-popover-btn.cp-c-K.active { background: #B36A2E; color: #fff; border-color: #B36A2E; }

.code-popover-btn.cp-c-B { color: #8e2c23; border-color: rgba(178,58,47,0.28); background: rgba(178,58,47,0.06); }
.code-popover-btn.cp-c-B:hover { background: rgba(178,58,47,0.14); border-color: #B23A2F; }
.code-popover-btn.cp-c-B.active { background: #B23A2F; color: #fff; border-color: #B23A2F; }

.code-popover-btn.cp-c-U { color: #4A3A78; border-color: rgba(74,58,120,0.28); background: rgba(74,58,120,0.06); }
.code-popover-btn.cp-c-U:hover { background: rgba(74,58,120,0.14); border-color: #4A3A78; }
.code-popover-btn.cp-c-U.active { background: #4A3A78; color: #fff; border-color: #4A3A78; }

.code-popover-btn.cp-c-T { color: #2E6663; border-color: rgba(46,102,99,0.28); background: rgba(46,102,99,0.06); }
.code-popover-btn.cp-c-T:hover { background: rgba(46,102,99,0.14); border-color: #2E6663; }
.code-popover-btn.cp-c-T.active { background: #2E6663; color: #fff; border-color: #2E6663; }

.code-popover-btn.cp-c-E { color: #735A3E; border-color: rgba(115,90,62,0.30); background: rgba(115,90,62,0.06); }
.code-popover-btn.cp-c-E:hover { background: rgba(115,90,62,0.16); border-color: #735A3E; }
.code-popover-btn.cp-c-E.active { background: #735A3E; color: #fff; border-color: #735A3E; }

.code-popover-btn.cp-c-P { color: #8e2c23; border-color: rgba(178,58,47,0.35); background: rgba(178,58,47,0.10); }
.code-popover-btn.cp-c-P:hover { background: rgba(178,58,47,0.20); border-color: #B23A2F; }
.code-popover-btn.cp-c-P.active { background: #B23A2F; color: #fff; border-color: #B23A2F; }

/* Цветные кнопки перевода на смены 1..5 */
.code-popover-btn.cp-shift-1 { border-color: #4A3A78; color: #4A3A78; background: rgba(74,58,120,0.06); }
.code-popover-btn.cp-shift-2 { border-color: #1F4E66; color: #1F4E66; background: rgba(31,78,102,0.06); }
.code-popover-btn.cp-shift-3 { border-color: #2E6663; color: #2E6663; background: rgba(46,102,99,0.06); }
.code-popover-btn.cp-shift-4 { border-color: #B36A2E; color: #B36A2E; background: rgba(179,106,46,0.06); }
.code-popover-btn.cp-shift-5 { border-color: #735A3E; color: #735A3E; background: rgba(115,90,62,0.08); }
.code-popover-btn.cp-shift-1.active { background: #4A3A78; color: #fff; }
.code-popover-btn.cp-shift-2.active { background: #1F4E66; color: #fff; }
.code-popover-btn.cp-shift-3.active { background: #2E6663; color: #fff; }
.code-popover-btn.cp-shift-4.active { background: #B36A2E; color: #fff; }
.code-popover-btn.cp-shift-5.active { background: #735A3E; color: #fff; }
.code-popover-btn.cp-unmark { color: var(--ink-3); border-style: dashed; }
.code-popover-btn.cp-unmark:hover { color: var(--hue-vlek); border-color: var(--hue-vlek); border-style: solid; }

/* ─── Drawer (карточка сотрудника справа) ──────────────────────── */
.drawer-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(20,23,26,0.32);
  z-index: 100;
  display: flex;
  justify-content: flex-end;
  animation: bd-in 0.18s ease;
}
.drawer {
  width: 480px;
  height: 100%;
  background: var(--surface);
  border-left: 1px solid var(--hairline);
  display: flex;
  flex-direction: column;
  animation: drawer-in 0.22s cubic-bezier(0.2,0.8,0.2,1);
}
@keyframes drawer-in { from { transform: translateX(100%); } to { transform: translateX(0); } }
.drawer-head {
  padding: 14px 20px;
  border-bottom: 1px solid var(--hairline);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.drawer-body {
  overflow-y: auto;
  flex: 1;
  padding: 20px;
}
.drawer-close {
  background: transparent;
  border: none;
  cursor: pointer;
  color: var(--ink-2);
  padding: 4px;
  border-radius: 6px;
  font-size: 18px;
  line-height: 1;
}
.drawer-close:hover { background: var(--surface-2); color: var(--ink); }

/* Модалка добавления/редактирования сотрудника */
.modal-backdrop {
  position: fixed; inset: 0; background: rgba(20,23,26,0.42);
  z-index: 200; display: flex; align-items: center; justify-content: center;
  animation: bd-in 0.18s ease;
}
.modal {
  width: 540px; max-width: 92vw; max-height: 90vh;
  background: var(--surface); border: 1px solid var(--hairline); border-radius: 16px;
  box-shadow: 0 24px 60px rgba(20,23,26,0.30);
  display: flex; flex-direction: column; overflow: hidden;
  animation: drawer-in 0.22s cubic-bezier(0.2,0.8,0.2,1);
}
.modal-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 20px; border-bottom: 1px solid var(--hairline);
}
.modal-body { padding: 18px 20px 20px; overflow-y: auto; }

.form-grid { display: flex; flex-direction: column; gap: 10px; margin-bottom: 18px; }
.form-row { display: grid; grid-template-columns: 140px 1fr; align-items: center; gap: 12px; }
.form-lbl { font-family: var(--font-sans); font-size: 12.5px; color: var(--ink-3); }
.form-row input, .form-row select {
  padding: 8px 10px;
  font-family: var(--font-sans); font-size: 13px; color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--hairline); border-radius: 8px;
  outline: none; transition: border-color 0.12s;
}
.form-row input:focus, .form-row select:focus { border-color: var(--ink); }

/* Табельный № в шапке карточки — справа от ФИО/должности/службы */
.profile-tabnum {
  display: flex; flex-direction: column; align-items: flex-end; gap: 4px;
  flex: 0 0 auto; min-width: 120px;
}
.profile-tabnum-lbl {
  font-family: var(--font-sans); font-size: 11px; color: var(--ink-4);
  letter-spacing: 0.02em; text-transform: uppercase;
}
.profile-tabnum #empTabNum {
  width: 100px;
  padding: 6px 10px;
  font-family: var(--font-mono); font-size: 13px;
  text-align: center;
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--hairline); border-radius: 8px;
  outline: none; transition: border-color 0.12s;
}
.profile-tabnum #empTabNum:focus { border-color: var(--ink); }

/* Объединённая строка «Работает с — по» */
.work-period-row {
  display: flex; align-items: center; gap: 6px;
  flex-wrap: nowrap; min-width: 0;
}
.work-period-row input[type="date"] {
  flex: 1 1 0; min-width: 0; width: 100%;
  padding: 6px 8px; font-size: 12.5px;
}
.work-period-lbl {
  font-family: var(--font-sans); font-size: 12.5px; color: var(--ink-3);
  flex: 0 0 auto;
}

/* Дата с подсказкой «по сей день» внутри пустого input */
.date-with-hint {
  position: relative; flex: 1 1 0; min-width: 0; display: block;
}
.date-with-hint .date-hint-inside {
  position: absolute; left: 10px; top: 50%; transform: translateY(-50%);
  font-family: var(--font-sans); font-size: 12px; color: var(--ink-4);
  pointer-events: none;
  background: var(--surface);
  padding: 0 2px;
}
.date-with-hint.has-value .date-hint-inside { display: none; }

.staj-value {
  font-family: var(--font-mono); font-size: 12.5px; color: var(--ink-2);
}

.modal-actions {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; padding-top: 12px; border-top: 1px solid var(--hairline);
}
.btn-danger {
  border-color: var(--hue-vlek); color: var(--hue-vlek);
  background: rgba(178,58,47,0.06);
  font-size: 12px; padding: 7px 12px;
}
.btn-danger:hover { background: var(--hue-vlek); color: #fff; border-color: var(--hue-vlek); }
.btn-hide {
  border-color: var(--ink-3); color: var(--ink-2);
  font-size: 12px; padding: 7px 12px;
  display: inline-flex; align-items: center; gap: 6px;
}
.btn-hide:hover { background: var(--ink); color: #fff; border-color: var(--ink); }
.btn-delete {
  border-color: var(--hue-vlek); color: var(--hue-vlek);
  background: transparent;
  font-size: 12px; padding: 7px 12px;
  display: inline-flex; align-items: center; gap: 6px;
}
.btn-delete:hover { background: var(--hue-vlek); color: #fff; border-color: var(--hue-vlek); }

/* Универсальный диалог подтверждения / уведомления (поверх всего) */
.dialog-backdrop {
  position: fixed; inset: 0; background: rgba(20,23,26,0.45);
  z-index: 300; display: flex; align-items: center; justify-content: center;
  animation: bd-in 0.16s ease;
  font-family: var(--font-sans);
}
.dialog {
  width: 440px; max-width: 92vw;
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: 16px;
  box-shadow: 0 24px 60px rgba(20,23,26,0.30);
  overflow: hidden;
  animation: drawer-in 0.20s cubic-bezier(0.2,0.8,0.2,1);
}
.dialog-body { padding: 22px 24px 16px; }
.dialog-title {
  font-family: var(--font-serif);
  font-size: 20px;
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: -0.005em;
  color: var(--ink);
  margin-bottom: 8px;
}
.dialog-text {
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--ink-2);
}
.dialog-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  padding: 14px 20px 16px;
  background: var(--surface-2);
  border-top: 1px solid var(--hairline);
}
.dialog-actions .btn { padding: 8px 16px; font-size: 13px; }
/* Тон опасности — красный заголовок */
.dialog.dialog-danger .dialog-title { color: var(--hue-vlek); }

/* Блок «Норма часов» в модалке сотрудника */
.norms-block {
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px dashed var(--hairline);
}
.norms-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
}
.src-tag {
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 2px 8px 3px;
  border-radius: 999px;
}
.src-tag.src-manual  { background: rgba(46,102,99,0.10); color: var(--hue-courses); }
.src-tag.src-catalog { background: rgba(31,78,102,0.10); color: var(--hue-doc); }
.src-tag.src-xlsx    { background: var(--surface-2);     color: var(--ink-3); }
.src-tag.src-empty   { background: rgba(179,106,46,0.10); color: var(--hue-trip); }
.src-tag.src-partial { background: rgba(179,106,46,0.18); color: var(--hue-trip); font-weight: 600; }

.norms-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  gap: 8px;
  margin-bottom: 10px;
}
.norms-cell {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.norms-cell .form-lbl { font-size: 11px; }
.norms-cell input {
  padding: 7px 9px;
  font-family: var(--font-mono); font-size: 13px; color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--hairline); border-radius: 8px;
  outline: none; transition: border-color 0.12s;
  text-align: center;
}
.norms-cell input:focus { border-color: var(--ink); }
.norms-copy-prev {
  font-size: 11.5px;
  color: var(--ink-3);
  background: var(--surface-2);
  border: 1px dashed var(--hairline);
  padding: 6px 10px;
  border-radius: 6px;
  cursor: pointer;
  width: 100%;
  text-align: left;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.norms-copy-prev:hover { color: var(--ink); border-color: var(--ink-3); border-style: solid; }

/* «Требует ввода» в карточке Σ */
.tc-row.tc-empty-norm { background: rgba(179,106,46,0.06); margin: 0 -4px; padding: 4px 4px; border-radius: 4px; }
.tc-row.tc-partial-norm {
  background: rgba(179,106,46,0.12);
  margin: 0 -4px;
  padding: 6px 6px;
  border-radius: 4px;
  border-left: 3px dashed var(--hue-trip);
}
.tc-cta {
  color: var(--hue-trip);
  font-weight: 600;
  text-decoration: none;
  border-bottom: 1px dashed var(--hue-trip);
}
.tc-cta:hover { color: var(--ink); border-color: var(--ink); }
.tc-cta-orange { color: var(--hue-trip); font-weight: 600; }

/* ─── Диалог редактирования БРВ — 2 поля как в приказе ─── */
.brv-edit-grid {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 14px;
  align-items: end;
  margin: 8px 0 4px;
}
.brv-edit-grid label {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.brv-edit-grid label span {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.brv-edit-grid input {
  padding: 12px 14px;
  font-family: var(--font-serif);
  font-size: 28px;
  text-align: center;
  border: 1px solid var(--hairline);
  border-radius: 10px;
  background: var(--surface);
  color: var(--ink);
}
.brv-edit-grid input:focus { outline: none; border-color: var(--hue-doc); }
.brv-edit-sep {
  font-family: var(--font-serif);
  font-size: 28px;
  color: var(--ink-4);
  padding-bottom: 12px;
  align-self: end;
}

/* ─── БРВ-таблица в Справочнике ─── */
.brv-table th {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-3);
  text-align: center;
  padding: 10px 12px;
  background: var(--surface-2);
  border-bottom: 1px solid var(--hairline);
}
.brv-table th.brv-main {
  background: rgba(31,78,102,0.08);
  color: var(--hue-doc);
  font-weight: 700;
}
.brv-table td {
  border-bottom: 1px solid var(--hairline);
  padding: 8px 12px;
  text-align: center;
  vertical-align: middle;
  font-family: var(--font-mono);
}
.brv-table .brv-month {
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 500;
  text-align: left;
  color: var(--ink);
  padding-left: 16px;
  background: var(--surface);
}
.brv-table tr.brv-half-row td {
  background: var(--surface-3);
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 14px;
  color: var(--ink-2);
  text-align: left;
  padding: 8px 16px;
}
.brv-table tr.brv-sum td {
  background: rgba(20,23,26,0.04);
  font-weight: 600;
}
.brv-table tr.brv-sum .brv-month { font-style: italic; color: var(--ink-2); }
.brv-table .brv-cell {
  cursor: pointer;
  transition: background 0.12s;
}
.brv-table .brv-cell:hover {
  background: rgba(46,102,99,0.08);
  box-shadow: inset 0 0 0 1px var(--hue-courses);
}
.brv-table .brv-cell.brv-main {
  background: rgba(31,78,102,0.04);
  font-weight: 600;
}
.brv-table .brv-cell.brv-main:hover { background: rgba(31,78,102,0.10); box-shadow: inset 0 0 0 1px var(--hue-doc); }
.brv-table .brv-d {
  font-size: 14px;
  line-height: 1.1;
  color: var(--ink);
}
.brv-table .brv-h {
  font-size: 11.5px;
  line-height: 1.1;
  color: var(--ink-2);
  margin-top: 2px;
}
.brv-table .brv-d small, .brv-table .brv-h small {
  font-family: var(--font-sans);
  font-size: 8.5px;
  color: var(--ink-3);
  margin-left: 3px;
  letter-spacing: 0.04em;
}

/* ─── Граничные столбцы из соседнего года (для перехода ночной 31.12 → 1.1) ─── */
.schedule-table thead th.col-outer-year {
  background: var(--surface-2);
  color: var(--ink-3);
  border-left: 1px dashed var(--hairline);
  border-right: 1px dashed var(--hairline);
}
.schedule-table tbody td.col-outer-year {
  background-color: rgba(0,0,0,0.018);
  border-left: 1px dashed var(--hairline);
  border-right: 1px dashed var(--hairline);
  opacity: 0.85;
}
.schedule-table tbody td.col-outer-year .cell-code {
  opacity: 0.75;
}

/* ─── Маркер «требует ручного БРВ» (частичный месяц) в строке графика ─── */
.schedule-table tbody tr.emp-row.needs-manual-brv td.col-fio {
  border-left: 3px dashed var(--hue-trip);
}
.brv-flag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 1px 6px;
  border-radius: 999px;
  background: rgba(179,106,46,0.12);
  color: var(--hue-trip);
  margin-left: 6px;
  font-weight: 600;
}

.profile-head {
  display: flex;
  gap: 14px;
  margin-bottom: 18px;
}
.profile-head .name {
  font-family: var(--font-serif);
  font-size: 22px;
  line-height: 1.15;
}
.profile-head .meta {
  font-size: 12.5px;
  color: var(--ink-2);
  margin-top: 2px;
}
.profile-head .id {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink-3);
  margin-top: 4px;
}

.totals-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-bottom: 16px;
}
.totals-cell {
  background: var(--surface-2);
  border-radius: 8px;
  padding: 10px 12px;
}
.totals-cell .lbl {
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 4px;
}
.totals-cell .val {
  font-family: var(--font-serif);
  font-size: 20px;
  line-height: 1;
}
.totals-cell .sub {
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: var(--ink-3);
  margin-top: 4px;
}
.totals-cell.urgent .val { color: var(--hue-vlek); }
.totals-cell.accent .val { color: var(--hue-courses); }

/* ─── KPI ──────────────────────────────────────────────────────── */
.kpi-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-bottom: 22px;
}
.kpi {
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: 14px;
  padding: 16px;
}
.kpi .lbl {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 12px;
}
.kpi .num {
  font-family: var(--font-serif);
  font-size: 40px;
  line-height: 1;
  letter-spacing: -0.015em;
}
.kpi .sub {
  font-size: 11.5px;
  color: var(--ink-3);
  margin-top: 6px;
}
.kpi.urgent .num { color: var(--hue-vlek); }
.kpi.accent .num { color: var(--hue-courses); }

/* ─── Табель (Excel-like) ──────────────────────────────────────── */
.tabel-wrap {
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: var(--radius);
  overflow: auto;
}
.tabel-table {
  border-collapse: collapse;
  font-family: var(--font-mono);
  font-size: 10.5px;
}
.tabel-table th, .tabel-table td {
  border: 1px solid var(--hairline);
  padding: 3px 4px;
  text-align: center;
  white-space: nowrap;
  vertical-align: middle;
  background: var(--surface);
  min-width: 26px;
}
.tabel-table th {
  background: var(--surface-2);
  font-weight: 500;
  font-size: 10px;
  color: var(--ink-3);
  letter-spacing: 0.04em;
}
.tabel-table td.fio {
  font-family: var(--font-sans);
  text-align: left;
  font-size: 11.5px;
  padding: 4px 8px;
  font-weight: 500;
  min-width: 180px;
  position: sticky;
  left: 0;
  background: var(--surface);
}
.tabel-table td.row-ovd, .tabel-table td.row-night { color: var(--ink-2); }
.tabel-table tr.row-night-row td { background: rgba(63,90,138,0.04); }
.tabel-table tr.row-night-row td.fio { background: rgba(63,90,138,0.04); }

/* Шапка табеля — Сб/Вс, праздники, сегодня */
.tabel-table thead th .wd {
  font-family: var(--font-mono);
  font-size: 8.5px;
  color: var(--ink-4);
  font-weight: 400;
  margin-top: 1px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.tabel-table thead th.weekend { background: rgba(20,23,26,0.025); color: var(--ink-4); }
.tabel-table thead th.holiday { background: rgba(178,58,47,0.04); color: #8e2c23; }
.tabel-table thead th.holiday-religious { background: rgba(179,106,46,0.05); color: #8a5022; }
.tabel-table thead th.today {
  background: rgba(46,102,99,0.10);
  color: var(--hue-courses);
  font-weight: 700;
  border-bottom: 2px solid var(--hue-courses);
}
.tabel-table thead th.today .wd { color: var(--hue-courses) !important; font-weight: 600; }
.tabel-table thead th.today::after {
  content: '';
  display: block;
  width: 4px;
  height: 4px;
  border-radius: 999px;
  background: var(--hue-vlek);
  margin: 2px auto 0;
}
.tabel-table tbody td.weekend { background: rgba(20,23,26,0.015); }
.tabel-table tbody td.holiday { background: rgba(178,58,47,0.025); }
.tabel-table tbody td.holiday-religious { background: rgba(179,106,46,0.03); }
.tabel-table tbody td.today { background: rgba(46,102,99,0.06); }
.tabel-table tbody tr.row-night-row td.today { background: rgba(46,102,99,0.10); }

/* ФИО колонка */
.tabel-table td.fio .pos {
  font-size: 9.5px;
  color: var(--ink-3);
  font-weight: 400;
  margin-top: 1px;
}

/* Σ ОВД колонка справа */
.tabel-table th.tot, .tabel-table td.tot {
  min-width: 88px;
  background: var(--surface-2);
  position: sticky;
  right: 0;
  z-index: 1;
}
.tabel-table td.tot .tot-h {
  font-family: var(--font-serif);
  font-size: 18px;
  line-height: 1;
}
.tabel-table td.tot .tot-s {
  font-family: var(--font-mono);
  font-size: 8.5px;
  color: var(--ink-3);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-top: 3px;
}
.tabel-table td.tot .tot-norm {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--ink-3);
  margin-top: 4px;
}
.tabel-table td.tot .tot-d {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  margin-top: 2px;
}
.tabel-table thead th.tot {
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* Плотность как в Excel */
.tabel-table td, .tabel-table th { font-size: 10px; padding: 2px 3px; min-width: 22px; }
.tabel-table td.fio { min-width: 170px; max-width: 200px; padding: 4px 8px; font-size: 11.5px; }
.tabel-table .cell-code { font-size: 10px; padding: 1px 3px; min-width: 18px; }

/* ─── Справочник ───────────────────────────────────────────────── */
.dict-table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--font-sans);
}
.dict-table th, .dict-table td {
  padding: 10px 12px;
  border-bottom: 1px solid var(--hairline);
  text-align: left;
  font-size: 13px;
}
.dict-table th {
  background: var(--surface-2);
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--ink-3);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.dict-table td.num-col { font-family: var(--font-mono); text-align: center; }

/* small utility */
.empty {
  padding: 40px 0;
  text-align: center;
  color: var(--ink-3);
  font-size: 13px;
}
.hidden { display: none !important; }
.row-spacer { height: 22px; }

/* ─── Балансы полугодий (renderTotals) ─────────────────────────────────── */
.half-balance-table { font-size: 12.5px; }
.half-balance-table th,
.half-balance-table td { padding: 8px 10px; }
.half-balance-table thead tr:first-child th { border-bottom: 1px solid var(--hairline); }
.half-balance-table .svc-pip {
  display: inline-block;
  width: 4px;
  height: 14px;
  vertical-align: middle;
  margin-right: 8px;
  border-radius: 2px;
  min-height: 0;
  align-self: auto;
}
.half-balance-table td.half-su {
  font-family: var(--font-mono);
  font-weight: 500;
}
/* С/У: значимое (±15..40) — мягкая подсветка; большое (±40+) — насыщенная */
.half-balance-table td.half-su.su-pos-mid { color: var(--hue-courses); background: rgba(46,102,99,0.06); }
.half-balance-table td.half-su.su-pos-big { color: var(--hue-courses); background: rgba(46,102,99,0.14); font-weight: 700; }
.half-balance-table td.half-su.su-neg-mid { color: var(--hue-vlek);    background: rgba(178,58,47,0.06); }
.half-balance-table td.half-su.su-neg-big { color: var(--hue-vlek);    background: rgba(178,58,47,0.14); font-weight: 700; }