/* ============================== src/css/styles.css ============================== */
/* ============================================================================
   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, 0.06), 0 4px 16px rgba(15, 23, 42, 0.06);

  /* Нейтральные (slate) */
  --slate-50: #f8fafc;
  --slate-100: #f1f5f9;
  --slate-200: #e2e8f0;
  --slate-300: #cbd5e1;
  --slate-400: #94a3b8;
  --slate-500: #64748b;
  --slate-500-rgb: 100 116 139;
  --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;

  --gantt-prio-low: #10b981;
  --gantt-prio-mid: #f59e0b;
  --gantt-prio-high: #f97316;
  --gantt-prio-crit: #dc2626;

  --gantt-closed: #1e40af;
  --gantt-cancelled: #475569;

  --gantt-proj-aog: #dc2626;
  --gantt-proj-crit: #f59e0b;
  --gantt-proj-norm: #10b981;
  --gantt-proj-high: #f97316;
  --gantt-proj-mid: #f59e0b;
  --gantt-proj-low: #10b981;

  /* ─── Шкала z-index ──────────────────────────────────────────────────
     Единая точка правды для слоёв интерфейса. Правило проекта: не
     писать «z-index: 60» по месту, брать var(--z-*). Тогда отношения
     слоёв читаются в одном месте, а не собираются по всему файлу.

     Порядок - от локального «внутри карточки» к глобальному «поверх
     всего окна». Между соседними уровнями оставлены большие зазоры -
     чтобы вставить промежуточный слой без пересчёта всей шкалы. */
  --z-raised: 1; /* kcard-unread, gbar.gantt-dragging, gantt-arrows */
  --z-modal-tabs: 3; /* sticky-табы внутри .modal-body */
  --z-sticky: 5; /* view-foot, gantt-top, cm-composer */
  --z-chrome: 10; /* gantt-resizer, login-help-fab */
  --z-popover-local: 20; /* reaction-picker, chat-search-inline */
  --z-under-topbar: 30; /* custom-select-popup вне модалки */
  --z-topbar: 40; /* .topbar */
  --z-overlay: 110; /* .overlay */
  --z-notif: 60; /* .notif-pop (внутри topbar) */
  --z-fullscreen: 100; /* .gantt-panel.fullscreen */
  --z-popover-overlay: 1000; /* .popover-overlay */
  --z-popover-modal: 1001; /* .task-edit-popover */
  --z-toast: 9999; /* .toast-container */
  --z-float: 10000; /* floating-menu, avatar-tooltip, lightbox-overlay,
                                 templates-create-menu, custom-select-popup[data-in-modal] */
  --z-float-top: 10001; /* mention-pop, элементы внутри лайтбокса */
}

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

@keyframes popIn {
  from {
    opacity: 0;
    transform: scale(0.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(0.95);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

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

/* ============================================================================
   5. Утилитарные классы
   ============================================================================ */
.flex {
  display: flex;
}
.hidden {
  display: none !important;
}
.flex-col {
  flex-direction: column;
}
.flex-wrap {
  flex-wrap: wrap;
}
.flex-1 {
  flex: 1;
  min-width: 0;
}
.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-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;
}
.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;
}
.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;
}
.ml-1 {
  margin-left: 4px;
}
.ml-2 {
  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: 0.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 0.15s,
    background-color 0.15s,
    border-color 0.15s,
    color 0.15s,
    box-shadow 0.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, 0.3);
}
.btn.primary:hover {
  transform: translateY(-1px);
}
.btn.primary:disabled {
  opacity: 0.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;
}
.btn.is-disabled {
  pointer-events: none;
  opacity: 0.5;
  cursor: default;
}
.icon-btn {
  border: none;
  background: transparent;
  color: var(--mut);
  border-radius: 8px;
  padding: 7px;
  display: inline-flex;
  align-items: center;
  transition:
    background-color 0.15s,
    color 0.15s;
  position: relative;
}
.icon-btn:hover {
  background: var(--slate-100);
  color: var(--txt);
}
.icon-btn.active {
  background: var(--sky-100);
  color: var(--acc);
}
.icon-btn.danger:hover {
  background: var(--red-50);
  color: var(--red-600);
}
.icon-btn.danger:hover {
  background: var(--red-50);
  color: var(--red-600);
}
.icon-btn.success:hover {
  background: var(--emerald-50);
  color: var(--emerald-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);
}
:where(.clickable-reset) {
  appearance: none;
  -webkit-appearance: none;
  display: block;
  width: 100%;
  padding: 0;
  background: none;
  border: none;
  font: inherit;
  color: inherit;
  text-align: left;
  cursor: pointer;
}

:where(.clickable-reset:disabled) {
  cursor: not-allowed;
}

/*
 * Фокус-кольцо для элементов с role="button" (Clickable as="div",
 * строки Ганта). Нативный <button> рисует фокус сам, div - нет.
 */
[role="button"]:focus-visible {
  outline: 2px solid var(--acc2);
  outline-offset: 2px;
}

/* ============================================================================
   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 0.15s,
    box-shadow 0.15s;
  font-size: 16px;
}

textarea.inp {
  height: auto;
  padding: 10px 14px;
  resize: none;
}
textarea {
  resize: none;
}
.inp:focus {
  border-color: var(--acc2);
  box-shadow: 0 0 0 3px rgba(14, 165, 233, 0.15);
}
.inp:disabled {
  background: var(--slate-50);
  color: var(--mut);
}
.field-error {
  margin-top: 4px;
  padding: 6px 10px;
  font-size: 13px;
  line-height: 1.35;
  color: var(--red-700);
  background: var(--red-50);
  border: 1px solid var(--red-200);
  border-radius: 8px;
}

[data-theme="dark"] .field-error {
  color: var(--red-600);
  background: var(--red-50);
  border-color: var(--red-200);
}
.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: 0.7;
}

.custom-select-trigger--editable {
  cursor: text;
}

.custom-select-input {
  flex: 1 1 auto;
  min-width: 0;
  width: 100%;
  height: 100%;
  padding: 0;
  border: none;
  background: transparent;
  outline: none;
  font: inherit;
  color: inherit;
}

.custom-select-input::placeholder {
  color: var(--mut);
  opacity: 1;
}

.custom-select-input:disabled {
  background: transparent;
  color: var(--mut);
  cursor: not-allowed;
}
.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, 0.15);
  /* Вне модалки попап должен уезжать под .topbar (--z-topbar).
     Внутри .modal-body - быть выше .overlay (--z-overlay).
     Переключается через data-in-modal на самом попапе. */
  z-index: var(--z-under-topbar);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  animation: popIn 0.15s ease;
}

.custom-select-popup[data-in-modal="true"] {
  z-index: var(--z-float);
}

.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 0.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;
}

.custom-select-footer {
  border-top: 1px solid var(--line);
  padding: 6px;
  flex: none;
}

.custom-select-add-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  padding: 6px 10px;
  background: var(--panel);
  border: 1px dashed var(--line);
  border-radius: 6px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  color: var(--acc);
  cursor: pointer;
  transition:
    background-color 0.12s,
    border-color 0.12s,
    border-style 0.12s;
}

.custom-select-add-btn:hover {
  background: var(--sky-100);
  border-color: var(--acc2);
  border-style: solid;
}

.custom-select-add-btn:focus-visible {
  outline: 2px solid var(--acc2);
  outline-offset: 1px;
}

/* ============================================================================
   9. Бейджи, чипы, метки
   ============================================================================ */
.st-chip {
  display: inline-flex;
  align-items: center;
  border: none;
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.3;
  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);
}

.st-chip--tinted {
  background: rgb(var(--slate-500-rgb) / 0.15);
  background: color-mix(in srgb, var(--chip-color, #64748b) 15%, transparent);
  color: var(--chip-color, #64748b);
}

/* Приоритет в отчётах и карточках: цветной текст без фона, цвет - из
   --chip-color. Раньше были inline-стили в Reports.jsx и
   ProjectCard.jsx. Отдельный класс, потому что .st-chip добавляет
   паддинг и font-weight: 800, а здесь нужен только цветной текст. */
.rep-priority {
  color: var(--chip-color, var(--slate-500));
}

.pdot {
  width: 8px;
  height: 8px;
  border-radius: 99px;
  display: inline-block;
  flex: none;
  /* Фон - из --dot-color, которую ставит компонент ColorDot через
     ref.current.style.setProperty. Fallback --slate-300 сохраняет
     прежнее поведение для случаев без ColorDot (например, Гант). */
  background: var(--dot-color, var(--slate-300));
}

/* Цвет точки проекта в заголовке группы Ганта. Приходит классом
   .gantt-pdot--* из GanttProjectGroup вместо inline-стиля. */
.gantt-pdot--aog {
  background: var(--gantt-proj-aog);
}
.gantt-pdot--crit {
  background: var(--gantt-proj-crit);
}
.gantt-pdot--norm {
  background: var(--gantt-proj-norm);
}
.gantt-pdot--high {
  background: var(--gantt-proj-high);
}
.gantt-pdot--mid {
  background: var(--gantt-proj-mid);
}
.gantt-pdot--low {
  background: var(--gantt-proj-low);
}
.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;
  /* Цвет точки в заголовке колонки канбана приходит из --dot-color
     (компонент ColorDot). Раньше был inline-style с background -
     теперь переменная, та же, что у .pdot. */
  background: var(--dot-color, transparent);
}
.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: 0.3px;
}
.role-chip.blue {
  background: var(--sky-100);
  color: var(--sky-700);
}
.role-chip.indigo {
  background: var(--blue-50);
  color: var(--blue-700);
}
.role-chip--tinted {
  background: rgb(var(--slate-500-rgb) / 0.12);
  background: color-mix(in srgb, var(--chip-color, #64748b) 12%, transparent);
  color: var(--chip-color, #64748b);
}
.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: 0.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;
  overflow: hidden;
}
.avatar.sm {
  width: 36px;
  height: 36px;
  font-size: 14px;
}
.avatar.xs {
  width: 20px;
  height: 20px;
  font-size: 10px;
  flex-shrink: 0;
}
.avatar.xl {
  width: 120px;
  height: 120px;
  font-size: 42px;
}

.avatar-img {
  object-fit: cover;
}

.avatar.avatar--journal {
  width: 24px;
  height: 24px;
  font-size: 9px;
}
/* Системный аватар - нейтральный серый градиент вместо фирменного
   синего. Класс, а не inline-градиент: правило визуальное, живёт в CSS.
   В тёмной теме переопределять не нужно - серый уместен в обеих. */
.avatar.avatar--system {
  background: linear-gradient(135deg, #64748b, #475569);
}
.avatar-wrapper {
  display: inline-block;
  position: relative;
}
.avatar-tooltip {
  position: fixed;
  left: var(--tooltip-x, 0);
  top: var(--tooltip-y, 0);
  transform: translateX(-50%) translateY(-100%);
  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: var(--z-float);
  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: 0.4px;
  padding: 8px 10px;
  border-bottom: 1px solid var(--line);
}
.tbl th.sortable {
  cursor: pointer;
  user-select: none;
  transition:
    color 0.12s,
    background-color 0.12s;
}
.tbl th.sortable:hover {
  color: var(--txt);
  background: var(--slate-50);
}
.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);
}

/* --- Отступы для древовидного отображения задач (лесенка) --- */
.tasks-table td.task-depth-0 {
  padding-left: 12px; /* Базовый отступ .tasks-table td */
}
.tasks-table td.task-depth-1 {
  padding-left: 36px;
}
.tasks-table td.task-depth-2 {
  padding-left: 60px;
}
.tasks-table td.task-depth-3 {
  padding-left: 84px;
}
.tasks-table td.task-depth-4 {
  padding-left: 108px;
}
.tasks-table td.task-depth-5 {
  padding-left: 132px;
}

.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);
}

.tbl-report {
  min-width: 860px;
  font-size: 13px;
}
.tbl-report--projects {
  min-width: 760px;
}
.tbl-report--employees {
  min-width: 600px;
}
.tbl-report--worklog {
  min-width: 700px;
}
.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 0.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 0.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 0.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 0.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 0.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;
}
.error-boundary {
  font-family:
    system-ui,
    -apple-system,
    sans-serif;
}

/* ============================================================================
   12. Логин
   ============================================================================ */
.login-wrap {
  min-height: 100vh;
  display: grid;
  grid-template-columns: 1.1fr 1fr;
}
/* Плавающая кнопка «Справка» на экране входа.
   position: fixed выносит её из потока - она не влияет ни на grid
   login-wrap, ни на раскладку hero/panel. Правый верхний угол
   выбран потому, что не пересекается ни с логотипом, ни с формой
   на любой ширине экрана. */
.login-help-fab {
  position: fixed;
  top: 20px;
  right: 20px;
  z-index: var(--z-chrome);

  display: inline-flex;
  align-items: center;
  gap: 10px;

  /* .btn задаёт height: 36px, .btn.big - padding: 12px + margin-top: 6px.
     Для плавающей кнопки это лишнее: высоту и отступы задаём сами. */
  height: auto;
  margin-top: 0;
  padding: 12px 22px;
  font-size: 15px;
  font-weight: 600;
  line-height: 1;

  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.18);
  transition:
    transform 0.15s ease,
    box-shadow 0.15s ease;
}

.login-help-fab:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.24);
}

.login-help-fab:active {
  transform: translateY(0);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.16);
}
.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: -0.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: 0.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 0.25s ease;
}
.login-card.shake {
  animation: shake 0.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;
}
.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, 0.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 0.15s,
    color 0.15s,
    box-shadow 0.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, 0.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-meta {
  flex: 1;
  min-width: 0;
}
.user-name {
  font-size: 14px;
  font-weight: 700;
  color: var(--line);
  white-space: normal;
  overflow-wrap: anywhere;
}
.user-roles {
  font-size: 12px;
  color: #38bdf8;
  font-weight: 600;
}

.main {
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.topbar {
  position: relative;
  z-index: var(--z-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: -0.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, 0.25);
  z-index: var(--z-notif);
  animation: popIn 0.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 0.15s,
    color 0.15s,
    border-color 0.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, 0.12);
}
.seg-btn:disabled {
  opacity: 0.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: var(--z-sticky);
  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;
}

.filter-date {
  position: relative;
  display: inline-flex;
  align-items: stretch;
}
.filter-date .filter-date-input {
  width: 100%;
}

.filter-date--empty .filter-date-input,
.filter-date--empty .filter-date-input::-webkit-datetime-edit {
  color: transparent;
}

.filter-date.is-focused .filter-date-input,
.filter-date.is-focused .filter-date-input::-webkit-datetime-edit {
  color: var(--txt);
}

.filter-date-hint {
  position: absolute;
  left: 14px;
  right: 32px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--mut);
  font-size: 15px;
  line-height: 1;
  pointer-events: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.filter-date.is-focused .filter-date-hint {
  display: none;
}

.custom-select-trigger.filter-select--active {
  border-color: var(--acc2);
  background: var(--sky-100);
}

.custom-select-trigger.filter-select--active .custom-select-single-label {
  color: var(--acc);
  font-weight: 600;
}

.custom-select-trigger.filter-select--active .custom-select-arrow {
  color: var(--acc);
}

.custom-select-trigger.filter-select--active:focus {
  border-color: var(--acc);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15);
}

.filter-date.filter-date--active .filter-date-input {
  border-color: var(--acc2);
  background: var(--sky-100);
  color: var(--acc);
  font-weight: 600;
}

.filter-date.filter-date--active.is-focused .filter-date-input {
  border-color: var(--acc);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15);
}

.toolbar-action {
  margin-left: auto;
  flex-shrink: 0;
}
.tasks-view-loading {
  opacity: 0.5;
  transition: opacity 0.2s;
}
/* ============================================================================
   16. Канбан
   ============================================================================ */
.kanban {
  display: grid;
  grid-template-columns: repeat(var(--columns, 4), minmax(240px, 1fr));
  gap: 14px;
  min-height: 68vh;
  animation: fadeUp 0.15s 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: 0.15s;
}
.kcol.over {
  border-color: var(--acc2);
  background: var(--sky-100);
  box-shadow: inset 0 0 0 2px rgba(14, 165, 233, 0.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, 0.05);
  cursor: pointer;
  transition:
    transform 0.15s,
    box-shadow 0.15s;
  overflow: hidden;
}
.kcard:hover {
  will-change: transform;
  transform: translateY(-2px);
  box-shadow: var(--sh);
}
.kcard.dim {
  opacity: 0.55;
}

/* Компактный вариант карточки для списка. Канбановский .kcard
   рассчитан на узкую колонку (~240px), а список - на широкую сетку
   (300–350px) с большим числом карточек на экране. Разметка
   (kcard-zone, kcard-meta, kcard-foot) полностью совпадает с
   канбаном, отличие только в отступах и кегле заголовка.

   padding: слева 15px - под цветную полосу PriorityStrip (4px
   + 11px). padding-right 12px вместо 11px - компенсирует более
   широкую карточку. */
.kcard--list {
  padding: 10px 12px 10px 15px;
}

/* Между смысловыми зонами в списке - 4px вместо 6px. Содержимое
   зон то же, что в канбане; плотнее только вертикальный ритм. */
.kcard--list .kcard-zone + .kcard-zone {
  margin-top: 4px;
}

/* Заголовок в списке 14px против 15px в канбане: карточек на
   экране много, крупный кегль перегружает страницу. Правила
   переноса (overflow-wrap, hyphens) наследуются от .kcard-title. */
.kcard--list .kcard-title {
  font-size: 14px;
}

/* Между исполнителем и часами в списке - 6px вместо 8px. Плотнее,
   но без «слипания» аватара и счётчика. */
.kcard--list .kcard-meta {
  gap: 6px;
}
.kcard-zone {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.kcard-zone + .kcard-zone {
  margin-top: 6px;
}
/* Срок в колонке - компактный чип, а не полоса во всю ширину.
   .kcard-zone - flex-column, и по умолчанию потомок растягивается
   по поперечной оси. align-self: flex-start оставляет .kdl по
   размеру содержимого. */
.kcard-zone > .kdl {
  align-self: flex-start;
}

.kcard-title {
  font-weight: 700;
  font-size: 15px;
  line-height: 1.35;
  /* margin-bottom убран: вертикальный ритм задаёт .kcard-zone */
  min-width: 0;
  overflow-wrap: break-word;
  hyphens: auto;
  -webkit-hyphens: auto;
  -ms-hyphens: auto;
}
.kcard-title-row {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  min-width: 0;
}

.kcard-title-row .kcard-title {
  flex: 1;
  min-width: 0;
}

/* Статус-чип в строке заголовка: не сжимается, не растягивается,
   не переносится. Размер - чуть крупнее базового .st-chip, чтобы
   читался как статус, а не как метка. */
.kcard-title-row .kcard-status {
  flex: none;
  font-size: 12px;
  padding: 3px 9px;
}
.kcard-proj {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 700;
  color: var(--slate-600);
  /* margin-bottom убран: вертикальный ритм задаёт .kcard-zone */
}

/* Строка ответственного в зоне 2. Выравнивание по центру по
   вертикали: .kcard-manager-avatar (inline-flex) убирает baseline
   внутреннего div'а Avatar - без обёртки аватар уезжал вверх
   относительно ФИО (inline-block выравнивался по baseline, а не
   по центру строки). */
.kcard-manager {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--slate-600);
  min-width: 0;
  height: 20px; /* высота .avatar.xs */
}
.kcard-manager-avatar {
  display: inline-flex;
  align-items: center;
  flex: none;
}
.kcard-manager-name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  line-height: 20px; /* совпадает с высотой аватара */
}

.prio-chip {
  font-size: 12px;
  font-weight: 800;
  white-space: nowrap;
  color: var(--chip-color, var(--txt));
}
.kcard-foot-end {
  margin-left: auto;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
}

.kcard-foot-end .kcard-unread {
  position: static;
  right: auto;
  bottom: auto;
}
.kcard-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap; /* элементы переезжают на новую строку */
  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 убран: вертикальный ритм задаёт .kcard-zone */
}
.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: var(--z-raised);
  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;
}

/* Нейтральный вариант бейджа непрочитанных - не красный. Промпт п.2:
   «есть сообщения» - не ошибка и не просрочка, красный оставляем
   только для маркеров, требующих внимания. Компактный вид: иконка
   чата + цифра без слова «сообщений» - длинный текст в плотной
   карточке читается как шум. */
.kcard-unread--neutral {
  background: var(--sky-100);
  color: var(--sky-700);
  font-size: 12px;
  gap: 4px;
}

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

.kcard-unread--clickable:hover {
  /* filter создаёт GPU-композитный слой. will-change: filter в :hover
     подсказывает браузеру промоутить слой заранее - фильтр стартует
     без «щелчка» на первом кадре. Вне :hover - не нужен: элемент
     не анимируется, а статический will-change держал бы слой в памяти
     постоянно (см. раздел 16, .kcard:hover по тому же принципу). */
  will-change: filter;
  filter: brightness(1.1);
}

.kcard-unread--clickable:focus-visible {
  outline: 2px solid var(--acc, #3b82f6);
  outline-offset: 1px;
}
.kcard:has(> .kcard-unread) .kcard-foot {
  padding-right: 34px;
}
.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 {
  width: var(--fill-width, 0%);
  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: var(--z-sticky);
  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: var(--z-chrome);
  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;
  width: calc(var(--day-width, 34px) * var(--month-days, 1));
}
.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;
  /* Ширина дня = DW. Раньше стояла в inline-стиле на каждой ячейке;
     теперь наследуется от .gantt через var(). */
  width: var(--day-width, 34px);
}
.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;
  left: var(--corner-width, 240px);
  display: flex;
  pointer-events: none;
}
.gcell {
  border-left: 1px solid var(--slate-100);
  height: 100%;
  flex: none;
  box-sizing: border-box;
  width: var(--day-width, 34px);
}
.gcell.wk {
  background: #f8fafc88;
}
.gtoday {
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--today-left, 0);
  width: 2px;
  background: var(--red-500);
  opacity: 0.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-label[data-level="0"] {
  padding-left: 14px;
}
.gantt-label[data-level="1"] {
  padding-left: 34px;
}
.gantt-label[data-level="2"] {
  padding-left: 54px;
}
.gantt-label[data-level="3"] {
  padding-left: 74px;
}
.gantt-label[data-level="4"] {
  padding-left: 94px;
}
.gantt-label[data-level="5"] {
  padding-left: 114px;
}
.gantt-label[data-level="6"] {
  padding-left: 134px;
}
.gantt-label[data-level="7"] {
  padding-left: 154px;
}
.gantt-label[data-level="8"] {
  padding-left: 174px;
}
.gantt-label[data-level="9"] {
  padding-left: 194px;
}
.gantt-track {
  position: relative;
  height: 46px;
}
.gbar {
  position: absolute;
  top: 11px;
  height: 24px;
  border-radius: 7px;
  overflow: hidden;
  cursor: pointer;
  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;
  background: rgb(var(--slate-500-rgb) / 0.2);
  background: color-mix(in srgb, var(--fill-color, #64748b) 20%, transparent);
  border: 1px solid rgb(var(--slate-500-rgb) / 0.2);
  border: 1px solid
    color-mix(in srgb, var(--fill-color, #64748b) 20%, transparent);
}

/* Модификаторы цвета: задают --fill-color, из которой .gbar и
   .gbar-fill берут всё остальное. */
.gbar--prio-low {
  --fill-color: var(--gantt-prio-low);
}
.gbar--prio-mid {
  --fill-color: var(--gantt-prio-mid);
}
.gbar--prio-high {
  --fill-color: var(--gantt-prio-high);
}
.gbar--prio-crit {
  --fill-color: var(--gantt-prio-crit);
}

.gbar--closed {
  --fill-color: var(--gantt-closed);
}
.gbar--cancelled {
  --fill-color: var(--gantt-cancelled);
}

/* У финальных статусов обводка - сам цвет, а не его 20% версия:
   полоса читается как «завершена» даже на узкой ширине. */
.gbar--closed,
.gbar--cancelled {
  border-color: var(--fill-color);
}
.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: var(--z-raised);
}
.gtitle {
  font-size: 14px;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.gtitle.dim {
  text-decoration: line-through;
  opacity: 0.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 0.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-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, 0.06);
}
.gcell.shortday {
  background: rgba(245, 158, 11, 0.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, 0.25);
}
.legend-swatch--shortday {
  background: rgba(245, 158, 11, 0.25);
}

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

/* ─── Полоса: перетаскивание и процент ─────────────────────────────────── */

.gbar-draggable {
  cursor: grab;
}
.gbar-draggable:active {
  cursor: grabbing;
}
.gbar-draggable:active {
  cursor: grabbing;
}
.gbar-draggable::before,
.gbar-draggable::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 6px;
  z-index: 2;
  cursor: ew-resize;
}
.gbar-draggable::before {
  left: 0;
}
.gbar-draggable::after {
  right: 0;
}

.gbar.gantt-dragging {
  opacity: 0.85;
  box-shadow:
    0 0 0 2px var(--acc),
    0 4px 12px rgba(37, 99, 235, 0.35);
  z-index: var(--z-raised);
}
.gbar-pct {
  position: relative;
  margin-left: auto;
  margin-right: 6px;
  font-size: 11px;
  font-weight: 700;
  color: var(--txt);
  background: var(--panel);
  padding: 1px 5px;
  border-radius: 4px;
  pointer-events: none;
  font-variant-numeric: tabular-nums;
}

/* ─── Стрелки зависимостей ─────────────────────────────────────────────── */

/*
 * Контейнер SVG-стрелок. Раньше геометрия (left/width/height) приходила
 * из inline-стиля в GanttDependencyArrows.jsx. Теперь - из переменных,
 * унаследованных от .gantt:
 *   --corner-width        - сдвиг слева (тот же, что у .gantt-grid);
 *   --gantt-days-width    - ширина по горизонтали (равна daysLength × DW);
 *   --arrows-height       - высота .gantt-body, ставит index.jsx по
 *                           замеру ResizeObserver;
 * pointer-events: none - клики проходят насквозь к полосам под ними.
 */
.gantt-arrows {
  position: absolute;
  top: 0;
  left: var(--corner-width, 240px);
  width: var(--gantt-days-width, auto);
  height: var(--arrows-height, 0);
  pointer-events: none;
  z-index: var(--z-raised);
  overflow: visible;
}

.gantt-arrow {
  fill: none;
  stroke: var(--slate-400);
  stroke-width: 1.5;
  stroke-linejoin: round;
  opacity: 0.85;
}

.gantt-arrow--overdue {
  stroke: var(--red-500);
  opacity: 1;
}

.gantt-arrow-head {
  fill: var(--slate-400);
}

.gantt-arrow--overdue + .gantt-arrow-head {
  fill: var(--red-500);
}

.legend-swatch--arrow {
  background: var(--slate-400);
  height: 3px;
  width: 20px;
  border-radius: 2px;
}

/* ─── Полноэкранный режим ─────────────────────────────────────────────── */

.gantt-panel.fullscreen {
  position: fixed;
  inset: 0;
  z-index: var(--z-fullscreen);
  border-radius: 0;
  border: none;
  box-shadow: none;
  background: var(--bg);
}

/* ─── Шапка периода (переименована из cal-* в gantt-*) ────────────────── */

.gantt-period-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 10px 16px;
  border-bottom: 1px solid var(--line);
  flex-wrap: wrap;
  background: var(--panel);
  flex-shrink: 0;
}

.gantt-period-nav {
  display: flex;
  align-items: center;
  gap: 8px;
}

.gantt-period-title {
  font-size: 18px;
  font-weight: 800;
  min-width: 140px;
  text-align: center;
}

.gantt-period-right {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* ============================================================================
   18. Календарь
   ============================================================================ */
.cal-panel {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: var(--sh);
  padding: 16px;
  animation: fadeUp 0.15s 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: 0.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: 0.4;
}
.cal-cell {
  background: var(--slate-50);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 6px;
  overflow: visible;
  transition:
    border-color 0.15s,
    box-shadow 0.15s;
  height: auto;
  display: flex;
  flex-direction: column;
  min-height: var(--cal-cell-min-h, 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 {
  color: var(--acc);
}
.cal-more {
  align-self: flex-start;
}
.cal-daynum {
  appearance: none;
  border: none;
  background: none;
  font-family: inherit;
  font-size: 14px;
  font-weight: 700;
  color: var(--slate-600);
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  margin-bottom: 4px;
  flex-shrink: 0;
  padding: 3px 8px;
  margin-left: -8px;
  border-radius: 6px;
  cursor: pointer;
  transition:
    background-color 0.12s,
    color 0.12s;
}
.cal-daynum:hover {
  background: var(--slate-100);
  color: var(--txt);
}
.cal-daynum:focus-visible {
  outline: 2px solid var(--acc2);
  outline-offset: 1px;
}

.cal-chips {
  display: flex;
  flex-direction: column;
  gap: 3px;
  overflow: visible;
  flex: 1;
}
.cal-chip-wrap {
  display: contents;
}
.cal-chip {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1px;
  padding: 4px 6px 3px 6px;
  border: 1px solid var(--chip-color, var(--line));
  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 0.15s ease;
}
.pj-grid.pj-grid--rows {
  grid-template-columns: 1fr;
}
.pj-grid--tasks {
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
}
.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 0.15s,
    box-shadow 0.15s;
  overflow: hidden;
}
/* Футер: просрочка слева, ничего больше справа */

.priority-strip {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  border-radius: inherit;
  background: var(--strip-color, var(--slate-300));
  pointer-events: none;
}

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

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

.pj-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.1);
}
.pj-code {
  display: inline-block;
  font-weight: 800;
  font-size: 14px;
  border-radius: 7px;
  padding: 3px 9px;
}
.pj-code--tinted {
  background: rgb(var(--slate-500-rgb) / 0.15);
  background: color-mix(in srgb, var(--chip-color, #64748b) 15%, transparent);
  color: var(--chip-color, #64748b);
}
.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-plan {
  background: var(--slate-50);
  border-radius: 8px;
  padding: 5px 8px;
  margin-left: auto;
  flex: 0 0 110px;
  box-sizing: border-box;
}
.pj-plan-row {
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  text-align: center;
  margin-bottom: 3px;
}
.pj-progress {
  height: 5px;
  background: var(--line);
  border-radius: 99px;
  overflow: hidden;
}

.pj-progress-fill {
  width: var(--pj-progress-fill, 0%);
  background: var(--pj-progress-color, var(--slate-400));
  height: 100%;
  border-radius: 99px;
  transition: width 0.2s ease;
}
.pj-avatars {
  display: flex;
  align-items: center; /* 1. Фиксирует вертикальное выравнивание */
  flex-wrap: nowrap;
  overflow: hidden;
  min-width: 0;
  flex: 1 1 auto;
  padding-left: 4px; /* 2. Защищает обводку первого аватара от обрезки */
}

/* 3. Стек-эффект задается оберткам (EmployeeCardLink), а не самому аватару */
.pj-avatars > * {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
  margin-left: -6px;
  width: 20px; /* Жестко фиксируем размер под .avatar.xs */
  height: 20px;
  border-radius: 50%;
  line-height: 0; /* Убираем влияние строчных элементов на высоту */
  transition:
    transform 0.15s ease,
    z-index 0.15s ease;
}

/* Заставляем картинку внутри аватарки занимать ровно 100% и не иметь отступов */
.pj-avatars > * img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}

.pj-avatars > *:first-child {
  margin-left: 0;
}

/* 4. Аватарка приподнимается при наведении, показывая скрытые детали */
.pj-avatars > *:hover {
  z-index: 10;
  transform: translateY(-2px);
}

.pj-avatars .avatar.xs {
  border: 2px solid var(--panel);
  /* margin-right: -4px; — УДАЛЕНО */
}

.pj-avatars-more {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 5px;
  box-sizing: border-box;
  border-radius: 999px;
  background: var(--slate-200);
  color: var(--slate-700);
  font-size: 10px;
  font-weight: 700;
  line-height: 1;
  border: 2px solid var(--panel);
  flex: none;
}

.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 0.15s 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: var(--slate-50);
  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 var(--slate-100);
}
.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 0.15s 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: -0.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 0.15s 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-row {
  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-row:hover {
  border-color: var(--acc2);
  background: #f0f9ff;
}
.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-avatar-container {
  position: relative;
  display: inline-flex;
}

.cab-avatar-delete-btn {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.6);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition:
    background-color 0.15s,
    transform 0.15s;
  z-index: 10;
  padding: 0;
}

.cab-avatar-delete-btn:hover {
  background: var(--red-500);
  transform: scale(1.1);
}

.cab-avatar-delete-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
}
.cab-photo-upload-wrapper {
  position: relative;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

.cab-photo-upload-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(255, 255, 255, 0.8);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  font-size: 12px;
  font-weight: 600;
  color: var(--slate-600);
  z-index: 10;
  pointer-events: none;
}

.cab-photo-upload-btn {
  z-index: 5;
  width: auto;
  white-space: nowrap;
}

.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-timesheet-task-btn {
  display: inline;
}

.cab-timesheet-project-row td {
  background: var(--slate-50);
  font-weight: 800;
  font-size: 14px;
  padding-top: 16px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--line);
}

.cab-timesheet-cell-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  min-height: 24px;
  padding: 2px 6px;
  border: none;
  border-radius: 4px;
  background: none;
  font: inherit;
  font-size: 13px;
  color: var(--txt);
  cursor: pointer;
}

.cab-timesheet-cell-btn:hover {
  background: var(--slate-100);
}

.cab-timesheet-cell-btn--filled {
  font-weight: 700;
  color: var(--acc);
}

.cab-timesheet-cell-input {
  width: 100%;
  min-width: 44px;
  height: 26px;
  padding: 0 4px;
  font-size: 13px;
  text-align: center;
}

.cab-timesheet-cell-input--error {
  border-color: var(--red-500);
  box-shadow: 0 0 0 2px var(--red-50);
}

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

/* ============================================================================
   23. Модальные окна и формы
   ============================================================================ */
.overlay {
  position: fixed;
  inset: 0;
  background: rgba(12, 21, 38, 0.7);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: calc(var(--z-overlay) + var(--overlay-depth, 0) * 2);
  padding: 20px;
}
.overlay[data-overlay-depth]:not([data-overlay-depth="0"]) {
  background: transparent;
}
.modal {
  width: var(--modal-max-w, 640px);
  max-width: calc(100vw - 40px);
  background: var(--panel);
  border-radius: 16px;
  box-shadow: 0 24px 60px rgba(2, 8, 23, 0.35);
  animation: popIn 0.2s ease;
  max-height: 92vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.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;
  display: -webkit-box;
  line-clamp: 2;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  word-break: break-word;
  overflow-wrap: anywhere;
}
.modal-title-entity {
  color: var(--acc);
}
.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-body > .tabs {
  position: sticky;
  top: 0;
  z-index: var(--z-modal-tabs);
  background: var(--panel);
  box-shadow: 0 -8px 0 0 var(--panel);
}
.modal-body > .info-box + .tabs {
  margin-top: 10px;
}
.modal-loading {
  padding: 50px;
  text-align: center;
}
.modal-foot {
  display: flex;
  gap: 10px;
  align-items: center;
  margin-top: 16px;
  padding-top: 13px;
  border-top: 1px solid var(--line);
}
.confirm-message {
  font-size: 15px;
  line-height: 1.55;
  margin-bottom: 0;
}
.confirm-message--prompt {
  margin-bottom: 14px;
}
.modal > .modal-foot {
  margin-top: 0;
  padding: 13px 20px;
  background: var(--panel);
  flex-shrink: 0;
}
.move-dialog-overlay {
  z-index: var(--z-float);
}
.move-dialog-box {
  --modal-max-w: 400px;
}
.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: var(--slate-50);
}
.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 0.3s ease;
}
.tm-logs-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}
.tm-logs {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 11px;
}
.tm-logs.tm-logs-hist {
  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: 8px 12px;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06);
}
.tm-log:hover {
  border-color: var(--acc2);
}
.tm-log--editing {
  border-color: var(--acc);
  box-shadow:
    0 0 0 2px rgba(37, 99, 235, 0.15),
    0 1px 2px rgba(15, 23, 42, 0.06);
}
.tm-log-delete {
  margin-left: 4px;
  flex: none;
}
.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-log-edited {
  font-size: 11px;
  color: var(--mut);
  font-weight: 600;
  padding: 1px 6px;
  background: var(--slate-100);
  border-radius: 4px;
  flex: none;
  cursor: help;
}
.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 0.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: 0.4px;
  font-size: 13px;
  flex-shrink: 0;
}
.field-row .inp,
.field-row .inp.sel {
  flex: 1;
  min-width: 0;
}
.field-with-after {
  display: flex;
  gap: 8px;
  align-items: center;
  width: 100%;
}
.field-with-after-input {
  flex: 1 1 auto;
  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: 0.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 0.15s,
    background-color 0.15s,
    color 0.15s;
}
.field-action:hover {
  border-color: var(--acc2);
  color: var(--acc);
  background: #f0f9ff;
}
.field-action:active {
  background: var(--sky-100);
}
.field-action:disabled {
  opacity: 0.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: var(--z-popover-modal);
  animation: popIn 0.2s ease;
}
.popover-overlay {
  position: fixed;
  z-index: var(--z-popover-overlay);
}
.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 0.15s,
    background-color 0.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 0.1s;
}

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

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

.journal-day-row > td {
  background: var(--blue-50);
}
/* Иконка пустого состояния (📋). Раньше - inline-стиль на <div>
   с fontSize, marginBottom и opacity. Вынесено в класс: размер
   иконочного эмодзи, отступ до подписи, приглушение. Цвет
   наследуется от родителя (.mut). */
.journal-empty-icon {
  font-size: 48px;
  margin-bottom: 12px;
  opacity: 0.3;
}

/* Кегль таблицы журнала. Базовый .tbl даёт 15px, для плотной ленты
   логов это крупно - 13px читается компактнее. */
.journal-table {
  font-size: 13px;
}

/* Строка-заголовок месяца. Градиент от фонового цвета к прозрачному;
   цвет берётся из переменной, поэтому в тёмной теме правило работает
   без отдельного переопределения [data-theme="dark"]. */
.journal-month-row {
  background: linear-gradient(90deg, var(--slate-50), transparent);
}

/* Ячейка деталей. max-width - чтобы длинные JSON-объекты в details
   не растягивали колонку и переносились. */
.journal-details-cell {
  max-width: 400px;
}

/* Кнопки пагинации в подвале журнала (← и →). Квадрат 36×36 с
   центрированным символом. Селектор из трёх классов перебивает
   .btn.sm (height: 30px, padding: 0 12px) по специфичности, поэтому
   от .sm отказываемся в разметке. */
.btn.ghost.journal-pager-btn {
  min-width: 36px;
  height: 36px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

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

[data-theme="dark"] .journal-row:hover,
[data-theme="dark"] .journal-row--alt:hover {
  background: rgba(255, 255, 255, 0.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;
  flex-direction: column;
  gap: 8px;
  padding: 8px 0 12px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 12px;
}
.discussion-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.pinned-messages {
  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 0.15s,
    border-color 0.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;
  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: var(--z-popover-local);
  animation: slideInLeft 0.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, 0.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 textarea {
  resize: none;
  overflow-y: auto;
  max-height: 200px;
  height: var(--textarea-h, auto);
}
.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;
  left: var(--popup-x, 0);
  top: var(--popup-y, 0);
  z-index: var(--z-float-top);
  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: var(--z-sticky);
  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, 0.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: var(--z-float);
  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: var(--z-float-top);
  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: var(--z-float-top);
}
.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: var(--z-float-top);
  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: var(--z-float-top);
}
.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);
}
.attachment-file-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border-radius: 6px;
  background: var(--slate-100);
  color: var(--txt);
  text-decoration: none;
  max-width: 200px;
  align-self: flex-start;
}
.attachment-file-link:hover {
  background: var(--slate-200);
}
.attachment-file-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.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 0.15s ease,
    text-decoration-color 0.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 0.9s ease-out;
}

/* ============================================================================
   28. Реакции
   ============================================================================ */

/*
 * Подвал карточки комментария: слева действия («Ответить», «Закрепить», …),
 * справа - реакции и триггер. Отдельный flex-контейнер нужен потому, что
 * .cm-actions и .cm-reactions были двумя отдельными строками с margin-top:
 * их нельзя было прижать к одному ряду и развести по краям (слева / справа)
 * без общего родителя.
 *
 * min-height: 24px - резервирует высоту под триггер, который по умолчанию
 * невидим (opacity: 0). Без него карточка «дёргается» на 3–4px при
 * наведении, потому что появляющийся триггер увеличивает высоту строки.
 */
.cm-foot-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 5px;
  min-height: 24px;
  flex-wrap: wrap;
}

.cm-foot-row .cm-actions {
  margin-top: 0;
}

.cm-reactions-bar {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-left: auto;
  position: relative;
}

.cm-reactions-bar .cm-reactions {
  margin-top: 0;
}

.cm-reaction-trigger {
  border: 1px solid var(--line);
  background: var(--panel);
  border-radius: 999px;
  padding: 2px 10px;
  font-family: inherit;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.4;
  color: var(--mut);
  cursor: pointer;
  opacity: 0;
  transition:
    opacity 0.12s ease,
    border-color 0.12s,
    color 0.12s,
    background-color 0.12s;
}

.cm:hover .cm-reaction-trigger,
.cm-reaction-trigger:focus-visible {
  opacity: 1;
}

.cm-reaction-trigger:hover {
  border-color: var(--acc2);
  color: var(--acc);
  background: var(--sky-100);
}

.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 0.12s,
    border-color 0.12s,
    color 0.12s;
}
.reaction-chip:hover {
  background: rgba(0, 0, 0, 0.04);
}
.reaction-chip.on {
  border-color: var(--acc);
  background: rgba(37, 99, 235, 0.12);
  color: var(--acc);
}
.reaction-chip:disabled {
  opacity: 0.6;
  cursor: default;
}

/* Fallback для эмодзи, которых нет в REACTIONS (старые реакции из
   mock-данных): unifiedOf возвращает null, CommentReactions рисует
   символ текстом. Размер выровнен под <Emoji size={14}>. */
.reaction-emoji {
  font-size: 14px;
}

/* Счётчик проголосовавших. tabular-nums - чтобы цифры 1 и 10
   занимали одинаковую ширину и чипы не «прыгали» при добавлении
   голоса. */
.reaction-count {
  font-size: 12px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.reaction-picker {
  position: absolute;
  bottom: calc(100% + 6px);
  right: 0;
  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, 0.12);
  z-index: var(--z-popover-local);
  cursor: default;
  animation: reaction-pop 0.12s ease-out;
}

.reaction-pick-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: transparent;
  line-height: 1;
  padding: 4px 6px;
  border-radius: 8px;
  cursor: pointer;
  transition:
    transform 0.12s,
    background-color 0.12s;
}
.reaction-pick-btn:hover {
  transform: scale(1.2);
  background: rgba(0, 0, 0, 0.05);
}
.reaction-pick-btn.on {
  background: rgba(37, 99, 235, 0.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: 24px;
}
.template-tree-node[data-depth="2"] {
  padding-left: 48px;
}
.template-tree-node[data-depth="3"] {
  padding-left: 72px;
}
.template-tree-node[data-depth="4"] {
  padding-left: 96px;
}
.template-tree-node[data-depth="5"] {
  padding-left: 120px;
}
.template-tree-node[data-depth="6"] {
  padding-left: 144px;
}
.template-tree-node[data-depth="7"] {
  padding-left: 168px;
}
.template-tree-node[data-depth="8"] {
  padding-left: 192px;
}
.template-tree-node[data-depth="9"] {
  padding-left: 216px;
}

.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: 0.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 0.15s,
    background-color 0.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, 0.15);
  z-index: var(--z-float);
  overflow: hidden;
  padding: 4px 0;
  animation: popIn 0.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 0.1s,
    color 0.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 0.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: var(--slate-50);
}

.access-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  border-radius: 8px;
  cursor: pointer;
  font-size: 14px;
  transition: background-color 0.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;
  left: var(--fm-left, 0);
  top: var(--fm-top, 0);
  z-index: var(--z-float);
  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, 0.15);
  animation: popIn 0.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 0.1s,
    color 0.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: 0.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: 0.4px;
  color: var(--mut);
}

/* ============================================================================
   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: -0.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 0.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: var(--slate-50);
}

.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: 0.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: var(--z-toast);
  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, 0.15);
  color: var(--on-accent);
  font-size: 14px;
  font-weight: 500;
  animation: fadeUp 0.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: 0.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 0.12s,
    color 0.12s,
    border-color 0.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, 0.4), 0 4px 16px rgba(0, 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;

  --gantt-closed: #3b82f6;
  --gantt-cancelled: #94a3b8;
}

[data-theme="dark"] .btn.primary {
  background: linear-gradient(135deg, #3b82f6, #1d4ed8);
  box-shadow: 0 4px 12px rgba(37, 99, 235, 0.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, 0.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"] .gbar.gbar--closed {
  border-color: #3b82f6;
}

[data-theme="dark"] .gbar.gbar--cancelled {
  border-color: #94a3b8;
}

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

[data-theme="dark"] .cab-row: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, 0.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, 0.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, 0.14);
}
[data-theme="dark"] .gcell.shortday {
  background: rgba(245, 158, 11, 0.14);
}
[data-theme="dark"] .legend-swatch--holiday {
  background: rgba(239, 68, 68, 0.35);
}
[data-theme="dark"] .legend-swatch--shortday {
  background: rgba(245, 158, 11, 0.35);
}
[data-theme="dark"] .gantt-arrow,
[data-theme="dark"] .gantt-arrow-head {
  stroke: var(--slate-500);
  fill: var(--slate-500);
}
[data-theme="dark"] .gantt-arrow--overdue,
[data-theme="dark"] .gantt-arrow--overdue + .gantt-arrow-head {
  stroke: var(--red-500);
  fill: var(--red-500);
}
[data-theme="dark"] .legend-swatch--arrow {
  background: var(--slate-500);
}
[data-theme="dark"] .gantt-panel.fullscreen {
  background: var(--bg);
}

[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, 0.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, 0.55);
}
[data-theme="dark"] .notif-pop {
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.6);
}
[data-theme="dark"] .modal {
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.6);
}
[data-theme="dark"] .chat-search-inline .search-box {
  box-shadow: 0 2px 8px rgba(0, 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);
}
[data-theme="dark"] .cab-photo-upload-overlay {
  background: rgba(21, 31, 51, 0.8);
  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);
}

/* ============================================================================
   45. Модальность ввода и :focus-visible

   Спецификация :focus-visible: кольцо показывается, когда последнее
   взаимодействие пользователя было с клавиатурой. Браузеры включают
   режим на любом keydown - в том числе Escape и функциональных
   клавишах, - из-за чего после клика мышью, открытия модалки и
   закрытия по Esc на карточке остаётся кольцо. useInputModality
   отслеживает реальную модальность, CSS снимает ложное кольцо.

   Дефолт [role="button"]:focus-visible в разделе 6 остаётся как есть:
   он нужен на первый кадр, до установки data-input. Это правило
   перебивает его по специфичности (0,3,0 против 0,2,0).
   ============================================================================ */

:root[data-input="pointer"] :focus-visible {
  outline: none;
}

/* ============================================================================
   46. Справка

   Модалка справки - единственная, у которой внутри две независимо
   скроллящиеся области. Базовая .modal - flex-колонка
   (см. раздел 23), .modal-body по умолчанию скроллится сам.
   Здесь .modal-body переопределяется на «не скроллить и растянуть
   ребёнка», а скролл переезжает в две колонки внутри.

   Ключевое, без чего не работает:
     • .modal-help .modal-body - display: flex; flex-direction: column;
       min-height: 0; overflow: hidden. Без min-height: 0 flex-child
       не сжимается ниже своего содержимого, и overflow-y: auto
       внутри колонок молчит.
     • .help-layout - flex: 1 1 auto; min-height: 0 (а не height: 100%,
       который не к чему привязать у flex-child).
     • .help-nav и .help-content - каждая со своим min-height: 0,
       overflow-y: auto и overscroll-behavior: contain, чтобы прокрутка
       не «перетекала» на родителя.
   ============================================================================ */

.modal-help .modal-body {
  display: flex;
  flex-direction: column;
  padding: 0;
  min-height: 0;
  overflow: hidden;
}

.help-layout {
  display: grid;
  grid-template-columns: 220px 1fr;
  flex: 1 1 auto;
  min-height: 0;
  width: 100%;
}

.help-nav {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 14px 10px;
  border-right: 1px solid var(--line);
  background: var(--slate-50);

  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.help-nav-item {
  display: block;
  width: 100%;
  text-align: left;
  padding: 8px 12px;
  border-radius: 8px;
  border: none;
  background: transparent;
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  color: var(--txt);
  cursor: pointer;
  transition:
    background-color 0.12s,
    color 0.12s;
  flex: none;
}

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

.help-nav-item.on {
  background: var(--panel);
  color: var(--acc);
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.08);
}

.help-content {
  padding: 20px 28px;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--txt);
}

.help-content h3 {
  font-size: 19px;
  font-weight: 800;
  margin-bottom: 12px;
  letter-spacing: -0.2px;
}

.help-content h3:first-child {
  margin-top: 0;
}

.help-content h4 {
  font-size: 15px;
  font-weight: 800;
  margin-top: 18px;
  margin-bottom: 8px;
  color: var(--txt);
}

.help-content p {
  margin-bottom: 10px;
}

.help-content ul,
.help-content ol {
  padding-left: 20px;
  margin-bottom: 12px;
}

.help-content li {
  margin-bottom: 6px;
}

.help-content b {
  font-weight: 700;
}

.help-content code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12.5px;
  padding: 1px 5px;
  border-radius: 4px;
  background: var(--slate-100);
  color: var(--slate-700);
}

[data-theme="dark"] .help-nav {
  background: var(--slate-50);
}

[data-theme="dark"] .help-nav-item.on {
  background: var(--panel);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
}

[data-theme="dark"] .help-content code {
  background: var(--slate-100);
  color: var(--slate-700);
}

/* ============================================================================
   47. Похвала при выполнении дневной нормы

   Отдельная секция для модалки DailyNormPraiseModal. Анимация звезды -
   только CSS keyframes; никаких inline-стилей и JS-анимаций.
   ------------------------------------------------------------------------- */

@keyframes dailyPraiseStarPop {
  0% {
    opacity: 0;
    transform: scale(0.3) rotate(-35deg);
  }
  55% {
    opacity: 1;
    transform: scale(1.15) rotate(8deg);
  }
  75% {
    transform: scale(0.96) rotate(-3deg);
  }
  100% {
    opacity: 1;
    transform: scale(1) rotate(0);
  }
}

@keyframes dailyPraiseStarGlow {
  0%,
  100% {
    opacity: 0.45;
    transform: scale(0.9);
  }
  50% {
    opacity: 0.95;
    transform: scale(1.08);
  }
}

.daily-praise {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  padding: 6px 0 4px;
  text-align: center;
}

.daily-praise-star {
  position: relative;
  width: 112px;
  height: 112px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.daily-praise-star::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: radial-gradient(
    circle,
    rgba(245, 158, 11, 0.38) 0%,
    rgba(245, 158, 11, 0.12) 42%,
    transparent 70%
  );
  animation: dailyPraiseStarGlow 1.6s ease-in-out infinite;
}

.daily-praise-star__glyph {
  position: relative;
  z-index: var(--z-raised);
  display: block;
  font-size: 78px;
  line-height: 1;
  color: #f59e0b;
  filter: drop-shadow(0 8px 16px rgba(245, 158, 11, 0.38));
  transform-origin: center;
  animation: dailyPraiseStarPop 0.9s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.daily-praise-text {
  max-width: 320px;
  font-size: 16px;
  line-height: 1.55;
  color: var(--txt);
}

.modal-daily-praise .modal-body {
  padding-top: 20px;
  padding-bottom: 18px;
}

.modal-daily-praise .modal-head h3 {
  color: var(--txt);
}

/* ============================================================================
   48. Напоминания о часах: секции и сверхурочные
   ============================================================================ */

.wr-section + .wr-section {
  border-top: 1px solid var(--line);
  margin-top: 14px;
  padding-top: 14px;
}

.wr-section-title {
  font-size: 13px;
  font-weight: 800;
  color: var(--txt);
  margin-bottom: 8px;
  text-transform: uppercase;
  letter-spacing: 0.4px;
}

.st-chip.overwork {
  background: var(--amber-50);
  color: var(--amber-700);
}

.wr-deviation--over {
  color: var(--red-600);
}

/* ============================================================================
   49. Скелетон загрузки (Loading Gate) и баннер предупреждения о пароле
   ============================================================================ */

.skeleton-shell {
  display: flex;
  height: 100vh;
  background-color: var(--bg);
}

.skeleton-sidebar {
  width: 256px; /* Ширина совпадает с .sidebar */
  background: linear-gradient(180deg, var(--side) 0%, #0e1b30 100%);
  border-right: 1px solid var(--line);
}

.skeleton-main {
  flex: 1;
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.skeleton-title {
  height: 40px;
  width: 200px;
  background-color: var(--slate-200);
  border-radius: 8px;
  animation: skeleton-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

.skeleton-box {
  height: 200px;
  width: 100%;
  background-color: var(--slate-200);
  border-radius: 12px;
  animation: skeleton-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

/* Анимация пульсации (как в современных UI-китах) */
@keyframes skeleton-pulse {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.5;
  }
}

.password-warning-banner {
  background-color: var(--amber-50);
  color: var(--amber-700);
  padding: 12px 24px;
  border-radius: 8px;
  margin-bottom: 16px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border: 1px solid var(--amber-200);
}

.password-warning-banner .btn.ghost {
  border: 1px solid var(--amber-500);
  color: var(--amber-700);
  background: transparent;
}

.password-warning-banner .btn.ghost:hover {
  background-color: var(--amber-200);
}

[data-theme="dark"] .skeleton-title,
[data-theme="dark"] .skeleton-box {
  background-color: var(--slate-700);
}