/* Onest — гротеск того же класса, что в интерфейсах Яндекса, но рисованный
   от кириллицы. Взял его вместо Inter намеренно: Inter стоит сегодня в
   каждом втором интерфейсе и читается как шрифт по умолчанию.
   Лежит в образе рядом с сайтом, внешних загрузок нет. */
@font-face {
  font-family: "Onest"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("/fonts/onest-cyrillic-400-normal.woff2") format("woff2");
  unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;
}
@font-face {
  font-family: "Onest"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("/fonts/onest-latin-400-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Onest"; font-style: normal; font-weight: 500; font-display: swap;
  src: url("/fonts/onest-cyrillic-500-normal.woff2") format("woff2");
  unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;
}
@font-face {
  font-family: "Onest"; font-style: normal; font-weight: 500; font-display: swap;
  src: url("/fonts/onest-latin-500-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Onest"; font-style: normal; font-weight: 600; font-display: swap;
  src: url("/fonts/onest-cyrillic-600-normal.woff2") format("woff2");
  unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;
}
@font-face {
  font-family: "Onest"; font-style: normal; font-weight: 600; font-display: swap;
  src: url("/fonts/onest-latin-600-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Onest"; font-style: normal; font-weight: 700; font-display: swap;
  src: url("/fonts/onest-cyrillic-700-normal.woff2") format("woff2");
  unicode-range: U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;
}
@font-face {
  font-family: "Onest"; font-style: normal; font-weight: 700; font-display: swap;
  src: url("/fonts/onest-latin-700-normal.woff2") format("woff2");
}

:root {
  /* Фон — светлая бумага с холодноватым зелёным подтоном: он взят из
     акцента, а не из дежурного «тёплого бежевого». */
  --bg-page: #e8ebe5;
  --bg-card: #fbfcfa;
  --bg-subtle: #f0f2ee;
  --border: #dfe3dc;
  --border-strong: #c8cec5;
  --text-primary: #1d221f;
  --text-secondary: #53574f;
  --text-muted: #656a61;
  --accent: #2f6b4f;
  --accent-strong: #245640;
  --accent-bg: #e8f1ec;
  /* Акцент поверх подложки: сам --accent даёт на ней лишь 4.2:1. */
  --accent-on-tint: #1d4a36;
  --success: #147a58;
  --success-bg: #e4f5ee;
  --warning: #8a5c07;
  /* Тёмная боковая панель — отдельная группа токенов. */
  --rail-bg: #232a28;
  --rail-text: #c9c6bd;
  --rail-text-strong: #fbfaf7;
  --rail-text-muted: #8f8d85;
  --rail-accent: #7fc0a1;
  --radius: 12px;
  --radius-sm: 8px;
  --danger: #a63a2a;
  --danger-bg: #f8eae7;
  /* Шкала шрифта: пять ступеней с явной разницей, без 11.5 / 12.5 / 13.5. */
  --fs-meta: 12px;
  --fs-body: 14px;
  --fs-lead: 16px;
  --fs-title: 20px;
  --fs-display: 26px;
  /* Тени со смещением и умеренным размытием — ближний свет, а не ореол. */
  --shadow-card: 0 1px 2px rgba(29,35,33,.05), 0 6px 14px -8px rgba(29,35,33,.16);
  --shadow-raise: 0 2px 4px rgba(29,35,33,.07), 0 10px 18px -10px rgba(29,35,33,.2);
  --shadow-pop: 0 6px 10px -6px rgba(29,35,33,.20), 0 14px 18px -14px rgba(29,35,33,.3);
}

/* Бейджи стадий проекта (экспертизы/НИ) */
.stage-badge {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px; border-radius: 999px; font-size: 12px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .03em;
}
.stage-badge::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.stage-plan { background: #fdf3d9; color: #8a6d0a; }
.stage-active { background: #dceaf8; color: #1a5488; }
.stage-control { background: #f6ddb8; color: #8a5320; }
.stage-done { background: #dcf3e3; color: #1e6b3f; }
.stage-cancelled { background: #f7dcda; color: #a3241c; }

/* ---------- Стадия как кнопка ----------
   Бейдж показывает, где проект сейчас; щелчок открывает список — куда
   перевести. Раньше рядом стояли выпадающий список и кнопка
   «Переместить», и список показывал не текущую стадию, а первую из
   оставшихся: в разделе «Планы» во всех строках было написано
   «Активный». Один предмет вместо двух противоречащих. */
.stage-pick { position: relative; display: inline-flex; }
.stage-badge-btn {
  border: 1px solid transparent; cursor: pointer; font-family: inherit;
  font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em;
  gap: 6px; padding: 4px 8px 4px 10px;
  transition: border-color .15s, box-shadow .15s;
}
/* Обводка появляется при наведении: до наведения бейдж выглядит как
   обычная подпись, и лишнего шума в строке нет. */
.stage-badge-btn:hover { border-color: currentColor; }
.stage-badge-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.stage-chevron {
  width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 2.4;
  stroke-linecap: round; stroke-linejoin: round; opacity: .75;
}
.stage-badge-btn[aria-expanded="true"] .stage-chevron { transform: rotate(180deg); }

.stage-menu {
  position: absolute; top: calc(100% + 6px); left: 0; z-index: 60;
  display: flex; flex-direction: column; gap: 2px; min-width: 190px; padding: 6px;
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: var(--radius-sm); box-shadow: 0 10px 30px rgba(20, 30, 25, .16);
}
/* Отмена стоит в том же меню, но отделена: это не следующая стадия,
   а выход из работы над проектом. */
.stage-menu-sep { height: 1px; background: var(--border); margin: 4px 6px; }
.stage-menu-cancel { color: var(--danger, #b3261e); }
.stage-dot.stage-cancelled { background: var(--danger, #b3261e); }

.stage-menu-head {
  padding: 4px 8px 6px; font-size: 11px; font-weight: 600; letter-spacing: .04em;
  text-transform: uppercase; color: var(--text-muted);
}
.stage-menu button {
  display: flex; align-items: center; gap: 9px; width: 100%; padding: 7px 9px;
  border: 0; border-radius: var(--radius-sm); background: transparent;
  font-family: inherit; font-size: 14px; font-weight: 500; color: var(--text-primary);
  text-align: left; cursor: pointer; text-transform: none; letter-spacing: 0;
}
.stage-menu button:hover { background: var(--bg-subtle); }
/* Цветная точка повторяет цвет бейджа целевой стадии — так выбор
   узнаётся глазами, без чтения. */
.stage-dot { width: 8px; height: 8px; border-radius: 50%; flex: none; background: currentColor; }
.stage-dot.stage-plan { background: #c4a13a; }
.stage-dot.stage-active { background: #1a5488; }
.stage-dot.stage-control { background: #b8792f; }
.stage-dot.stage-done { background: #1e6b3f; }

/* В списке дел бейдж чуть мельче: строк много, и высота ряда важнее. */
.reg-actions .stage-badge-btn { padding: 3px 7px 3px 9px; font-size: 11.5px; }
/* Меню у правого края таблицы — прижимаем к правой стороне бейджа,
   иначе оно уезжает за границу окна. */
.reg-actions .stage-menu { left: auto; right: 0; }

/* Баннер проекта — появляется в шапке открытой папки "Дела", если эта
   папка является отслеживаемым проектом (экспертизой/НИ). */
/* Одна полоса вместо трёх панелей: где проект, что горит и куда идти за
   подробностями. Раньше здесь стояли пять кнопок одного веса, список
   задач и ассистент, и до файлов человек доезжал на пятой сотне
   пикселей — а открывал он всё-таки папку. */
.case-banner {
  margin-top: 10px; padding: 9px 14px; background: var(--accent-bg);
  border-radius: var(--radius-sm); display: flex; align-items: center;
  gap: 12px; flex-wrap: wrap;
}
.case-strip-status { font-size: var(--fs-body); color: var(--accent-on-tint); }
.case-banner .chip-overdue {
  font-size: var(--fs-meta); padding: 3px 11px; border-radius: 999px;
  background: var(--danger-bg); color: var(--danger); font-weight: 500;
}
.case-banner .kad-link { background: var(--bg-card); }
.case-strip-right { margin-left: auto; display: flex; align-items: center; gap: 8px; }

.case-strip-card {
  display: inline-flex; align-items: center; gap: 7px;
  height: 32px; padding: 0 13px; border-radius: var(--radius-sm);
  border: 1px solid var(--accent); background: var(--bg-card);
  color: var(--accent-on-tint); font: 600 13px/1 inherit; font-family: inherit; cursor: pointer;
}
.case-strip-card:hover { background: var(--accent); color: #fff; border-color: var(--accent); }
.case-strip-card svg { width: 15px; height: 15px; fill: none; stroke: currentColor;
                       stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* Редкие и тяжёлые действия — под «ещё»: перенос стадии двигает папку на
   диске, а отмена необратима, и обеим не место рядом с файлами. */
.case-strip-more { position: relative; }
.case-strip-more > button {
  width: 32px; height: 32px; border-radius: var(--radius-sm);
  border: 1px solid var(--border-strong); background: var(--bg-card);
  display: flex; align-items: center; justify-content: center; cursor: pointer;
}
.case-strip-more > button:hover { border-color: var(--accent); }
.case-strip-more > button svg { width: 18px; height: 18px; fill: var(--text-secondary); stroke: none; }

.case-strip-menu {
  position: absolute; right: 0; top: calc(100% + 6px); z-index: 40;
  min-width: 232px; padding: 6px; border-radius: var(--radius);
  border: 1px solid var(--border); background: var(--bg-card);
  box-shadow: var(--shadow-pop); display: flex; flex-direction: column; gap: 2px;
}
.case-strip-menu button {
  width: 100%; text-align: left; border: none; background: transparent;
  padding: 8px 10px; border-radius: 6px; font: 400 14px/1.3 inherit; font-family: inherit;
  color: var(--text-primary); cursor: pointer;
}
.case-strip-menu button:hover { background: var(--bg-subtle); }
.case-strip-menu button.danger { color: var(--danger); }
.case-strip-menu button.danger:hover { background: var(--danger-bg); }

/* Чат-ассистент внутри карточки проекта */
.case-chat-box {
  margin-top: 10px; border: 1px solid var(--border); border-radius: 10px;
  background: var(--bg-card); overflow: hidden;
}
.case-chat-header {
  display: flex; justify-content: space-between; align-items: center;
  padding: 10px 14px; cursor: pointer; font-size: 14px; font-weight: 600;
  user-select: none;
}
.case-chat-header:hover { background: var(--bg-page); }
/* Кнопка внутри заголовка прижата вправо, к стрелке сворачивания:
   заголовок раскладывается «название — кнопка — стрелка». */
#caseNewTaskBtn { margin-left: auto; margin-right: 12px; }
.case-chat-messages {
  max-height: 320px; overflow-y: auto; padding: 12px 14px;
  display: flex; flex-direction: column; gap: 10px;
  border-top: 1px solid var(--border);
}
.case-chat-msg {
  max-width: 85%; padding: 8px 12px; border-radius: 10px; font-size: 14px;
  line-height: 1.45; white-space: pre-wrap; word-break: break-word;
}
.case-chat-msg.user { align-self: flex-end; background: var(--accent); color: #fff; }
.case-chat-msg.assistant { align-self: flex-start; background: var(--bg-page); color: var(--text-primary); }
.case-chat-msg.pending { opacity: .6; }
.case-chat-form {
  display: flex; gap: 8px; padding: 10px 14px; border-top: 1px solid var(--border);
}
.case-chat-form input {
  flex: 1; padding: 8px 12px; border-radius: 8px; border: 1px solid var(--border); font-size: 14px;
}

/* Строка задачи в разделе "Задачи Planfix" */
.pf-task-row { display: flex; flex-direction: column; gap: 6px; padding: 8px 10px; background: var(--bg-page); border-radius: 8px; }
.pf-task-row label.pf-task-title { display: flex; align-items: center; gap: 8px; font-size: 14px; cursor: pointer; }
.pf-task-details { display: flex; gap: 8px; padding-left: 24px; }
.pf-task-details select, .pf-task-details input { flex: 1; padding: 6px 8px; border-radius: 6px; border: 1px solid var(--border); font-size: 12px; }
.pf-task-details.hidden { display: none; }

/* Контекстное меню (правый клик по файлу/папке) */
.context-menu {
  position: fixed; z-index: 1000; background: var(--bg-card);
  border-radius: 8px;
  box-shadow: var(--shadow-pop); padding: 6px; min-width: 180px;
  display: flex; flex-direction: column;
}
.context-menu button {
  background: none; border: none; text-align: left; padding: 8px 12px;
  font-size: 14px; border-radius: 6px; cursor: pointer; color: var(--text-primary);
}
.context-menu button:hover { background: var(--bg-page); }
.context-menu button.danger-item { color: var(--danger); }

/* Список папок в окне "Куда переместить" */
.move-folder-row {
  display: flex; align-items: center; gap: 10px; padding: 10px 12px;
  font-size: 14px; cursor: pointer; border-bottom: 1px solid var(--border);
}
.move-folder-row .icon {
  width: 20px; height: 20px; flex: 0 0 20px;
  fill: none; stroke: var(--text-secondary); stroke-width: 1.6;
}
.move-folder-row span:not(.icon) { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.move-folder-row:last-child { border-bottom: none; }
.move-folder-row:hover { background: var(--bg-page); }
.move-folder-row.disabled { color: var(--text-muted); cursor: not-allowed; opacity: .55; }
.move-folder-row.disabled:hover { background: none; }

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: "Onest", -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  background: var(--bg-page);
  color: var(--text-primary);
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  font-size: 14px;
  line-height: 1.45;
}

/* Цифры в списках и прогрессе не должны «плясать» по ширине. */
.size, .upload-item-status, .side-disk-top, .col-count { font-variant-numeric: tabular-nums; }

.hidden { display: none !important; }

/* Login screen */
.login-screen {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}

.login-panel {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 28px 24px;
  width: 100%;
  max-width: 320px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.login-panel h1 { margin: 0 0 4px; font-size: 20px; font-weight: 600; }

.login-panel label {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 14px;
  color: var(--text-secondary);
}

.login-panel input {
  height: 38px;
  border-radius: 8px;
  border: 1px solid var(--border-strong);
  padding: 0 10px;
  font-size: 14px;
}

.login-panel input:focus { outline: none; border-color: var(--accent); }

button.primary {
  height: 40px;
  border: none;
  border-radius: 8px;
  background: var(--accent);
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  margin-top: 6px;
}

button.primary:hover { background: #2569c9; }

.error-text { color: var(--danger); font-size: 14px; margin: 0; min-height: 16px; }

/* ---------- Окно «Добавить эксперта» ----------
   Подписи под полями объясняют не «что ввести», а что из этого выйдет:
   куда ляжет файл и как он попадёт в гарантийное письмо. Именно этого
   раньше нельзя было узнать иначе как на своём опыте. */
.field-hint {
  display: block; margin-top: 4px;
  font-size: var(--fs-meta); font-weight: 400; color: var(--text-muted); line-height: 1.4;
}
.field-label { display: block; font-size: 14px; font-weight: 600; margin-bottom: 6px; }
.expert-source {
  border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 10px 12px;
}
/* Селектор с .modal-panel form — иначе общее правило форм
   (.modal-panel form label { flex-direction: column }) окажется
   специфичнее и поставит кружок над подписью. Тот же приём, что
   у .picker-item ниже. */
.radio-row,
.modal-panel form label.radio-row {
  display: flex; flex-direction: row; align-items: center; gap: 9px; padding: 5px 0;
  font-size: var(--fs-body); font-weight: 400; color: var(--text-primary); cursor: pointer;
}
.radio-row input { width: 16px; height: 16px; margin: 0; accent-color: var(--accent); }
/* Кнопка «Завести эксперта» — последняя в прокручиваемой форме:
   без отступа она упиралась в край окна и выглядела обрезанной. */
#expertForm .modal-actions { padding-bottom: 4px; }
#expertForm textarea {
  width: 100%; font-family: inherit; font-size: 14px; line-height: 1.5;
  padding: 9px 11px; border: 1px solid var(--border-strong); border-radius: var(--radius-sm);
  background: var(--bg-card); color: var(--text-primary); resize: vertical;
}
#expertForm input[type="file"] { font-size: 13px; padding: 6px 0; }

/* Зоны прикрепления файлов в форме создания проекта */
.pf-attach-zone { margin-top: 8px; padding: 10px; border: 1px dashed var(--border); border-radius: 8px; }
.pf-attach-zone-header { display: flex; justify-content: space-between; align-items: center; font-size: 14px; font-weight: 600; }
.pf-attach-file-list { display: flex; flex-direction: column; gap: 4px; margin-top: 8px; }
.pf-attach-file-row { display: flex; align-items: center; gap: 10px; font-size: 12px; padding: 5px 8px; background: var(--bg-page); border-radius: 6px; }
.pf-attach-file-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pf-attach-file-size { color: var(--text-muted); flex-shrink: 0; font-variant-numeric: tabular-nums; }

/* Зона прикрепления принимает и перетаскивание — подсвечиваем цель. */
.pf-attach-zone { transition: border-color .15s ease, background .15s ease; }
.pf-attach-zone.drag-over { border-color: var(--accent); border-style: solid; background: var(--accent-bg); }

.pf-attach-hint {
  font-size: 12px; color: var(--text-muted);
  text-align: center; padding: 10px 8px 4px;
}
.pf-attach-zone.drag-over .pf-attach-hint { color: var(--accent-on-tint); }

.pf-attach-count {
  display: inline-block; margin-left: 8px;
  font-size: 12px; font-weight: 700;
  background: var(--accent-bg); color: var(--accent-strong);
  border-radius: 999px; padding: 1px 7px;
}
.pf-attach-file-row button { border: none; background: none; color: var(--danger); cursor: pointer; font-size: 14px; }

/* App shell */
/* Раньше карточки прижимались к верху и под ними оставалось пустое поле
   в пол-экрана. Теперь оболочка занимает всю высоту, а прокручивается
   содержимое колонок и списка файлов. */
.app-screen { display: flex; gap: 14px; padding: 14px; align-items: stretch; height: 100vh; }

.sidebar {
  flex: 0 0 232px;
  display: flex;
  flex-direction: column;
  gap: 3px;
  /* Навигация — тихий тёмный фон, работа идёт на светлом. */
  background: var(--rail-bg);
  border: 1px solid var(--rail-bg);
  border-radius: var(--radius);
  padding: 12px 10px;
}

.side-profile {
  display: flex; align-items: center; gap: 10px;
  width: 100%; padding: 8px; margin-bottom: 4px;
  border: none; background: transparent; border-radius: var(--radius-sm);
  cursor: pointer; text-align: left;
  transition: background .12s ease;
}
.side-profile:hover { background: rgba(255,255,255,.07); }

.side-avatar {
  width: 34px; height: 34px; flex: 0 0 34px;
  border-radius: 50%;
  background: var(--accent); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 700; letter-spacing: .02em;
}
.side-profile-text { display: flex; flex-direction: column; min-width: 0; }
.side-profile-name { font-size: 14px; font-weight: 600; color: var(--rail-text-strong); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.side-profile-role { font-size: 12px; color: var(--rail-text-muted); }

.side-item {
  display: flex; align-items: center; gap: 11px;
  width: 100%; min-height: 38px; padding: 0 10px;
  border: none; background: transparent;
  border-radius: var(--radius-sm);
  font-size: 14px; font-weight: 500; color: var(--rail-text);
  cursor: pointer; text-align: left;
  /* Ссылка тоже бывает пунктом панели (Яндекс Диск) — она не должна
     отличаться от соседей подчёркиванием и чужим шрифтом. */
  font-family: inherit; text-decoration: none;
  transition: background .12s ease, color .12s ease;
}
/* Стрелка «наружу» у пунктов, ведущих на другой сайт: тише текста,
   на своё место в конце строки, и не растягивается. */
.side-item .side-out {
  width: 13px; height: 13px; flex: 0 0 13px;
  opacity: .55; stroke-width: 2;
}
.side-item svg { width: 18px; height: 18px; flex: 0 0 18px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.side-item span:not(.side-badge) { flex: 1; }
.side-item:hover { background: rgba(255,255,255,.07); color: var(--rail-text-strong); }
.side-item.active { background: rgba(255,255,255,.1); color: var(--rail-text-strong); font-weight: 600; }
.side-item.active svg { stroke: var(--rail-accent); }

/* Кнопка «Создать» в панели — главное действие, поэтому она одна
   здесь заметная и стоит выше всех разделов. */
.side-create-wrap { position: relative; margin-bottom: 10px; }
.side-create {
  display: flex; align-items: center; justify-content: center; gap: 9px;
  width: 100%; min-height: 42px; padding: 0 12px;
  border: none; border-radius: var(--radius-sm);
  background: var(--rail-accent); color: #10201a;
  font-family: inherit; font-size: 14.5px; font-weight: 600;
  cursor: pointer;
  transition: filter .12s ease, transform .1s ease;
}
.side-create:hover { filter: brightness(1.08); }
.side-create:active { transform: scale(.985); }
.side-create svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; }
.side-create-wrap .create-menu { right: auto; left: 0; min-width: 246px; }
.create-menu-where {
  padding: 4px 10px 6px; font-size: 12px; color: var(--text-muted);
  border-bottom: 1px solid var(--border); margin-bottom: 4px;
}

/* Разделители между смысловыми группами пунктов панели. */
.side-sep { height: 1px; background: rgba(255,255,255,.12); margin: 8px 10px; }

.side-badge {
  font-size: 12px; font-weight: 700;
  background: rgba(255,255,255,.14); color: var(--rail-text-strong);
  border-radius: 999px; padding: 1px 7px;
}
.side-item.active /* Кнопка «Создать» в панели — главное действие, поэтому она одна
   здесь заметная и стоит выше всех разделов. */
.side-create-wrap { position: relative; margin-bottom: 10px; }
.side-create {
  display: flex; align-items: center; justify-content: center; gap: 9px;
  width: 100%; min-height: 42px; padding: 0 12px;
  border: none; border-radius: var(--radius-sm);
  background: var(--rail-accent); color: #10201a;
  font-family: inherit; font-size: 14.5px; font-weight: 600;
  cursor: pointer;
  transition: filter .12s ease, transform .1s ease;
}
.side-create:hover { filter: brightness(1.08); }
.side-create:active { transform: scale(.985); }
.side-create svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; }
.side-create-wrap .create-menu { right: auto; left: 0; min-width: 246px; }
.create-menu-where {
  padding: 4px 10px 6px; font-size: 12px; color: var(--text-muted);
  border-bottom: 1px solid var(--border); margin-bottom: 4px;
}

/* Разделители между смысловыми группами пунктов панели. */
.side-sep { height: 1px; background: rgba(255,255,255,.12); margin: 8px 10px; }

.side-badge { background: var(--accent); color: #fff; }

.side-divider { height: 1px; background: rgba(255,255,255,.1); margin: 8px 4px; }

.side-bottom { margin-top: auto; display: flex; flex-direction: column; gap: 6px; }

.side-disk { padding: 8px 10px 4px; }
.side-disk-top { display: flex; justify-content: space-between; font-size: 12px; color: var(--rail-text-muted); margin-bottom: 6px; }
.side-disk-track { height: 5px; background: rgba(255,255,255,.12); border-radius: 3px; overflow: hidden; }
.side-disk-fill { height: 100%; width: 100%; transform-origin: left center; transform: scaleX(0); background: var(--rail-accent); border-radius: 3px; transition: transform .4s ease; }
.side-disk-fill.disk-warn { background: var(--warning); }
.side-disk-fill.disk-danger { background: var(--danger); }

.side-logout { color: var(--rail-text-muted); }

/* ===== Всплывающее окно со ссылками ===== */
.side-links-wrap { position: relative; }

.links-popover {
  position: absolute; left: calc(100% + 14px); top: -6px;
  width: 250px; z-index: 900;
  background: var(--bg-card);
  border-radius: var(--radius);
  box-shadow: var(--shadow-pop);
  padding: 8px;
  animation: pop-in .14s ease;
}
@keyframes pop-in { from { opacity: 0; transform: translateX(-6px); } to { opacity: 1; transform: none; } }

.links-popover::before {
  content: ""; position: absolute; left: -6px; top: 16px;
  width: 10px; height: 10px; background: var(--bg-card);
  border-left: 1px solid var(--border); border-bottom: 1px solid var(--border);
  transform: rotate(45deg);
}

.links-popover-header {
  display: flex; align-items: center; justify-content: space-between;
  font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em;
  color: var(--text-muted); padding: 4px 8px 10px;
}

.links-popover-item {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 8px; border-radius: var(--radius-sm);
  font-size: 14px; color: var(--text-primary); text-decoration: none;
}
.links-popover-item:hover { background: var(--bg-subtle); }
.links-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); flex: 0 0 7px; }


/* Раздел боковой панели занимает всю оставшуюся ширину. */
.section { flex: 1; min-width: 0; min-height: 0; display: flex; }
.files-section { gap: 14px; }
.section.folder-view { display: flex; flex-direction: column; }

/* Columns view */
.columns-view { flex: 1; min-height: 0; display: flex; gap: 14px; }

.col {
  flex: 1; min-width: 240px; min-height: 0;
  display: flex; flex-direction: column;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  padding: 14px;
  transition: box-shadow .15s ease, border-color .15s ease;
}

/* «Инструменты» — узкая вспомогательная колонка: раньше она занимала
   треть экрана, хотя в ней пара ссылок. */
.col[data-col="tools"] { flex: 0 0 236px; }

.col-header {
  display: flex; align-items: center; justify-content: space-between;
  /* Раньше это была мелкая серая подпись капслоком — теперь заголовок
     раздела читается как заголовок. */
  font-size: var(--fs-title); font-weight: 600; margin-bottom: 14px;
  letter-spacing: -.01em;
  color: var(--text-primary);
}

/* Заголовок колонки — кнопка, но выглядеть должен заголовком: ни рамки,
   ни фона, шрифт родительский. Подчёркивание при наведении — единственный
   намёк, что на него можно нажать. */
.col-title {
  display: flex; align-items: center; gap: 8px;
  border: none; background: none; padding: 0;
  font: inherit; color: inherit; letter-spacing: inherit;
  cursor: pointer; text-align: left;
}
.col-title:hover { text-decoration: underline; text-underline-offset: 3px; }
.col-title:focus-visible { outline: 2px solid var(--rail-accent); outline-offset: 3px; border-radius: 3px; }

.col-count {
  font-size: var(--fs-meta); font-weight: 700; letter-spacing: 0;
  color: var(--text-muted);
  background: var(--bg-subtle);
  border-radius: 999px; padding: 1px 7px;
}

.add-btn {
  width: 24px; height: 24px;
  border-radius: 6px;
  border: 1px solid var(--border-strong);
  background: transparent;
  color: var(--text-muted);
  font-size: 16px; line-height: 1;
  cursor: pointer;
}

.add-btn:hover { color: var(--accent); border-color: var(--accent); }

.col-body {
  display: flex; flex-direction: column; gap: 2px;
  flex: 1; min-height: 0; overflow-y: auto;
  margin: 0 -6px -6px; padding: 0 6px 6px;
}

/* Строки в колонках и в открытой папке выглядят одинаково — раньше это
   были два разных визуальных языка: «кнопки с рамками» и плоский список
   с разделителями. */
.row-item {
  min-height: 46px;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  display: flex; align-items: center; gap: 10px;
  padding: 0 8px;
  font-size: 14px;
  color: var(--text-primary);
  cursor: pointer;
  text-decoration: none;
  background: transparent;
  transition: background .12s ease;
}

.row-item:hover { background: var(--bg-subtle); border-color: transparent; color: var(--text-primary); }

.row-item .icon { width: 18px; height: 18px; flex: 0 0 18px; fill: none; stroke: currentColor; stroke-width: 1.8; }

.empty-hint {
  font-size: 14px; color: var(--text-muted);
  padding: 28px 12px; text-align: center; line-height: 1.6;
}

/* Folder (single big panel) view */
.folder-view {
  flex: 1; min-height: 0;
  display: flex; flex-direction: column;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  padding: 18px 20px;
}

/* Шапка папки: первая строка — путь и кнопки, ниже во всю ширину
   баннер проекта, чат и задачи Planfix. */
.folder-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; gap: 12px; flex-wrap: wrap; }
.folder-header > .breadcrumbs { order: 0; flex: 0 0 100%; margin-bottom: 2px; }
.folder-header > .folder-title-row { order: 1; flex: 1 1 auto; min-width: 0; }
.folder-header > .folder-actions { order: 1; }
.folder-header > .case-banner,
.folder-header > .eq-banner,
.folder-header > .case-chat-box,
.folder-header > .selection-bar { order: 2; flex: 0 0 100%; }
.folder-header > .folder-toolbar { order: 3; flex: 0 0 100%; }

.folder-actions { display: flex; align-items: center; gap: 8px; }

/* Верхняя строка — путь до текущей папки (без неё самой). */
.breadcrumbs { font-size: 14px; color: var(--text-secondary); display: flex; align-items: center; gap: 2px; flex-wrap: wrap; }
.breadcrumbs .crumb-sep { color: var(--text-muted); padding: 0 2px; }

/* Вторая строка — стрелка «наверх» и название открытой папки. */
.folder-title-row { display: flex; align-items: center; gap: 10px; min-width: 0; }

.folder-title {
  margin: 0;
  font-size: var(--fs-display); font-weight: 700; letter-spacing: -.02em;
  color: var(--text-primary);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.folder-up-btn {
  width: 30px; height: 30px; flex: 0 0 30px;
  border: none; background: transparent;
  border-radius: 8px;
  color: var(--text-secondary);
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background .12s ease, color .12s ease;
}
.folder-up-btn svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.folder-up-btn:hover { background: var(--bg-subtle); color: var(--text-primary); }

/* «На главную» — рядом с заголовком папки, но прижата вправо, чтобы не
   спорить с названием за внимание. */
.home-btn {
  margin-left: auto; flex: 0 0 auto;
  display: inline-flex; align-items: center; gap: 6px;
  height: 32px; padding: 0 12px;
  border: 1px solid var(--border-strong); border-radius: var(--radius-sm);
  background: var(--bg-card); color: var(--text-secondary);
  font-size: var(--fs-meta); font-family: inherit; cursor: pointer;
}
.home-btn svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.home-btn:hover { border-color: var(--accent); color: var(--accent-on-tint); background: var(--accent-bg); }

.breadcrumbs .crumb {
  cursor: pointer; padding: 2px 6px; border-radius: 6px;
  transition: background .12s ease, color .12s ease;
}
.breadcrumbs .crumb:hover { color: var(--accent-on-tint); background: var(--accent-bg); }


.upload-btn, .back-btn {
  display: flex; align-items: center; gap: 6px;
  height: 34px; padding: 0 13px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-strong);
  background: var(--bg-card);
  font-size: 14px; font-weight: 500;
  color: var(--text-secondary);
  cursor: pointer;
  transition: border-color .15s ease, color .15s ease, background .15s ease;
}

.upload-btn:hover, .back-btn:hover { border-color: var(--border-strong); color: var(--text-primary); background: var(--bg-subtle); }

/* Главное действие на экране папки выделено заливкой — раньше все три
   кнопки были одинакового веса и было непонятно, что здесь основное. */
.upload-btn.primary-action {
  background: var(--accent); border-color: var(--accent); color: #fff;
  box-shadow: 0 1px 2px rgba(47,111,219,.30);
}
.upload-btn.primary-action:hover { background: var(--accent-strong); border-color: var(--accent-strong); color: #fff; }

.back-btn svg, .upload-btn svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

.folder-body {
  display: flex; flex-direction: column;
  flex: 1; min-height: 0; overflow-y: auto;
  margin: 0 -8px; padding: 0 8px 8px;
}

.file-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px;
  min-height: 46px;
  padding: 0 8px;
  border-radius: var(--radius-sm);
  font-size: 14px;
  cursor: pointer;
  transition: background .12s ease;
}

.file-row:hover { background: var(--bg-subtle); }

.file-row .left { display: flex; align-items: center; gap: 10px; min-width: 0; flex: 1; }
.file-row .left > span:not(.icon):not(.ficon) { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.file-row .icon { width: 18px; height: 18px; flex: 0 0 18px; fill: none; stroke: var(--text-secondary); stroke-width: 1.8; }

.file-row .right { display: flex; align-items: center; gap: 10px; }

.file-row .size { color: var(--text-muted); font-size: 12px; min-width: 62px; text-align: right; }

/* Дата изменения — вспомогательная колонка справа: одинаковой ширины,
   чтобы даты выстраивались в столбик, и цифры моноширинные. */
.row-when {
  display: inline-flex; gap: 14px;
  color: var(--text-muted);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.when-date { min-width: 78px; text-align: right; }
.when-time { min-width: 36px; text-align: right; }

.row-item .left { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0; }
.row-item .left .row-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.row-item .right { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }

@media (max-width: 1180px) {
  .row-when { display: none; }
}

.delete-btn {
  width: 26px; height: 26px;
  border: none; background: transparent;
  color: var(--text-muted);
  border-radius: 6px;
  cursor: pointer;
  flex-shrink: 0;
}

.delete-btn:hover { color: var(--danger); background: var(--danger-bg); }

.download-btn {
  width: 26px; height: 26px;
  border: none; background: transparent;
  color: var(--text-muted);
  border-radius: 6px;
  cursor: pointer;
  flex-shrink: 0;
}

.download-btn:hover { color: var(--accent-on-tint); background: var(--accent-bg); }

.perm-btn {
  width: 26px; height: 26px;
  border: none; background: transparent;
  color: var(--text-muted);
  border-radius: 6px;
  cursor: pointer;
  flex-shrink: 0;
}

.perm-btn:hover { color: var(--accent-on-tint); background: var(--accent-bg); }

.rename-btn {
  width: 26px; height: 26px;
  border: none; background: transparent;
  color: var(--text-muted);
  border-radius: 6px;
  cursor: pointer;
  flex-shrink: 0;
}

.rename-btn:hover { color: var(--accent-on-tint); background: var(--accent-bg); }

/* Users management modal */
.modal-overlay {
  position: fixed; inset: 0;
  background: rgba(35,35,32,0.32);
  backdrop-filter: blur(3px);
  animation: modal-fade .16s ease;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

@keyframes modal-fade { from { opacity: 0; } to { opacity: 1; } }

.modal-panel {
  background: var(--bg-card);
  border-radius: 14px;
  box-shadow: var(--shadow-pop);
  animation: modal-rise .18s ease;
  width: 100%;
  max-width: 640px;
  max-height: 85vh;
  overflow-y: auto;
  padding: 20px 24px;
}

@keyframes modal-rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
  font-size: 16px;
  font-weight: 600;
}

.users-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 20px;
}

.user-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 10px 12px;
  font-size: 14px;
}

.user-row .user-name {
  font-weight: 600;
  min-width: 120px;
}

.user-row .role-badge {
  font-size: 12px;
  color: var(--text-muted);
}

.user-row label {
  display: flex;
  align-items: center;
  gap: 4px;
  color: var(--text-secondary);
  cursor: pointer;
}

.user-row .delete-btn {
  margin-left: auto;
}

.add-user-form {
  border-top: 1px solid var(--border);
  padding-top: 16px;
}

.add-user-form h2 {
  font-size: 14px;
  font-weight: 600;
  margin: 0 0 12px;
}

.add-user-row {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}

.add-user-row label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 12px;
  color: var(--text-secondary);
  flex: 1;
  min-width: 140px;
}

.add-user-row input, .add-user-row select {
  height: 36px;
  border-radius: 8px;
  border: 1px solid var(--border-strong);
  padding: 0 10px;
  font-size: 14px;
}

/* Формы в модальных окнах: подпись сверху, поля одной высоты и ширины.
   Раньше часть полей оставалась с браузерным оформлением и разной длиной —
   форма выглядела собранной из кусков. */
.modal-panel form label {
  display: flex; flex-direction: column; gap: 5px;
  font-size: var(--fs-meta); color: var(--text-secondary);
}

.modal-panel form input[type="text"],
.modal-panel form input[type="number"],
.modal-panel form input[type="date"],
.modal-panel form input[type="password"],
.modal-panel form select,
.modal-panel form textarea {
  width: 100%;
  min-height: 38px;
  border-radius: 8px;
  border: 1px solid var(--border-strong);
  background: var(--bg-card);
  color: var(--text-primary);
  padding: 0 10px;
  font-size: var(--fs-body);
  font-family: inherit;
  transition: border-color .12s ease, box-shadow .12s ease;
}

.modal-panel form textarea { padding: 9px 10px; line-height: 1.45; resize: vertical; }

.modal-panel form input:focus,
.modal-panel form select:focus,
.modal-panel form textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-bg);
}

.modal-panel form ::placeholder { color: var(--text-muted); }

.perm-checks {
  display: flex;
  gap: 16px;
  margin-bottom: 14px;
  font-size: 14px;
}

.perm-checks label {
  display: flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
}

/* Upload status panel */
.upload-panel {
  position: fixed;
  right: 20px;
  bottom: 20px;
  width: 320px;
  max-height: 60vh;
  overflow-y: auto;
  background: var(--bg-card);
  border-radius: 12px;
  box-shadow: var(--shadow-pop);
  z-index: 900;
  animation: upload-panel-in 0.25s ease;
}

@keyframes upload-panel-in {
  from { opacity: 0; transform: translateY(16px); }
  to { opacity: 1; transform: translateY(0); }
}

.upload-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 14px;
  border-bottom: 1px solid var(--border);
  font-size: 14px;
  font-weight: 600;
}

.upload-panel-header button {
  border: none;
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  width: 22px; height: 22px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 6px;
}
.upload-panel-header button svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; }
.upload-panel-header button:hover { color: var(--text-primary); background: var(--accent-bg); }

.upload-panel-list {
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* Много файлов — прокручиваем список внутри панели. */
.upload-panel-list.scrollable {
  max-height: 40vh;
  overflow-y: auto;
}

/* Общая полоса по всей загрузке — под заголовком, показывается от двух файлов. */
.upload-panel-total {
  height: 4px;
  background: var(--accent-bg);
  overflow: hidden;
}

.upload-panel-total-fill {
  height: 100%;
  width: 100%;
  /* Раньше здесь анимировалась ширина — это заставляет браузер пересчитывать
     раскладку на каждом кадре. Масштаб считает только композитор. */
  transform-origin: left center;
  transform: scaleX(0);
  background: var(--accent);
  transition: transform 0.25s ease;
}

.upload-panel-total-fill.has-error { background: var(--danger); }

.upload-item-status .status-done { color: #1d9e75; }
.upload-item-status .status-error { color: var(--danger); }
.upload-item-status svg { vertical-align: -2px; }

.upload-item { animation: upload-item-in 0.2s ease; }
.upload-panel .upload-item-error.hidden { display: none; }

@keyframes upload-item-in {
  from { opacity: 0; transform: translateX(8px); }
  to { opacity: 1; transform: translateX(0); }
}

.upload-item-top {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: 12px;
  margin-bottom: 6px;
  gap: 8px;
}

.upload-item-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
  color: var(--text-primary);
}

.upload-item-status {
  color: var(--text-muted);
  flex-shrink: 0;
  font-variant-numeric: tabular-nums;
}
.upload-item-status.status-done { color: #1d9e75; }
.upload-item-status.status-error { color: var(--danger); }

.upload-progress-track {
  height: 6px;
  border-radius: 4px;
  background: var(--accent-bg);
  overflow: hidden;
}

.upload-progress-fill {
  height: 100%;
  width: 100%;
  border-radius: 4px;
  transform-origin: left center;
  transform: scaleX(0);
  background: var(--accent);
  transition: transform 0.18s linear, background-color 0.2s ease;
}

.upload-progress-fill.uploading {
  background-image: linear-gradient(90deg, var(--accent) 25%, #6aa8f5 50%, var(--accent) 75%);
  background-size: 200% 100%;
  animation: upload-stripe 1.2s linear infinite;
}

.upload-progress-fill.done { background: #1d9e75; }
.upload-progress-fill.error { background: var(--danger); }

@keyframes upload-stripe {
  from { background-position: 200% 0; }
  to { background-position: 0 0; }
}

.upload-item-error {
  font-size: 12px;
  color: var(--danger);
  margin-top: 4px;
}

.upload-dropzone {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 10px; padding: 36px 20px; margin-top: 10px;
  border: 2px dashed var(--border-strong); border-radius: 12px;
  color: var(--text-secondary); font-size: 14px; text-align: center;
  transition: border-color 0.15s, background 0.15s, color 0.15s;
}
.upload-dropzone svg { width: 32px; height: 32px; fill: none; stroke: currentColor; stroke-width: 1.6; }
.upload-dropzone.drag-over { border-color: var(--accent); background: var(--accent-bg); color: var(--accent-on-tint); }

/* Перетаскивание файлов с компьютера прямо в интерфейс:
   колонка / открытая папка подсвечиваются рамкой, строка-папка — заливкой. */
.col.drag-over,
.folder-view.drag-over {
  border-color: var(--accent);
  box-shadow: inset 0 0 0 2px var(--accent);
  background: var(--accent-bg);
}

.file-row.drag-over,
.row-item.drag-over {
  background: var(--accent-bg);
  border-color: var(--accent);
  color: var(--accent-on-tint);
  box-shadow: inset 0 0 0 2px var(--accent);
}

.file-row.drag-over .icon,
.row-item.drag-over .icon { stroke: var(--accent); }

.upload-choice {
  display: flex;
  gap: 10px;
  padding: 14px;
}

.upload-choice-btn {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 16px 10px;
  border: 1px solid var(--border-strong);
  border-radius: 10px;
  background: transparent;
  color: var(--text-secondary);
  font-size: 12px;
  cursor: pointer;
}

.upload-choice-btn svg {
  width: 26px; height: 26px;
  fill: none; stroke: currentColor; stroke-width: 1.6;
}

.upload-choice-btn:hover {
  border-color: var(--accent);
  color: var(--accent-on-tint);
  background: var(--accent-bg);
}

/* Selection bar (bulk actions) */
.selection-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  font-size: 14px;
  font-weight: 600;
  flex: 1;
  background: var(--accent-bg);
  color: var(--accent-strong);
  border-radius: var(--radius-sm);
  padding: 8px 8px 8px 14px;
}

.selection-actions {
  display: flex;
  gap: 8px;
}

.select-checkbox {
  width: 16px;
  height: 16px;
  margin-right: 4px;
  flex-shrink: 0;
  cursor: pointer;
}

.file-row.selectable { cursor: pointer; }
.file-row.selected { background: var(--accent-bg); }
.file-row .size { flex-shrink: 0; }

/* Search & sort toolbars */
.col-toolbar {
  display: flex;
  gap: 6px;
  margin-bottom: 10px;
}

.col-search-input {
  flex: 1;
  min-width: 0;
  height: 32px;
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  background: var(--bg-subtle) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2397958d' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E") no-repeat 9px center / 14px 14px;
  padding: 0 8px 0 29px;
  font-size: 12px;
  color: var(--text-primary);
  transition: background-color .15s ease, border-color .15s ease;
}

.col-sort-select {
  height: 32px;
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  font-size: 12px;
  padding: 0 4px;
  max-width: 92px;
  background: var(--bg-subtle);
  color: var(--text-secondary);
  cursor: pointer;
}

.col-search-input:focus, .col-sort-select:focus {
  outline: none;
  border-color: var(--accent);
  background-color: var(--bg-card);
  box-shadow: 0 0 0 3px var(--accent-bg);
}

.folder-toolbar {
  display: flex;
  gap: 8px;
  width: 100%;
  margin: 12px 0 6px;
}

.folder-toolbar input[type="text"] {
  flex: 1;
  min-width: 0;
  height: 36px;
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  background: var(--bg-subtle) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2397958d' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E") no-repeat 11px center / 15px 15px;
  padding: 0 12px 0 33px;
  font-size: 14px;
  color: var(--text-primary);
}

.folder-toolbar select {
  height: 36px;
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  font-size: 14px;
  padding: 0 8px;
  background: var(--bg-subtle);
  color: var(--text-secondary);
  cursor: pointer;
}

.folder-toolbar input:focus, .folder-toolbar select:focus {
  outline: none;
  border-color: var(--accent);
  background-color: var(--bg-card);
  box-shadow: 0 0 0 3px var(--accent-bg);
}

.search-path-hint {
  font-size: 12px;
  color: var(--text-muted);
  margin-left: 6px;
}

/* ================= Иконки по типу файла =================
   Раньше все файлы были одинаковой серой иконкой и список читался
   сплошной массой. Теперь тип виден боковым зрением. */
/* Иконка строки — сам знак, без плитки-подложки: список дышит, а тип
   объекта всё равно читается по силуэту и цвету. */
.ficon {
  width: 26px; height: 26px; flex: 0 0 26px;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--text-muted);
}
.ficon .icon-solid { width: 24px; height: 24px; flex: 0 0 24px; fill: currentColor; stroke: none; }

/* Папка — тёплая, двухтонная: язычок темнее корпуса. */
.ficon-folder { color: #f5c24a; }
.ficon-folder .folder-tab { fill: #e0a92f; }
.ficon-folder .folder-body { fill: currentColor; }

/* Файл — светлая страница со сплошным уголком в цвете типа. */
.ficon .page-body { fill: currentColor; opacity: .3; }
.ficon .page-fold { fill: currentColor; }
.ficon-doc    { color: #3b6fd4; }
.ficon-sheet  { color: #1e8a63; }
.ficon-pdf    { color: #cf4436; }
.ficon-img    { color: #7d51c4; }
.ficon-zip    { color: #b0810f; }
.ficon-other  { color: #8b8f88; }



/* Ровный спокойный список: папка чуть плотнее файла, но без жира. */
.row-item .row-name, .file-row .row-name { font-weight: 400; }
.row-item.is-dir .row-name, .file-row.is-dir .row-name { font-weight: 500; }

/* Кнопки действий в строке проявляются на наведении и не шумят постоянно. */
.file-row .perm-btn, .row-item .perm-btn { opacity: 0; transition: opacity .12s ease; }
.file-row:hover .perm-btn, .row-item:hover .perm-btn { opacity: 1; }
.file-row .perm-btn:focus-visible, .row-item .perm-btn:focus-visible { opacity: 1; }

/* Всплывающее уведомление («Ссылка скопирована» и т.п.) */
.toast {
  position: fixed;
  left: 50%; bottom: 28px;
  transform: translateX(-50%);
  z-index: 2000;
  background: #2b2b28;
  color: #fff;
  font-size: 14px;
  padding: 10px 18px;
  border-radius: 999px;
  box-shadow: var(--shadow-pop);
  animation: toast-in .18s ease;
}

@keyframes toast-in { from { opacity: 0; transform: translate(-50%, 10px); } to { opacity: 1; transform: translate(-50%, 0); } }

/* Подсветка строки, на которую привела ссылка. */
@keyframes row-flash {
  0%, 60% { background: var(--accent-bg); box-shadow: inset 0 0 0 2px var(--accent); }
  100% { background: transparent; box-shadow: none; }
}
.file-row.row-flash { animation: row-flash 2.4s ease; }

/* ===== Общее для новых страниц ===== */
.page-head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 16px; flex-wrap: wrap; margin-bottom: 14px;
}
.page-sub { margin: 4px 0 0; font-size: 14px; color: var(--text-muted); }

.day-label {
  font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em;
  color: var(--text-muted); padding: 16px 8px 6px;
}
.day-label:first-child { padding-top: 4px; }

.row-path { font-size: 12px; color: var(--text-muted); margin-left: 10px; }
.who { font-size: 12px; color: var(--text-secondary); }

.seg { display: flex; gap: 2px; background: var(--bg-subtle); border-radius: var(--radius-sm); padding: 3px; }
.seg-btn {
  border: none; background: transparent; cursor: pointer;
  padding: 6px 13px; border-radius: 6px;
  font-size: 12px; color: var(--text-secondary);
}
.seg-btn.active { background: var(--bg-card); color: var(--text-primary); font-weight: 600; box-shadow: 0 1px 2px rgba(35,35,32,.08); }

.file-row .right { gap: 16px; }

/* ===== Корзина ===== */
.danger-btn { color: var(--danger); border-color: #e6c4c0; }
.danger-btn:hover { color: var(--danger); border-color: var(--danger); background: var(--danger-bg); }

.trash-head {
  display: flex; align-items: center; gap: 12px;
  padding: 0 8px 8px; margin-bottom: 2px;
  border-bottom: 1px solid var(--border);
  font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em;
  color: var(--text-muted);
}
.trash-head .th-name { flex: 1; padding-left: 42px; }
.trash-head .th-from { flex: 0 0 220px; }
.trash-head .th-who  { flex: 0 0 110px; }
.trash-head .th-left { flex: 0 0 90px; }
.trash-head .th-act  { flex: 0 0 210px; }

.trash-row { display: flex; align-items: center; gap: 12px; }
.trash-row .row-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.trash-row .row-path { flex: 0 0 220px; margin-left: 0; }
.trash-row .who { flex: 0 0 110px; }
.trash-row .left-days { flex: 0 0 90px; font-size: 12px; color: var(--text-muted); }
.trash-row .left-days.warn { color: var(--warning); font-weight: 600; }
.trash-actions { flex: 0 0 210px; display: flex; gap: 6px; justify-content: flex-end; opacity: 0; transition: opacity .12s ease; }
.trash-row:hover .trash-actions { opacity: 1; }

.row-btn {
  border: 1px solid var(--border-strong); background: var(--bg-card);
  border-radius: 7px; padding: 5px 11px; font-size: 12px;
  color: var(--text-secondary); cursor: pointer;
}
.row-btn:hover { color: var(--text-primary); background: var(--bg-subtle); }
.row-btn.danger { color: var(--danger); }
.row-btn.danger:hover { background: var(--danger-bg); border-color: var(--danger); }

/* ===== История ===== */
.ev {
  display: flex; align-items: baseline; gap: 12px;
  padding: 9px 8px; border-radius: var(--radius-sm);
  font-size: 14px;
}
.ev:hover { background: var(--bg-subtle); }
.ev-dot { width: 8px; height: 8px; border-radius: 50%; flex: 0 0 8px; align-self: center; }
.ev-add   { background: #1d9e75; }
.ev-del   { background: var(--danger); }
.ev-edit  { background: var(--warning); }
.ev-new   { background: var(--accent); }
.ev-stage { background: #7d51c4; }
.ev-time { flex: 0 0 42px; font-size: 12px; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.ev-text { flex: 1; color: var(--text-secondary); }
.ev-text b { color: var(--text-primary); font-weight: 600; }
.ev .stage-badge { font-size: 12px; padding: 2px 8px; }

/* Add menu dropdown */
/* Список с поиском (выбор экспертов в ГП).
   Раньше это были голые label с инлайновыми стилями — общее правило форм
   разворачивало их в колонку, и галочка уезжала над фамилией. */
.picker { display: flex; flex-direction: column; gap: 8px; }

.picker-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.picker-count { font-size: var(--fs-meta); color: var(--text-muted); }
.picker-count.has-selection { color: var(--accent-on-tint); font-weight: 600; }

.picker-search { position: relative; }
.picker-search svg {
  position: absolute; left: 10px; top: 50%; transform: translateY(-50%);
  width: 16px; height: 16px; fill: none; stroke: var(--text-muted);
  stroke-width: 1.8; stroke-linecap: round; pointer-events: none;
}
/* Оба селектора нарочно: внутри формы действует общее правило
   ".modal-panel form label { flex-direction: column }", и перебить его
   можно только такой же длинной цепочкой. Вне формы (карточка задачи)
   работает короткий селектор. */
.picker-search input[type="search"],
.modal-panel form .picker-search input[type="search"] {
  width: 100%; min-height: 38px; padding: 0 10px 0 32px;
  border: 1px solid var(--border-strong); border-radius: 8px;
  background: var(--bg-card); color: var(--text-primary);
  font-size: var(--fs-body); font-family: inherit;
}
.picker-search input[type="search"]:focus,
.modal-panel form .picker-search input[type="search"]:focus {
  outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-bg);
}

.picker-list {
  max-height: 240px; overflow-y: auto;
  border: 1px solid var(--border); border-radius: 8px;
  padding: 4px;
}

/* Строка выбора: галочка слева, имя рядом — на всю ширину, чтобы попадать
   кликом куда угодно, а не в саму галочку. */
label.picker-item,
.modal-panel form label.picker-item {
  display: flex; flex-direction: row; align-items: center; gap: 10px;
  padding: 8px 10px; border-radius: 7px;
  font-size: var(--fs-body); color: var(--text-primary);
  cursor: pointer;
}
.picker-item:hover { background: var(--bg-subtle); }
.picker-item input { width: 16px; height: 16px; flex: 0 0 16px; accent-color: var(--accent); margin: 0; }
.picker-item.checked { background: var(--accent-bg); }
.picker-item.hidden { display: none; }
.picker-empty { padding: 14px 10px; text-align: center; color: var(--text-muted); font-size: var(--fs-meta); }

/* ===== Страница «Задачи» =====
   Таблица, а не карточки: по задачам ходят глазами по столбцам —
   срок, проект, исполнитель, — и колонки для этого честнее. */
.tasks-table { width: 100%; border-collapse: collapse; }

.tasks-table th {
  text-align: left; font-size: var(--fs-meta); font-weight: 600;
  color: var(--text-muted); padding: 8px 10px;
  border-bottom: 1px solid var(--border);
  position: sticky; top: 0; background: var(--bg-card); z-index: 1;
}

.tasks-table td { padding: 10px; border-bottom: 1px solid var(--border); font-size: var(--fs-body); vertical-align: top; }
.tasks-table tr:hover td { background: var(--bg-subtle); }

.task-num { color: var(--text-muted); font-variant-numeric: tabular-nums; width: 62px; }
.task-title { font-weight: 500; }
.task-project-type { display: block; font-size: var(--fs-meta); color: var(--text-muted); }
.task-project-name { color: var(--accent-on-tint); }
.task-date { font-variant-numeric: tabular-nums; white-space: nowrap; width: 108px; }
.task-people { color: var(--text-secondary); font-size: var(--fs-meta); }
/* Кнопка завершения и крестик удаления должны помещаться в одну строку —
   иначе крестик сползает под кнопку и выглядит как чужой элемент. */
.task-actions { width: 170px; text-align: right; white-space: nowrap; }

/* Просроченная строка целиком читается тревожно — как в Планфиксе. */
.tasks-table tr.overdue .task-title,
.tasks-table tr.overdue .task-date { color: var(--danger); font-weight: 600; }
.tasks-table tr.is-done .task-title { color: var(--text-muted); text-decoration: line-through; }

.task-done-btn {
  display: inline-flex; align-items: center; gap: 6px;
  height: 30px; padding: 0 10px;
  border: 1px solid var(--border-strong); border-radius: var(--radius-sm);
  background: var(--bg-card); color: var(--text-secondary);
  font-size: var(--fs-meta); font-family: inherit; cursor: pointer;
}
.task-done-btn svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2.2; }
.task-done-btn:hover { border-color: var(--accent); color: var(--accent-on-tint); background: var(--accent-bg); }
.task-done-btn[disabled] { opacity: .5; pointer-events: none; }
.task-done-mark { color: var(--success); font-size: var(--fs-meta); white-space: nowrap; }

/* Удаление задачи. Держим приглушённым и рядом с остальными действиями:
   это редкое действие «поставил не то», а не равноправное с завершением. */
.task-del-btn {
  width: 26px; height: 26px; margin-left: 6px;
  border: 0; border-radius: 6px; background: none;
  color: var(--text-muted); font-size: 13px; line-height: 1; cursor: pointer;
  vertical-align: middle;
}
.task-del-btn:hover { background: var(--bg-subtle); color: var(--danger); }
.task-del-btn[disabled] { opacity: .5; pointer-events: none; }
/* В строке задачи проекта крестик появляется при наведении на строку —
   иначе он спорит за внимание со сроком и исполнителем. */
.task-row .task-del-btn { opacity: 0; }
.task-row:hover .task-del-btn,
.task-row .task-del-btn:focus-visible { opacity: 1; }

/* Название задачи открывает карточку — показываем это подчёркиванием
   при наведении, а не только курсором. */
.tasks-table .task-title[data-open-task]:hover { text-decoration: underline; }

/* Предупреждение о том, что аккаунт не связан с сотрудником Planfix.
   Стоит над таблицей: без связи половина фильтров бессмысленна. */
.task-banner {
  margin: 0 0 12px; padding: 10px 14px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  background: var(--bg-subtle); color: var(--text-secondary);
  font-size: var(--fs-meta); line-height: 1.45;
}
/* Метка сообщает "нужно внимание" цветом слова, а не полосой сбоку:
   полоска на скруглённом блоке выглядит наклейкой. */
.task-banner::before {
  content: "Нужна настройка. ";
  color: var(--warning); font-weight: 600;
}

/* ===== Карточка задачи ===== */
.task-card-title { margin: 4px 0 6px; font-size: var(--fs-lead); font-weight: 600; }
.task-card-meta {
  display: flex; flex-wrap: wrap; gap: 6px 14px;
  font-size: var(--fs-meta); color: var(--text-muted); margin-bottom: 10px;
}
.task-card-project { color: var(--accent-on-tint); }
.task-card-project:hover { text-decoration: underline; }
.task-card-desc {
  margin: 0 0 12px; white-space: pre-wrap;
  font-size: var(--fs-body); color: var(--text-secondary);
}

.task-card-facts {
  display: grid; grid-template-columns: max-content 1fr; gap: 6px 16px;
  margin: 0 0 4px; font-size: var(--fs-body);
}
.task-card-facts dt { color: var(--text-muted); font-size: var(--fs-meta); }
.task-card-facts dd { margin: 0; }

.task-card-block { margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--border); }
.task-card-block h4 { margin: 0 0 10px; font-size: var(--fs-body); font-weight: 600; }
.task-card-field { display: flex; flex-direction: column; gap: 4px; font-size: var(--fs-meta); color: var(--text-muted); }
.task-card-field input { max-width: 200px; }

.task-comment { padding: 8px 0; border-bottom: 1px solid var(--border); }
.task-comment:last-child { border-bottom: 0; }
.task-comment-head { display: flex; gap: 10px; align-items: baseline; margin-bottom: 2px; }
.task-comment-author { font-weight: 500; font-size: var(--fs-meta); }
.task-comment-date { color: var(--text-muted); font-size: var(--fs-meta); font-variant-numeric: tabular-nums; }
.task-comment-text { font-size: var(--fs-body); white-space: pre-wrap; }
.task-comment-input {
  width: 100%; margin-top: 10px; padding: 8px 10px; resize: vertical;
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  font-family: inherit; font-size: var(--fs-body);
}

/* Ссылка на карточку дела в картотеке арбитражных дел */
.kad-link {
  display: inline-flex; align-items: center; gap: 6px;
  margin-left: 10px; padding: 3px 9px;
  border: 1px solid var(--border-strong); border-radius: 999px;
  color: var(--accent-on-tint); text-decoration: none;
  font-size: var(--fs-meta); font-weight: 500;
  vertical-align: middle;
}
.kad-link svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.kad-link:hover { border-color: var(--accent); background: var(--accent-bg); }
.kad-link.inline { margin-left: 0; padding: 0; border: 0; text-decoration: underline; }
.kad-link.inline:hover { background: none; }

/* ===== Поле «Задача»: ввод со всплывающим списком ===== */
/* Запертое поле должно выглядеть запертым, иначе человек будет в него
   тыкать и думать, что интерфейс сломан. */
.modal-panel select:disabled {
  background: var(--bg-subtle); color: var(--text-secondary);
  cursor: not-allowed; opacity: 1;
}

.combo-row { display: flex; gap: 8px; align-items: stretch; }
.combo-row .combo { flex: 1 1 auto; min-width: 0; }
.combo-row .upload-btn { flex: 0 0 auto; white-space: nowrap; }
.combo { position: relative; display: flex; align-items: center; }
.combo input { width: 100%; padding-right: 36px; }
.combo-toggle {
  position: absolute; right: 4px; top: 50%; transform: translateY(-50%);
  width: 28px; height: 28px; display: flex; align-items: center; justify-content: center;
  border: 0; background: none; color: var(--text-muted); cursor: pointer;
}
.combo-toggle svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; }
.combo-toggle:hover { color: var(--text-primary); }

.combo-list {
  position: absolute; top: calc(100% + 4px); left: 0; right: 0; z-index: 20;
  max-height: 240px; overflow-y: auto;
  background: var(--bg-card); border: 1px solid var(--border-strong);
  border-radius: 8px;
  /* Тень со смещением вниз, а не размытым ореолом по кругу: список
     висит НАД полем, и он должен читаться как приподнятый слой. */
  box-shadow: 0 6px 12px -4px rgba(0, 0, 0, .18);
  padding: 4px;
}
.combo-item {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  width: 100%; padding: 8px 10px; border: 0; border-radius: 7px;
  background: none; color: var(--text-primary); text-align: left;
  font-family: inherit; font-size: var(--fs-body); cursor: pointer;
}
.combo-item:hover { background: var(--bg-subtle); }
/* Строка списка: сам пункт плюс крестик «убрать из справочника». */
.combo-row-item { display: flex; align-items: center; }
.combo-row-item:hover { background: var(--bg-subtle); border-radius: 7px; }
.combo-row-item .combo-item { flex: 1 1 auto; min-width: 0; }
.combo-row-item .combo-item:hover { background: none; }
.combo-del {
  flex: 0 0 auto; width: 26px; height: 26px; margin-right: 4px;
  border: 0; border-radius: 6px; background: none;
  color: var(--text-muted); font-size: 13px; line-height: 1; cursor: pointer;
}
.combo-del:hover { background: var(--danger-bg, var(--bg-page)); color: var(--danger); }
.combo-item.picked { color: var(--text-muted); }
.combo-picked { font-size: var(--fs-meta); color: var(--accent-on-tint); }
.combo-empty { padding: 12px 10px; color: var(--text-muted); font-size: var(--fs-meta); }

/* Уже отмеченные к постановке задачи */
.chosen-tasks { display: flex; flex-wrap: wrap; gap: 8px; }
.chosen-tasks:empty { display: none; }
.chosen-task {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 8px 6px 12px; border-radius: 999px;
  background: var(--accent-bg); color: var(--accent-on-tint);
  font-size: var(--fs-meta);
}
.chosen-task-remove {
  border: 0; background: none; color: inherit; cursor: pointer;
  font-size: 13px; line-height: 1; padding: 2px 4px; opacity: .7;
}
.chosen-task-remove:hover { opacity: 1; }

/* Список типовых задач стадии в папке проекта */
.stage-task-list { margin: 6px 0 0; padding-left: 20px; }
.stage-task-list li { font-size: var(--fs-body); padding: 2px 0; }

/* Таблица привязок аккаунтов к сотрудникам Planfix */
.pf-bindings select { width: 100%; max-width: 280px; }
.pf-bindings td { vertical-align: middle; }

/* Диагностика и отчёт сверки с Planfix */
.planfix-result { margin-top: 6px; max-height: 52vh; overflow-y: auto; }
.pf-block { margin-top: 16px; }
.pf-block h3 { margin: 0 0 8px; font-size: var(--fs-body); font-weight: 600; }
.pf-table { width: 100%; border-collapse: collapse; font-size: var(--fs-meta); }
.pf-table th, .pf-table td { text-align: left; padding: 6px 8px; border-bottom: 1px solid var(--border); vertical-align: top; }
.pf-table th { color: var(--text-muted); font-weight: 600; }
.pf-table td.num { font-variant-numeric: tabular-nums; white-space: nowrap; }
.pf-ok { color: var(--accent-on-tint); font-weight: 600; }
.pf-warn { color: var(--warning); font-weight: 600; }
.pf-list { margin: 0; padding-left: 18px; font-size: var(--fs-meta); color: var(--text-secondary); }
.pf-list li { margin-bottom: 3px; }

/* Служебная иконка-кнопка в шапке колонки (сверка с Planfix). */
.col-head-actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }

.icon-btn {
  width: 34px; height: 34px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--border-strong); border-radius: var(--radius-sm);
  background: var(--bg-card); color: var(--text-secondary);
  cursor: pointer;
  transition: color .12s ease, border-color .12s ease, background .12s ease;
}
.icon-btn svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.icon-btn:hover { color: var(--accent-on-tint); border-color: var(--accent); background: var(--accent-bg); }
.icon-btn.busy { pointer-events: none; opacity: .6; }
.icon-btn.busy svg { animation: icon-spin 1s linear infinite; }
@keyframes icon-spin { to { transform: rotate(360deg); } }

/* Заголовок группы внутри списка папок ("Экспертизы", "Независимые
   исследования") — как разделение проектов в Планфиксе. */
.row-group {
  /* Заголовок должен читаться как заголовок, а не как мелкая подпись:
     он делит длинный список надвое, и пропустить его нельзя. */
  font-size: var(--fs-body); font-weight: 700;
  color: var(--text-primary);
  letter-spacing: .01em;
  padding: 22px 8px 8px;
  border-bottom: 1px solid var(--border-strong);
  margin-bottom: 4px;
}
.row-group:first-child { padding-top: 6px; }

/* Задачи проекта */
.case-tasks-body { padding: 4px 0 8px; }
.task-group {
  font-size: var(--fs-meta); font-weight: 700; color: var(--text-secondary);
  padding: 10px 14px 4px;
}
.task-row {
  display: grid;
  grid-template-columns: 20px 1fr auto auto;
  align-items: center; gap: 10px;
  padding: 7px 14px;
  font-size: var(--fs-body);
}
.task-row + .task-row { border-top: 1px solid var(--border); }
.task-mark { color: var(--success); display: inline-flex; }
.task-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.task-who { color: var(--text-muted); font-size: var(--fs-meta); }
.task-due { color: var(--text-muted); font-size: var(--fs-meta); font-variant-numeric: tabular-nums; min-width: 82px; text-align: right; }
.task-overdue { color: var(--danger); font-weight: 600; }
.task-done .task-name { color: var(--text-muted); text-decoration: line-through; }

/* ===== Кнопка «Создать» и её меню =====
   Раньше действия колонки жили в мелких серых чипах ("ГП", "Проект", "+"),
   которые читались как выключенные. Теперь это одна заметная кнопка, а типы
   документов — строки меню: добавить новый тип не значит уплотнить шапку. */
.create-wrap { position: relative; flex-shrink: 0; }

.create-btn {
  display: inline-flex; align-items: center; gap: 6px;
  height: 34px; padding: 0 12px 0 10px;
  border: 1px solid var(--accent); border-radius: var(--radius-sm);
  background: var(--accent); color: #fff;
  font-size: var(--fs-body); font-weight: 600; font-family: inherit;
  letter-spacing: 0; text-transform: none;
  cursor: pointer;
  box-shadow: 0 1px 2px rgba(35,35,32,.16);
  transition: background .12s ease, border-color .12s ease, box-shadow .12s ease;
}

.create-btn:hover { background: var(--accent-strong); border-color: var(--accent-strong); box-shadow: var(--shadow-raise); }
.create-btn:active { background: var(--accent-strong); box-shadow: none; }
.create-btn svg { width: 16px; height: 16px; flex: 0 0 16px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.create-btn .create-chevron { width: 14px; height: 14px; flex: 0 0 14px; stroke-width: 2; opacity: .8; transition: transform .15s ease; }
.create-btn[aria-expanded="true"] .create-chevron { transform: rotate(180deg); }

.create-menu {
  position: absolute;
  top: calc(100% + 8px); right: 0;
  background: var(--bg-card);
  border-radius: 10px;
  box-shadow: var(--shadow-pop);
  padding: 6px;
  min-width: 232px;
  z-index: 500;
  display: flex; flex-direction: column; gap: 1px;
  animation: create-menu-in .13s ease-out;
}

@keyframes create-menu-in {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: translateY(0); }
}

.create-menu button {
  display: flex; align-items: center; gap: 10px;
  border: none; background: transparent;
  padding: 9px 10px; border-radius: 7px;
  font-size: var(--fs-body); font-family: inherit;
  color: var(--text-primary);
  cursor: pointer; text-align: left;
}

.create-menu button:hover { background: var(--accent-bg); color: var(--accent-on-tint); }

.create-menu button svg {
  width: 18px; height: 18px; flex: 0 0 18px;
  fill: none; stroke: var(--text-muted); stroke-width: 1.7;
  stroke-linecap: round; stroke-linejoin: round;
}
.create-menu button:hover svg { stroke: var(--accent-on-tint); }

.create-menu-sep { height: 1px; background: var(--border); margin: 5px 8px; }

/* В открытой папке меню раскрывается от левого края — кнопка стоит первой. */
#createFolderViewMenu { right: auto; left: 0; }

@media (max-width: 720px) {
  .upload-panel { left: 12px; right: 12px; width: auto; }
}

/* На узком экране панель ложится сверху горизонтальной полосой. */
@media (max-width: 900px) {
  .app-screen { flex-direction: column; height: auto; min-height: 100vh; }
  .sidebar { flex: 0 0 auto; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 6px; }
  .sidebar .side-divider, .sidebar .side-disk { display: none; }
  .side-bottom { margin-top: 0; flex-direction: row; }
  .side-item { width: auto; }
  .side-profile { width: auto; margin-bottom: 0; }
  .links-popover { left: 0; top: calc(100% + 10px); }
  .links-popover::before { left: 20px; top: -6px; transform: rotate(135deg); }
  .columns-view { width: 100%; flex-wrap: wrap; }
  .col[data-col="tools"] { flex: 1 1 100%; }
}


/* ---------- Фильтры на странице «Задачи» ---------- */

.task-filter {
  font-family: inherit; font-size: var(--fs-meta);
  padding: 7px 10px; border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm); background: var(--bg-card);
  color: var(--text-primary); cursor: pointer;
}
.task-filter:hover { border-color: var(--accent); }
/* Включённый фильтр видно сразу — иначе короткий список читается как
   «задач больше нет», а на самом деле их отобрали неделю назад. */
.task-filter.on {
  border-color: var(--accent); background: var(--accent-bg);
  color: var(--accent-on-tint); font-weight: 500;
}
/* Панель фильтров стоит в одной строке с поиском, а он выше на пару
   пикселей — без выравнивания счётчик повисал над строкой. */
.task-found {
  margin-left: auto;
  align-self: center;
  white-space: nowrap;
  font-size: var(--fs-meta);
  color: var(--text-muted);
}
#tasksSection .folder-toolbar { align-items: center; flex-wrap: wrap; }

.task-chips { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; padding: 0 2px 10px; }
.task-chip {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: var(--fs-meta); padding: 4px 6px 4px 11px; border-radius: 999px;
  background: var(--accent-bg); color: var(--accent-on-tint);
}
.task-chip b { font-weight: 600; }
.task-chip button {
  border: none; background: transparent; cursor: pointer; font-family: inherit;
  color: inherit; opacity: .6; padding: 0 4px; font-size: 12px; line-height: 1;
}
.task-chip button:hover { opacity: 1; }
.task-chip-reset {
  border: none; background: transparent; cursor: pointer; font-family: inherit;
  font-size: var(--fs-meta); color: var(--text-muted); text-decoration: underline;
}
.task-chip-reset:hover { color: var(--accent-on-tint); }

/* Метка срока рядом с названием задачи. */
.due-badge {
  display: inline-block; font-size: var(--fs-meta); padding: 1px 8px;
  border-radius: 999px; white-space: nowrap; font-weight: 500;
}
.due-over { background: var(--danger-bg); color: var(--danger); }
.due-soon { background: #fdf6e7; color: var(--warning); }

/* ---------- Карточка проекта ---------- */

.case-card-badges { display: flex; align-items: center; gap: 8px; margin-top: 6px; flex-wrap: wrap; }
.case-chip {
  display: inline-block; font-size: var(--fs-meta); padding: 3px 11px;
  border-radius: 999px; background: var(--accent-bg); color: var(--accent-on-tint);
}
.case-chip.muted { background: var(--bg-subtle); color: var(--text-muted); }

.case-cancelled, .case-readonly {
  margin: 0 0 14px; padding: 10px 13px; border-radius: var(--radius-sm);
  font-size: var(--fs-body); line-height: 1.5;
}
.case-cancelled { background: var(--danger-bg); color: var(--danger); }
.case-readonly { background: var(--bg-subtle); color: var(--text-secondary); }

.case-status-row {
  display: flex; align-items: center; gap: 11px; flex-wrap: wrap;
  padding: 12px 14px; margin-bottom: 18px;
  border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg-card);
}
.case-status-label { font-size: var(--fs-meta); color: var(--text-muted); }
.case-status-row select {
  font-family: inherit; font-size: 13px; padding: 6px 10px;
  border: 1px solid var(--border-strong); border-radius: var(--radius-sm); background: var(--bg-card);
}
.case-status-hint { font-size: var(--fs-meta); color: var(--text-muted); }

.case-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 26px; align-items: start; }
@media (max-width: 980px) { .case-grid { grid-template-columns: 1fr; gap: 20px; } }

.case-sec {
  margin: 0 0 10px; font-size: var(--fs-meta); font-weight: 700;
  text-transform: uppercase; letter-spacing: .07em; color: var(--text-muted);
}

.case-task {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 2px; border-bottom: 1px solid var(--border); font-size: 13px;
}
.case-task:last-child { border-bottom: none; }
.case-task.is-done { color: var(--text-muted); }
.case-task.is-done .case-task-name { text-decoration: line-through; }
.case-task-name { cursor: pointer; }
.case-task-name:hover { color: var(--accent-on-tint); }
.case-task-meta { margin-left: auto; font-size: var(--fs-meta); color: var(--text-muted); white-space: nowrap; }
/* Флажок «задача сделана» — один и тот же в карточке проекта и в списке
   задач: две копии одного элемента неизбежно разъезжаются. */
.tick {
  width: 18px; height: 18px; flex: 0 0 18px; border-radius: 5px; padding: 0;
  border: 1.5px solid var(--border-strong); background: var(--bg-card);
  display: inline-flex; align-items: center; justify-content: center;
  color: #fff; cursor: pointer;
}
button.tick:hover { border-color: var(--success); background: var(--success-bg); }
.tick.on { background: var(--success); border-color: var(--success); cursor: default; }

.case-ev { padding: 8px 0; border-bottom: 1px solid var(--border); font-size: 13px; }
.case-ev:last-child { border-bottom: none; }
.case-ev-name { font-weight: 500; }
.case-ev-meta { font-size: var(--fs-meta); color: var(--text-muted); margin-top: 2px; }

.case-facts { display: grid; grid-template-columns: 152px 1fr; gap: 7px 14px; margin: 0; font-size: 13px; }
.case-facts dt { color: var(--text-muted); }
.case-facts dd { margin: 0; overflow-wrap: anywhere; }
.case-facts dd.empty { color: var(--text-muted); font-style: italic; }
.case-facts dd.case-path { font-size: var(--fs-meta); color: var(--text-muted); }
/* Незаполненные реквизиты — одной строкой, а не столбцом из «не заполнено». */
.case-missing {
  margin: 10px 0 0;
  font-size: var(--fs-meta);
  line-height: 1.5;
  color: var(--text-muted);
}

/* ---------- Список задач: группы по срочности ----------
   Раньше это была таблица на семь колонок — она отвечала на вопрос
   «какие вообще есть задачи», а человек приходит с вопросом «что мне
   делать сейчас». Порядок групп и есть порядок работы. */

.task-group + .task-group { margin-top: 22px; }

.task-group-head {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 0 10px 6px;
  font-size: 13px;
  font-weight: 600;
}
.task-group-dot { width: 8px; height: 8px; border-radius: 50%; background: currentColor; flex: 0 0 8px; }
/* Цифра на светлой плашке того же тона, что и заголовок. Через
   currentColor это не выразить: фон и текст должны быть разными. */
.task-group-count {
  font-size: var(--fs-meta);
  font-weight: 600;
  padding: 1px 9px;
  border-radius: 999px;
}
.task-group-note { font-weight: 400; font-size: var(--fs-meta); color: var(--text-muted); }

.task-group-head.tone-over { color: var(--danger); }
.task-group-head.tone-over .task-group-count { background: var(--danger-bg); }
.task-group-head.tone-soon { color: var(--warning); }
.task-group-head.tone-soon .task-group-count { background: #fdf6e7; }
.task-group-head.tone-ok { color: var(--accent); }
.task-group-head.tone-ok .task-group-count { background: var(--accent-bg); }
.task-group-head.tone-mute { color: var(--text-secondary); }
.task-group-head.tone-mute .task-group-count { background: var(--bg-subtle); }

.task-line {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 10px;
  border-bottom: 1px solid var(--border);
  font-size: var(--fs-body);
}
.task-line:last-child { border-bottom: none; }
.task-line:hover { background: var(--bg-subtle); border-radius: var(--radius-sm); }
.task-line.is-done { color: var(--text-muted); }
.task-line.is-done .task-line-name { text-decoration: line-through; }

.task-line-main { flex: 1; min-width: 0; }
.task-line-name { display: block; font-weight: 500; cursor: pointer; }
.task-line-name:hover { color: var(--accent-on-tint); }
.task-line-sub { display: flex; align-items: center; gap: 8px; margin-top: 3px; }
.task-line-project {
  font-size: var(--fs-meta);
  color: var(--text-muted);
  cursor: pointer;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.task-line-project:hover { color: var(--accent-on-tint); }

.task-line-when { text-align: right; white-space: nowrap; flex: 0 0 auto; }
.task-line-date { display: block; margin-top: 2px; font-size: var(--fs-meta); color: var(--text-muted); }

/* Значок «скопировать название и номер дела».
   Видно всегда: кнопка, которая появляется только при наведении, для
   человека всё равно что её нет. Спокойный, но различимый — рамка и
   бледная заливка, чтобы значок читался как кнопка, а не как точка. */
.copy-case-btn {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg-subtle);
  color: var(--text-secondary);
  cursor: pointer;
  transition: background .12s, color .12s, border-color .12s;
}
.copy-case-btn:hover,
.copy-case-btn:focus-visible {
  background: var(--accent-bg);
  border-color: var(--accent);
  color: var(--accent-on-tint);
}
.copy-case-btn.copied {
  background: var(--success-bg);
  border-color: var(--success);
  color: var(--success);
}

/* Значок стадии в строке задачи мельче, чем в шапке папки: там он
   заголовок экрана, здесь — подпись под названием. */
.stage-badge.stage-mini {
  padding: 1px 8px;
  font-size: 11px;
  letter-spacing: .02em;
}

.task-line .task-del-btn { flex: 0 0 auto; }

/* ---------- Список дел ----------
   Все дела центра по стадиям. Отдельной базы здесь нет — это та же
   таблица, из которой живут папки, задачи и карточка, поэтому перенос
   стадии отсюда виден везде сразу. */

.reg-tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
@media (max-width: 1100px) { .reg-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px) { .reg-tiles { grid-template-columns: 1fr; } }

.reg-tile {
  display: flex; flex-direction: column; align-items: flex-start; gap: 0;
  padding: 16px 18px 15px; text-align: left; cursor: pointer;
  border: 1px solid var(--border); border-radius: var(--radius);
  background: var(--bg-card); box-shadow: var(--shadow-card);
  font-family: inherit; color: var(--text-primary);
  transition: border-color .12s ease, transform .12s ease;
}
.reg-tile:hover { border-color: var(--accent); transform: translateY(-1px); }
.reg-tile-num { font-size: 30px; font-weight: 700; letter-spacing: -.02em; margin-top: 12px; }
.reg-tile-sub { font-size: var(--fs-meta); color: var(--text-muted); margin-top: 2px; }
.reg-tile-note { font-size: var(--fs-meta); color: var(--text-muted); margin-top: 10px; }
.reg-hot { color: var(--danger); font-weight: 500; }

.reg-group + .reg-group { margin-top: 20px; }
.reg-group-head { display: flex; align-items: center; gap: 9px; padding: 0 10px 6px; }
.reg-group-name {
  font-size: var(--fs-meta); font-weight: 700; text-transform: uppercase;
  letter-spacing: .07em; color: var(--text-muted);
}
.reg-group-count {
  font-size: var(--fs-meta); padding: 1px 9px; border-radius: 999px;
  background: var(--bg-subtle); color: var(--text-muted);
}

.reg-row {
  display: flex; align-items: center; gap: 12px;
  padding: 10px; border-bottom: 1px solid var(--border); font-size: var(--fs-body);
}
.reg-row:last-child { border-bottom: none; }
.reg-row:hover { background: var(--bg-subtle); border-radius: var(--radius-sm); }
.reg-name { font-weight: 500; cursor: pointer; min-width: 200px; }
.reg-name:hover { color: var(--accent-on-tint); }

.reg-chip {
  font-size: var(--fs-meta); padding: 2px 10px; border-radius: 999px;
  background: var(--bg-subtle); color: var(--text-muted); white-space: nowrap;
}
.reg-chip.hot { background: var(--danger-bg); color: var(--danger); font-weight: 500; }
.reg-chip.none { background: transparent; border: 1px dashed var(--border-strong); }
.reg-chip.done { background: var(--success-bg); color: var(--success); }
.reg-chip.cancelled { background: var(--danger-bg); color: var(--danger); }

.reg-actions { margin-left: auto; display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.reg-btn {
  height: 30px; padding: 0 11px; font-family: inherit; font-size: var(--fs-meta); font-weight: 500;
  border: 1px solid var(--border-strong); border-radius: var(--radius-sm);
  background: var(--bg-card); color: var(--text-secondary); cursor: pointer; white-space: nowrap;
}
.reg-btn:hover { border-color: var(--accent); color: var(--accent-on-tint); }
.reg-btn.accent { border-color: var(--accent); color: var(--accent-on-tint); font-weight: 600; }
.reg-btn.accent:hover { background: var(--accent); color: #fff; }
/* Разделитель между статусом и стадией в шапке карточки: это два разных
   действия, и статус меняется сразу, а стадия — по кнопке. */
.case-status-sep {
  width: 1px; height: 22px; background: var(--border-strong); margin: 0 4px;
}
/* Кнопка «Открыть в Planfix» — это ссылка (чтобы работало открытие в новой
   вкладке средним щелчком), но выглядеть должна как соседние кнопки. */
a.upload-btn { text-decoration: none; }


/* ============================================================
   Журнал регистрации
   Тот же журнал, что в Excel: две вкладки — два листа, 14 колонок
   с прокруткой вбок, правка прямо в ячейке.
   ============================================================ */

.jr-head-actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }

/* Вкладки — это листы файла, поэтому и выглядят как закладки, а не как
   кнопки-фильтры: переключение между ними меняет набор строк целиком. */
.jr-tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--border-strong); margin: 14px 0 0; }
.jr-tab {
  padding: 8px 15px; border: 0; background: transparent; font-family: inherit;
  font-size: 13.5px; font-weight: 600; color: var(--text-muted); cursor: pointer;
  border-bottom: 2px solid transparent; margin-bottom: -1px;
}
.jr-tab:hover { color: var(--text-secondary); }
.jr-tab.active { color: var(--accent-on-tint); border-bottom-color: var(--accent); }
.jr-tab i {
  font-style: normal; font-weight: 500; font-size: 11.5px; margin-left: 7px;
  background: var(--bg-subtle); color: var(--text-muted); border-radius: 20px; padding: 1px 8px;
}
.jr-tab.active i { background: var(--accent-bg); color: var(--accent-on-tint); }

.jr-filters { display: flex; gap: 8px; flex-wrap: wrap; align-items: flex-end; margin: 12px 0 10px; }
.jr-f { display: flex; flex-direction: column; gap: 3px; font-size: 11px; font-weight: 600;
  letter-spacing: .03em; text-transform: uppercase; color: var(--text-muted); }
.jr-f input, .jr-f select {
  height: 32px; min-width: 150px; padding: 0 9px; font-family: inherit; font-size: 13px;
  font-weight: 400; letter-spacing: 0; text-transform: none; color: var(--text-primary);
  background: var(--bg-card); border: 1px solid var(--border-strong); border-radius: var(--radius-sm);
}
.jr-f.jr-grow { flex: 1; min-width: 240px; }
.jr-f.jr-grow input { width: 100%; }

/* Что отобрано — списком, а не в памяти: фильтров восемь, и забыть про
   включённый проще простого. */
.jr-applied { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; margin-bottom: 10px; }
.jr-applied:empty { display: none; }
.jr-pill {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12px; background: var(--accent-bg); color: var(--accent-on-tint);
  border-radius: 20px; padding: 2px 6px 2px 11px;
}
.jr-pill b { font-weight: 600; }
.jr-pill button {
  border: 0; background: transparent; color: inherit; opacity: .6;
  font: inherit; font-size: 11px; line-height: 1; padding: 3px 5px; cursor: pointer; border-radius: 50%;
}
.jr-pill button:hover { opacity: 1; background: rgba(0,0,0,.07); }
.jr-reset { border: 0; background: transparent; font: inherit; font-size: 12px;
  color: var(--text-muted); text-decoration: underline; cursor: pointer; padding: 2px 4px; }

/* Таблица. Прокрутка внутри своей коробки, а не всей страницей: иначе
   при уходе вправо пропадает и боковая панель. */
.jr-tablebox {
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  background: var(--bg-card); overflow: auto; max-height: calc(100vh - 300px);
}
.jr-table { border-collapse: separate; border-spacing: 0; font-size: 13px; white-space: nowrap; }
.jr-table th {
  position: sticky; top: 0; z-index: 3; background: var(--accent-bg); color: var(--accent-on-tint);
  font-weight: 600; font-size: 11.5px; letter-spacing: .03em; text-transform: uppercase;
  padding: 8px 10px; text-align: left;
  border-bottom: 1px solid var(--border-strong); border-right: 1px solid var(--border);
}
.jr-table thead tr:nth-child(2) th { top: 33px; }
.jr-table th.jr-group { background: #dceae2; text-align: center; }
.jr-table td {
  padding: 7px 10px; vertical-align: top; max-width: 300px;
  overflow: hidden; text-overflow: ellipsis;
  border-bottom: 1px solid var(--border); border-right: 1px solid var(--border);
}
.jr-table tbody tr:hover td { background: var(--bg-subtle); }

/* Первые две колонки закреплены: без них при прокрутке вбок непонятно,
   чья это строка, — а справа как раз стороны и судья. */
.jr-sticky { position: sticky; z-index: 2; background: var(--bg-card); }
.jr-sticky1 { left: 0; }
.jr-sticky2 { left: 116px; font-weight: 600; border-right: 1px solid var(--border-strong); }
.jr-table thead .jr-sticky { z-index: 4; background: var(--accent-bg); }
.jr-table tbody tr:hover .jr-sticky { background: var(--bg-subtle); }

.jr-name { color: var(--text-primary); text-decoration: none; }
.jr-name:hover { color: var(--accent-on-tint); text-decoration: underline; }
/* Незаполненное показываем словами, а не пустотой: сразу видно, где
   в журнале дырки, и это половина его пользы. */
.jr-empty { color: #a9aea5; font-style: italic; }

.jr-editable { cursor: text; }
.jr-editable:hover { box-shadow: inset 0 0 0 1px var(--border-strong); }
.jr-editable:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.jr-editing { padding: 3px 5px !important; background: var(--bg-card); }
.jr-input {
  width: 100%; min-width: 180px; font: inherit; font-size: 13px;
  padding: 4px 7px; border: 2px solid var(--accent); border-radius: 6px;
  background: #fff; color: var(--text-primary);
}
.jr-saving { opacity: .6; }
/* Зелёным подсвечиваем только после ответа сервера — иначе человек
   поверит браузеру, а изменение останется в нём. */
.jr-saved { background: var(--success-bg) !important; transition: background .5s; }

.jr-foot {
  display: flex; gap: 12px; flex-wrap: wrap; align-items: center;
  margin-top: 10px; font-size: 12.5px; color: var(--text-muted);
}
.jr-foot-hint { margin-left: auto; }

/* На телефоне таблица в 14 колонок нечитаема: строка разворачивается
   карточкой — те же поля, но сверху вниз. Правка там выключена:
   попасть пальцем в нужную ячейку и не задеть соседнюю невозможно. */
@media (max-width: 900px) {
  .jr-filters { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
  .jr-f.jr-grow { grid-column: 1 / -1; }
  .jr-f input, .jr-f select { min-width: 0; width: 100%; height: 40px; font-size: 15px; }
  .jr-head-actions { width: 100%; }
  .jr-head-actions button { flex: 1 1 auto; justify-content: center; min-height: 42px; }

  .jr-tablebox { max-height: none; border: 0; background: transparent; overflow: visible; }
  .jr-table, .jr-table tbody, .jr-table tr, .jr-table td { display: block; width: auto; }
  .jr-table thead { display: none; }
  .jr-table tr {
    background: var(--bg-card); border: 1px solid var(--border);
    border-radius: var(--radius-sm); margin-bottom: 8px; padding: 10px 12px;
  }
  .jr-table td {
    border: 0; padding: 3px 0; max-width: none; white-space: normal;
    display: grid; grid-template-columns: 132px 1fr; gap: 10px; align-items: baseline;
  }
  .jr-table td::before {
    content: attr(data-jr-key-label); color: var(--text-muted); font-size: 12px;
  }
  /* Стадия и название — шапка карточки, без подписи слева. */
  .jr-table td.jr-sticky { position: static; display: block; }
  .jr-table td.jr-sticky2 { font-size: 15px; font-weight: 600; padding-bottom: 6px; }
  .jr-table tbody tr:hover td, .jr-table tbody tr:hover .jr-sticky { background: transparent; }
  .jr-editable { cursor: default; }
  .jr-editable:hover { box-shadow: none; }
  .jr-foot-hint { display: none; }
}


/* ============================================================
   Оборудование
   Папка «База данных / Оборудование» — отражение приборов из «Учёта».
   Полоса в шапке папки: в папке прибора — что о нём известно,
   в корне — что лежало там до автоматизации.
   ============================================================ */

.eq-banner {
  margin-top: 10px; padding: 9px 14px; background: var(--accent-bg);
  border-radius: var(--radius-sm); display: flex; align-items: center;
  gap: 12px; flex-wrap: wrap; font-size: 13.5px;
}
.eq-banner.eq-warn { background: #fdf3d9; border: 1px solid #ecd9a4; }
.eq-spacer { flex: 1; }
.eq-fact { color: var(--text-secondary); }
.eq-strong { font-weight: 600; }

.eq-badge {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 2px 10px; border-radius: 999px;
  font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em;
}
.eq-badge::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.eq-ok     { background: #dcf3e3; color: #1e6b3f; }
.eq-busy   { background: #dceaf8; color: #1a5488; }
.eq-bad    { background: #f7dcda; color: #a3241c; }
.eq-warn-b { background: #fdf3d9; color: #8a6d0a; }
.eq-muted  { background: var(--bg-subtle); color: var(--text-muted); }
/* Классификация — не состояние, а свойство: точки перед ней нет,
   и капс ей не нужен. */
.eq-plain {
  background: var(--bg-card); color: var(--text-secondary);
  border: 1px solid var(--border-strong); text-transform: none; font-weight: 600;
}
.eq-plain::before { display: none; }

.eq-btn {
  height: 32px; padding: 0 12px; font-family: inherit; font-size: 13px; font-weight: 500;
  border: 1px solid var(--border-strong); border-radius: var(--radius-sm);
  background: var(--bg-card); color: var(--text-secondary); cursor: pointer; white-space: nowrap;
}
.eq-btn:hover { border-color: var(--accent); color: var(--accent-on-tint); }
.eq-accent { border-color: var(--accent); color: var(--accent-on-tint); font-weight: 600; }

#instrumentForm input[type="file"] { font-size: 13px; padding: 6px 0; }
#instrumentForm .modal-actions { padding-bottom: 4px; }

@media (max-width: 720px) {
  .eq-banner { gap: 8px; }
  .eq-spacer { display: none; }
  .eq-btn { flex: 1 1 auto; }
}

/* ============================================================
   Настройки администратора.

   Вкладки слева, содержимое справа — так же, как разделы устроены
   в самом приложении, чтобы не заводить второй язык навигации.
   На узком экране вкладки ложатся в строку сверху.
   ============================================================ */

.settings-body { display: flex; gap: 24px; align-items: flex-start; padding: 0 0 40px; }

.settings-tabs {
  display: flex; flex-direction: column; gap: 2px;
  flex: 0 0 220px; position: sticky; top: 16px;
}
.settings-tab {
  text-align: left; border: none; background: transparent; cursor: pointer;
  padding: 9px 12px; border-radius: var(--radius-sm);
  font: inherit; font-size: var(--fs-body); font-weight: 500;
  color: var(--text-secondary);
}
.settings-tab:hover { background: var(--bg-subtle); color: var(--text-primary); }
.settings-tab.active { background: var(--accent-bg); color: var(--accent-on-tint); font-weight: 600; }

.settings-pane { flex: 1; min-width: 0; }

.settings-block + .settings-block { margin-top: 32px; }

.access-title { font-size: var(--fs-title); font-weight: 600; margin: 0 0 6px; }
.access-sub {
  font-size: var(--fs-body); font-weight: 600; margin: 22px 0 8px;
  color: var(--text-secondary);
}
.access-note {
  font-size: var(--fs-body); color: var(--text-secondary);
  margin: 8px 0 14px; max-width: 70ch; line-height: 1.5;
}
.access-hint { font-size: var(--fs-meta); color: var(--text-muted); }

/* --- «Сотрудники»: люди слева, подробности справа --- */

.access-layout { display: flex; gap: 20px; align-items: flex-start; }
.access-side { flex: 0 0 260px; display: flex; flex-direction: column; gap: 8px; }
.access-people {
  display: flex; flex-direction: column; gap: 2px;
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 6px;
}
/* «Добавить» — под списком, а не над: список читают сверху вниз, и
   действие логично стоит там, где он кончается. */
.access-add {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  border: 1px dashed var(--border-strong); background: transparent;
  border-radius: var(--radius); padding: 10px;
  font: inherit; font-size: var(--fs-body); font-weight: 500;
  color: var(--text-secondary); cursor: pointer;
}
.access-add:hover { background: var(--bg-subtle); color: var(--text-primary); }
.access-add.on {
  background: var(--accent-bg); border-style: solid;
  border-color: var(--accent); color: var(--accent-on-tint);
}

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

/* Карточка для вкладки с одной настройкой: без неё одинокое поле
   болтается в пустоте на весь экран. */
.settings-card {
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 20px; max-width: 680px;
}
.access-person {
  display: flex; flex-direction: column; gap: 2px; text-align: left;
  border: none; background: transparent; cursor: pointer;
  padding: 8px 10px; border-radius: var(--radius-sm); font: inherit;
}
.access-person:hover { background: var(--bg-subtle); }
.access-person.on { background: var(--accent-bg); }
.access-person-name { font-size: var(--fs-body); font-weight: 600; color: var(--text-primary); }
.access-person-sub { font-size: var(--fs-meta); color: var(--text-muted); }

.access-detail {
  flex: 1; min-width: 0;
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 18px 20px;
}

.access-rights { display: grid; gap: 10px; }
.access-right {
  display: flex; gap: 10px; align-items: flex-start;
  font-size: var(--fs-body); cursor: pointer;
}
.access-right input { margin-top: 3px; accent-color: var(--accent); }
.access-right input:disabled { cursor: not-allowed; }

/* --- таблицы правил и календаря --- */

.access-rules { width: 100%; border-collapse: collapse; font-size: var(--fs-body); }
.access-rules th {
  text-align: left; font-size: var(--fs-meta); font-weight: 600;
  color: var(--text-muted); padding: 6px 10px 6px 0;
  border-bottom: 1px solid var(--border);
}
.access-rules td { padding: 8px 10px 8px 0; border-bottom: 1px solid var(--border); vertical-align: top; }
.access-rules tr:last-child td { border-bottom: none; }
.access-path { color: var(--text-primary); font-weight: 500; }
.access-rules select { padding: 5px 8px; border-radius: 6px; border: 1px solid var(--border); font: inherit; font-size: var(--fs-body); }

.link-btn {
  border: none; background: none; padding: 0; cursor: pointer;
  font: inherit; font-size: var(--fs-body); color: var(--danger);
  text-decoration: underline; text-underline-offset: 2px;
}

/* --- формы настроек --- */

.settings-form { display: grid; gap: 16px; max-width: 620px; }
.settings-field { display: grid; gap: 5px; }
.settings-label {
  display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap;
  font-size: var(--fs-body); font-weight: 600;
}
.settings-origin { font-size: var(--fs-meta); font-weight: 400; color: var(--text-muted); }
.settings-field input, .settings-field select {
  padding: 9px 12px; border-radius: var(--radius-sm);
  border: 1px solid var(--border); font: inherit; font-size: var(--fs-body);
  background: var(--bg-card); color: var(--text-primary);
}
.settings-field input:focus, .settings-field select:focus {
  outline: 2px solid var(--accent); outline-offset: -1px; border-color: transparent;
}
.settings-hint { font-size: var(--fs-meta); color: var(--text-muted); line-height: 1.45; }

.settings-actions { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-top: 4px; }
.settings-inline { display: flex; gap: 8px; align-items: center; font-size: var(--fs-body); }
.settings-inline select { padding: 7px 10px; border-radius: 6px; border: 1px solid var(--border); font: inherit; }

.settings-row {
  display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-top: 14px;
  padding-top: 14px; border-top: 1px solid var(--border);
}
.settings-row input, .settings-row select {
  padding: 8px 10px; border-radius: var(--radius-sm);
  border: 1px solid var(--border); font: inherit; font-size: var(--fs-body);
}
.settings-row input[type="text"] { flex: 1; min-width: 200px; }

.settings-probe { font-size: var(--fs-body); color: var(--text-muted); }
.settings-probe.good { color: var(--success); }
.settings-probe.bad { color: var(--danger); }

@media (max-width: 900px) {
  .settings-body { flex-direction: column; }
  .settings-tabs { flex-direction: row; flex: none; position: static; width: 100%; overflow-x: auto; }
  .access-layout { flex-direction: column; }
  .access-side { flex: none; width: 100%; }
}

/* Справочники: три коротких списка рядом, а не в столбик — так видно
   все три разом и не приходится листать. */
.lists-grid {
  display: grid; gap: 16px;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  align-items: start;
}
.lists-card { max-width: none; padding: 18px; }
.lists-values { margin: 10px 0 0; max-height: 320px; overflow-y: auto; }
.lists-row {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 7px 0; border-bottom: 1px solid var(--border);
  font-size: var(--fs-body);
}
.lists-row:last-child { border-bottom: none; }
.lists-card .settings-row { margin-top: 12px; }
.lists-card .settings-row input { flex: 1; min-width: 0; }

/* Галочки специалистов в карточке проекта: список с прокруткой, чтобы
   окно не росло от количества людей. */
#ceExpertsBox, #expertsPicker {
  max-height: 240px; overflow-y: auto;
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  padding: 6px; background: var(--bg-card);
}