/* МКА Project — стили компонентов. Ревизия C: полная замена под экспорты
   docs/design/NN-*. Только var(--...) из tokens.css. */

* { box-sizing: border-box; }
body {
  font-family: var(--font-ui);
  background: var(--bg-page);
  color: var(--text-primary);
  margin: 0;
  font-size: var(--fs-body);
  line-height: var(--lh-normal);
  /* Нативные попапы select, календари date-инпутов и скроллбары — тёмные. */
  color-scheme: dark;
}
::-webkit-scrollbar { width: var(--scrollbar-w); height: var(--scrollbar-w); }
::-webkit-scrollbar-track { background: var(--bg-page); }
::-webkit-scrollbar-thumb { background: var(--scrollbar-thumb); border-radius: 10px; }

h1, h2, h3, p, dl, dd { margin: 0; }
button { font-family: var(--font-ui); }

/* ═══════ Каркас внутренних ролей: сайдбар + main ═══════ */
.app { display: flex; width: 100%; height: 100vh; overflow: hidden; }
.sidebar {
  width: var(--sidebar-w); flex-shrink: 0; display: flex; flex-direction: column;
  height: 100%; z-index: 10;
  background: var(--bg-sidebar);
  border-right: 1px solid var(--border-hairline);
}
.logo { display: flex; align-items: center; gap: 12px; padding: 32px 32px 40px; }
/* Логотип-картинка (logo_dark.png, белый на прозрачном, обрезан по рисунку) —
   сайдбар/топбар/логин */
.logo-img { height: 32px; width: auto; display: block; }
.nav { flex-grow: 1; display: flex; flex-direction: column; gap: 4px; padding: 0 16px; }
.nav-item {
  display: flex; align-items: center; gap: 12px; padding: 10px 16px;
  border-radius: var(--radius-md); color: var(--text-secondary);
  text-decoration: none; font-size: var(--fs-body); font-weight: var(--fw-medium);
  transition: color .15s;
}
.nav-item:hover { color: var(--text-bright); }
.nav-item.active { background: var(--bg-active); color: var(--text-bright); }
.nav-item .ph { font-size: var(--fs-icon); }
.sidebar-user {
  padding: 16px; border-top: 1px solid var(--border-hairline);
}
.sidebar-user-row { display: flex; align-items: center; gap: 12px; padding: 8px; }
.sidebar-user-name { font-size: var(--fs-small); font-weight: var(--fw-medium); display: block; }
.sidebar-user-role { font-size: var(--fs-micro); color: var(--text-secondary); line-height: var(--lh-none); }
.sidebar-user .logout-form { margin-left: auto; }
.logout-btn { padding: 4px; font-size: var(--fs-button-lg); }

.main { flex-grow: 1; display: flex; flex-direction: column; min-width: 0; height: 100%; overflow-y: auto; }

/* ═══════ Каркас клиента: топбар (01-client) ═══════ */
.client-shell { height: 100vh; display: flex; flex-direction: column; overflow: hidden; }
.topbar {
  height: var(--header-h); flex-shrink: 0; display: flex; align-items: center;
  justify-content: space-between; padding: 0 var(--content-pad);
  background: var(--bg-page); border-bottom: 1px solid var(--border-hairline);
  z-index: 20;
}
.topbar-brand { display: flex; align-items: center; gap: 16px; }
.topbar-title { display: flex; flex-direction: column; }
.topbar-name { font-size: var(--fs-body); font-weight: var(--fw-semibold); letter-spacing: var(--ls-tight); line-height: 1.25; }
.topbar-sub {
  font-size: var(--fs-micro); color: var(--text-secondary);
  font-weight: var(--fw-medium); text-transform: uppercase; letter-spacing: var(--ls-wide);
}
.topbar-actions { display: flex; align-items: center; gap: 16px; }
.client-main { flex: 1; overflow-y: auto; }
.client-main > .content {
  max-width: var(--content-max); margin: 0 auto; padding: var(--content-pad);
  display: flex; flex-direction: column; gap: 32px;
}
.content-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.content-head .page-title { font-size: var(--fs-page-title); font-weight: var(--fw-medium); }
.content-meta { display: flex; align-items: center; gap: 12px; font-size: var(--fs-body); color: var(--text-secondary); }

/* ═══════ Шапка страницы (внутренние роли) ═══════ */
.page-header {
  height: var(--header-h); flex-shrink: 0; display: flex; align-items: center;
  justify-content: space-between; padding: 0 var(--content-pad);
  border-bottom: 1px solid var(--border-hairline);
}
.page-title { font-size: var(--fs-title); font-weight: var(--fw-medium); }
.header-tools { display: flex; align-items: center; gap: 24px; }
.search { position: relative; }
.search .ph {
  position: absolute; left: 12px; top: 50%; transform: translateY(-50%);
  color: var(--text-secondary); font-size: var(--fs-title);
}
.search input {
  background: var(--bg-inset); border: 1px solid var(--border-hairline);
  border-radius: var(--radius-sm); outline: none;
  padding: 6px 16px 6px 40px; font-size: var(--fs-body);
  color: var(--text-primary); width: 256px; font-family: var(--font-ui);
  transition: border-color .15s;
}
.search input::placeholder { color: var(--text-secondary); }
.search input:focus { border-color: var(--border-focus); }

.content {
  flex-grow: 1; padding: var(--content-pad);
  display: flex; flex-direction: column; gap: 24px;
}
/* Дети контентной колонки не сжимаются при нехватке высоты вьюпорта —
   скроллит .main (фикс налезания фильтра/пагинации на карточку). */
.content > * { flex-shrink: 0; }
/* Регион списка проектов: фильтр, карточка, пагинация — колонкой с зазором. */
.projects-region { display: flex; flex-direction: column; gap: 24px; }

/* ═══════ Кнопки ═══════ */
.btn-primary {
  background: var(--btn-primary-bg); color: var(--text-inverse);
  font-size: var(--fs-body); font-weight: var(--fw-medium);
  padding: 6px 16px; border-radius: var(--radius-sm);
  border: none; cursor: pointer; transition: background .15s;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  text-decoration: none;
}
.btn-primary:hover { background: var(--btn-primary-bg-hover); }
.btn-primary:disabled { opacity: .5; cursor: default; }
/* Крупная primary: футер КП (05-kp/manager), CTA приёмки (05-kp/review) */
.btn-primary.btn-lg { padding: 10px 32px; border-radius: var(--radius-md); font-weight: var(--fw-semibold); }
/* Полноширинная CTA клиента (05-kp/client) */
.btn-primary.btn-cta {
  width: 100%; padding: 14px; border-radius: var(--radius-md);
  font-size: var(--fs-button-lg); font-weight: var(--fw-semibold);
}

/* Тёмная кнопка-чип (02-project: «Задача», «Взять», «Создать задачи») */
.btn-secondary {
  background: var(--bg-chip); color: var(--text-bright);
  font-size: var(--fs-body); font-weight: var(--fw-medium);
  padding: 8px 16px; border-radius: var(--radius-md);
  border: none; cursor: pointer; transition: background .15s;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  text-decoration: none;
}
.btn-secondary:hover { background: var(--bg-hover); }
.btn-secondary:disabled { opacity: .3; cursor: default; }
.btn-secondary.btn-sm { padding: 6px 12px; border-radius: var(--radius-sm); font-size: var(--fs-small); }

/* Контурная кнопка (05-kp/manager: «Сохранить черновик») */
.btn-outline {
  background: transparent; color: var(--text-secondary);
  font-size: var(--fs-body); font-weight: var(--fw-medium);
  padding: 10px 24px; border-radius: var(--radius-md);
  border: 1px solid var(--border-hairline); cursor: pointer;
  transition: border-color .15s, color .15s;
  display: inline-flex; align-items: center; gap: 8px; text-decoration: none;
}
.btn-outline:hover { border-color: var(--border-hover); color: var(--text-bright); }
/* Компактная контурная в шапке (staff: «+ Отсутствие») */
.btn-outline.btn-sm { padding: 6px 16px; border-radius: var(--radius-sm); color: var(--text-bright); }
.btn-outline.btn-sm:hover { background: var(--bg-card); }

/* Призрачная кнопка: текстовые действия, «Отмена», иконки */
.btn-ghost {
  background: none; border: none; cursor: pointer;
  font-size: var(--fs-body); font-weight: var(--fw-medium);
  color: var(--text-secondary); transition: color .15s, background .15s;
  padding: 6px 10px; border-radius: var(--radius-sm);
  display: inline-flex; align-items: center; gap: 8px; text-decoration: none;
}
.btn-ghost:hover { color: var(--text-bright); }
.btn-ghost:disabled { opacity: .3; cursor: default; }
/* Иконка-кнопка с подложкой на ховер (вид-переключатели, kebab, закрытие) */
.btn-icon { padding: 6px; border-radius: var(--radius-xs); }
.btn-icon:hover { background: var(--bg-card); }
.btn-icon .ph { font-size: var(--fs-icon); }

/* Действие в строке клиента (01-client: Результат/Вьювер/Чат) */
.btn-action {
  background: none; border: none; cursor: pointer; padding: 0;
  display: inline-flex; align-items: center; gap: 6px; position: relative;
  font-size: var(--fs-small); font-weight: var(--fw-medium);
  color: var(--text-secondary); transition: color .15s; text-decoration: none;
}
.btn-action .ph { font-size: var(--fs-title); }
.btn-action:hover { color: var(--text-bright); }
.btn-action.ready { color: var(--text-bright); }
.btn-action:disabled { opacity: .3; cursor: not-allowed; }
.btn-action .chat-dot { position: absolute; top: -2px; right: -6px; margin: 0; }

/* ═══════ Чипы фильтров и segmented ═══════ */
.filter-bar { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.filter-group { display: flex; align-items: center; gap: 16px; }
.chip {
  padding: 6px 12px; border-radius: var(--radius-sm);
  border: 1px solid var(--border-hairline); background: var(--bg-card);
  font-size: var(--fs-body); color: var(--text-primary);
  display: inline-flex; align-items: center; gap: 8px; cursor: pointer;
  transition: border-color .15s; position: relative;
}
.chip:hover { border-color: var(--border-hover); }
.chip .chip-label { color: var(--text-secondary); }
.chip .ph { color: var(--text-secondary); font-size: var(--fs-body); }
/* Чип-select: нативный select растянут поверх чипа (механика фильтра). */
.chip-select {
  position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%;
}
.sort-hint { display: flex; align-items: center; gap: 8px; font-size: var(--fs-small); color: var(--text-secondary); }

/* Segmented крупный (01-staff: «Все проекты / Мои») */
.segmented {
  background: var(--bg-inset); padding: 4px; border-radius: var(--radius-md);
  border: 1px solid var(--border-hairline); display: inline-flex; gap: 2px;
}
.segmented-item {
  padding: 6px 16px; border-radius: var(--radius-sm);
  font-size: var(--fs-chip); font-weight: var(--fw-medium);
  color: var(--text-secondary); cursor: pointer; border: none; background: none;
  text-decoration: none; transition: color .15s, background .15s;
}
.segmented-item:hover { color: var(--text-bright); }
.segmented-item.active {
  background: var(--bg-card); color: var(--text-bright);
  box-shadow: var(--shadow-segmented);
}
/* Segmented малый (02-project: статус задачи «К работе/В работе/Готово») */
.segmented.sm { padding: 2px; border-radius: var(--radius-sm); border: none; }
.segmented.sm .segmented-item { padding: 4px 10px; border-radius: var(--radius-sm); font-size: var(--fs-label); }
.segmented.sm .segmented-item.active { background: var(--bg-chip); box-shadow: none; }

/* ═══════ Бейджи, теги, индикаторы ═══════ */
.badge {
  display: inline-block; padding: 4px 10px; border-radius: var(--radius-sm);
  font-size: var(--fs-small); font-weight: var(--fw-medium);
  border: 1px solid transparent; white-space: nowrap;
}
.badge-draft    { color: var(--status-draft);    background: var(--status-draft-bg); }
.badge-quoted   { color: var(--status-quoted);   background: var(--status-quoted-bg); border-color: var(--status-quoted-border); }
.badge-work     { color: var(--status-work);     background: var(--status-work-bg); }
.badge-review   { color: var(--status-review);   background: var(--status-review-bg); }
.badge-accepted { color: var(--status-accepted); background: var(--status-accepted-bg); }
.badge-closed   { color: var(--status-closed);   background: var(--status-closed-bg); opacity: var(--status-closed-opacity); }
.badge-cancelled { color: var(--status-cancelled); background: var(--status-cancelled-bg); border-color: var(--status-cancelled-border); }
/* Документы: sent → approval (ожидание), signed/paid → done */
.badge-approval { color: var(--status-review);   background: var(--status-review-bg); }
.badge-done     { color: var(--status-accepted); background: var(--status-accepted-bg); }
.badge.badge-sm { padding: 2px 8px; font-size: var(--fs-micro); }

/* Теги услуг — пилюли (эталон) */
.tag {
  display: inline-block; padding: 2px 8px; border-radius: var(--radius-full);
  font-size: var(--fs-micro); font-weight: var(--fw-medium); white-space: nowrap;
}
.tag-npm { color: var(--service-npm); background: var(--service-npm-bg); }
.tag-vpm { color: var(--service-vpm); background: var(--service-vpm-bg); }
.tag-viz { color: var(--service-viz); background: var(--service-viz-bg); }
.tag-ifc { color: var(--service-ifc); background: var(--service-ifc-bg); }
.tag-model_check { color: var(--service-model_check); background: var(--service-model_check-bg); }
.tag-group { display: flex; flex-wrap: wrap; gap: 6px; }

/* Индикаторы строки проекта: НОВЫЙ (с крестиком), СРОЧНЫЙ, точка чата */
.badge-new, .badge-urgent {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 6px; border-radius: var(--radius-xs);
  font-size: var(--fs-micro); font-weight: var(--fw-bold);
  text-transform: uppercase; margin-left: 8px; vertical-align: middle;
}
.badge-new { color: var(--badge-new-text); background: var(--badge-new-bg); }
.badge-urgent { color: var(--badge-urgent-text); background: var(--badge-urgent-bg); }
/* Индикаторы событий КП (ревизия C, доработка): «КП» у клиента,
   «КП согласовано» у руководителя; гаснут заходом в проект. */
.badge-quote-sent, .badge-quote-ok {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 6px; border-radius: var(--radius-xs);
  font-size: var(--fs-micro); font-weight: var(--fw-bold);
  text-transform: uppercase; margin-left: 8px; vertical-align: middle;
  white-space: nowrap;
}
.badge-quote-sent { color: var(--badge-butter-text); background: var(--badge-butter-bg); }
.badge-quote-ok { color: var(--badge-sage-text); background: var(--badge-sage-bg); }
.badge-new-close {
  border: 0; background: transparent; color: inherit; cursor: pointer;
  font-size: inherit; font-weight: inherit; padding: 0; line-height: 1;
}
.chat-dot {
  display: inline-block; width: 8px; height: 8px; border-radius: var(--radius-full);
  background: var(--notify); box-shadow: var(--notify-glow);
  margin-left: 8px; vertical-align: middle; flex-shrink: 0;
}
.pin-mark { color: var(--doc-dot-wait); font-size: var(--fs-micro); }
.pin-btn { color: var(--text-secondary); }
.pin-btn:hover, .pin-btn.pinned { color: var(--doc-dot-wait); }

/* ═══════ Аватары ═══════ */
.avatar-stack { display: flex; }
.avatar-stack .avatar + .avatar { margin-left: -8px; }
.avatar {
  width: 28px; height: 28px; border-radius: var(--radius-full); flex-shrink: 0;
  border: 2px solid var(--border-avatar);
  display: flex; align-items: center; justify-content: center;
  font-size: var(--fs-micro); font-weight: var(--fw-bold);
}
.avatar.lg { width: 32px; height: 32px; font-size: var(--fs-small); }
.avatar.sm { width: 24px; height: 24px; font-size: var(--fs-nano); border-width: 1px; }
.avatar.a1  { background: var(--avatar-1-bg);  color: var(--avatar-1-text); }
.avatar.a2  { background: var(--avatar-2-bg);  color: var(--avatar-2-text); }
.avatar.a3  { background: var(--avatar-3-bg);  color: var(--avatar-3-text); }
.avatar.a4  { background: var(--avatar-4-bg);  color: var(--avatar-4-text); }
.avatar.a5  { background: var(--avatar-5-bg);  color: var(--avatar-5-text); }
.avatar.a6  { background: var(--avatar-6-bg);  color: var(--avatar-6-text); }
.avatar.a7  { background: var(--avatar-7-bg);  color: var(--avatar-7-text); }
.avatar.a8  { background: var(--avatar-8-bg);  color: var(--avatar-8-text); }
.avatar.a9  { background: var(--avatar-9-bg);  color: var(--avatar-9-text); }
.avatar.a10 { background: var(--avatar-10-bg); color: var(--avatar-10-text); }
.avatar.more { background: var(--avatar-more-bg); color: var(--avatar-more-text); }
.avatar.self { background: var(--avatar-self-bg); color: var(--avatar-self-text); }

/* ═══════ Карточки ═══════ */
.card {
  background: var(--bg-card); border: 1px solid var(--border-hairline);
  border-radius: var(--radius-card);
}
.card-pad { padding: 24px; }
.table-card { overflow: hidden; }

/* Метрики (адаптация под ревизию C: функциональная вставка, в эталоне нет) */
.metric-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.metric { padding: 20px 24px; }
.metric-label {
  font-size: var(--fs-label); color: var(--text-secondary); display: block;
  text-transform: uppercase; letter-spacing: var(--ls-wide); margin-bottom: 4px;
}
.metric-value { font-size: var(--fs-page-title); font-weight: var(--fw-semibold); letter-spacing: var(--ls-tight); }
.metric-value.accent-ok   { color: var(--doc-dot-ok); }
.metric-value.accent-wait { color: var(--doc-dot-wait); }
.metric-value.accent-risk { color: var(--doc-dot-risk); }

/* ═══════ Таблица ═══════ */
.table { width: 100%; text-align: left; border-collapse: collapse; }
.table th {
  padding: 16px 24px; font-size: var(--fs-label); font-weight: var(--fw-medium);
  color: var(--text-secondary); text-transform: uppercase; letter-spacing: var(--ls-wide);
  border-bottom: 1px solid var(--border-hairline);
}
.table td {
  padding: 20px 24px; font-size: var(--fs-body); vertical-align: middle;
  border-bottom: 1px solid var(--border-hairline);
}
.table tbody tr:last-child td { border-bottom: none; }
.table tbody tr { transition: background .15s; }
.table tbody tr:hover { background: var(--bg-row-hover); }
.table .t-right { text-align: right; }
tr.row-pinned { background: var(--bg-row-pinned); }
td.cell-id     { font-weight: var(--fw-medium); }
td.cell-client { color: var(--text-secondary); }
td.cell-name   { font-weight: var(--fw-medium); color: var(--text-bright); }
td.cell-date   { color: var(--text-secondary); white-space: nowrap; }
.cell-sub { display: block; font-size: var(--fs-small); color: var(--text-secondary); font-weight: var(--fw-regular); margin-top: 2px; }
.cell-overdue { color: var(--error); }
.row-link { color: inherit; text-decoration: none; }
.row-link:hover { text-decoration: underline; }
/* Клиентская таблица просторнее (01-client: py-6, первый столбец px-8) */
.client-table th { padding: 20px 24px; }
.client-table td { padding: 24px; }
.client-table th:first-child, .client-table td:first-child { padding-left: 32px; }
.client-table th:last-child, .client-table td:last-child { padding-right: 32px; }
.row-actions { display: flex; align-items: center; justify-content: flex-end; gap: 16px; }

/* Ряд-CTA «Создать новый проект» (01-client) */
tr.row-cta:hover { background: var(--bg-row-hover-soft); }
.dashed-cta {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  border: 2px dashed var(--border-hairline); border-radius: var(--radius-md);
  padding: 16px; color: var(--text-secondary); cursor: pointer;
  font-size: var(--fs-body); font-weight: var(--fw-medium);
  transition: color .15s, border-color .15s; background: none; width: 100%;
}
.dashed-cta:hover { color: var(--text-bright); border-color: var(--border-hover); }
.dashed-cta .ph { font-size: var(--fs-icon); }

/* ═══════ Пагинация (эталон: вне карточки) ═══════ */
.pagination {
  display: flex; align-items: center; justify-content: space-between;
  font-size: var(--fs-small); color: var(--text-secondary);
}
.pagination-pages { display: flex; align-items: center; gap: 8px; }
.page-arrow {
  padding: 6px; border: 1px solid var(--border-hairline); border-radius: var(--radius-xs);
  background: none; color: var(--text-secondary); cursor: pointer; line-height: 1;
  display: inline-flex; transition: background .15s;
}
.page-arrow:hover { background: var(--bg-active); color: var(--text-primary); }
.page-arrow:disabled { opacity: .3; cursor: default; }
.page-list { display: flex; align-items: center; gap: 4px; }
.page-n {
  width: 28px; height: 28px; border-radius: var(--radius-xs); border: none;
  background: none; color: var(--text-secondary); font-size: var(--fs-small);
  display: flex; align-items: center; justify-content: center; cursor: pointer;
  transition: background .15s;
}
.page-n:hover { background: var(--bg-active); color: var(--text-primary); }
.page-n.current { background: var(--bg-active); color: var(--text-bright); }

/* ═══════ Сотрудники (docs/design/staff: staff.html + staff_edit.html) ═══════ */
.staff-layout { display: flex; gap: 32px; align-items: flex-start; }
.staff-main { width: 65%; min-width: 0; display: flex; flex-direction: column; gap: 24px; }
.staff-layout-single .staff-main { width: 100%; }
.staff-cell { display: flex; align-items: center; gap: 12px; }
.staff-cell .avatar { width: 32px; height: 32px; }
.staff-cell-info { display: flex; flex-direction: column; }
.staff-cell-name { font-size: var(--fs-body); font-weight: var(--fw-medium); color: var(--text-bright); }
.staff-cell-role { font-size: var(--fs-small); color: var(--text-secondary); }
td.cell-email { color: var(--text-secondary); }
.row-selectable { cursor: pointer; }
tr.row-selectable.selected { background: var(--bg-row-selected); }
/* Деактивированный: приглушение имени/почты (мок 0.6 → 0.8, контраст ≥4.5:1) */
tr.row-off .staff-cell-name, tr.row-off .cell-email { opacity: .8; }
/* Статусы строки: «Активен» — badge-done; отсутствие сегодня — butter
   (функциональный статус сверх мока); «Деактивирован» — тёмная плашка. */
.badge-away { color: var(--badge-butter-text); background: var(--badge-butter-bg); }
.badge-off  { color: var(--text-secondary); background: var(--bg-chip); }

/* Панель «Отсутствия»: одна карточка — календарь, карточки периодов, dashed-CTA */
.absence-card { width: 35%; padding: 32px; display: flex; flex-direction: column; gap: 32px; }
.absence-title { font-size: var(--fs-body); font-weight: var(--fw-medium); }
.cal-head { display: flex; align-items: center; justify-content: space-between; }
.cal-title { font-size: var(--fs-body); font-weight: var(--fw-medium); }
.cal-nav { display: flex; gap: 8px; }
.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); text-align: center; }
.cal-dow {
  font-size: var(--fs-micro); text-transform: uppercase; letter-spacing: var(--ls-wide);
  font-weight: var(--fw-medium); color: var(--text-secondary); margin: 24px 0 12px;
}
.cal-days { row-gap: 4px; }
.cal-cell { padding: 8px 0; font-size: var(--fs-body); }
.cal-out { color: var(--cal-out-text); }
/* Выходные производственного календаря — функциональная вставка (мок дни не различает) */
.cal-off { color: var(--text-secondary); }
.cal-abs-vacation { background: var(--cal-abs-vacation-bg); color: var(--cal-abs-vacation); }
.cal-abs-sick     { background: var(--cal-abs-sick-bg);     color: var(--cal-abs-sick); }
.cal-abs-other    { background: var(--cal-abs-other-bg);    color: var(--cal-abs-other); }
.cal-abs-start { border-top-left-radius: var(--radius-sm); border-bottom-left-radius: var(--radius-sm); }
.cal-abs-end { border-top-right-radius: var(--radius-sm); border-bottom-right-radius: var(--radius-sm); }
.cal-today-ring {
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; border-radius: var(--radius-full);
  border: 1px solid var(--cal-today-ring);
}
.absence-list { flex: 1; display: flex; flex-direction: column; gap: 12px; }
.absence-item {
  padding: 16px; border: 1px solid var(--border-hairline); border-radius: var(--radius-md);
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
}
.absence-item-info { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.absence-dates { font-size: var(--fs-body); font-weight: var(--fw-medium); }
.absence-kind-row { display: inline-flex; align-items: center; gap: 6px; }
.absence-dot { width: 6px; height: 6px; border-radius: var(--radius-full); flex-shrink: 0; }
.dot-vacation { background: var(--badge-sage-text); }
.dot-sick     { background: var(--badge-lavender-text); }
.dot-other    { background: var(--badge-peach-text); }
.absence-kind {
  font-size: var(--fs-label); text-transform: uppercase;
  letter-spacing: var(--ls-wide); color: var(--text-secondary);
}
.absence-del { color: var(--icon-ghost); }
.absence-del:hover { color: var(--error); background: none; }
.empty-state-inline { font-size: var(--fs-body); color: var(--text-secondary); }

/* Переключатель «Активен» (staff_edit) */
.switch-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.switch-info { display: flex; flex-direction: column; gap: 2px; }
.switch-label { font-size: var(--fs-body); font-weight: var(--fw-medium); }
.switch-sub { font-size: var(--fs-small); color: var(--text-secondary); }
.switch {
  position: relative; width: 36px; height: 20px; border-radius: var(--radius-full);
  border: none; background: var(--bg-chip); cursor: pointer;
  transition: background .15s; flex-shrink: 0; padding: 0;
}
.switch.on { background: var(--badge-sage-text); }
.switch-knob {
  position: absolute; top: 2px; left: 2px; width: 16px; height: 16px;
  border-radius: var(--radius-full); background: var(--text-bright);
  transition: transform .15s;
}
.switch.on .switch-knob { transform: translateX(16px); }

/* ═══════ Клиенты (docs/design/clients: clients.html + clients_edit.html) ═══════ */
.clients-layout { display: flex; gap: 24px; align-items: flex-start; }
.clients-list { width: 35%; padding: 0; overflow: hidden; }
.client-item { padding: 20px 24px; cursor: pointer; transition: background .15s; }
.client-item:not(:last-child) { border-bottom: 1px solid var(--border-hairline); }
.client-item:hover { background: var(--bg-row-hover-soft); }
.client-item.selected { background: var(--bg-row-selected); }
.client-item-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.client-item-head i { color: var(--text-secondary); }
.client-item-name { font-size: var(--fs-body); font-weight: var(--fw-medium); color: var(--text-bright); }
.client-item-sub { font-size: var(--fs-small); color: var(--text-secondary); margin-top: 4px; }

/* Карточка выбранного клиента: шапка + секции с линейками */
.company-card { width: 65%; min-width: 0; padding: 0; overflow: hidden; }
.company-head {
  padding: 24px 32px; border-bottom: 1px solid var(--border-hairline);
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
}
/* Мок: text-xl (20px) → кластер fs-title (18px, заголовки шапок) */
.company-title { font-size: var(--fs-title); font-weight: var(--fw-medium); color: var(--text-bright); }
.company-since { font-size: var(--fs-small); color: var(--text-secondary); margin-top: 4px; }
.company-section { padding: 32px; }
.company-section:not(:last-child) { border-bottom: 1px solid var(--border-hairline); }
.company-section-title {
  font-size: var(--fs-label); text-transform: uppercase; letter-spacing: var(--ls-wide);
  font-weight: var(--fw-medium); color: var(--text-secondary); margin: 0 0 24px;
}
/* В дровере заголовок секции идёт элементом формы (gap 16) — свой отступ не нужен */
.modal-form .company-section-title { margin: 8px 0 0; }

/* Реквизиты: пары подпись/значение сеткой 2×N */
.requisites-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 48px; row-gap: 24px; }
.requisite { display: flex; flex-direction: column; gap: 4px; }
.req-label { font-size: var(--fs-small); color: var(--text-secondary); }
.req-value { font-size: var(--fs-body); font-weight: var(--fw-medium); line-height: 1.375; overflow-wrap: anywhere; }

/* Контакты и пользователи портала */
.company-people { display: flex; flex-direction: column; gap: 24px; }
.person-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.person-id { display: flex; align-items: center; gap: 16px; min-width: 0; }
.person-id .avatar { width: 40px; height: 40px; font-size: var(--fs-body); }
.person-info { display: flex; flex-direction: column; min-width: 0; }
.person-name { font-size: var(--fs-body); font-weight: var(--fw-medium); color: var(--text-bright); }
.person-sub { font-size: var(--fs-small); color: var(--text-secondary); }
.person-meta { display: flex; align-items: center; gap: 32px; font-size: var(--fs-body); color: var(--text-secondary); flex-shrink: 0; }

/* Проекты клиента: мини-таблица в рамке */
.company-projects { border: 1px solid var(--border-hairline); border-radius: var(--radius-md); overflow: hidden; }
.company-projects-table { width: 100%; border-collapse: collapse; text-align: left; }
.company-projects-table td { padding: 16px 24px; font-size: var(--fs-body); }
.company-projects-table tr:not(:last-child) td { border-bottom: 1px solid var(--border-hairline); }
.company-projects-table tr { transition: background .15s; }
.company-projects-table tr:hover { background: var(--bg-row-hover-soft); }
.company-projects-table .cell-date { color: var(--text-secondary); font-size: var(--fs-small); white-space: nowrap; }
.company-projects-table .t-right { text-align: right; }

/* Дровер клиента (clients_edit): сетка реквизитов + редактор контактов */
.drawer-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.drawer-grid .span-2 { grid-column: span 2; }
.contact-editor { display: flex; flex-direction: column; gap: 16px; }
.contact-editor:empty { display: none; }
.contact-edit { display: flex; align-items: center; gap: 12px; }
.contact-edit-fields { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.contact-edit-pair { display: flex; gap: 12px; }
.contact-edit-pair .field-input { flex: 1; min-width: 0; }
.contact-add { align-self: flex-start; }
/* Футер мока клиентов: кнопки в ряд справа (staff — колонка с растяжкой) */
.drawer-footer-row { flex-direction: row; justify-content: flex-end; gap: 12px; }

/* ═══════ Формы ═══════ */
.field-label {
  display: block; font-size: var(--fs-small); color: var(--text-secondary);
  margin-bottom: 6px;
}
.field-input {
  background: var(--bg-inset); border: 1px solid var(--border-hairline);
  border-radius: var(--radius-md); padding: 8px 12px; width: 100%;
  color: var(--text-primary); font-family: var(--font-ui);
  font-size: var(--fs-body); outline: none; transition: border-color .15s;
}
.field-input:focus { border-color: var(--border-focus); }
.field-input::placeholder { color: var(--text-secondary); opacity: .6; }
.field-input:disabled { opacity: .6; }
.field-select { appearance: none; cursor: pointer; }
.field-select option { background: var(--bg-sidebar); color: var(--text-primary); }
.field-textarea { resize: vertical; }
.form-error { color: var(--error); font-size: var(--fs-small); }
.form-hint { font-size: var(--fs-label); color: var(--text-secondary); }
.form-hint-ok { font-size: var(--fs-label); color: var(--success); }
.modal-form { display: flex; flex-direction: column; gap: 16px; }
.modal-actions { display: flex; align-items: center; justify-content: flex-end; gap: 12px; margin-top: 8px; }

/* Чекбокс (04-request: «Срочный проект») */
.check-label {
  display: flex; align-items: center; gap: 8px;
  font-size: var(--fs-body); color: var(--text-primary); cursor: pointer;
}
.check-label input { position: absolute; opacity: 0; pointer-events: none; }
.check-box {
  width: 16px; height: 16px; border-radius: var(--radius-xs); flex-shrink: 0;
  border: 1px solid var(--border-hairline); background: var(--bg-inset);
  display: inline-flex; align-items: center; justify-content: center;
  color: transparent; font-size: var(--fs-micro);
}
.check-label input:checked + .check-box { color: var(--text-bright); }
.check-label input:focus-visible + .check-box { border-color: var(--border-focus); }

/* Чекбокс-чипы услуг (04-request: «Что требуется») */
.check-group { display: flex; flex-wrap: wrap; gap: 8px; }
.check-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 12px; border-radius: var(--radius-md);
  background: var(--bg-inset); border: 1px solid var(--border-hairline);
  font-size: var(--fs-small); color: var(--text-secondary); cursor: pointer;
  transition: color .15s;
}
.check-chip input { position: absolute; opacity: 0; pointer-events: none; }
.check-chip .check-box { width: 14px; height: 14px; }
.check-chip input:checked ~ .check-box { background: var(--badge-sage-bg); border-color: var(--badge-sage-bg); color: var(--badge-sage-text); }
.check-chip input:checked ~ .check-chip-label { color: var(--text-bright); }
.check-chip:hover { color: var(--text-primary); }

/* Сетка upload-слотов заявки (04-request: «Исходные данные»).
   minmax(0,1fr) + min-width:0 — длинное имя файла не распирает колонку. */
.upload-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.upload-slot {
  border: 2px dashed var(--border-hairline); border-radius: var(--radius-md);
  padding: 12px; min-height: 80px; min-width: 0; overflow: hidden;
  cursor: pointer; position: relative;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 6px; text-align: center; font-size: var(--fs-micro); color: var(--text-secondary);
  transition: border-color .15s, color .15s;
}
.upload-slot:hover { border-color: var(--border-hover); color: var(--text-primary); }
.upload-slot .ph { font-size: var(--fs-title); }
.upload-slot input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.upload-slot.filled { border: 1px solid var(--border-hairline); background: var(--bg-inset-soft); }
.upload-slot-file {
  display: block; max-width: 100%;
  padding: 4px 8px; border-radius: var(--radius-sm); background: var(--bg-chip);
  color: var(--text-bright); overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* ═══════ Модалка (02-modal / 04-request) ═══════ */
.modal-backdrop {
  position: fixed; inset: 0; background: var(--overlay-modal);
  backdrop-filter: blur(4px);
  display: flex; align-items: center; justify-content: center; z-index: 100;
}
.modal {
  width: var(--modal-w); max-height: 85vh; overflow-y: auto; padding: 24px;
  background: var(--bg-card); border: 1px solid var(--border-hairline);
  border-radius: var(--radius-card); box-shadow: var(--shadow-modal);
}
.modal.modal-lg { width: var(--modal-w-lg); }
.modal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 24px; }
.modal-title { font-size: var(--fs-title); font-weight: var(--fw-semibold); color: var(--text-bright); }
.modal-sub { font-size: var(--fs-small); color: var(--text-secondary); margin: -20px 0 24px; }
/* Превью-строки «Будет создано» (02-modal) */
.preview-list { display: flex; flex-direction: column; gap: 4px; }
.preview-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px; border-radius: var(--radius-md); background: var(--bg-inset-soft);
  font-size: var(--fs-body); color: var(--text-bright);
}
.preview-row .cell-date { font-size: var(--fs-micro); }

/* ═══════ Drawer (03-chat, реквизиты) ═══════ */
.drawer-backdrop { position: fixed; inset: 0; background: var(--overlay-drawer); z-index: 40; }
.drawer {
  position: fixed; top: 0; right: 0; bottom: 0; width: var(--drawer-w); z-index: 50;
  background: var(--bg-card); border-left: 1px solid var(--border-hairline);
  border-radius: 0; box-shadow: var(--shadow-drawer);
  display: flex; flex-direction: column;
}
.drawer-head {
  flex-shrink: 0; display: flex; align-items: center; justify-content: space-between;
  gap: 12px; padding: 20px 24px; border-bottom: 1px solid var(--border-hairline);
}
.drawer-title-group { display: flex; align-items: center; gap: 12px; min-width: 0; }
.drawer-title { font-size: var(--fs-body); font-weight: var(--fw-semibold); color: var(--text-bright); }
.drawer-sub { font-size: var(--fs-label); color: var(--text-secondary); margin-top: 2px; }
.drawer-body { flex: 1; overflow-y: auto; padding: 24px; display: flex; flex-direction: column; gap: 16px; }
.drawer-actions { display: flex; gap: 12px; margin-top: 8px; }
/* Футер дровера (staff_edit): Сохранить/Отмена поровну + мягко-красная ссылка */
.drawer-footer {
  flex-shrink: 0; padding: 20px 24px; border-top: 1px solid var(--border-hairline);
  display: flex; flex-direction: column; align-items: flex-start; gap: 16px;
}
.drawer-footer .drawer-actions { margin-top: 0; width: 100%; }
.drawer-footer .drawer-actions > * { flex: 1; }
.drawer-danger {
  background: none; border: none; padding: 0; cursor: pointer;
  font-size: var(--fs-body); color: var(--danger-soft); transition: color .15s;
}
.drawer-danger:hover { color: var(--danger-soft-hover); }

/* ═══════ Страница проекта (02-project) ═══════ */
.project-head {
  flex-shrink: 0; padding: 40px 40px 0;
}
.project-subhead {
  flex-shrink: 0; padding: 8px 40px 16px;
  border-bottom: 1px solid var(--border-hairline);
  display: flex; flex-direction: column; gap: 8px;
}
.project-meta .tag-group { display: inline-flex; margin-left: 4px; }
.project-head-top { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 8px; }
.project-head-main { display: flex; align-items: center; gap: 16px; min-width: 0; }
.back-link { color: var(--text-secondary); transition: color .15s; display: inline-flex; text-decoration: none; }
.back-link:hover { color: var(--text-bright); }
.back-link .ph { font-size: var(--fs-icon); }
.project-title { font-size: var(--fs-page-title); font-weight: var(--fw-semibold); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.project-head-badges { display: flex; align-items: center; gap: 8px; }
.project-head-tools { display: flex; align-items: center; gap: 16px; flex-shrink: 0; }
.project-deadline { font-size: var(--fs-body); color: var(--text-secondary); white-space: nowrap; }
.project-deadline b { color: var(--text-bright); font-weight: var(--fw-regular); }
/* Строка статусов документов (дельта §E, раскладка 02-project) */
.risk-line { display: flex; align-items: center; gap: 16px; font-size: var(--fs-label); color: var(--text-secondary); flex-wrap: wrap; }
.risk-item { display: inline-flex; align-items: center; gap: 8px; }
.risk-dot { width: 6px; height: 6px; border-radius: var(--radius-full); flex-shrink: 0; }
.risk-dot.none { background: var(--doc-dot-none); }
.risk-dot.risk { background: var(--doc-dot-risk); }
.risk-dot.wait { background: var(--doc-dot-wait); }
.risk-dot.ok   { background: var(--doc-dot-ok); }
.risk-sep { opacity: .3; }

.project-body { display: flex; gap: 16px; align-items: flex-start; padding: var(--content-pad); }
.project-col { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 32px; }
.project-aside { width: var(--aside-w); flex-shrink: 0; display: flex; flex-direction: column; gap: 24px; }
.tasks-stack { display: flex; flex-direction: column; gap: 32px; }
.aside-stack { display: flex; flex-direction: column; gap: 24px; }
/* Разделитель колонок (доработка 2026-07-09): тянется мышью, ширина правой
   колонки сохраняется в localStorage (static/js/project.js). */
.aside-resizer {
  width: 6px; flex-shrink: 0; align-self: stretch; cursor: col-resize;
  border-radius: var(--radius-full); transition: background .15s;
}
.aside-resizer:hover, body.aside-resizing .aside-resizer { background: var(--border-hairline); }
body.aside-resizing { cursor: col-resize; user-select: none; }
/* Перетаскивание блоков правой колонки за заголовок (project.js). */
.project-aside .side-card-head, .project-aside .chat-head { cursor: grab; user-select: none; }
.project-aside .dragging { opacity: .5; }

.action-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }

/* Секции задач */
.task-section { display: flex; flex-direction: column; }
.section-head { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.section-title {
  font-size: var(--fs-body); font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-wide); text-transform: uppercase; color: var(--text-secondary);
}
.count-chip {
  width: 20px; height: 20px; display: inline-flex; align-items: center; justify-content: center;
  background: var(--bg-card); border-radius: var(--radius-xs);
  font-size: var(--fs-micro); font-weight: var(--fw-bold); color: var(--text-secondary);
}
.tile-list { display: flex; flex-direction: column; gap: 8px; }
.tile {
  background: var(--bg-card); border: 1px solid var(--border-hairline);
  border-radius: var(--radius-lg); padding: 16px;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
}
.tile.clickable { cursor: pointer; transition: border-color .15s; }
.tile.clickable:hover { border-color: var(--border-hover); }
.tile-main { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.tile-title { font-size: var(--fs-body); font-weight: var(--fw-medium); color: var(--text-bright); }
.tile-title-row { display: flex; align-items: center; gap: 8px; }
.tile-desc { font-size: var(--fs-label); color: var(--text-secondary); white-space: pre-wrap; }
.tile-side { display: flex; align-items: center; gap: 24px; flex-shrink: 0; }
.tile-meta { font-size: var(--fs-small); color: var(--text-secondary); white-space: nowrap; display: inline-flex; align-items: center; gap: 8px; }
.task-actions { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; }
/* «У коллег» — приглушённые строки без карточки */
.colleague-row {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 12px 16px; border-radius: var(--radius-md);
  opacity: .8; /* мок 0.6 давал 3.2:1 на secondary-тексте — поднято до 4.5+ */
  transition: background .15s, opacity .15s;
}
.colleague-row:hover { opacity: 1; }
.colleague-row:hover { background: var(--bg-row-hover); }
.colleague-main { display: flex; align-items: center; gap: 16px; min-width: 0; }
.colleague-name { font-size: var(--fs-small); font-weight: var(--fw-medium); white-space: nowrap; }
.colleague-task { font-size: var(--fs-small); color: var(--text-secondary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Карточки файлов в правой колонке */
.side-card-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.side-card-title { font-size: var(--fs-body); font-weight: var(--fw-semibold); color: var(--text-bright); }
.file-tile {
  display: flex; align-items: center; gap: 12px; padding: 12px;
  border-radius: var(--radius-md); background: var(--bg-inset);
  border: 1px solid var(--border-hairline); text-decoration: none; color: inherit;
}
a.file-tile:hover .file-name, .file-tile.clickable:hover .file-name { color: var(--text-bright); }
.file-icon {
  width: 32px; height: 32px; border-radius: var(--radius-xs); flex-shrink: 0;
  background: var(--bg-chip); color: var(--text-secondary);
  display: flex; align-items: center; justify-content: center; font-size: var(--fs-title);
}
.file-icon.ok { background: var(--success-bg); color: var(--success); }
.file-tile-main { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.file-name { font-size: var(--fs-small); font-weight: var(--fw-medium); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.file-meta { font-size: var(--fs-micro); color: var(--text-secondary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tile-dashed {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  padding: 12px; border: 1px dashed var(--border-hairline); border-radius: var(--radius-md);
  color: var(--text-secondary); cursor: pointer; background: none; width: 100%;
  font-size: var(--fs-micro); font-weight: var(--fw-medium);
  text-transform: uppercase; letter-spacing: var(--ls-wide);
  transition: color .15s, border-color .15s;
}
.tile-dashed:hover { color: var(--text-bright); border-color: var(--border-hover); }
/* Плитки документов: длинная инструкция ManualProvider переносится
   на всю ширину, действия уходят на свою строку. */
#project-documents .file-tile { flex-wrap: wrap; }
#project-documents .file-tile-main { flex: 1 1 55%; min-width: 55%; }
#project-documents .file-meta { white-space: normal; }
.slot-required { color: var(--error); margin-left: 4px; }
.empty-state { padding: 24px; text-align: center; color: var(--text-secondary); font-size: var(--fs-body); }
.empty-state-inline { color: var(--text-secondary); }

/* ═══════ Чат ═══════ */
/* Встроенный блок (02-project, правая колонка). resize: vertical —
   блок растягивается за нижний угол (доработка 2026-07-09). */
.chat-card {
  display: flex; flex-direction: column; height: var(--chat-h);
  overflow: hidden; resize: vertical;
  min-height: 240px; max-height: 85vh;
}
.chat-head {
  flex-shrink: 0; display: flex; align-items: center; gap: 8px;
  padding: 16px; border-bottom: 1px solid var(--border-hairline);
  font-size: var(--fs-body); font-weight: var(--fw-semibold); color: var(--text-bright);
}
.chat-head .ph { color: var(--text-secondary); }
.chat-messages {
  flex: 1; overflow-y: auto; padding: 16px;
  display: flex; flex-direction: column; gap: 16px;
}
.chat-msg { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
.chat-msg.chat-own { align-items: flex-end; }
.chat-meta { display: flex; align-items: center; gap: 8px; }
.chat-author {
  font-size: var(--fs-micro); font-weight: var(--fw-bold); color: var(--text-secondary);
}
.chat-own .chat-author { color: var(--text-primary); }
.chat-time { font-size: var(--fs-nano); color: var(--text-secondary); }
.chat-bubble {
  max-width: 85%;
  background: var(--chat-other-bg); border: 1px solid transparent;
  border-radius: var(--radius-lg); border-top-left-radius: var(--radius-bubble-tail);
  padding: 10px 12px;
}
.chat-own .chat-bubble {
  background: var(--chat-own-bg); border-color: var(--chat-own-border);
  border-top-left-radius: var(--radius-lg); border-top-right-radius: var(--radius-bubble-tail);
}
.chat-body { font-size: var(--fs-small); line-height: var(--lh-relaxed); white-space: pre-wrap; overflow-wrap: anywhere; }
.chat-file {
  display: flex; align-items: center; gap: 12px; margin-top: 8px;
  padding: 10px 12px; border-radius: var(--radius-md);
  background: var(--chat-file-bg); border: 1px solid var(--border-hairline);
  color: inherit; text-decoration: none; transition: border-color .15s;
}
.chat-file:hover { border-color: var(--border-hover); }
.chat-file .file-icon { width: 32px; height: 32px; border-radius: var(--radius-sm); }
.chat-file-main { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.chat-file-name { font-size: var(--fs-small); color: var(--text-bright); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-file-size { font-size: var(--fs-micro); color: var(--text-secondary); }
.chat-file .ph-download-simple { margin-left: auto; color: var(--text-secondary); flex-shrink: 0; }
/* Разделитель дат (03-chat) */
.chat-divider { display: flex; align-items: center; gap: 12px; margin: 8px 0; }
.chat-divider::before, .chat-divider::after { content: ""; height: 1px; flex: 1; background: var(--border-hairline); }
.chat-divider span {
  font-size: var(--fs-micro); color: var(--text-secondary);
  text-transform: uppercase; letter-spacing: var(--ls-wide); font-weight: var(--fw-medium);
}
/* Композер */
.chat-error { padding: 4px 16px; color: var(--error); font-size: var(--fs-small); flex-shrink: 0; }
.chat-error:empty { display: none; }
.chat-composer {
  flex-shrink: 0; display: flex; align-items: center; gap: 12px;
  margin: 12px 16px 16px; padding: 8px 12px;
  background: var(--chat-file-bg); border: 1px solid var(--border-hairline);
  border-radius: var(--radius-md);
}
.chat-input {
  flex: 1; resize: none; background: transparent; border: none; outline: none;
  color: var(--text-primary); font-family: var(--font-ui); font-size: var(--fs-body);
}
.chat-input::placeholder { color: var(--text-secondary); opacity: .6; }
.chat-attach { position: relative; overflow: hidden; flex-shrink: 0; padding: 4px; }
.chat-attach .ph { font-size: var(--fs-title); }
.chat-file-input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.chat-attach-name {
  max-width: 120px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  color: var(--text-secondary); font-size: var(--fs-small); flex-shrink: 0;
}
.chat-attach-name:empty { display: none; }
.chat-send {
  width: 32px; height: 32px; border-radius: var(--radius-sm); border: none;
  background: var(--bg-chip); color: var(--text-bright); cursor: pointer;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
  transition: background .15s;
}
.chat-send:hover { background: var(--bg-hover); }
/* Drawer-чат клиента (03-chat): просторнее */
.chat-drawer .chat-messages { padding: 24px; gap: 20px; }
.chat-drawer .chat-bubble { max-width: 90%; padding: 12px 16px; }
.chat-drawer .chat-body { font-size: var(--fs-body); }
.chat-drawer .chat-author { text-transform: uppercase; letter-spacing: var(--ls-wide); font-weight: var(--fw-medium); }
.chat-drawer .chat-time { font-size: var(--fs-micro); }
.chat-drawer .chat-composer { margin: 16px 24px; padding: 10px 12px; }

/* ═══════ Конструктор КП (05-kp/manager) ═══════ */
.quote-layout { display: flex; flex-direction: column; height: 100%; }
.quote-scroll { flex: 1; overflow-y: auto; padding: var(--content-pad); }
.quote-builder { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; align-items: start; }
.quote-form-card { padding: 32px; display: flex; flex-direction: column; gap: 24px; }
.img-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.img-slot-label { display: block; font-size: var(--fs-small); font-weight: var(--fw-medium); color: var(--text-secondary); margin-bottom: 8px; }
.img-slot {
  aspect-ratio: 16 / 9; border-radius: var(--radius-md); position: relative; overflow: hidden;
  background: var(--bg-inset); border: 1px solid var(--border-hairline);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
  color: var(--text-secondary); font-size: var(--fs-label); cursor: pointer;
}
.img-slot.empty { border-style: dashed; transition: border-color .15s; }
.img-slot.empty:hover { border-color: var(--border-hover); }
.img-slot img { width: 100%; height: 100%; object-fit: cover; }
.img-slot input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.img-slot .img-overlay {
  position: absolute; inset: 0; background: var(--overlay-img-hover);
  display: flex; align-items: center; justify-content: center;
  opacity: 0; transition: opacity .15s; color: var(--text-bright); font-size: var(--fs-icon);
}
.img-slot:hover .img-overlay { opacity: 1; }
.field-locked { position: relative; opacity: .6; }
.field-locked .ph-lock-simple {
  position: absolute; right: 12px; top: 50%; transform: translateY(-50%);
  color: var(--text-secondary);
}
.field-suffix { position: relative; }
.field-suffix .suffix {
  position: absolute; right: 16px; top: 50%; transform: translateY(-50%);
  color: var(--text-secondary); font-size: var(--fs-body);
}
.quote-total {
  display: flex; align-items: center; justify-content: space-between;
  padding-top: 24px; border-top: 1px solid var(--border-hairline);
}
.quote-total-label { font-size: var(--fs-body); color: var(--text-secondary); }
.quote-total-value { font-size: var(--fs-icon); font-weight: var(--fw-semibold); color: var(--text-bright); }
.quote-preview-head {
  display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px;
  font-size: var(--fs-small); font-weight: var(--fw-medium); color: var(--text-secondary);
}
.quote-preview-head .label { text-transform: uppercase; letter-spacing: var(--ls-wide); }
.quote-preview-head .hint { display: inline-flex; align-items: center; gap: 8px; font-size: var(--fs-small); }
.quote-doc-frame { padding: 4px; }
.quote-footer {
  flex-shrink: 0; height: 80px; display: flex; align-items: center; justify-content: space-between;
  padding: 0 var(--content-pad); border-top: 1px solid var(--border-hairline);
  background: var(--bg-page);
}
.quote-footer-actions { display: flex; align-items: center; gap: 16px; }
.quote-footer-meta { display: flex; align-items: center; gap: 24px; font-size: var(--fs-small); color: var(--text-secondary); }
.quote-footer-sep { width: 1px; height: 16px; background: var(--border-hairline); }

/* Светлый бланк КП (05-kp/manager превью; печатная версия) */
.quote-doc {
  background: var(--doc-bg); color: var(--doc-text);
  border-radius: var(--radius-xl); padding: 32px;
  display: flex; flex-direction: column; gap: 24px;
  box-shadow: var(--shadow-modal);
}
.quote-doc-head {
  display: flex; align-items: center; justify-content: space-between;
  padding-bottom: 16px; border-bottom: 1px solid var(--doc-border);
}
.quote-doc-brand { display: flex; align-items: center; gap: 8px; }
/* Логотип бланка — тёмный вариант (logo-light.png) на светлом фоне */
.logo-img-doc { height: 24px; width: auto; display: block; }
.quote-doc-num { font-size: var(--fs-micro); color: var(--doc-label); }
.quote-doc-title { font-size: var(--fs-icon); font-weight: var(--fw-semibold); line-height: 1.25; }
.quote-doc-imgs { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.quote-doc-imgs .doc-img {
  aspect-ratio: 16 / 9; border-radius: var(--radius-sm); overflow: hidden;
  background: var(--doc-soft); border: 1px solid var(--doc-border);
  display: flex; align-items: center; justify-content: center; color: var(--doc-icon);
  font-size: var(--fs-page-title);
}
.quote-doc-imgs img { width: 100%; height: 100%; object-fit: cover; display: block; }
.quote-doc-rows { display: flex; flex-direction: column; gap: 16px; }
.quote-doc-row { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; }
.quote-doc-row dt {
  font-size: var(--fs-label); color: var(--doc-label);
  text-transform: uppercase; font-weight: var(--fw-medium);
}
.quote-doc-row dd { font-size: var(--fs-body); font-weight: var(--fw-medium); }
.quote-doc-prices {
  display: flex; flex-direction: column; gap: 8px;
  padding-top: 16px; border-top: 1px solid var(--doc-border);
}
.quote-doc-price { display: flex; justify-content: space-between; font-size: var(--fs-small); }
.quote-doc-price .name { color: var(--doc-muted); }
.quote-doc-price .val { font-weight: var(--fw-medium); }
.quote-doc-total {
  display: flex; align-items: center; justify-content: space-between;
  background: var(--doc-plaque); color: var(--doc-bg);
  padding: 16px; border-radius: var(--radius-md);
}
.quote-doc-total .name { font-size: var(--fs-small); font-weight: var(--fw-medium); opacity: .7; }
.quote-doc-total .val { font-size: var(--fs-title); font-weight: var(--fw-bold); }
.quote-doc-approved { color: var(--doc-muted); font-size: var(--fs-small); }

/* Страница КП клиента (05-kp/client) */
.kp-wrap { display: flex; flex-direction: column; align-items: center; gap: 32px; }
.kp-block { width: 100%; max-width: 800px; }
.kp-card { padding: 40px; display: flex; flex-direction: column; gap: 40px; }
.kp-head { display: flex; flex-direction: column; gap: 4px; }
.kp-title { font-size: var(--fs-page-title); font-weight: var(--fw-medium); }
.kp-sub { font-size: var(--fs-body); color: var(--text-secondary); }
.kp-imgs { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.kp-img {
  aspect-ratio: 4 / 3; border-radius: var(--radius-md); overflow: hidden;
  background: var(--bg-chip); border: 1px solid var(--border-hairline);
  display: flex; align-items: center; justify-content: center;
  color: var(--icon-ghost); font-size: 36px;
}
.kp-img img { width: 100%; height: 100%; object-fit: cover; }
.kp-spec { display: flex; flex-direction: column; gap: 16px; }
.kp-spec-row {
  display: flex; align-items: baseline; justify-content: space-between; gap: 16px;
  padding-bottom: 16px; border-bottom: 1px solid var(--border-hairline);
  font-size: var(--fs-body);
}
.kp-spec-row .name { color: var(--text-secondary); }
.kp-spec-row .val { font-weight: var(--fw-medium); text-align: right; }
.kp-total { display: flex; align-items: baseline; justify-content: space-between; padding-top: 8px; }
.kp-total .name { font-size: var(--fs-title); font-weight: var(--fw-medium); }
.kp-total .val { font-size: var(--fs-page-title); font-weight: var(--fw-semibold); }
.kp-actions { display: flex; flex-direction: column; gap: 16px; }
.kp-foot { display: flex; align-items: center; justify-content: flex-end; gap: 24px; font-size: var(--fs-small); color: var(--text-secondary); }
.kp-foot a { color: inherit; text-decoration: none; }
.kp-foot a:hover { color: var(--text-bright); }
.kp-approved { color: var(--success); font-size: var(--fs-body); text-align: center; }

/* Приёмка результатов (05-kp/review) и клиентская карточка проекта */
.review-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; }
.review-title-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.review-title { font-size: var(--fs-hero); font-weight: var(--fw-medium); }
.review-sub { color: var(--text-secondary); margin-top: 4px; }
.review-center { display: flex; justify-content: center; padding-top: 16px; }
.review-card { width: 100%; max-width: 672px; padding: 40px; display: flex; flex-direction: column; gap: 32px; }
.review-intro { text-align: center; display: flex; flex-direction: column; gap: 8px; }
.review-intro h2 { font-size: var(--fs-page-title); font-weight: var(--fw-medium); color: var(--text-bright); }
.review-intro p { color: var(--text-secondary); font-size: var(--fs-body); }
.result-list { display: flex; flex-direction: column; gap: 12px; }
.result-row {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 16px; border-radius: var(--radius-md);
  background: var(--bg-page); border: 1px solid var(--border-hairline);
  transition: border-color .15s;
}
.result-row:hover { border-color: var(--border-hover); }
.result-main { display: flex; align-items: center; gap: 16px; min-width: 0; flex: 1; }
/* Текстовый блок ужимается, длинные имена файлов режутся многоточием
   (доработка 2026-07-09: имя уходило под кнопки). */
.result-main > div { min-width: 0; }
.result-icon {
  width: 40px; height: 40px; border-radius: var(--radius-sm); flex-shrink: 0;
  background: var(--bg-chip); color: var(--text-secondary);
  display: flex; align-items: center; justify-content: center; font-size: var(--fs-icon);
}
.result-name {
  font-size: var(--fs-body); font-weight: var(--fw-medium); color: var(--text-bright);
  display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.result-meta {
  font-size: var(--fs-small); color: var(--text-secondary);
  display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.result-row .row-actions { flex-shrink: 0; }
.review-cta { display: flex; flex-direction: column; align-items: center; gap: 16px; padding-top: 8px; }
.review-cta .btn-primary { width: 100%; padding: 14px; border-radius: var(--radius-md); font-weight: var(--fw-semibold); }
.result-group { display: flex; flex-direction: column; }
.back-inline { padding: 0; }
.kp-img img { width: 100%; height: 100%; object-fit: cover; }
.upload-slot-label { line-height: 1.3; }

/* ═══════ Инфо-карточка, участники, документы (встройки без макета) ═══════ */
.info-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 20px; }
.info-grid dt {
  font-size: var(--fs-label); color: var(--text-secondary);
  text-transform: uppercase; letter-spacing: var(--ls-wide); margin-bottom: 6px;
}
.info-grid dd { font-size: var(--fs-body); color: var(--text-primary); }
.status-cell { display: flex; align-items: center; gap: 12px; }
.status-select { width: auto; padding: 6px 10px; font-size: var(--fs-small); }
.members-list { list-style: none; padding: 0; display: flex; flex-direction: column; gap: 8px; margin-bottom: 16px; }
.members-row { display: flex; align-items: center; gap: 12px; }
.members-name { flex-grow: 1; font-size: var(--fs-small); font-weight: var(--fw-medium); }
.members-add { display: flex; gap: 8px; align-items: center; }
.members-add .field-input { flex: 1; padding: 6px 10px; font-size: var(--fs-small); }

/* ═══════ Заглушка «Дизайн в работе» ═══════ */
.placeholder-wrap { flex: 1; display: flex; align-items: center; justify-content: center; padding: var(--content-pad); }
.placeholder-card {
  width: 100%; max-width: 480px; padding: 48px 40px; text-align: center;
  display: flex; flex-direction: column; align-items: center; gap: 12px;
}
.placeholder-title { font-size: var(--fs-page-title); font-weight: var(--fw-medium); color: var(--text-bright); }
.placeholder-text { color: var(--text-secondary); font-size: var(--fs-body); }
.placeholder-extra { width: 100%; margin-top: 24px; }

/* ═══════ Логин (заглушка + рабочая форма) ═══════ */
.login-wrap { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 24px; }
.login-card { width: 400px; padding: 40px; display: flex; flex-direction: column; gap: 24px; }
.login-form { display: flex; flex-direction: column; gap: 16px; }
.login-error { color: var(--error); font-size: var(--fs-small); }

/* ═══════ Тосты ═══════ */
.app-toast, .gantt-toast {
  position: fixed; right: 24px; bottom: 24px; z-index: 200;
  padding: 12px 16px; background: var(--bg-card); color: var(--text-primary);
  border: 1px solid var(--border-hairline); border-radius: var(--radius-md);
  box-shadow: var(--shadow-modal);
}

/* ═══════ Гант (остров SVAR): перекраска в токены ═══════ */
/* Экран без референса: обвязка — заглушка, остров остаётся рабочим (решение 2026-07-09). */
/* DEVIATION: WillowDark тема (приложение тёмное); per-task цвет — через taskTemplate. */
.gantt-card { padding: 0; overflow: hidden; }
#gantt-island {
  height: calc(100vh - 320px);
  min-height: 420px;
  --wx-background:        var(--bg-card);
  --wx-background-alt:    var(--bg-active);
  --wx-background-hover:  var(--bg-row-hover);
  --wx-color-font:        var(--text-primary);
  --wx-color-font-alt:    var(--text-secondary);
  --wx-border-color:      var(--border-hairline);
  --wx-border:            1px solid var(--border-hairline);
  --wx-gantt-task-color:        var(--gantt-p1);
  --wx-gantt-task-fill-color:   var(--gantt-p1);
  --wx-gantt-task-border-color: var(--gantt-p1);
  --wx-gantt-task-font-color:   var(--text-inverse);
  --wx-gantt-holiday-background: var(--gantt-offday);
  --wx-gantt-holiday-color:      var(--text-secondary);
  --wx-gantt-border-color: var(--border-hairline);
  --wx-gantt-border:       1px solid var(--border-hairline);
  --wx-font-family: var(--font-ui);
}
#gantt-island .wx-willow-dark-theme,
.wx-portal .wx-willow-dark-theme { --wx-font-family: var(--font-ui); }
#gantt-island .mka-offday { background: var(--gantt-offday); }
#gantt-island .mka-overlays { position: absolute; inset: 0; pointer-events: none; z-index: 1; }
#gantt-island .mka-absence { position: absolute; background: var(--gantt-absence); }
#gantt-island .wx-bar.mka-done { opacity: var(--gantt-done-opacity); }

/* ═══════ Доски (boards) ═══════ */

/* Список */
.boards-card { padding: 0; overflow: hidden; }

.board-row { transition: background-color .15s; }
.board-row:not(:last-child) td { border-bottom: 1px solid var(--border-hairline); }
.board-row:last-child td { border-bottom: none; }
.board-row:hover { background: var(--bg-row-hover); }
.board-row td { border-bottom: none; }

.board-thumb { width: 3rem; padding-left: 1.5rem; vertical-align: middle; }
.board-thumb-box {
  display: inline-flex; align-items: center; justify-content: center;
  width: 2rem; height: 2rem; border-radius: var(--radius-sm);
  background: var(--bg-chip); color: var(--text-secondary);
}

.board-name { padding: 1.25rem 1.5rem; }
.board-link {
  color: var(--text-primary); font-weight: var(--fw-medium);
  text-decoration: none; transition: color .15s;
}
.board-link:hover { color: var(--text-bright); }

.board-meta { color: var(--text-secondary); padding: 1.25rem 1.5rem; }

.board-actions {
  padding-right: 1rem; text-align: right;
  opacity: 0; transition: opacity .15s;
  white-space: nowrap;
}
.board-row:hover .board-actions { opacity: 1; }
.board-del:hover { color: var(--danger-soft); }

/* Нижняя строка: счётчик + пагинация */
.boards-pager {
  display: flex; align-items: center; justify-content: space-between;
  padding: 1rem 1.5rem;
  font-size: var(--fs-small); color: var(--text-secondary);
}
.pager-nav { display: flex; align-items: center; gap: 4px; }
.pager-btn,
.pager-page {
  width: 1.75rem; height: 1.75rem; border-radius: var(--radius-xs);
  border: none; background: none; cursor: pointer;
  font-size: var(--fs-small); color: var(--text-secondary);
  display: inline-flex; align-items: center; justify-content: center;
  transition: background .15s;
}
.pager-btn:hover,
.pager-page:hover { background: var(--bg-card); color: var(--text-primary); }
.pager-page-active {
  background: var(--bg-active); color: var(--text-bright); cursor: default;
}
.pager-page-active:hover { background: var(--bg-active); color: var(--text-bright); }

/* Модалка удаления */
.modal-text { color: var(--text-secondary); font-size: var(--fs-body); margin-bottom: 0; }
.btn-danger {
  background: var(--danger-soft); color: var(--text-inverse);
  font-size: var(--fs-body); font-weight: var(--fw-medium);
  padding: 6px 16px; border-radius: var(--radius-sm);
  border: none; cursor: pointer; transition: background .15s;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
}
.btn-danger:hover { background: var(--danger-soft-hover); }

/* Редактор — на всю высоту .main */
.board-editor {
  flex: 1; display: flex; flex-direction: column; overflow: hidden;
}
#excalidraw-island { flex: 1; width: 100%; }

/* ═══════ Печать КП: светлый бланк на всю страницу ═══════ */
@media print {
  body, body.role-client { background: var(--doc-bg); }
  .topbar, .sidebar, .page-header, .content-head, .kp-actions, .kp-foot,
  .back-link, #modal, #drawer, .app-toast { display: none !important; }
  .client-main > .content { padding: 0; max-width: none; }
  .kp-card, .card { border: none; box-shadow: none; background: var(--doc-bg); color: var(--doc-text); }
  .quote-doc { box-shadow: none; border-radius: 0; }
}

/* ═══════ Мобильная адаптация ═══════ */
@media (max-width: 767px) {
  .app { flex-direction: column; height: auto; min-height: 100vh; overflow: visible; }
  .sidebar {
    width: 100%; height: auto; flex-direction: row; align-items: center; gap: 8px;
    padding: 10px 12px; border-right: none; border-bottom: 1px solid var(--border-hairline);
  }
  .logo { padding: 0; margin: 0; flex-shrink: 0; }
  .nav { flex-direction: row; overflow-x: auto; gap: 2px; padding: 0; }
  .nav-item { flex-shrink: 0; padding: 8px 10px; }
  .nav-item span { display: none; }
  .sidebar-user { margin-left: auto; padding: 0; border-top: none; flex-shrink: 0; }
  .sidebar-user-row { padding: 0; }
  .sidebar-user-name, .sidebar-user-role { display: none; }

  .main { height: auto; overflow: visible; }
  .page-header { height: auto; flex-wrap: wrap; row-gap: 8px; padding: 12px 16px; }
  .header-tools { flex-wrap: wrap; gap: 12px; }
  .search { flex-grow: 1; }
  .search input { width: 100%; }
  .content { padding: 16px; gap: 20px; }

  .topbar { height: auto; flex-wrap: wrap; padding: 10px 16px; gap: 8px 16px; }
  .topbar-actions { flex-wrap: wrap; gap: 8px; }
  .client-shell { height: auto; min-height: 100vh; overflow: visible; }
  .client-main > .content { padding: 16px; gap: 20px; }

  .filter-bar { flex-direction: column; align-items: flex-start; gap: 10px; }
  .filter-group { flex-wrap: wrap; row-gap: 8px; }
  .metric-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }

  .table-card { overflow-x: auto; }
  .table { width: max-content; min-width: 100%; }
  .table th { padding: 12px 10px; }
  .table td { padding: 14px 10px; }
  .client-table th:first-child, .client-table td:first-child { padding-left: 16px; }
  .client-table th:last-child, .client-table td:last-child { padding-right: 16px; }
  .pagination { flex-wrap: wrap; row-gap: 8px; justify-content: center; }

  .staff-layout { flex-direction: column; }
  .staff-main, .absence-card { width: 100%; }

  .clients-layout { flex-direction: column; }
  .clients-list, .company-card { width: 100%; }
  .company-section { padding: 20px; }
  .requisites-grid { grid-template-columns: 1fr; column-gap: 24px; }
  .person-row { flex-wrap: wrap; }
  .person-meta { gap: 16px; flex-wrap: wrap; }

  .project-head { padding: 16px; }
  .project-head-top { flex-wrap: wrap; }
  .project-title { white-space: normal; }
  .project-body { flex-direction: column; padding: 16px; gap: 20px; }
  .project-aside { width: 100% !important; } /* поверх inline-ширины project.js */
  .aside-resizer { display: none; }
  .tile { flex-wrap: wrap; }
  .tile-side { flex-wrap: wrap; gap: 12px; }

  .quote-builder { grid-template-columns: 1fr; }
  .quote-footer { height: auto; flex-wrap: wrap; gap: 12px; padding: 12px 16px; }
  .kp-card { padding: 24px; gap: 24px; }
  .kp-imgs { grid-template-columns: 1fr; }
  .review-head { flex-direction: column; align-items: flex-start; }
  .review-card { padding: 24px; }
  .upload-grid { grid-template-columns: 1fr 1fr; }
  .info-grid { grid-template-columns: 1fr 1fr; gap: 16px; }
  .check-group { gap: 6px; }
  .members-add { flex-wrap: wrap; }

  .modal { width: calc(100vw - 32px); padding: 20px; }
  .drawer { width: 100%; }
  .login-card { width: 100%; max-width: 400px; padding: 24px; }
  .chat-bubble { max-width: 95%; }
  #gantt-island { height: auto; min-height: 60vh; }
  .app-toast, .gantt-toast { right: 12px; bottom: 12px; left: 12px; }
}