/* ============================================================================
   2. Сброс и базовые элементы
   ============================================================================ */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html, body, #root {
  height: 100%;
}

body {
  font-family: 'Inter', system-ui, sans-serif;
  background: var(--bg);
  color: var(--txt);
  font-size: 16px;
}

button {
  font-family: inherit;
  cursor: pointer;
}

input, select, textarea {
  font-family: inherit;
  font-size: 16px;
  color: var(--txt);
}

::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
::-webkit-scrollbar-thumb {
  background: var(--slate-300);
  border-radius: 8px;
  border: 2px solid var(--bg);
}


/* ============================================================================
   3. CSS-переменные
   ============================================================================ */
:root {
  /* Семантические - уже были. Оставляем как есть: их читают по имени
     и в CSS, и в комментариях; переименование сломало бы узнаваемость. */
  --bg: #eef2f7;
  --panel: #fff;
  --line: #e2e8f0;
  --txt: #0f172a;
  --mut: #64748b;
  --acc: #2563eb;
  --acc2: #0ea5e9;
  --side: #0c1526;
  --side2: #16233c;
  --sh: 0 1px 2px rgba(15, 23, 42, .06), 0 4px 16px rgba(15, 23, 42, .06);

  /*
   * Примитивы. Один hex - одно имя. Всё, что ниже, объявлено ровно
   * один раз; по файлу используются только эти имена.
   *
   * Нейминг - Tailwind-подобный (slate-500, red-600).
   */

  /* Нейтральные (slate) */
  --slate-50:  #f8fafc;
  --slate-100: #f1f5f9;
  --slate-200: #e2e8f0;
  --slate-300: #cbd5e1;
  --slate-400: #94a3b8;
  --slate-500: #64748b;
  --slate-600: #475569;
  --slate-700: #334155;
  --slate-900: #0f172a;

  /* Синий */
  --blue-50:  #eff6ff;
  --blue-200: #bfdbfe;
  --blue-500: #3b82f6;
  --blue-600: #2563eb;
  --blue-700: #1d4ed8;
  --blue-800: #1e40af;

  /* Голубой (sky) - акцент карточек, ссылок, hover */
  --sky-100: #e0f2fe;
  --sky-500: #0ea5e9;
  --sky-700: #0369a1;

  /* Красный */
  --red-50:  #fef2f2;
  --red-200: #fecaca;
  --red-500: #ef4444;
  --red-600: #dc2626;
  --red-700: #b91c1c;

  /* Зелёный (emerald) - «успех», «принято», «закрыто» */
  --emerald-50:  #ecfdf5;
  --emerald-200: #a7f3d0;
  --emerald-500: #10b981;
  --emerald-600: #059669;
  --emerald-700: #047857;

  /* Янтарный (amber) - «внимание», «на проверке», «срок близко» */
  --amber-50:  #fffbeb;
  --amber-200: #fde68a;
  --amber-500: #f59e0b;
  --amber-600: #d97706;
  --amber-700: #b45309;

  /* Текст поверх цветных кнопок и тёмных подложек */
  --on-accent: #fff;
}


/* ============================================================================
   4. Анимации
   ============================================================================ */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}

@keyframes popIn {
  from { opacity: 0; transform: scale(.97); }
  to   { opacity: 1; transform: scale(1); }
}

@keyframes shake {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-8px); }
  40% { transform: translateX(8px); }
  60% { transform: translateX(-5px); }
  80% { transform: translateX(5px); }
}

@keyframes slideInLeft {
  from { opacity: 0; transform: translateY(-50%) translateX(20px); }
  to   { opacity: 1; transform: translateY(-50%) translateX(0); }
}

@keyframes reaction-pop {
  from { opacity: 0; transform: translateY(4px) scale(.95); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes comment-flash {
  0%, 100% { background: transparent; }
  20%      { background: rgba(37, 99, 235, .15); }
}


/* ============================================================================
   5. Утилитарные классы
   ============================================================================ */
.flex            { display: flex; }
.flex-col        { flex-direction: column; }
.flex-wrap       { flex-wrap: wrap; }
.flex-1          { flex: 1; }
.flex-none       { flex: none; }
.items-center    { align-items: center; }
.items-start     { align-items: flex-start; }
.items-end       { align-items: flex-end; }
.justify-between { justify-content: space-between; }
.justify-end     { justify-content: flex-end; }
.justify-center  { justify-content: center; }
.gap-1           { gap: 4px; }
.gap-2           { gap: 8px; }
.gap-3           { gap: 12px; }
.gap-4           { gap: 16px; }
.gap-5           { gap: 20px; }
.gap-6           { gap: 24px; }
.gap-8           { gap: 8px; }
.gap-10          { gap: 10px; }

.w-full          { width: 100%; }
.w-auto          { width: auto; }
.h-full          { height: 100%; }
.min-w-60        { min-width: 60px; }
.min-w-80        { min-width: 80px; }
.min-w-200       { min-width: 200px; }
.min-w-300       { min-width: 300px; }
.w-140           { width: 140px; }
.w-150           { width: 150px; }
.w-180           { width: 180px; }
.w-200           { width: 200px; }

.overflow-auto   { overflow: auto; }
.overflow-x-auto { overflow-x: auto; }

.relative        { position: relative; }
.absolute        { position: absolute; }

.text-center     { text-align: center; }
.text-left       { text-align: left; }
.text-right      { text-align: right; }
.text-mut        { color: var(--mut); }
.text-sm         { font-size: 14px; }
.text-xs         { font-size: 12px; }
.text-12         { font-size: 12px; }
.font-bold       { font-weight: 700; }
.font-semibold   { font-weight: 600; }
.font-normal     { font-weight: 400; }
.nowrap          { white-space: nowrap; }
.cursor-pointer  { cursor: pointer; }
.object-cover    { object-fit: cover; }

.p-1 { padding: 4px; }
.p-2 { padding: 8px; }
.p-3 { padding: 12px; }
.p-4 { padding: 16px; }
.p-5 { padding: 20px; }

.m-1 { margin: 4px; }
.m-2 { margin: 8px; }
.m-3 { margin: 12px; }
.m-4 { margin: 16px; }
.m-5 { margin: 20px; }
.mt-1 { margin-top: 4px; }
.mt-2 { margin-top: 8px; }
.mt-3 { margin-top: 12px; }
.mt-4 { margin-top: 16px; }
.mt-5 { margin-top: 20px; }
.mt-8 { margin-top: 8px; }
.mt-12 { margin-top: 12px; }
.mt-16 { margin-top: 16px; }
.mb-1 { margin-bottom: 4px; }
.mb-2 { margin-bottom: 8px; }
.mb-3 { margin-bottom: 12px; }
.mb-4 { margin-bottom: 16px; }
.mb-5 { margin-bottom: 20px; }
.mb-8 { margin-bottom: 8px; }
.mb-12 { margin-bottom: 12px; }
.ml-1 { margin-left: 4px; }
.ml-2 { margin-left: 8px; }
.ml-8 { margin-left: 8px; }
.ml-auto { margin-left: auto; }
.mr-2 { margin-right: 8px; }

.border   { border: 1px solid var(--line); }
.border-b { border-bottom: 1px solid var(--line); }
.border-t { border-top: 1px solid var(--line); }

.rounded      { border-radius: 8px; }
.rounded-lg   { border-radius: 12px; }
.rounded-full { border-radius: 9999px; }

.mut { color: var(--mut); }
.sm  { font-size: 14px; }
.red { color: var(--red-600); }
.spacer { flex: 1; }

.required-star {
  color: var(--red-600);
  font-weight: 700;
  margin-left: 2px;
}

.lbl {
  font-size: 13px;
  font-weight: 700;
  color: var(--mut);
  margin-top: 6px;
  text-transform: uppercase;
  letter-spacing: .4px;
}

.checkbox-inline {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 14px;
  cursor: pointer;
}

.link {
  border: none;
  background: none;
  color: var(--acc);
  font-size: 14px;
  font-weight: 600;
  text-decoration: underline;
  padding: 0;
  text-align: left;
}
.red-link {
  color: var(--red-600);
}


/* ============================================================================
   6. Кнопки
   ============================================================================ */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 36px;
  padding: 0 18px;
  border-radius: 10px;
  border: 1px solid transparent;
  font-size: 15px;
  font-weight: 700;
  transition: transform .15s, background-color .15s, border-color .15s,
              color .15s, box-shadow .15s;
  white-space: nowrap;
}
.btn.primary {
  background: linear-gradient(135deg, var(--acc), var(--blue-700));
  color: var(--on-accent);
  box-shadow: 0 4px 12px rgba(37, 99, 235, .3);
}
.btn.primary:hover {
  transform: translateY(-1px);
}
.btn.primary:disabled {
  opacity: .5;
  transform: none;
}
.btn.ghost {
  background: var(--panel);
  border-color: var(--line);
  color: var(--txt);
}
.btn.ghost:hover {
  border-color: var(--acc2);
  color: var(--acc);
}
.btn.danger {
  background: var(--red-50);
  color: var(--red-600);
  border-color: var(--red-200);
}
.btn.request-hours {
  background: var(--emerald-50);
  color: var(--emerald-700);
  border-color: var(--emerald-200);
}
.btn.request-hours:hover {
  background: #d1fae5;
  border-color: #6ee7b7;
  color: #065f46;
}
.btn.big {
  padding: 12px;
  font-size: 17px;
  justify-content: center;
  margin-top: 6px;
}
.btn.ghost.sm,
.btn.primary.sm,
.btn.danger.sm {
  height: 30px;
  padding: 0 12px;
  font-size: 14px;
}

.icon-btn {
  border: none;
  background: transparent;
  color: var(--mut);
  border-radius: 8px;
  padding: 7px;
  display: inline-flex;
  align-items: center;
  transition: background-color .15s, color .15s;
  position: relative;
}
.icon-btn:hover {
  background: var(--slate-100);
  color: var(--txt);
}
.icon-btn.danger:hover {
  background: var(--red-50);
  color: var(--red-600);
}
.icon-btn.bell.has {
  color: var(--acc);
}
.icon-btn.xs {
  padding: 2px;
  border-radius: 4px;
}
.icon-btn.xs svg {
  width: 12px;
  height: 12px;
}
.icon-btn.dark {
  margin-left: auto;
  color: var(--slate-400);
  background: transparent;
}
.icon-btn.dark:hover {
  color: #f87171;
  background: var(--side2);
}


/* ============================================================================
   7. Поля ввода
   ============================================================================ */
.inp {
  width: 100%;
  height: 36px;
  padding: 0 14px;
  border: 1px solid var(--line);
  border-radius: 10px;
  outline: none;
  background: var(--panel);
  transition: border-color .15s, box-shadow .15s;
  font-size: 16px;
}

textarea.inp {
  height: auto;
  padding: 10px 14px;
}
.inp:focus {
  border-color: var(--acc2);
  box-shadow: 0 0 0 3px rgba(14, 165, 233, .15);
}
.inp:disabled {
  background: var(--slate-50);
  color: var(--mut);
}
.inp.sel {
  appearance: none;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--mut) 50%),
    linear-gradient(135deg, var(--mut) 50%, transparent 50%);
  background-position: calc(100% - 16px) 15px, calc(100% - 11px) 15px;
  background-size: 5px 5px;
  background-repeat: no-repeat;
  padding-right: 30px;
}
.inp.sel.sm {
  height: 30px;
  padding: 0 26px 0 12px;
  font-size: 14px;
  width: auto;
}
.inp-sm {
  height: 30px;
  padding: 0 10px;
  font-size: 14px;
}

.search-box {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 36px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 0 10px;
  color: var(--mut);
}
.search-box input {
  border: none;
  background: transparent;
  outline: none;
  padding: 0;
  width: 170px;
  font-size: 15px;
}


/* ============================================================================
   8. Кастомный выпадающий список
   ============================================================================ */
.custom-select-trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  text-align: left;
  cursor: pointer;
  gap: 8px;
  width: 100%;
}
.custom-select-trigger > span:first-child {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.custom-select-trigger:disabled {
  cursor: not-allowed;
}

.custom-select-trigger-content {
  display: block;
  flex: 1 1 0%;
  min-width: 0;
  overflow: hidden;
}

.custom-select-single-label {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.custom-select-chips {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 3px;
  overflow: hidden;
}

.sel-chip {
  display: inline-flex;
  align-items: center;
  max-width: 100%;
  padding: 2px 8px;
  border-radius: 6px;
  background: var(--slate-100);
  color: var(--slate-700);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.4;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sel-chip--more {
  background: var(--blue-50);
  color: var(--blue-700);
}

.custom-select-trigger:has(.custom-select-chips) {
  height: auto;
  min-height: 36px;
  padding-top: 6px;
  padding-bottom: 6px;
}

.field-row:has(.custom-select-chips),
.fields-row:has(.custom-select-chips) {
  align-items: flex-start;
}

.custom-select-trigger.inp.sel {
  background-image: none;
  background-position: 0 0;
  background-size: 0 0;
  padding-right: 14px;
}

.custom-select-arrow {
  color: var(--mut);
  font-size: 12px;
  line-height: 1;
  flex: none;
  margin-left: 6px;
  opacity: .7;
}

.custom-select-popup {
  position: fixed;
  left: var(--select-popup-left, 0);
  top: var(--select-popup-top, auto);
  bottom: var(--select-popup-bottom, auto);
  min-width: var(--select-popup-min-width, 0);
  width: max-content;
  max-width: calc(100vw - 16px);
  max-height: 300px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(15, 23, 42, .15);
  z-index: 10000;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  animation: popIn .15s ease;
}

.custom-select-search {
  padding: 6px;
  border-bottom: 1px solid var(--line);
  flex: none;
}
.custom-select-search .inp {
  width: 220px;
}

.custom-select-list {
  overflow-y: auto;
  flex: 1;
  padding: 4px 0;
}

.custom-select-option {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  font-size: 14px;
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: background-color .1s;
}
.custom-select-option:hover {
  background: var(--slate-100);
}
.custom-select-option.on {
  background: var(--blue-50);
  color: var(--acc);
  font-weight: 700;
}
.custom-select-option.hl {
  background: var(--slate-100);
}

.custom-select-option-label {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.custom-select-check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  border: 1px solid var(--slate-300);
  border-radius: 3px;
  font-size: 11px;
  line-height: 1;
  color: transparent;
  flex-shrink: 0;
}
.custom-select-check.on {
  background: var(--acc2);
  border-color: var(--acc2);
  color: var(--on-accent);
}

.custom-select-empty {
  padding: 12px;
  text-align: center;
  color: var(--mut);
  font-size: 13px;
}


/* ============================================================================
   9. Бейджи, чипы, метки
   ============================================================================ */
.st-chip {
  font-size: 13px;
  font-weight: 800;
  border-radius: 6px;
  padding: 3px 8px;
  background: var(--slate-100);
  color: var(--slate-600);
  white-space: nowrap;
}
.st-chip.approved,
.st-chip.active {
  background: var(--emerald-50);
  color: var(--emerald-600);
}
.st-chip.rejected,
.st-chip.revoked {
  background: var(--red-50);
  color: var(--red-600);
}
.st-chip.pending {
  background: var(--amber-50);
  color: var(--amber-700);
}

.pdot {
  width: 8px;
  height: 8px;
  border-radius: 99px;
  display: inline-block;
  flex: none;
}
.kcount {
  background: var(--line);
  color: var(--slate-600);
  border-radius: 99px;
  font-size: 13px;
  font-weight: 700;
  padding: 1px 8px;
  margin-left: auto;
}
.kdot {
  width: 9px;
  height: 9px;
  border-radius: 99px;
  flex: none;
}
.adm-badge {
  font-size: 12px;
  font-weight: 800;
  color: #0f766e;
  background: #ccfbf1;
  border-radius: 6px;
  padding: 2.5px 7px;
  margin-left: 6px;
}
.dept-chip {
  display: inline-block;
  font-size: 13px;
  font-weight: 700;
  background: var(--slate-100);
  border-radius: 7px;
  padding: 4px 9px;
  margin: 0 6px 6px 0;
}
.dept-chip.prim {
  background: #dbeafe;
  color: var(--blue-700);
}
.role-chip {
  font-size: 12px;
  font-weight: 800;
  border-radius: 6px;
  padding: 2.5px 7px;
  letter-spacing: .3px;
}
.role-chip.blue   { background: var(--sky-100); color: var(--sky-700); }
.role-chip.indigo { background: var(--blue-50); color: var(--blue-700); }
.vac-badge {
  font-size: 12px;
  font-weight: 800;
  color: var(--emerald-700);
  background: var(--emerald-50);
  border-radius: 6px;
  padding: 2px 7px;
}
.pos-tag {
  display: inline-flex;
  align-items: center;
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
  color: var(--mut);
  background: var(--line);
  border-radius: 6px;
  padding: 3px 7px;
  margin-left: 6px;
  vertical-align: middle;
  letter-spacing: .2px;
}
.vac-badge.fired {
  background: var(--red-50);
  color: var(--red-600);
}

.avatar {
  width: 32px;
  height: 32px;
  border-radius: 999px;
  background: linear-gradient(135deg, #1e3a8a, var(--acc2));
  color: var(--on-accent);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 700;
  flex: none;
}
.avatar.sm {
  width: 36px;
  height: 36px;
  font-size: 14px;
}
.avatar.xs {
  width: 20px;
  height: 20px;
  font-size: 10px;
  flex-shrink: 0;
}
.avatar-wrapper {
  display: inline-block;
  position: relative;
}
.avatar-tooltip {
  position: fixed;
  background: #1e293b;
  color: var(--on-accent);
  padding: 6px 12px;
  border-radius: 6px;
  font-size: 12px;
  line-height: 1.4;
  white-space: pre-wrap;
  pointer-events: none;
  z-index: 10000;
  max-width: 300px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
  font-family: system-ui, -apple-system, sans-serif;
  transition: opacity 0.15s;
}


/* ============================================================================
   10. Таблицы
   ============================================================================ */
.tbl {
  width: 100%;
  border-collapse: collapse;
  font-size: 15px;
}
.tbl th {
  text-align: left;
  color: var(--mut);
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: .4px;
  padding: 8px 10px;
  border-bottom: 1px solid var(--line);
}
.tbl td {
  padding: 9px 10px;
  border-bottom: 1px solid var(--slate-100);
  vertical-align: middle;
  font-size: 14px;
}

.tasks-table-wrap {
  overflow-x: auto;
}
.tasks-table {
  min-width: 500px;
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  background: var(--panel);
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}
.tasks-table th {
  background: var(--slate-50);
  text-align: left;
  padding: 10px 12px;
  border-bottom: 1px solid var(--line);
  font-weight: 600;
  color: var(--slate-600);
}
.tasks-table td {
  padding: 10px 12px;
  border-bottom: 1px solid var(--slate-100);
  vertical-align: middle;
}
.tasks-table tbody tr:hover {
  background: var(--slate-50);
}

.clickable-row {
  cursor: pointer;
}

.task-status-badge {
  display: inline-block;
  padding: 2px 10px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 500;
}
.task-status-badge.new         { background: var(--line); color: var(--slate-600); }
.task-status-badge.in_progress { background: #dbeafe; color: var(--acc); }
.task-status-badge.review      { background: #fef3c7; color: var(--amber-600); }
.task-status-badge.closed      { background: #d1fae5; color: var(--emerald-600); }
.task-status-badge.cancelled   { background: #fee2e2; color: var(--red-600); }
.task-priority-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 500;
}
.task-priority-badge.critical { background: #fecaca; color: var(--red-700); }
.task-priority-badge.high     { background: #fca5a5; color: var(--red-700); }
.task-priority-badge.medium   { background: #fde68a; color: #92400e; }
.task-priority-badge.low      { background: #e5e7eb; color: #4b5563; }
.late { color: var(--red-600); }

.task-chip {
  display: inline-block;
  border-radius: 999px;
  padding: 2px 8px;
  font-size: 12px;
  font-weight: 600;
}
.task-chip-default {
  background: var(--slate-100);
  color: var(--slate-600);
}
.assigned-executor {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: var(--slate-100);
  border-radius: 16px;
  padding: 2px 8px 2px 4px;
  font-size: 14px;
  font-weight: 500;
  border: 1px solid var(--line);
}
.assigned-executor button {
  background: none;
  border: none;
  color: var(--slate-400);
  font-size: 16px;
  cursor: pointer;
  padding: 0 2px;
  line-height: 1;
}
.assigned-executor button:hover {
  color: var(--red-600);
}

/*
 * Таблицы отчётов. Ширина задаётся классом, а не инлайном, чтобы
 * разметка отчётов не несла ни одного style={{}}.
 *   .tbl-report            — обычная ширина отчётов «Задачи» (860px).
 *   .tbl-report--wip       — WIP-таблица (960px).
 *   .tbl-report--wip-without — таблица «Без ставки» (640px).
 */
.tbl-report {
  min-width: 860px;
  font-size: 13px;
}
.tbl-report--wip {
  min-width: 960px;
}
.tbl-report--wip-without {
  min-width: 640px;
}

/* Строка «Итого» в WIP-отчёте. Отделена жирной верхней границей. */
.tbl-total-row td {
  border-top: 2px solid var(--line);
  background: var(--slate-50);
}

/* Карточка сохранённого шаблона фильтра в отчётах. */
.saved-filter-card {
  min-width: 200px;
  max-width: 280px;
}


/* ============================================================================
   11. Общие панели и карточки
   ============================================================================ */
.info-box {
  background: var(--blue-50);
  border: 1px solid var(--blue-200);
  color: var(--blue-800);
  border-radius: 10px;
  padding: 10px 12px;
  font-size: 14px;
  margin-bottom: 10px;
}
.warn-box {
  display: flex;
  gap: 9px;
  align-items: center;
  background: var(--amber-50);
  border: 1px solid var(--amber-200);
  color: #92400e;
  border-radius: 10px;
  padding: 10px 12px;
  font-size: 15px;
  margin-bottom: 10px;
}
.over-note {
  font-size: 13px;
  color: var(--red-600);
  margin-top: 6px;
  font-weight: 600;
}
.empty-note {
  text-align: center;
  color: var(--mut);
  padding: 60px 0;
  background: var(--panel);
  border: 1.5px dashed var(--line);
  border-radius: 14px;
  font-size: 16px;
}

.sec-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  margin-bottom: 14px;
  flex-wrap: wrap;
}
.sec-note {
  font-size: 14px;
  color: var(--mut);
  max-width: 760px;
}
.sec-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

/* Тумблеры */
.toggle-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
  padding: 10px 0;
  border-bottom: 1px solid var(--slate-100);
  font-size: 15px;
}
.toggle {
  width: 40px;
  height: 22px;
  background: var(--slate-300);
  border-radius: 99px;
  position: relative;
  cursor: pointer;
  transition: background-color .2s;
  flex: none;
}
.toggle.on {
  background: var(--acc);
}
.toggle-knob {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 18px;
  height: 18px;
  background: var(--panel);
  border-radius: 99px;
  transition: transform .2s;
}
.toggle.on .toggle-knob {
  transform: translateX(18px);
}

.toggle-switch {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 22px;
  padding: 0;
  border: none;
  background: transparent;
  font-family: inherit;
  font-size: 12px;
  color: var(--mut);
  cursor: pointer;
  flex-shrink: 0;
  transition: color .15s;
}

.toggle-switch:hover {
  color: var(--txt);
}

.toggle-switch.on {
  color: var(--acc);
  font-weight: 600;
}

.toggle-switch-track {
  display: inline-block;
  width: 28px;
  height: 16px;
  background: var(--slate-300);
  border-radius: 4px;
  position: relative;
  transition: background-color .15s;
  flex: none;
}

.toggle-switch.on .toggle-switch-track {
  background: var(--acc);
}

.toggle-switch-knob {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 12px;
  height: 12px;
  background: var(--panel);
  border-radius: 2px;
  transition: transform .15s;
}

.toggle-switch.on .toggle-switch-knob {
  transform: translateX(12px);
}

.toggle-switch:focus-visible {
  outline: 2px solid var(--acc2);
  outline-offset: 2px;
  border-radius: 6px;
}


/* ============================================================================
   12. Логин
   ============================================================================ */
.login-wrap {
  min-height: 100vh;
  display: grid;
  grid-template-columns: 1.1fr 1fr;
}
.login-hero {
  background:
    radial-gradient(1200px 600px at 10% -10%, #1e3a8a 0%, transparent 55%),
    radial-gradient(900px 500px at 90% 110%, #0e7490 0%, transparent 55%),
    var(--side);
  color: var(--line);
  padding: 48px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 16px;
}
.login-hero h2 {
  font-size: 34px;
  font-weight: 800;
  color: var(--on-accent);
  letter-spacing: -.5px;
}
.login-hero p {
  font-size: 16px;
  color: var(--slate-400);
  max-width: 480px;
  line-height: 1.6;
}
.hero-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 9px;
  color: var(--slate-300);
  font-size: 15px;
}
.hero-list li {
  padding-left: 26px;
  position: relative;
}
.hero-list li:before {
  content: "✓";
  position: absolute;
  left: 0;
  color: #38bdf8;
  font-weight: 700;
}
.hero-stack {
  margin-top: 12px;
  display: inline-block;
  padding: 6px 12px;
  border: 1px solid var(--slate-700);
  border-radius: 999px;
  color: #7dd3fc;
  font-size: 14px;
  letter-spacing: .4px;
}
.login-panel {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 32px;
  background: var(--bg);
  overflow: auto;
}
.login-card {
  width: 470px;
  background: var(--panel);
  border-radius: 16px;
  box-shadow: var(--sh);
  padding: 28px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  animation: popIn .25s ease;
}
.login-card.shake {
  animation: shake .45s ease;
}
.login-card h3 {
  font-size: 24px;
  font-weight: 800;
}
.login-sub {
  color: var(--mut);
  margin-bottom: 8px;
  font-size: 15px;
}
.login-err {
  background: var(--red-50);
  color: var(--red-700);
  border: 1px solid var(--red-200);
  border-radius: 8px;
  padding: 8px 12px;
  font-size: 15px;
}
.cookie-note {
  font-size: 13px;
  color: var(--mut);
  text-align: center;
  padding-top: 4px;
}
.demo-title {
  font-size: 13px;
  color: var(--mut);
  margin-top: 12px;
  text-transform: uppercase;
  letter-spacing: .5px;
}
.demo-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 7px;
}
.demo-chip {
  display: flex;
  flex-direction: column;
  gap: 2px;
  text-align: left;
  background: var(--slate-50);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 7px 10px;
  transition: border-color .15s, background-color .15s, transform .15s;
}
.demo-chip:hover {
  border-color: var(--acc2);
  background: #f0f9ff;
  transform: translateY(-1px);
}
.demo-login {
  font-weight: 700;
  font-size: 15px;
}
.demo-role {
  font-size: 12px;
  color: var(--mut);
}
.email-inp {
  display: flex;
  align-items: center;
  gap: 6px;
}
.email-inp .inp {
  flex: 1;
}
.email-dom {
  color: var(--mut);
  font-size: 15px;
  white-space: nowrap;
}
.pass-toggle-btn {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  color: var(--mut);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  padding: 0;
}
.pass-toggle-btn:hover {
  color: var(--txt);
}
.login-links {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
}
.link-sep {
  color: var(--slate-400);
  opacity: 0.6;
  font-size: 14px;
  user-select: none;
}
.pass-checks {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 14px;
  font-size: 14px;
  color: var(--mut);
  margin-top: 4px;
  grid-column: 2;
}
.pass-checks span {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.pass-checks .ok {
  color: var(--emerald-500);
  font-weight: 700;
}


/* ============================================================================
   13. Каркас приложения
   ============================================================================ */
.shell {
  display: grid;
  grid-template-columns: 256px 1fr;
  height: 100vh;
  overflow: hidden;
}
.sidebar {
  background: linear-gradient(180deg, var(--side) 0%, #0e1b30 100%);
  color: var(--slate-300);
  display: flex;
  flex-direction: column;
  padding: 16px 12px;
}
.logo {
  display: flex;
  gap: 10px;
  align-items: center;
  padding: 4px 6px 14px;
  border-bottom: 1px solid #1e2c47;
  margin-bottom: 12px;
}
.logo-mark {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: linear-gradient(135deg, var(--acc2), var(--acc));
  color: var(--on-accent);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 16px;
  box-shadow: 0 4px 12px rgba(14, 165, 233, .35);
  flex: none;
}
.logo-name {
  font-weight: 800;
  letter-spacing: 1.5px;
  color: var(--on-accent);
  font-size: 17px;
}
.logo-sub {
  font-size: 12px;
  color: var(--mut);
}
.nav {
  display: flex;
  flex-direction: column;
  gap: 3px;
  flex: 1;
}
.nav-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  border-radius: 10px;
  border: none;
  background: transparent;
  color: var(--slate-400);
  font-size: 15px;
  font-weight: 600;
  transition: background-color .15s, color .15s, box-shadow .15s;
  text-align: left;
  width: 100%;
}
.nav-item:hover {
  background: var(--side2);
  color: var(--line);
}
.nav-item.on {
  background: linear-gradient(90deg, var(--blue-700), var(--acc));
  color: var(--on-accent);
  box-shadow: 0 4px 14px rgba(37, 99, 235, .35);
}
.nav-lbl {
  flex: 1;
}
.side-foot {
  display: flex;
  flex-direction: column;
  gap: 9px;
}
.env-badge {
  display: flex;
  gap: 6px;
  align-items: center;
  font-size: 12px;
  color: var(--mut);
  padding: 0 6px;
}
.user-card {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--side2);
  border: 1px solid #223250;
  border-radius: 12px;
  padding: 9px;
}
.user-card-photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 999px;
}
.user-card-clickable {
  cursor: pointer;
}
.user-name {
  font-size: 14px;
  font-weight: 700;
  color: var(--line);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 120px;
}
.user-roles {
  font-size: 12px;
  color: #38bdf8;
  font-weight: 600;
}

.main {
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 24px;
  background: var(--panel);
  border-bottom: 1px solid var(--line);
}
.page-title {
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -.3px;
}
.page-sub {
  font-size: 14px;
  color: var(--mut);
  margin-top: 2px;
}
.top-tools {
  display: flex;
  gap: 10px;
  align-items: center;
}
.content {
  flex: 1;
  overflow: auto;
  padding: 20px 24px;
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
}


/* ============================================================================
   14. Уведомления
   ============================================================================ */
.bell-wrap {
  position: relative;
}
.bell-count {
  position: absolute;
  top: 2px;
  right: 1px;
  background: var(--red-500);
  color: var(--on-accent);
  font-size: 11px;
  font-weight: 800;
  border-radius: 99px;
  padding: 0 4px;
  min-width: 14px;
  text-align: center;
}
.notif-pop {
  position: absolute;
  right: 0;
  top: 44px;
  width: 380px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: 0 20px 50px rgba(2, 8, 23, .25);
  z-index: 60;
  animation: popIn .15s ease;
  overflow: hidden;
}
.notif-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 14px;
  border-bottom: 1px solid var(--line);
  font-weight: 800;
  font-size: 16px;
}
.notif-list {
  max-height: 340px;
  overflow: auto;
}
.notif-item {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 10px 14px;
  border-bottom: 1px solid var(--slate-100);
  font-size: 15px;
  cursor: pointer;
}
.notif-item.new {
  background: var(--blue-50);
}
.notif-empty {
  padding: 12px;
}
.notif-note {
  padding: 8px 14px;
  border-top: 1px solid var(--line);
  font-size: 13px;
}
.notif-group-label {
  font-size: 12px;
  font-weight: 700;
  color: var(--mut);
  text-transform: uppercase;
  letter-spacing: 0.4px;
  padding: 8px 14px 4px;
  background: var(--slate-50);
  border-bottom: 1px solid var(--line);
}
.notif-icon {
  flex: none;
  width: 26px;
  height: 26px;
  border-radius: 8px;
  background: #e0e7ef;
  color: var(--acc);
  display: flex;
  align-items: center;
  justify-content: center;
}
.notif-content {
  flex: 1;
  min-width: 0;
}
.notif-text {
  line-height: 1.4;
  word-break: break-word;
}


/* ============================================================================
   15. Табы, сегменты, тулбар
   ============================================================================ */
.tabs {
  display: flex;
  gap: 6px;
  margin-bottom: 14px;
  flex-wrap: wrap;
}
.tab {
  position: relative;
  border: 1px solid var(--line);
  background: var(--panel);
  border-radius: 10px;
  padding: 8px 14px;
  font-size: 15px;
  font-weight: 700;
  color: var(--mut);
  transition: background-color .15s, color .15s, border-color .15s;
}
.tab.on {
  background: var(--txt);
  color: var(--on-accent);
  border-color: var(--txt);
}

.tab-badge {
  position: absolute;               /* NEW */
  top: -6px;                        /* NEW */
  right: -6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  margin-left: 0px;
  background: var(--red-500);
  color: var(--on-accent);
  font-size: 11px;
  font-weight: 800;
  line-height: 1;
  border-radius: 99px;
  box-shadow: 0 0 0 2px var(--panel);
}

.tabs.sm .tab {
  padding: 6px 12px;
  font-size: 14px;
}
.tabs.tabs-nowrap {
  flex-wrap: nowrap;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  -ms-overflow-style: none;
  padding-top: 8px;      /* NEW — место для бейджа сверху */
  margin-top: -8px;      /* NEW — компенсация, чтобы блок визуально не съехал */
}
.tabs.tabs-nowrap::-webkit-scrollbar {
  display: none;
}
.tabs.tabs-nowrap .tab {
  flex: 0 0 auto;
}

.seg {
  display: flex;
  background: var(--line);
  border-radius: 10px;
  padding: 3px;
  gap: 2px;
}
.seg-btn {
  border: none;
  background: transparent;
  border-radius: 8px;
  padding: 5px 12px;
  font-size: 14px;
  font-weight: 700;
  color: var(--mut);
}
.seg-btn.on {
  background: var(--panel);
  color: var(--txt);
  box-shadow: 0 1px 4px rgba(15, 23, 42, .12);
}
.seg-btn:disabled {
  opacity: .55;
  cursor: not-allowed;
}
.seg.sm .seg-btn {
  padding: 4px 9px;
  font-size: 13px;
}

.toolbar {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 6px;
  margin-bottom: 14px;
}
.toolbar .btn.sm {
  height: 36px;
}

.toolbar .filter-search,
.toolbar .filter-select,
.toolbar .filter-select.filter-select-dept {
  flex: 0 1 130px;
  min-width: 100px;
  max-width: 130px;
}

.toolbar .btn-group {
  display: flex;
  gap: 4px;
  flex-shrink: 0;
}
.toolbar .dept-pick {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 13px;
  cursor: pointer;
  flex-shrink: 0;
}
.toolbar .btn.primary {
  flex-shrink: 0;
}

.dept-pick {
  display: flex;
  gap: 8px;
  align-items: center;
  font-size: 14px;
  cursor: pointer;
}
.dept-pick input {
  accent-color: var(--acc);
}

.toolbar.filters-row {
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
}

.toolbar.toolbar-wrap {
  flex-wrap: wrap;
}

.filter-group {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: nowrap;
  flex: 0 0 auto;
}

.filter-group .lbl {
  white-space: nowrap;
  flex-shrink: 0;
}

.filter-group .inp,
.filter-group .custom-select-trigger {
  flex: none;
}

.filter-group .w-140 { width: 140px; }
.filter-group .w-150 { width: 150px; }
.filter-group .w-180 { width: 180px; }
.filter-group .w-200 { width: 200px; }

.filter-group-sep {
  color: var(--mut);
  flex-shrink: 0;
}

.content.has-view-foot {
  padding-left: 0;
  padding-right: 0;
  padding-bottom: 0;
}
.content.has-view-foot > *:not(.view-foot) {
  padding-left: 24px;
  padding-right: 24px;
}

.view-foot {
  position: sticky;
  bottom: 0;
  z-index: 5;
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: auto;
  padding: 12px 24px;
  background: var(--panel);
  border-top: 1px solid var(--line);
  flex-shrink: 0;
}

.view-foot-action {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 12px;
}


/* ============================================================================
   16. Канбан
   ============================================================================ */
.kanban {
  display: grid;
  grid-template-columns: repeat(var(--columns, 4), minmax(240px, 1fr));
  gap: 14px;
  min-height: 68vh;
  animation: fadeUp .3s ease;
}
.kanban.k5 {
  grid-template-columns: repeat(var(--columns, 5), minmax(215px, 1fr));
}
.kcol {
  background: #e9eef5;
  border: 1px solid var(--line);
  border-radius: 14px;
  display: flex;
  flex-direction: column;
  transition: .15s;
}
.kcol.over {
  border-color: var(--acc2);
  background: var(--sky-100);
  box-shadow: inset 0 0 0 2px rgba(14, 165, 233, .35);
}
.kcol-head {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 800;
  padding: 11px 13px;
  color: var(--slate-700);
}
.kcol-body {
  display: flex;
  flex-direction: column;
  gap: 9px;
  padding: 0 9px 11px;
  overflow: auto;
  flex: 1;
}
.kempty {
  text-align: center;
  color: var(--slate-400);
  font-size: 14px;
  border: 1.5px dashed var(--slate-300);
  border-radius: 10px;
  padding: 20px 0;
}
.kcard {
  position: relative;
  min-width: 0;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 11px 11px 11px 15px;
  box-shadow: 0 1px 3px rgba(15, 23, 42, .05);
  cursor: pointer;
  transition: transform .15s, box-shadow .15s;
  overflow: hidden;
  will-change: transform;
}
.kcard:hover {
  transform: translateY(-2px);
  box-shadow: var(--sh);
}
.kcard.dim {
  opacity: .55;
}
.kcard-prio {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
}
.kcard-title {
  font-weight: 700;
  font-size: 15px;
  line-height: 1.35;
  margin-bottom: 6px;
  min-width: 0;
  overflow-wrap: break-word;
  hyphens: auto;
  -webkit-hyphens: auto;
  -ms-hyphens: auto;
}
.kcard-proj {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 700;
  color: var(--slate-600);
  margin-bottom: 7px;
}
.prio-chip {
  margin-left: auto;
  font-size: 12px;
  font-weight: 800;
}
.kcard-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;                    /* NEW — элементы переезжают на новую строку */
  min-width: 0;
}
.kassignee {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--slate-700);
  font-weight: 600;
  overflow: visible;
  white-space: nowrap;
  min-width: 0;
}
.kassignee .avatar.xs {
  flex-shrink: 0;
}
.khours {
  display: inline-flex;
  gap: 4px;
  align-items: center;
  font-size: 13px;
  color: var(--mut);
  font-weight: 700;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  min-width: 0;
}
.kcard-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: 8px;
}
.kcard-foot:has(+ .kcard-unread),
.pj-foot:has(+ .kcard-unread) {
  padding-right: 120px;
}
.kdl {
  font-size: 12px;
  font-weight: 700;
  color: var(--slate-600);
  background: var(--slate-100);
  border-radius: 6px;
  padding: 2px 7px;
  white-space: nowrap;
}
.kdl.late {
  background: var(--red-50);
  color: var(--red-600);
}
.kdl.soon {
  background: var(--amber-50);
  color: var(--amber-700);
}

.kcard-unread {
  position: absolute;
  z-index: 2;
  right: 8px;
  bottom: 8px;
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  background: var(--red-500);
  color: var(--on-accent);
  font-size: 11px;
  font-weight: 700;
  line-height: 1.4;
  border-radius: 99px;
}

.kcard-unread--clickable {
  cursor: pointer;
  transition: filter 0.15s ease;
}

.kcard-unread--clickable:hover {
  filter: brightness(1.1);
}

.kcard-unread--clickable:focus-visible {
  outline: 2px solid var(--acc, #3b82f6);
  outline-offset: 1px;
}

.vac-note,
.del-note {
  display: flex;
  gap: 5px;
  align-items: center;
  font-size: 12px;
  color: var(--sky-700);
  background: var(--sky-100);
  border-radius: 6px;
  padding: 3px 7px;
  margin-top: 6px;
  font-weight: 600;
}
.del-note {
  color: #7c3aed;
  background: #f5f3ff;
}
.mini-progress {
  flex: 1;
  height: 5px;
  background: var(--line);
  border-radius: 99px;
  overflow: hidden;
}
.mini-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--acc2), var(--acc));
  border-radius: 99px;
}


/* ============================================================================
   17. Диаграмма Ганта
   ============================================================================ */
.gantt-panel {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
  overflow: hidden;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: var(--sh);
}
.gantt-scroll {
  flex: 1 1 auto;
  overflow: auto;
  min-height: 0;
  max-height: none;
}
.gantt {
  min-width: 100%;
  width: var(--gantt-width, auto);
}
.gantt-axis,
.gantt-months,
.gantt-days,
.gantt-grid,
.gantt-track {
  width: var(--gantt-days-width, auto);
  flex: none;
}
.gantt-top {
  display: flex;
  position: sticky;
  top: 0;
  z-index: 5;
  background: var(--panel);
  border-bottom: 1px solid var(--line);
  flex-shrink: 0;
}
.gantt-corner {
  width: var(--corner-width, 240px);
  flex: none;
  padding: 14px;
  font-size: 14px;
  font-weight: 800;
  color: var(--mut);
  border-right: 1px solid var(--line);
  display: flex;
  align-items: flex-end;
  position: relative;
}
.gantt-resizer {
  position: absolute;
  right: -4px;
  top: 0;
  bottom: 0;
  width: 8px;
  cursor: col-resize;
  z-index: 10;
  background: transparent;
  transition: background-color 0.2s;
}
.gantt-resizer:hover,
.gantt-resizer.dragging {
  background: var(--blue-500);
  opacity: 0.5;
}
.gantt-axis {
  display: flex;
  flex-direction: column;
}
.gantt-months {
  display: flex;
  height: 24px;
}
.gantt-month {
  font-size: 13px;
  font-weight: 800;
  color: var(--slate-700);
  padding: 4px 0 2px 8px;
  border-left: 1px solid var(--line);
  white-space: nowrap;
  overflow: hidden;
  flex: none;
  box-sizing: border-box;
}
.gantt-days {
  display: flex;
  height: 26px;
}
.gday {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  color: var(--mut);
  border-left: 1px solid var(--bg);
  font-variant-numeric: tabular-nums;
  flex: none;
  white-space: nowrap;
  box-sizing: border-box;
}
.gday.wk {
  background: var(--slate-50);
  color: #b6c2d4;
}
.gday.td {
  background: var(--acc);
  color: var(--on-accent);
  font-weight: 800;
  border-radius: 6px;
}
.gantt-body {
  position: relative;
}
.gantt-grid {
  position: absolute;
  top: 0;
  bottom: 0;
  display: flex;
  pointer-events: none;
}
.gcell {
  border-left: 1px solid var(--slate-100);
  height: 100%;
  flex: none;
  box-sizing: border-box;
}
.gcell.wk {
  background: #f8fafc88;
}
.gtoday {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 2px;
  background: var(--red-500);
  opacity: .8;
}
.gantt-group {
  height: 40px;
  display: flex;
  align-items: center;
  background: linear-gradient(180deg, var(--line) 0%, var(--slate-100) 100%);
  border-top: 1px solid var(--line);
  flex-shrink: 0;
}
.gantt-group-name {
  width: var(--corner-width, 240px);
  flex: none;
  font-size: 14px;
  font-weight: 800;
  padding: 7px 14px;
  display: flex;
  gap: 8px;
  align-items: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  border-right: 1px solid var(--line);
}
.gantt-row {
  display: flex;
  border-top: 1px solid var(--slate-100);
}
.gantt-row:hover {
  background: var(--slate-50);
}
.gantt-row-child .gantt-label {
  background: linear-gradient(90deg, #fafafa 0%, transparent 100%);
}
.gantt-row-child .gantt-label .gtitle {
  font-weight: 500;
  color: var(--slate-600);
}
.gantt-row-child:hover .gantt-label {
  background: linear-gradient(90deg, var(--slate-100) 0%, transparent 100%);
}
.gantt-row:hover .gantt-label {
  background: linear-gradient(90deg, var(--slate-100) 0%, transparent 100%);
}
.gantt-label {
  width: var(--corner-width, 240px);
  flex: none;
  padding: 5px 14px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  border-right: 1px solid var(--line);
  cursor: pointer;
  min-height: 46px;
  position: relative;
  padding-left: calc(14px + var(--indent-level, 0px));
}
.gantt-track {
  position: relative;
  height: 46px;
}
.gbar {
  position: absolute;
  top: 11px;
  height: 24px;
  border-radius: 7px;
  overflow: hidden;
  cursor: pointer;
  background: var(--bar-bg, #64748b33);
  border: 1px solid var(--bar-bg, #64748b33);
  left: var(--bar-left, 0);
  width: var(--bar-width, 0);
  opacity: var(--bar-opacity, 1);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
  display: flex; 
  align-items: center; 
  justify-content: flex-end;
}
.gbar:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}
.gbar-fill {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  border-radius: 6px;
  width: var(--fill-width, 0%);
  background: var(--fill-color, var(--mut));
  opacity: 0.9;
  transition: width 0.15s;
}
.gbar-vac {
  position: relative;
  margin-right: 6px;
  font-size: 14px;
  pointer-events: none; z-index: 1;
}
.gtitle {
  font-size: 14px;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.gtitle.dim {
  text-decoration: line-through;
  opacity: .6;
}
.gsub {
  font-size: 13px;
  color: var(--mut);
}
.gantt-legend {
  display: flex;
  gap: 20px;
  padding: 9px 16px;
  border-top: 1px solid var(--line);
  font-size: 14px;
  color: var(--mut);
  align-items: center;
  flex-wrap: wrap;
  flex-shrink: 0;
}
.legend-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-right: 16px;
}
.gantt-filter-bar {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  gap: 10px;
  padding: 12px 16px;
  background: var(--slate-50);
  border-bottom: 1px solid var(--line);
  align-items: center;
  overflow-x: auto;
  white-space: nowrap;
  flex-shrink: 0;
}
.gantt-filter-select {
  min-width: 140px;
  width: auto;
  flex: 0 0 auto;
  font-size: 14px;
}
.gantt-filter-bar .btn {
  flex: 0 0 auto;
  font-size: 14px;
}
.gantt-zoom {
  display: flex;
  gap: 4px;
  align-items: center;
  flex: 0 0 auto;
  margin-left: auto;
}
.gantt-zoom .zoom-value {
  font-size: 13px;
  font-weight: 600;
  min-width: 40px;
  text-align: center;
}
.gantt-expand-btn {
  background: none;
  border: none;
  color: var(--mut);
  font-size: 12px;
  cursor: pointer;
  padding: 0 4px;
  margin-right: 4px;
  transition: transform 0.2s, color .15s;
  display: inline-flex;
  align-items: center;
}
.gantt-expand-btn:hover {
  color: var(--txt);
}
.gantt-expand-btn.expanded {
  transform: rotate(90deg);
}

.gantt-row:hover .gbar
.gantt-row:hover .gbar.overdue {
  box-shadow: 0 0 0 2px var(--blue-500), 0 2px 6px rgba(0, 0, 0, 0.08);
}

.gantt-milestone {
  position: absolute;
  top: 50%;
  left: 0;
  width: 14px;
  height: 14px;
  margin-top: -7px;
  background: var(--ms-color, var(--slate-500));
  transform: translateX(var(--ms-left, 0)) rotate(45deg);
  transform-origin: center;
  border-radius: 2px;
  cursor: pointer;
  z-index: 3;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
  transition: transform .12s ease, box-shadow .12s ease;
}
.gantt-row:hover .gantt-milestone {
  box-shadow: 0 0 0 2px var(--blue-500), 0 2px 6px rgba(0, 0, 0, 0.15);
}
.gantt-milestone.cancelled {
  opacity: 0.45;
}

.gantt-milestone-marker {
  color: var(--sky-500);
  font-size: 11px;
  line-height: 1;
  flex-shrink: 0;
}

.gantt-overdue-dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--red-500);
  margin-left: 6px;
  flex-shrink: 0;
}
.gbar.overdue {
  box-shadow: inset 0 0 0 1.5px var(--red-500);
}

.gcell.holiday {
  background: rgba(239, 68, 68, .06);
}
.gcell.shortday {
  background: rgba(245, 158, 11, .06);
}

.gday.holiday {
  color: var(--red-600);
  font-weight: 600;
}
.gday.shortday {
  color: var(--amber-600);
  font-weight: 600;
}

.gantt-search {
  min-width: 200px;
  max-width: 260px;
  flex: 0 0 auto;
}
.gantt-search input {
  flex: 1;
  min-width: 0;
  width: auto;
}

.legend-milestone {
  color: var(--sky-500);
  font-size: 12px;
  line-height: 1;
}
.legend-swatch {
  width: 12px;
  height: 12px;
  border-radius: 2px;
  display: inline-block;
  flex-shrink: 0;
}
.legend-swatch--holiday {
  background: rgba(239, 68, 68, .25);
}
.legend-swatch--shortday {
  background: rgba(245, 158, 11, .25);
}

.gantt-legend .legend-item {
  font-size: 13px;
}

/* ============================================================================
   18. Календарь
   ============================================================================ */
.cal-panel {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: var(--sh);
  padding: 16px;
  animation: fadeUp .3s ease;
  width: 100%;
  box-sizing: border-box;
  height: auto;
}
.cal-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
  flex-wrap: wrap;
  flex-shrink: 0;
}
.cal-right {
  display: flex;
  gap: 10px;
  align-items: center;
}
.cal-nav {
  display: flex;
  gap: 8px;
  align-items: center;
}
.cal-title {
  font-size: 20px;
  font-weight: 800;
  min-width: 120px;
  text-align: center;
}
.cal-note {
  font-size: 13px;
  color: var(--mut);
  margin-bottom: 10px;
}
.cal-grid-head {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 6px;
  margin-bottom: 6px;
}
.cal-wd {
  font-size: 13px;
  font-weight: 800;
  color: var(--mut);
  text-transform: uppercase;
  letter-spacing: .5px;
  padding: 0 6px;
  text-align: center;
}
.cal-wd.wk {
  color: var(--amber-500);
}
.cal-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  grid-auto-rows: auto;
  gap: 6px;
}
.outwrap {
  opacity: .4;
}
.cal-cell {
  background: #fbfcfe;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 6px;
  overflow: visible;
  transition: border-color .15s, box-shadow .15s;
  height: auto;
  display: flex;
  flex-direction: column;
  min-height: 80px;
}
.cal-cell:hover {
  border-color: var(--slate-300);
}
.cal-cell.today {
  border-color: var(--acc);
  box-shadow: inset 0 0 0 1.5px var(--acc);
}
.cal-cell.today .cal-daynum {
  background: var(--acc);
  color: var(--on-accent);
  border-radius: 6px;
  padding: 0 5px;
  width: fit-content;
}
.cal-daynum {
  font-size: 14px;
  font-weight: 700;
  color: var(--slate-600);
  display: inline-block;
  margin-bottom: 4px;
  flex-shrink: 0;
}
.cal-chips {
  display: flex;
  flex-direction: column;
  gap: 3px;
  overflow: visible;
  flex: 1;
}
.cal-chip {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1px;
  padding: 4px 6px 3px 6px;
  border: 1px solid;
  border-radius: 6px;
  background: var(--panel);
  cursor: pointer;
  width: 100%;
  box-sizing: border-box;
  flex-shrink: 0;
  overflow: hidden;
}
.cal-chip:hover {
  background: #f0f9ff;
}
.cal-task-title {
  display: flex;
  align-items: center;
  gap: 5px;
  font-weight: 600;
  font-size: 13px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  width: 100%;
}
.cal-executors {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
  margin-top: 2px;
}
.cal-week {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 6px;
}
.cal-week .cal-cell {
  min-height: 80px;
}
.cal-week.one {
  grid-template-columns: 1fr;
}
.cal-chip-aog  { border-color: var(--red-600); }
.cal-chip-crit { border-color: var(--amber-500); }
.cal-chip-norm { border-color: var(--emerald-500); }
.cal-dot-aog  { background: var(--red-600); }
.cal-dot-crit { background: var(--amber-500); }
.cal-dot-norm { background: var(--emerald-500); }


/* ============================================================================
   19. Проекты
   ============================================================================ */
.pj-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
  gap: 14px;
  animation: fadeUp .3s ease;
}
.pj-card {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: var(--sh);
  padding: 15px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  transition: transform .15s, box-shadow .15s;
}
/* === Карточка задачи в списке (TasksList) === */

/* Полоса приоритета слева — как на канбане */
.pj-card-priority-strip {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  border-radius: 14px 0 0 14px;
  background: var(--task-priority-color, var(--slate-300));
  pointer-events: none;
}

/* Проект-чип окрашен в цвет приоритета проекта */
.pj-card--task .pj-code {
  background: color-mix(in srgb, var(--task-project-color, #64748b) 15%, transparent);
  color: var(--task-project-color, #64748b);
}

.pj-code--clickable {
  cursor: pointer;
  transition: filter .15s;
}

.pj-code--clickable:hover {
  filter: brightness(0.9);
}

/* Приоритет под названием задачи */
.pj-priority {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .2px;
  color: var(--task-priority-color, var(--slate-500));
  margin-bottom: 4px;
}

/* Увеличенный статус в списке задач */
.pj-st--lg {
  font-size: 14px;
  padding: 4px 10px;
}

/* Прогресс-бар наследует цвет проекта через CSS-переменную */
.pj-card--task .pj-progress-fill {
  background: var(--task-project-color, var(--slate-400));
}
.pj-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(15, 23, 42, .1);
}
.pj-top {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
}
.pj-code {
  display: inline-block;
  font-weight: 800;
  font-size: 14px;
  border-radius: 7px;
  padding: 3px 9px;
}
.pj-kb {
  font-size: 13px;
  font-weight: 700;
  color: var(--slate-600);
  background: var(--slate-100);
  border-radius: 6px;
  padding: 3px 8px;
}
.pj-kb.adm {
  background: #ccfbf1;
  color: #0f766e;
}
.pj-st {
  margin-left: auto;
  font-size: 13px;
  font-weight: 800;
  border-radius: 6px;
  padding: 3px 8px;
}
.pj-st.active  { background: var(--emerald-50); color: var(--emerald-600); }
.pj-st.closed  { background: var(--slate-100); color: var(--mut); }
.pj-name {
  font-weight: 800;
  font-size: 17px;
  line-height: 1.3;
}
.pj-row {
  font-size: 14px;
}

/*
 * Блок «План / Факт» на карточке проекта.
 * Раньше назывался .pj-budget / .pj-budget-row; переименован вместе
 * с полем проекта budget → plannedHours.
 */
.pj-plan {
  background: var(--slate-50);
  border-radius: 10px;
  padding: 9px;
}
.pj-plan-row {
  display: flex;
  justify-content: space-between;
  font-size: 13px;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: 7px;
}
.pj-progress {
  height: 7px;
  background: var(--line);
  border-radius: 99px;
  overflow: hidden;
}
/*
 * Ширина и цвет заливки приходят из CSS-переменных, которые
 * ProjectProgress ставит через ref.style.setProperty. В JSX
 * ни одного style={{}}.
 *   --pj-progress-fill  — ширина, процент
 *   --pj-progress-color — цвет заливки проекта
 */
.pj-progress-fill {
  width: var(--pj-progress-fill, 0%);
  background: var(--pj-progress-color, var(--slate-400));
  height: 100%;
  border-radius: 99px;
  transition: width .2s ease;
}
.pj-progress-fill.over {
  background: var(--red-500);
}
.pj-foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.pj-avatars {
  display: flex;
  flex-wrap: nowrap;
  overflow: hidden;
  min-width: 0;
}
.pj-avatars .avatar.xs {
  margin-right: -4px;
  border: 2px solid var(--panel);
}
.pj-actions {
  display: flex;
  gap: 6px;
  align-items: center;
  flex-wrap: wrap;
}
.arch-tools {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
}
.arch-date-inp {
  width: 160px;
}
.modal-lg {
  max-width: 720px;
}


/* ============================================================================
   20. Персонал
   ============================================================================ */
.staff {
  display: flex;
  flex-direction: column;
  gap: 18px;
  animation: fadeUp .3s ease;
}
.st-section {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: var(--sh);
  overflow: hidden;
}
.st-sec-head {
  padding: 13px 18px;
  background: linear-gradient(90deg, var(--slate-50), var(--panel));
  border-bottom: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.st-sec-title {
  font-weight: 800;
  font-size: 17px;
}
.st-sec-sub {
  font-size: 14px;
  color: var(--mut);
}
.st-dept {
  border-top: 1px solid var(--slate-100);
}
.st-dept-head {
  display: flex;
  gap: 10px;
  align-items: center;
  padding: 9px 18px;
  background: #fbfcfe;
  border-bottom: 1px solid var(--slate-100);
  font-size: 15px;
}
.st-dept-name {
  font-weight: 800;
}
.st-row {
  display: flex;
  gap: 12px;
  align-items: center;
  padding: 9px 18px;
  border-top: 1px solid #f6f8fb;
}
.st-row:hover {
  background: var(--slate-50);
}
.st-name {
  width: 260px;
  flex: none;
}
.st-fio {
  font-weight: 700;
  font-size: 15px;
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
}
.st-pos {
  display: inline-flex;
  align-items: center;
  gap: 0;
  flex-wrap: wrap;
  font-size: 13px;
  color: var(--mut);
}
.st-roles {
  display: flex;
  gap: 5px;
  flex-wrap: wrap;
  flex: 1;
}


/* ============================================================================
   21. Отчёты
   ============================================================================ */
.rep {
  display: flex;
  flex-direction: column;
  gap: 14px;
  animation: fadeUp .3s ease;
}
.rep-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 12px;
}
.rep-card {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: var(--sh);
  padding: 15px;
}
.rep-num {
  font-size: 27px;
  font-weight: 800;
  letter-spacing: -.5px;
}
.rep-lbl {
  font-size: 14px;
  color: var(--mut);
  margin-top: 2px;
}
.rep-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.rep-item {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: center;
  flex-wrap: wrap;
}
.rep-panel {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: var(--sh);
  padding: 16px;
  margin-bottom: 14px;
}
.rep-panel-title {
  font-weight: 800;
  font-size: 16px;
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.rep-btns {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}


/* ============================================================================
   22. Личный кабинет
   ============================================================================ */
.cab {
  animation: fadeUp .3s ease;
}
.cab-grid {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 14px;
  align-items: start;
}
.stack-col {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.cab-stat {
  margin-bottom: 12px;
}
.cab-stat-head {
  display: flex;
  gap: 8px;
  align-items: center;
  font-size: 14px;
  font-weight: 800;
  margin-bottom: 6px;
}
.cab-task {
  display: flex;
  gap: 8px;
  align-items: center;
  font-size: 15px;
  padding: 7px 10px;
  border: 1px solid var(--line);
  border-radius: 9px;
  margin-bottom: 5px;
  cursor: pointer;
}
.cab-task:hover {
  border-color: var(--acc2);
  background: #f0f9ff;
}
.cab-proj {
  display: flex;
  gap: 8px;
  align-items: center;
  font-size: 15px;
  padding: 5px 0;
}
.util-bars {
  display: flex;
  gap: 4px;
  align-items: flex-end;
  height: 80px;
  margin: 12px 0 6px;
}
.util-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  font-size: 11px;
  color: var(--mut);
}
.util-bar {
  width: 14px;
  background: linear-gradient(180deg, var(--acc2), var(--acc));
  border-radius: 4px 4px 0 0;
}
.dept-picks {
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-height: 180px;
  overflow: auto;
}
.depts-readonly {
  grid-column: 2;
}

.profile-avatar {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  background: linear-gradient(135deg, #1e3a8a, var(--acc2));
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  flex-shrink: 0;
}
.profile-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.profile-avatar .avatar-placeholder {
  color: var(--on-accent);
  font-size: 44px;
  font-weight: 700;
}
.photo-block {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
}
.photo-actions {
  display: flex;
  gap: 8px;
}

.cab-photo-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  flex: 0 0 140px;
}

.cab-profile-photo {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  object-fit: cover;
  border: 1px solid var(--line);
}

.cab-profile-photo-empty {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--line);
  color: var(--slate-400);
  font-size: 12px;
}

.cab-timesheet-table {
  min-width: 700px;
}

.cab-timesheet-task-col {
  min-width: 200px;
}

.cab-timesheet-day-col {
  min-width: 60px;
}

.cab-profile-fields {
  flex: 1;
  min-width: 300px;
}


/* ============================================================================
   23. Модальные окна и формы
   ============================================================================ */
.overlay {
  position: fixed;
  inset: 0;
  background: rgba(12, 21, 38, .7);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 50;
  padding: 20px;
}
.modal {
  width: 100%;
  max-width: var(--modal-max-w, 640px);
  background: var(--panel);
  border-radius: 16px;
  box-shadow: 0 24px 60px rgba(2, 8, 23, .35);
  animation: popIn .2s ease;
  max-height: 92vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.modal.modal-task {
  width: max-content;
  max-width: calc(100vw - 40px);
}
.modal-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px 20px;
  border-bottom: 1px solid var(--line);
  flex-shrink: 0;
}

.modal-title-block {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.modal-subtitle {
  font-size: 12px;
  font-weight: 500;
  color: var(--mut);
  line-height: 1.3;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.modal-subtitle a {
  color: var(--acc);
  text-decoration: none;
  font-weight: 600;
}
.modal-subtitle a:hover {
  text-decoration: underline;
}
.modal-head h3 {
  font-size: 19px;
  font-weight: 800;
}
.modal-header-before {
  display: flex;
  align-items: center;
  margin-right: 8px;
}
.modal-header-after {
  display: flex;
  align-items: center;
  margin-left: 8px;
}
.modal-body {
  padding: 16px 20px;
  overflow: auto;
  flex: 1 1 auto;
  min-height: var(--modal-body-min-h, 0);
}
.modal-foot {
  display: flex;
  gap: 10px;
  align-items: center;
  margin-top: 16px;
  padding-top: 13px;
  border-top: 1px solid var(--line);
}
.modal > .modal-foot {
  margin-top: 0;
  padding: 13px 20px;
  background: var(--panel);
  flex-shrink: 0;
}

.form-grid {
  display: grid;
  grid-template-columns: 190px 1fr;
  gap: 8px 14px;
  align-items: center;
}
.form-grid .lbl {
  margin-top: 0;
  text-align: right;
  font-size: 14px;
}
.form-grid .inp,
.form-grid .duo,
.form-grid textarea.inp {
  grid-column: 2;
  font-size: 16px;
}
.form-grid > div {
  grid-column: 2;
}
.form-grid > select {
  grid-column: 2;
  font-size: 16px;
}
.duo {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
}
.duo-note {
  font-size: 14px;
  color: var(--mut);
}
.ro-note {
  max-width: 280px;
  text-align: right;
}

/* Тайминги / журнал задачи */
.tm-block {
  margin-top: 16px;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 13px;
  background: #fbfcfe;
}
.tm-progress {
  height: 8px;
  background: var(--line);
  border-radius: 99px;
  overflow: hidden;
  margin-bottom: 11px;
}
.tm-progress-fill {
  width: var(--tm-progress-fill, 0%);
  height: 100%;
  background: linear-gradient(90deg, var(--emerald-500), var(--acc2));
  border-radius: 99px;
  transition: width .3s ease;
}
.tm-logs {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 11px;
  max-height: 180px;
  overflow: auto;
}
.tm-logs.tm-logs-hist {
  max-height: 260px;
  margin-bottom: 0;
}
.tm-log {
  display: flex;
  gap: 8px;
  align-items: center;
  font-size: 14px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 6px 10px;
}
.tm-log-name {
  font-weight: 700;
  max-width: 150px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.tm-log-note {
  color: var(--mut);
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.tm-log-h {
  font-variant-numeric: tabular-nums;
  color: var(--sky-700);
}
.tm-add {
  display: flex;
  gap: 8px;
}
.tm-add .inp {
  font-size: 15px;
}
.tm-add-date  { width: 150px; }
.tm-add-hours { width: 90px; }
.tm-add-note  { flex: 1; }

.subtask-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}
.subtask-table-wrap {
  width: 100%;
  overflow-x: auto;
}
.subtask-table {
  min-width: 500px;
  font-size: 13px;
}

/* Роли / подразделения */
.roles-list {
  display: flex;
  flex-direction: column;
  gap: 7px;
  margin-top: 10px;
}
.roles-item {
  display: flex;
  gap: 10px;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 8px 12px;
  font-size: 15px;
  cursor: pointer;
  transition: border-color .15s;
}
.roles-item:hover {
  border-color: var(--acc2);
}
.roles-item input {
  width: 16px;
  height: 16px;
  accent-color: var(--acc);
}
.roles-item-clean {
  border: none;
  padding: 0;
}
.sub-picks {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 14px;
  padding: 8px 12px 4px 34px;
  font-size: 14px;
}
.extra-position-field {
  margin-left: 28px;
  margin-top: 4px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.extra-position-input {
  flex: 1;
  padding: 6px 10px;
  font-size: 14px;
}
.dept-item {
  margin-bottom: 8px;
}
.dept-item-label {
  border: none;
  padding: 0;
}
.primary-btn-active {
  background: var(--blue-50);
  border-color: var(--blue-200);
  color: var(--blue-700);
}
.prim-btn {
  background: var(--blue-50);
  border-color: var(--blue-200);
  color: var(--blue-700);
}

/* Поля проекта / задачи */
.project-info-fields {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 0;
  width: 100%;
}
.field-row {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 12px;
  width: 100%;
}
.fields-row--stacked {
  align-items: flex-start;
}
.fields-row--stacked > .field-row {
  align-items: flex-start;
}
.fields-row--stacked > .field-row .field-label {
  height: 36px;
  display: flex;
  align-items: center;
}
.field-label {
  min-width: 100px;
  text-align: left;
  font-weight: 700;
  color: var(--mut);
  text-transform: uppercase;
  letter-spacing: .4px;
  font-size: 13px;
  flex-shrink: 0;
}
.field-row .inp,
.field-row .inp.sel {
  flex: 1;
  min-width: 0;
}
.pj-pair-row {
  display: flex;
  flex-wrap: nowrap;
  gap: 16px;
  align-items: center;
  padding: 0;
  margin: 0;
  width: 100%;
}
.pj-pair-item {
  flex: 1 1 0;
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
.pj-pair-label {
  min-width: 100px;
  text-align: left;
  font-weight: 700;
  color: var(--mut);
  text-transform: uppercase;
  letter-spacing: .4px;
  font-size: 13px;
  flex-shrink: 0;
}
.pj-pair-input {
  flex: 1;
  min-width: 0;
}
.fields-row {
  display: flex;
  gap: 16px;
  width: 100%;
}
.fields-row > * {
  flex: 1;
  min-width: 0;
}
.project-info-layout {
  display: flex;
  gap: 20px;
  margin-top: 12px;
}

.fields-with-action {
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: 100%;
}

.field-action-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  width: 100%;
}
.field-action-row > .field-action {
  grid-column: 2;
}
.field-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  padding: 8px 12px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 10px;
  color: var(--txt);
  font-size: 14px;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
  white-space: nowrap;
  transition: border-color .15s, background-color .15s, color .15s;
}
.field-action:hover {
  border-color: var(--acc2);
  color: var(--acc);
  background: #f0f9ff;
}
.field-action:active {
  background: var(--sky-100);
}
.field-action:disabled {
  opacity: .6;
  cursor: default;
}

/* Попап редактирования задачи */
.task-edit-popover {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: 0 8px 32px rgba(15, 23, 42, 0.15);
  min-width: 280px;
  max-width: 360px;
  z-index: 1001;
  animation: popIn 0.2s ease;
}
.popover-overlay {
  position: fixed;
  z-index: 1000;
}
.popover-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 14px;
  border-bottom: 1px solid var(--line);
  background: var(--slate-50);
  border-radius: 12px 12px 0 0;
}
.popover-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--txt);
}
.popover-body {
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.popover-footer {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding: 10px 14px;
  border-top: 1px solid var(--line);
  background: var(--slate-50);
  border-radius: 0 0 12px 12px;
}
.form-group {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.form-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--mut);
  text-transform: uppercase;
  letter-spacing: 0.4px;
}
.form-static {
  font-size: 15px;
  color: var(--txt);
  padding: 6px 0;
}

.tm-note-actions {
  display: flex;
  justify-content: flex-end;
  margin-top: 12px;
}

.note-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 10px;
  margin-top: 10px;
}

.note-tile {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 12px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 10px;
  text-align: left;
  cursor: pointer;
  transition: border-color .15s, background-color .15s;
  font-family: inherit;
  min-height: 110px;
}

.note-tile:hover {
  border-color: var(--acc2);
  background: #f0f9ff;
}

.note-tile-title {
  font-weight: 700;
  font-size: 14px;
  color: var(--txt);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.note-tile-preview {
  font-size: 13px;
  color: var(--mut);
  line-height: 1.4;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  line-clamp: 3;
}

.note-tile-date {
  font-size: 11px;
  color: var(--mut);
  margin-top: auto;
  padding-top: 4px;
}


/* ============================================================================
   24. Журнал аудита
   ============================================================================ */
.journal-filters {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 8px;
  overflow-x: auto;
  padding-bottom: 2px;
}
.journal-filters > .lbl {
  flex: none;
  margin: 0;
}
.journal-filters > .inp,
.journal-filters > .custom-select-trigger {
  flex: none;
}

.journal-filters .w-150 { width: 150px; }
.journal-filters .w-180 { width: 180px; }
.journal-filters .w-200 { width: 200px; }

.journal-row {
  transition: background-color .1s;
}

.journal-row--alt {
  background: var(--slate-50);
}

.journal-row:hover,
.journal-row--alt:hover {
  background: var(--slate-100);
}

[data-theme="dark"] .journal-row--alt {
  background: rgba(255, 255, 255, .025);
}

[data-theme="dark"] .journal-row:hover,
[data-theme="dark"] .journal-row--alt:hover {
  background: rgba(255, 255, 255, .06);
}

.journal-search {
  flex: 1 1 auto;
  min-width: 180px;
}
.journal-search input {
  flex: 1;
  min-width: 0;
  width: auto;
}


/* ============================================================================
   25. Обсуждение / чат
   ============================================================================ */
.chat {
  display: flex;
  flex-direction: column;
  gap: 9px;
}
.discussion-header {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 8px 0 12px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 12px;
}
.pinned-messages {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}
.pinned-label {
  font-size: 13px;
  font-weight: 700;
  color: var(--mut);
  text-transform: uppercase;
  letter-spacing: 0.4px;
  margin-bottom: 2px;
}
.pinned-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 8px;
  border-radius: 6px;
  background: var(--amber-50);
  border: 1px solid var(--amber-200);
  cursor: pointer;
  transition: background-color .15s, border-color .15s;
  font-size: 13px;
  flex-wrap: wrap;
}
.pinned-item:hover {
  background: #fef3c7;
  border-color: var(--amber-500);
}
.pinned-author {
  font-weight: 600;
  color: var(--txt);
  white-space: nowrap;
}
.pinned-preview {
  color: var(--mut);
  flex: 1;
  min-width: 100px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.search-toggle-group {
  position: relative;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  align-self: flex-start;
  margin-left: auto;
}
.search-toggle-group .icon-btn.active {
  background: var(--sky-100);
  color: var(--acc);
}
.chat-search-inline {
  position: absolute;
  top: 50%;
  right: calc(100% + 10px);
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
  z-index: 20;
  animation: slideInLeft .22s ease;
}
.search-navigation {
  display: flex;
  align-items: center;
  gap: 2px;
  flex: none;
}
.chat-search-inline .search-box {
  border-radius: 8px;
  padding: 4px 10px;
  width: 260px;
  box-shadow: 0 2px 8px rgba(15, 23, 42, .08);
}
.chat-search-inline .search-box input {
  padding: 4px 0;
  font-size: 14px;
  flex: 1;
  min-width: 0;
  width: auto;
}
.chat-search-inline .search-result-count {
  font-size: 12px;
  font-weight: 700;
  color: var(--mut);
  background: var(--slate-100);
  padding: 3px 8px;
  border-radius: 99px;
}
.search-highlight {
  background: var(--amber-200);
  padding: 0 2px;
  border-radius: 2px;
}

.cm-item--nested {
  margin-left: 26px;
}

.cm {
  position: relative;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 9px 12px;
  background: var(--panel);
  transition: background-color 0.3s;
}
.cm.comment-flash {
  background: #fef3c7;
}
.cm.reply {
  background: #fbfcfe;
}
.cm.pinned {
  border-left: 4px solid var(--amber-500);
  background: var(--amber-50);
}

.cm.unread {
  background: var(--emerald-50);
  border-color: var(--emerald-200);
}

.cm-head {
  display: flex;
  gap: 8px;
  align-items: center;
  font-size: 14px;
  margin-bottom: 4px;
  flex-wrap: wrap;
}
.cm-author {
  font-weight: 800;
  font-size: 14px;
}
.pinned-badge {
  font-size: 14px;
  margin-left: 4px;
  display: inline-flex;
  align-items: center;
}
.cm-text {
  font-size: 15px;
  line-height: 1.6;
}
.mention {
  color: var(--acc);
  font-weight: 700;
}
.cm-actions {
  display: flex;
  gap: 12px;
  margin-top: 5px;
}
.cm-actions .link {
  font-size: 14px;
}
.cm-edit {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.cm-edit textarea {
  width: 100%;
  font-size: 15px;
}
.cm-foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  margin-top: 2px;
}
.cm-input-wrap {
  position: relative;
  transition: border-color 0.2s, background-color 0.2s;
}
.cm-input-wrap.drag-over {
  border: 2px dashed var(--acc);
  border-radius: 10px;
  background: var(--blue-50);
}
.reply-banner {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: center;
  font-size: 14px;
  background: var(--blue-50);
  border: 1px solid var(--blue-200);
  color: var(--blue-800);
  border-radius: 8px;
  padding: 6px 10px;
}

.mention-pop {
  position: fixed;
  z-index: 10001;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
  padding: 4px 0;
  min-width: 200px;
  max-width: 300px;
  max-height: 200px;
  overflow-y: auto;
}
.mention-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  cursor: pointer;
  font-size: 13px;
}
.mention-item:hover {
  background: var(--slate-100);
}

.discussion-toolbar {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
  flex-wrap: wrap;
}
.discussion-toolbar .toolbar-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--mut);
}

.cm-composer {
  position: sticky;
  bottom: -16px;
  z-index: 5;
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 8px 0 -16px;
  padding: 12px 0 16px;
  background: var(--panel);
  border-top: 1px solid var(--line);
}
.cm-composer::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: -12px;
  height: 12px;
  background: linear-gradient(180deg, transparent, rgba(255,255,255,.9));
  pointer-events: none;
}
.cm-attachments {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.cm-attachment-chip {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 8px;
  background: var(--slate-100);
  border-radius: 6px;
  font-size: 13px;
}
.search-highlight-active {
  background: var(--amber-500);
  color: var(--on-accent);
}

/* ============================================================================
   26. Галерея и лайтбокс
   ============================================================================ */
.project-gallery {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
}
.gallery-upload {
  margin-bottom: 4px;
}
.gallery-main {
  position: relative;
  border-radius: 4px;
  overflow: hidden;
  background: var(--side);
  aspect-ratio: 4 / 3;
}
.gallery-main-image {
  width: 100%;
  height: 100%;
  object-fit: contain;
  cursor: pointer;
  display: block;
}
.gallery-main-overlay {
  position: absolute;
  top: 8px;
  right: 8px;
  display: flex;
  gap: 6px;
  align-items: center;
}
.gallery-main-badge {
  background: rgba(255, 215, 0, 0.85);
  color: #000;
  font-size: 18px;
  padding: 0 6px;
  border-radius: 4px;
  line-height: 1.6;
}
.gallery-counter {
  position: absolute;
  bottom: 8px;
  right: 8px;
  background: rgba(0, 0, 0, 0.6);
  color: var(--on-accent);
  padding: 2px 10px;
  border-radius: 12px;
  font-size: 12px;
}
.gallery-nav {
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  transform: translateY(-50%);
  display: flex;
  justify-content: space-between;
  pointer-events: none;
  padding: 0 4px;
  opacity: 0;
  transition: opacity 0.3s ease;
}
.gallery-nav.visible {
  opacity: 1;
}
.gallery-nav-btn {
  pointer-events: auto;
  background: rgba(0, 0, 0, 0.5);
  border: none;
  color: var(--on-accent);
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background-color 0.2s;
}
.gallery-nav-btn:hover {
  background: rgba(0, 0, 0, 0.8);
}
.gallery-meta {
  font-size: 12px;
  color: var(--mut);
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 4px 0;
}
.gallery-name {
  font-weight: 500;
  color: var(--txt);
}
.gallery-empty {
  padding: 30px 0;
  text-align: center;
  color: var(--mut);
}
.gallery-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 20px 0;
}
.gallery-empty-text {
  color: var(--mut);
  font-size: 16px;
  margin-bottom: 12px;
}
.gallery-with-photos {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}
.gallery-upload-wrapper {
  margin-top: 12px;
  align-self: center;
}

.lightbox-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.92);
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
}
.lightbox-content {
  position: relative;
  max-width: 90vw;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.lightbox-image {
  max-width: 85vw;
  max-height: 80vh;
  object-fit: contain;
  border-radius: 6px;
  box-shadow: 0 8px 40px rgba(0, 0, 0, 0.5);
}
.lightbox-btn {
  position: fixed;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(4px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: var(--on-accent);
  padding: 18px 24px;
  border-radius: 8px;
  cursor: pointer;
  transition: background-color 0.25s ease, border-color 0.25s ease, transform 0.25s ease;
  z-index: 10001;
  font-size: 18px;
  font-weight: 500;
  letter-spacing: 0.5px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.lightbox-btn:hover {
  background: rgba(255, 255, 255, 0.3);
  border-color: rgba(255, 255, 255, 0.5);
  transform: translateY(-50%) scale(1.05);
}
.lightbox-btn.prev {
  left: 24px;
}
.lightbox-btn.next {
  right: 24px;
}
.lightbox-btn-label {
  display: flex;
  align-items: center;
  gap: 8px;
}
.lightbox-close {
  position: fixed;
  top: 20px;
  right: 20px;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.15);
  color: var(--on-accent);
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background-color 0.25s ease, transform 0.25s ease;
  z-index: 10001;
}
.lightbox-close:hover {
  background: rgba(255, 255, 255, 0.3);
  transform: scale(1.05);
}
.lightbox-info {
  position: fixed;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  color: var(--on-accent);
  font-size: 14px;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(4px);
  padding: 8px 18px;
  border-radius: 30px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  z-index: 10001;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}
.lightbox-name {
  font-weight: 500;
  max-width: 300px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.lightbox-counter {
  font-size: 12px;
  opacity: 0.7;
}
.lightbox-dots {
  position: fixed;
  bottom: 80px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 10px;
  z-index: 10001;
}
.lightbox-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.3);
  cursor: pointer;
  transition: background-color 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease;
  border: none;
  padding: 0;
}
.lightbox-dot.active {
  background: var(--panel);
  transform: scale(1.2);
  box-shadow: 0 0 12px rgba(255, 255, 255, 0.4);
}
.lightbox-dot:hover {
  background: rgba(255, 255, 255, 0.6);
}


/* ============================================================================
   27. Вложения и версии файлов
   ============================================================================ */
.attachment-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 8px;
}
.attachment-item {
  position: relative;
  width: 120px;
  height: 120px;
  border-radius: 8px;
  overflow: hidden;
  cursor: pointer;
  border: 1px solid var(--line);
  flex-shrink: 0;
}
.attachment-thumb {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.2s;
}
.attachment-item:hover .attachment-thumb {
  transform: scale(1.05);
}
.attachment-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.3);
  opacity: 0;
  transition: opacity 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;
}
.attachment-item:hover .attachment-overlay {
  opacity: 1;
}
.attachment-download {
  background: rgba(255, 255, 255, 0.9);
  border-radius: 50%;
  padding: 6px;
  color: #1e293b;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.2s, background-color 0.2s;
}
.attachment-download:hover {
  transform: scale(1.1);
  background: var(--panel);
}
.file-input-hidden {
  display: none;
}
.file-item {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--slate-50);
  padding: 8px 12px;
  border-radius: 8px;
  border: 1px solid var(--line);
}
.file-info {
  flex: 1;
}
.file-name {
  font-weight: 600;
}
.file-meta {
  font-size: 12px;
  color: var(--mut);
}
.file-document {
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--panel);
  overflow: hidden;
  margin-bottom: 6px;
}
.file-document .file-item {
  border: none;
  border-radius: 0;
}
.file-version-badge {
  display: inline-block;
  margin-left: 8px;
  font-size: 11px;
  font-weight: 800;
  color: var(--sky-700);
  background: var(--sky-100);
  border-radius: 999px;
  padding: 1px 8px;
}
.file-versions {
  border-top: 1px solid var(--line);
  background: var(--slate-50);
  padding: 6px 12px;
}
.file-version-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 5px 0;
  font-size: 13px;
  border-bottom: 1px dashed var(--line);
}
.file-version-row:last-child {
  border-bottom: none;
}
.file-version-row.current {
  font-weight: 600;
}
.file-version-tag    { font-weight: 800; color: var(--slate-600); min-width: 32px; }
.file-version-date   { color: var(--mut); min-width: 130px; }
.file-version-author { color: var(--mut); flex: 1; }
.file-version-size   { color: var(--mut); min-width: 60px; text-align: right; }
.inp-with-button {
  display: flex;
  gap: 8px;
  flex: 1;
  flex-wrap: wrap;
  align-items: center;
}

.file-toolbar {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 10px;
}
.file-toolbar-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
}

.file-toolbar-row .btn {
  height: 36px;
  padding-top: 0;
  padding-bottom: 0;
  box-sizing: border-box;
}
.file-toolbar-row .file-search-box {
  flex: 1 1 0;
  min-width: 120px;
}

.file-toolbar-row .file-search-box input {
  flex: 1;
  min-width: 0;
  width: auto;
}
.file-toolbar-actions {
  display: flex;
  gap: 6px;
  align-items: center;
}

.file-breadcrumb {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  flex-wrap: wrap;
}
.file-breadcrumb-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.file-breadcrumb-sep {
  color: var(--mut);
}

.file-folder {
  margin-bottom: 6px;
}

.file-all-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.file-path {
  color: var(--acc);
  font-weight: 600;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12px;
}
.file-path-button {
  border: none;
  background: none;
  padding: 0;
  margin: 0;
  cursor: pointer;
  text-align: left;
  transition: color .15s ease, text-decoration-color .15s ease;
  text-decoration: underline;
  text-decoration-color: transparent;
  text-underline-offset: 2px;
}

.file-path-button:hover,
.file-path-button:focus-visible {
  color: var(--acc2);
  text-decoration-color: currentColor;
  outline: none;
}
@keyframes file-share-pulse {
  0%   { background: var(--sky-100); }
  100% { background: var(--blue-50); }
}

.file-document--shared,
.file-item--shared,
.file-folder--shared {
  background: var(--blue-50);
  box-shadow: inset 3px 0 0 var(--acc);
  animation: file-share-pulse .9s ease-out;
}


/* ============================================================================
   28. Реакции
   ============================================================================ */
.cm-reactions {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 6px;
}
.reaction-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border: 1px solid var(--line);
  background: var(--panel);
  border-radius: 12px;
  font-size: 13px;
  line-height: 1.2;
  cursor: pointer;
  transition: background-color .12s, border-color .12s, color .12s;
}
.reaction-chip:hover { background: rgba(0, 0, 0, .04); }
.reaction-chip.on {
  border-color: var(--acc);
  background: rgba(37, 99, 235, .12);
  color: var(--acc);
}
.reaction-chip:disabled { opacity: .6; cursor: default; }
.reaction-emoji { font-size: 14px; }
.reaction-count { font-size: 12px; font-weight: 600; }

.reaction-picker {
  position: absolute;
  bottom: calc(100% + 6px);
  left: 12px;
  display: flex;
  gap: 2px;
  padding: 4px 6px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 20px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, .12);
  z-index: 20;
  cursor: default;
  animation: reaction-pop .12s ease-out;
}
.reaction-pick-btn {
  border: none;
  background: transparent;
  font-size: 20px;
  line-height: 1;
  padding: 4px 6px;
  border-radius: 8px;
  cursor: pointer;
  transition: transform .12s, background-color .12s;
}
.reaction-pick-btn:hover {
  transform: scale(1.2);
  background: rgba(0, 0, 0, .05);
}
.reaction-pick-btn.on {
  background: rgba(37, 99, 235, .15);
}

.comment-flash {
  animation: comment-flash 2s ease-out;
}


/* ============================================================================
   29. Шаблоны
   ============================================================================ */
.templates-table {
  width: 100%;
  min-width: 860px;
}
.templates-th-name    { width: 26%; }
.templates-th-kind    { width: 10%; }
.templates-th-owner   { width: 22%; }
.templates-th-updated { width: 14%; }
.templates-th-access  { width: 12%; }
.templates-th-actions { width: 16%; }

.templates-owner {
  display: flex;
  align-items: center;
  gap: 8px;
}
.templates-actions {
  text-align: right;
}

/* Дерево шаблона (задачи проекта / подзадачи задачи) */
.template-tree-node {
  margin-bottom: 8px;
}
.template-tree-node[data-depth="1"] { padding-left: 20px; }
.template-tree-node[data-depth="2"] { padding-left: 40px; }
.template-tree-node[data-depth="3"] { padding-left: 60px; }
.template-tree-node[data-depth="4"] { padding-left: 80px; }
.template-tree-node[data-depth="5"] { padding-left: 100px; }

.template-tree-actions {
  display: flex;
  gap: 8px;
  margin-top: 8px;
}
.template-tree-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}
.template-tree-title {
  font-weight: 800;
  font-size: 16px;
  margin: 0;
}

/* Черновые строки - подзадачи/задачи из шаблона, ещё не созданные */
.draft-row {
  background: var(--slate-50);
  cursor: default;
}

.draft-row td {
  color: var(--mut);
}

.draft-row:hover {
  background: var(--slate-50);
}

.task-draft-badge {
  display: inline-block;
  margin-left: 8px;
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .4px;
  color: var(--sky-700);
  background: var(--sky-100);
  border-radius: 999px;
  padding: 1px 8px;
  vertical-align: middle;
}

/* ============================================================================
   30. Черновики в шаблоне - список и модалка-редактор
   ============================================================================ */

.template-draft-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 10px;
}

.template-draft-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 10px;
  cursor: pointer;
  text-align: left;
  transition: border-color .15s, background-color .15s;
}

.template-draft-item:hover {
  border-color: var(--acc2);
  background: #f0f9ff;
}

.template-draft-title {
  flex: 1;
  font-weight: 700;
  font-size: 14px;
  color: var(--txt);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.template-draft-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: none;
}

.template-draft-children {
  font-size: 12px;
  color: var(--mut);
  font-weight: 600;
}

.template-draft-status {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 700;
  background: var(--line);
  color: var(--mut);
}

/* ============================================================================
   31. Раздел «Шаблоны» - выпадающее меню создания
   ============================================================================ */

.templates-create {
  position: relative;
  flex: none;
}

.templates-create-menu {
  position: absolute;
  top: calc(100% + 4px);
  right: 0;
  min-width: 180px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(15, 23, 42, .15);
  z-index: 10000;
  overflow: hidden;
  padding: 4px 0;
  animation: popIn .15s ease;
}

.templates-create-item {
  display: block;
  width: 100%;
  padding: 8px 14px;
  text-align: left;
  background: transparent;
  border: none;
  font-size: 14px;
  font-weight: 500;
  color: var(--txt);
  cursor: pointer;
  transition: background-color .1s, color .1s;
}

.templates-create-item:hover {
  background: var(--slate-100);
  color: var(--acc);
}

/* ============================================================================
   32. Раздел «Шаблоны» - чип-переключатель доступа
   ============================================================================ */

.st-chip-toggle {
  border: none;
  font-family: inherit;
  cursor: pointer;
  transition: filter .12s;
}

.st-chip-toggle:hover {
  filter: brightness(0.95);
}

.st-chip-toggle:focus-visible {
  outline: 2px solid var(--acc2);
  outline-offset: 2px;
}

/* ============================================================================
   33. Доступ к проекту - окно управления + одинаковые кнопки в подвале
   ============================================================================ */

.modal-foot .btn {
  min-height: 38px;
}

.access-section {
  margin-top: 14px;
}

.access-section-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 6px;
}

.access-section-title {
  font-size: 14px;
  font-weight: 800;
  color: var(--txt);
}

.access-section-count {
  font-size: 13px;
  color: var(--mut);
  font-weight: 600;
}

.access-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
  max-height: 220px;
  overflow-y: auto;
  padding: 4px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fbfcfe;
}

.access-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  border-radius: 8px;
  cursor: pointer;
  font-size: 14px;
  transition: background-color .1s;
}

.access-item:hover {
  background: var(--slate-100);
}

.access-item input[type="checkbox"] {
  width: 16px;
  height: 16px;
  accent-color: var(--acc);
  flex: none;
}

.access-item-name {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 600;
}

.access-item-note {
  color: var(--mut);
  font-size: 12px;
  flex: none;
  max-width: 200px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ============================================================================
   34. Единый SearchBox - модификаторы
   ============================================================================ */

.search-box.filter-search input {
  flex: 1;
  min-width: 0;
  width: auto;
  font-size: 14px;
}

.access-search {
  width: 100%;
  margin-bottom: 8px;
}

.access-search input {
  flex: 1;
  min-width: 0;
  width: auto;
}

.access-empty {
  padding: 14px;
  text-align: center;
  color: var(--mut);
  font-size: 14px;
}

/* ============================================================================
   35. Плавающее меню действий (FloatingMenu)
   ============================================================================ */

.floating-menu {
  position: fixed;
  z-index: 10000;
  min-width: 200px;
  max-width: 320px;
  padding: 4px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(15, 23, 42, .15);
  animation: popIn .12s ease;
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.fm-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 7px 10px;
  border: none;
  background: transparent;
  border-radius: 6px;
  font-family: inherit;
  font-size: 14px;
  color: var(--txt);
  text-align: left;
  cursor: pointer;
  transition: background-color .1s, color .1s;
}
.fm-item:hover:not(:disabled) { background: var(--slate-100); }
.fm-item:focus-visible {
  outline: none;
  background: var(--blue-50);
  color: var(--acc);
}
.fm-item:disabled { opacity: .5; cursor: default; }
.fm-item.danger { color: var(--red-600); }
.fm-item.danger:hover:not(:disabled) { background: var(--red-50); }
.fm-item.danger:focus-visible { background: var(--red-50); color: var(--red-600); }

.fm-icon {
  flex: none;
  width: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--mut);
}
.fm-item.danger .fm-icon { color: var(--red-600); }

.fm-label { flex: 1; min-width: 0; }

.fm-hint {
  flex: none;
  font-size: 12px;
  color: var(--mut);
  font-variant-numeric: tabular-nums;
}

.fm-divider {
  height: 1px;
  background: var(--line);
  margin: 4px 2px;
}

.fm-header {
  padding: 6px 10px 2px;
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .4px;
  color: var(--mut);
}
.kcard-menu-btn {
  position: absolute;
  top: 6px;
  right: 6px;
  z-index: 2;
  opacity: 0;
  transition: opacity .15s;
}
.pj-card .kcard-menu-btn {
  opacity: 1;
}
.kcard:hover .kcard-menu-btn,
.kcard-menu-btn:focus-visible,
.kcard-menu-btn[aria-expanded="true"] {
  opacity: 1;
}
@media (hover: none) {
  .kcard-menu-btn { opacity: 1; }
}

/* ============================================================================
   36. Дашборд загрузки сотрудников
   ============================================================================ */

.workload-toolbar {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.workload-period {
  min-width: 170px;
  text-align: center;
  font-size: 15px;
  font-weight: 800;
  letter-spacing: -.2px;
}

.workload-custom-range {
  display: flex;
  align-items: center;
  gap: 8px;
}

.workload-search {
  flex: 1 1 220px;
  max-width: 340px;
}

.workload-search input {
  flex: 1;
  min-width: 0;
  width: auto;
}
.staff-search {
  flex: 0 1 240px;
  min-width: 180px;
}

.staff-search input {
  flex: 1;
  min-width: 0;
  width: auto;
}

.staff .toolbar .staff-select {
  width: 220px;
  flex-shrink: 0;
}

.workload-period-meta {
  font-size: 14px;
  color: var(--mut);
  margin-bottom: 12px;
  padding: 8px 12px;
  background: var(--slate-50);
  border: 1px solid var(--line);
  border-radius: 8px;
}

.workload-period-meta b {
  color: var(--txt);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.workload-table {
  min-width: 720px;
}

.workload-table th,
.workload-table td {
  vertical-align: middle;
}

.workload-col-bar {
  width: 200px;
}

.workload-cell {
  display: flex;
  align-items: center;
  gap: 10px;
}

.workload-bar {
  flex: 1;
  height: 12px;
  background: var(--bg);
  border-radius: 99px;
  overflow: hidden;
}

.workload-bar-fill {
  width: var(--workload-fill, 0%);
  height: 100%;
  border-radius: 99px;
  transition: width .2s ease;
}

.workload-bar-fill--plan {
  background: linear-gradient(90deg, #93c5fd, var(--acc));
}

.workload-bar-fill--fact {
  background: linear-gradient(90deg, #6ee7b7, var(--emerald-600));
}

.workload-hours {
  min-width: 52px;
  text-align: right;
  font-size: 13px;
  font-weight: 700;
  color: var(--mut);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.workload-util {
  font-size: 14px;
  font-weight: 800;
  color: var(--acc);
  font-variant-numeric: tabular-nums;
}

.workload-util.over {
  color: var(--red-600);
}

.workload-total-row td {
  border-top: 2px solid var(--line);
  background: var(--slate-50);
}

.employee-tasks-table {
  min-width: 720px;
}

.employee-tasks-table th {
  white-space: nowrap;
}

/* ============================================================================
   37. Производственный календарь
   ============================================================================ */

.pc-year-tabs {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.pc-year-add {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
}

.pc-active-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}

.pc-sections {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

@media (max-width: 800px) {
  .pc-sections {
    grid-template-columns: 1fr;
  }
}

.pc-section {
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 14px;
  background: #fbfcfe;
}

.pc-section-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
}

.pc-section-title {
  font-weight: 800;
  font-size: 15px;
}

.pc-add-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
  flex-wrap: wrap;
}

.pc-date-input {
  flex: 1;
  min-width: 240px;
  font-variant-numeric: tabular-nums;
  letter-spacing: .3px;
}

.pc-empty {
  color: var(--mut);
  font-size: 14px;
  padding: 12px 0;
  text-align: center;
}

.pc-date-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  max-height: 300px;
  overflow-y: auto;
}

.pc-date-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 8px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 8px;
  font-size: 13px;
}

.pc-date-label {
  font-weight: 600;
  white-space: nowrap;
}

/* ============================================================================
   38. Годовой просмотр производственного календаря
   ============================================================================ */

.modal.modal-year-calendar {
  min-height: 88vh;
}

.yc-nav {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 14px;
}

.yc-year {
  min-width: 60px;
  text-align: center;
  font-size: 17px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

.yc-today-hint {
  margin-left: auto;
  font-size: 13px;
  color: var(--mut);
}

.yc-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}

.yc-month {
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 12px 10px;
  background: var(--panel);
}

.yc-month-title {
  font-size: 15px;
  font-weight: 800;
  text-align: center;
  margin-bottom: 10px;
  color: var(--txt);
}

.yc-weekdays {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 1px;
  font-size: 12px;
  color: var(--mut);
  text-align: center;
  margin-bottom: 3px;
}

.yc-days {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
}

.yc-day {
  font-size: 14px;
  text-align: center;
  padding: 2px 0;
  border-radius: 3px;
  font-variant-numeric: tabular-nums;
  color: var(--txt);
}

.yc-day--empty {
  visibility: hidden;
}

.yc-day--workday {
  color: var(--txt);
}

.yc-day--shortday {
  color: var(--acc);
  font-weight: 700;
}

.yc-day--weekend {
  color: var(--red-600);
}

.yc-day--holiday {
  color: var(--red-600);
  font-weight: 700;
}

.yc-day.yc-day--today {
  background: var(--emerald-500);
  color: var(--on-accent);
  font-weight: 800;
  border-radius: 50%;
  width: 24px;
  height: 24px;
  padding: 0;
  justify-self: center;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.yc-legend {
  display: flex;
  gap: 18px;
  flex-wrap: wrap;
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
}

.yc-legend-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--mut);
}

.yc-legend-dot {
  width: 12px;
  height: 12px;
  border-radius: 3px;
}

.yc-legend-dot--workday {
  background: var(--txt);
}

.yc-legend-dot--shortday {
  background: var(--acc);
}

.yc-legend-dot--weekend {
  background: var(--red-600);
}

.yc-legend-dot--today {
  background: var(--emerald-500);
  border-radius: 50%;
}

@media (max-width: 1000px) {
  .yc-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 640px) {
  .yc-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ============================================================================
   39. Тосты - всплывающие уведомления
   ============================================================================ */

.toast-container {
  position: fixed;
  bottom: 20px;
  right: 20px;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-width: 400px;
  width: 100%;
  pointer-events: none;
}

.toast {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, .15);
  color: var(--on-accent);
  font-size: 14px;
  font-weight: 500;
  animation: fadeUp .2s ease;
  pointer-events: auto;
}

.toast--success { background: var(--emerald-500); }
.toast--error   { background: var(--red-500); }
.toast--warning { background: var(--amber-500); }
.toast--info    { background: var(--blue-500); }

.toast-message {
  flex: 1;
  min-width: 0;
  word-break: break-word;
}

.toast-close {
  flex: none;
  background: transparent;
  border: none;
  color: var(--on-accent);
  cursor: pointer;
  font-size: 18px;
  line-height: 1;
  padding: 0 4px;
}

.toast-close:hover {
  opacity: .8;
}

/* ============================================================================
   40. Кнопка меню действий «⋯» - контраст точек
   ============================================================================ */

.icon-btn[aria-haspopup="menu"] {
  color: var(--txt);
}
.icon-btn[aria-haspopup="menu"] svg path {
  stroke-width: 3.5;
}
.icon-btn[aria-haspopup="menu"]:hover {
  color: #000;
}

/* ============================================================================
   41. Контрол сортировки (SortControl)
   ============================================================================ */

.sort-control {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
}

.sort-control .sort-select {
  flex: 0 1 150px;
  min-width: 120px;
  max-width: 150px;
}

.sort-dir-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
  color: var(--mut);
  cursor: pointer;
  flex: none;
  transition: background-color .12s, color .12s, border-color .12s;
}

.sort-dir-btn:hover {
  background: var(--slate-100);
  color: var(--txt);
  border-color: var(--slate-300);
}

.sort-dir-btn:focus-visible {
  outline: 2px solid var(--acc2);
  outline-offset: 2px;
}

/* ============================================================================
   42. Share-ссылки: утилита копирования в буфер
   ============================================================================ */

.copy-helper {
  position: fixed;
  left: -9999px;
  top: 0;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

/* ============================================================================
   43. Тёмная тема

   Механика: <html data-theme="dark"> переключает переменные. Все компоненты
   читают их через var(), поэтому переключение — одна операция на корне.

   Проблема, которую решает бо́льшая часть патчей ниже: некоторые переменные
   в светлой теме играют роль «поверхность/фон», а не «цвет текста». При
   инверсии они должны менять и роль тоже. Так как в CSS нельзя сказать
   «эта переменная теперь текст», приходится переопределять точечно те
   селекторы, где роль переменной — фон, но её значение стало слишком
   светлым/тёмным. Селекторы собраны в конце блока.
   ============================================================================ */

[data-theme="dark"] {
  color-scheme: dark;

  /* Семантические */
  --bg:    #0b1220;
  --panel: #151f33;
  --line:  #2a3a55;
  --txt:   #e2e8f0;
  --mut:   #94a3b8;
  --sh:    0 1px 2px rgba(0, 0, 0, .4), 0 4px 16px rgba(0, 0, 0, .35);

  /* Нейтральные */
  --slate-50:  #1a2436;
  --slate-100: #243147;
  --slate-200: #334155;
  --slate-300: #475569;
  --slate-400: #64748b;
  --slate-500: #94a3b8;
  --slate-600: #cbd5e1;
  --slate-700: #e2e8f0;
  --slate-900: #f8fafc;

  /* Синий */
  --blue-50:  #172338;
  --blue-200: #1e40af;
  --blue-700: #93c5fd;
  --blue-800: #bfdbfe;

  /* Голубой */
  --sky-100: #12283d;
  --sky-700: #7dd3fc;

  /* Красный */
  --red-50:  #2a1b1f;
  --red-200: #4c2226;
  --red-600: #f87171;
  --red-700: #fca5a5;

  /* Зелёный */
  --emerald-50:  #102820;
  --emerald-200: #1c4a3a;
  --emerald-600: #34d399;
  --emerald-700: #6ee7b7;

  /* Янтарный */
  --amber-50:  #2a2214;
  --amber-200: #4a3a1e;
  --amber-600: #fbbf24;
  --amber-700: #fcd34d;
}

/* ── Патчи: элементы, где роль переменной — фон, а не текст ─────────────── */

[data-theme="dark"] .btn.primary {
  background: linear-gradient(135deg, #3b82f6, #1d4ed8);
  box-shadow: 0 4px 12px rgba(37, 99, 235, .45);
}
[data-theme="dark"] .btn.primary:hover { transform: translateY(-1px); }

[data-theme="dark"] .btn.ghost:hover { background: var(--slate-100); }

[data-theme="dark"] .btn.danger {
  background: var(--red-50);
  border-color: var(--red-200);
  color: var(--red-600);
}

[data-theme="dark"] .btn.request-hours:hover {
  background: #064e3b;
  border-color: var(--emerald-500);
  color: var(--emerald-200, #a7f3d0);
}

[data-theme="dark"] .nav-item.on {
  background: linear-gradient(90deg, #1d4ed8, #2563eb);
  box-shadow: 0 4px 14px rgba(37, 99, 235, .45);
}

[data-theme="dark"] .tab.on {
  background: var(--blue-600);
  color: var(--on-accent);
  border-color: var(--blue-600);
}
[data-theme="dark"] .tab-badge {
  background: #fff;
  color: var(--blue-700);
}

[data-theme="dark"] .warn-box { color: var(--amber-700); }

[data-theme="dark"] .login-hero { color: var(--line); }
[data-theme="dark"] .login-hero p { color: #cbd5e1; }
[data-theme="dark"] .hero-list { color: #e2e8f0; }
[data-theme="dark"] .hero-stack {
  border-color: #334155;
  color: #7dd3fc;
}

[data-theme="dark"] .task-status-badge.new {
  background: var(--slate-200); color: var(--slate-700);
}
[data-theme="dark"] .task-status-badge.in_progress {
  background: #1e3a8a; color: #bfdbfe;
}
[data-theme="dark"] .task-status-badge.review {
  background: #78350f; color: #fde68a;
}
[data-theme="dark"] .task-status-badge.closed {
  background: #064e3b; color: #6ee7b7;
}
[data-theme="dark"] .task-status-badge.cancelled {
  background: #7f1d1d; color: #fecaca;
}
[data-theme="dark"] .task-priority-badge.critical {
  background: #7f1d1d; color: #fca5a5;
}
[data-theme="dark"] .task-priority-badge.high {
  background: #78350f; color: #fcd34d;
}
[data-theme="dark"] .task-priority-badge.medium {
  background: #78350f; color: #fde68a;
}
[data-theme="dark"] .task-priority-badge.low {
  background: var(--slate-200); color: var(--slate-700);
}

[data-theme="dark"] .adm-badge,
[data-theme="dark"] .pj-kb.adm {
  background: #134e4a;
  color: #5eead4;
}
[data-theme="dark"] .dept-chip.prim,
[data-theme="dark"] .prim-btn,
[data-theme="dark"] .primary-btn-active {
  background: #1e3a8a;
  color: #bfdbfe;
  border-color: #1e40af;
}

[data-theme="dark"] .kcol { background: #0f1929; }
[data-theme="dark"] .kcol.over { background: #16334d; }

[data-theme="dark"] .kcard-prio {
  filter: saturate(1.4) brightness(1.2);
}

[data-theme="dark"] .st-row { border-top-color: var(--slate-100); }
[data-theme="dark"] .st-dept-head,
[data-theme="dark"] .cal-cell,
[data-theme="dark"] .tm-block,
[data-theme="dark"] .access-list,
[data-theme="dark"] .pc-section { background: var(--slate-50); }

[data-theme="dark"] .st-sec-head {
  background: linear-gradient(90deg, var(--slate-50), var(--panel));
}

[data-theme="dark"] .demo-chip:hover,
[data-theme="dark"] .cab-task:hover,
[data-theme="dark"] .note-tile:hover,
[data-theme="dark"] .template-draft-item:hover,
[data-theme="dark"] .cal-chip:hover,
[data-theme="dark"] .field-action:hover { background: var(--slate-100); }

[data-theme="dark"] .gcell.wk { background: rgba(255, 255, 255, .02); }
[data-theme="dark"] .gday.wk { color: var(--slate-400); }
[data-theme="dark"] .gantt-row-child .gantt-label {
  background: linear-gradient(90deg, rgba(255, 255, 255, .02) 0%, transparent 100%);
}
[data-theme="dark"] .gantt-row:hover .gantt-label,
[data-theme="dark"] .gantt-row-child:hover .gantt-label {
  background: linear-gradient(90deg, var(--slate-100) 0%, transparent 100%);
}

[data-theme="dark"] .gcell.holiday { background: rgba(239, 68, 68, .14); }
[data-theme="dark"] .gcell.shortday { background: rgba(245, 158, 11, .14); }
[data-theme="dark"] .legend-swatch--holiday { background: rgba(239, 68, 68, .35); }
[data-theme="dark"] .legend-swatch--shortday { background: rgba(245, 158, 11, .35); }

[data-theme="dark"] .workload-bar-fill--plan {
  background: linear-gradient(90deg, #1e40af, #3b82f6);
}
[data-theme="dark"] .workload-bar-fill--fact {
  background: linear-gradient(90deg, #047857, #10b981);
}

[data-theme="dark"] .notif-icon {
  background: var(--slate-100);
  color: var(--blue-700);
}
[data-theme="dark"] .notif-item.new { background: #172338; }

[data-theme="dark"] .cm-composer::before {
  background: linear-gradient(180deg, transparent, rgba(21, 31, 51, .95));
}
[data-theme="dark"] .cm.comment-flash { background: var(--amber-50); }
[data-theme="dark"] .search-highlight { background: var(--amber-500); color: var(--txt); }
[data-theme="dark"] .search-highlight-active {
  background: var(--amber-600);
  color: var(--txt);
}

[data-theme="dark"] .avatar-tooltip { background: #020617; }

[data-theme="dark"] .floating-menu,
[data-theme="dark"] .mention-pop,
[data-theme="dark"] .custom-select-popup,
[data-theme="dark"] .templates-create-menu { box-shadow: 0 8px 24px rgba(0, 0, 0, .55); }
[data-theme="dark"] .notif-pop { box-shadow: 0 20px 50px rgba(0, 0, 0, .6); }
[data-theme="dark"] .modal { box-shadow: 0 24px 60px rgba(0, 0, 0, .6); }
[data-theme="dark"] .chat-search-inline .search-box {
  box-shadow: 0 2px 8px rgba(0, 0, 0, .35);
}

[data-theme="dark"] .del-note { color: #c4b5fd; background: #2e1065; }
[data-theme="dark"] .file-document--shared,
[data-theme="dark"] .file-item--shared,
[data-theme="dark"] .file-folder--shared {
  background: #172338;
  box-shadow: inset 3px 0 0 var(--acc);
}

[data-theme="dark"] ::-webkit-scrollbar-track { background: var(--panel); }
[data-theme="dark"] ::-webkit-scrollbar-thumb {
  background: var(--slate-300);
  border-color: var(--panel);
}

[data-theme="dark"] .legend-item { color: var(--slate-300); }

[data-theme="dark"] .toggle-switch-track { background: var(--slate-200); }
[data-theme="dark"] .toggle-switch-label { color: var(--slate-300); }

/* ============================================================================
   44. Замещения
   ============================================================================ */

.user-substituting {
  font-size: 11px;
  line-height: 1.35;
  color: #7dd3fc;
  margin-top: 3px;
}

.sub-preview {
  margin-top: 8px;
  padding: 8px 10px;
  background: var(--sky-100);
  border: 1px solid var(--sky-500);
  border-radius: 8px;
  font-size: 13px;
}

.sub-preview-title {
  font-weight: 700;
  color: var(--sky-700);
  margin-bottom: 4px;
}

.sub-preview-row + .sub-preview-row {
  margin-top: 2px;
}

.st-chip.revoked {
  background: var(--slate-100);
  color: var(--slate-600);
}