/* ── Office Planner v5 — Base Stylesheet ──────────────────────────────────────
 * Visual identity is identical to calculator_v3.22.
 * Source of truth: calculator_v3.22/web/static/style.css
 * ─────────────────────────────────────────────────────────────────────────── */

/* ── CSS Variables (Design Tokens) ─────────────────────────────────────────── */
:root {
  /* Brand / Primary */
  --color-primary: #1a3a6b;
  --color-primary-hover: #14305a;

  /* Page backgrounds */
  --color-bg: #f0f2f5;
  --color-surface: #ffffff;

  /* Text */
  --color-text: #1a1a2e;
  --color-text-muted: #607d8b;
  --color-text-hint: #455a64;

  /* Borders */
  --color-border: #e0e0e0;
  --color-border-input: #cfd8dc;
  --color-border-blue: #b3d1f0;

  /* Semantic — Success */
  --color-success: #2e7d32;
  --color-success-hover: #1b5e20;
  --color-success-bg: #e8f5e9;
  --color-success-border: #c8e6c9;

  /* Semantic — Danger */
  --color-danger: #c62828;
  --color-danger-hover: #a31515;
  --color-danger-bg: #ffebee;

  /* Semantic — Warning */
  --color-warning-bg: #fff9c4;
  --color-warning-text: #f57f17;

  /* Semantic — Info */
  --color-info-bg: #e3f2fd;
  --color-info-text: #1565c0;

  /* Neutral / UI chrome */
  --color-neutral: #eceff1;
  --color-neutral-dark: #cfd8dc;
  --color-disabled: #b0bec5;

  /* Terminal / Log panel */
  --color-terminal-bg: #1e1e2e;
  --color-terminal-text: #cdd6f4;

  /* Typography */
  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  --font-mono: "Consolas", "Courier New", monospace;
  --font-size-base: 14px;

  /* Radius */
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 8px;
  --radius-xl: 10px;

  /* Shadow */
  --shadow-card: 0 1px 4px rgba(0, 0, 0, .10);
  --shadow-elevated: 0 2px 12px rgba(0, 0, 0, .12);
  --shadow-header: 0 2px 8px rgba(0, 0, 0, .25);

  /* Spacing scale (UX-7) — единая шкала кратная 8 px.
     Использовать в НОВОМ CSS вместо «магических» 5/7/10/14/18/20 px.
     См. design_guidelines.md §4. */
  --space-xs: 4px;   /* мини: внутри плотных пилюль, между чипом и числом */
  --space-sm: 8px;   /* стандарт: между бейджем и текстом, gap у flex-row */
  --space-md: 16px;  /* среднее: между связанными секциями внутри карточки */
  --space-lg: 24px;  /* большое: между блоками, padding внутри карточек */
  --space-xl: 32px;  /* очень большое: между разделами страницы */
  --space-2xl: 48px; /* экстра: отступы от шапки/футера */
}

/* ── Reset & Base ───────────────────────────────────────────────────────────── */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: var(--font-sans);
  font-size: var(--font-size-base);
  background: var(--color-bg);
  color: var(--color-text);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  overflow-x: hidden;
}

/* ── Header ─────────────────────────────────────────────────────────────────── */
header {
  background: var(--color-primary);
  color: #fff;
  padding: 14px 24px;
  box-shadow: var(--shadow-header);
}

.header-inner {
  display: flex;
  align-items: baseline;
  gap: 16px;
}

.logo {
  font-size: 17px;
  font-weight: 700;
  letter-spacing: .3px;
}

.subtitle {
  font-size: 12px;
  opacity: .75;
}

/* Глобальный индикатор «Контроль данных» в шапке — виден на всех вкладках */
.global-cc-indicator {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  /* Высота и паддинги синхронизированы с .account-button — см. design_guidelines.md §1.4 */
  height: 36px;
  padding: 0 12px;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 18px;
  text-decoration: none;
  color: #fff;
  font-size: 13px;
  cursor: pointer;
  transition: background .15s, border-color .15s;
}
.global-cc-indicator.hidden { display: none; }
.global-cc-indicator:hover {
  background: rgba(255, 255, 255, 0.22);
  border-color: rgba(255, 255, 255, 0.35);
}
.global-cc-indicator.has-warning {
  background: rgba(251, 191, 36, 0.22);
  border-color: rgba(251, 191, 36, 0.6);
}
.global-cc-indicator.has-error {
  background: rgba(239, 68, 68, 0.28);
  border-color: rgba(239, 68, 68, 0.65);
  animation: g-cc-pulse 2.5s ease-in-out infinite;
}
@keyframes g-cc-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0); }
  50%      { box-shadow: 0 0 0 4px rgba(239, 68, 68, 0.25); }
}
.g-cc-label { font-size: 13px; }
.g-cc-badges { display: inline-flex; gap: 3px; }

/* ── Account-меню в шапке (UX-5 / design_guidelines.md §8) ──────────────── */
.account-menu {
  position: relative;
  /* Сократить расстояние до соседнего бейджа «Контроль данных»:
     header-inner gap = 16px, поэтому -10px → итоговый промежуток ~6px. */
  margin-left: -10px;
}
/* Когда cc-indicator скрыт (display:none → вне layout, его margin-left:auto
   не работает) — account-menu сам уезжает вправо, иначе он бы свалился
   в левую часть шапки. */
.global-cc-indicator.hidden + .account-menu {
  margin-left: auto;
}
.account-menu.hidden { display: none; }

.account-button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  /* Высота и паддинги синхронизированы с .global-cc-indicator */
  height: 36px;
  padding: 0 12px 0 4px;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 18px;
  color: #fff;
  font-size: 13px;
  cursor: pointer;
  transition: background .15s, border-color .15s;
}
.account-button:hover {
  background: rgba(255, 255, 255, 0.22);
  border-color: rgba(255, 255, 255, 0.35);
}
.account-menu.open .account-button {
  background: rgba(255, 255, 255, 0.22);
}

.account-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: linear-gradient(135deg, #fef3c7, #fde68a);
  color: #92400e;
  font-weight: 700;
  font-size: 12px;
  text-transform: uppercase;
}
.account-name {
  max-width: 160px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.account-chevron {
  font-size: 9px;
  opacity: 0.7;
  margin-left: 2px;
}

.account-dropdown {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  min-width: 240px;
  background: #fff;
  border: 1px solid var(--color-border, #e5e7eb);
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
  padding: 6px;
  z-index: 200;
  color: var(--color-text, #1f2937);
}
.account-dropdown.hidden { display: none; }

.account-info {
  padding: 10px 12px 12px;
  border-bottom: 1px solid var(--color-border, #e5e7eb);
  margin-bottom: 4px;
}
.account-info-name {
  font-weight: 600;
  font-size: 13px;
  color: var(--color-text, #1f2937);
}
.account-info-role {
  font-size: 11px;
  color: var(--color-text-muted, #6b7280);
  margin-top: 2px;
}

.account-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 8px 12px;
  background: none;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  font-size: 13px;
  text-align: left;
  color: inherit;
}
.account-item:hover {
  background: #f3f4f6;
}
.account-item-danger {
  color: #b91c1c;
}
.account-item-danger:hover {
  background: #fef2f2;
}
.account-sep {
  height: 1px;
  background: var(--color-border, #e5e7eb);
  margin: 4px 8px;
}
.g-cc-b {
  display: inline-block;
  padding: 1px 6px;
  border-radius: 8px;
  font-size: 11px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  background: rgba(0, 0, 0, 0.18);
}
.g-cc-b-error   { background: rgba(220, 38, 38, 0.85); color: #fff; }
.g-cc-b-warning { background: rgba(217, 119, 6, 0.85); color: #fff; }
.g-cc-b-ok      { background: rgba(16, 185, 129, 0.75); color: #fff; }

.header-link {
  color: rgba(255, 255, 255, .7);
  font-size: 12px;
  text-decoration: none;
  margin-left: auto;
}

.header-link:hover {
  color: #fff;
  text-decoration: underline;
}

.user-badge {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-left: auto;
  font-size: 12px;
  color: rgba(255, 255, 255, .85);
  white-space: nowrap;
}

.header-link+.user-badge {
  margin-left: 0;
}

.user-badge .user-name {
  font-weight: 500;
}

.user-badge .user-role {
  opacity: .7;
  font-size: 11px;
}

/* ── Main layout ────────────────────────────────────────────────────────────── */
main {
  flex: 1;
  width: 100%;
  margin: 20px 0;
  padding: 0 2rem;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

/* ── Cards ──────────────────────────────────────────────────────────────────── */
.stage-card {
  background: var(--color-surface);
  border-radius: var(--radius-xl);
  padding: 24px 28px;
  box-shadow: var(--shadow-card);
}

.stage-card h2 {
  font-size: 16px;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
}

.badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--color-primary);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  flex-shrink: 0;
}

.hint {
  color: #555;
  font-size: 13px;
  margin-bottom: 16px;
  line-height: 1.5;
}

.hint code {
  background: var(--color-bg);
  border-radius: var(--radius-sm);
  padding: 1px 5px;
  font-family: var(--font-mono);
  font-size: 12px;
}

/* ── Form fields ────────────────────────────────────────────────────────────── */
.field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 160px;
}

.field label {
  font-size: 12px;
  font-weight: 600;
  color: var(--color-text-hint);
  text-transform: uppercase;
  letter-spacing: .4px;
}

.field select,
.field input[type="text"],
.field input[type="password"],
.field input[type="email"],
.field input[type="number"] {
  border: 1px solid var(--color-border-input);
  border-radius: var(--radius-md);
  padding: 7px 10px;
  font-size: 13px;
  font-family: var(--font-sans);
  background: #fafafa;
  color: var(--color-text);
  outline: none;
  transition: border-color .15s;
}

.field select:focus,
.field input:focus {
  border-color: var(--color-primary);
  background: #fff;
}

/* ── Buttons ────────────────────────────────────────────────────────────────── */
.btn-primary,
.btn-secondary,
.btn-danger,
.btn-confirm,
.btn-sm {
  border: none;
  border-radius: var(--radius-md);
  padding: 8px 20px;
  font-size: 13px;
  font-weight: 600;
  font-family: var(--font-sans);
  cursor: pointer;
  transition: opacity .15s, background .15s;
}

.btn-primary {
  background: var(--color-primary);
  color: #fff;
}

.btn-primary:hover:not(:disabled) {
  background: var(--color-primary-hover);
}

.btn-primary:disabled {
  background: var(--color-disabled);
  cursor: not-allowed;
}

.btn-secondary {
  background: var(--color-surface);
  color: var(--color-primary);
  border: 1.5px solid var(--color-primary);
}

.btn-secondary:hover:not(:disabled) {
  background: #f0f4fb;
}

.btn-secondary:disabled {
  opacity: .45;
  cursor: not-allowed;
}

.btn-danger {
  background: var(--color-danger);
  color: #fff;
}

.btn-danger:hover:not(:disabled) {
  background: var(--color-danger-hover);
}

.btn-danger:disabled {
  background: #ef9a9a;
  cursor: not-allowed;
}

.btn-confirm {
  background: var(--color-success);
  color: #fff;
}

.btn-confirm:hover:not(:disabled) {
  background: var(--color-success-hover);
}

.btn-confirm:disabled {
  background: #a5d6a7;
  cursor: not-allowed;
}

.btn-sm {
  background: var(--color-neutral);
  color: var(--color-text-hint);
  padding: 4px 10px;
  font-size: 12px;
}

.btn-sm:hover {
  background: var(--color-neutral-dark);
}

.btn-link {
  border: none;
  background: none;
  color: var(--color-primary);
  cursor: pointer;
  font-size: 13px;
  font-family: var(--font-sans);
  padding: 0 4px;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.btn-link:hover {
  color: #0d2247;
}

.btn-clear {
  display: inline-block;
  margin-bottom: 16px;
  border: none;
  background: none;
  color: var(--color-danger);
  font-size: 12px;
  font-weight: 600;
  font-family: var(--font-sans);
  cursor: pointer;
  padding: 2px 0;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.btn-clear:hover {
  color: var(--color-danger-hover);
}

.btn-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}

/* ── Status chips ───────────────────────────────────────────────────────────── */
.status-chip {
  font-size: 12px;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: 20px;
  display: none;
}

.status-chip.pending {
  display: inline-block;
  background: var(--color-warning-bg);
  color: var(--color-warning-text);
}

.status-chip.running {
  display: inline-block;
  background: var(--color-info-bg);
  color: var(--color-info-text);
}

.status-chip.done {
  display: inline-block;
  background: var(--color-success-bg);
  color: var(--color-success);
}

.status-chip.error {
  display: inline-block;
  background: var(--color-danger-bg);
  color: var(--color-danger);
}

.status-chip.stopped {
  display: inline-block;
  background: #fff3e0;
  color: #e65100;
}

/* ── Log / terminal panel ───────────────────────────────────────────────────── */
.log-wrap {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  margin-bottom: 16px;
}

.log-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 12px;
  background: #f5f5f5;
  border-bottom: 1px solid var(--color-border);
  font-size: 12px;
  color: var(--color-text-muted);
  font-weight: 600;
}

.log {
  display: block;
  width: 100%;
  height: 220px;
  padding: 10px 14px;
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 1.55;
  background: var(--color-terminal-bg);
  color: var(--color-terminal-text);
  border: none;
  resize: vertical;
  overflow-y: auto;
}

/* ── Data table ─────────────────────────────────────────────────────────────── */
.data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

.data-table th {
  text-align: left;
  font-size: 11px;
  color: var(--color-text-muted);
  font-weight: 600;
  padding: 6px 10px;
  border-bottom: 2px solid var(--color-border);
  text-transform: uppercase;
  letter-spacing: .4px;
  background: #f5f5f5;
}

/* Более контрастные заголовки для модалки управления доступом */
#modal-access-control thead th {
  color: #555555 !important;
  font-weight: 600 !important;
}

.data-table td {
  padding: 7px 10px;
  border-bottom: 1px solid #f0f0f0;
  vertical-align: middle;
  color: var(--color-text);
}

/* Hover для строк data-table (FIX-3 2026-06-20).
   Чуть заметнее, чем было (#eef4fa), но всё ещё спокойно — глаз не устаёт.
   Cursor: pointer — везде по дефолту, потому что в Сотрудниках/Задачах/
   Дедлайнах строки кликабельны; на нечасто-некликабельной таблице
   можно переопределить .data-table.no-row-click. */
.data-table tbody tr {
  transition: background 0.1s ease;
  cursor: pointer;
}
.data-table tbody tr:hover td {
  background: var(--color-hover-row, #e7eef7);
}
/* Активная (выбранная) строка — устойчивая подсветка, переопределяет hover */
.data-table tbody tr.row-selected td,
.data-table tbody tr.row-selected:hover td {
  background: #dbe5f3;
}
/* Если таблица сугубо информационная, без клика — потушить курсор */
.data-table.no-row-click tbody tr {
  cursor: default;
}

/* ── Toolbar layout ─────────────────────────────────────────────────────────── */
.toolbar-flex {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 15px;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}

.toolbar-actions,
.toolbar-filters {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

/* Минимальная ширина поля поиска по UX-стандарту: 240 px достаточно для
   любого нашего placeholder'а, включая «Поиск задач, клиента, исполнителя…».
   См. design_guidelines.md §7.1. */
.search-input {
  min-width: 240px;
}

.toolbar-divider {
  width: 1px;
  align-self: stretch;
  background: var(--color-border);
  margin: 0 2px;
}

/* ── Filter controls ─────────────────────────────────────────────────────────── */
.filter-select {
  padding: 7px 10px;
  border: 1px solid var(--color-border-input);
  border-radius: var(--radius-md);
  font-size: 13px;
  font-family: var(--font-sans);
  background: #fafafa;
  color: var(--color-text);
  outline: none;
  min-width: 140px;
  cursor: pointer;
}

.filter-select:focus {
  border-color: var(--color-primary);
  background: #fff;
}

.checkbox-label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  cursor: pointer;
  color: var(--color-text-muted);
  white-space: nowrap;
  user-select: none;
}

.checkbox-label input[type="checkbox"] {
  cursor: pointer;
}

/* ── Employee table: fixed layout, no horizontal scroll ──────────────────────── */
#employees-container {
  overflow-x: hidden;
  overflow-y: auto;
  max-height: calc(100vh - 280px);
  width: 100%;
}

#employees-container .data-table {
  table-layout: fixed;
}

/* Simple text cells: clip with ellipsis */
#employees-container .data-table td {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Multi-line cells (contacts, status badges): allow normal flow */
#employees-container .data-table td.col-contacts,
#employees-container .data-table td.col-status {
  white-space: normal;
  overflow: visible;
}

/* Column percentage widths (5 cols, total 100%).
   Перебалансировано после удаления имён руководителей из СТАТУС:
   контактам и ФИО даём больше места, статусу — меньше (только бейджи). */
.col-name {
  width: 26%;
}

.col-dept {
  width: 14%;
}

.col-cat {
  width: 10%;
}

.col-contacts {
  width: 30%;
}

.col-status {
  width: 20%;
}

/* Clip long text inside stacked contacts */
.emp-contacts>* {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
}

/* Sticky header row */
#employees-container .data-table thead th {
  position: sticky;
  top: 0;
  z-index: 10;
  background: #f5f5f5;
}

/* Sticky first column (ФИО) */
#employees-container .data-table th:first-child,
#employees-container .data-table td:first-child {
  position: sticky;
  left: 0;
  z-index: 5;
  background: var(--color-surface);
  box-shadow: 2px 0 5px rgba(0, 0, 0, .05);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Intersection cell: sticky top + sticky left — must win over both */
#employees-container .data-table thead th:first-child {
  z-index: 15;
  background: #f5f5f5;
}

/* ── Vacation timeline ───────────────────────────────────────────────────────── */
#vacations-container {
  overflow-x: auto;
  overflow-y: auto;
  max-height: calc(100vh - 300px);
  width: 100%;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
}

/* ── Vacations layout: table + right sidebar ─────────────────────────────────── */
.vacations-layout {
  display: flex;
  gap: 20px;
  align-items: flex-start;
}

/* Table column grows, min-width:0 prevents flex overflow */
.vacations-table-wrap {
  flex: 1 1 0;
  min-width: 0;
}

.vacations-sidebar {
  width: 280px;
  flex-shrink: 0;
  background: #f8fafc;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 14px 16px;
  position: sticky;
  top: 20px;
  max-height: calc(100vh - 280px);
  overflow-y: auto;
}

.sidebar-widget {
  padding-bottom: 14px;
  margin-bottom: 14px;
  border-bottom: 1px solid var(--color-border);
}

.sidebar-widget:last-child {
  padding-bottom: 0;
  margin-bottom: 0;
  border-bottom: none;
}

.sidebar-widget-title {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-text-hint);
  margin-bottom: 8px;
}

.sidebar-widget-body {
  font-size: 12px;
  line-height: 1.6;
  color: var(--color-text);
}

.sw-icon-danger {
  color: var(--color-danger);
  font-size: 13px;
}

.sw-icon-success {
  color: var(--color-success);
  font-size: 13px;
}

.sw-icon-info {
  color: var(--color-info-text);
  font-size: 13px;
}

.sidebar-widget-body em {
  color: var(--color-text-muted);
  font-style: italic;
}

.vac-sb-row {
  margin-bottom: 4px;
  line-height: 1.45;
}

.vac-sb-dept {
  font-weight: 700;
  color: var(--color-text-hint);
}

.vac-sb-date {
  color: var(--color-text-muted);
}

/* Vacation notification badges (T6/T1) */
.vac-notify-badge {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 6px;
  border-radius: 4px;
  font-size: 10px;
  font-weight: 600;
  line-height: 1.4;
}

.vac-t6-badge {
  background: #e3f2fd;
  color: #1565c0;
}

.vac-t1-badge {
  background: #fce4ec;
  color: #c62828;
}

/* Sidebar legend (vacation type key) */
.vac-sb-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 14px;
  padding: 10px 14px 8px;
  font-size: 12px;
  color: var(--color-text-muted);
}

.vac-sb-legend .l-badge {
  width: 14px;
  height: 14px;
}

.vac-sb-divider {
  border: none;
  border-top: 1px solid var(--color-border);
  margin: 0 0 10px;
}

/* Responsive: stack sidebar below table on narrow screens */
@media (max-width: 1200px) {
  .vacations-layout {
    flex-direction: column;
  }

  .vacations-sidebar {
    width: 100%;
    position: static;
    max-height: none;
  }
}

/* ── Vacation toolbar ────────────────────────────────────────────────────────── */
.vacation-toolbar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  width: 100%;
  gap: 8px;
  margin-bottom: 12px;
}

/* Vacation legend badges */
.badge-vac-sum {
  background: #ff922b;
  border-color: #e8820a;
}

.badge-vac-win {
  background: #4dabf7;
  border-color: #339af0;
}

.badge-vac-work {
  background: #51cf66;
  background-image: repeating-linear-gradient(-45deg, transparent, transparent 3px,
      rgba(255, 255, 255, .5) 3px, rgba(255, 255, 255, .5) 5px);
  border-color: #40c057;
}

.badge-vac-overlap {
  background: #ff922b;
  background-image: repeating-linear-gradient(45deg,
      rgba(220, 38, 38, 0.5),
      rgba(220, 38, 38, 0.5) 3px,
      transparent 3px,
      transparent 7px);
  border-color: #dc2626;
}

/* Department badge inside name cell */
.dept-badge {
  display: inline-block;
  font-size: 9px;
  font-weight: 600;
  color: var(--color-text-muted);
  background: var(--color-neutral);
  border-radius: 3px;
  padding: 1px 4px;
  margin-left: 4px;
  vertical-align: middle;
  letter-spacing: .2px;
}

/* ── Timeline table ──────────────────────────────────────────────────────────── */
.timeline-table {
  border-collapse: collapse;
  font-size: 12px;
  table-layout: fixed;
  width: 100%;
}

.timeline-table thead th {
  position: sticky;
  top: 0;
  z-index: 10;
  background: var(--color-primary);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, .12);
  padding: 3px 2px;
  text-align: center;
  font-weight: 700;
  font-size: 11px;
  line-height: 1.4;
  overflow: hidden;
}

.timeline-table thead th small {
  font-weight: 400;
  opacity: .85;
}

/* Weekend header — dark red, matching Calendar */
.timeline-table thead th.vac-hdr-weekend {
  background: #7f1d1d;
  color: #fca5a5;
}

.timeline-table tbody td {
  border: 1px solid #e2e8f0;
  padding: 0;
  height: 28px;
  overflow: hidden;
}

/* Sticky name column */
.timeline-name-col {
  position: sticky !important;
  left: 0;
  z-index: 5;
  background: var(--color-surface) !important;
  border-right: 1px solid #e2e8f0 !important;
  box-shadow: 2px 0 6px rgba(0, 0, 0, .07);
  padding: 4px 8px !important;
  width: 150px !important;
  min-width: 0 !important;
  max-width: 180px !important;
  overflow: hidden !important;
  font-weight: 500;
  text-align: left;
}

thead .timeline-name-col {
  z-index: 20 !important;
  background: var(--color-primary) !important;
  color: #fff !important;
  font-weight: 700 !important;
  box-shadow: 2px 0 6px rgba(0, 0, 0, .15);
  vertical-align: middle;
}

.timeline-table tbody tr:hover .timeline-name-col {
  background: #f0f4fb !important;
}

.timeline-table tbody tr:hover td {
  background: #fafcff;
}

/* Day state modifiers */
.day-weekend {
  background: #f5f5f5 !important;
}

.day-today {
  background: #dbeafe !important;
}

/* Vacation timeline — current day column accent */
.timeline-table thead th.day-today {
  background: #1565c0 !important;
  color: #fff !important;
  font-weight: 700 !important;
  border-left: 2px solid #86b7fe !important;
  border-right: 2px solid #86b7fe !important;
}

.timeline-table tbody td.day-today {
  /* no background — vacation colors must show through */
  border-left: 2px solid #86b7fe !important;
  border-right: 2px solid #86b7fe !important;
}

/* Vacation color classes — desktop palette */
.vac-summer {
  background: #ff922b !important;
  cursor: help;
}

.vac-winter {
  background: #4dabf7 !important;
  cursor: help;
}

.vac-working {
  background: #51cf66 !important;
  background-image: repeating-linear-gradient(-45deg,
      transparent, transparent 3px,
      rgba(255, 255, 255, .45) 3px, rgba(255, 255, 255, .45) 5px) !important;
  cursor: help;
}

/* Hatched overlay — applied on top of any base vacation color */
.overlap-warning {
  background-image: repeating-linear-gradient(45deg,
      rgba(220, 38, 38, 0.45),
      rgba(220, 38, 38, 0.45) 4px,
      transparent 4px,
      transparent 10px) !important;
  cursor: help;
}

/* ── Annual view ─────────────────────────────────────────────────────────────── */

/* View-mode toggle button group */
.vac-view-toggle {
  display: inline-flex;
  border: 1.5px solid var(--color-border-input);
  border-radius: var(--radius-md);
  overflow: hidden;
  flex-shrink: 0;
}

.vac-view-btn {
  border: none;
  border-radius: 0;
  background: var(--color-surface);
  color: var(--color-text-muted);
  padding: 4px 14px;
  font-size: 12px;
  font-family: var(--font-sans);
  cursor: pointer;
  transition: background .15s, color .15s;
  line-height: 1.4;
}

.vac-view-btn+.vac-view-btn {
  border-left: 1.5px solid var(--color-border-input);
}

.vac-view-btn.active {
  background: var(--color-primary);
  color: #fff;
}

.vac-view-btn:not(.active):hover {
  background: var(--color-neutral);
  color: var(--color-primary);
}

/* Active-vacation filter toggle */
.vac-toggle-filter {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  cursor: pointer;
  font-size: 12px;
  color: var(--color-text);
  user-select: none;
  flex-shrink: 0;
  white-space: nowrap;
}

.vac-toggle-filter input[type="checkbox"] {
  display: none;
}

.vac-toggle-track {
  display: inline-block;
  position: relative;
  width: 30px;
  height: 17px;
  background: var(--color-border-input);
  border-radius: 9px;
  transition: background .18s;
  flex-shrink: 0;
}

.vac-toggle-track::after {
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  width: 13px;
  height: 13px;
  background: #fff;
  border-radius: 50%;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .22);
  transition: transform .18s;
}

.vac-toggle-filter input:checked+.vac-toggle-track {
  background: var(--color-primary);
}

.vac-toggle-filter input:checked+.vac-toggle-track::after {
  transform: translateX(13px);
}

/* Annual table column headers */
.vac-annual-table thead th.vac-annual-th {
  width: auto !important;
  min-width: 0 !important;
  max-width: none !important;
  white-space: nowrap;
  font-size: 11px;
}

/* Timeline cell that holds absolutely-positioned bars */
.vac-annual-row {
  position: relative;
  height: 32px;
  padding: 0 !important;
  vertical-align: middle;
  background: #f8fafc;
  border: 1px solid #e2e8f0 !important;
}

/* Month dividers — subtle vertical lines inside the bar row */
.vac-annual-row::before {
  content: '';
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(to right,
      transparent,
      transparent calc(8.333% - 1px),
      rgba(0, 0, 0, .06) calc(8.333% - 1px),
      rgba(0, 0, 0, .06) 8.333%);
  pointer-events: none;
  z-index: 0;
}

/* "Дней" quota column in annual view */
.vac-days-col {
  width: 58px !important;
  min-width: 58px !important;
  max-width: 58px !important;
  text-align: center !important;
  font-size: 12px !important;
  font-weight: 600;
  padding: 2px 4px !important;
  white-space: nowrap;
  vertical-align: middle;
  border-right: 1px solid #e2e8f0 !important;
}

thead .vac-days-col {
  background: var(--color-primary) !important;
  color: #fff !important;
  font-size: 11px !important;
  font-weight: 700 !important;
}

/* Vacation bars */
.vac-annual-bar {
  position: absolute;
  top: 5px;
  bottom: 5px;
  min-width: 3px;
  border-radius: 3px;
  opacity: .88;
  cursor: help;
  transition: opacity .15s, box-shadow .15s;
  z-index: 1;
}

.vac-annual-bar:hover {
  opacity: 1;
  box-shadow: 0 1px 6px rgba(0, 0, 0, .22);
  z-index: 5;
}

/* Thinner bars when selected (visual feedback) */
.vac-annual-bar[data-selected="true"] {
  top: 3px;
  bottom: 3px;
  outline: 2px inset rgba(0, 0, 0, .4);
}

/* Vacation legend */
.timeline-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 16px;
  margin-bottom: 10px;
  font-size: 12px;
  color: var(--color-text-muted);
}

.tl-item {
  display: flex;
  align-items: center;
  gap: 5px;
  white-space: nowrap;
}

.tl-dot {
  width: 14px;
  height: 14px;
  border-radius: 3px;
  flex-shrink: 0;
  display: inline-block;
}

/* ── Calendar toolbar ───────────────────────────────────────────────────────── */
.calendar-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  gap: 10px;
  margin-bottom: 12px;
}

.calendar-toolbar .toolbar-left {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  flex-shrink: 0;
}

.calendar-toolbar .toolbar-center {
  flex-grow: 1;
  text-align: center;
  padding: 0 15px;
  overflow: hidden;
}

.calendar-toolbar .toolbar-right {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

/* View mode toggle (Presence / Heatmap) */
.cal-view-toggle {
  display: flex;
  border: 1px solid var(--color-border-input);
  border-radius: var(--radius-md);
  overflow: hidden;
  flex-shrink: 0;
}

.cal-view-btn {
  padding: 5px 12px;
  font-size: 12px;
  font-family: var(--font-sans);
  font-weight: 500;
  background: var(--color-surface);
  color: var(--color-text-hint);
  border: none;
  cursor: pointer;
  transition: background .15s, color .15s;
  white-space: nowrap;
}

.cal-view-btn+.cal-view-btn {
  border-left: 1px solid var(--color-border-input);
}

.cal-view-btn:hover:not(.active) {
  background: var(--color-neutral);
  color: var(--color-text);
}

.cal-view-btn.active {
  background: var(--color-primary);
  color: #fff;
  font-weight: 600;
}

.cal-nav {
  display: flex;
  align-items: center;
  gap: 6px;
}

.cal-nav-btn {
  width: 32px;
  height: 32px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  flex-shrink: 0;
}

.calendar-legend {
  display: flex;
  align-items: center;
  gap: 8px;
  justify-content: center;
}

.legend-icon {
  font-size: 13px;
  flex-shrink: 0;
}

.legend-items {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 12px;
  justify-content: center;
}

.l-item {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  color: #64748b;
  white-space: nowrap;
}

.l-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 3px;
  font-size: 10px;
  font-weight: 700;
  border: 1px solid transparent;
}

.badge-p {
  background: #f1f8e9;
  color: #2e7d32;
  border-color: #4caf50;
}

.badge-v {
  background: #ffebee;
  color: #c62828;
  border-color: #e57373;
}

.badge-o {
  background: #fff3e0;
  color: #e65100;
  border-color: #ffb74d;
}

.badge-n {
  background: #f3e5f5;
  color: #6a1b9a;
  border-color: #ce93d8;
}

.badge-k {
  background: #e3f2fd;
  color: #1565c0;
  border-color: #90caf9;
}

.badge-b {
  background: #fff8e1;
  color: #f57f17;
  border-color: #ffe082;
}

/* ── Calendar tab ────────────────────────────────────────────────────────────── */
/* Calendar layout: table + right sidebar */
.cal-layout {
  display: flex;
  gap: 16px;
  align-items: flex-start;
}

.cal-layout #calendar-container {
  flex: 1;
  min-width: 0;
}

.cal-sidebar-pane {
  width: 240px;
  flex-shrink: 0;
  position: sticky;
  top: 12px;
  max-height: calc(100vh - 240px);
  overflow-y: auto;
}

.cal-sidebar-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 14px 16px;
}

.cal-sidebar-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--color-text);
  margin: 0 0 8px;
}

.cal-info-date-input {
  display: block;
  width: 100%;
  box-sizing: border-box;
  padding: 5px 8px;
  font-size: 13px;
  border: 1px solid var(--color-border-input);
  border-radius: var(--radius-md);
  margin-bottom: 10px;
  color: var(--color-text);
  background: var(--color-surface);
}

/* Stats block */
.cal-sb-alerts {
  margin-bottom: 12px;
}

.cal-sb-stat-row {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 3px 0;
  font-size: 12px;
  color: var(--color-text);
}

.cal-sb-stat-row strong {
  margin-left: auto;
  font-size: 13px;
}

.cal-sb-placeholder {
  font-size: 12px;
  color: var(--color-text-muted);
  padding: 6px 0;
}

/* Departments accordion (native <details>/<summary>) */
.cal-sb-accordion {
  margin-bottom: 10px;
}

.cal-acc-item {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  margin-bottom: 4px;
  overflow: hidden;
}

.cal-acc-hdr {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  padding: 5px 10px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  background: var(--color-neutral);
  list-style: none;
  user-select: none;
}

.cal-acc-hdr::-webkit-details-marker {
  display: none;
}

.cal-acc-dept {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--color-text);
}

.cal-acc-badge {
  flex-shrink: 0;
  font-size: 11px;
  font-weight: 700;
  color: var(--color-info-text);
  background: var(--color-info-bg);
  border-radius: 10px;
  padding: 1px 7px;
}

.cal-acc-progress {
  height: 4px;
  background: var(--color-border);
}

.cal-acc-progress-bar {
  height: 100%;
  background: var(--color-success);
  transition: width .3s;
  min-width: 2px;
}

.cal-acc-body {
  padding: 8px 10px;
  background: var(--color-surface);
}

.cal-acc-grp {
  display: flex;
  align-items: baseline;
  gap: 4px;
  font-size: 11px;
  padding: 2px 0;
  flex-wrap: wrap;
}

.cal-acc-label {
  color: var(--color-text-muted);
  flex-shrink: 0;
}

.cal-acc-names {
  color: var(--color-text);
  word-break: break-word;
}

/* Smart alerts */
.cal-smart-alert {
  font-size: 11px;
  line-height: 1.45;
  padding: 5px 8px;
  margin-bottom: 4px;
  border-radius: var(--radius-md);
  background: var(--color-warning-bg);
  color: #7c4a00;
  border-left: 3px solid var(--color-warning-text);
}

.cal-smart-ok {
  font-size: 11px;
  padding: 5px 8px;
  margin-bottom: 4px;
  border-radius: var(--radius-md);
  background: var(--color-success-bg);
  color: var(--color-success);
  border-left: 3px solid var(--color-success);
}

.cal-sb-divider {
  border-top: 1px solid var(--color-border);
  margin: 8px 0;
}

/* Legend */
.cal-sb-legend {
  border-top: 1px solid var(--color-border);
  padding-top: 10px;
  margin-top: 4px;
}

.cal-sb-legend-title {
  font-size: 11px;
  font-weight: 600;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: .04em;
  margin-bottom: 6px;
}

.cal-sb-legend-row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  padding: 2px 0;
  color: var(--color-text);
}

/* Selected day column highlight */
.cal-table th.cal-col-selected:not(.cal-hdr-today):not(.cal-hdr-weekend) {
  background: #2563eb !important;
  color: #fff !important;
}

.cal-table td.cal-col-selected {
  box-shadow: inset 0 0 0 9999px rgba(37, 99, 235, 0.08);
}

#calendar-container {
  overflow: auto;
  max-height: calc(100vh - 260px);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
}

.cal-table {
  border-collapse: collapse;
  font-size: 12px;
  table-layout: fixed;
  width: 100%;
}

/* Sticky header row */
.cal-table thead th {
  position: sticky;
  top: 0;
  z-index: 10;
  background: var(--color-primary);
  color: #fff;
  text-align: center;
  padding: 3px 2px;
  width: 30px;
  min-width: 30px;
  max-width: 30px;
  border: 1px solid #2a4a7b;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.4;
}

.cal-table thead th.cal-hdr-weekend {
  background: #7f1d1d;
  color: #fca5a5;
}

.cal-table thead th.cal-hdr-today {
  background: #1565c0;
  font-weight: 700;
  border-left: 2px solid #86b7fe !important;
  border-right: 2px solid #86b7fe !important;
}

/* Sticky name column (body) */
.cal-name-col {
  position: sticky !important;
  left: 0;
  z-index: 5;
  background: var(--color-surface) !important;
  border-right: 2px solid var(--color-border) !important;
  padding: 4px 10px !important;
  width: auto !important;
  min-width: 140px !important;
  max-width: none !important;
  font-size: 12px;
  font-weight: 500;
  text-align: left !important;
  vertical-align: middle;
}

/* Sticky name column header (intersection) */
thead .cal-name-col {
  z-index: 20 !important;
  background: var(--color-primary) !important;
  color: #fff !important;
  text-align: left !important;
  width: auto !important;
  min-width: 120px !important;
  white-space: nowrap;
}

/* Fixed-width name wrapper for table cells */
.fixed-name {
  display: block;
  width: 100%;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.cal-emp-dept {
  font-size: 10px;
  color: var(--color-text-muted);
  font-weight: 400;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-top: 1px;
  opacity: .85;
}

/* Sticky totals column (right) */
.cal-total-col {
  position: sticky;
  right: 0;
  z-index: 5;
  background: #f0f4f8;
  border-left: 2px solid var(--color-border) !important;
  font-size: 11px;
  color: #1565c0;
  font-weight: 700;
  width: 50px;
  min-width: 50px;
  max-width: 50px;
  text-align: center;
  padding: 2px;
  white-space: nowrap;
}

thead .cal-total-col {
  z-index: 15 !important;
  background: var(--color-primary) !important;
  color: #90caf9 !important;
  font-size: 11px;
}

/* Body cells */
.cal-table tbody td {
  border: 1px solid #e2e8f0;
  padding: 0;
  height: 28px;
  width: 30px;
  min-width: 30px;
  max-width: 30px;
  text-align: center;
  vertical-align: middle;
  font-weight: 600;
  font-size: 11px;
}

.cal-table tbody td[data-emp] {
  cursor: pointer;
  user-select: none;
}

/* Row-level hover — highlights the entire row without breaking per-cell colours */
.cal-table tbody tr:hover td {
  filter: brightness(0.93);
}

/* Individual cell hover slightly darker still */
.cal-table tbody td[data-emp]:hover {
  filter: brightness(0.86);
}

/* Day states — backgrounds mirror the cal-brush-menu button colors */
.cal-day-work {
  background: #f1f8e9;
}

/* soft green  — matches modal 'Р' button */
.cal-day-off {
  background: #ffebee;
}

/* soft red    — matches modal 'В' button */
/* Special status backgrounds (same palette as brush modal buttons) */
.cal-day-vac {
  background: #fff3e0;
}

/* light orange — matches modal 'О' button */
.cal-day-absent {
  background: #f3e5f5;
}

/* light purple — matches modal 'Н' button */
.cal-day-trip {
  background: #e3f2fd;
}

/* light blue   — командировка 'К'        */
.cal-day-sick {
  background: #fff8e1;
}

/* light amber  — больничный  'Б'         */
/* Today: borders only — vacation/status backgrounds must show through */
.cal-day-today {
  border-left: 2px solid #86b7fe !important;
  border-right: 2px solid #86b7fe !important;
}

/* Weekend-column vertical shading — inset shadow acts as additive overlay */
.cal-table th.weekend-col,
.cal-table td.weekend-col {
  box-shadow: inset 0 0 0 9999px rgba(0, 0, 0, 0.028);
}

/* Status symbol colors — match the brush modal button text colors */
.cal-sym-work {
  color: #2e7d32;
}

/* green  */
.cal-sym-off {
  color: #c62828;
}

/* red    */
.cal-sym-vac {
  color: #e65100;
}

/* orange */
.cal-sym-absent {
  color: #6a1b9a;
}

/* purple */
.cal-sym-trip {
  color: #1565c0;
}

/* blue   */
.cal-sym-sick {
  color: #f57f17;
}

/* amber  */

/* Calendar legend */
.cal-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 16px;
  margin-bottom: 10px;
  font-size: 12px;
  color: var(--color-text-muted);
  align-items: center;
}

.cal-legend-item {
  display: flex;
  align-items: center;
  gap: 5px;
  white-space: nowrap;
}

.cal-legend-cell {
  width: 18px;
  height: 18px;
  border-radius: 3px;
  border: 1px solid #ccc;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: 700;
  flex-shrink: 0;
}

/* Coverage map footer (tfoot) */
.cal-table tfoot td {
  position: sticky;
  bottom: 0;
  z-index: 10;
  background: #f1f5f9;
  border: 1px solid #d1d5db;
  border-top: 2px solid #94a3b8;
  text-align: center;
  font-size: 11px;
  font-weight: 700;
  height: 26px;
  vertical-align: middle;
}

.cal-tfoot-label {
  text-align: left !important;
  padding-left: 8px !important;
  color: var(--color-text-muted);
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  white-space: nowrap;
}

.cal-tfoot-day {
  color: var(--color-text);
}

.cal-cover-zero {
  background: #ffebee !important;
  color: #c62828;
}

.cal-cover-low {
  background: #fff3e0 !important;
  color: #e65100;
}

/* ── Vacation brush menu ────────────────────────────────────────────────────── */
.vac-brush-menu {
  position: fixed;
  z-index: 600;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: 0 4px 16px rgba(0, 0, 0, .18);
  padding: 10px 12px;
  min-width: 200px;
  user-select: none;
}

.vac-brush-menu.hidden {
  display: none;
}

.vac-brush-actions {
  display: flex;
  gap: 6px;
  margin-top: 8px;
}

.vac-brush-actions button {
  flex: 1;
  padding: 7px 4px;
  border: 1px solid var(--color-border-input);
  border-radius: var(--radius-md);
  background: var(--color-bg);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: filter 0.1s;
  white-space: nowrap;
}

.vac-brush-actions button:hover {
  filter: brightness(0.92);
}

.vac-brush-actions [data-vac-action="summer"] {
  color: #b94d00;
  border-color: #ff922b;
  background: #fff4e6;
}

.vac-brush-actions [data-vac-action="winter"] {
  color: #1565c0;
  border-color: #4dabf7;
  background: #e3f2fd;
}

.vac-brush-actions [data-vac-action="delete"] {
  color: #c62828;
  border-color: #e57373;
  background: #ffebee;
}

.vac-brush-actions [data-vac-action="cancel"] {
  color: var(--color-text-muted);
  font-size: 18px;
  flex: 0 0 auto;
  padding: 4px 8px;
}

/* ── Calendar brush (drag-to-select) ────────────────────────────────────────── */
.cell-selected {
  background-color: rgba(59, 130, 246, 0.22) !important;
  outline: 1px dashed #3b82f6 !important;
  outline-offset: -1px;
}

.cal-brush-menu {
  position: fixed;
  z-index: 600;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 8px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.16);
  padding: 10px 12px 12px;
  min-width: 200px;
  user-select: none;
}

.cal-brush-menu.hidden {
  display: none;
}

.cal-brush-title {
  font-size: 11px;
  color: var(--color-text-muted);
  margin-bottom: 8px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.cal-brush-actions {
  display: flex;
  gap: 6px;
}

.cal-brush-actions button {
  flex: 1;
  padding: 7px 4px;
  border: 1px solid var(--color-border);
  border-radius: 5px;
  background: white;
  cursor: pointer;
  font-weight: 700;
  font-size: 14px;
  transition: filter 0.1s;
}

.cal-brush-actions button:hover {
  filter: brightness(0.92);
}

.cal-brush-actions [data-action="working"] {
  color: #2e7d32;
  border-color: #4caf50;
  background: #f1f8e9;
}

.cal-brush-actions [data-action="dayoff"] {
  color: #c62828;
  border-color: #e57373;
  background: #ffebee;
}

.cal-brush-actions [data-action="vacation"] {
  color: #e65100;
  border-color: #ffb74d;
  background: #fff3e0;
}

.cal-brush-actions [data-action="absent"] {
  color: #6a1b9a;
  border-color: #ce93d8;
  background: #f3e5f5;
}

.cal-brush-actions [data-action="trip"] {
  color: #1565c0;
  border-color: #90caf9;
  background: #e3f2fd;
}

.cal-brush-actions [data-action="sick"] {
  color: #f57f17;
  border-color: #ffe082;
  background: #fff8e1;
}

.cal-brush-actions [data-action="cancel"] {
  color: var(--color-text-muted);
  font-size: 18px;
  flex: 0 0 auto;
  padding: 4px 8px;
}

/* ── Workload tab ────────────────────────────────────────────────────────────── */
/* ── Workload tab: 2-column persistent layout (по образцу .eco-layout) ───── */
.wl-layout {
  display: flex;
  gap: 16px;
  align-items: flex-start;
}
.wl-content {
  flex: 1 1 0;
  min-width: 0;
}
.wl-right-col-persistent {
  width: 320px;
  flex-shrink: 0;
  position: sticky;
  top: 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.wl-right-col-persistent .panel-actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
}
.wl-global-toolbar {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 10px 0 12px;
  padding: 6px 10px;
  background: #f8fafc;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}

/* Единый тулбар фильтров: «Период» (общий) + per-subtab группы в одну строку */
.wl-toolbar-unified {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  margin: 10px 0 12px;
  padding: 6px 10px;
  background: #f8fafc;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}
.wl-toolbar-unified .wl-filters-group {
  display: flex;
  align-items: center;
  gap: 6px;
  padding-left: 12px;
  border-left: 1px solid var(--color-border);
}
@media (max-width: 1100px) {
  .wl-layout { flex-direction: column; }
  .wl-right-col-persistent {
    width: 100%;
    position: static;
  }
  .wl-right-col-persistent .panel-actions { justify-content: flex-start; }
}

.wl-dashboard-layout {
  display: flex;
  gap: 20px;
  align-items: flex-start;
}

.wl-charts-col {
  flex: 1 1 0;
  min-width: 0;
}

.wl-chart-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 16px;
  box-shadow: var(--shadow-card);
}

.wl-right-col {
  width: 320px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
  position: sticky;
  top: 20px;
  align-self: flex-start;
}

.wl-right-col .panel-actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
}

.wl-info-panel {
  background: #f8fafc;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 16px;
  max-height: calc(100vh - 250px);
  overflow-y: auto;
}

.wl-panel-filters {
  padding-bottom: 12px;
  margin-bottom: 12px;
  border-bottom: 1px solid var(--color-border);
}

.wl-leaders-section {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 12px 14px;
  margin-bottom: 12px;
  box-shadow: var(--shadow-card);
}

.wl-leaders-section:last-child {
  margin-bottom: 0;
}

/* Legacy: CSS grid for KPI tab charts (still in use by #tab-kpi) */
.wl-dashboard-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.wl-chart-card,
.wl-leaders-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 16px;
  box-shadow: var(--shadow-card);
}

@media (max-width: 1200px) {
  .wl-dashboard-layout {
    flex-direction: column;
  }

  .wl-right-col {
    width: 100%;
    position: static;
  }

  .wl-info-panel {
    width: 100%;
    max-height: none;
  }
}

.wl-card-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--color-text);
  margin-bottom: 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--color-border);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.wl-chart-wrap {
  position: relative;
  max-height: 600px;
  overflow-y: auto;
  overflow-x: hidden;
}

/* ── Services filter dropdown (Workload tab) ──────────────────────────── */
.wl-svc-filter {
  position: relative;
  user-select: none;
}

.wl-svc-summary {
  list-style: none;
  cursor: pointer;
  padding: 5px 12px;
  border: 1px solid var(--color-border-input);
  border-radius: var(--radius-sm);
  background: var(--color-bg);
  font-size: 13px;
  font-family: var(--font-sans);
  color: var(--color-text);
  min-width: 160px;
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
}

.wl-svc-summary::-webkit-details-marker { display: none; }
.wl-svc-summary:hover { border-color: var(--color-primary); }

.wl-svc-panel {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  z-index: 60;
  width: 320px;
  max-width: 90vw;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.12);
  padding: 8px;
}

.wl-svc-search-row { padding: 0 2px 6px; }

.wl-svc-search {
  width: 100%;
  padding: 5px 8px;
  border: 1px solid var(--color-border-input);
  border-radius: var(--radius-sm);
  font-size: 12px;
  font-family: var(--font-sans);
  outline: none;
}

.wl-svc-search:focus {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 2px rgba(67, 97, 238, 0.12);
}

.wl-svc-quick-row {
  display: flex;
  gap: 4px;
  padding: 0 2px 6px;
  border-bottom: 1px solid var(--color-border);
  margin-bottom: 6px;
  flex-wrap: wrap;
}

.wl-svc-quick {
  padding: 3px 8px;
  font-size: 11px;
  font-weight: 600;
  color: var(--color-primary);
  background: #eef2ff;
  border: 1px solid #c7d2fe;
  border-radius: 10px;
  cursor: pointer;
  font-family: var(--font-sans);
}

.wl-svc-quick:hover { background: #dbeafe; }

.wl-svc-list {
  max-height: 280px;
  overflow-y: auto;
  padding: 2px;
}

.wl-svc-item {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 6px;
  font-size: 12px;
  cursor: pointer;
  border-radius: var(--radius-sm);
  white-space: nowrap;
}

.wl-svc-item:hover { background: var(--color-bg); }
.wl-svc-item.hidden { display: none; }

.wl-svc-item input[type="checkbox"] {
  flex-shrink: 0;
  accent-color: var(--color-primary);
}

.wl-svc-item-name {
  flex: 1 1 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.wl-svc-item-count {
  font-size: 10px;
  color: var(--color-text-muted);
  font-variant-numeric: tabular-nums;
}

/* ── Mini-timeline above the workload chart ───────────────────────────── */
.wl-timeline {
  padding: 6px 10px 10px;
  border-bottom: 1px solid var(--color-border);
  margin-bottom: 8px;
}

.wl-timeline:empty { display: none; }

.wl-tl-pair {
  display: flex;
  align-items: stretch;
  gap: 6px;
}

.wl-tl-strip {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.wl-tl-sep {
  width: 1px;
  background: var(--color-border);
  align-self: stretch;
  margin: 12px 4px;
}

.wl-tl-numbers,
.wl-tl-labels-bot {
  display: grid;
  font-size: 9px;
  color: var(--color-text-muted);
  text-align: center;
  white-space: nowrap;
  line-height: 1.2;
}

.wl-tl-numbers { margin-bottom: 2px; min-height: 12px; }
.wl-tl-labels-bot { margin-top: 4px; min-height: 14px; font-size: 10px; }

.wl-tl-ticks {
  display: grid;
  align-items: end;
  height: 16px;
  border-bottom: 1px solid var(--color-border);
}

.wl-tl-tick {
  width: 1px;
  height: 8px;
  background: #cbd5e1;
  justify-self: center;
  border-radius: 1px;
  position: relative;
}

.wl-tl-tick.wl-tl-thick {
  width: 4px;
  background: #cbd5e1;
}

.wl-tl-tick.wl-tl-weekend {
  background: #fda4af;
  opacity: 0.6;
}

.wl-tl-tick.wl-tl-mark {
  height: 16px;
  width: 3px;
}

.wl-tl-tick.wl-tl-mark.wl-tl-thick {
  width: 7px;
}

.wl-tl-c0 { background: rgba(30, 84, 159, 1) !important; }
.wl-tl-c1 { background: rgba(30, 84, 159, 0.65) !important; }
.wl-tl-c2 { background: rgba(30, 84, 159, 0.40) !important; }

.wl-tl-month-label,
.wl-tl-year-label {
  text-align: center;
  font-size: 11px;
  font-weight: 600;
  color: var(--color-text);
  margin-top: 6px;
}

.wl-tl-meta {
  font-size: 11px;
  color: var(--color-text-muted);
  margin-top: 4px;
  font-style: italic;
}

.wl-chart-wrap canvas {
  display: block;
  width: 100% !important;
}

.chart-scroll-container {
  max-height: 700px;
  overflow-y: auto;
  overflow-x: hidden;
}

.chart-wrapper {
  position: relative;
  width: 100%;
}

.wl-leaders-body {
  font-size: 13px;
  line-height: 1.7;
  overflow-y: auto;
  max-height: 320px;
}

.wl-ls-title {
  font-weight: 700;
  font-size: 12px;
  color: var(--color-text-hint);
  margin-top: 10px;
  margin-bottom: 2px;
}

.wl-ls-title:first-child {
  margin-top: 0;
}

.wl-ls-list {
  list-style: none;
  padding: 0;
  margin: 0 0 2px;
}

.wl-ls-list li {
  padding: 1px 0 1px 14px;
  position: relative;
  font-size: 12px;
}

.wl-ls-list li::before {
  content: "•";
  position: absolute;
  left: 2px;
  color: var(--color-text-muted);
}

.wl-ls-warn li {
  color: var(--color-warning-text);
}

.wl-ls-list .wl-ok {
  color: var(--color-success);
}

/* ── KPI section ────────────────────────────────────────────────────────────── */
.wl-kpi-section {
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid var(--color-border);
}

.wl-kpi-toolbar {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
  flex-wrap: wrap;
}

.wl-kpi-filter-group {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.filter-input {
  padding: 4px 8px;
  font-size: 12px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm, 4px);
  background: var(--color-surface);
  color: var(--color-text);
  height: 28px;
  box-sizing: border-box;
}

.filter-input:focus {
  outline: none;
  border-color: var(--color-primary);
}

/* ── KPI Standouts (выделившиеся сотрудники) ───────────────────────────────── */
.kpi-standouts {
  background: linear-gradient(180deg, #fffbe8 0%, #fff8d6 100%);
  border: 1px solid #e8d896;
  border-radius: 10px;
  margin-bottom: 14px;
  overflow: hidden;
}
.kpi-standouts-empty {
  background: #f0f7f0;
  border-color: #c4dec4;
  padding: 8px 14px;
  font-size: 13px;
  color: #2d6b2d;
  display: flex;
  align-items: center;
  gap: 6px;
}
.kpi-standouts-empty span { color: #2d6b2d; }

.kpi-so-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  cursor: pointer;
  user-select: none;
  font-size: 14px;
  font-weight: 600;
  color: #4a3c10;
  border-bottom: 1px solid rgba(232, 216, 150, 0.5);
}
.kpi-so-header:hover { background: rgba(255, 255, 255, .3); }
.kpi-so-toggle-arrow {
  display: inline-block;
  font-size: 10px;
  transition: transform .2s;
  color: #8a7320;
}
.kpi-standouts.collapsed .kpi-so-toggle-arrow { transform: rotate(-90deg); }
.kpi-standouts.collapsed .kpi-so-body         { display: none; }
.kpi-standouts.collapsed .kpi-so-header       { border-bottom: none; }
.kpi-so-title-main { flex: 0 0 auto; }
.kpi-so-total {
  background: #d4af37;
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  padding: 1px 8px;
  border-radius: 10px;
  min-width: 22px;
  text-align: center;
}
.kpi-so-hint {
  font-size: 11px;
  font-weight: 400;
  color: #8a7320;
  margin-left: 6px;
  font-style: italic;
}
.kpi-so-body {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 0;
  padding: 0;
}
@media (max-width: 1100px) {
  .kpi-so-body { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
  .kpi-so-body { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.kpi-so-section {
  padding: 10px 14px;
  border-right: 1px solid rgba(232, 216, 150, 0.4);
  border-bottom: 1px solid rgba(232, 216, 150, 0.4);
  background: rgba(255, 255, 255, .35);
}
.kpi-so-section:last-child { border-right: none; }
.kpi-so-section-title {
  font-size: 12px;
  font-weight: 700;
  margin-bottom: 6px;
  display: flex;
  align-items: center;
  gap: 4px;
}
.kpi-so-above    .kpi-so-section-title { color: #5a8a3a; }
.kpi-so-critical .kpi-so-section-title { color: #b32a26; }
.kpi-so-below    .kpi-so-section-title { color: #b87a00; }
.kpi-so-cor      .kpi-so-section-title { color: #c25a00; }
.kpi-so-km       .kpi-so-section-title { color: #1f5285; }
.kpi-so-count {
  font-weight: 400;
  color: var(--color-text-muted);
  font-size: 11px;
}
.kpi-so-list {
  margin: 0;
  padding: 0;
  list-style: none;
}
.kpi-so-item {
  display: flex;
  align-items: baseline;
  gap: 6px;
  padding: 3px 0;
  font-size: 12px;
  line-height: 1.4;
  border-bottom: 1px dashed rgba(0, 0, 0, .05);
}
.kpi-so-item:last-child { border-bottom: none; }
.kpi-so-name {
  flex: 1 1 auto;
  color: var(--color-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.kpi-so-dept {
  color: var(--color-text-muted);
  font-size: 11px;
}
.kpi-so-pct {
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  flex-shrink: 0;
}
.kpi-so-pct-above_norm    { color: #2d6b2d; }
.kpi-so-pct-below_norm    { color: #98621a; }
.kpi-so-pct-critical      { color: #b32a26; }
.kpi-so-pct-cor_over      { color: #c25a00; }
.kpi-so-pct-km_over       { color: #1f5285; }
.kpi-so-frac {
  font-size: 10.5px;
  color: var(--color-text-muted);
  font-variant-numeric: tabular-nums;
  flex-shrink: 0;
}

/* ── KPI Dynamics block (better/worse than usual, 30-day baseline) ──────────── */
.kpi-dynamics {
  background: linear-gradient(180deg, #eef7f0 0%, #fbf5ee 100%);
  border: 1px solid #c8e0c8;
  border-radius: 6px;
  margin-bottom: 14px;
  overflow: hidden;
}
.kpi-dyn-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  cursor: pointer;
  user-select: none;
  background: rgba(200, 224, 200, 0.35);
  border-bottom: 1px solid rgba(200, 224, 200, 0.6);
  font-weight: 600;
  font-size: 13px;
  color: #2a5a3a;
}
.kpi-dyn-toggle-arrow {
  display: inline-block;
  font-size: 10px;
  transition: transform .2s;
  color: #2a5a3a;
}
.kpi-dynamics.collapsed .kpi-dyn-toggle-arrow { transform: rotate(-90deg); }
.kpi-dynamics.collapsed .kpi-dyn-body         { display: none; }
.kpi-dynamics.collapsed .kpi-dyn-header       { border-bottom: none; }
.kpi-dyn-title-main { flex: 0 0 auto; }
.kpi-dyn-total {
  background: #5a9a6a;
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  padding: 1px 8px;
  border-radius: 10px;
  min-width: 22px;
  text-align: center;
}
.kpi-dyn-hint {
  font-size: 11px;
  font-weight: 400;
  color: #5a8a6a;
  margin-left: 6px;
  font-style: italic;
}
.kpi-dyn-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0;
}
@media (max-width: 720px) {
  .kpi-dyn-grid { grid-template-columns: 1fr; }
}
.kpi-dyn-section {
  padding: 10px 14px;
  border-right: 1px solid rgba(200, 224, 200, 0.4);
  background: rgba(255, 255, 255, .4);
}
.kpi-dyn-section:last-child { border-right: none; }
.kpi-dyn-section-title {
  font-size: 12px;
  font-weight: 700;
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  gap: 4px;
}
.kpi-dyn-better .kpi-dyn-section-title { color: #1a7a4a; }
.kpi-dyn-worse  .kpi-dyn-section-title { color: #8a3a6e; }
.kpi-dyn-count {
  font-weight: 400;
  color: var(--color-text-muted);
  font-size: 11px;
}
.kpi-dyn-empty {
  font-size: 12px;
  color: var(--color-text-muted);
  font-style: italic;
  padding: 4px 0;
}
.kpi-dyn-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 0 12px;
}
.kpi-dyn-item {
  display: flex;
  align-items: baseline;
  gap: 6px;
  padding: 3px 0;
  font-size: 12px;
  line-height: 1.4;
  border-bottom: 1px dashed rgba(0, 0, 0, .05);
}
.kpi-dyn-name {
  flex: 1 1 auto;
  color: var(--color-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.kpi-dyn-dept {
  color: var(--color-text-muted);
  font-size: 11px;
}
.kpi-dyn-ratio {
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  flex-shrink: 0;
}
.kpi-dyn-better .kpi-dyn-ratio { color: #1a7a4a; }
.kpi-dyn-worse  .kpi-dyn-ratio { color: #8a3a6e; }
.kpi-dyn-frac {
  font-size: 10.5px;
  color: var(--color-text-muted);
  font-variant-numeric: tabular-nums;
  flex-shrink: 0;
}

/* ── KPI cards grid ─────────────────────────────────────────────────────────── */
.wl-kpi-cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 12px;
}

.expert-kpi-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md, 8px);
  padding: 12px 14px;
  box-shadow: var(--shadow-card);
  transition: box-shadow .15s;
}

.expert-kpi-card:hover {
  box-shadow: var(--shadow-elevated);
}

.kpi-card-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}

.kpi-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}

.kpi-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--color-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ── KPI progress bar ───────────────────────────────────────────────────────── */
.kpi-progress-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 5px;
}

.kpi-fraction {
  font-size: 13px;
  font-weight: 600;
  color: var(--color-text);
  white-space: nowrap;
  min-width: 70px;
  text-align: right;
}

.kpi-fraction.kpi-over {
  color: var(--color-success);
}

.progress-bg {
  flex: 1;
  height: 10px;
  background: var(--color-bg, #f0f0f0);
  border-radius: 5px;
  overflow: hidden;
  position: relative;
}

.progress-fill {
  height: 100%;
  border-radius: 5px;
  transition: width .4s ease;
}

.kpi-benchmark-marker {
  position: absolute;
  top: -2px;
  bottom: -2px;
  width: 3px;
  background: var(--color-warning-text);
  border-radius: 2px;
  z-index: 2;
}

.kpi-pct {
  font-size: 14px;
  font-weight: 700;
  color: var(--color-text);
  min-width: 42px;
  text-align: left;
}

/* ── Logistics zone (km + departures) ────────────────────────────────────────── */
.kpi-logistics-zone {
  font-size: 11px;
  color: var(--color-text-muted);
  padding: 2px 0 6px 22px;
  opacity: .75;
}

/* ── Task badges ─────────────────────────────────────────────────────────────── */
.kpi-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 4px;
}

.kpi-badge {
  display: inline-block;
  background: var(--color-bg, #f4f5f7);
  border: 1px solid var(--color-border);
  border-radius: 12px;
  padding: 1px 8px;
  font-size: 11px;
  color: var(--color-text-muted);
  white-space: normal;
  word-break: break-word;
  max-width: 100%;
}

.kpi-badge strong {
  color: var(--color-text);
}

/* ── KPI card status (border color by overall pct) ─────────────────────────── */
.expert-kpi-card.kpi-st-bad   { border-left: 4px solid #d9534f; background: #fff7f6; }
.expert-kpi-card.kpi-st-warn  { border-left: 4px solid #f0ad4e; background: #fffaf2; }
.expert-kpi-card.kpi-st-ok    { border-left: 4px solid #5cb85c; }
.expert-kpi-card.kpi-st-star  { border-left: 4px solid #d4af37; background: #fffbe8; }
.expert-kpi-card.kpi-st-none  { border-left: 4px solid #c0c5cc; opacity: .85; }

.kpi-card-status {
  margin-left: auto;
  font-size: 13px;
  font-weight: 700;
  padding: 1px 8px;
  border-radius: 10px;
  white-space: nowrap;
}
.kpi-st-bad  .kpi-card-status { background: #fde2e1; color: #b32a26; }
.kpi-st-warn .kpi-card-status { background: #fdebd0; color: #98621a; }
.kpi-st-ok   .kpi-card-status { background: #e2f4e2; color: #2d6b2d; }
.kpi-st-star .kpi-card-status { background: #faf0c8; color: #7a5d10; }
.kpi-st-none .kpi-card-status { background: #eef0f3; color: #6b7280; }

/* ── KPI mini-bars (per category O/И/Л) ────────────────────────────────────── */
.kpi-mini-bars {
  display: flex;
  flex-direction: column;
  gap: 3px;
  margin-bottom: 4px;
}
.kpi-mini-row {
  display: grid;
  grid-template-columns: 18px 1fr 64px 42px;
  align-items: center;
  gap: 6px;
  font-size: 11px;
}
.kpi-mini-label {
  font-weight: 700;
  text-align: center;
  font-size: 10px;
  border-radius: 8px;
  padding: 1px 0;
  color: #333;
}
.kpi-mini-M .kpi-mini-label { background: #d3efd3; }
.kpi-mini-C .kpi-mini-label { background: #ffd9a8; }
.kpi-mini-L .kpi-mini-label { background: #c8dcf5; }
.kpi-mini-bg {
  height: 8px;
  background: #eef1f5;
  border-radius: 4px;
  overflow: hidden;
}
.kpi-mini-fill {
  height: 100%;
  border-radius: 4px;
  transition: width .35s ease;
}
.kpi-mini-M .kpi-mini-fill { background: #5cb85c; }
.kpi-mini-C .kpi-mini-fill { background: #ec9032; }
.kpi-mini-L .kpi-mini-fill { background: #4a90d9; }

/* Km bar (Осмотры only) — inverted color logic (limit, not goal). */
.kpi-mini-K .kpi-mini-label {
  background: #e7eef7;
  font-size: 11px;
}
.kpi-mini-K-low  .kpi-mini-fill { background: #8fb3d6; }  /* light blue: low km, vehicle underused */
.kpi-mini-K-ok   .kpi-mini-fill { background: #5cb85c; }  /* green: within limit */
.kpi-mini-K-warn .kpi-mini-fill { background: #f0ad4e; }  /* yellow: 100-130% — high */
.kpi-mini-K-over .kpi-mini-fill { background: #d9534f; }  /* red: >130% — over */
.kpi-mini-K-warn .kpi-mini-pct  { color: #98621a; }
.kpi-mini-K-over .kpi-mini-pct  { color: #b32a26; font-weight: 700; }
.kpi-mini-frac {
  font-size: 11px;
  color: var(--color-text-muted);
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.kpi-mini-pct {
  font-size: 11px;
  font-weight: 600;
  color: var(--color-text);
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.kpi-mini-pct-over { color: #2d6b2d; }

/* ── Badge categories (matches kpi-st-pill colors) ─────────────────────────── */
.kpi-badge-cat-M { background: #d3efd3; border-color: #b4d8b4; color: #1f4d1f; }
.kpi-badge-cat-C { background: #ffd9a8; border-color: #e8b878; color: #5a3d10; }
.kpi-badge-cat-L { background: #c8dcf5; border-color: #95b6dc; color: #1a3a66; }
.kpi-badge-cat-O { background: #e6e6e6; border-color: #c0c0c0; color: #4a4a4a; }
.kpi-badge-cat-M strong, .kpi-badge-cat-C strong,
.kpi-badge-cat-L strong, .kpi-badge-cat-O strong { color: inherit; }

/* ── KPI rating view ─────────────────────────────────────────────────────────── */
#wl-kpi-rating {
  font-size: 13px;
  overflow-y: auto;
  max-height: 600px;
}

.kpi-rating-dept {
  margin-bottom: 16px;
}

.kpi-rating-dept-title {
  font-weight: 700;
  font-size: 13px;
  color: var(--color-text);
  padding: 6px 0;
  border-bottom: 1px solid var(--color-border);
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.kpi-rating-dept-avg {
  font-weight: 400;
  font-size: 12px;
  color: var(--color-text-muted);
}

.kpi-rating-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 5px 0 5px 12px;
  border-bottom: 1px solid rgba(0, 0, 0, .03);
}

.kpi-rating-rank {
  font-size: 12px;
  font-weight: 700;
  color: var(--color-text-muted);
  min-width: 24px;
}

.kpi-rating-name {
  font-size: 13px;
  font-weight: 500;
  color: var(--color-text);
  flex: 0 0 140px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.kpi-rating-progress {
  flex: 1;
  min-width: 100px;
}

.kpi-rating-pct {
  font-size: 13px;
  font-weight: 700;
  min-width: 42px;
  text-align: right;
}

/* ── Workload sub-toolbar ──────────────────────────────────────────────────── */
.wl-subtoolbar {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
  padding: 8px 12px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}

.wl-view-btns {
  display: flex;
  gap: 4px;
}

.wl-view-btn {
  width: 32px;
  height: 32px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-neutral);
  color: var(--color-text-hint);
  cursor: pointer;
  font-size: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .15s, border-color .15s;
}

.wl-view-btn:hover {
  background: var(--color-neutral-dark);
}

.wl-view-btn.active {
  background: #fff3cd;
  border-color: #ffc107;
  color: #856404;
}

/* KPI mode toggle buttons — override square sizing for text labels */
#kpi-view-summary,
#kpi-view-comparison {
  width: auto !important;
  min-width: max-content;
  padding: 6px 16px !important;
  height: auto !important;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
  font-size: 13px;
  gap: 5px;
}

/* KPI unit toggle (Шт / %) */
.wl-kpi-unit-toggle {
  display: flex;
  align-items: center;
  gap: 4px;
}

.wl-unit-btn {
  padding: 4px 12px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-neutral);
  color: var(--color-text-hint);
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
  transition: background .15s, border-color .15s, color .15s;
}

.wl-unit-btn:hover {
  background: var(--color-neutral-dark);
}

.wl-unit-btn.active {
  background: #e3f2fd;
  border-color: #1976d2;
  color: #1565c0;
}

/* ── KPI comparison matrix (heatmap tables) ──────────────────────────────────── */

.kpi-matrix-wrap {
  overflow-x: auto;
  margin-bottom: 24px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-bg);
  max-height: 520px;
  overflow-y: auto;
}

.kpi-heatmap-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
  table-layout: auto;
}

.kpi-heatmap-table thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--color-neutral-dark);
  color: var(--color-text);
  font-weight: 700;
  font-size: 11px;
  text-align: center;
  padding: 6px 8px;
  border-bottom: 2px solid var(--color-border);
  white-space: normal;
  word-break: break-word;
  line-height: 1.2;
  max-width: 120px;
}

.kpi-heatmap-table tbody td {
  padding: 6px 8px;
  text-align: center;
  border: 1px solid var(--color-border);
  font-size: 12px;
  white-space: normal;
  word-break: break-word;
  transition: background .15s;
}

.kpi-heatmap-table tbody tr:hover td {
  filter: brightness(.94);
}

/* Frozen first column (expert name) */
.kpi-matrix-expert-col {
  position: sticky;
  left: 0;
  z-index: 1;
  background: var(--color-bg) !important;
  font-weight: 600;
  font-size: 12px;
  text-align: left !important;
  min-width: 120px;
  max-width: 160px;
  white-space: normal;
  word-break: break-word;
  border-right: 2px solid var(--color-border) !important;
}

.kpi-heatmap-table thead th.kpi-matrix-expert-col {
  z-index: 3;
  background: var(--color-neutral-dark) !important;
}

/* Total column */
.kpi-matrix-total-col {
  background: var(--color-neutral) !important;
  font-weight: 600;
  color: var(--color-text);
}

.kpi-heatmap-table thead th.kpi-matrix-total-col {
  background: var(--color-neutral-dark) !important;
}

.wl-toolbar-sep {
  flex: 1;
}

.wl-filter-group {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

/* ── Deadlines advanced UI ───────────────────────────────────────────────────── */

/* Single-row toolbar — all children on one flex axis */
.deadlines-toolbar {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: 10px;
  margin-top: 15px;
  margin-bottom: 14px;
  overflow-x: auto;
}

.deadlines-toolbar .search-input {
  min-width: 220px;
}

/* Action button groups inside the unified toolbar — controlled by JS via inline style */
.dl-actions-group {
  display: none;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
  margin-left: auto;
}

.dl-actions-group button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 32px;
  padding: 0 12px;
  font-size: 12px;
  white-space: nowrap;
}

/* Primary action buttons — margin-left:auto pins them to the right edge */
.dl-primary-actions {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  margin-left: auto;
  padding-left: 16px;
  border-left: 2px solid var(--color-border);
  gap: 10px;
}

/* Icon-only refresh button */
.btn-icon-sm {
  width: 48px;
  height: 48px;
  padding: 0;
  border: 1.5px solid var(--color-border-input);
  border-radius: 10px;
  background: var(--color-surface);
  color: var(--color-text-muted);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background .15s, border-color .15s, color .15s;
}

.btn-icon-sm:hover:not(:disabled) {
  background: #f0f4fb;
  border-color: var(--color-primary);
  color: var(--color-primary);
}

.btn-icon-sm:disabled {
  opacity: .45;
  cursor: not-allowed;
}

/* Upload-date history selector in deadlines toolbar */
.dl-date-sel {
  height: 32px;
  padding: 0 8px;
  border: 1.5px solid var(--color-border-input);
  border-radius: var(--radius-md);
  background: #fff;
  font-size: 12px;
  font-family: var(--font-sans);
  color: var(--color-text);
  outline: none;
  cursor: pointer;
  max-width: 170px;
}

.dl-date-sel:focus {
  border-color: var(--color-primary);
}

/* Compact variant inside stats bar */
.dl-date-sel-sm {
  height: 26px;
  padding: 0 8px;
  font-size: 12px;
  min-width: 160px;
  max-width: 220px;
}

/* ── Square icon-only modifier (used on primary toolbar buttons) ────────────── */
.dl-icon-btn {
  position: relative;
  width: 48px;
  height: 48px;
  padding: 0;
  border-radius: 10px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

/* ── Outline icon button — white bg, visible border, dark icon ──────────────── */
.btn-icon-circle {
  width: 48px;
  height: 48px;
  padding: 0;
  border: 1.5px solid var(--color-border);
  border-radius: 10px;
  background: var(--color-surface);
  color: var(--color-text);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background .15s, border-color .15s, color .15s;
}

.btn-icon-circle:hover:not(:disabled) {
  background: #f0f4fb;
  border-color: var(--color-primary);
  color: var(--color-primary);
}

.btn-icon-circle:disabled {
  opacity: .45;
  cursor: not-allowed;
}

/* CSS tooltip via data-tooltip attribute */
.dl-icon-btn[data-tooltip]::before,
.dl-icon-btn[data-tooltip]::after {
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  pointer-events: none;
  opacity: 0;
  transition: opacity .15s ease, transform .15s ease;
  transform: translateX(-50%) translateY(4px);
  z-index: 9999;
  white-space: nowrap;
}

.dl-icon-btn[data-tooltip]::after {
  content: attr(data-tooltip);
  background: rgba(30, 30, 40, .88);
  color: #fff;
  font-size: 12px;
  font-family: var(--font-sans);
  font-weight: 500;
  padding: 5px 10px;
  border-radius: 6px;
  line-height: 1.4;
  backdrop-filter: blur(4px);
}

.dl-icon-btn[data-tooltip]::before {
  content: '';
  border: 5px solid transparent;
  border-top-color: rgba(30, 30, 40, .88);
  bottom: calc(100% + 0px);
}

.dl-icon-btn[data-tooltip]:hover::before,
.dl-icon-btn[data-tooltip]:hover::after {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* ── Excel Upload button — outline green, square ────────────────────────────── */
.btn-excel-upload {
  border: 1.5px solid #1b8c4a;
  background: var(--color-surface);
  color: #1b8c4a;
  cursor: pointer;
  box-shadow: none;
  transition: background .15s, color .15s, border-color .15s;
}

.btn-excel-upload:hover:not(:disabled) {
  background: #e8f5e9;
  color: #0e6b38;
  border-color: #0e6b38;
}

.btn-excel-upload:active:not(:disabled) {
  background: #c8e6c9;
}

.btn-excel-upload:disabled {
  opacity: .45;
  cursor: not-allowed;
}

/* ── Master Send button — outline indigo, square ────────────────────────────── */
.btn-master-send {
  border: 1.5px solid #3f51b5;
  background: var(--color-surface);
  color: #3f51b5;
  cursor: pointer;
  box-shadow: none;
  transition: background .15s, color .15s, border-color .15s;
}

.btn-master-send:hover:not(:disabled) {
  background: #e8eaf6;
  color: #283593;
  border-color: #283593;
}

.btn-master-send:active:not(:disabled) {
  background: #c5cae9;
}

.btn-master-send:disabled {
  opacity: .45;
  cursor: not-allowed;
}

/* Outline-success button (white bg, green border + text) */
.btn-outline-success {
  padding: 7px 16px;
  border: 1.5px solid var(--color-success);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  color: var(--color-success);
  font-size: 13px;
  font-weight: 600;
  font-family: var(--font-sans);
  cursor: pointer;
  white-space: nowrap;
  transition: background .15s, color .15s;
}

.btn-outline-success:hover:not(:disabled) {
  background: var(--color-success-bg);
}

.btn-outline-success:disabled {
  opacity: .45;
  cursor: not-allowed;
}

/* ── Success button (green) ────────────────────────────────────────────────────── */
.btn-success {
  padding: 7px 14px;
  border: 1px solid var(--color-success);
  border-radius: var(--radius-md);
  background: var(--color-success);
  color: #fff;
  font-size: 13px;
  font-family: var(--font-sans);
  cursor: pointer;
  white-space: nowrap;
  transition: background .15s, border-color .15s;
}

.btn-success:hover:not(:disabled) {
  background: var(--color-success-hover);
  border-color: var(--color-success-hover);
}

.btn-success:disabled {
  opacity: .45;
  cursor: not-allowed;
}

/* ── Warning button (orange) ─────────────────────────────────────────────────── */
.btn-warning {
  padding: 7px 14px;
  border: 1px solid #e65100;
  border-radius: var(--radius-md);
  background: #e65100;
  color: #fff;
  font-size: 13px;
  font-family: var(--font-sans);
  cursor: pointer;
  white-space: nowrap;
  transition: background .15s, border-color .15s;
}

.btn-warning:hover:not(:disabled) {
  background: #bf360c;
  border-color: #bf360c;
}

.btn-warning:disabled {
  opacity: .45;
  cursor: not-allowed;
}

/* ── Email remind modal ──────────────────────────────────────────────────────── */
.email-remind-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  align-items: start;
  margin-bottom: 16px;
}

@media (max-width: 680px) {
  .email-remind-grid {
    grid-template-columns: 1fr;
  }
}

.email-remind-col .field>label {
  display: block;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--color-text-hint);
  margin-bottom: 5px;
}

.email-remind-textarea {
  width: 100%;
  box-sizing: border-box;
  padding: 8px 10px;
  border: 1px solid var(--color-border-input);
  border-radius: var(--radius-md);
  font-size: 13px;
  font-family: var(--font-sans);
  line-height: 1.6;
  resize: vertical;
}

.email-remind-textarea:focus {
  outline: none;
  border-color: var(--color-primary);
}

.email-vars-hint {
  font-size: 11px;
  color: var(--color-text-muted);
  margin-top: 6px;
}

.email-vars-hint code {
  background: var(--color-neutral);
  padding: 1px 5px;
  border-radius: 3px;
  font-size: 11px;
  color: var(--color-primary);
  font-family: "Consolas", "Courier New", monospace;
}

.email-preview-box {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 14px 16px;
  background: #f8fafc;
  font-size: 13px;
  line-height: 1.7;
  min-height: 220px;
  max-height: 360px;
  overflow-y: auto;
  color: var(--color-text);
}

.email-preview-subject {
  font-weight: 700;
  font-size: 13px;
  color: var(--color-primary);
  border-bottom: 1px solid var(--color-border);
  padding-bottom: 6px;
  margin-bottom: 10px;
}

.email-preview-empty {
  color: var(--color-text-muted);
  font-style: italic;
  font-size: 12px;
}

/* ── Deadlines layout: content column + right sidebar ────────────────────────── */
.deadlines-layout {
  display: flex;
  gap: 20px;
  align-items: flex-start;
}

.deadlines-content {
  flex: 1 1 0;
  min-width: 0;
  overflow-x: auto;
}

.deadlines-right-col,
.vacations-right-col {
  width: 280px;
  flex-shrink: 0;
  position: sticky;
  top: 20px;
}

/* Компактная квадратная кнопка-иконка для контекстных действий в шапке
   таблицы (Сотрудники: ✏️ Редактировать / 🗑 Удалить). Выравнивается по
   высоте с .btn-primary через те же padding/line-height из базового стиля. */
.btn-icon-sq {
  width: 34px;
  padding-left: 0;
  padding-right: 0;
  text-align: center;
  font-size: 14px;
  line-height: 1;
}

/* ── Employees / Tasks tab — 2-колоночный layout с правой инфопанелью ──────── */
.emp-layout,
.tasks-layout {
  display: flex;
  gap: 20px;
  align-items: flex-start;
}
.emp-content,
.tasks-content {
  flex: 1 1 0;
  min-width: 0;
}
.emp-right-col,
.tasks-right-col {
  width: 300px;
  flex-shrink: 0;
  position: sticky;
  top: 20px;
}
.emp-sidebar,
.tasks-sidebar {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-height: calc(100vh - 130px);
  overflow-y: auto;
}

/* «📊 Распределение по отделам» — нативный <details>/<summary> аккордеон.
   Свёрнут: название + count + %. Развёрнут: список ФИО (клик → скролл в таблице). */
.emp-dept-acc {
  border-bottom: 1px solid var(--color-border);
}
.emp-dept-acc:last-child { border-bottom: none; }
.emp-dept-acc summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 6px 4px;
  cursor: pointer;
  list-style: none;
  font-size: 12px;
  gap: 8px;
}
.emp-dept-acc summary::-webkit-details-marker { display: none; }
.emp-dept-acc summary::before {
  content: '▸';
  margin-right: 4px;
  font-size: 10px;
  color: var(--color-text-muted);
  transition: transform .15s;
  display: inline-block;
}
.emp-dept-acc[open] summary::before { transform: rotate(90deg); }
.emp-dept-acc summary:hover { background: rgba(26, 58, 107, 0.04); }
.emp-dept-name {
  font-weight: 600;
  color: var(--color-text);
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.emp-dept-meta {
  display: inline-flex;
  gap: 6px;
  align-items: center;
  flex-shrink: 0;
}
.emp-dept-count {
  background: var(--color-neutral);
  color: var(--color-text);
  padding: 1px 7px;
  border-radius: 9px;
  font-size: 11px;
  font-weight: 700;
  min-width: 22px;
  text-align: center;
}
.emp-dept-pct {
  font-size: 11px;
  color: var(--color-text-muted);
  min-width: 38px;
  text-align: right;
}
.emp-dept-list {
  list-style: none;
  margin: 4px 0 8px 18px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.emp-dept-list li {
  font-size: 12px;
  padding: 3px 6px;
  border-radius: 3px;
  cursor: pointer;
  color: var(--color-text-muted);
  transition: background .12s, color .12s;
}
.emp-dept-list li:hover {
  background: rgba(26, 58, 107, 0.06);
  color: var(--color-text);
}

/* «⚠ Карточки требуют внимания» — оранжевый счётчик вместо нейтрального серого */
.emp-dept-count-warn {
  background: #fef3c7;
  color: #b45309;
}

/* «🎂 Дни рождения (7 дней)» — компактный список */
.emp-bd-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.emp-bd-list li {
  padding: 6px 6px;
  border-radius: 4px;
  cursor: pointer;
  transition: background .12s;
}
.emp-bd-list li:hover {
  background: rgba(26, 58, 107, 0.05);
}
.emp-bd-name {
  font-size: 12px;
  font-weight: 600;
  color: var(--color-text);
}
.emp-bd-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 2px;
  font-size: 11px;
  color: var(--color-text-muted);
}
.emp-bd-when b {
  color: var(--color-danger);
}

/* «📈 Динамика штата (год)» — табличка-сводка */
.emp-dyn-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 5px 0;
  font-size: 12px;
  border-bottom: 1px dashed var(--color-border);
}
.emp-dyn-row:last-child { border-bottom: none; }
.emp-dyn-row-total {
  font-weight: 700;
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
  margin-top: 2px;
}
.emp-dyn-label {
  color: var(--color-text-muted);
}
.emp-dyn-row-total .emp-dyn-label {
  color: var(--color-text);
}
.emp-dyn-value {
  font-weight: 600;
  color: var(--color-text);
}
.emp-dyn-pos { color: var(--color-success); }
.emp-dyn-neg { color: var(--color-danger); }
.emp-dyn-hint {
  margin-top: 8px;
  padding: 5px 7px;
  font-size: 11px;
  line-height: 1.35;
  color: var(--color-warning-text);
  background: var(--color-warning-bg);
  border-radius: 3px;
}

/* ── Tasks tab — виджеты правой инфопанели ──────────────────────────────────── */

/* «📊 Статус задач» — строки-счётчики (стиль аналогичен emp-dyn-row) */
.tasks-st-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 5px 0;
  font-size: 12px;
  border-bottom: 1px dashed var(--color-border);
}
.tasks-st-row:last-child { border-bottom: none; }
.tasks-st-label { color: var(--color-text); }
.tasks-st-value { font-weight: 700; color: var(--color-text); }

/* «⚠ Просрочки» и «📅 Сегодня и завтра» — компактный список задач */
.tasks-od-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.tasks-od-list li {
  padding: 6px 6px;
  border-radius: 4px;
  background: rgba(0, 0, 0, 0.02);
}
.tasks-od-title {
  font-size: 12px;
  font-weight: 600;
  color: var(--color-text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.tasks-od-meta {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-top: 2px;
  font-size: 11px;
  color: var(--color-text-muted);
  gap: 8px;
}
.tasks-od-assignee {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1;
  min-width: 0;
}
.tasks-od-age {
  color: var(--color-danger);
  font-weight: 600;
  flex-shrink: 0;
}
.tasks-od-when {
  color: var(--color-text-muted);
  font-weight: 600;
  flex-shrink: 0;
}
.tasks-od-when-today {
  color: var(--color-danger);
}
.tasks-more-hint {
  font-size: 11px;
  color: var(--color-text-muted);
  font-style: italic;
  margin-top: 4px;
  padding-left: 6px;
}

/* Кратковременная подсветка строки таблицы при клике на ФИО в аккордеоне */
.emp-row-flash {
  animation: emp-row-flash 1.5s ease-out;
}
@keyframes emp-row-flash {
  0%   { background-color: #fef3c7; }
  100% { background-color: transparent; }
}

/* ── Control buttons above sidebar ──────────────────────────────────────────── */
.panel-actions {
  display: flex;
  flex-direction: row;
  gap: 8px;
  justify-content: flex-end;
  margin-bottom: 8px;
  width: 100%;
}

.deadlines-sidebar {
  background: #f8fafc;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 14px 16px;
  max-height: calc(100vh - 340px);
  overflow-y: auto;
}

/* Stats value accent badge inside sidebar stats widget */
.dl-sb-stat {
  color: var(--color-text);
}

.dl-stat-val {
  font-weight: 700;
  color: #fff;
  background-color: #ff9800;
  padding: 2px 8px;
  border-radius: 6px;
  font-size: 1em;
}

/* Workload list rows inside sidebar */
.dl-sb-idle-name {
  font-size: 12px;
  line-height: 1.7;
  color: var(--color-danger);
  font-weight: 600;
}

.dl-sb-all-busy {
  color: var(--color-success);
  font-style: italic;
}

/* Dept group: native <details> accordion */
details.dl-sb-dept-group {
  margin-bottom: 10px;
}

details.dl-sb-dept-group:last-child {
  margin-bottom: 0;
}

details.dl-sb-dept-group>summary.dl-sb-dept-header {
  list-style: none;
  cursor: pointer;
  user-select: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--color-text-muted);
  padding: 4px 0 3px;
  margin-bottom: 2px;
  border-bottom: 1px solid var(--color-border);
  transition: color .15s;
}

details.dl-sb-dept-group>summary.dl-sb-dept-header:hover {
  color: var(--color-primary);
}

details.dl-sb-dept-group>summary.dl-sb-dept-header::-webkit-details-marker {
  display: none;
}

details.dl-sb-dept-group>summary.dl-sb-dept-header::after {
  content: '▾';
  font-size: 10px;
  line-height: 1;
  transition: transform .2s;
}

details.dl-sb-dept-group[open]>summary.dl-sb-dept-header::after {
  transform: scaleY(-1);
}

/* Busy-expert rows */
.dl-sb-busy-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 12px;
  padding: 3px 0;
  border-bottom: 1px solid #f0f0f0;
  gap: 8px;
}

.dl-sb-busy-row:last-child {
  border-bottom: none;
}

/* Row variant with progress bar */
.dl-sb-busy-row--bar {
  flex-direction: column;
  align-items: stretch;
  padding: 4px 0;
  gap: 3px;
}

.dl-sb-busy-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
}

/* Progress bar track + fill */
.dl-sb-progress {
  height: 5px;
  background: #e4e9ef;
  border-radius: 2px;
  overflow: hidden;
}

.dl-sb-progress-fill {
  height: 100%;
  border-radius: 2px;
  transition: width .35s ease;
}

.dl-sb-progress--ok {
  background: var(--color-success);
}

.dl-sb-progress--warn {
  background: var(--color-warning-text);
}

.dl-sb-progress--danger {
  background: var(--color-danger);
}

/* Name / count styles */
.dl-sb-busy-name {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dl-sb-name-over {
  color: var(--color-danger);
  font-weight: 700;
}

.dl-sb-count {
  font-weight: 700;
  color: var(--color-primary);
  min-width: 28px;
  text-align: right;
  flex-shrink: 0;
  font-size: 11px;
}

.dl-sb-count--ok {
  color: var(--color-success);
}

.dl-sb-count--warn {
  color: var(--color-warning-text);
}

.dl-sb-count--danger {
  color: var(--color-danger);
}

@media (max-width: 1200px) {
  .deadlines-layout {
    flex-direction: column;
  }

  .deadlines-right-col,
  .vacations-right-col {
    width: 100%;
    position: static;
  }

  .deadlines-sidebar {
    max-height: none;
  }
}

/* Stats bar: Загружено · В работе · База от */
.dl-stats-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

/* Small action icons (🗑 ⚙) visually separated from date/history controls */
.dl-stats-bar #btn-delete-upload {
  margin-left: 12px;
}

/* "Всего" / total column in stats table */
.dl-col-total {
  background-color: #f4f6fb !important;
  border-left: 2px solid #d8dff0 !important;
  border-right: 2px solid #d8dff0 !important;
  font-weight: 700 !important;
  font-size: 0.9rem !important;
  color: #212529 !important;
}

.dl-stat-chip {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
  border: 1px solid transparent;
}

.dl-stat-blue {
  background: var(--color-info-bg);
  color: var(--color-info-text);
  border-color: var(--color-border-blue);
}

.dl-stat-green {
  background: var(--color-success-bg);
  color: var(--color-success);
  border-color: var(--color-success-border);
}

.dl-stat-date {
  font-size: 12px;
  color: var(--color-text-muted);
  white-space: nowrap;
}

/* Threshold dropdown block */
.dl-threshold-block {
  display: flex;
  align-items: center;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 0 4px 0 10px;
  white-space: nowrap;
  height: 32px;
}

.dl-threshold-block select {
  border: none;
  background: transparent;
  font-size: 12px;
  font-family: var(--font-sans);
  font-weight: 700;
  color: var(--color-primary);
  cursor: pointer;
  outline: none;
  padding: 0 4px;
  height: 100%;
}

/* Action bar above the "Все дела" table */
.dl-action-bar {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  margin-bottom: 8px;
}

.dl-action-group {
  display: inline-flex;
  gap: 0;
}

.dl-action-group button {
  padding: 5px 12px;
  font-size: 12px;
  border-radius: 0;
}

.dl-action-group button:first-child {
  border-radius: var(--radius-md) 0 0 var(--radius-md);
}

.dl-action-group button:last-child {
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  margin-left: -1px;
}

/* ── Service-type pill badges (Soft UI pastel palette) ───────────────────────── */
.svc-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 10px;
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
  line-height: 1.55;
  border: 1px solid transparent;
}

.svc-badge--osago {
  background: #e0f2fe;
  color: #0369a1;
  border-color: #bae6fd;
}

.svc-badge--court {
  background: #ede9fe;
  color: #6d28d9;
  border-color: #c4b5fd;
}

.svc-badge--smeta {
  background: #dcfce7;
  color: #166534;
  border-color: #bbf7d0;
}

.svc-badge--calc {
  background: #dbeafe;
  color: #1d4ed8;
  border-color: #bfdbfe;
}

.svc-badge--estate {
  background: #ffedd5;
  color: #c2410c;
  border-color: #fed7aa;
}

.svc-badge--eval {
  background: #d1fae5;
  color: #065f46;
  border-color: #a7f3d0;
}

.svc-badge--default {
  background: #f1f5f9;
  color: #475569;
  border-color: #e2e8f0;
}

/* ── Soft deadline cell backgrounds ──────────────────────────────────────────── */
.dl-td-age--fresh {
  background: #f0fdf4;
}

.dl-td-age--normal {
  background: #fefce8;
}

.dl-td-age--aging {
  background: #fff7ed;
}

.dl-td-age--urgent {
  background: #fef2f2;
}

/* ── Deadline table checkbox column ──────────────────────────────────────────── */
.dl-th-cb,
.dl-td-cb {
  width: 36px;
  min-width: 36px;
  padding: 0 4px !important;
  text-align: center;
  vertical-align: middle;
}

.dl-row-cb,
#dl-select-all {
  width: 14px;
  height: 14px;
  cursor: pointer;
  accent-color: var(--color-primary);
  vertical-align: middle;
}

/* Sub-tabs (inner tabs for the deadlines module) */
.dl-subtabs {
  display: flex;
  gap: 2px;
  margin-bottom: 14px;
  border-bottom: 2px solid var(--color-border);
  padding-bottom: 0;
}

.dl-subtab {
  padding: 8px 18px;
  border: none;
  background: none;
  font-size: 13px;
  font-weight: 500;
  font-family: var(--font-sans);
  color: var(--color-text-muted);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
  transition: color .15s, border-color .15s;
  display: flex;
  align-items: center;
  gap: 6px;
}

.dl-subtab:hover {
  color: var(--color-primary);
}

.dl-subtab.active {
  color: var(--color-primary);
  font-weight: 700;
  border-bottom-color: var(--color-primary);
}

.dl-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 9px;
  background: var(--color-danger);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  line-height: 1;
}

.dl-badge.empty {
  background: var(--color-neutral);
  color: var(--color-text-muted);
}

/* Department stats table */
.dl-stats-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}

.dl-stats-table th {
  background: var(--color-primary);
  color: #fff;
  padding: 6px 8px;
  text-align: center;
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
}

.dl-stats-table th:first-child {
  text-align: left;
}

.dl-stats-table td {
  padding: 5px 8px;
  border: 1px solid var(--color-border);
  text-align: center;
  vertical-align: middle;
}

.dl-stats-table td:first-child {
  text-align: left;
  font-weight: 600;
}

.dl-stats-table tbody tr:nth-child(even) td {
  background: var(--color-bg);
}

.dl-stats-table tr.dl-stats-total td {
  background: #1a3a6b;
  color: #fff;
  font-weight: 700;
}

.dl-cell-urgent {
  background: #fee2e2 !important;
  color: #c62828;
  font-weight: 700;
}

.dl-cell-warning {
  background: #fff9c4 !important;
  color: #f57f17;
  font-weight: 700;
}

.dl-cell-ok {
  background: #e8f5e9 !important;
  color: #2e7d32;
}

.dl-cell-closed {
  color: var(--color-success);
}

.dl-cell-new {
  color: var(--color-danger);
}

/* Side drawer (assignment panel) */
.dl-assign-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, .35);
  z-index: 900;
  display: flex;
  justify-content: flex-end;
}

.dl-assign-overlay.hidden {
  display: none;
}

.dl-assign-drawer {
  width: 360px;
  max-width: 96vw;
  background: var(--color-surface);
  height: 100%;
  box-shadow: -4px 0 24px rgba(0, 0, 0, .18);
  display: flex;
  flex-direction: column;
  animation: dlSlideIn .2s ease;
}

@keyframes dlSlideIn {
  from {
    transform: translateX(100%);
  }

  to {
    transform: translateX(0);
  }
}

.dl-assign-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: 20px 20px 14px;
  border-bottom: 1px solid var(--color-border);
}

.dl-assign-case-num {
  font-size: 17px;
  font-weight: 700;
  color: var(--color-text);
  font-family: var(--font-mono);
}

.dl-assign-meta {
  font-size: 12px;
  color: var(--color-text-muted);
  margin-top: 4px;
}

.dl-assign-body {
  padding: 20px;
  flex: 1;
  overflow-y: auto;
}

.dl-assign-body .field {
  margin-bottom: 16px;
}

.dl-assign-body label {
  display: block;
  font-size: 12px;
  font-weight: 600;
  color: var(--color-text-hint);
  margin-bottom: 5px;
}

.dl-assign-body select,
.dl-assign-body textarea {
  width: 100%;
  box-sizing: border-box;
  padding: 7px 10px;
  border: 1px solid var(--color-border-input);
  border-radius: var(--radius-md);
  font-size: 13px;
  font-family: var(--font-sans);
  outline: none;
  transition: border-color .15s;
}

.dl-assign-body select:focus,
.dl-assign-body textarea:focus {
  border-color: var(--color-primary);
}

/* Row fade-out animation for unassigned list */
@keyframes dlFadeSlideOut {
  to {
    opacity: 0;
    max-height: 0;
    padding: 0;
    border: none;
    overflow: hidden;
  }
}

.dl-row-remove {
  animation: dlFadeSlideOut .4s forwards;
}

/* ── Employee status badges (pill-shaped, override circle .badge) ────────────── */
.badge-temp,
.badge-reso {
  width: auto;
  height: auto;
  border-radius: 10px;
  font-size: 11px;
  font-weight: 600;
  padding: 2px 7px;
}

.badge-temp {
  background: #fff3e0;
  color: #e65100;
  border: 1px solid #ffcc80;
}

.badge-reso {
  background: #e3f2fd;
  color: #1565c0;
  border: 1px solid #90caf9;
}

.badge-manager {
  background: #fff8e1;
  color: #1a237e;
  border: 1px solid #ffe082;
}

/* ── Employee table enhancements ─────────────────────────────────────────────── */
.emp-name-cell {
  display: flex;
  align-items: center;
  gap: 10px;
}

.emp-contacts {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: 12px;
  color: var(--color-text-muted);
  line-height: 1.5;
}

.emp-contact-link {
  color: var(--color-primary);
  text-decoration: none;
  font-size: 12px;
}

.emp-contact-link:hover {
  text-decoration: underline;
}

/* ── Employee specialization chips (modal svc_types display) ────────────────── */
.emp-svc-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  min-height: 28px;
  padding: 4px 0;
}

.emp-svc-chip {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 12px;
  background: var(--color-info-bg);
  color: var(--color-info-text);
  font-size: 12px;
  font-weight: 500;
  white-space: nowrap;
}

/* ── Custom multi-select dropdown (absolute float, no height impact) ─────────── */
.custom-multiselect {
  position: relative;
}

.multiselect-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 7px 10px;
  border: 1px solid var(--color-border-input);
  border-radius: var(--radius-md);
  background: #fafafa;
  cursor: pointer;
  font-size: 13px;
  font-family: var(--font-sans);
  color: var(--color-text);
  user-select: none;
  transition: border-color .15s, background .15s;
}

.multiselect-header:hover,
.custom-multiselect.open .multiselect-header {
  border-color: var(--color-primary);
  background: #fff;
}

.multiselect-title {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--color-text-muted);
}

.custom-multiselect.has-selection .multiselect-title {
  color: var(--color-text);
  font-weight: 500;
}

.multiselect-arrow {
  font-size: 10px;
  color: var(--color-text-muted);
  margin-left: 8px;
  flex-shrink: 0;
  transition: transform .2s;
}

.custom-multiselect.open .multiselect-arrow {
  transform: rotate(180deg);
}

.multiselect-dropdown {
  position: absolute;
  top: calc(100% + 3px);
  left: 0;
  right: 0;
  z-index: 1000;
  background: #fff;
  border: 1px solid var(--color-border-input);
  border-radius: var(--radius-md);
  box-shadow: 0 4px 12px rgba(0, 0, 0, .12);
  max-height: 200px;
  overflow-y: auto;
}

.multiselect-dropdown .msd-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  cursor: pointer;
  font-size: 13px;
  font-weight: 400 !important;
  color: var(--color-text) !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
  user-select: none;
}

.multiselect-dropdown .msd-item:hover {
  background: var(--color-info-bg);
}

.multiselect-dropdown .msd-item:has(input:checked) {
  background: #eef4ff;
  color: var(--color-primary) !important;
  font-weight: 500 !important;
}

.multiselect-dropdown .msd-item input[type="checkbox"] {
  accent-color: var(--color-primary);
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  cursor: pointer;
  margin: 0;
}

.multiselect-dropdown .msd-dept {
  font-size: 11px;
  color: var(--color-text-muted);
  margin-left: auto;
  white-space: nowrap;
}

.multiselect-dropdown .msd-empty {
  padding: 10px 12px;
  font-size: 12px;
  color: var(--color-text-muted);
  font-style: italic;
}

/* ── Employee modal: compact grid + toggle group ─────────────────────────────── */
#modal-employee .emp-form-grid {
  gap: 10px 16px;
}

.emp-toggles-row {
  display: flex;
  gap: 16px;
  justify-content: space-between;
  flex-wrap: wrap;
  padding: 10px 14px;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}

/* ── Toggle switch ───────────────────────────────────────────────────────────── */
.toggle-wrap {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  user-select: none;
}

.toggle-input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
  pointer-events: none;
}

.toggle-track {
  width: 40px;
  height: 22px;
  border-radius: 11px;
  background: var(--color-neutral-dark);
  position: relative;
  transition: background .2s;
  flex-shrink: 0;
}

.toggle-input:checked+.toggle-track {
  background: var(--color-danger);
}

.toggle-input.toggle-success:checked+.toggle-track {
  background: var(--color-success);
}

.toggle-input.toggle-warning:checked+.toggle-track {
  background: var(--color-warning-text);
}

.toggle-input.toggle-info:checked+.toggle-track {
  background: var(--color-info-text);
}

.toggle-thumb {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .3);
  transition: left .2s;
}

.toggle-input:checked+.toggle-track .toggle-thumb {
  left: 21px;
}

/* ── Responsive: collapse form-grid to 1 column on narrow screens ────────────── */
@media (max-width: 620px) {
  .form-grid {
    grid-template-columns: 1fr !important;
  }

  .form-grid .field.full {
    grid-column: 1 !important;
  }

  .modal-box {
    padding: 20px 16px;
  }
}

/* ── Distribution rules matrix modal ────────────────────────────────────────── */
.dist-rules-modal {
  max-width: min(1200px, 94vw);
  width: 94vw;
  overflow-x: hidden;
}

.dist-rules-legend {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 11px;
  margin-top: 4px;
  flex-wrap: wrap;
}

.dist-legend-deny {
  color: var(--color-danger);
  font-weight: 600;
}

.dist-legend-only {
  color: var(--color-primary);
  font-weight: 600;
}

.dist-rules-toolbar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 0 12px;
  border-bottom: 1px solid var(--color-border);
  margin-bottom: 12px;
}

.dist-rules-table-wrap {
  overflow-x: auto;
  overflow-y: auto;
  max-height: 55vh;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}

.dist-rules-table {
  width: 100%;
  font-size: 12px;
}

.dist-rule-row {
  cursor: pointer;
}

.dist-rule-row:hover td {
  background: var(--color-info-bg);
}

.dist-rule-row.selected td {
  background: #eef0fb !important;
  outline: none;
}

.dist-rule-row.dist-rule-inactive td:not(:last-child) {
  opacity: .45;
}

.dist-rules-empty {
  text-align: center;
  color: var(--color-text-muted);
  font-size: 13px;
  padding: 24px 0;
  font-style: italic;
}

.dist-cell-deny {
  color: var(--color-danger);
  font-size: 12px;
  word-break: break-word;
  max-width: 180px;
  display: block;
}

.dist-cell-only {
  color: var(--color-primary);
  font-size: 12px;
  word-break: break-word;
  max-width: 180px;
  display: block;
}

.dist-cell-empty {
  color: var(--color-text-muted);
  font-size: 13px;
}

/* ── Distribution limits modal ──────────────────────────────────────────────── */
.dist-limits-legend {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 10px 0 14px;
  border-bottom: 1px solid var(--color-border);
  margin-bottom: 12px;
  flex-shrink: 0;
}

.dist-limits-legend-chips {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 12px;
  color: var(--color-text-muted);
  flex-wrap: wrap;
}

.dl-legend-chip {
  width: 14px;
  height: 14px;
  border-radius: 3px;
  border: 1px solid rgba(0, 0, 0, .12);
  display: inline-block;
  flex-shrink: 0;
}

.limit-reached-chip {
  background: #fca5a5;
}

.limit-warning-chip {
  background: #fecaca;
}

/* Limits modal — flex layout so footer is always visible */
#modal-dist-limits .modal-box {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  /* kills the outer double-scroll */
  max-height: 92vh;
}

#modal-dist-limits .modal-footer {
  flex-shrink: 0;
  /* footer never squishes */
}

.dist-limits-table-wrap {
  flex: 1;
  min-height: 0;
  /* allows flex child to shrink below content height */
  overflow-y: auto;
  /* sole vertical scroll source */
  overflow-x: auto;
  max-height: none;
  /* removed fixed 56vh — flex handles height */
}

.dist-limits-table {
  width: 100%;
}

tr.limit-reached td {
  background: #fca5a5 !important;
}

tr.limit-warning td {
  background: #fecaca !important;
}

.limit-inline-input {
  width: 80px;
  padding: 4px 6px;
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  font-size: 13px;
  font-family: var(--font-sans);
  text-align: center;
  background: transparent;
  outline: none;
  transition: border-color .15s, background .15s;
}

.limit-inline-input:hover {
  border-color: var(--color-border-input);
  background: #fff;
}

.limit-inline-input:focus {
  border-color: var(--color-primary);
  background: #fff;
}

/* ── Rule add/edit form ─────────────────────────────────────────────────────── */
.rule-param-block {
  margin-bottom: 6px;
  padding: 8px 10px;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}

.rule-param-label {
  display: block;
  font-size: 10px;
  font-weight: 700;
  color: var(--color-text-hint);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 4px;
}

.rule-param-row {
  display: grid;
  grid-template-columns: 150px 1fr;
  gap: 8px;
  align-items: start;
}

.rule-type-select {
  padding: 5px 8px;
  border: 1px solid var(--color-border-input);
  border-radius: var(--radius-md);
  font-size: 13px;
  font-family: var(--font-sans);
  background: #fff;
  outline: none;
  cursor: pointer;
  width: 100%;
  transition: border-color .15s;
}

.rule-type-select:focus {
  border-color: var(--color-primary);
}

.rule-values-input {
  width: 100%;
  box-sizing: border-box;
  padding: 5px 8px;
  border: 1px solid var(--color-border-input);
  border-radius: var(--radius-md);
  font-size: 12px;
  font-family: var(--font-sans);
  outline: none;
  resize: vertical;
  line-height: 1.5;
  transition: border-color .15s;
}

.rule-values-input:focus {
  border-color: var(--color-primary);
}

.rule-values-input:disabled {
  background: var(--color-neutral);
  color: var(--color-text-muted);
  cursor: not-allowed;
}

/* ── Rule form: checkbox-list controls ──────────────────────────────────────── */
.rule-type-wide {
  display: block;
  width: 100%;
  margin-bottom: 6px;
}

/* ── Rule form: compact toolbar (toggle left + mode buttons right) ─────────── */
.rule-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  margin-bottom: 6px;
}

.rule-tgl-btn {
  font-size: 11px;
  font-weight: 500;
  padding: 2px 8px;
  background: var(--color-surface);
  color: var(--color-text-secondary);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  cursor: pointer;
  white-space: nowrap;
  transition: background .12s, border-color .12s;
}

.rule-tgl-btn:hover {
  background: var(--color-neutral);
  border-color: var(--color-text-muted);
}

.rule-mode-group {
  display: flex;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  overflow: hidden;
}

.rule-mode-input {
  display: none;
}

.rule-mode-lbl {
  padding: 2px 7px;
  font-size: 10px;
  line-height: 1.6;
  cursor: pointer;
  background: var(--color-surface);
  color: var(--color-text-muted);
  border-right: 1px solid var(--color-border);
  transition: background .12s, color .12s;
  user-select: none;
}

.rule-mode-lbl:last-child {
  border-right: none;
}

.rule-mode-input:checked+.rule-mode-deny {
  background: #fce4e4;
  color: var(--color-danger);
  font-weight: 600;
}

.rule-mode-input:checked+.rule-mode-only {
  background: #fff4d6;
  color: #b8860b;
  font-weight: 600;
}

.rule-mode-lbl:hover {
  background: var(--color-neutral);
}

.rule-cb-list {
  height: calc(100vh - 450px);
  min-height: 150px;
  overflow-y: auto;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: 5px 8px;
  background: #f8fafc;
}

.rule-cb-list label {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 2px 0;
  font-size: 12px;
  cursor: pointer;
  color: var(--color-text);
  user-select: none;
}

.rule-cb-list label:hover {
  color: var(--color-primary);
}

.rule-cb-list::-webkit-scrollbar {
  width: 4px;
}

.rule-cb-list::-webkit-scrollbar-track {
  background: transparent;
}

.rule-cb-list::-webkit-scrollbar-thumb {
  background: var(--color-border);
  border-radius: 2px;
}

.rule-cb-list::-webkit-scrollbar-thumb:hover {
  background: var(--color-text-muted);
}

/* ── Rule form: 4-column criteria grid ───────────────────────────────────────── */
.criteria-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  gap: 8px;
  align-items: start;
  margin-bottom: 8px;
}

.rradio-only:checked+.rradio-only-lbl {
  background: var(--color-success);
  color: #fff;
  border-color: var(--color-success);
  font-weight: 600;
}

/* ── Distribution preview modal ─────────────────────────────────────────────── */
#dist-preview-table {
  font-size: 12px;
}

#dist-preview-table thead th {
  white-space: nowrap;
}

#dist-preview-table td:nth-child(7) {
  /* Кандидат column */
  font-weight: 600;
  color: var(--color-primary);
}

#dist-preview-table input[type="checkbox"] {
  width: 15px;
  height: 15px;
  accent-color: var(--color-primary);
  cursor: pointer;
}

#dist-preview-table tr:has(input:not(:checked)) td {
  opacity: 0.45;
}

#dist-preview-table tr:has(input:not(:checked)) td:first-child {
  opacity: 1;
}

/* ── Global settings modal: email management section ────────────────────────── */
.gs-email-section {
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 16px 18px 12px;
  margin-top: 14px;
}

.gs-email-section-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--color-text);
  padding-bottom: 10px;
  margin-bottom: 14px;
  border-bottom: 2px solid var(--color-border);
}

.gs-email-rows-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}

@media (max-width: 760px) {
  .gs-email-rows-grid {
    grid-template-columns: 1fr;
  }
}

.gs-email-row {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 12px 12px 10px;
}

.gs-email-label {
  display: block;
  font-size: 12px;
  font-weight: 700;
  color: var(--color-text);
  margin-bottom: 7px;
}

.gs-email-input-row {
  display: flex;
  gap: 8px;
  align-items: flex-start;
}

.gs-email-input {
  display: block;
  width: 100%;
  box-sizing: border-box;
  padding: 6px 10px;
  border: 1px solid var(--color-border-input);
  border-radius: var(--radius-md);
  font-size: 13px;
  font-family: var(--font-sans);
  outline: none;
  resize: vertical;
  overflow-wrap: break-word;
  word-break: break-all;
  transition: border-color .15s;
}

.gs-email-input:focus {
  border-color: var(--color-primary);
}

.gs-email-btn-row {
  margin-top: 6px;
  display: flex;
  justify-content: flex-end;
}

.gs-email-save {
  padding: 6px 12px;
  font-size: 12px;
  white-space: nowrap;
}

.gs-email-hint {
  font-size: 11px;
  color: var(--color-text-muted);
  margin: 4px 0 0;
  line-height: 1.5;
}

/* ── Email chip blocks (To / CC) ─────────────────────────────────────────────── */
.gs-chip-block {
  margin-bottom: 8px;
  padding: 6px 8px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-bg);
}

.gs-chip-block-cc {
  border-style: dashed;
  background: transparent;
}

.gs-chip-section-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .04em;
  color: var(--color-text-muted);
  text-transform: uppercase;
  margin-bottom: 5px;
}

.gs-chip-list {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  min-height: 22px;
  margin-bottom: 6px;
}

.gs-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 6px 2px 8px;
  border-radius: 12px;
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
  max-width: 200px;
  overflow: hidden;
  text-overflow: ellipsis;
}

.gs-chip-to {
  background: var(--color-info-bg);
  color: var(--color-info-text);
  border: 1px solid #b3d1f0;
}

.gs-chip-cc {
  background: var(--color-neutral);
  color: var(--color-text-hint);
  border: 1px solid var(--color-border);
}

.gs-chip-del {
  background: none;
  border: none;
  cursor: pointer;
  color: inherit;
  opacity: .6;
  font-size: 13px;
  line-height: 1;
  padding: 0 1px;
  flex-shrink: 0;
}

.gs-chip-del:hover {
  opacity: 1;
}

.gs-chip-empty {
  font-size: 11px;
  color: var(--color-disabled);
  font-style: italic;
}

.gs-chip-add-row {
  display: flex;
  gap: 6px;
  align-items: center;
}

.gs-chip-input {
  flex: 1;
  min-width: 0;
  padding: 4px 8px;
  font-size: 12px;
  border: 1px solid var(--color-border-input);
  border-radius: var(--radius-md);
  outline: none;
  background: var(--color-surface);
  color: var(--color-text);
  transition: border-color .15s;
}

.gs-chip-input:focus {
  border-color: var(--color-primary);
}

/* ── Rule is_active toggle switch ────────────────────────────────────────────── */
.rule-toggle-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
}

.rule-toggle-label {
  position: relative;
  display: inline-block;
  width: 38px;
  height: 22px;
  cursor: pointer;
  flex-shrink: 0;
}

.rule-toggle-label input {
  opacity: 0;
  width: 0;
  height: 0;
  position: absolute;
}

.rule-toggle-slider {
  position: absolute;
  inset: 0;
  background: var(--color-border);
  border-radius: 22px;
  transition: background .18s;
}

.rule-toggle-slider::before {
  content: '';
  position: absolute;
  width: 16px;
  height: 16px;
  left: 3px;
  top: 3px;
  background: #fff;
  border-radius: 50%;
  transition: transform .18s;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .2);
}

.rule-toggle-label input:checked+.rule-toggle-slider {
  background: var(--color-success);
}

.rule-toggle-label input:checked+.rule-toggle-slider::before {
  transform: translateX(16px);
}

.rule-toggle-label input:disabled+.rule-toggle-slider {
  opacity: .5;
  cursor: not-allowed;
}

.btn-duplicate-rule {
  width: 28px;
  height: 28px;
  padding: 0;
  border: none;
  border-radius: var(--radius-md);
  background: transparent;
  color: var(--color-text-muted);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background .15s, color .15s;
}

.btn-duplicate-rule:hover {
  background: var(--color-neutral);
  color: var(--color-primary);
}

.btn-duplicate-rule:active {
  background: var(--color-neutral-dark);
}

/* Preview links in send modals */
.gs-preview-addr {
  color: var(--color-primary);
  text-decoration: none;
  font-size: 12px;
}

.gs-preview-addr:hover {
  text-decoration: underline;
}

.gs-preview-addr-cc {
  color: var(--color-text-muted);
}

/* ── Template editor accordion (used in all 4 send-email modals) ─────────────── */
.tpl-section {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  margin-bottom: 14px;
  background: var(--color-bg);
}

.tpl-section summary {
  padding: 8px 12px;
  font-size: 12px;
  font-weight: 700;
  color: var(--color-text-hint);
  cursor: pointer;
  list-style: none;
  user-select: none;
}

.tpl-section summary::-webkit-details-marker {
  display: none;
}

.tpl-section summary::before {
  content: '▸ ';
  font-size: 10px;
}

.tpl-section[open] summary::before {
  content: '▾ ';
}

.tpl-section summary:hover {
  color: var(--color-primary);
}

.tpl-fields {
  padding: 10px 12px 12px;
  border-top: 1px solid var(--color-border);
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.tpl-fields label {
  display: block;
  font-size: 11px;
  font-weight: 600;
  color: var(--color-text-hint);
  margin-bottom: 3px;
}

.tpl-subject-input {
  width: 100%;
  box-sizing: border-box;
  padding: 6px 10px;
  border: 1px solid var(--color-border-input);
  border-radius: var(--radius-md);
  font-size: 13px;
  font-family: var(--font-sans);
  outline: none;
  transition: border-color .15s;
}

.tpl-subject-input:focus {
  border-color: var(--color-primary);
}

.tpl-body-textarea {
  width: 100%;
  box-sizing: border-box;
  padding: 6px 10px;
  border: 1px solid var(--color-border-input);
  border-radius: var(--radius-md);
  font-size: 12px;
  font-family: var(--font-sans);
  outline: none;
  resize: vertical;
  transition: border-color .15s;
  min-height: 100px;
}

.tpl-body-textarea:focus {
  border-color: var(--color-primary);
}

.tpl-preview {
  background: var(--color-surface);
  border: 1px dashed var(--color-border);
  border-radius: var(--radius-md);
  padding: 8px 12px;
  font-size: 12px;
  line-height: 1.6;
  color: var(--color-text);
  min-height: 48px;
  white-space: pre-wrap;
  word-break: break-word;
}

.tpl-preview-subject {
  font-weight: 700;
  font-size: 12px;
  color: var(--color-text);
  padding-bottom: 6px;
  border-bottom: 1px solid var(--color-border);
  margin-bottom: 6px;
}

/* ── Button spinner (inline rotating ring) ─────────────────────────────────── */
@keyframes btn-spin {
  to {
    transform: rotate(360deg);
  }
}

.btn-spin {
  display: inline-block;
  width: 11px;
  height: 11px;
  border: 2px solid rgba(255, 255, 255, .35);
  border-top-color: #fff;
  border-radius: 50%;
  animation: btn-spin .65s linear infinite;
  vertical-align: middle;
  margin-right: 5px;
}

/* ── Economics toolbar ────────────────────────────────────────────────────────── */
.eco-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 16px;
}

.eco-toolbar-left,
.eco-toolbar-right {
  display: flex;
  align-items: center;
  gap: 8px;
}

.eco-toolbar-label {
  font-size: 12px;
  font-weight: 700;
  color: var(--color-text-hint);
  white-space: nowrap;
}

/* ── Economics tariff table ─────────────────────────────────────────────────── */

/* Kill outer scroll on the tariff modal — inner .tariff-table-wrap scrolls instead */
#modal-eco-tariffs .modal-box {
  overflow: hidden;
}

.tariff-gross-note {
  padding: 6px 20px 0;
  font-size: 11px;
  color: var(--color-text-muted);
  font-style: italic;
}

/* Version-selector bar above the table */
.tariff-ver-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 20px 8px;
  background: var(--color-surface);
}

.tariff-toolbar-left,
.tariff-toolbar-right {
  display: flex;
  align-items: center;
  gap: 8px;
  position: relative;
}

.tariff-ver-bar .tariff-ver-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--color-text-muted);
  flex-shrink: 0;
}

.tariff-ver-select {
  padding: 5px 10px;
  border: 1px solid var(--color-border-input);
  border-radius: var(--radius-sm);
  font-size: 13px;
  font-family: var(--font-sans);
  background: var(--color-bg);
  color: var(--color-text);
  cursor: pointer;
  min-width: 200px;
}

.tariff-ver-select:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 2px rgba(67, 97, 238, .12);
}

.tariff-archive-badge {
  padding: 3px 8px;
  font-size: 11px;
  font-weight: 600;
  color: #92400e;
  background: #fef3c7;
  border: 1px solid #fbbf24;
  border-radius: 10px;
  white-space: nowrap;
}

/* Kebab + dropdown menu */
.tariff-kebab {
  width: 32px;
  height: 32px;
  font-size: 18px;
  line-height: 1;
}

.tariff-menu {
  position: absolute;
  top: calc(100% + 4px);
  right: 0;
  z-index: 50;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  box-shadow: 0 6px 24px rgba(0, 0, 0, .12);
  min-width: 240px;
  padding: 4px;
}

.tariff-menu.hidden {
  display: none;
}

.tariff-menu-item {
  display: block;
  width: 100%;
  text-align: left;
  padding: 8px 12px;
  font-size: 13px;
  font-family: var(--font-sans);
  color: var(--color-text);
  background: transparent;
  border: none;
  border-radius: var(--radius-sm);
  cursor: pointer;
  white-space: nowrap;
}

.tariff-menu-item:hover {
  background: var(--color-bg);
}

.tariff-menu-sep {
  height: 1px;
  background: var(--color-border);
  margin: 4px 0;
}

.tariff-menu-danger {
  color: #dc2626;
}

.tariff-menu-danger:hover {
  background: #fef2f2;
}

/* Search + filter row above table */
.tariff-search-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 20px;
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
}

.tariff-search-input {
  flex: 1;
  max-width: 320px;
  padding: 6px 10px;
  border: 1px solid var(--color-border-input);
  border-radius: var(--radius-sm);
  font-size: 13px;
  font-family: var(--font-sans);
  outline: none;
}

.tariff-search-input:focus {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 2px rgba(67, 97, 238, .12);
}

.tariff-chip-filter {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  font-size: 12px;
  font-weight: 500;
  color: var(--color-text-muted);
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: 12px;
  cursor: pointer;
  user-select: none;
}

.tariff-chip-filter:has(input:checked) {
  border-color: var(--color-primary);
  background: #eef2ff;
  color: var(--color-primary);
  font-weight: 600;
}

.tariff-chip-filter input {
  accent-color: var(--color-primary);
}

/* Flat-layout table styles (one row per tariff) */
.tariff-flat thead th {
  text-align: left;
  font-size: 11px;
  font-weight: 700;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.3px;
  white-space: nowrap;
}

.tariff-flat .tariff-h-num,
.tariff-flat .tariff-c-num {
  text-align: right;
  white-space: nowrap;
}

.tariff-flat .tariff-h-toggle,
.tariff-flat .tariff-c-toggle {
  text-align: center;
  width: 80px;
}

.tariff-flat .tariff-h-act,
.tariff-flat .tariff-c-act {
  width: 36px;
}

.tariff-flat .tariff-c-name {
  min-width: 260px;
}

.tariff-flat-row + .tariff-flat-row td {
  border-top: 1px solid var(--color-border);
}

.tariff-name-text {
  font-size: 13px;
  font-weight: 600;
  color: var(--color-text);
  margin-bottom: 4px;
}

.tariff-units-inline {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  color: var(--color-text-muted);
}

.tariff-units-extra {
  margin-top: 4px;
}

/* full_name_invoice — компактный input под именем услуги. Используется
   при выгрузке ручных счетов в бухгалтерию (XLSX), значение берётся из
   `prices.full_name_invoice`. */
.tariff-fullname-wrap {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-top: 4px;
}
.tariff-fullname-label {
  font-size: 11px;
  color: var(--color-text-muted);
  flex: 0 0 auto;
}
.tariff-fullname-inp {
  flex: 1 1 auto;
  min-width: 0;
  padding: 3px 6px;
  font-size: 11px;
  color: #1e3a8a;
  border: 1px dashed transparent;
  border-radius: 4px;
  background: transparent;
}
.tariff-fullname-inp:hover {
  border-color: var(--color-border);
}
.tariff-fullname-inp:focus {
  border-color: var(--color-primary);
  border-style: solid;
  background: #fff;
  outline: none;
}
.tariff-fullname-inp:disabled {
  color: var(--color-text-muted);
  cursor: not-allowed;
}

.tariff-derived {
  background: #fafbfc;
  color: var(--color-text-muted);
}

/* Archive (read-only) view — slightly tinted, controls disabled */
.tariff-archive-mode .tariff-flat-row td {
  background: #fefdf8;
}

.tariff-archive-mode .tariff-editable,
.tariff-archive-mode .tariff-readonly,
.tariff-archive-mode .tariff-derived {
  background: #fefdf8;
}

/* Additional variant rows (e.g. Выезд / NDISTANCE — secondary tariff) */
.tariff-flat-row-variant td {
  background: #fafbfc;
  border-top: 1px dashed var(--color-border) !important;
}

.tariff-name-variant {
  font-size: 11px;
  color: var(--color-text-muted);
  font-style: italic;
  padding-left: 12px;
}

/* Tariff cell states: NULL (—) vs 0 vs number */
.tariff-cell-val.tariff-cell-null {
  color: var(--color-text-muted);
  font-style: italic;
}

.tariff-cell-val.tariff-cell-zero {
  color: var(--color-text-muted);
  opacity: 0.6;
}

.tariff-print-btn {
  margin-left: auto;
  flex-shrink: 0;
  font-size: 12px;
  padding: 3px 12px;
}

.tariff-ver-toggle {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 10px;
  border: 1.5px solid var(--color-border);
  border-radius: 12px;
  font-size: 12px;
  font-family: var(--font-sans);
  cursor: pointer;
  user-select: none;
  background: var(--color-bg);
  color: var(--color-text-muted);
  transition: border-color .15s, background .15s, color .15s;
}

.tariff-ver-toggle:has(input:checked) {
  border-color: var(--color-primary);
  background: #eef2ff;
  color: var(--color-primary);
  font-weight: 600;
}

.tariff-ver-toggle.tariff-ver-latest {
  border-color: var(--color-success, #198754);
  color: var(--color-success, #198754);
}

.tariff-ver-toggle.tariff-ver-latest:has(input:checked) {
  background: #d1fae5;
  font-weight: 700;
}

.tariff-ver-toggle input {
  accent-color: var(--color-primary);
  cursor: pointer;
}

/* Scrollable wrapper — enables both sticky header and sticky columns */
.tariff-table-wrap {
  overflow: auto;
  max-height: 55vh;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  margin: 0 20px 4px;
}

.tariff-table {
  border-collapse: separate;
  border-spacing: 0;
  min-width: 100%;
  font-size: 13px;
}

.tariff-table td,
.tariff-table th {
  padding: 4px 8px !important;
}

/* Sticky header */
.tariff-table thead th {
  position: sticky;
  top: 0;
  z-index: 8;
  background: var(--color-bg);
  border-bottom: 2px solid var(--color-border);
  white-space: nowrap;
  padding: 6px 10px;
  font-size: 12px;
}

/* Sticky col 1 — Ставка / service name (also contains unit selects in group header rows) */
.tariff-sticky-1 {
  position: sticky;
  left: 0;
  z-index: 4;
  background: var(--color-surface);
  min-width: 300px;
  width: 340px;
  max-width: 380px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding: 4px 8px;
  font-size: 11px;
  color: var(--color-text-muted);
  border-right: 2px solid var(--color-border);
  box-shadow: 3px 0 6px rgba(0, 0, 0, .07);
}

/* Sticky col 2 — Ед. (М/ЗП) */
.tariff-sticky-2 {
  position: sticky;
  left: 110px;
  z-index: 4;
  background: var(--color-surface);
  min-width: 90px;
  width: 90px;
  padding: 3px 6px;
  border-right: 2px solid var(--color-border);
  box-shadow: 3px 0 6px rgba(0, 0, 0, .07);
}

/* Sticky col 1 in sticky header */
.tariff-table thead .tariff-sticky-1 {
  z-index: 12;
  background: var(--color-bg);
  font-size: 12px;
  color: var(--color-text);
  font-weight: 700;
  border-right: 2px solid var(--color-border);
}

/* Version column headers + price cells — right-aligned, fixed narrow width */
.tariff-table .tariff-ver-th,
.tariff-table .tariff-price-cell {
  text-align: right;
  min-width: 70px;
  max-width: 85px;
  padding: 4px 8px;
}

.tariff-ver-th {
  font-size: 12px;
  font-weight: 600;
}

/* Latest version — green border highlight */
.tariff-current-ver {
  color: var(--color-success, #198754);
  border-bottom: 3px solid var(--color-success, #198754) !important;
}

.tariff-edit-badge {
  font-size: 10px;
  opacity: 0.65;
  margin-left: 2px;
}

/* Older versions — muted */
.tariff-old-ver {
  color: #6c757d;
}

/* Delete column */
.tariff-del-col {
  width: 36px;
  min-width: 36px;
  text-align: center;
  padding: 4px;
  vertical-align: middle;
}

/* Pattern group header row */
.tariff-group-hdr td {
  background: #f0f4fb;
  padding: 4px 8px;
  font-size: 11px;
  font-weight: 700;
  color: var(--color-text-muted);
  border-top: 2px solid var(--color-border);
  text-transform: uppercase;
  letter-spacing: 0.4px;
  vertical-align: middle;
  line-height: 1.4;
}

.tariff-group-hdr .eco-tariff-del {
  float: right;
  opacity: 0.5;
  font-size: 11px;
  line-height: 1;
}

.tariff-group-hdr .eco-tariff-del:hover {
  opacity: 1;
}

/* Sub-rows */
.tariff-subrow td {
  border-bottom: none;
  padding-top: 3px;
  padding-bottom: 3px;
}

/* Service name cell: name+del on top row, unit selects on second row */
.tariff-name-cell {
  display: flex;
  flex-direction: column;
  gap: 2px;
  white-space: normal;
  overflow: visible;
}

.tariff-name-row {
  display: flex;
  align-items: center;
  gap: 4px;
}

.tariff-row-name {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.eco-tariff-row-del {
  flex-shrink: 0;
  background: none;
  border: none;
  cursor: pointer;
  font-size: 12px;
  line-height: 1;
  padding: 1px 2px;
  border-radius: 3px;
  opacity: 0.3;
  transition: opacity .15s, background .15s;
  color: inherit;
}

.tariff-group-hdr:hover .eco-tariff-row-del {
  opacity: 1;
}

.eco-tariff-row-del:hover {
  opacity: 1 !important;
  background: #fee2e2;
  color: #dc2626;
}

/* ── is_main toggle switch in tariff table ──────────────────────────────────── */
.tariff-tools-row {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

.tariff-main-toggle {
  position: relative;
  display: inline-block;
  width: 32px;
  height: 18px;
  flex-shrink: 0;
  cursor: pointer;
}

.tariff-main-check {
  opacity: 0;
  width: 0;
  height: 0;
}

.tariff-main-slider {
  position: absolute;
  inset: 0;
  background: #ccc;
  border-radius: 18px;
  transition: background .2s;
}

.tariff-main-slider::before {
  content: '';
  position: absolute;
  width: 14px;
  height: 14px;
  left: 2px;
  bottom: 2px;
  background: #fff;
  border-radius: 50%;
  transition: transform .2s;
}

.tariff-main-check:checked+.tariff-main-slider {
  background: #22c55e;
}

.tariff-main-check:checked+.tariff-main-slider::before {
  transform: translateX(14px);
}

.tariff-main-check:disabled+.tariff-main-slider {
  opacity: .4;
  cursor: not-allowed;
}

/* Read-only price cells (non-latest versions) */
.tariff-readonly .tariff-cell-val {
  cursor: default;
  color: #6c757d;
}

.tariff-readonly .tariff-cell-val:hover {
  background: none;
}

/* Inline-editable price value */
.tariff-cell-val {
  display: block;
  text-align: right;
  border-radius: 3px;
  padding: 1px 2px;
  min-height: 18px;
  transition: background .1s;
}

.tariff-editable .tariff-cell-val:hover {
  background: #eef2ff;
  cursor: pointer;
}

/* Inline edit input (shown on click) — plain-text look, border on focus/hover only */
.tariff-inline-input {
  width: 64px;
  text-align: right;
  padding: 1px 2px;
  border: 1px solid transparent;
  border-radius: 3px;
  font-size: 13px;
  font-family: var(--font-sans);
  outline: none;
  background: transparent;
  transition: border-color .1s, background .1s;
}

.tariff-inline-input:hover,
.tariff-inline-input:focus {
  border-color: #0d6efd;
  background: #fff;
}

/* ── Unit selects embedded in name cell ───────────────────────── */

.tariff-name-cell {
  font-weight: 700;
  color: var(--color-text) !important;
  line-height: 1.3;
}

/* Inline unit row: М: [sel] | ЗП: [sel] */
.tariff-name-units {
  display: flex;
  align-items: center;
  gap: 3px;
  margin-top: 2px;
  font-weight: normal;
  color: var(--color-text-muted);
  white-space: nowrap;
}

.tariff-unit-sep {
  font-size: 10px;
  color: var(--color-border);
  margin: 0 2px;
}

/* Empty version span in group header */
.tariff-hdr-ver-span {
  background: #f0f4fb;
}

.tariff-unit-label {
  font-size: 10px;
  font-weight: 700;
  color: var(--color-text-muted);
  white-space: nowrap;
  min-width: 18px;
}

.tariff-unit-inp {
  font-size: 11px;
  padding: 0 4px;
  margin: 0;
  border: 1px solid transparent;
  border-radius: 3px;
  background: transparent;
  color: var(--color-text-muted);
  min-width: 100px;
  max-width: 150px;
  transition: border-color .1s, background .1s;
  font-family: var(--font-sans);
}

.tariff-unit-inp:hover {
  border-color: var(--color-border-input);
  background: var(--color-bg);
}

.tariff-unit-inp:focus {
  outline: none;
  border-color: var(--color-primary);
  background: var(--color-bg);
}

/* Zebra striping for sub-rows (price rows inside each pattern group) */
.tariff-table tbody tr.tariff-subrow:nth-child(even) td {
  background: rgba(0, 0, 0, 0.025);
}

/* ── Economics category badges ──────────────────────────────────────────────── */
.eco-detail-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 14px;
}

.eco-cat-badge {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .3px;
  text-transform: uppercase;
}

.eco-cat-higher {
  background: #fff8e1;
  color: #b45309;
  border: 1px solid #fcd34d;
}

.eco-cat-first {
  background: var(--color-info-bg);
  color: var(--color-info-text);
  border: 1px solid #90caf9;
}

.eco-cat-second {
  background: var(--color-neutral);
  color: var(--color-text-muted);
  border: 1px solid var(--color-border);
}

/* ── Economics tab ───────────────────────────────────────────────────────────── */
.eco-kpi-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-bottom: 20px;
}

@media (max-width: 1100px) {
  .eco-kpi-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

.eco-kpi-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  padding: 18px 22px;
  box-shadow: var(--shadow-card);
}

.eco-kpi-card--success {
  border-color: #a5d6a7;
  background: var(--color-success-bg);
}

.eco-kpi-label {
  font-size: 11px;
  font-weight: 700;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: .6px;
  margin-bottom: 8px;
}

.eco-kpi-value {
  font-size: 30px;
  font-weight: 700;
  color: var(--color-text);
  line-height: 1;
  margin-bottom: 6px;
}

.eco-kpi-unit {
  font-size: 18px;
  font-weight: 600;
  color: var(--color-text-muted);
}

.eco-kpi-value-sub {
  font-size: 16px;
  font-weight: 500;
  color: var(--color-text-muted);
}

.eco-kpi-sub {
  font-size: 12px;
  color: var(--color-text-muted);
}

.eco-master-detail {
  display: grid;
  grid-template-columns: 5fr 7fr;
  gap: 16px;
  align-items: start;
}

@media (max-width: 900px) {
  .eco-master-detail {
    grid-template-columns: 1fr;
  }
}

.eco-panel {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  overflow: hidden;
  box-shadow: var(--shadow-card);
}

.eco-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 13px 18px;
  border-bottom: 1px solid var(--color-border);
  background: var(--color-bg);
}

.eco-panel-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--color-text);
}

.eco-count-badge {
  display: inline-block;
  background: var(--color-primary);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  padding: 2px 9px;
  border-radius: 12px;
}

.eco-master-table tbody tr {
  cursor: pointer;
}

.eco-master-table tbody tr:hover td {
  background: var(--color-info-bg) !important;
}

.eco-master-table tbody tr.eco-row-active td {
  background: #deeaff !important;
  color: var(--color-primary);
}

/* ── Economics: two-column layout (как в Дедлайнах) ───────────────────────── */
.eco-layout {
  display: flex;
  gap: 16px;
  align-items: flex-start;
}

.eco-content {
  flex: 1 1 0;
  min-width: 0;
}

.eco-right-col {
  width: 340px;
  flex-shrink: 0;
  position: sticky;
  top: 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.eco-right-col .panel-actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
}

.eco-sidebar {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-height: calc(100vh - 130px);
  overflow-y: auto;
}

.eco-sidebar .sidebar-widget {
  background: #f8fafc;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 12px 14px;
}

.eco-sidebar .sidebar-widget-title {
  font-size: 12px;
  font-weight: 700;
  color: var(--color-text);
  margin-bottom: 8px;
  letter-spacing: 0.2px;
}

.eco-sb-row {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-rows: auto auto;
  align-items: baseline;
  padding: 5px 0;
  border-bottom: 1px dashed var(--color-border);
  font-size: 12px;
  gap: 0 8px;
}

.eco-sb-row:last-of-type {
  border-bottom: none;
}

.eco-sb-label {
  color: var(--color-text-muted);
}

.eco-sb-value {
  font-weight: 700;
  color: var(--color-text);
  white-space: nowrap;
  text-align: right;
}

.eco-sb-trend {
  grid-column: 2 / 3;
  font-size: 10px;
  text-align: right;
  line-height: 1;
}

.eco-sb-row-strong {
  font-size: 13px;
  padding-top: 8px;
  margin-top: 4px;
  border-top: 1px solid var(--color-border);
}

.eco-sb-row-strong .eco-sb-value {
  color: var(--color-success, #198754);
  font-size: 15px;
}

.eco-sb-summary {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid var(--color-border);
  font-size: 11px;
  color: var(--color-text-muted);
  font-style: italic;
}

/* Строка-резюме «Данные по N сотр. на MM.YYYY. Основание: прайс …» */
.eco-sb-source {
  font-size: 11px;
  color: var(--color-text-muted);
  padding-bottom: 8px;
  margin-bottom: 6px;
  border-bottom: 1px dashed var(--color-border);
  line-height: 1.6;
}
.eco-src-badge {
  display: inline-block;
  padding: 1px 6px;
  border-radius: 8px;
  font-size: 10.5px;
  font-weight: 600;
  margin-left: 4px;
  white-space: nowrap;
}
.eco-src-monthly { background: #e6f4ea; color: #1a7a4a; border: 1px solid #b3dec3; }
.eco-src-daily   { background: #fef7d1; color: #8a6300; border: 1px solid #ecd97a; }
.eco-src-none    { background: #f0f1f3; color: #6b7785; border: 1px solid #d9dde2; }

/* ── Главная: layout с правой info-панелью (по образцу .wl-layout) ─ */
.dash-layout {
  display: flex;
  gap: 14px;
  align-items: flex-start;
}
.dash-content {
  flex: 1 1 0;
  min-width: 0;
}
.dash-right-col {
  /* E3: уменьшена с 460px до 360px — оставляем больше места под основной
     контент. Если содержимое чек-листа становится узким, оно само
     скроллится по высоте. */
  width: 360px;
  flex-shrink: 0;
  position: sticky;
  top: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: calc(100vh - 80px);
  overflow-y: auto;
}
@media (max-width: 1280px) {
  .dash-right-col { width: 320px; }
}
@media (max-width: 1100px) {
  .dash-layout { flex-direction: column; }
  .dash-right-col {
    width: 100%;
    position: static;
    max-height: none;
    overflow-y: visible;
  }
}
.dash-info-panel {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 10px 12px;
  box-shadow: var(--shadow-card);
}
.dash-info-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--color-text);
  margin-bottom: 8px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--color-border);
}

/* Sidebar overrides for the full checklist (tighter than dashboard widget) */
.dash-info-panel .control-checklist-header {
  gap: 6px;
  margin-bottom: 8px;
}
.dash-info-panel .cc-summary-text { padding-left: 16px; font-size: 11px; }
.dash-info-panel .cc-details      { padding-left: 16px; }
.dash-info-panel .cc-row          { padding: 4px 8px 4px 10px; margin-bottom: 4px; }
.dash-info-panel .cc-d-label      { min-width: 90px; }
.dash-info-panel .cc-category {
  margin-bottom: 6px;
}
.dash-info-panel .cc-body {
  gap: 8px;
}
.dash-info-panel .cc-category-title {
  font-size: 12px;
  margin-bottom: 4px;
  padding-bottom: 3px;
}

/* ── Control Checklist (Главная → 📋 Контроль данных) ─────────────── */
.control-checklist-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
}
.cc-summary-badges {
  display: inline-flex;
  gap: 4px;
  font-size: 13px;
  color: var(--color-text);
}
.cc-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 10px;
  font-size: 12px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.cc-badge-error   { background: #fee2e2; color: #991b1b; border: 1px solid #fca5a5; }
.cc-badge-warning { background: #fef3c7; color: #92400e; border: 1px solid #fbbf24; }
.cc-badge-ok      { background: #d1fae5; color: #065f46; border: 1px solid #6ee7b7; }
.cc-badge-info    { background: #e0e7ff; color: #3730a3; border: 1px solid #a5b4fc; }

.cc-body { display: flex; flex-direction: column; gap: 14px; }

.cc-category-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--color-text-hint);
  margin-bottom: 6px;
  padding-bottom: 4px;
  border-bottom: 1px solid var(--color-border);
}

.cc-row {
  padding: 8px 10px 8px 14px;
  margin-bottom: 6px;
  background: var(--color-surface);
  border-left: 4px solid transparent;
  border-radius: 4px;
  font-size: 13px;
}
.cc-row.cc-status-ok      { border-left-color: #10b981; background: #f0fdf4; }
.cc-row.cc-status-warning { border-left-color: #f59e0b; background: #fffbeb; }
.cc-row.cc-status-error   { border-left-color: #ef4444; background: #fef2f2; }
.cc-row.cc-status-info    { border-left-color: #6366f1; background: #eef2ff; }

.cc-row-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 2px;
}
.cc-icon { font-size: 15px; }
.cc-name { font-weight: 600; flex: 1 1 auto; }
.cc-due {
  font-size: 10.5px;
  font-weight: 600;
  padding: 1px 6px;
  border-radius: 8px;
  white-space: nowrap;
}
.cc-due-overdue     { background: #fee2e2; color: #991b1b; }
.cc-due-due_soon    { background: #fef3c7; color: #92400e; }
.cc-due-not_due_yet { background: #f0f1f3; color: #6b7785; font-style: italic; }
.cc-actor {
  font-size: 11px;
  color: var(--color-text-muted);
  font-style: italic;
  font-family: ui-monospace, monospace;
}
.cc-summary-text {
  color: var(--color-text);
  font-size: 12.5px;
  padding-left: 24px;
}

.cc-details { margin-top: 6px; padding-left: 24px; }
.cc-details summary {
  cursor: pointer;
  font-size: 11.5px;
  color: var(--color-text-muted);
  user-select: none;
}
.cc-details-list {
  list-style: none;
  padding: 6px 0 0;
  margin: 4px 0 0;
  border-top: 1px dashed rgba(0, 0, 0, .07);
}
.cc-details-list li {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: baseline;
  padding: 3px 0;
  font-size: 12px;
  border-bottom: 1px dashed rgba(0, 0, 0, .04);
}
.cc-details-list li:last-child { border-bottom: none; }
.cc-d-label { flex: 0 0 auto; color: var(--color-text-hint); min-width: 130px; }
.cc-d-value { flex: 1 1 auto; font-weight: 500; }
.cc-d-actor {
  font-family: ui-monospace, monospace;
  font-size: 11px;
  color: var(--color-text-muted);
}
.cc-d-ts {
  font-size: 11px;
  color: var(--color-text-muted);
  font-variant-numeric: tabular-nums;
}

.cc-meta {
  margin-top: 8px;
  font-size: 11px;
  color: var(--color-text-muted);
  font-style: italic;
  text-align: right;
}

/* Multi-file upload list (Workload daily modal) */
.wl-upload-filelist {
  list-style: none;
  margin: 10px 0 0;
  padding: 0;
  max-height: 160px;
  overflow-y: auto;
  text-align: left;
}
.wl-upload-fileitem {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 8px;
  font-size: 12px;
  border-bottom: 1px dashed rgba(0, 0, 0, .07);
}
.wl-upload-fileitem:last-child { border-bottom: none; }
.wl-upload-filename {
  flex: 1 1 auto;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-variant-numeric: tabular-nums;
}
.wl-upload-fileremove {
  border: none;
  background: transparent;
  color: var(--color-text-muted);
  cursor: pointer;
  font-size: 16px;
  padding: 0 6px;
  line-height: 1;
}
.wl-upload-fileremove:hover { color: var(--color-danger, #c0392b); }
.wl-upload-progress {
  margin: 8px 0 0;
  font-size: 12px;
  color: var(--color-text-hint);
  font-style: italic;
  min-height: 16px;
}

/* Rejected (didn't pass pre-validation) — visible under the queue */
.wl-upload-rejected {
  list-style: none;
  margin: 8px 0 0;
  padding: 0;
  max-height: 120px;
  overflow-y: auto;
  text-align: left;
}
.wl-upload-rej-item {
  display: flex;
  align-items: baseline;
  gap: 6px;
  padding: 4px 8px;
  font-size: 12px;
  background: #fef2f2;
  border: 1px solid #f4caca;
  border-radius: 4px;
  margin-bottom: 4px;
  color: #8a3a3a;
}
.wl-upload-rej-name {
  flex: 0 0 auto;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 200px;
}
.wl-upload-rej-reason {
  flex: 1 1 auto;
  font-style: italic;
  color: #6b4d4d;
}
.wl-upload-rej-remove {
  border: none;
  background: transparent;
  color: #8a3a3a;
  cursor: pointer;
  font-size: 14px;
  padding: 0 4px;
  line-height: 1;
}
.wl-upload-rej-remove:hover { color: #c0392b; }

/* Сортируемые заголовки таблицы сотрудников */
.eco-master-table th.eco-sortable,
.eco-sortable-table th.eco-sortable {
  cursor: pointer;
  user-select: none;
}

.eco-master-table th.eco-sortable:hover,
.eco-sortable-table th.eco-sortable:hover {
  background: var(--color-info-bg);
}

.eco-master-table th.eco-sort-active,
.eco-sortable-table th.eco-sort-active {
  color: var(--color-primary);
}

.eco-master-table th .eco-sort-arrow,
.eco-sortable-table th .eco-sort-arrow {
  font-size: 10px;
  color: var(--color-primary);
  margin-left: 3px;
}

.eco-master-table th.eco-th-num {
  text-align: right;
}

/* Бейдж «→ Смета (имущ)» в детализации: показывает, что ЗП считается
   по тарифу отдела, а не по имени услуги. */
.eco-tariff-redirect {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 6px;
  font-size: 10px;
  font-weight: 600;
  color: var(--color-primary);
  background: #eef2ff;
  border: 1px solid #c7d2fe;
  border-radius: 8px;
  vertical-align: 1px;
  letter-spacing: 0.2px;
}

/* Service-margin compact list (right sidebar) */
.eco-sb-svc-item {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  padding: 4px 0;
  font-size: 12px;
  gap: 8px;
  border-bottom: 1px dashed transparent;
}

.eco-sb-svc-item + .eco-sb-svc-item {
  border-top: 1px dashed var(--color-border);
}

.eco-sb-svc-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--color-text);
}

.eco-sb-svc-pct {
  font-weight: 700;
  white-space: nowrap;
}

.eco-sb-svc-pct.eco-margin-good { color: #16a34a; }
.eco-sb-svc-pct.eco-margin-ok   { color: #ca8a04; }
.eco-sb-svc-pct.eco-margin-bad  { color: #dc2626; }

/* Collapsible "Маржинальность по услугам" section in main area */
.eco-margin-section {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  margin-bottom: 14px;
  box-shadow: var(--shadow-card);
  overflow: hidden;
}

.eco-margin-section > summary {
  list-style: none;
  cursor: pointer;
  padding: 12px 18px;
  font-weight: 700;
  font-size: 13px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  user-select: none;
  background: var(--color-bg);
}

.eco-margin-section > summary::-webkit-details-marker { display: none; }
.eco-margin-section > summary::before {
  content: '▸ ';
  margin-right: 4px;
  transition: transform 0.15s ease;
  display: inline-block;
}

.eco-margin-section[open] > summary::before {
  transform: rotate(90deg);
}

.eco-margin-summary-hint {
  font-size: 11px;
  font-weight: 400;
  color: var(--color-text-muted);
  font-style: italic;
}

.eco-margin-section[open] .eco-margin-summary-hint { display: none; }

.eco-margin-bars {
  padding: 12px 18px 14px;
}

.eco-margin-bar-item {
  margin-bottom: 10px;
}

.eco-margin-bar-item:last-child { margin-bottom: 0; }

.eco-margin-bar-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 4px;
  font-size: 12px;
}

.eco-margin-bar-name {
  font-weight: 600;
  color: var(--color-text);
}

.eco-margin-bar-numbers {
  color: var(--color-text-muted);
  font-size: 11px;
}

.eco-margin-bar-numbers .eco-bar-zp {
  color: #b91c1c;
  margin-right: 6px;
}

.eco-margin-bar-numbers .eco-bar-mg {
  color: #15803d;
}

.eco-margin-bar-track {
  height: 14px;
  background: #f3f4f6;
  border-radius: 4px;
  overflow: hidden;
  display: flex;
}

.eco-margin-bar-zp-seg {
  background: #ef4444;
  height: 100%;
}

.eco-margin-bar-mg-seg {
  background: #22c55e;
  height: 100%;
}

/* Expandable row detail (когда клик по сотруднику) */
.eco-master-table tr.eco-row-detail > td {
  background: var(--color-bg) !important;
  padding: 0;
  border-top: none !important;
}

.eco-row-detail-wrap {
  padding: 12px 18px 14px;
  background: var(--color-bg);
  border-bottom: 1px solid var(--color-border);
}

@media (max-width: 1200px) {
  .eco-layout {
    flex-direction: column;
  }
  .eco-right-col {
    width: 100%;
    position: static;
  }
  .eco-sidebar {
    max-height: none;
  }
}

.eco-detail-placeholder {
  padding: 52px 24px;
  text-align: center;
  color: var(--color-text-muted);
  font-size: 14px;
  line-height: 1.6;
}

/* Formula visualization */
.eco-group {
  padding: 14px 18px 6px;
}

.eco-group+.eco-group {
  border-top: 1px solid var(--color-border);
}

.eco-group-title {
  font-size: 11px;
  font-weight: 700;
  color: var(--color-text-hint);
  text-transform: uppercase;
  letter-spacing: .6px;
  margin-bottom: 8px;
}

.eco-formula-row {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 0;
  border-bottom: 1px dashed var(--color-border);
  font-size: 13px;
}

.eco-formula-row:last-child {
  border-bottom: none;
}

.eco-formula-name {
  flex: 1;
  color: var(--color-text);
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.eco-formula-dots {
  flex: 0 1 36px;
  min-width: 12px;
  border-bottom: 2px dotted var(--color-border);
  height: 1px;
  align-self: center;
}

.eco-pill {
  background: var(--color-neutral);
  color: var(--color-text-hint);
  font-size: 12px;
  font-weight: 600;
  padding: 3px 10px;
  border-radius: var(--radius-sm);
  white-space: nowrap;
}

.eco-op {
  font-size: 13px;
  font-weight: 700;
  color: var(--color-text-muted);
  padding: 0 2px;
}

.eco-formula-result {
  font-size: 13px;
  font-weight: 700;
  color: var(--color-success);
  min-width: 90px;
  text-align: right;
  white-space: nowrap;
}

.eco-total {
  display: flex;
  flex-direction: column;
  padding: 18px 20px;
  border-top: 2px solid var(--color-border);
  background: var(--color-bg);
  margin-top: 4px;
}

.eco-total-label {
  font-size: 12px;
  font-weight: 700;
  color: var(--color-text-hint);
  text-transform: uppercase;
  letter-spacing: .6px;
}

.eco-total-amount {
  font-size: 24px;
  font-weight: 700;
  color: var(--color-primary);
}

/* ── Margin bar ──────────────────────────────────────────────────────────────── */
.eco-margin-bar {
  display: flex;
  height: 18px;
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--color-border);
  margin-bottom: 4px;
}

.eco-margin-profit-seg {
  background: var(--color-success);
  transition: width .4s;
}

.eco-margin-gross-seg {
  background: #f97316;
  transition: width .4s;
}

/* ── Tax pill variant ────────────────────────────────────────────────────────── */
.eco-pill-dim {
  background: var(--color-neutral);
  color: var(--color-text-muted);
}

/* ── KPI trend indicators ────────────────────────────────────────────────────── */
.eco-trend {
  min-height: 18px;
  margin-top: 5px;
  font-size: 12px;
  line-height: 1.3;
}

.eco-trend-none {
  color: var(--color-text-muted);
  font-size: 11px;
}

/* ── Employee micro-trend arrows ─────────────────────────────────────────────── */
.eco-micro-trend {
  font-size: 11px;
  font-weight: 700;
  margin-left: 6px;
  cursor: default;
  vertical-align: middle;
  white-space: nowrap;
}

.eco-micro-trend--new {
  color: var(--color-text-muted);
  font-size: 14px;
}

/* ── Toolbar separator ────────────────────────────────────────────────────────── */
.eco-toolbar-sep {
  display: inline-block;
  width: 1px;
  height: 18px;
  background: var(--color-border);
  vertical-align: middle;
  margin: 0 4px;
}

/* ── Economics chart row ─────────────────────────────────────────────────────── */
.eco-charts-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-bottom: 20px;
}

@media (max-width: 720px) {
  .eco-charts-row {
    grid-template-columns: 1fr;
  }
}

.eco-chart-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 14px 18px 18px;
}

.eco-chart-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--color-text-hint);
  margin-bottom: 12px;
}

.eco-chart-wrap {
  position: relative;
  height: 220px;
}

/* ── RESO direct-contract badge ──────────────────────────────────────────────── */
.eco-badge-reso {
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .4px;
  padding: 1px 6px;
  border-radius: var(--radius-sm);
  background: var(--color-neutral-dark);
  color: var(--color-text-hint);
  vertical-align: middle;
  margin-left: 5px;
}

/* ── Dashboard ──────────────────────────────────────────────────────────────── */
.dash-container {
  display: grid;
  /* E3: минимальная ширина widget'а 360 → 280, gap 24 → 12 — больше виджетов
     в одну строку на стандартном экране, меньше «дырок». */
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 12px;
  margin-top: 14px;
}
/* Зона 1 «Требует внимания» — всегда full-width, чтобы пилюли распределялись
   максимально в горизонталь. */
.dash-container > #dash-attention-widget {
  grid-column: 1 / -1;
}

.dash-widget {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 14px 16px;
  box-shadow: var(--shadow-card);
}

.dash-widget-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--color-text);
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.dash-widget-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 10px;
}

/* ── Feedback — модалка отправки + журнал ─────────────────────────────────── */
.fb-drop-zone {
  border: 2px dashed var(--color-border-input);
  border-radius: var(--radius-md);
  padding: 16px;
  text-align: center;
  background: #fafbfc;
  transition: border-color .12s, background .12s;
}
.fb-drop-zone.dragover {
  border-color: var(--color-primary);
  background: #eef2f8;
}
.fb-file-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  background: #f3f6fa;
  border-radius: 4px;
  font-size: 12px;
}
.fb-file-thumb {
  width: 32px;
  height: 32px;
  object-fit: cover;
  border-radius: 3px;
  flex-shrink: 0;
}
.fb-file-name {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--color-text);
}
.fb-file-size {
  color: var(--color-text-muted);
  font-size: 11px;
  flex-shrink: 0;
}
.fb-file-remove {
  background: none;
  border: none;
  color: var(--color-danger);
  cursor: pointer;
  font-size: 16px;
  padding: 0 4px;
  line-height: 1;
}
.fb-file-remove:hover {
  color: var(--color-danger-hover);
}

/* ── «🚨 Требует внимания» — полоса пилюль на Главной ─────────────────────── */
.attn-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 6px;
}
.attn-pill {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px 6px 8px;
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border);
  border-left: 3px solid var(--color-border);
  background: var(--color-surface);
  font-family: inherit;
  font-size: 12px;
  text-align: left;
  cursor: pointer;
  transition: background .12s, border-color .12s, transform .08s;
}
.attn-pill:hover {
  background: #f8fafc;
}
.attn-pill:active {
  transform: translateY(1px);
}
.attn-emoji {
  font-size: 14px;
  flex-shrink: 0;
  line-height: 1;
}
.attn-label {
  flex: 1;
  color: var(--color-text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 12px;
}
.attn-value {
  font-weight: 700;
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  color: var(--color-text);
  padding: 0 6px;
  min-width: 22px;
  text-align: right;
}
/* Акценты: только левая цветная полоса + цвет значения. Фон пилюли
   остаётся светлым — глаз не устаёт. */
.attn-pill.has-warning {
  border-left-color: #f59e0b;
}
.attn-pill.has-warning .attn-value { color: #b45309; }
.attn-pill.has-error {
  border-left-color: #dc2626;
}
.attn-pill.has-error .attn-value { color: #b91c1c; }
.attn-pill.has-ok {
  border-left-color: #22c55e;
}
.attn-pill.has-ok .attn-value { color: #15803d; }
/* «Всё спокойно» — состояние, когда все метрики 0 */
#dash-attention-widget.attn-all-clear .dash-widget-title {
  color: #15803d;
}
/* Сжимаем padding у самого виджета — содержимое уже компактное */
#dash-attention-widget {
  padding: 14px 16px;
}
#dash-attention-widget .dash-widget-title {
  margin-bottom: 10px;
  font-size: 14px;
}

/* Карточки виджетов — UX-redesign 2026-06-20 (E2):
   компактнее, числа меньше, подписи мельче, padding 16→10.
   Acent — только левая цветная полоса 3px (вместо широкой заливки). */
.dash-card {
  border-radius: var(--radius-md);
  padding: 10px 12px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-left: 3px solid var(--color-border);
  text-align: left;
  transition: background 0.12s ease;
}

.dash-card:hover {
  background: #f8fafc;
}

.dash-card-green  { border-left-color: var(--color-success); }
.dash-card-blue   { border-left-color: #2563eb; }
.dash-card-red    { border-left-color: var(--color-danger); }
.dash-card-orange { border-left-color: #f59e0b; }
.dash-card-purple { border-left-color: #9333ea; }

.dash-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--color-text-muted);
  margin-bottom: 4px;
}

.dash-value {
  font-size: 22px;
  font-weight: 800;
  line-height: 1.1;
  margin-bottom: 2px;
  color: var(--color-text);
}
.dash-card-green  .dash-value { color: var(--color-success); }
.dash-card-blue   .dash-value { color: #2563eb; }
.dash-card-red    .dash-value { color: var(--color-danger); }
.dash-card-orange .dash-value { color: #f59e0b; }
.dash-card-purple .dash-value { color: #9333ea; }

.dash-sub {
  font-size: 10px;
  color: var(--color-text-hint);
  line-height: 1.3;
}

/* ── Dashboard Lists (Дедлайны, Отпуска, …) — E2-компакт ─────────────────── */
.dash-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.dash-empty-msg {
  font-size: 12px;
  color: var(--color-text-muted);
  text-align: center;
  padding: 10px;
  margin: 0;
  font-style: italic;
}

.dash-list-item {
  padding: 7px 10px;
  background: var(--color-bg);
  border-left: 3px solid var(--color-primary);
  border-radius: var(--radius-sm);
}

.dash-list-title {
  font-size: 12px;
  font-weight: 700;
  color: var(--color-text);
  margin-bottom: 2px;
  word-break: break-word;
}

.dash-list-meta {
  font-size: 11px;
  color: var(--color-text-muted);
  line-height: 1.35;
}

.dash-list-label {
  font-weight: 600;
  color: var(--color-text-hint);
}

.dash-deadline-days {
  font-weight: 700;
  color: var(--color-warning);
}

.dash-deadline-days.dash-urgent {
  color: var(--color-danger);
}

.dash-deadline-days.dash-overdue {
  color: var(--color-danger);
  font-weight: 800;
}

/* ── Dashboard Department Stats ────────────────────────────────────────────── */
.dash-dept-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 16px;
}

.dash-dept-card {
  padding: 12px;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  transition: all 0.15s ease;
}

.dash-dept-card:hover {
  border-color: var(--color-primary);
  background: var(--color-surface);
}

.dash-dept-name {
  font-size: 12px;
  font-weight: 700;
  color: var(--color-text);
  margin-bottom: 8px;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

.dash-dept-bar {
  height: 8px;
  background: var(--color-border);
  border-radius: var(--radius-sm);
  overflow: hidden;
  margin-bottom: 8px;
}

.dash-dept-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--color-success), var(--color-primary));
  transition: width 0.3s ease;
}

.dash-dept-stats {
  font-size: 11px;
  color: var(--color-text-muted);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.dash-dept-working {
  font-weight: 700;
  color: var(--color-success);
}

.dash-dept-total {
  color: var(--color-text-hint);
}

/* ── Responsive Dashboard ──────────────────────────────────────────────────── */
@media (max-width: 1200px) {
  .dash-container {
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  }
}

@media (max-width: 768px) {
  .dash-container {
    grid-template-columns: 1fr;
  }

  .dash-dept-grid {
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  }
}

/* ── Surcharge Rules Manager ────────────────────────────────────────────────── */

/* Sub-navigation pills (Economics tab) */
.eco-subnav {
  display: flex;
  gap: 4px;
  margin-bottom: 16px;
  border-bottom: 2px solid var(--color-border);
  padding-bottom: 0;
}

.eco-subnav-btn {
  padding: 7px 18px;
  border: none;
  background: none;
  font-size: 13px;
  font-weight: 600;
  font-family: var(--font-sans);
  color: var(--color-text-muted);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
  transition: color .15s, border-color .15s;
}

.eco-subnav-btn:hover {
  color: var(--color-primary);
}

.eco-subnav-btn.active {
  color: var(--color-primary);
  border-bottom-color: var(--color-primary);
}

/* Surcharges section toolbar */
.sc-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}

.sc-section-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--color-text);
}

/* Rules list */
.sc-rules-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* Single rule card */
.sc-rule-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 11px 16px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  transition: opacity .2s;
}

.sc-rule-card.sc-inactive {
  opacity: 0.48;
}

.sc-rule-info {
  flex: 1;
  min-width: 0;
}

.sc-rule-name {
  display: block;
  font-size: 13px;
  font-weight: 700;
  color: var(--color-text);
  margin-bottom: 5px;
}

/* Badge row */
.sc-rule-badges {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 5px;
}

.sc-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 10px;
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
}

.sc-badge-filter {
  background: #e9ecef;
  color: #495057;
}

.sc-badge-condition {
  background: #fff3cd;
  color: #7d5a03;
}

.sc-badge-result {
  background: #d1e7dd;
  color: #0a3622;
}

.sc-arrow {
  color: var(--color-text-muted);
  font-size: 13px;
  flex-shrink: 0;
  margin: 0 1px;
}

/* Action buttons */
.sc-rule-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

.sc-toggle-btn,
.sc-delete-btn {
  width: 30px;
  height: 30px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-bg);
  cursor: pointer;
  font-size: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .15s, border-color .15s, color .15s;
  padding: 0;
  line-height: 1;
}

.sc-toggle-btn:hover {
  background: #dcfce7;
  border-color: #86efac;
}

.sc-toggle-btn.sc-active {
  background: #d1fae5;
  border-color: var(--color-success, #198754);
  color: var(--color-success, #198754);
}

.sc-delete-btn:hover {
  background: #fee2e2;
  border-color: var(--color-danger);
}

/* Empty state */
.sc-empty-state {
  text-align: center;
  padding: 40px 20px;
  color: var(--color-text-muted);
  font-size: 13px;
  background: var(--color-surface);
  border: 1px dashed var(--color-border);
  border-radius: var(--radius-md);
}

/* Condition grid — 3 equal cols in modal */
.sc-cond-grid {
  grid-template-columns: repeat(3, 1fr) !important;
}

/* ── Manual Surcharges ───────────────────────────────────────────────────────── */

.ms-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 16px;
}


.ms-table-wrap {
  overflow-x: auto;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}

.ms-table-wrap .data-table td.ms-num {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* ── Аккордеон по эксперту в таблице «Доплаты и удержания» ───────────────── */
.ms-table-wrap .data-table tr.ms-group-row {
  background: #f8fafc;
  cursor: pointer;
  border-top: 2px solid #e2e8f0;
  font-size: 13px;
  transition: background 0.15s;
}
.ms-table-wrap .data-table tr.ms-group-row:hover {
  background: #f1f5f9;
}
.ms-table-wrap .data-table tr.ms-group-row.open {
  background: linear-gradient(to right, #eff6ff, #f0f9ff);
  border-top-color: var(--color-primary);
}
.ms-table-wrap .data-table tr.ms-group-row td {
  padding: 9px 10px;
}
.ms-group-toggle {
  display: inline-block;
  font-size: 14px;
  color: var(--color-text-muted);
  width: 18px;
  text-align: center;
}
.ms-table-wrap .data-table tr.ms-group-row.open .ms-group-toggle {
  color: var(--color-primary);
}
.ms-group-pending-dot {
  display: inline-block;
  margin-left: 6px;
  color: #f59e0b;
  font-size: 14px;
  vertical-align: middle;
}

/* Подсвечиваем дочерние строки внутри раскрытой группы */
.ms-table-wrap .data-table tr.ms-record-row td {
  background: #ffffff;
}
.ms-table-wrap .data-table tr.ms-record-row td:nth-child(1),
.ms-table-wrap .data-table tr.ms-record-row td:nth-child(4) {
  /* Лёгкая визуальная индентация: первая колонка пустая, вторая чуть в глубину */
  padding-left: 18px;
}

.ms-total-field {
  font-weight: 700;
  color: var(--color-primary);
}

.ms-total-field.ms-negative {
  color: var(--color-danger) !important;
  font-weight: 700;
}
.ms-total-field.ms-positive {
  color: #065f46 !important;
  font-weight: 700;
}

/* 3-цветная окраска типа операции в таблице */
.ms-type-surcharge, .ms-type-mutual, .ms-type-deduction {
  display: inline-block;
  padding: 2px 7px;
  border-radius: 8px;
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
}
.ms-type-surcharge { background: #d1fae5; color: #065f46; }  /* зелёный — +доплата */
.ms-type-mutual    { background: #dbeafe; color: #1e40af; }  /* синий — взаимовычет */
.ms-type-deduction { background: #fee2e2; color: #991b1b; }  /* красный — −удержание */

.ms-hint-negative, .ms-hint-warn {
  font-size: 11px;
  color: var(--color-danger);
  margin-top: 4px;
  line-height: 1.4;
}
.ms-hint-info {
  font-size: 11px;
  color: #64748b;
  margin-top: 4px;
  line-height: 1.4;
}

/* Сегментный селектор типа операции (заменил toggle) */
.ms-segments {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 4px;
  background: #f1f5f9;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 3px;
}
.ms-segment {
  border: none;
  background: transparent;
  padding: 8px 10px;
  border-radius: 4px;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  color: var(--color-text-muted);
  transition: background .15s, color .15s, box-shadow .15s;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}
.ms-segment:hover { background: rgba(255, 255, 255, 0.5); color: var(--color-text); }
.ms-segment.active {
  background: #ffffff;
  font-weight: 700;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
}
.ms-segment.ms-seg-surcharge.active { color: #065f46; }
.ms-segment.ms-seg-mutual.active    { color: #1e40af; }
.ms-segment.ms-seg-deduction.active { color: #991b1b; }
.ms-seg-icon {
  font-size: 14px;
  line-height: 1;
}

/* Inline-инфо подсказка для Взаимовычета */
.ms-info-hint {
  font-size: 12px;
  color: var(--color-text-muted);
  background: #eff6ff;
  border-left: 3px solid #3b82f6;
  padding: 6px 10px;
  margin: 0;
  border-radius: 0 4px 4px 0;
  line-height: 1.4;
}
.ms-info-hint code {
  background: rgba(0, 0, 0, 0.06);
  padding: 1px 4px;
  border-radius: 3px;
  font-size: 11.5px;
}

/* Обязательность примечания при удержании — звёздочка */
.ms-required {
  color: var(--color-danger);
  font-weight: 700;
  margin-left: 2px;
}

/* Контекстный ряд под-метода: визуально приклеен к ms-segments сверху.
   Появляется только для Доплаты (3 кнопки) или Удержания (2 кнопки).
   Для Взаимовычета — скрыт. */
.ms-submethod-row {
  display: flex;
  gap: 6px;
  margin-top: 8px;
}
/* Кнопки-переключатели под-метода */
.ms-method-btn {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 7px 10px;
  background: #f1f5f9;
  border: 1px solid #d0d9e4;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 500;
  color: #64748b;
  cursor: pointer;
  transition: background .12s, border-color .12s, color .12s, box-shadow .12s;
  text-align: center;
  line-height: 1.3;
  user-select: none;
}
.ms-method-btn input[type="radio"] {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
  pointer-events: none;
}
.ms-method-btn:hover {
  background: #e2e8f0;
  border-color: #b8c5d4;
  color: #475569;
}
#ms-method-wrap .ms-method-btn:has(input:checked) {
  background: #e8f5f0;
  border-color: #059669;
  color: #065f46;
  font-weight: 600;
  box-shadow: 0 0 0 1px #059669;
}
#ms-deduction-wrap .ms-method-btn:has(input:checked) {
  background: #fef2f2;
  border-color: #dc2626;
  color: #991b1b;
  font-weight: 600;
  box-shadow: 0 0 0 1px #dc2626;
}
/* Итоговая сумма — подсветка в режиме «Произвольная сумма» */
#ms-total.ms-total-editable {
  background: #fffbeb;
  border-color: #f59e0b;
  font-weight: 600;
  color: var(--color-text);
}

/* Чип отдела рядом с полем «Эксперт». Показывается под input'ом, когда
   эксперт выбран и его отдел известен. Заменяет старое read-only поле. */
.ms-dept-chip {
  display: inline-block;
  margin-top: 4px;
  padding: 2px 8px;
  background: #eef2f7;
  border: 1px solid #cbd5e1;
  border-radius: 10px;
  font-size: 11px;
  color: #475569;
  line-height: 1.4;
}
.ms-dept-chip::before {
  content: '· отдел: ';
  color: #94a3b8;
}
#modal-manual-surcharge .modal-footer {
  border-top: none;
}


/* Иконки действий в таблице — единое оформление для ✏️ 📋 🗑 */
.ms-act-edit, .ms-act-dup, .ms-act-delete {
  background: transparent;
  border: 1px solid var(--color-border);
  border-radius: 4px;
  cursor: pointer;
  padding: 2px 6px;
  font-size: 13px;
  line-height: 1;
  margin-right: 2px;
  opacity: .8;
  transition: background .15s, border-color .15s, opacity .15s;
}
.ms-act-edit:hover    { background: #dbeafe; border-color: #93c5fd; opacity: 1; }
.ms-act-dup:hover     { background: #f1f5f9; border-color: #cbd5e1; opacity: 1; }
.ms-act-delete:hover  { background: #fee2e2; border-color: #fca5a5; opacity: 1; }

.ms-hint-warn {
  font-size: 11px;
  color: #b45309;
  margin-top: 4px;
  line-height: 1.4;
}

/* Status filter chips above the surcharges table */
.ms-status-filter {
  display: flex;
  gap: 6px;
  align-items: center;
}

.ms-status-chip {
  padding: 4px 10px;
  font-size: 12px;
  font-weight: 500;
  color: var(--color-text-muted);
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: 14px;
  cursor: pointer;
  user-select: none;
}

.ms-status-chip.active {
  border-color: var(--color-primary);
  background: #eef2ff;
  color: var(--color-primary);
  font-weight: 700;
}

.ms-status-chip.ms-chip-pending #ms-pending-count {
  display: inline-block;
  margin-left: 4px;
  padding: 0 6px;
  background: #fef3c7;
  color: #92400e;
  border-radius: 8px;
  font-weight: 700;
  font-size: 11px;
  min-width: 16px;
  text-align: center;
}

/* Status badges in the surcharges table */
.ms-status-badge {
  display: inline-block;
  padding: 2px 7px;
  border-radius: 8px;
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
}

.ms-status-pending {
  background: #fef3c7;
  color: #92400e;
}

.ms-status-approved {
  background: #d1fae5;
  color: #065f46;
}

.ms-status-rejected {
  background: #f3f4f6;
  color: #6b7280;
}

/* Email intake settings — checkbox row layout */
.ei-toggle-row {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  cursor: pointer;
}

/* Compact per-row workflow buttons (approve/reject) */
.ms-row-actions {
  display: inline-flex;
  gap: 4px;
}

.ms-act-btn {
  width: 24px;
  height: 24px;
  padding: 0;
  border-radius: 4px;
  border: 1px solid var(--color-border);
  background: var(--color-bg);
  cursor: pointer;
  font-size: 13px;
  line-height: 1;
}

.ms-act-approve {
  color: #059669;
  border-color: #a7f3d0;
}

.ms-act-approve:hover {
  background: #ecfdf5;
}

.ms-act-reject {
  color: #dc2626;
  border-color: #fecaca;
}

.ms-act-reject:hover {
  background: #fef2f2;
}

/* ── Footer ─────────────────────────────────────────────────────────────────── */
footer {
  text-align: center;
  padding: 14px;
  font-size: 12px;
  color: #90a4ae;
  border-top: 1px solid var(--color-border);
  background: var(--color-surface);
  margin-top: auto;
}

/* ══════════════════════════════════════════════════════════════════════════════
   KPI PDF EXPORT — @media print rules (activated by body.kpi-print-active)
   ══════════════════════════════════════════════════════════════════════════════ */
@media print {

  /* ── Base: force colour rendering + light scheme ─────────────────────────── */
  body.kpi-print-active {
    color-scheme: light !important;
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
    font-size: 10px;
  }

  body.kpi-print-active * {
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
  }

  /* ── Hide every UI element except the active KPI subtab ─────────────────── */
  body.kpi-print-active header,
  body.kpi-print-active .nav-tabs,
  body.kpi-print-active #sidebar,
  body.kpi-print-active #tab-kpi .wl-kpi-toolbar,
  body.kpi-print-active #tab-kpi .wl-kpi-unit-toggle,
  body.kpi-print-active #tab-kpi .dl-subtabs,
  body.kpi-print-active #tab-kpi .panel-actions,
  body.kpi-print-active #tab-kpi .deadlines-right-col,
  body.kpi-print-active #tab-kpi .deadlines-sidebar,
  body.kpi-print-active .modal-overlay,
  body.kpi-print-active footer,
  body.kpi-print-active #btn-refresh-kpi,
  body.kpi-print-active #chip-kpi {
    display: none !important;
  }

  /* ── Show the print-only header ─────────────────────────────────────────── */
  body.kpi-print-active #kpi-print-header {
    display: block !important;
    margin-bottom: 10px;
    border-bottom: 1px solid #ccc;
    padding-bottom: 8px;
  }

  /* ── Reveal #tab-kpi and its content panel ──────────────────────────────── */
  body.kpi-print-active #tab-kpi {
    display: block !important;
    position: static !important;
    width: 100% !important;
    padding: 0 !important;
  }

  body.kpi-print-active #tab-kpi .deadlines-layout {
    display: block !important;
    width: 100% !important;
  }

  body.kpi-print-active #tab-kpi .deadlines-content {
    width: 100% !important;
    max-width: 100% !important;
    padding: 10px !important;
    overflow: visible !important;
  }

  /* ── Show ONLY the active sub-tab container ─────────────────────────────── */
  body.kpi-print-active #kpi-subtab-charts,
  body.kpi-print-active #kpi-subtab-matrix,
  body.kpi-print-active #kpi-subtab-cards {
    display: none !important;
    width: 100% !important;
    overflow: visible !important;
  }

  body.kpi-print-active[data-active-print-tab="kpi-subtab-charts"] #kpi-subtab-charts,
  body.kpi-print-active[data-active-print-tab="kpi-subtab-matrix"] #kpi-subtab-matrix,
  body.kpi-print-active[data-active-print-tab="kpi-subtab-cards"] #kpi-subtab-cards {
    display: block !important;
    width: 100% !important;
  }

  /* ── Chart containers: ensure visibility ────────────────────────────────── */
  body.kpi-print-active .wl-dashboard-grid {
    display: grid !important;
    width: 100% !important;
    gap: 12px !important;
  }

  body.kpi-print-active .wl-chart-card {
    break-inside: avoid;
    page-break-inside: avoid;
    border: 1px solid var(--color-border, #e0e0e0) !important;
    background: #fff !important;
  }

  body.kpi-print-active .wl-chart-card canvas {
    max-width: 100% !important;
    height: auto !important;
  }

  /* ── Matrix / heatmap tables: fit to page, keep colours ──────────────────── */
  body.kpi-print-active .kpi-matrix-wrap {
    overflow-x: visible !important;
    overflow-y: visible !important;
    max-height: none !important;
    border: none !important;
  }

  body.kpi-print-active .kpi-heatmap-table {
    width: 100% !important;
    font-size: 9px !important;
    border-collapse: collapse !important;
  }

  body.kpi-print-active .kpi-heatmap-table th,
  body.kpi-print-active .kpi-heatmap-table td {
    border: 1px solid #ccc !important;
    padding: 4px 6px !important;
    text-align: center !important;
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
    white-space: normal !important;
    word-break: break-word !important;
  }

  body.kpi-print-active .kpi-heatmap-table th {
    background: #f5f5f5 !important;
    font-weight: 600 !important;
    color: #333 !important;
  }

  body.kpi-print-active .kpi-matrix-expert-col {
    min-width: 80px !important;
    max-width: 120px !important;
  }

  /* ── Expert cards ───────────────────────────────────────────────────────── */
  body.kpi-print-active .expert-kpi-card {
    break-inside: avoid;
    page-break-inside: avoid;
    border: 1px solid var(--color-border, #e0e0e0) !important;
    background: #fff !important;
  }

  /* ── Pagination ─────────────────────────────────────────────────────────── */
  @page {
    size: A4 landscape;
    margin: 10mm;
  }
}

/* �� Login Overlay (���� 2) ������������������������������������������������� */
#login-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: rgba(15, 23, 42, 0.85);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ── Login Card ─────────────────────────────────────────────────────── */
.login-card {
  background: #fff;
  border-radius: 12px;
  padding: 36px 32px 28px;
  width: min(92vw, 380px);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
  animation: loginFadeIn 0.35s ease-out;
}

/* ── Login Logo ─────────────────────────────────────────────────────── */
.login-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-bottom: 24px;
  font-size: 18px;
  font-weight: 600;
  color: var(--color-text, #1e293b);
  letter-spacing: -0.3px;
}

/* ── Login Fields ────────────────────────────────────────────────────── */
.login-label {
  display: block;
  font-size: 12px;
  font-weight: 500;
  color: var(--color-text-muted, #64748b);
  margin-bottom: 4px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.login-input {
  display: block;
  width: 100%;
  box-sizing: border-box;
  padding: 10px 12px;
  margin-bottom: 14px;
  border: 1px solid var(--color-border, #e2e8f0);
  border-radius: 6px;
  font-size: 14px;
  font-family: var(--font-sans);
  color: var(--color-text, #1e293b);
  background: var(--color-bg, #f8fafc);
  transition: border-color 0.15s, box-shadow 0.15s;
  outline: none;
}

.login-input:focus {
  border-color: var(--color-primary, #2563eb);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
}

/* ── Password show/hide toggle ──────────────────────────────────────── */
.pwd-wrap {
  position: relative;
  margin-bottom: 14px;
}
.pwd-wrap .login-input {
  margin-bottom: 0;
  padding-right: 38px;
}
.pwd-toggle-btn {
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 4px;
  cursor: pointer;
  color: var(--color-text-muted, #94a3b8);
  transition: color 0.15s, background 0.15s;
}
.pwd-toggle-btn:hover { color: var(--color-text, #1e293b); background: rgba(0,0,0,0.04); }
.pwd-toggle-btn:focus-visible {
  outline: 2px solid var(--color-primary, #2563eb);
  outline-offset: 1px;
}
.pwd-toggle-btn svg { width: 18px; height: 18px; pointer-events: none; }

/* ── Login Button ────────────────────────────────────────────────────── */
.login-btn {
  display: block;
  width: 100%;
  padding: 11px 0;
  margin-top: 20px;
  border: none;
  border-radius: 6px;
  background: var(--color-primary, #2563eb);
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  font-family: var(--font-sans);
  cursor: pointer;
  transition: background 0.15s, transform 0.1s;
}

.login-btn:hover {
  background: #1d4ed8;
}

.login-btn:active {
  transform: scale(0.98);
}

.login-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none;
}

/* ── Login Error ─────────────────────────────────────────────────────── */
.login-error {
  font-size: 12px;
  color: #dc2626;
  margin-top: -6px;
  margin-bottom: 6px;
  padding: 6px 10px;
  background: #fef2f2;
  border-radius: 4px;
  border: 1px solid #fecaca;
  animation: loginFadeIn 0.2s ease-out;
}

/* ── Login Fade-in Keyframes ─────────────────────────────────────────── */
@keyframes loginFadeIn {
  from {
    opacity: 0;
    transform: translateY(-12px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ── KPI Settings Modal ────────────────────────────────────────────── */
.kpi-st-box {
  width: min(98vw, 1020px);
  max-height: 92vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.kpi-st-toolbar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 24px 12px;
  border-bottom: 1px solid var(--color-border, #e3e6ea);
  flex-wrap: wrap;
}
.kpi-st-legend {
  font-size: 11px;
  color: var(--color-text-hint, #6b7280);
  display: inline-flex;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;
}
.kpi-st-pill {
  display: inline-block;
  min-width: 22px;
  padding: 1px 6px;
  border-radius: 8px;
  font-size: 10px;
  font-weight: 600;
  line-height: 1.4;
  text-align: center;
  color: #333;
  margin-right: 2px;
}
.kpi-st-pill.cat-M { background: #d3efd3; }
.kpi-st-pill.cat-C { background: #ffd9a8; }
.kpi-st-pill.cat-L { background: #c8dcf5; }
.kpi-st-pill.cat-O { background: #e0e0e0; }
.kpi-st-table-wrap {
  flex: 1 1 auto;
  overflow: auto;
  padding: 0 24px;
}
.kpi-st-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12.5px;
  table-layout: fixed;
}
.kpi-st-table thead th {
  position: sticky;
  top: 0;
  background: #f3f6fa;
  text-align: center;
  padding: 8px 8px;
  font-weight: 600;
  font-size: 11px;
  color: #444;
  border-bottom: 2px solid #d6dce4;
  z-index: 1;
  white-space: nowrap;
}
.kpi-st-table tbody td {
  padding: 4px 8px;
  border-bottom: 1px solid #eef1f5;
  vertical-align: middle;
}
.kpi-st-table tbody tr:hover {
  background: #f8fafd;
}
.kpi-st-col-name  {
  width: 240px;
  overflow: hidden;
}
.kpi-st-col-name .kpi-st-name-line {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-weight: 500;
}
.kpi-st-col-name .kpi-st-dept-line {
  font-size: 11px;
  color: var(--color-text-hint, #6b7280);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-top: 1px;
}
.kpi-st-col-num   { width: 70px; }
.kpi-st-col-cnt   { width: 168px; white-space: nowrap; }
.kpi-st-cnt-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 4px;
}

/* Подсветка колонки «Норма О» (главная метрика KPI) */
.kpi-st-table th.kpi-st-col-main,
.kpi-st-table td.kpi-st-col-main {
  background: #f1f8f1;
  border-left: 2px solid #93c293;
}
.kpi-st-table th.kpi-st-col-main {
  background: #e9f3e9;
}

.kpi-st-input {
  width: 60px;
  padding: 3px 4px;
  font-size: 13px;
  text-align: center;
  border: 1px solid #cdd3da;
  border-radius: 4px;
  background: #fff;
}
.kpi-st-input:focus {
  outline: none;
  border-color: #4f7fb8;
  box-shadow: 0 0 0 2px rgba(79, 127, 184, 0.12);
}
.kpi-st-input::placeholder {
  color: #c4cad2;
}
/* Жёлтая подсветка пустого норматива (= не задано) */
.kpi-st-input:placeholder-shown {
  border-color: #f0c14b;
  background: #fffbf0;
}
.kpi-st-input:placeholder-shown:focus {
  background: #fff;
}

/* Per-row save indicator */
.kpi-st-save {
  display: inline-block;
  width: 18px;
  text-align: center;
  margin-right: 4px;
  font-size: 13px;
  vertical-align: middle;
}
.kpi-st-save.saving { color: #b88a2a; }
.kpi-st-save.success { color: #2e7d32; }
.kpi-st-save.error { color: #c62828; }

.kpi-st-edit-svc {
  padding: 4px 8px;
  font-size: 14px;
  border: 1px solid #cdd3da;
  border-radius: 4px;
  background: #fff;
  cursor: pointer;
  line-height: 1;
}
.kpi-st-edit-svc:hover {
  background: #eef4fb;
  border-color: #4f7fb8;
}

/* ── Modal help (?) button ───────────────────────────────────────── */
.modal-help-btn {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 1.5px solid #9baac0;
  background: #fff;
  color: #4f7fb8;
  font-size: 14px;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.modal-help-btn:hover { background: #eef4fb; border-color: #4f7fb8; }

/* ── Help modal body styles ──────────────────────────────────────── */
#modal-help-body h3 {
  font-size: 13px;
  font-weight: 700;
  color: #1e3a5f;
  margin: 18px 0 4px;
}
#modal-help-body h3:first-child { margin-top: 8px; }
#modal-help-body p { margin: 0 0 8px; }
#modal-help-body ul { margin: 4px 0 8px; padding-left: 20px; }
#modal-help-body li { margin-bottom: 3px; }
#modal-help-body b { color: #1e3a5f; }

/* ── KPI Employee Services Sub-Modal (Stage 4) ──────────────────── */
.kpi-emp-svc-toolbar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 24px 10px;
  border-bottom: 1px solid var(--color-border, #e3e6ea);
  flex-shrink: 0;
}
.kpi-emp-svc-wrap {
  flex: 1 1 auto;
  overflow: auto;
  padding: 0 24px;
  min-height: 0;
}
.kpi-emp-svc-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.kpi-emp-svc-table thead th {
  position: sticky;
  top: 0;
  background: #f3f6fa;
  text-align: left;
  padding: 7px 8px;
  font-size: 11px;
  font-weight: 600;
  color: #444;
  border-bottom: 2px solid #d6dce4;
  z-index: 1;
  white-space: nowrap;
}
.kpi-emp-svc-table tbody td {
  padding: 5px 8px;
  border-bottom: 1px solid #eef1f5;
  vertical-align: middle;
}
.kpi-emp-svc-table tbody tr:hover { background: #f8fafd; }
.kpi-emp-svc-col-cat { width: 160px; }
.kpi-emp-svc-col-del { width: 36px; }
.kpi-emp-svc-cat-sel {
  width: 150px;
  padding: 3px 6px;
  font-size: 12px;
  border: 1px solid #cdd3da;
  border-radius: 4px;
  background: #fff;
}
.kpi-emp-svc-del-btn {
  background: none;
  border: none;
  cursor: pointer;
  color: #bbb;
  font-size: 18px;
  padding: 0 4px;
  border-radius: 3px;
  line-height: 1;
}
.kpi-emp-svc-del-btn:hover { color: #d9534f; background: #fff0f0; }
.kpi-emp-svc-add-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 24px;
  border-top: 2px solid #e3e6ea;
  background: #f8fafd;
  flex-shrink: 0;
}
.kpi-emp-svc-add-row select { flex: 1 1 auto; min-width: 0; }
.kpi-emp-svc-addbtn {
  padding: 5px 16px;
  font-size: 13px;
  font-weight: 600;
  background: #4f7fb8;
  color: #fff;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
}
.kpi-emp-svc-addbtn:hover { background: #3a6a9e; }
.kpi-emp-svc-addbtn:disabled { background: #a0b8d4; cursor: default; }
/* ─── Access Control Modal — карточный layout ─────────────────────────── */
.ac-modal-box {
  max-width: 760px;
  width: 95vw;
  display: flex;
  flex-direction: column;
  max-height: 96vh;     /* было 92vh — поднимаем потолок, чтобы карточки помещались */
}
.ac-loading {
  text-align: center;
  color: var(--color-text-muted);
  padding: 40px 0;
}

/* «Добавить администратора» */
.ac-add-area {
  padding: 16px 24px 8px;
}
.ac-add-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 12px 14px;
  background: #fff;
  border: 2px dashed #cbd5e1;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 600;
  color: #64748b;
  cursor: pointer;
  transition: all 0.15s;
}
.ac-add-btn:hover {
  border-color: var(--color-primary);
  color: var(--color-primary);
  background: #f8fafd;
}
.ac-add-icon { font-size: 16px; }
.ac-add-form {
  background: #f8fafd;
  border: 1px solid var(--color-border);
  border-radius: 10px;
  padding: 16px;
  margin-top: 8px;
}
.ac-add-grid {
  display: grid;
  /* 2 поля (Логин, Пароль) — равная ширина. Раньше было 3 колонки
     с «Имя», но после Commit 1 поле «Имя» удалено, и пароль с 🎲
     не вмещался в треть ширины. */
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.ac-field label {
  display: block;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  color: var(--color-text-muted);
  font-weight: 600;
  margin-bottom: 4px;
}
.ac-field input, .ac-field select {
  width: 100%;
  box-sizing: border-box;
  padding: 7px 9px;
  border: 1px solid var(--color-border);
  border-radius: 6px;
  font-size: 13px;
  background: #fff;
}
.ac-field input:focus, .ac-field select:focus {
  outline: none;
  border-color: var(--color-primary);
}
.ac-create-error {
  color: var(--color-danger);
  font-size: 12px;
  margin-top: 8px;
}
.ac-add-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 12px;
}

/* Карточки */
.ac-cards-area {
  padding: 8px 24px 16px;
  overflow-y: auto;
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.ac-card {
  border: 1px solid var(--color-border);
  border-radius: 10px;
  background: #fff;
  /* overflow:visible — иначе абсолютно позиционированная панель «Доступ»
     (.ac-tabs-grid в развёрнутом details) обрезается по краю карточки. */
  overflow: visible;
  transition: box-shadow 0.15s, border-color 0.15s;
  border-left: 4px solid #cbd5e1;
  flex-shrink: 0;
}
.ac-card:hover { box-shadow: 0 2px 8px rgba(0,0,0,0.06); }
.ac-card.role-super  { border-left-color: #f59e0b; }
.ac-card.role-admin  { border-left-color: #3b82f6; }
.ac-card.inactive    { opacity: 0.7; background: #fafafa; }
.ac-card.dirty       { border-color: #f59e0b; box-shadow: 0 0 0 1px #fde68a; }

.ac-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;       /* было 14px 16px — компактнее */
  border-bottom: 1px solid #f1f5f9;
  gap: 12px;
}
.ac-card-identity {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}
.ac-card-icon {
  font-size: 20px;
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f1f5f9;
  border-radius: 50%;
}
.ac-card.role-super .ac-card-icon {
  background: linear-gradient(135deg, #fef3c7, #fde68a);
}
.ac-card.role-admin .ac-card-icon {
  background: linear-gradient(135deg, #dbeafe, #bfdbfe);
}
.ac-card-names { min-width: 0; }
.ac-card-username {
  font-size: 15px;
  font-weight: 700;
  color: var(--color-text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ac-card-display {
  font-size: 12px;
  color: var(--color-text-muted);
  margin-top: 2px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Generator-кнопка 🎲 рядом с полем пароля. flex-обёртка чтобы кнопка
   не растягивала input. */
.ac-pwd-wrap {
  display: flex;
  gap: 6px;
  align-items: stretch;
}
.ac-pwd-wrap input {
  flex: 1;
  min-width: 0;
}
.ac-pwd-gen-btn {
  flex: 0 0 auto;
  padding: 0 10px;
  border: 1px solid var(--color-border);
  background: var(--color-bg-soft, #f3f4f6);
  border-radius: 6px;
  cursor: pointer;
  font-size: 16px;
  line-height: 1;
}
.ac-pwd-gen-btn:hover {
  background: var(--color-bg-hover, #e5e7eb);
}

/* ── Password Change Modal — заменяет prompt/confirm/alert ──────────────── */
.ac-pwd-modal-label {
  display: block;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  color: var(--color-text-muted);
  font-weight: 600;
  margin-bottom: 6px;
}
#modal-pwd-change input {
  width: 100%;
  box-sizing: border-box;
  padding: 9px 10px;
  border: 1px solid var(--color-border);
  border-radius: 6px;
  font-size: 14px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  background: #fff;
}
#modal-pwd-change input:focus {
  outline: none;
  border-color: var(--color-primary);
}
.pwd-change-error {
  display: none;
  color: var(--color-danger);
  font-size: 12px;
  margin-top: 8px;
  padding: 6px 10px;
  background: #fef2f2;
  border: 1px solid #fecaca;
  border-radius: 6px;
}
.pwd-change-success-pane {
  padding: 14px 16px;
  background: linear-gradient(to right, #ecfdf5, #f0fdf4);
  border: 1px solid #a7f3d0;
  border-radius: 8px;
}
.pwd-change-success-title {
  font-size: 14px;
  font-weight: 700;
  color: #065f46;
}
.pwd-change-display-box {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  background: #fff;
  border: 1px solid #d1d5db;
  border-radius: 6px;
}
/* Список получателей в модалке #modal-kpi-run-now */
.kpi-runnow-list {
  border: 1px solid var(--color-border);
  border-radius: 6px;
  background: #fafbfc;
  max-height: 240px;
  overflow-y: auto;
  padding: 4px;
}
.kpi-runnow-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 8px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 13px;
}
.kpi-runnow-item:hover {
  background: rgba(0, 0, 0, 0.03);
}
.kpi-runnow-item input[type="checkbox"] {
  margin: 0;
}
.kpi-runnow-item .kpi-mgr-name {
  flex: 1;
  font-weight: 600;
}
.kpi-runnow-item .kpi-mgr-meta {
  color: var(--color-text-muted);
  font-size: 11px;
}
.kpi-runnow-item.on-vacation .kpi-mgr-name {
  opacity: 0.7;
}
.kpi-runnow-item .kpi-mgr-warn {
  color: #b45309;
  font-size: 11px;
  margin-left: 4px;
}

.pwd-change-display-box code {
  flex: 1;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 15px;
  color: #111827;
  word-break: break-all;
  font-weight: 600;
}

/* Ряд «Роль + Доступ» — grid 180px + 1fr.
   Оба элемента — это .ac-field (label + control), что даёт согласованную
   шапку «РОЛЬ» / «ДОСТУП» и контролы на одном уровне.
   Для главного администратора (карточка с full-access): второй .ac-field
   содержит inline-badge ✓ Полный доступ.
   Для обычного пользователя: второй .ac-field содержит <details> с
   чекбоксами вкладок — при раскрытии чекбоксы плавно выпадают вниз
   ВНУТРИ ячейки, не сдвигая «Роль». */
.ac-card-row.role-with-access {
  display: grid !important;       /* перебивает default `.ac-card-row { grid 1fr 1fr }` */
  grid-template-columns: 180px 1fr;
  gap: 12px;
  align-items: start;
}
.ac-card-row.role-with-access > .ac-field {
  min-width: 0;
}
.ac-card-row.role-with-access > .ac-field select {
  width: 100%;
  box-sizing: border-box;
}
/* Inline-badge «✓ Полный доступ» (для главного админа) — стилизуем так,
   чтобы по высоте/радиусу соответствовало <select> в соседней колонке. */
.ac-access-summary-inline {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 12px;
  border-radius: 6px;
  font-size: 12px;
  line-height: 1.3;
  background: linear-gradient(to right, #fef3c7, #fffbeb);
  color: #92400e;
  white-space: normal;
  overflow: hidden;
  width: 100%;
  box-sizing: border-box;
}
/* <details> внутри .ac-field — компактный summary, по стилю как select. */
.ac-field > details.ac-access-details {
  border: none;
  background: transparent;
  position: relative;            /* якорь для абсолютной панели с чекбоксами */
}
.ac-field > details.ac-access-details summary {
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: 6px;
  padding: 7px 10px;
  font-size: 13px;
}
.ac-field > details.ac-access-details[open] summary {
  border-radius: 6px 6px 0 0;
  border-color: var(--color-primary, #2563eb);
}
.ac-field > details.ac-access-details[open] .ac-tabs-grid {
  /* Панель раскрывается АБСОЛЮТНО — ровно по ширине summary, не толкает
     модалку и не вызывает горизонтальных скроллов. Если содержимое выше
     лимита по высоте — скроллится ВНУТРИ панели. */
  position: absolute;
  top: 100%;
  right: 0;
  left: 0;
  z-index: 50;
  background: #fff;
  border: 1px solid var(--color-primary, #2563eb);
  border-top: none;
  border-radius: 0 0 6px 6px;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.10);
  max-height: 280px;
  overflow-y: auto;
}

/* Summary: число + имена выбранных вкладок. Имена обрезаются ellipsis
   при длинном списке (а полный список — в title). */
.ac-access-summary-text {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  min-width: 0;
  flex: 1;
}
.ac-access-count {
  flex: 0 0 auto;
  font-weight: 600;
  color: var(--color-primary, #2563eb);
}
.ac-access-names {
  flex: 1 1 auto;
  min-width: 0;
  color: var(--color-text-muted, #64748b);
  font-size: 12px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Computed-связка admin → employee по схеме {login}@karexp.ru.
   Имя сотрудника и email — на отдельных строках. Так длинное ФИО
   видно целиком, а email (всегда короткий) тоже не обрезается. */
.ac-card-realname {
  font-size: 13px;
  color: var(--color-text);
  font-weight: 600;
  margin-top: 4px;
  line-height: 1.3;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ac-card-email {
  font-size: 12px;
  color: var(--color-text-muted);
  margin-top: 2px;
  line-height: 1.3;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ac-card-email-warn {
  color: var(--color-warning, #b45309);
}
.ac-card-emp-warn {
  font-style: italic;
  font-size: 11px;
}

/* Статус-чип «Активен / Заблокирован» — кликабельный */
.ac-status-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  border: 1px solid;
  border-radius: 14px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  background: #fff;
  transition: all 0.15s;
  flex-shrink: 0;
}
.ac-status-toggle.active {
  color: #15803d;
  border-color: #86efac;
  background: #f0fdf4;
}
.ac-status-toggle.active:hover { background: #dcfce7; }
.ac-status-toggle.inactive {
  color: #475569;
  border-color: #cbd5e1;
  background: #f1f5f9;
}
.ac-status-toggle.inactive:hover { background: #e2e8f0; }
.ac-status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
}
.ac-status-toggle.active .ac-status-dot   { background: #22c55e; }
.ac-status-toggle.inactive .ac-status-dot { background: #94a3b8; }

/* Тело карточки */
.ac-card-body {
  padding: 10px 14px 12px;   /* было 14px 16px — компактнее */
  display: flex;
  flex-direction: column;
  gap: 10px;
}
/* Пустой блок (у главного админа всё в inline-badge) не должен занимать gap. */
.ac-access-block:empty {
  display: none;
}

/* Chevron-кнопка свёртывания карточки в шапке. Свёрнутая карточка
   показывает только .ac-card-head (логин/ФИО/email/статус).
   Default-состояние — collapsed, чтобы при открытии модалки сразу
   видеть весь список админов компактно. */
.ac-card-collapse-btn {
  border: 1px solid transparent;
  background: transparent;
  cursor: pointer;
  font-size: 20px;
  color: var(--color-text-muted);
  padding: 4px 12px;
  border-radius: 6px;
  flex-shrink: 0;
  transition: background 0.15s, border-color 0.15s;
  line-height: 1;
  min-width: 40px;
  min-height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.ac-card-collapse-btn:hover {
  background: #f1f5f9;
  border-color: var(--color-border);
  color: var(--color-text);
}
.ac-card.collapsed .ac-card-body,
.ac-card.collapsed .ac-card-foot {
  display: none;
}
.ac-card.collapsed .ac-card-head {
  border-bottom: none;
}
.ac-card-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

/* Блок доступа к вкладкам */
.ac-access-summary {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  border-radius: 8px;
  font-size: 13px;
}
.ac-access-summary.super {
  background: linear-gradient(to right, #fef3c7, #fffbeb);
  color: #92400e;
}
.ac-access-summary.admin {
  background: #eff6ff;
  color: #1e40af;
}
.ac-access-badge { font-weight: 700; }
.ac-access-hint {
  font-size: 11px;
  color: inherit;
  opacity: 0.75;
}
.ac-access-details {
  border: 1px solid var(--color-border);
  border-radius: 8px;
  background: #fafbfc;
}
.ac-access-details summary {
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  font-size: 13px;
  list-style: none;
  user-select: none;
}
.ac-access-details summary::-webkit-details-marker { display: none; }
.ac-access-details summary::after {
  content: '▾';
  color: var(--color-text-muted);
  font-size: 11px;
  transition: transform 0.15s;
}
.ac-access-details[open] summary::after { transform: rotate(180deg); }
.ac-tabs-grid {
  display: flex;
  flex-direction: column;
  padding: 4px 0;
}
.ac-tabs-grid label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  cursor: pointer;
  white-space: nowrap;
  padding: 7px 14px;
  transition: background 0.1s;
}
.ac-tabs-grid label:hover {
  background: rgba(37, 99, 235, 0.06);
}
.ac-tabs-grid input[type="checkbox"] {
  width: auto;
  margin: 0;
  flex-shrink: 0;
}

/* Подвал карточки с действиями */
.ac-card-foot {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  background: #fafafa;
  border-top: 1px solid #f1f5f9;
}
.ac-act-btn {
  padding: 6px 12px;
  font-size: 12px;
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: 6px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  transition: all 0.15s;
}
.ac-act-btn:hover { background: #f1f5f9; }
.ac-act-del {
  color: #b91c1c;
  border-color: #fca5a5;
}
.ac-act-del:hover {
  background: #fef2f2;
  border-color: #f87171;
}
.ac-act-reactivate {
  color: #15803d;
  border-color: #86efac;
  background: #f0fdf4;
}
.ac-act-reactivate:hover {
  background: #dcfce7;
  border-color: #4ade80;
}
.ac-act-save {
  margin-left: auto;
  background: var(--color-primary);
  color: #fff;
  border: none;
  font-weight: 600;
}
.ac-act-save:hover { background: var(--color-primary-hover); }
.ac-act-save.dirty {
  background: #f59e0b;
  animation: ac-pulse 1.5s infinite;
}
.ac-act-save.dirty:hover { background: #d97706; }
@keyframes ac-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(245, 158, 11, 0.4); }
  50%      { box-shadow: 0 0 0 6px rgba(245, 158, 11, 0); }
}

/* Hint при наличии «связь с сотрудником» без email */
.ac-linked-warn {
  font-size: 11px;
  color: #b87a00;
  margin-top: 4px;
}