/* Hotline MVP UI · только то, чего нет в стилях серверного сервиса:
   переключатель ракурса и карточки демо-входа. */

.role-switch { display: flex; align-items: center; gap: 6px; }
.role-switch > span {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--muted);
  white-space: nowrap;
}
.role-select {
  height: 30px;
  max-width: 190px;
  padding: 0 8px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--fg);
  font: inherit;
  font-size: 11.5px;
}
.role-select:focus { outline: 2px solid var(--accent-soft); border-color: var(--accent); }

/* ── вход ───────────────────────────────────────────────────────────────── */
.demo-accounts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; margin-top: 8px; }
.demo-account {
  text-align: left;
  padding: 8px 9px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--fg);
  font: inherit;
  cursor: pointer;
}
.demo-account:hover { border-color: var(--accent); background: var(--accent-soft); }
.demo-account-name { display: block; font-size: 12px; font-weight: 600; line-height: 1.3; }
.demo-account-role { display: block; margin-top: 2px; font-size: 10.5px; color: var(--muted); }
.auth-static {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--border);
  color: var(--muted);
  font-size: 11.5px;
  line-height: 1.5;
}
body.auth-mode { background: var(--bg); }

@media (max-width: 760px) {
  .role-switch > span { display: none; }
  .role-select { max-width: 150px; }
  .demo-accounts { grid-template-columns: minmax(0, 1fr); }
}

/* ── обзор компании ─────────────────────────────────────────────────────── */
.kpi-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: var(--s3); margin-bottom: var(--s5);
}
.kpi {
  display: flex; flex-direction: column; gap: 2px;
  padding: 14px var(--s4); background: var(--surface);
  border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow);
}
.kpi-value { font-size: 21px; font-weight: 700; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.kpi-label { font-size: 12px; color: var(--muted); }
.kpi-note { font-size: 10.5px; color: var(--muted); opacity: 0.8; }
.kpi-grid-sm { margin-bottom: var(--s4); }
.kpi-grid-sm .kpi-value { font-size: 16px; }

.neg { color: var(--danger); }
.summary { font-size: 14.5px; line-height: 1.6; }
.head-chips { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }

.risk-list { display: flex; flex-direction: column; gap: 8px; }
.risk-row {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 14px; background: var(--surface);
  border: 1px solid var(--border); border-radius: var(--radius);
  color: var(--fg);
}
.risk-row:hover { border-color: var(--line); text-decoration: none; background: #fbfcfe; }
.risk-row-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.risk-row-title { font-weight: 600; font-size: 13.5px; line-height: 1.35; }
.risk-row-side { color: var(--muted); font-size: 11.5px; white-space: nowrap; }
.sev {
  display: inline-flex; align-items: center; height: 22px; padding: 0 8px;
  border-radius: 999px; border: 1px solid var(--border);
  font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.05em; text-transform: uppercase; white-space: nowrap;
}
.sev.high { color: var(--danger); border-color: #f0c2bd; background: var(--danger-soft); }
.sev.medium { color: var(--warn); border-color: #ecd9a8; background: var(--warn-soft); }
.sev.low { color: var(--muted); background: var(--bg); }

.change-list { list-style: none; margin: 0; padding: 0; }
.change-list li { display: flex; gap: 12px; padding: 9px 0; border-top: 1px solid var(--border); }
.change-list li:first-child { border-top: 0; }
.change-time { font-family: var(--mono); font-size: 10.5px; color: var(--muted); white-space: nowrap; padding-top: 2px; }
.change-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; }

.source-list { list-style: none; margin: 0; padding: 0; }
.source-list li { display: flex; gap: 9px; align-items: flex-start; padding: 8px 0; border-top: 1px solid var(--border); }
.source-list li:first-child { border-top: 0; }
.source-name { display: flex; flex-direction: column; gap: 1px; font-size: 12.5px; }
.dot { width: 8px; height: 8px; border-radius: 999px; margin-top: 5px; flex: 0 0 auto; background: var(--muted); }
.dot.live { background: var(--ok); }
.dot.warn { background: var(--warn); }
.dot.off { background: #b9c3cf; }

.quick-links { display: flex; flex-direction: column; gap: 2px; }
.quick-links a { padding: 7px 8px; border-radius: var(--radius-sm); color: var(--accent); font-size: 12.5px; }
.quick-links a:hover { background: var(--accent-soft); text-decoration: none; }

.action-card {
  display: flex; flex-direction: column; gap: 5px; padding: var(--s4);
  border: 1px solid #ecd9a8; border-radius: var(--radius); background: var(--warn-soft); color: var(--fg);
}
.action-card:hover { border-color: var(--warn); text-decoration: none; }
.action-title { font-weight: 600; font-size: 14px; }
.action-note { font-size: 12.5px; color: var(--muted); }

.attention-inline {
  display: flex; flex-direction: column; gap: 3px; margin-top: var(--s3);
  padding-top: var(--s3); border-top: 1px solid var(--border);
}
.attention-label {
  font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.07em;
  text-transform: uppercase; color: var(--danger);
}

.impact { margin-top: var(--s4); padding: 12px 14px; border-left: 3px solid var(--accent); background: var(--bg); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; }
.impact-label { display: block; font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.07em; text-transform: uppercase; color: var(--muted); margin-bottom: 4px; }
.impact p { font-size: 13px; line-height: 1.55; }

.evidence-list { display: flex; flex-direction: column; gap: 10px; }
.evidence { padding: 11px 12px; border: 1px solid var(--border); border-radius: var(--radius-sm); }
.evidence-head { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-bottom: 5px; }
.evidence p { font-size: 13px; line-height: 1.55; }

/* ── этапы, команда, табы ───────────────────────────────────────────────── */
.tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--border); margin: 0 0 var(--s5); flex-wrap: wrap; }
.tab {
  display: inline-flex; align-items: center; min-height: 42px; padding: 0 11px;
  color: var(--muted); font-size: 13px; border-bottom: 2px solid transparent; margin-bottom: -1px;
}
.tab:hover { color: var(--fg); text-decoration: none; }
.tab.is-current { color: var(--fg); font-weight: 600; border-bottom-color: var(--fg); }

.stage-list { list-style: none; margin: 0; padding: 0; }
.stage-row { display: flex; align-items: center; gap: 10px; padding: 9px 0; border-top: 1px solid var(--border); color: var(--fg); }
.stage-row:first-child { border-top: 0; }
.stage-row:hover { color: var(--fg); text-decoration: none; }
.stage-row:hover .stage-row-main > span:first-child { color: var(--accent); }
.stage-row-main { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.stage-row-open { margin-left: auto; color: var(--accent); font-size: 11px; }
.stage { display: flex; gap: 12px; padding: 9px 0; border-top: 1px solid var(--border); }
.stage:first-child { border-top: 0; }
.stage-when { font-family: var(--mono); font-size: 10.5px; color: var(--muted); min-width: 74px; padding-top: 2px; }
.stage-main { display: flex; flex-direction: column; gap: 1px; }
.stage.blocked .stage-main > span:first-child { color: var(--danger); }
.stage.done .stage-main > span:first-child { color: var(--muted); }

.person-row { display: flex; align-items: center; gap: 11px; padding: 10px 0; border-top: 1px solid var(--border); }
.person-row:first-child { border-top: 0; }
.person-avatar {
  display: grid; place-items: center; width: 30px; height: 30px; border-radius: 999px;
  background: var(--accent-soft); color: var(--accent); font-size: 12px; font-weight: 700; flex: 0 0 auto;
}
.person-main { display: flex; flex-direction: column; min-width: 0; }
.person-name { font-size: 13px; font-weight: 600; }
.person-duty { margin-left: auto; text-align: right; font-size: 11.5px; color: var(--muted); }

/* ── база знаний ───────────────────────────────────────────────────────── */
.kb-toolbar { display: flex; gap: var(--s3); align-items: center; justify-content: space-between; flex-wrap: wrap; margin-bottom: var(--s5); }
.kb-filters { display: flex; gap: 5px; flex-wrap: wrap; }
.kb-search { max-width: 320px; }
.chip.is-active { background: var(--accent); border-color: var(--accent); color: #fff; }
.knowledge-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 10px; }
.kb-card {
  display: flex; flex-direction: column; gap: 5px; padding: 14px;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  color: var(--fg); box-shadow: var(--shadow);
}
.kb-card:hover { border-color: var(--line); text-decoration: none; }
.kb-type { font-family: var(--mono); font-size: 11px; letter-spacing: 0.07em; text-transform: uppercase; color: var(--accent); }
.kb-title { font-size: 14px; font-weight: 600; line-height: 1.35; }
.kb-summary { font-size: 12.5px; color: var(--muted); line-height: 1.5; }
.kb-meta, .kb-project { font-size: 11px; color: var(--muted); }
.kb-project { font-family: var(--mono); letter-spacing: 0.03em; }

/* ── аналитика ─────────────────────────────────────────────────────────── */
.bar-list { display: flex; flex-direction: column; gap: 12px; }
.bar-row { display: grid; grid-template-columns: minmax(160px, 1.2fr) minmax(0, 3fr) 46px; gap: 12px; align-items: center; }
.bar-label { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.bar-track { height: 8px; border-radius: 999px; background: var(--bg); overflow: hidden; }
.bar-fill { display: block; height: 100%; border-radius: 999px; background: var(--accent); }
.bar-fill.over { background: var(--danger); }
.bar-value { text-align: right; font-family: var(--mono); font-size: 11.5px; color: var(--muted); }

/* ── AI-ассистент ──────────────────────────────────────────────────────── */
.assistant-context { display: flex; align-items: flex-end; gap: 10px; justify-content: space-between; flex-wrap: wrap; margin-bottom: var(--s4); }
.assistant-context .field { max-width: 280px; }
.assistant-context .field .meta { font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; }
.as-log {
  display: flex; flex-direction: column; gap: 8px; max-height: 360px; overflow: auto;
  padding: var(--s3); background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius);
}
.as-msg { max-width: 88%; padding: 9px 11px; border-radius: var(--radius-sm); border: 1px solid var(--border); font-size: 13px; line-height: 1.55; }
.as-msg.is-user { align-self: flex-end; background: var(--surface); color: var(--fg); }
.as-msg.is-assistant { align-self: flex-start; background: var(--surface); color: var(--muted); }
.as-links { display: flex; flex-direction: column; gap: 3px; margin-top: 7px; }
.as-links a { font-size: 12px; }
.as-ask { display: flex; gap: 8px; margin-top: var(--s3); }
.as-ask .input { flex: 1; }
.as-chips { display: flex; gap: 5px; flex-wrap: wrap; margin-top: var(--s3); }

/* ── BEG ───────────────────────────────────────────────────────────────── */
.hypothesis-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: var(--s4); }
.hypothesis { padding: var(--s4); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); }
.hypothesis-head { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; margin-bottom: 8px; }
.hypothesis h3 { font-size: 14px; line-height: 1.4; }
.hypothesis .small { margin-top: 5px; }
.hypothesis-evidence { display: flex; gap: 5px; flex-wrap: wrap; margin-top: 9px; }
.hypothesis-actions { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 10px; }

/* ── настройки ─────────────────────────────────────────────────────────── */
.subtabs { display: flex; gap: 2px; border-bottom: 1px solid var(--border); margin-bottom: var(--s5); flex-wrap: wrap; }
.subtab {
  display: inline-flex; align-items: center; min-height: 42px; padding: 0 10px;
  color: var(--muted); font-size: 12.5px; border-bottom: 2px solid transparent; margin-bottom: -1px;
}
.subtab:hover { color: var(--fg); text-decoration: none; }
.subtab.is-current { color: var(--fg); font-weight: 600; border-bottom-color: var(--fg); }

.access-table td { white-space: nowrap; }
.access-table .chip { font-size: 11px; }
.source-row { display: flex; gap: 10px; align-items: flex-start; padding: 10px 0; border-top: 1px solid var(--border); }
.source-row:first-child { border-top: 0; }
.source-info { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.source-status { display: flex; flex-direction: column; gap: 2px; align-items: flex-end; }
.request-list { margin-top: var(--s4); }
.request-row { display: flex; gap: 12px; align-items: flex-start; padding: 10px 0; border-top: 1px solid var(--border); }
.request-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.provider-card { padding: var(--s3) 0; border-top: 1px solid var(--border); }
.provider-card:first-child { border-top: 0; }
.provider-head { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-bottom: 7px; }
.provider-meta { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 5px 14px; font-size: 12px; color: var(--muted); }
.provider-meta .k { font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.06em; text-transform: uppercase; margin-right: 4px; }
.provider-meta .v { color: var(--fg); }
.provider-actions { display: flex; gap: 6px; margin-top: 8px; }
.recommendation-list { display: flex; flex-direction: column; gap: 2px; }
.recommendation {
  display: flex; gap: 12px; align-items: center; justify-content: space-between;
  padding: 10px 8px; border-top: 1px solid var(--border); color: var(--fg);
}
.recommendation:first-child { border-top: 0; }
.recommendation:hover { background: var(--bg); text-decoration: none; }
.recommendation-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; }

@media (max-width: 720px) {
  .bar-row { grid-template-columns: minmax(0, 1fr) 46px; }
  .bar-track { grid-column: 1 / -1; }
  .provider-meta { grid-template-columns: minmax(0, 1fr); }
  .as-msg { max-width: 96%; }
}

/* Шапка с восемью разделами: даём ей расти, а не обрезать навигацию. */
.topbar-inner {
  height: auto;
  min-height: 62px;
  flex-wrap: wrap;
  padding-top: 8px;
  padding-bottom: 8px;
  row-gap: 4px;
}
.nav { flex: 1 1 auto; }
@media (min-width: 1180px) {
  .topbar-inner { flex-wrap: nowrap; }
}

/* ── боковое меню ───────────────────────────────────────────────────────── */
.shell { display: grid; grid-template-columns: 236px minmax(0, 1fr); align-items: start; }
.silent-placeholder { display: none; }
.sidebar {
  position: sticky;
  top: 0;
  /* Меню занимает всю высоту окна. Прежние −40px оставляли под сайдбаром
     полосу страницы: белая панель и её правая граница обрывались, «Выйти»
     висел над обрывом — меню выглядело незаконченным. */
  height: 100vh;
  overflow: auto;
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: 18px 14px 16px;
  background: var(--surface);
  border-right: 1px solid var(--border);
  z-index: 15;
}
.side-brand { margin: 0 6px; align-self: flex-start; }
.side-nav { display: flex; flex-direction: column; gap: 2px; flex: 1 1 auto; }
.side-link {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 10px;
  border-radius: var(--radius-sm);
  color: var(--muted);
  font-size: 13.5px;
  line-height: 1.25;
  min-width: 0;
}
.side-link:hover { color: var(--fg); background: var(--bg); text-decoration: none; }
.side-link.is-current { color: var(--accent); background: var(--accent-soft); font-weight: 600; }
.side-icon { width: 18px; height: 18px; flex: 0 0 18px; opacity: 0.85; }
.side-link.is-current .side-icon { opacity: 1; }
.side-link-settings {
  margin-top: auto;
  padding-top: 14px;
  border-top: 1px solid var(--border);
  border-radius: 0 0 var(--radius-sm) var(--radius-sm);
}
/* #94-22: подразделы настроек — выдвижная панель рядом с навигацией.
   position: fixed выносит её из потока сайдбара, поэтому пункт «Настройки»
   и остальная навигация не сдвигаются. Координаты ставит
   positionSettingsFlyout(); на узкой ширине медиа-запрос ниже возвращает
   панель в поток. */
.side-subnav {
  display: none;
  position: fixed;
  z-index: 30;
  flex-direction: column;
  gap: 1px;
  min-width: 200px;
  max-width: 260px;
  margin: 0;
  padding: 6px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}
.side-subnav.is-open { display: flex; }
.side-sublink {
  display: block;
  padding: 7px 10px;
  border-radius: var(--radius-sm);
  color: var(--muted);
  font-size: 12.5px;
  line-height: 1.3;
}
.side-sublink:hover { color: var(--fg); background: var(--bg); text-decoration: none; }
.side-sublink.is-current { color: var(--accent); background: var(--accent-soft); font-weight: 600; }
.side-foot {
  margin-top: auto;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-top: 14px;
  border-top: 1px solid var(--border);
}
.side-user { display: flex; align-items: center; gap: 9px; min-width: 0; }
.side-avatar {
  display: grid; place-items: center; width: 32px; height: 32px; flex: 0 0 32px;
  border-radius: 999px; background: var(--fg); color: #fff;
  font-size: 11px; font-weight: 700; letter-spacing: 0.03em;
}
.side-user-text { display: flex; flex-direction: column; min-width: 0; line-height: 1.2; }
.side-user-text .user-name { font-size: 12.5px; font-weight: 600; }
.side-user-text .user-role { font-size: 11px; color: var(--muted); letter-spacing: 0.05em; text-transform: uppercase; }
.side-role { display: flex; flex-direction: column; align-items: stretch; gap: 4px; }
.side-role > span {
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.07em;
  text-transform: uppercase; color: var(--muted);
}
.side-role .role-select { max-width: none; width: 100%; }
.side-logout { justify-content: flex-start; padding-left: 0; color: var(--muted); }
.side-logout:hover { background: transparent; color: var(--danger); }
.shell-main { min-width: 0; }
.shell-main .wrap { max-width: 1180px; }
.shell-main .foot { max-width: 1180px; }

@media (max-width: 900px) {
  .shell { display: block; }
  .sidebar {
    position: static;
    height: auto;
    overflow: visible;
    border-right: 0;
    border-bottom: 1px solid var(--border);
    padding: 12px 16px;
    gap: 10px;
  }
  .side-brand { margin: 0; }
  .side-nav {
    flex-direction: row;
    overflow-x: auto;
    gap: 2px;
    margin: 0 -4px;
    padding: 0 4px 2px;
    scrollbar-width: thin;
  }
  /* #96 (F): в горизонтальной навигации ссылки не сжимаются — иначе
     nowrap-подписи наезжают друг на друга на узких экранах. */
  .side-link { flex: 0 0 auto; white-space: nowrap; padding: 7px 9px; font-size: 12.5px; }
  .side-nav { flex: 0 0 auto; }
  .side-link-settings { margin-top: 0; padding-top: 7px; border-top: 0; }
  .side-foot {
    flex-direction: row;
    align-items: center;
    flex-wrap: wrap;
    margin-top: 0;
    padding-top: 10px;
  }
  .side-user { margin-right: auto; }
  .side-role { flex: 1 1 170px; min-width: 150px; }
  .side-logout { margin-left: auto; }
  /* На узкой ширине панель раскрывается в потоке под навигацией: так она
     остаётся доступной без абсолютного позиционирования. */
  .side-subnav {
    position: static;
    flex-direction: row;
    overflow-x: auto;
    min-width: 0;
    max-width: none;
    gap: 2px;
    margin: 0 -4px;
    padding: 0 4px 2px;
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    scrollbar-width: thin;
  }
  .side-sublink { white-space: nowrap; }
}

.panel { overflow-x: auto; }

/* ── редактирование карточки проекта ───────────────────────────────────── */
.head-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: flex-end; }
.project-summary { height: auto; min-height: 84px; padding: 10px 11px; line-height: 1.5; resize: vertical; }
.field textarea.input { width: 100%; }
.input-sm { height: 32px; font-size: 12.5px; padding: 0 8px; }
.edit-table td { padding: 8px 10px; vertical-align: middle; }
.edit-table .input { min-width: 130px; }
.edit-table td:first-child .input { min-width: 220px; }
.edit-actions { display: flex; gap: 8px; margin-top: 12px; flex-wrap: wrap; align-items: center; }

.row-link { cursor: pointer; }
.row-link:hover { background: #fbfcfe; }

.row-link { position: relative; }
.row-link td:first-child a::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
}

/* ── дела на сегодня ────────────────────────────────────────────────────── */
.today-list { list-style: none; margin: 0; padding: 0; }
.today-item {
  display: grid;
  grid-template-columns: 74px minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  padding: 11px 0;
  border-top: 1px solid var(--border);
}
.today-item:first-child { border-top: 0; }
.today-kind {
  display: inline-flex; align-items: center; justify-content: center;
  height: 22px; padding: 0 8px; border-radius: 999px;
  border: 1px solid var(--border); background: var(--bg);
  font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.05em;
  text-transform: uppercase; color: var(--muted); white-space: nowrap;
}
.today-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.today-action { font-size: 12px; color: var(--accent); white-space: nowrap; }
.today-action:hover { text-decoration: none; color: var(--fg); }
.today-foot {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--border);
}

@media (max-width: 720px) {
  .today-item { grid-template-columns: minmax(0, 1fr) auto; }
  .today-kind { grid-column: 1 / -1; justify-self: start; }
}

/* ── виджеты обзора ─────────────────────────────────────────────────────── */
.widget-edit { flex: 0 0 auto; margin-left: auto; }
.widget-config { margin-bottom: var(--s4); }
.widget-options {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 8px;
  margin-top: 12px;
}
.widget-option {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  padding: 9px 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
  cursor: pointer;
}
.widget-option:hover { border-color: var(--line); background: #fbfcfe; }
.widget-option input { margin-top: 3px; flex: 0 0 auto; }
.widget-option-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.widget-option-title { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 12.5px; font-weight: 600; }

.widget-edit { align-self: center; }

a.kpi { color: var(--fg); text-decoration: none; }
a.kpi:hover { border-color: var(--line); background: #fbfcfe; text-decoration: none; }
a.kpi:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.widget-personal { max-width: 340px; margin-top: 14px; display: flex; flex-direction: column; gap: 6px; }
.widget-personal .meta {
  font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--muted);
}

.change-list li { display: block; padding: 0; }
.change-row {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 10px 8px;
  border-radius: var(--radius-sm);
  color: var(--fg);
}
.change-row:hover { background: var(--bg); text-decoration: none; }
.change-row:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.change-more { margin-left: auto; font-size: 11.5px; color: var(--accent); white-space: nowrap; padding-top: 2px; }
@media (max-width: 720px) {
  .change-more { display: none; }
}

/* ── документы: форма по кнопке ─────────────────────────────────────────── */
.doc-add-bar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; flex-wrap: wrap;
}
.doc-add-bar .sub { max-width: 62ch; }
.doc-add-bar + #doc-add-form .doc-form { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--border); }
@media (max-width: 720px) {
  .doc-add-bar { align-items: flex-start; flex-direction: column; }
  .doc-add-bar .btn { width: 100%; }
}

/* ── аналитика: отчёт по портфелю ───────────────────────────────────────── */
.report { padding: 0; overflow: hidden; }
.report-head {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 20px;
  padding: 20px 24px; border-bottom: 1px solid var(--border);
  background: linear-gradient(180deg, #ffffff, #fbfcfe);
}
.report-kicker {
  font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--muted);
}
.report-head h3 {
  margin: 5px 0 6px; font-family: var(--display); font-size: 21px;
  line-height: 1.2; letter-spacing: -0.01em;
}
.report-lead { margin: 0; max-width: 74ch; font-size: 12.5px; line-height: 1.55; color: var(--muted); }
.report-badge {
  flex: 0 0 auto; height: 22px; padding: 0 9px; border: 1px solid var(--border);
  border-radius: 999px; background: var(--surface);
  font-family: var(--mono); font-size: 9.5px; line-height: 20px;
  letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted);
}
.report-facts {
  display: grid; grid-template-columns: repeat(5, minmax(0, 1fr));
  border-bottom: 1px solid var(--border);
}
.report-fact {
  display: flex; flex-direction: column; gap: 3px;
  padding: 13px 18px; border-left: 1px solid var(--border); min-width: 0;
}
.report-fact:first-child { border-left: 0; }
.report-fact span {
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.05em;
  text-transform: uppercase; color: var(--muted); white-space: nowrap;
}
.report-fact strong { font-size: 17px; font-weight: 700; font-variant-numeric: tabular-nums; }
.report-body { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); }
.report-col { padding: 16px 24px 18px; min-width: 0; }
.report-col + .report-col { border-left: 1px solid var(--border); }
.report-col h4 {
  margin: 0 0 10px; font-family: var(--mono); font-size: 9.5px;
  letter-spacing: 0.07em; text-transform: uppercase; color: var(--muted);
}
.report-risk-list { list-style: none; margin: 0 0 9px; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.report-risk-list li { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.report-risk-list .strong-link { font-size: 12.5px; }
.report-link { font-size: 11.5px; color: var(--accent); }
.report-link:hover { color: var(--fg); text-decoration: none; }
.report-docs { list-style: none; margin: 0 0 9px; padding: 0; }
.report-docs li {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  padding: 5px 0; border-top: 1px solid var(--border); font-size: 12px;
}
.report-docs li:first-child { border-top: 0; padding-top: 0; }
.report-docs span { color: var(--muted); }
.report-docs strong { font-size: 12.5px; font-variant-numeric: tabular-nums; }
.report-foot {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: 12px 24px; border-top: 1px solid var(--border); background: var(--bg);
}
@media (max-width: 900px) {
  .report-facts { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .report-fact:nth-child(3n + 1) { border-left: 0; }
  .report-fact:nth-child(n + 4) { border-top: 1px solid var(--border); }
}
@media (max-width: 720px) {
  .report-head { flex-direction: column; gap: 10px; padding: 16px; }
  .report-badge { align-self: flex-start; }
  .report-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .report-fact { padding: 11px 14px; }
  .report-fact:nth-child(3n + 1) { border-left: 1px solid var(--border); }
  .report-fact:nth-child(2n + 1) { border-left: 0; }
  .report-fact:nth-child(3) { border-top: 1px solid var(--border); }
  .report-body { grid-template-columns: minmax(0, 1fr); }
  .report-col { padding: 14px 16px 16px; }
  .report-col + .report-col { border-left: 0; border-top: 1px solid var(--border); }
  .report-foot { flex-direction: column; align-items: flex-start; padding: 12px 16px; }
  .report-foot .btn { width: 100%; }
}

/* ── база знаний: редактирование материала ──────────────────────────────── */
.knowledge-edit-form .field-check {
  flex-direction: row; align-items: center; gap: 8px; padding-top: 20px;
}
.knowledge-edit-form .field-check input {
  width: 16px; height: 16px; margin: 0; accent-color: var(--accent); flex: 0 0 auto;
}
.knowledge-edit-form .field-check span {
  font-family: inherit; font-size: 12.5px; letter-spacing: 0; text-transform: none; color: var(--fg);
}
@media (max-width: 720px) {
  .knowledge-edit-form .field-check { padding-top: 0; }
}
.knowledge-edit-form textarea.input {
  height: auto; min-height: 84px; padding: 10px 11px; line-height: 1.5; resize: vertical;
}
.knowledge-edit-form textarea.kb-content-input { min-height: 152px; }
.kb-content { white-space: pre-line; font-size: 13.5px; line-height: 1.65; color: var(--fg); }
.knowledge-edit-form .kb-access { gap: 9px; }
.kb-access-opts { display: flex; flex-wrap: wrap; gap: 9px 16px; }
.kb-access-opts .check { display: flex; align-items: center; gap: 7px; min-width: 0; cursor: pointer; }
.kb-access-opts .check input {
  width: 16px; height: 16px; margin: 0; accent-color: var(--accent); flex: 0 0 auto;
}
.kb-access-opts .check span { font-size: 12.5px; color: var(--fg); }
.kb-access-hint { margin: 0; font-size: 11.5px; line-height: 1.5; color: var(--muted); }
.kb-access-badge {
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.05em;
  text-transform: uppercase; color: var(--accent);
}

/* ── проект: связанная база знаний ─────────────────────────────────────── */
.block-tools { display: flex; align-items: center; justify-content: flex-end; gap: 10px; flex-wrap: wrap; }

/* ── проект: чеки самозанятых ───────────────────────────────────────────── */
.receipt-file { display: block; font-size: 12.5px; font-weight: 600; overflow-wrap: anywhere; }
.receipt-panel { margin-top: 12px; }
.receipt-form input[type="file"] { height: auto; padding: 8px 10px; font-size: 12.5px; }
.receipt-form .hint { margin-top: 4px; }

/* ── проект: обсуждение ─────────────────────────────────────────────────── */
.chat-panel { display: flex; flex-direction: column; }
.chat-head {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 12px 18px; border-bottom: 1px solid var(--border); background: var(--surface);
}
.chat-people { display: flex; align-items: center; gap: 10px; min-width: 0; }
.chat-sub { font-size: 11.5px; color: var(--muted); }
.chat-avatar {
  display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto;
  width: 30px; height: 30px; border-radius: 999px;
  background: var(--accent-soft); color: var(--accent);
  font-family: var(--mono); font-size: 9.5px; font-weight: 600; letter-spacing: 0.02em;
}
.chat-avatar-sm { width: 24px; height: 24px; margin-left: -7px; border: 2px solid var(--surface); font-size: 8px; }
.chat-avatar-sm:first-child { margin-left: 0; }
.chat-log { padding: 16px 20px; max-height: 460px; overflow-y: auto; background: #fbfcfe; }
.chat-msg { display: flex; align-items: flex-start; gap: 10px; }
.chat-msg + .chat-msg { margin-top: 14px; }
.chat-msg.is-me { flex-direction: row-reverse; }
.chat-main { min-width: 0; max-width: 78%; }
.chat-meta { display: flex; align-items: baseline; flex-wrap: wrap; gap: 7px; margin-bottom: 4px; }
.chat-msg.is-me .chat-meta { justify-content: flex-end; }
.chat-name { font-size: 12px; font-weight: 600; }
.chat-time { font-size: 10.5px; color: var(--muted); }
.chat-bubble {
  padding: 9px 12px; border: 1px solid var(--border); border-radius: 10px;
  background: var(--surface); font-size: 13px; line-height: 1.5;
  overflow-wrap: anywhere; white-space: pre-line;
}
.chat-msg.is-me .chat-bubble { background: var(--accent-soft); border-color: #c8d8f8; }
@media (max-width: 720px) {
  .chat-head { padding: 10px 14px; }
  .chat-sub { display: none; }
  .chat-log { padding: 12px 14px; max-height: 55vh; }
  .chat-main { max-width: 86%; }
}

/* ── документы: файл в форме ────────────────────────────────────────────── */
.doc-form input[type="file"] { height: auto; padding: 8px 10px; font-size: 12.5px; }
.doc-form .hint.field-wide { margin: 0; }

/* ── проект: отчёт по смете ─────────────────────────────────────────────── */
.project-report-link-row,
.project-report-empty {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; flex-wrap: wrap;
}
.project-report-link-main { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.project-report-link { font-size: 14px; }
.project-report-url { overflow-wrap: anywhere; }
.project-report-form { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--border); }
.project-report-empty { align-items: center; }
@media (max-width: 720px) {
  .project-report-link-row, .project-report-empty { flex-direction: column; align-items: flex-start; }
  .project-report-link-row .btn, .project-report-empty .btn { width: 100%; }
}

/* ── проект: сторонняя смета ────────────────────────────────────────────── */
.estimate-link-row {
  display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap;
  margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--border);
}
.estimate-link-main { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.estimate-link { font-size: 13.5px; }
.estimate-link-url { overflow-wrap: anywhere; }
.estimate-link-form { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--border); }
@media (max-width: 720px) {
  .estimate-link-row { flex-direction: column; align-items: flex-start; }
  .estimate-link-row .btn { width: 100%; }
}

/* ── проект: карточка участника ─────────────────────────────────────────── */
.person-link { color: var(--fg); }
.person-link:hover { color: var(--fg); text-decoration: none; }
.person-link:hover .person-name { color: var(--accent); }
.person-open { flex: 0 0 auto; color: var(--accent); font-size: 13px; }
.person-avatar-lg { width: 48px; height: 48px; border-radius: 14px; font-size: 15px; }
.person-profile-head { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.person-profile-head h2 { margin: 0; font-family: var(--display); font-size: 20px; line-height: 1.2; }
.person-profile-head .sub { margin: 0; }
.person-facts { margin-bottom: 0; }

/* ── проект: добавление задачи ──────────────────────────────────────────── */
.task-form-panel { margin-top: 12px; }
.task-form .form-actions { padding-top: 4px; }

/* ── проект: кликабельные задачи ────────────────────────────────────────── */
.task-row { cursor: pointer; }
.task-open { margin-left: 6px; color: var(--accent); font-size: 11px; }
.task-description { display: block; margin-top: 2px; font-size: 12px; line-height: 1.4; }

/* ── Issue #42: многострочный текст (описание, запись истории) ──────────── */
.pre-wrap { white-space: pre-wrap; overflow-wrap: anywhere; margin: 0; }

/* ── проект: кликабельные этапы ─────────────────────────────────────────── */
.stage-link { display: flex; align-items: flex-start; gap: 12px; width: 100%; color: var(--fg); }
.stage-link:hover { color: var(--fg); text-decoration: none; }
.stage-link:hover .stage-main > span:first-child { color: var(--accent); }
.stage-link .stage-main { flex: 1 1 auto; }
.stage-open { margin-left: auto; color: var(--accent); font-size: 11px; padding-top: 2px; }
.stage-nav { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.stage-nav-item { display: flex; flex-direction: column; gap: 3px; padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--radius-sm); color: var(--fg); }
.stage-nav-item:hover { border-color: var(--line); background: var(--bg); text-decoration: none; }
.stage-nav-next { text-align: right; }
@media (max-width: 720px) {
  .stage-nav { grid-template-columns: minmax(0, 1fr); }
}

/* ── проект: кликабельные события ───────────────────────────────────────── */
.timeline-link { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; width: 100%; color: var(--fg); }
.timeline-link:hover { color: var(--fg); text-decoration: none; }
.timeline-link:hover .timeline-main > span:first-child { color: var(--accent); }
.timeline-open { color: var(--accent); font-size: 11px; padding-top: 2px; }

/* ── проект: кликабельные выпуски ───────────────────────────────────────── */
.release-link { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; width: 100%; color: var(--fg); }
.release-link:hover { color: var(--fg); text-decoration: none; }
.release-link:hover > span:first-child { color: var(--accent); }
.release-meta { display: inline-flex; align-items: center; gap: 5px; color: var(--muted); font-size: 11px; white-space: nowrap; }
.release-open { color: var(--accent); }
.release-list .release-link { font-size: 12.5px; }

/* ── справочник клиентов (#50) ──────────────────────────────────────────── */
.client-new {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s3);
  padding-top: var(--s3); border-top: 1px dashed var(--border);
}
.client-new[hidden] { display: none; }
@media (max-width: 720px) {
  .client-new { grid-template-columns: minmax(0, 1fr); }
}

/* ── Issue #48: компактные кнопки и переполнение в таблицах финансов ────── */

/* Форма назначения сметы стоит внутри ячейки таблицы. Общая .form —
   сетка repeat(2, minmax(0, 1fr)) — сжимала select «Без классификации»
   до 72 px на ширине ≤400 px (и до 43 px, когда колонку раздували
   длинные названия): подпись обрезалась. Flex с базой 180 px держит
   селект читаемым и тянет минимальную ширину колонки за собой, а кнопка
   «Указать» переносится на отдельную строку, когда в ячейке мало места. */
.form.estimate-kind-form {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: var(--s2);
}
/* #94, п. 6: правила адресованы только прямым детям формы. Раньше
   `.form.estimate-kind-form .input { flex: 1 1 180px }` попадало на select
   внутри `.field` (flex-колонка), flex-basis работал по высоте, и селект
   назначения растягивался до 180–250 px, раздувая строку таблицы смет.
   Поле внутри .field снова получает ширину 100 %, высоту — из .input. */
.form.estimate-kind-form > .field { flex: 1 1 180px; min-width: 180px; margin: 0; }
.form.estimate-kind-form > .field .input { width: 100%; }
.form.estimate-kind-form > .btn { flex: 0 0 auto; }
/* #93: «Иное» раскрывает поле ручного назначения; в свёрнутом виде оно
   скрыто и не занимает место в ячейке. Поле — тоже прямой ребёнок формы,
   поэтому flex-база применяется к ширине, а не к высоте. */
.form.estimate-kind-form > [data-estimate-kind-custom] { flex: 1 1 180px; min-width: 160px; }
.form.estimate-kind-form > [data-estimate-kind-custom][hidden] { display: none; }

/* Чипы-статусы в таблицах: длинная подпись синхронизации задавала
   минимальную ширину колонки (249 px) и не давала таблице ужаться.
   Перенос по словам сохраняет статус и освобождает место действиям,
   но не рвёт слова посередине (break-word, не anywhere). */
.table .chip {
  white-space: normal; overflow-wrap: break-word;
  height: auto; min-height: 22px; padding: 2px 9px;
}

/* На узком экране первая колонка — название — не должна сжиматься до
   ширины заголовка-аббревиатуры: overflow-wrap: anywhere разрешает
   перенос, но таблица отдаёт колонке минимум, и текст рвётся по буквам.
   Нижняя граница держит слово целиком, остальное прокручивает .panel
   (overflow-x: auto выше). Правило только для SPA: у серверных страниц
   панель обрезает содержимое, им нижняя граница навредила бы. */
@media (max-width: 720px) {
  .table td:first-child { min-width: 150px; }
}


/* ════════════════════════════════════════════════════════════════════════
   #95 · Localhost Improvement Pool — зоны правок параллельных потоков.
   Каждый поток добавляет свои правила СТРОГО под своим маркером, маркер
   сохраняет и не переносит. Общие правила — только в server/public/app.css
   (зона Lead) или в существующих блоках выше по согласованию.
   ════════════════════════════════════════════════════════════════════════ */

/* #95 · поток «финансы» — ниже этого маркера */
/* #95 (5, 7): главный финансовый виджет — один на всех подвкладках.
   Кнопки «Детализация плана и факта» больше нет; подпись отделяет виджет
   от вкладок, числа остаются читаемыми на узком экране. */
.finance-widget .finance-widget-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--s3); flex-wrap: wrap; margin-bottom: var(--s3);
}
.finance-widget .finance-widget-head .meta {
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.07em;
  text-transform: uppercase;
}
.finance-widget .fact-grid { margin-bottom: 0; }

/* #95 (8–14): таблицы смет. Ссылка «Изменить в карточке» — второй строкой
   под chip назначения; действия и даты не переносятся. */
[data-od-id="project-estimate"] .table td a.sub,
[data-od-id="project-estimates-list"] .table td a.sub { display: block; margin-top: 3px; }

/* #95 (23): форма и блок не примыкают друг к другу — единый вертикальный
   ритм для смет, операций и настроек источника отчёта. */
[data-od-id="project-estimate"] > .block-head,
[data-od-id="project-operations"] > .block-head,
[data-od-id="project-report-source"] > .block-head { margin-bottom: var(--s3); }
[data-od-id="project-estimate"] > .panel + .panel,
[data-od-id="project-operations"] > .panel + .panel,
[data-od-id="project-report-source"] > .panel + .panel { margin-top: var(--s4); }

/* #95 (24, 25, 30, 38): строка типа в единой форме «Добавить операцию». */
.operation-kind-row { margin-bottom: var(--s4); }
.operation-kind-row .field { max-width: 420px; }
.operation-form-panel .form + .form { margin-top: var(--s4); }

/* #95 (26, 31, 32): чекбоксы в формах операций и источника отчёта. */
.operation-check {
  display: flex; flex-direction: row; align-items: flex-start;
  gap: 8px; flex-wrap: wrap;
}
.operation-check > span:not(.sub) {
  font-family: var(--font); font-size: 13px; letter-spacing: 0;
  text-transform: none; color: var(--fg);
}
.operation-check > input { margin-top: 3px; }
.operation-check-row { display: flex; flex-wrap: wrap; gap: var(--s4); padding: 2px 0; }
.operation-check-row .check {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 13px; cursor: pointer;
}

/* #95 (40): полное редактирование операции — раскрытая строка таблицы. */
.operation-edit-row > td { padding: var(--s4); background: var(--bg); }
.operation-edit-row .form { margin: 0; }
.operation-edit-row .operation-delete { margin-right: auto; color: var(--danger); }
.operation-document .field-check {
  display: inline-flex; align-items: center; gap: 7px; margin-top: 6px;
  font-size: 12.5px;
}

/* #95 (22): пояснение «ещё N смет» под таблицей блока. */
[data-od-id="project-estimate"] > p.sub { margin-top: var(--s2); }

/* #95 · поток «документы» — ниже этого маркера */

/* #95 (16, 44): контрагенты документа — список связей, а не одна строка.
   У каждой связи имя, тип, роль/задача, контакты, регистрация и действия. */
.counterparty-link-list {
  list-style: none; margin: var(--s3) 0 0; padding: 0;
  display: grid; gap: var(--s3);
}
.counterparty-link {
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  padding: var(--s3) var(--s4); background: var(--surface);
}
.counterparty-link-head {
  display: flex; align-items: center; gap: var(--s2); flex-wrap: wrap;
}
.counterparty-link-head .chip { flex: none; }
.counterparty-link-actions {
  margin-left: auto; display: inline-flex; gap: 6px; flex-wrap: wrap;
}
.counterparty-link-meta { margin: 6px 0 0; overflow-wrap: break-word; }
.counterparty-role { margin: 6px 0 0; }
.counterparty-role .k { margin-right: 4px; }
.counterparty-role-form {
  margin-top: var(--s3); padding-top: var(--s3);
  border-top: 1px dashed var(--border);
}
.counterparty-option { display: flex; gap: var(--s2); align-items: flex-start; padding: 6px 0; }

/* #95 (17): сообщение о созданном дочернем документе; значения текущего
   документа не подменяются. */
.doc-upload-notice { margin: 0 0 var(--s4); border-left: 3px solid var(--accent); }
.doc-upload-notice .form-actions { margin-top: var(--s3); }

/* #95 (19): «Поле: было → стало» в истории документа. */
.doc-event-details {
  margin: 6px 0 0; padding: 0; list-style: none;
  display: grid; gap: 2px;
}
.doc-event-details li {
  font-size: 12.5px; line-height: 1.45; color: var(--muted);
  overflow-wrap: break-word;
}
.doc-event-details .k {
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.07em;
  text-transform: uppercase; margin-right: 4px;
}
.doc-detail-from { opacity: 0.7; text-decoration: line-through; }
.doc-detail-to { font-weight: 600; color: var(--fg); }

/* #95 (18, 12/13): назначение сметы внутри формы правки документа. */
.doc-edit-panel .estimate-edit-kind { display: grid; gap: var(--s3); }
/* Поле «своё назначение» скрыто, пока в селекте не выбрано «Иное»: авторский
   display у .field перебивает UA-стиль [hidden], поэтому правило явное. */
.doc-edit-panel .estimate-edit-kind [data-estimate-kind-custom][hidden] { display: none; }
.doc-edit-panel .estimate-edit-kind .hint { margin: 0; }

/* #95 · поток «оболочка» — ниже этого маркера */

/* #95 (55): подменю справочника использует те же .side-subnav/.side-sublink,
   что и настройки. Триггер стоит в общем списке навигации, поэтому не
   забирает margin-top:auto у «Настроек». */
.side-link-directory { /* триггер подменю справочника — стиль как у .side-link */ }

/* #95 (56–58): строки справочника кликабельны целиком; ссылка в первой
   колонке остаётся обычной ссылкой, hover подсвечивает строку. */
.directory-clients-table .row-link:hover { background: #fbfcfe; }

/* #95 (53): чип типа участника рядом с подписью в строке команды —
   колонка .person-main, поэтому чип не растягивается на всю ширину. */
.person-main .chip { align-self: flex-start; margin-top: 2px; }

/* #95 (51): инлайн-селект статуса продукта в шапке карточки не должен
   занимать всю ширину и конкурировать с кнопками. */
.product-status-field { display: flex; align-items: center; gap: var(--s2); }
.product-status-field > span {
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.07em;
  text-transform: uppercase; color: var(--muted);
}
.product-status-field .input { min-width: 170px; }

/* #95 (57): формы создания в справочнике стоят между шапкой блока и таблицей;
   отбивка отделяет их от таблицы, как у остальных форм. */
.directory-client-form, .directory-person-form { margin-bottom: var(--s3); }

/* ═══════════════════════════════════════════════════════════════════════
   Issue #96 · общие компоненты (реализованы Lead; потоки только используют)
   ═══════════════════════════════════════════════════════════════════════ */

/* #96 (D1): «Финансы» — такой же триггер выдвижного подменю, как
   «Настройки»/«Справочник»; стили панели общие (.side-subnav). */
.side-link-finance { /* триггер подменю финансов — стиль как у .side-link */ }

/* #96 (A1, B5, A5, C2): комбобокс с поиском — input + список вариантов.
   Контейнер не ломает сетку форм (.field), список позиционируется поверх. */
.combo { position: relative; min-width: 0; width: 100%; }
.combo-input { width: 100%; padding-right: 28px; }
.combo-toggle {
  position: absolute; top: 50%; right: 4px; transform: translateY(-50%);
  width: 22px; height: 22px; padding: 0; border: 0; border-radius: var(--radius-sm);
  background: transparent; color: var(--muted); font-size: 11px; line-height: 1;
  cursor: pointer;
}
.combo-toggle:hover { color: var(--fg); background: var(--bg); }
.combo.is-open .combo-toggle { color: var(--accent); }
.combo-list {
  position: absolute; z-index: 40; top: calc(100% + 4px); left: 0; right: 0;
  max-height: 240px; overflow-y: auto; margin: 0; padding: 4px; list-style: none;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-sm); box-shadow: 0 6px 18px rgba(15, 26, 38, 0.10);
}
.combo-list[hidden] { display: none; }
.combo-option {
  padding: 6px 8px; border-radius: 6px; font-size: 12.5px; line-height: 1.35;
  color: var(--fg); cursor: pointer; overflow-wrap: anywhere;
}
.combo-option:hover, .combo-option.is-active { background: var(--bg); }
.combo-option[aria-selected="true"] { color: var(--accent); font-weight: 600; }
.combo-option[hidden] { display: none; }
.combo-group {
  padding: 6px 8px 3px; font-family: var(--mono); font-size: 9.5px;
  letter-spacing: 0.07em; text-transform: uppercase; color: var(--muted);
}
.combo-create-wrap { margin-top: 1px; border-top: 1px solid var(--border); padding-top: 2px; }
.combo-create {
  width: 100%; min-height: 30px; padding: 4px 8px; border: 0; border-radius: 6px; text-align: left;
  background: transparent; color: var(--accent); font-family: inherit;
  font-size: 12.5px; line-height: 1.3; cursor: pointer;
}
.combo-create:hover { background: var(--accent-soft); }
.combo-empty { display: block; padding: 3px 8px; font-size: 11.5px; line-height: 1.3; color: var(--muted); }
.combo-empty[hidden] { display: none; }

/* #96 (B1, B3, A5, C2): модальное окно. Живёт в #modal-root вне #app,
   чтобы перерисовка страницы не разрушала диалог. */
.modal-root[hidden] { display: none; }
.modal-backdrop {
  position: fixed; inset: 0; z-index: 100; display: flex; align-items: flex-start;
  justify-content: center; padding: 6vh var(--s4) var(--s4);
  background: rgba(15, 26, 38, 0.38); overflow-y: auto;
}
.modal {
  width: 100%; max-width: 560px; margin: 0 auto; background: var(--surface);
  border: 1px solid var(--border); border-radius: var(--radius);
  box-shadow: 0 18px 48px rgba(15, 26, 38, 0.22);
}
.modal-lg { max-width: 760px; }
.modal-xl { max-width: 1040px; }
.modal-head {
  display: flex; align-items: flex-start; justify-content: space-between; gap: var(--s3);
  padding: var(--s4) var(--s4) 0;
}
.modal-head h2 { font-size: 16px; overflow-wrap: anywhere; }
.modal-close {
  flex: 0 0 auto; width: 28px; height: 28px; padding: 0; border: 0; border-radius: var(--radius-sm);
  background: transparent; color: var(--muted); font-size: 18px; line-height: 1; cursor: pointer;
}
.modal-close:hover { color: var(--fg); background: var(--bg); }
.modal-lead { padding: var(--s2) var(--s4) 0; }
.modal-body { padding: var(--s4); }
.modal-foot {
  display: flex; align-items: center; gap: var(--s2); flex-wrap: wrap;
  padding: 0 var(--s4) var(--s4);
}
body.modal-open { overflow: hidden; }

/* #96 (A6): закрываемые уведомления. Крестик не «устраняет» причину,
   поэтому остаётся на месте при любой ошибке. */
.flash { display: flex; align-items: flex-start; gap: var(--s3); }
/* Пустой контейнер ошибки в модалке/форме не должен показывать фон:
   собственный display перебивает UA-правило [hidden]. */
.notice-inline[hidden] { display: none; }
.flash-text { flex: 1 1 auto; min-width: 0; }
.notice-dismiss {
  flex: 0 0 auto; width: 22px; height: 22px; padding: 0; border: 0;
  border-radius: var(--radius-sm); background: transparent; color: inherit;
  font-size: 15px; line-height: 1; cursor: pointer; opacity: 0.65;
}
.notice-dismiss:hover { opacity: 1; background: rgba(15, 26, 38, 0.06); }
.notice-inline {
  display: flex; align-items: flex-start; gap: var(--s3); margin: 0 0 var(--s3);
  padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--radius-sm);
  background: var(--surface); font-size: 12.5px; line-height: 1.5;
}
.notice-inline.warn { border-color: #e8d3a8; background: var(--warn-soft); color: var(--warn); }
.notice-inline.error { border-color: #f0c6c2; background: var(--danger-soft); color: var(--danger); }
.notice-inline.ok { border-color: #c4e3d3; background: var(--ok-soft); color: var(--ok); }
.notice-main { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
.notice-actions { flex: 0 0 auto; display: flex; gap: var(--s2); flex-wrap: wrap; }

/* ═══════════════════════════════════════════════════════════════════════
   Issue #96 · поток A/E (люди, контрагенты, справочники) — ниже маркера
   ═══════════════════════════════════════════════════════════════════════ */
/* #96 · поток A/E · вставка стилей ниже этой строки */

/* #96 (A3): карточка человека — общая дизайн-система. Длинные имена, почта,
   ссылки и заметки не ломают сетку: узкие колонки сжимаются, значения
   переносятся по словам, действия в шапке переносятся на новую строку. */
.issue96-person-page .page-head > div { min-width: 0; }
.issue96-person-page .page-head h1 { overflow-wrap: anywhere; }
.issue96-person-page .page-head .head-actions {
  flex-wrap: wrap; justify-content: flex-end; gap: var(--s2);
}
.issue96-person-page .person-profile-head > div { min-width: 0; }
.issue96-person-page .person-profile-head h2 { overflow-wrap: anywhere; }
.issue96-person-page .lead { overflow-wrap: anywhere; }
.issue96-person-page .fact-grid { margin-bottom: var(--s4); }
.issue96-person-page .fact-grid .v { min-width: 0; overflow-wrap: anywhere; }
.issue96-person-page .source-row { align-items: baseline; flex-wrap: wrap; }
.issue96-person-page .source-row > :last-child { min-width: 0; overflow-wrap: anywhere; }

/* #96 (A5): блоки связи «человек ↔ контрагент». Комбобокс и поле роли
   занимают всю доступную ширину; таблица людей не выдавливает колонку
   действий. */
.issue96-person-client .source-row .v { min-width: 0; overflow-wrap: anywhere; }
.issue96-person-client .form { margin: 0; }
.issue96-client-people .dict-role-note { min-width: 0; overflow-wrap: anywhere; }
.issue96-person-summary { margin-bottom: var(--s3); }
.issue96-detach .form-actions { padding-top: 0; }

/* #96 (E1–E4): единый паттерн справочников — таблица «название · счётчик ·
   действие», инлайн-форма правки в строке, форма создания под таблицей.
   Кнопки в строках одной высоты, переполнения нет на 320–400 px. */
.dict-table td:first-child, .dict-table th:first-child { min-width: 0; }
.dict-name { overflow-wrap: anywhere; }
.dict-usage { white-space: nowrap; font-variant-numeric: tabular-nums; }
.dict-row-actions {
  display: inline-flex; gap: 4px; flex-wrap: wrap; justify-content: flex-end;
}
.dict-row.is-editing td { background: var(--bg); }
.dict-edit-row > td { background: var(--bg); }
.dict-edit-row .form { margin: 0; }
.dict-block + .dict-block { margin-top: var(--s5); }
.dict-block > .notice-inline { margin-bottom: var(--s3); }
/* Формы справочника: одно поле + действие в одной строке, подпись под ними.
   Так создание и правка выглядят одинаково во всех подразделах (E4). */
.issue96-dict-create-form, .issue96-fin-create-form,
.dict-edit-row .form {
  grid-template-columns: minmax(0, 1fr) auto; align-items: end;
}
.issue96-dict-create-form .form-actions, .issue96-fin-create-form .form-actions,
.dict-edit-row .form .form-actions {
  grid-column: auto; padding-top: 0;
}
.issue96-dict-create-form .hint, .issue96-fin-create-form .hint,
.dict-edit-row .form .hint { grid-column: 1 / -1; margin: var(--s2) 0 0; }
.issue96-dict-create-form { margin-top: var(--s4); }
.issue96-fin-create-form { margin-top: var(--s4); }

@media (max-width: 720px) {
  .issue96-person-page .fact-grid { grid-template-columns: minmax(0, 1fr); }
  .issue96-person-page .head-actions { width: 100%; justify-content: flex-start; }
}

@media (max-width: 640px) {
  .dict-table th, .dict-table td { padding-left: var(--s2); padding-right: var(--s2); }
  .dict-row-actions { justify-content: flex-start; }
  .dict-row-actions .btn { padding: 0 8px; font-size: 11.5px; }
  .dict-edit-row .form { grid-template-columns: minmax(0, 1fr); }
}

/* ═══════════════════════════════════════════════════════════════════════
   Issue #96 · поток B (финансы и операции) — ниже маркера
   ═══════════════════════════════════════════════════════════════════════ */

/* #96 (D1/P1): подвал «Все операции» — видимое ограничение страницы и
   догрузка следующей. Кнопка не появляется, если показаны все записи. */
.fin-all-foot {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s3);
  flex-wrap: wrap; margin-top: var(--s3);
}
.fin-all-foot .sub { flex: 1 1 320px; min-width: 0; }
.fin-all-foot .btn { flex: 0 0 auto; }

/* #96 · поток B · вставка стилей ниже этой строки */

/* #96 (B4): фильтры операций — логические группы с подписями, единая высота
   контролов, без горизонтального переполнения. */
.fin-filters {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: var(--s3) var(--s4);
  align-items: end;
  margin: 0 0 var(--s4);
}
.fin-filter-group { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.fin-filter-label {
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.07em;
  text-transform: uppercase; color: var(--muted); line-height: 1.4;
}
.fin-filters .field { margin: 0; min-width: 0; }
.fin-filters .field > span:first-child { line-height: 1.4; }
.fin-filters .input { width: 100%; }
.fin-filters .kb-filters { display: flex; flex-wrap: wrap; gap: 6px; }
.fin-filter-search { grid-column: span 2; }
.fin-filter-actions {
  display: flex; align-items: end; gap: var(--s2); flex-wrap: wrap;
  grid-column: span 1;
}
.fin-filter-actions .btn { min-height: 34px; }
.fin-filters-all { grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); }
/* #96 (F): селект не обрезает подпись стрелкой — запас справа под нативную
   стрелку и минимальная ширина контрола. */
.fin-filters select.input, .fin-filters-all select.input { padding-right: 34px; min-width: 170px; }

/* #96 (B1): панель выбранных — одна строка, действия справа, на узком
   экране переносятся. */
.fin-bulk {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--s3); flex-wrap: wrap; margin-bottom: var(--s3);
  border-left: 3px solid var(--accent);
}
.fin-bulk[hidden] { display: none; }
.fin-bulk-count { font-size: 13px; }
.fin-bulk-count strong { font-variant-numeric: tabular-nums; }
.fin-bulk-actions { display: flex; gap: var(--s2); flex-wrap: wrap; margin-left: auto; }

/* #96 (B6, B7): единый формат строк операций и связанных чеков.
   table-layout: fixed удерживает геометрию: длинные имена файлов и
   метаданные не растягивают таблицу. На узком экране таблица
   прокручивается внутри .panel (overflow-x: auto), страница — нет. */
.fin-ops-table { table-layout: fixed; min-width: 880px; }
.fin-ops-table th, .fin-ops-table td {
  padding: 9px 10px; font-size: 12.5px; line-height: 1.45; vertical-align: top;
  overflow-wrap: break-word;
}
.fin-ops-table .sub { display: block; margin-top: 2px; font-size: 11.5px; line-height: 1.4; }
.fin-ops-table .fin-select-cell {
  width: 3.6%; text-align: center; padding-left: 6px; padding-right: 6px;
}
.fin-ops-table .fin-select {
  width: 16px; height: 16px; margin: 0; accent-color: var(--accent);
}
.fin-ops-table .fin-col-date { width: 9.5%; }
.fin-ops-table .fin-col-amount { width: 10%; }
.fin-ops-table .fin-col-direction { width: 12%; }
.fin-ops-table .fin-col-status { width: 11.5%; }
.fin-ops-table .fin-col-source { width: 14%; }
.fin-ops-table .fin-col-actions { width: 15%; }
.fin-ops-table .fin-col-project { width: 13%; }
.fin-ops-table td.fin-op-main, .fin-ops-table td.fin-op-source { min-width: 0; }
.fin-ops-table .fin-op-counterparty {
  display: block; font-weight: 600; overflow-wrap: anywhere;
}
.fin-ops-table .fin-op-purpose { color: var(--muted); overflow-wrap: anywhere; }
.fin-ops-table td.fin-op-amount { font-variant-numeric: tabular-nums; }
.fin-ops-table td.fin-op-actions { white-space: normal; }
.fin-ops-table .fin-op-actions .actions {
  display: flex; flex-wrap: wrap; gap: 4px; justify-content: flex-start;
}
.fin-ops-table .fin-op-actions .btn { flex: 0 0 auto; }
.fin-ops-table tr.is-selected > td { background: var(--accent-soft); }
.fin-ops-table .fin-file {
  display: block; max-width: 100%; overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap; font-size: 11.5px;
}
.fin-ops-table .fin-op-project .sub { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fin-all-table { min-width: 900px; }

/* #96 (B6, B7): связанные чеки/возвраты в раскрытой строке не ломают
   геометрию таблицы операций. */
[data-od-id="project-operations"] .receipt-return-row > td,
.fin-ops-table .receipt-return-row > td {
  padding: var(--s3) var(--s4); background: var(--bg); white-space: normal;
}
.receipt-return-row .receipt-returns {
  display: flex; flex-direction: column; gap: 6px; min-width: 0;
  overflow-wrap: anywhere;
}
.receipt-return-row .receipt-returns .head-actions { justify-content: flex-start; }
.receipt-return-row .return-form {
  display: flex; flex-wrap: wrap; gap: var(--s2); align-items: center;
  margin-top: var(--s2);
}
.receipt-return-row .return-form .input { flex: 1 1 160px; min-width: 0; }
.receipt-return-row .plain-list { margin: 0; }
.receipt-return-row .return-row {
  display: flex; flex-wrap: wrap; gap: var(--s2); align-items: center;
}

/* #96 (B2): карточка операции и возврат из неё. */
.fin-back-row { margin-bottom: var(--s3); }
.fin-card-facts .fact-grid { margin-bottom: var(--s3); }
.fin-card-facts .fact-grid > div { min-width: 0; }
.fin-card-facts .fact-grid .v { overflow-wrap: anywhere; }
.fin-card-actions .head-actions { justify-content: flex-start; }
.fin-card-receipt .fin-file { display: inline-block; max-width: 100%; }
.fin-history-details {
  margin: 6px 0 0; padding: 0; list-style: none; display: grid; gap: 2px;
}
.fin-history-details li {
  font-size: 12px; line-height: 1.45; color: var(--muted); overflow-wrap: anywhere;
}
.fin-history-details .meta { margin-right: 6px; }
.fin-return-form-wrap .receipt-returns { gap: var(--s2); }
.fin-return-form-wrap .return-form {
  display: flex; flex-wrap: wrap; gap: var(--s2); align-items: center;
}
.fin-return-form-wrap .return-form .input { flex: 1 1 180px; min-width: 0; }
.fin-return-form-wrap .plain-list { margin: 0; }
.fin-docs-table td { overflow-wrap: anywhere; }
.fin-docs-table .fin-file {
  display: block; max-width: 100%; overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap;
}

/* #96 (B5): контрагент-комбобокс в форме операции; блок «новый
   контрагент» не раздувает сетку формы. */
.fin-counterparty-field { min-width: 0; }
.fin-counterparty-new {
  display: grid; grid-template-columns: minmax(0, 160px) minmax(0, 1fr);
  gap: var(--s2); align-items: end; margin-top: 6px;
}
.fin-counterparty-new .meta { grid-column: 1 / -1; }
.fin-counterparty-new .field { margin: 0; }
.fin-bulk-counterparty { min-width: 0; }

@media (max-width: 760px) {
  .fin-filter-search { grid-column: auto; }
  .fin-filter-actions { grid-column: auto; }
  .fin-counterparty-new { grid-template-columns: minmax(0, 1fr); }
  .fin-ops-table { min-width: 820px; }
}

/* ═══════════════════════════════════════════════════════════════════════
   Issue #96 · поток C (документы и унификация карточек) — ниже маркера
   ═══════════════════════════════════════════════════════════════════════ */
/* #96 · поток C · вставка стилей ниже этой строки */

/* ── C1: договорные реквизиты в карточке и форме правки ────────────────── */
.doc-contract-grid { margin-bottom: var(--s3); }
[data-od-id="doc-contract"] .panel-pad > .hint { margin: 0; }
.doc-form-section-title {
  display: flex; align-items: baseline; gap: var(--s2); flex-wrap: wrap;
  margin: var(--s2) 0 0; font-size: 12.5px; font-weight: 600; color: var(--fg);
}
.doc-contract-fields {
  padding-top: var(--s3); border-top: 1px dashed var(--border); min-width: 0;
}
.doc-contract-fields .meta { font-weight: 400; }
.doc-contract-form-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(168px, 1fr));
  gap: var(--s3); margin-top: var(--s2);
}
.doc-contract-form-grid .field { min-width: 0; }
.doc-contract-form-grid .hint { grid-column: 1 / -1; margin: 0; }

/* ── A2: «Посмотреть всех» — полный список контрагентов по действию ────── */
.counterparty-more {
  display: flex; align-items: center; gap: var(--s2); flex-wrap: wrap;
  margin-top: var(--s3); padding-top: var(--s3); border-top: 1px dashed var(--border);
}
.counterparty-more .meta { font-size: 10.5px; }

/* ── C2: связанные документы ────────────────────────────────────────────── */
.doc-link-list { display: grid; gap: var(--s2); margin: 0; }
.doc-link-row {
  display: flex; align-items: center; gap: var(--s2); flex-wrap: wrap;
  min-width: 0; overflow-wrap: anywhere;
}
.doc-relation {
  padding-top: var(--s2); border-top: 1px solid var(--border); min-width: 0;
}
.doc-relation:first-child { padding-top: 0; border-top: 0; }
.doc-relation-head {
  display: flex; align-items: center; gap: var(--s2); flex-wrap: wrap; min-width: 0;
}
.doc-relation-head .strong-link { overflow-wrap: anywhere; }
.doc-relation-type { margin: 0; }
.doc-relation-remove { margin-left: auto; color: var(--muted); }
.doc-relation-remove:hover { color: var(--danger); background: transparent; }
.doc-link-section { margin-bottom: var(--s4); }
.doc-link-section h3 { font-size: 13px; font-weight: 600; margin-bottom: var(--s3); }
.doc-link-create {
  margin: var(--s3) 0; padding-top: var(--s3); border-top: 1px dashed var(--border);
}
.doc-link-create summary { cursor: pointer; color: var(--accent); font-weight: 600; font-size: 12.5px; }
.doc-link-create summary:hover { text-decoration: underline; }
.doc-link-create .form { margin-top: var(--s3); }
.doc-modal-error {
  margin: 0 0 var(--s3); padding: 8px 10px; border: 1px solid #f0c6c2;
  border-radius: var(--radius-sm); background: var(--danger-soft); color: var(--danger);
  font-size: 12.5px; line-height: 1.5; overflow-wrap: anywhere;
}
.modal-body .form + .hint, .modal-body .doc-link-section + details { margin-top: var(--s3); }

/* ── F: унификация шапок, панелей, форм, таблиц и уведомлений ────────────
   Причины общие для карточек (#/product/2 и др.), поэтому правим общий
   компонент, а не отдельные экраны. Кнопки и поля в шапке — одна высота,
   подпись поля не ломает вертикальное выравнивание. */
.page-head { align-items: flex-end; }
.page-head .head-actions { align-items: center; }
.page-head .head-actions > .field {
  display: flex; flex-direction: row; align-items: center; gap: var(--s2); margin: 0;
}
.page-head .head-actions > .field > span {
  margin: 0; font-family: var(--mono); font-size: 10px; letter-spacing: 0.07em;
  text-transform: uppercase; color: var(--muted); white-space: nowrap;
}
.page-head .head-actions .input,
.page-head .head-actions .btn { height: 36px; font-size: 13px; }
.page-head .head-actions .btn { padding: 0 12px; }
.page-head .head-actions .product-status-field .input { min-width: 150px; }
.page-head h1 { overflow-wrap: anywhere; }
.head-actions { row-gap: var(--s2); }
.block-head { align-items: flex-start; }
.block-head .block-tools { align-items: center; }
.block-tools .btn { height: 32px; }

/* Действия в строках таблиц: одна высота, вертикальное выравнивание,
   перенос по словам, а не по буквам. */
.table td .btn, .table td .chip { vertical-align: middle; }
.table td .btn + .btn, .table td .chip + .chip { margin-left: var(--s2); }
.table td .actions { display: inline-flex; align-items: center; gap: var(--s2); flex-wrap: wrap; }
.data-table td, .data-table th { vertical-align: middle; }

/* На узкой ширине (320–400 px) шапка — в одну колонку: действия слева и на
   всю ширину, без «лестницы» из кнопок и горизонтального переполнения. */
@media (max-width: 720px) {
  .page-head { align-items: flex-start; gap: var(--s3); }
  .page-head > div { min-width: 0; }
  .page-head .head-actions { width: 100%; justify-content: flex-start; row-gap: var(--s2); }
  .page-head .head-actions > .field {
    flex: 1 1 100%; flex-direction: column; align-items: stretch; gap: 4px;
  }
  .page-head .head-actions .input { width: 100%; height: 40px; }
  .page-head .head-actions .btn { height: 40px; }
  .page-head .head-actions .product-status-field .input { min-width: 0; width: 100%; }
  .block-head { flex-wrap: wrap; }
  .block-head .block-tools { width: 100%; justify-content: flex-start; }
  .source-row { flex-direction: column; gap: 4px; }
  .source-row .k { min-width: 0; }
  .source-row .sub { margin-left: 0; }
  .counterparty-link-head { align-items: flex-start; }
  .counterparty-link-actions { width: 100%; margin-left: 0; justify-content: flex-start; }
  .doc-contract-form-grid { grid-template-columns: minmax(0, 1fr); }
  .doc-relation-remove { margin-left: 0; }
  .notice-inline { flex-wrap: wrap; }
  .notice-actions { width: 100%; }
}

/* ═══════════════════════════════════════════════════════════════════════
   Issue #98 · поток W3 (A8–A12): назначение и категория — комбобокс с
   поиском, условные поля нового значения и нового контрагента
   ═══════════════════════════════════════════════════════════════════════ */
.issue98-dict-field { min-width: 0; }
.issue98-dict-combo { min-width: 0; }
.issue98-dict-hint { margin: 0; }
.issue98-dict-new > span:first-child { font-weight: 600; }
/* .field задаёт display:flex, а .fin-counterparty-new — display:grid;
   оба перебивают UA-стиль [hidden], поэтому скрытие условных полей
   задаётся явно (как у [data-estimate-kind-custom] в #95). */
.issue98-dict-hint[hidden],
.issue98-dict-new[hidden],
.issue98-counterparty-new[hidden] { display: none; }

/* ═══════════════════════════════════════════════════════════════════════
   Issue #98 · поток W1 (A1–A3, A13, E1): popup добавления и карточки
   операции, единое меню формата выгрузки, массовое удаление и создание
   операции из «Все операции»
   ═══════════════════════════════════════════════════════════════════════ */
.issue98-export-menu { position: relative; display: inline-flex; }
.issue98-export-panel {
  position: absolute; top: calc(100% + 4px); right: 0; z-index: 30;
  display: flex; flex-direction: column; gap: 2px; min-width: 230px;
  padding: 6px; background: var(--surface);
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  box-shadow: var(--shadow);
}
.issue98-export-panel .btn { justify-content: flex-start; text-align: left; }
.issue98-add-project { margin-bottom: var(--s3); }
.issue98-bulk-delete { margin-top: var(--s4); border-top: 1px solid var(--border); }
/* Поля «Новое значение» в массовой форме скрыты, пока не выбрано
   «+ Добавить новое»: .field задаёт display:flex и перебивает UA [hidden]. */
.fin-bulk-form [data-fin-bulk-new][hidden] { display: none; }
.issue98-card-head {
  display: flex; flex-wrap: wrap; align-items: center;
  justify-content: space-between; gap: var(--s2); margin-bottom: var(--s3);
}
.issue98-card-head .fin-op-amount { font-size: 18px; font-weight: 700; font-variant-numeric: tabular-nums; }
.issue98-card-edit-lead { margin-bottom: var(--s3); }
@media (max-width: 720px) {
  .issue98-export-panel { right: auto; left: 0; }
}

/* ═══════════════════════════════════════════════════════════════════════
   Issue #98 · поток W4 (C1, C2, D1, F1, F2, B1): автор документа —
   ссылка на карточку справочника, компактная история документа с popup
   подробностей, форма документа на «Материалах» в popup, подменю
   «Справочник»/«Настройки» по наведению и фокусу, статус синхронизации
   смет внутри строки вместо отдельной колонки таблицы
   ═══════════════════════════════════════════════════════════════════════ */
/* C2: компактная история документа — строка-кнопка, подробности в popup. */
.issue98-doc-events { margin: 0; padding: 0; list-style: none; display: grid; gap: 3px; }
.issue98-doc-event {
  display: grid; gap: 2px; width: 100%; padding: 8px 10px;
  text-align: left; color: var(--fg); font: inherit;
  background: transparent; border: 1px solid transparent;
  border-radius: var(--radius-sm); cursor: pointer;
}
.issue98-doc-event:hover { background: var(--bg); border-color: var(--border); }
.issue98-doc-event:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.issue98-doc-event-kind {
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.07em;
  text-transform: uppercase; color: var(--muted);
}
.issue98-doc-event-text { font-size: 12.5px; line-height: 1.4; overflow-wrap: break-word; }
.issue98-doc-event-meta { color: var(--muted); font-size: 11.5px; }
/* C2: подробности события в модалке — факты и изменённые поля. */
.issue98-event-facts {
  display: grid; gap: 4px; margin: 0 0 var(--s4); padding: 0;
}
.issue98-event-facts > div { display: grid; grid-template-columns: minmax(110px, 160px) minmax(0, 1fr); gap: var(--s2); }
.issue98-event-facts dt {
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.07em;
  text-transform: uppercase; color: var(--muted); padding-top: 2px;
}
.issue98-event-facts dd { margin: 0; font-size: 12.5px; line-height: 1.45; overflow-wrap: break-word; }
.issue98-event-fields-head {
  margin-bottom: 4px; font-family: var(--mono); font-size: 10px;
  letter-spacing: 0.07em; text-transform: uppercase; color: var(--muted);
}
/* B1: статус синхронизации — внутри строки-карточки сметы, не в колонке. */
.issue98-estimate-sync { display: inline-block; margin-top: 4px; }
/* D1: ошибка формы документа внутри popup. */
.issue98-form-error {
  margin: 0 0 var(--s3); padding: 8px 10px; font-size: 12.5px;
  color: var(--danger); background: color-mix(in srgb, var(--danger) 8%, transparent);
  border-radius: var(--radius-sm);
}
.issue98-form-error[hidden] { display: none; }
/* F1/F2: выдвижная панель должна быть предсказуемой: она перехватывает
   события только внутри себя, клики по остальному интерфейсу проходят. */
.side-subnav { pointer-events: auto; }

/* ── системный слой UI-аудита ────────────────────────────────────────────
   Общие правила ниже выравнивают рабочую область и интерактивные состояния
   без изменения маршрутов, данных или бизнес-логики. */
:root { --display: var(--font); }

.shell-main .wrap,
.shell-main .foot {
  max-width: min(1440px, calc(100vw - 236px));
  width: 100%;
}
.shell-main .wrap {
  padding-left: clamp(20px, 2.2vw, 32px);
  padding-right: clamp(20px, 2.2vw, 32px);
}

.page-head,
.block-head { align-items: flex-start; }

.fin-ops-table .fin-op-actions .actions { align-items: flex-start; }
.fin-ops-table .fin-op-actions .btn { min-width: max-content; }

:where(button, a, input, select, textarea):focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

@media (max-width: 900px) {
  .shell-main .wrap,
  .shell-main .foot { max-width: none; }
}

/* ── UI polish 001: единый визуальный ритм поверх существующей системы ────
   Это финальный слой только для геометрии: маршруты, данные и поведение
   компонентов не меняются. Повторяющиеся элементы получают общие размеры,
   чтобы страницы не отличались друг от друга случайными локальными правилами. */
:root {
  --space-section: 24px;
  --space-component: 16px;
  --control-compact: 36px;
  --content-gutter: clamp(20px, 2.2vw, 32px);
}

.shell-main .wrap {
  padding-left: var(--content-gutter);
  padding-right: var(--content-gutter);
  padding-top: clamp(24px, 3vw, 40px);
  padding-bottom: clamp(48px, 5vw, 72px);
}

.page-head,
.block-head,
.panel-head,
.issue98-card-head {
  min-width: 0;
}

.page-head {
  margin-bottom: var(--space-section);
}

.page-head > div:first-child,
.block-head > div:first-child,
.panel-head > div:first-child,
.issue98-card-head > div:first-child {
  min-width: 0;
}

.page-head .lead { margin-top: var(--s2); }
.block { margin-top: var(--space-section); }
.block-head { margin-bottom: var(--space-component); }

.panel-head {
  min-height: 56px;
  padding: 14px var(--s4);
}
.panel-body,
.panel-pad { padding: var(--s4); }

.panel-head > :last-child,
.block-tools,
.head-actions,
.form-actions,
.edit-actions,
.notice-actions {
  display: flex;
  align-items: center;
  gap: var(--s2);
  flex-wrap: wrap;
}

.btn {
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.btn-sm,
.block-tools .btn,
.table td .btn,
.issue98-export-panel .btn {
  height: var(--control-compact);
}
.block-tools .btn { padding-left: 12px; padding-right: 12px; }
.table td .btn { padding-left: 12px; padding-right: 12px; }

.form {
  column-gap: var(--space-component);
  row-gap: var(--space-component);
}
.field { gap: var(--s2); }
.field > span { line-height: 1.25; }
.input { height: 40px; }
.input-sm { height: var(--control-compact); }
.form-actions { padding-top: var(--s2); }
.form-actions {
  width: 100%;
  justify-content: flex-start;
  align-items: center;
}
.form-actions .btn { flex: 0 0 auto; }

.table th,
.table td { vertical-align: middle; }
.table th { padding-top: 11px; padding-bottom: 11px; }
.table td { padding-top: 13px; padding-bottom: 13px; }
.table .num,
.fin-ops-table td.fin-op-amount { font-variant-numeric: tabular-nums; }
.table td .actions { align-items: center; }

.modal {
  max-height: calc(100vh - 12vh);
  display: flex;
  flex-direction: column;
}
.modal-head { flex: 0 0 auto; padding: var(--s4) var(--s4) 0; }
.modal-body { min-height: 0; overflow-y: auto; padding: var(--s4); }
.modal-foot { flex: 0 0 auto; padding: 0 var(--s4) var(--s4); }
.modal-close {
  width: var(--control-compact);
  height: var(--control-compact);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.notice-inline,
.flash { align-items: center; }
.notice-main,
.flash-text { line-height: 1.45; }

@media (max-width: 720px) {
  .shell-main .wrap {
    padding-left: var(--s4);
    padding-right: var(--s4);
    padding-top: var(--s5);
    padding-bottom: 48px;
  }
  .panel-head,
  .panel-body,
  .panel-pad { padding-left: var(--s3); padding-right: var(--s3); }
  .table th { padding-top: 10px; padding-bottom: 10px; }
  .table td { padding-top: 11px; padding-bottom: 11px; }
  .modal-backdrop { padding-left: var(--s3); padding-right: var(--s3); }
  .modal-body { padding: var(--s3); }
  .modal-head { padding: var(--s3) var(--s3) 0; }
  .modal-foot { padding: 0 var(--s3) var(--s3); }
}

/* ── UI status fix 001: статусы не выходят из ячейки плотной таблицы ──────
   .cell-nowrap у направления сохранялся ради даты/коротких значений, но
   конфликтовал с двумя inline-chip: «Расход» + «Ждёт возврата · сумма».
   Внутри финансовой таблицы перенос разрешён только для содержимого ячейки;
   остальная геометрия таблицы и общая типографика не меняются. */
.fin-ops-table td.fin-op-direction,
.fin-ops-table td.fin-op-status {
  white-space: normal;
  min-width: 0;
}
.fin-ops-table .fin-op-direction {
  line-height: 1.35;
}
.fin-ops-table .fin-op-direction .chip,
.fin-ops-table .fin-op-status .chip {
  max-width: 100%;
  white-space: normal;
  height: auto;
  min-height: 22px;
  line-height: 1.25;
  padding-top: 3px;
  padding-bottom: 3px;
  vertical-align: top;
}
.fin-ops-table .fin-op-direction .chip + .chip,
.fin-ops-table .fin-op-status .chip + .chip {
  margin-left: 4px;
}

/* ── UI final polish 002: file input в общей системе контролов ────────────
   Сохраняем настоящий input[type=file] для нативной клавиатуры и загрузки,
   но убираем системную кнопку браузера и приводим её к .btn-secondary. */
input.input[type="file"] {
  display: block;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  height: 40px;
  padding: 4px 6px;
  color: var(--muted);
  line-height: 30px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
input.input[type="file"]::file-selector-button {
  height: 30px;
  margin: 0 10px 0 0;
  padding: 0 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--fg);
  font: inherit;
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  vertical-align: middle;
}
input.input[type="file"]:hover::file-selector-button {
  border-color: var(--fg);
  background: var(--bg);
}
input.input[type="file"]:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
input.input[type="file"]:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}
input.input[type="file"]:disabled::file-selector-button {
  cursor: not-allowed;
}

/* ── UI hierarchy 001: спокойнее контейнеры, сильнее содержание ──────────
   Представительные detail-экраны используют те же данные и компоненты, но
   не превращают каждое значение в отдельную карточку. Внешняя панель
   сохраняет границу смыслового блока, внутренние значения читаются как
   единая группа. */
.issue98-document-page .fact-grid,
.issue96-person-page .person-facts {
  gap: var(--s3);
}
.issue98-document-page .fact-grid > div,
.issue96-person-page .person-facts > div {
  padding: 2px 0;
  background: transparent;
  border: 0;
  border-radius: 0;
}
.issue98-document-page .fact-grid .v,
.issue96-person-page .person-facts .v {
  font-size: 14px;
}
.issue98-document-page .source-row,
.issue96-person-page .source-row {
  padding-top: 8px;
  padding-bottom: 8px;
}
.issue98-document-page .doc-contract > .panel,
.issue98-document-page .issue98-doc-history-panel,
.issue98-history-page > .panel {
  box-shadow: none;
}
.issue98-document-page .issue98-doc-history-panel,
.issue98-history-page > .panel {
  border-color: transparent;
  background: transparent;
}
.issue98-document-page .issue98-doc-history-panel {
  padding-top: 0;
  padding-bottom: 0;
}
.issue98-document-page .issue98-doc-events,
.issue98-history-page .timeline {
  gap: 0;
}
.issue98-document-page .issue98-doc-event,
.issue98-history-page .timeline li {
  padding-top: 9px;
  padding-bottom: 9px;
}
.issue98-document-page .issue98-doc-event + .issue98-doc-event,
.issue98-history-page .timeline li + li {
  border-top: 1px solid var(--border);
}
.issue98-document-page .issue98-doc-event:hover {
  border-color: transparent;
}
@media (max-width: 720px) {
  .issue98-document-page .fact-grid,
  .issue96-person-page .person-facts {
    gap: var(--s2);
  }
}

/* ── UI card system 001: общая основа карточек приложения ────────────────
   .panel — внешний смысловой контейнер, .fact-grid — информационная группа,
   строки и списки — компактные элементы последовательности. Самостоятельные
   карточки выбора (KB, KPI, action-card) сохраняют собственную границу. */
.panel {
  box-shadow: none;
}
.panel-pad {
  padding: var(--s4);
}
.fact-grid {
  gap: var(--s3);
}
.fact-grid > div {
  padding: 2px 0;
  background: transparent;
  border: 0;
  border-radius: 0;
}
.fact-grid .v {
  font-size: 14px;
}
.kpi {
  box-shadow: none;
  padding: 12px var(--s3);
}
.kb-card {
  box-shadow: none;
}
.counterparty-link {
  padding: var(--s3) 0;
  border-right: 0;
  border-bottom: 0;
  border-left: 0;
  border-radius: 0;
  background: transparent;
}
.counterparty-link + .counterparty-link {
  border-top: 1px solid var(--border);
}
.counterparty-link:first-child {
  border-top: 0;
}
.issue98-card-head {
  box-shadow: none;
}
@media (max-width: 720px) {
  .panel-pad {
    padding: var(--s3);
  }
  .fact-grid {
    gap: var(--s2);
  }
}

/* ── #98 (п.9): фундамент Telegram-привязки ──────────────────────────────
   Блок «Telegram-бот» и popup объясняют механизм одноразового токена.
   Только раскладка существующими токенами: новых цветов и систем отступов
   нет, реальной интеграции и секретов в интерфейсе нет. */
.issue98-b-telegram > p {
  display: flex;
  align-items: baseline;
  gap: var(--s2);
  flex-wrap: wrap;
}
.issue98-b-telegram-actions {
  justify-content: flex-start;
  margin-top: var(--s3);
}
.issue98-b-telegram-mechanism ol {
  margin: var(--s2) 0 var(--s3);
  padding-left: 20px;
}
.issue98-b-telegram-mechanism li + li {
  margin-top: var(--s2);
}
.issue98-b-telegram-states {
  margin-top: var(--s3);
}
.issue98-b-telegram-states .k {
  display: block;
  margin-bottom: 2px;
}
.issue98-b-project-id {
  font-variant-numeric: tabular-nums;
  /* #98 (п.10): slug латиницей в нижнем регистре читается как идентификатор;
     внутренний ID остаётся в data-internal-id/title. */
  text-transform: none;
}

/* ═══════════════════════════════════════════════════════════════════════
   Issue #98 · Addendum 2 · W5 (п.5–6): базовое направление с меткой
   исторического типа и строка операции с одним действием «Открыть».
   Только существующие токены; данные/маршруты не меняются.
   ═══════════════════════════════════════════════════════════════════════ */

/* П.5: метка исторического типа («возврат»/«взаиморасчёт») рядом с базовым
   направлением. Не чип: направление остаётся одним чипом, метка — пояснение. */
.fin-op-direction-note {
  display: inline-block;
  margin-left: var(--s2);
  font-size: 11px;
  line-height: 1.3;
  color: var(--muted);
  white-space: normal;
}
.fin-ops-table .fin-op-direction .fin-op-direction-note {
  margin-left: 2px;
  vertical-align: middle;
}
.fin-card-facts .fin-op-direction-note { margin-left: var(--s2); }

/* П.6: блок действий строки — одно действие «Открыть», но выравнивание и
   отступы рассчитаны и на запасной inline-путь (vm-стенд): кнопки не липнут
   к краю, центрируются по вертикали относительно строки, между ними —
   токен-отступ, а не 4px. */
.fin-ops-table td.fin-op-actions {
  vertical-align: middle;
  padding-left: var(--s3);
  padding-right: var(--s3);
}
.fin-ops-table .fin-op-actions .actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s2);
  align-items: center;
  justify-content: flex-start;
}
.fin-ops-table .fin-op-actions .btn {
  flex: 0 0 auto;
  min-width: max-content;
}
/* Колонка действий больше не держит две кнопки: отдаём ширину контрагенту и
   источнику, чтобы длинные названия читались, а таблица не скучивалась. */
.fin-ops-table .fin-col-actions { width: 10.5%; }
.fin-ops-table .fin-col-source { width: 15.5%; }

/* Читаемость суммы/направления/статуса: они центрируются по строке и не
   «прыгают» вверх, когда контрагент занимает две строки. */
.fin-ops-table td.fin-op-amount,
.fin-ops-table td.fin-op-direction,
.fin-ops-table td.fin-op-status {
  vertical-align: middle;
}
.fin-ops-table td.fin-op-amount {
  min-width: 0;
  white-space: nowrap;
  overflow-wrap: normal;
}
.fin-ops-table td.fin-op-amount > .sub {
  max-width: 100%;
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: normal;
}
.fin-ops-table td.fin-op-direction { overflow-wrap: anywhere; }
.fin-ops-table .fin-op-chips {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 4px;
  max-width: 100%;
  vertical-align: top;
}
.fin-ops-table .fin-op-chips .fin-op-direction-note { margin-left: 0; }
.fin-ops-table th,
.fin-ops-table td {
  padding: 7px 8px;
  line-height: 1.32;
}
.fin-ops-table .sub {
  margin-top: 1px;
  font-size: 11px;
  line-height: 1.3;
}
.fin-ops-table .fin-op-counterparty {
  font-size: 12.5px;
  line-height: 1.28;
}
.fin-ops-table .fin-op-purpose {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}
.fin-ops-table .fin-op-settlement {
  display: block;
  max-width: 100%;
  margin-top: 3px;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.25;
  white-space: normal;
}
.fin-ops-table .fin-op-settlement strong {
  color: var(--fg);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.fin-op-mobile-summary { display: none; }
.fin-ops-table .fin-source-kind {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.fin-ops-table .fin-source-links {
  white-space: nowrap;
}
.fin-ops-table .fin-source-link,
.fin-ops-table .fin-source-marker {
  color: var(--muted);
  font-size: 11px;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.fin-ops-table .fin-source-marker {
  text-decoration: none;
}
.fin-ops-table .fin-op-status .chip {
  font-size: 11px;
  padding-left: 7px;
  padding-right: 7px;
}
.fin-ops-table .fin-op-actions .btn {
  padding-left: 9px;
  padding-right: 9px;
}
.fin-ops-table .fin-col-direction { width: 14%; }
.fin-ops-table .fin-col-amount { width: 14%; }
.fin-ops-table .fin-col-status { width: 11%; }
.fin-ops-table .fin-col-source { width: 13%; }
.fin-ops-table .fin-col-actions { width: 9.5%; }
.fin-all-table .fin-col-project { width: 12%; }
.fin-all-table .fin-col-amount { width: 14%; }
.fin-all-table .fin-col-direction { width: 12%; }
.fin-all-table .fin-col-status { width: 10%; }
.fin-all-table .fin-col-source { width: 10%; }
.fin-all-table .fin-col-actions { width: 8%; }
.operation-entry-mode {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s2);
  margin-bottom: var(--s3);
}
.operation-entry-mode .chip {
  cursor: pointer;
}
.fin-ops-table td.fin-op-source {
  min-width: 0;
  overflow-wrap: anywhere;
  word-break: normal;
}
.fin-ops-table td.fin-op-source .fin-file-line {
  display: block;
  max-width: 100%;
  overflow-wrap: anywhere;
}
.docs-table th:first-child,
.docs-table td:first-child {
  min-width: 0;
}
.docs-table td:first-child .strong-link,
.docs-table td:first-child .sub {
  display: block;
  max-width: 100%;
  overflow-wrap: normal;
  word-break: normal;
}
.docs-table td:first-child .sub {
  white-space: nowrap;
}
.docs-table td .v {
  display: block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* Дата с временем («28 окт., 03:00») больше не выходит за свою колонку и не
   наслаивается на контрагента: в финансовой таблице дате разрешён перенос,
   а колонка получает достаточно ширины. */
.fin-ops-table td.fin-op-date { white-space: normal; }
.fin-ops-table .fin-col-date { width: 11%; }

/* Узкий экран: у ячейки действия остаётся воздух, таблица скроллится внутри
   .panel (как и раньше), страница горизонтально не уезжает. */
@media (max-width: 720px) {
  .fin-ops-table,
  .fin-all-table {
    width: 100%;
    min-width: 0;
  }
  .fin-ops-table th.fin-col-date,
  .fin-ops-table td.fin-op-date,
  .fin-ops-table th.fin-col-amount,
  .fin-ops-table td.fin-op-amount,
  .fin-ops-table th.fin-col-direction,
  .fin-ops-table td.fin-op-direction,
  .fin-ops-table th.fin-col-status,
  .fin-ops-table td.fin-op-status,
  .fin-ops-table th.fin-col-source,
  .fin-ops-table td.fin-op-source {
    display: none;
  }
  .fin-all-table th.fin-col-project,
  .fin-all-table td.fin-op-project {
    display: none;
  }
  .fin-ops-table .fin-op-main {
    width: auto;
  }
  .fin-ops-table .fin-op-mobile-summary {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 3px 8px;
    margin-top: 5px;
    color: var(--muted);
    font-size: 11px;
    line-height: 1.25;
  }
  .fin-ops-table .fin-op-mobile-summary strong {
    color: var(--fg);
    font-size: 12px;
    font-variant-numeric: tabular-nums;
  }
  .fin-ops-table .fin-op-actions {
    width: 68px;
    padding-left: 4px;
    padding-right: 4px;
  }
  .fin-ops-table .fin-op-actions .btn {
    padding-left: 6px;
    padding-right: 6px;
    font-size: 11px;
  }
  .fin-ops-table td.fin-op-actions {
    padding-left: var(--s2);
    padding-right: var(--s2);
  }
  .fin-ops-table .fin-op-actions .actions { gap: var(--s2); }
}

/* П.2: операция без проекта в общем списке — «проект не указан» остаётся
   приглушённой подписью, без подстановки фиктивного проекта. */
.fin-all-table td.fin-op-project .sub { white-space: normal; overflow-wrap: anywhere; }

/* П.4: блок чека в popup карточки операции — существующие receipt-механизмы,
   выровненные по ширине окна. */
.issue98-card-receipt > .receipt-returns {
  display: flex;
  flex-direction: column;
  gap: var(--s2);
  min-width: 0;
  overflow-wrap: anywhere;
}
.issue98-card-receipt .return-form {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s2);
  align-items: center;
}
.issue98-card-receipt .return-form .input { flex: 1 1 160px; min-width: 0; }
.issue98-card-receipt .head-actions { justify-content: flex-start; flex-wrap: wrap; gap: var(--s2); }

/* ═══════════════════════════════════════════════════════════════════════
   Issue #101 · административный контур компании — ниже маркера
   Подраздел «Компания и доступы», формы пароля и доступ к проекту (RG-2).
   Новые классы только с префиксом company-; остальное — существующие
   block/panel/table/btn/chip/field/hint/modal. Адаптивность 320–1440.
   ═══════════════════════════════════════════════════════════════════════ */

/* Роль участника — селект внутри ячейки таблицы: компактнее общего .input,
   чтобы строка участника не разъезжалась на три строки. */
.company-role-select {
  width: 100%;
  max-width: 210px;
  height: 32px;
  padding: 0 28px 0 9px;
  font-size: 12.5px;
}
.company-role-select:disabled { opacity: 0.7; cursor: not-allowed; }

/* ANN-003 Task 2: в компактной и полной таблицах селект роли не должен
   сжиматься до одной буквы — колонке нужен минимум под подпись роли. */
.company-members-table .company-role-select {
  width: 150px;
  min-width: 140px;
  max-width: 170px;
}
.company-members-table td:nth-child(2) { min-width: 150px; }

/* Ошибки формы: строка над формой и подпись под конкретным полем. */
.company-form-error {
  margin: 0 0 var(--s3);
  padding: 8px 10px;
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--danger);
  background: color-mix(in srgb, var(--danger) 8%, transparent);
  border-radius: var(--radius-sm);
}
.company-field-error {
  margin: 0;
  font-size: 11.5px;
  line-height: 1.35;
  color: var(--danger);
}

/* Одноразовый пароль в модальном окне: показывается один раз, поэтому
   значение должно читаться и копироваться без ошибок. */
.company-password-value {
  margin: 0 0 var(--s3);
  padding: 10px 12px;
  font-family: var(--mono);
  font-size: 16px;
  line-height: 1.4;
  letter-spacing: 0.04em;
  word-break: break-all;
  color: var(--fg);
  background: var(--bg);
  border: 1px dashed var(--line);
  border-radius: var(--radius-sm);
  user-select: all;
}

/* Подпись роли участника проекта: поле + «Сохранить» в одной ячейке. */
.project-member-role-form { display: flex; align-items: center; gap: var(--s2); flex-wrap: wrap; }
.project-member-role-form .input { flex: 1 1 160px; min-width: 0; max-width: 240px; height: 32px; font-size: 12.5px; }
.project-member-role-form .btn { flex: 0 0 auto; }

/* Таблицы административного контура: как у остальных широких таблиц,
   на узком экране прокручиваются внутри .panel, страница — нет. */
.company-members-table { min-width: 680px; }
.project-members-table { min-width: 460px; }

@media (max-width: 720px) {
  /* На узком экране роли и подписи занимают ширину ячейки целиком:
     горизонтальная прокрутка остаётся только за счёт min-width таблицы. */
  .company-role-select { max-width: none; }
  .project-member-role-form .input { max-width: none; flex-basis: 100%; }
  .project-member-role-form .btn { width: 100%; }
  .company-password-value { font-size: 14px; }
}

/* ═══════════════════════════════════════════════════════════════════════
   HOTLINE-ADMIN-001 · «Роли и права доступа» — ниже маркера
   Матрица роль × раздел × действие в «Компания и доступы». Только новые
   классы company-*: block/panel/table/btn/chip/field/hint переиспользованы.
   Адаптивность 320–1440: таблица прокручивается внутри .panel.
   ═══════════════════════════════════════════════════════════════════════ */

.company-perm-toolbar {
  display: flex;
  align-items: flex-start;
  gap: var(--s3);
  flex-wrap: wrap;
  margin-bottom: var(--s3);
}
.company-perm-toolbar > .k {
  flex: 0 0 auto;
  padding-top: 7px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--muted);
}
.company-perm-roles { display: flex; flex-wrap: wrap; gap: var(--s2); min-width: 0; }
.company-perm-role { cursor: pointer; }
.company-perm-role[aria-pressed="true"] { font-weight: 600; }

.company-perm-locked-note {
  display: flex;
  align-items: center;
  gap: var(--s2);
  flex-wrap: wrap;
  margin: 0 0 var(--s3);
}

.company-perm-panel { overflow-x: auto; }
.company-perm-table { min-width: 620px; }
.company-perm-table th.company-perm-action,
.company-perm-table td.company-perm-cell { text-align: center; white-space: nowrap; }
.company-perm-table th.company-perm-action { vertical-align: bottom; }
.company-perm-table th.company-perm-section-title {
  font-family: inherit;
  font-size: 13px;
  letter-spacing: 0;
  text-transform: none;
  color: var(--fg);
  font-weight: 600;
  white-space: normal;
  text-align: left;
}
.company-perm-table th.company-perm-section-title .sub {
  display: block;
  margin-top: 2px;
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 400;
  color: var(--muted);
  letter-spacing: 0.04em;
}
.company-perm-check {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  cursor: pointer;
}
.company-perm-check input[type="checkbox"] {
  width: 16px;
  height: 16px;
  accent-color: var(--accent);
  cursor: pointer;
}
.company-perm-check input[type="checkbox"]:disabled { cursor: not-allowed; opacity: 0.55; }
.company-perm-cell.is-locked { background: var(--bg); }
.company-perm-cell.is-empty { color: var(--muted); }

.company-perm-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--s2);
  flex-wrap: wrap;
  margin-top: var(--s4);
}
.company-perm-dirty {
  margin-right: auto;
  font-size: 12px;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.company-notice-ok {
  margin: 0 0 var(--s3);
  padding: 8px 10px;
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--ok);
  background: var(--ok-soft);
  border-radius: var(--radius-sm);
}

@media (max-width: 720px) {
  .company-perm-toolbar { flex-direction: column; gap: var(--s2); }
  .company-perm-toolbar > .k { padding-top: 0; }
  .company-perm-actions { justify-content: flex-start; }
  .company-perm-dirty { flex: 1 1 100%; margin-right: 0; }
  .company-perm-actions .btn { flex: 1 1 auto; }
}

/* ═══════════════════════════════════════════════════════════════════════
   HOTLINE-UI-ADMIN-002 · шапка, бейдж версии, модальные формы — ниже маркера
   Только существующие токены и классы; остальные разделы не полируются.
   Адаптивность 320–1440: имя компании обрезается, side-foot не смещается.
   ═══════════════════════════════════════════════════════════════════════ */

/* §4: название компании рядом с логотипом. Длинное имя — ellipsis, полное
   значение остаётся в title ссылки; логотип и бейдж MVP не сжимаются. */
.side-brand { max-width: 100%; min-width: 0; }
.side-brand .brand-name {
  min-width: 0;
  max-width: 118px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.side-brand .brand-mark { flex: 0 0 auto; }

/* §3: строка действий в подвале сайдбара — «Выйти» и бейдж версии рядом. */
.side-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  min-width: 0;
}
.side-actions .side-logout { margin-left: 0; }
.version-badge {
  display: inline-block;
  max-width: 132px;
  padding: 4px 8px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-family: var(--mono);
  font-size: 10px;
  line-height: 1;
  letter-spacing: 0.04em;
  color: var(--muted);
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 999px;
  font-variant-numeric: tabular-nums;
}

/* §1: форма добавления участника внутри модального окна — те же поля, что
   раньше были инлайн: без лишних отступов от карточки/таблицы. */
.modal-body .company-member-modal .form,
.modal-body .company-member-form { margin: 0; }
.modal-body .company-member-modal .company-form-error { margin-bottom: var(--s3); }

@media (max-width: 900px) {
  /* Мобильная шапка: имя компании не выдавливает навигацию, а бейдж версии
     остаётся рядом с «Выйти» в правой части строки. */
  .side-brand .brand-name { max-width: 46vw; }
  .side-actions { margin-left: auto; }
}

@media (max-width: 420px) {
  .version-badge { max-width: 96px; }
}

/* ═══════════════════════════════════════════════════════════════════════
   HOTLINE-LOCAL-ANNOTATIONS-003 · Task 2 (компактный список участников)
   и Task 3 (без метки MVP в авторизованной оболочке) — ниже маркера.
   Только новые company-* классы и существующие токены.
   ═══════════════════════════════════════════════════════════════════════ */

/* Предпросмотр «Участников»: первые 5 строк из полного списка. */
.company-members-preview-hint {
  margin: var(--s2) 0 0;
  font-size: 11.5px;
  line-height: 1.4;
  color: var(--muted);
}

/* Полный список в модальном окне: таблица прокручивается внутри .panel,
   поэтому страница и само окно не получают горизонтальный overflow. */
.company-members-modal .panel { margin: 0; overflow-x: auto; }
.company-members-modal .company-members-table { min-width: 900px; }
.company-members-modal .hint { margin-bottom: 0; }

@media (max-width: 720px) {
  .company-members-modal .modal-body { padding: var(--s3); }
  .company-members-modal .company-members-table { min-width: 600px; }
  .company-members-preview-hint { font-size: 11px; }
}

/* ═══════════════════════════════════════════════════════════════════════
   HOTLINE-LOCAL-ANNOTATIONS-003 · Task 1 — пояснение к disabled-ячейкам
   матрицы прав. Минимально: раскрывающийся блок на существующих токенах,
   без изменения disabled-состояний и без перерисовки страницы.
   ═══════════════════════════════════════════════════════════════════════ */
.company-perm-help {
  margin: var(--s3) 0 0;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg);
}
.company-perm-help > summary {
  padding: 9px 12px;
  cursor: pointer;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--fg);
  list-style: none;
}
.company-perm-help > summary::-webkit-details-marker { display: none; }
.company-perm-help > summary::before {
  content: '＋';
  display: inline-block;
  width: 14px;
  margin-right: 6px;
  color: var(--muted);
  font-weight: 400;
}
.company-perm-help[open] > summary::before { content: '−'; }
.company-perm-help > summary:focus-visible { outline: 2px solid var(--accent-soft); outline-offset: 2px; }
.company-perm-help-body {
  display: flex;
  flex-direction: column;
  gap: var(--s2);
  padding: 0 12px 12px;
}
.company-perm-help-body p { margin: 0; }

/* ═══════════════════════════════════════════════════════════════════════
   ANNOTATIONS-REVIEW-2 · UI-корректировки.
   1) Поиск по участникам в «Администрировании» и полном списке.
   2) «Ответственный» в создании/редактировании проекта — combobox.
   ═══════════════════════════════════════════════════════════════════════ */
.company-members-search {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s2) var(--s3);
  margin: 0 0 var(--s3);
}
.company-members-search .input {
  flex: 1 1 240px;
  max-width: 340px;
}
.company-members-search .sub {
  font-size: 12px;
  color: var(--muted);
}
.company-members-search .btn[hidden] { display: none; }

.project-owner-field { display: flex; flex-direction: column; }
.project-owner-field .combo { width: 100%; }
.project-owner-field .combo-input { width: 100%; }
.project-owner-field .company-field-error[hidden] { display: none; }

@media (max-width: 720px) {
  .company-members-search .input { flex-basis: 100%; max-width: none; }
}