/* public/om.css — стили десктоп-UI G-OM. Перенесено из G-Tools/apps/om/om.css.
   Унификация 1050/W1 (2026-06-14): chrome-цвета переведены на токены --ge-color-* (с
   light-фоллбэками); off-brand teal-акцент → бренд-токены семейства (--ge-color-brand*).
   Семантические цвета (приоритеты/статусы/info/warn/err) — данные, НЕ chrome — оставлены.
   Блок тёмной темы ниже после токенизации базы стал избыточным, но сохранён для явной
   тонкой настройки (дедуп — задача W2). ДОПУЩЕНИЕ: teal считаю унаследованной от G-Tools
   off-brand-вариацией, а не намеренной идентичностью G-OM (обратимо — это ссылки на токены). */
/* Канон семьи: оболочка = flex-колонка ровно во весь вьюпорт, страница САМА не скроллится —
   скроллятся внутренние панели (сайдбар/контент). box-sizing:border-box нужен, чтобы
   инъектируемый футером padding-bottom:var(--gsf-footer-h) УКОРАЧИВАЛ контент, а не давал
   переполнение (раньше .om-layout жёстко резервировал высоту шапки 41px — шапка выросла до
   59px, +52px футер-резерв → пустая страница скроллилась на ~70px, sticky-сайдбар уезжал). */
html { height: 100%; }
/* Векторные иконки семейства (SuiteIcons) в навигации/кнопках/заголовках: слот .ic
   гидрируется из data-suite-ic → <svg>. Выравнивание по центру строки, отступ-префикс. */
.ic { display: inline-flex; align-items: center; vertical-align: middle; margin-inline-end: .4em; }
.ic > svg { display: block; }
body { margin: 0; height: 100vh; box-sizing: border-box; display: flex; flex-direction: column; overflow: hidden; font: 14px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; background: var(--ge-color-bg,#faf9f8); color: var(--ge-color-text,#201f1e); }
.om-topbar {
  flex: 0 0 auto; z-index: 50;
  display: flex; align-items: center; gap: 12px;
  padding: 10px 16px; background: var(--ge-color-surface,#fff); border-bottom: 1px solid var(--ge-color-border,#edebe9);
}
.om-topbar h1 { font-size: 16px; margin: 0; flex: 1; font-weight: 600; color: var(--ge-color-text,#201f1e); }
.om-topbar .topbar-right { margin-left: auto; display: flex; align-items: center; gap: 10px; }
/* Канон семейства: шапка + сайдбар ВПРИТЫК СЛЕВА + контент во всю ширину (без центрирования и карточек). */
.om-layout { display:flex; align-items:stretch; flex:1 1 auto; min-height:0; }
.om-side { width:var(--ge-side-w,420px); flex:0 0 var(--ge-side-w,420px); overflow-y:auto; overflow-x:hidden; }
.om-main { flex:1 1 auto; min-width:0; padding:16px 18px; overflow-y:auto; }
.om-card { background:var(--ge-color-surface,#fff); border:1px solid var(--ge-color-border,#edebe9); border-radius:10px; padding:12px 14px; margin-bottom:14px; }
.om-toolbar { display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-bottom:14px; padding-bottom:12px; border-bottom:1px solid var(--ge-color-border,#edebe9); }
.om-proj-chip { font-size:12px; background:var(--ge-color-surface-2,#f1f5f9); border:1px solid var(--ge-color-border,#edebe9); border-radius:999px; padding:3px 10px; color:var(--ge-color-text-mute,#605e5c); }
.om-btn-sel, .om-btn-primary { font-size:13px; padding:6px 12px; border-radius:6px; cursor:pointer; text-decoration:none; border:1px solid transparent; }
.om-btn-sel { background:var(--ge-color-surface-2,#f1f5f9); border-color:var(--ge-color-border,#edebe9); color:var(--ge-color-text-mute,#605e5c); }
.om-btn-sel:hover { background:var(--ge-color-border,#edebe9); }
.om-btn-primary { background:var(--ge-color-brand,#4f46e5); color:#fff; border-color:var(--ge-color-brand-hover,#4338ca); }
.om-btn-primary:hover { background:var(--ge-color-brand-hover,#4338ca); }
.om-btn-primary[disabled] { opacity: .55; cursor: not-allowed; }
.om-tabs { display:flex; flex-direction:column; gap:4px; }
.om-tab { font-size:13px; padding:9px 12px; border:1px solid transparent; background:transparent; border-radius:8px; cursor:pointer; color:var(--ge-color-text-mute,#605e5c); text-align:left; width:100%; }
.om-tab:hover { background:var(--ge-color-surface-2,#f1f5f9); }
/* Активный пункт — настраиваемый цвет-акцент продукта (--ge-accent ставит suite-switcher.js). */
.om-tab-on { background:var(--ge-accent-soft, var(--ge-color-brand-soft,#eef2ff)); color:var(--ge-accent, var(--ge-color-brand,#4f46e5)); font-weight:600; }
/* Узкий экран — сайдбар сворачивается в горизонтальную ленту (мобильная деградация). */
@media (max-width:860px){
  .om-layout { flex-direction:column; }
  .om-side { width:auto; flex:none; position:static; max-height:none; }
  .om-tabs { flex-direction:row; flex-wrap:wrap; }
  .om-tab { width:auto; }
}
.om-muted { color:var(--ge-color-text-faint,#726f6d); font-size:13px; padding:8px 0; }
.om-table { width:100%; border-collapse:collapse; font-size:13px; }
.om-table th, .om-table td { text-align:left; padding:6px 8px; border-bottom:1px solid var(--ge-color-border,#edebe9); }
.om-table th { color:var(--ge-color-text-mute,#605e5c); font-weight:600; font-size:12px; background:var(--ge-color-surface-2,#f8fafc); }
.om-table tr:hover td { background:var(--ge-color-surface-2,#f8fafc); }
.om-tree-row { padding:4px 0; }
.om-badge { display:inline-block; font-size:11px; padding:1px 7px; border-radius:999px; background:var(--ge-color-border,#edebe9); color:var(--ge-color-text-mute,#605e5c); }
.om-badge.pri-high { background:var(--ge-color-err-bg,#fde7e9); color:var(--ge-color-err,#b91c1c); }
.om-badge.pri-med { background:var(--ge-color-warn-bg,#fef3c7); color:var(--ge-color-warn,#b45309); }
.om-badge.pri-low { background:var(--ge-color-ok-bg,#dafbe1); color:var(--ge-color-ok,#15803d); }
.om-row-form { display:flex; gap:8px; flex-wrap:wrap; align-items:center; margin:10px 0; padding:10px; background:var(--ge-color-surface-2,#f8fafc); border:1px solid var(--ge-color-border,#edebe9); border-radius:8px; }
.om-row-form input, .om-row-form select { font-size:13px; padding:5px 8px; border:1px solid var(--ge-color-border,#edebe9); border-radius:5px; }
.om-section-h { font-weight:600; font-size:14px; margin:4px 0 8px; }
.om-kpi { display:inline-flex; flex-direction:column; gap:2px; padding:10px 14px; background:var(--ge-color-surface-2,#f8fafc); border:1px solid var(--ge-color-border,#edebe9); border-radius:8px; margin:0 8px 8px 0; }
.om-kpi b { font-size:18px; color:var(--ge-color-brand,#4f46e5); }
.om-kpi span { font-size:11px; color:var(--ge-color-text-mute,#605e5c); }
/* toast */
#om-toast-host { position:fixed; right:16px; bottom:calc(48px + var(--gsf-footer-h, 0px)); display:flex; flex-direction:column; gap:8px; z-index:9999; }
.om-toast { background:#0f172a; color:#fff; padding:9px 14px; border-radius:8px; font-size:13px; box-shadow:0 4px 16px rgba(0,0,0,.2); opacity:1; transition:opacity .4s; }
.om-toast.leave { opacity:0; }
.om-toast-ok { background:var(--ge-color-brand,#4f46e5); }
.om-toast-err { background:#b91c1c; }  /* сплошная заливка + белый текст: фикс. семантический красный (читаем в обеих темах) */
/* Suite header — вафля слева, аккаунт справа (канон header-layout-canon). */
.suite-waffle { display: inline-flex; align-items: center; }

/* ---- Right drawer (карточка записи — семейный канон «просмотр+правка в правом drawer») ---- */
#om-modal-overlay { display:none; position:fixed; inset:0; background:transparent; /* без тонировки фона (Пользователь 2026-06-11) */ z-index:8000; justify-content:flex-end; }
.om-modal { background:var(--ge-color-surface,#fff); box-shadow:-8px 0 40px rgba(0,0,0,.18); width:min(560px,96vw); height:100vh; display:flex; flex-direction:column; border-left:1px solid var(--ge-color-border,#edebe9); animation:om-drawer-in .18s ease-out; }
@keyframes om-drawer-in { from { transform:translateX(24px); opacity:.6; } to { transform:translateX(0); opacity:1; } }
.om-modal-head { display:flex; align-items:center; gap:10px; padding:14px 18px; border-bottom:1px solid var(--ge-color-border,#edebe9); flex-shrink:0; }
.om-modal-title { font-size:15px; font-weight:600; flex:1; color:var(--ge-color-text,#201f1e); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.om-modal-close { background:none; border:none; font-size:18px; cursor:pointer; color:var(--ge-color-text-faint,#726f6d); padding:2px 6px; border-radius:4px; }
.om-modal-close:hover { background:var(--ge-color-surface-2,#f1f5f9); color:var(--ge-color-text-mute,#605e5c); }
.om-modal-body { overflow-y:auto; padding:16px 18px; flex:1; }

/* ---- Info-box (инструкция/подсказка) — семантический info-акцент, не chrome ---- */
.om-info-box { background:var(--ge-color-info-bg,#ddf4ff); border:1px solid color-mix(in srgb, var(--ge-color-info,#0969da) 30%, transparent); border-radius:7px; padding:9px 13px; font-size:12.5px; color:var(--ge-color-info,#0969da); margin-bottom:10px; line-height:1.5; }
.om-info-box-warn { background:var(--ge-color-warn-bg,#fef3c7); border-color:color-mix(in srgb, var(--ge-color-warn,#b45309) 30%, transparent); color:var(--ge-color-warn,#b45309); }

/* ---- Detail grid (карточка) ---- */
.om-detail-grid { display:flex; flex-direction:column; gap:4px; margin:10px 0; }
.om-detail-row { display:flex; align-items:baseline; gap:10px; font-size:13px; }
.om-detail-label { width:120px; flex-shrink:0; color:var(--ge-color-text-mute,#605e5c); font-size:12px; }

/* ---- Form grid (2-колоночная форма) ---- */
.om-form-grid { display:grid; grid-template-columns:1fr 1fr; gap:10px 16px; margin:12px 0; }
.om-modal .om-form-grid { grid-template-columns:1fr; }
.om-form-grid label { display:flex; flex-direction:column; gap:4px; font-size:12.5px; color:var(--ge-color-text-mute,#605e5c); }
.om-input { font-size:13px; padding:6px 8px; border:1px solid var(--ge-color-border,#edebe9); border-radius:5px; }
.om-input:focus { outline:2px solid var(--ge-color-brand,#4f46e5); border-color:var(--ge-color-brand,#4f46e5); }

/* ---- Checklist items ---- */
.om-check-row { display:flex; align-items:center; gap:8px; padding:5px 0; font-size:13px; cursor:pointer; }
.om-check-row input[type=checkbox] { width:16px; height:16px; cursor:pointer; }
.om-check-row:hover { background:var(--ge-color-surface-2,#f8fafc); }

/* ---- Timeline (история событий) ---- */
.om-timeline { display:flex; flex-direction:column; gap:6px; margin:8px 0; border-left:2px solid var(--ge-color-border,#edebe9); padding-left:14px; }
.om-timeline-row { display:flex; align-items:baseline; gap:8px; font-size:13px; flex-wrap:wrap; }
.om-timeline-dot { width:8px; height:8px; border-radius:50%; background:var(--ge-color-brand,#4f46e5); flex-shrink:0; margin-left:-18px; margin-top:5px; }
.om-timeline-time { color:var(--ge-color-text-faint,#726f6d); font-size:11px; white-space:nowrap; }

/* ---- Clickable table rows ---- */
.om-row-clickable { cursor:pointer; }
.om-row-clickable:hover td { background:var(--ge-color-brand-soft,#eef2ff) !important; }

/* ---- P1: KPI-сетка (вкладка Показатели) ---- */
.om-kpi-grid { display:flex; flex-wrap:wrap; gap:10px; margin:4px 0 10px; }
.om-kpi-card { background:var(--ge-color-surface-2,#f8fafc); border:1px solid var(--ge-color-border,#edebe9); border-radius:10px; padding:12px 16px; min-width:150px; max-width:220px; flex:1; }
.om-kpi-card.om-kpi-ok { border-left:4px solid var(--ge-color-brand,#4f46e5); }
.om-kpi-card.om-kpi-warn { border-left:4px solid var(--ge-color-err,#b91c1c); background:var(--ge-color-err-bg,#fde7e9); }
.om-kpi-val { font-size:22px; font-weight:700; color:var(--ge-color-text,#201f1e); margin-bottom:3px; }
.om-kpi-card.om-kpi-ok .om-kpi-val { color:var(--ge-color-brand,#4f46e5); }
.om-kpi-card.om-kpi-warn .om-kpi-val { color:var(--ge-color-err,#b91c1c); }
.om-kpi-label { font-size:12px; font-weight:600; color:var(--ge-color-text-mute,#605e5c); }
.om-kpi-sub { font-size:11px; color:var(--ge-color-text-faint,#726f6d); margin-top:3px; }

/* ---- P1: Графики (SVG-обёртка) ---- */
.om-chart-wrap { background:var(--ge-color-surface,#fff); border:1px solid var(--ge-color-border,#edebe9); border-radius:10px; padding:14px 16px; margin-bottom:16px; overflow:hidden; }
.om-chart-title { font-size:13px; font-weight:600; color:var(--ge-color-text-mute,#605e5c); margin-bottom:10px; }

/* Баннер пессимистичной блокировки записи (редактируется другим пользователем) — семейный механизм */
.om-lock-banner { display:flex; align-items:flex-start; gap:8px; margin:0 0 12px; padding:10px 12px; border-radius:8px;
  font-size:12.5px; line-height:1.5; background:var(--ge-color-warn-bg,#fef3c7); border:1px solid color-mix(in srgb, var(--ge-color-warn,#b45309) 30%, transparent); color:var(--ge-color-warn,#b45309); }
.om-lock-banner b { font-weight:600; }
.om-lock-banner .om-lb-actions { margin-top:6px; display:flex; gap:8px; }

/* ---- Вынесенные inline-стили ---- */
.om-toolbar-title { margin:0; flex:1; font-size:15px; }

/* ============================================================
   ТЁМНАЯ ТЕМА (аддитивно). Активна при :root[data-theme="dark"]
   из общего suite-theme.css + theme.js. Светлая тема не меняется.
   Покрываются только структурные поверхности через токены --ge-color-*.
   Бренд-кнопки, бейджи/pill, приоритеты, статус-акценты — без изменений.
   ПРИМЕЧАНИЕ (1050/W1): база теперь тоже на токенах, поэтому эти override'ы
   во многом избыточны; оставлены для явной тонкой настройки, дедуп — W2.
   ============================================================ */
:root[data-theme="dark"] body {
  background: var(--ge-color-bg);
  color: var(--ge-color-text);
}
:root[data-theme="dark"] .om-topbar {
  background: var(--ge-color-surface);
  border-bottom-color: var(--ge-color-border);
}
:root[data-theme="dark"] .om-topbar h1 { color: var(--ge-color-text); }
:root[data-theme="dark"] .om-card {
  background: var(--ge-color-surface);
  border-color: var(--ge-color-border);
}
:root[data-theme="dark"] .om-proj-chip {
  background: var(--rs-bg-soft, var(--ge-color-bg));
  border-color: var(--ge-color-border);
  color: var(--ge-color-text-mute, var(--ge-color-muted));
}
:root[data-theme="dark"] .om-tab {
  background: transparent;
  border-color: transparent;
  color: var(--ge-color-text-mute, var(--ge-color-muted));
}
:root[data-theme="dark"] .om-tab:hover { background: var(--rs-bg-soft, var(--ge-color-bg)); }
:root[data-theme="dark"] .om-muted { color: var(--ge-color-text-mute, var(--ge-color-muted)); }
:root[data-theme="dark"] .om-table th,
:root[data-theme="dark"] .om-table td { border-bottom-color: var(--ge-color-border); }
:root[data-theme="dark"] .om-table th {
  color: var(--ge-color-text-mute, var(--ge-color-muted));
  background: var(--rs-bg-soft, var(--ge-color-bg));
}
:root[data-theme="dark"] .om-table tr:hover td { background: var(--rs-bg-soft, var(--ge-color-bg)); }
:root[data-theme="dark"] .om-row-form {
  background: var(--rs-bg-soft, var(--ge-color-bg));
  border-color: var(--ge-color-border);
}
:root[data-theme="dark"] .om-row-form input,
:root[data-theme="dark"] .om-row-form select,
:root[data-theme="dark"] .om-input {
  background: var(--ge-color-bg);
  border-color: var(--ge-color-border);
  color: var(--ge-color-text);
}
:root[data-theme="dark"] .om-detail-label,
:root[data-theme="dark"] .om-form-grid label { color: var(--ge-color-text-mute, var(--ge-color-muted)); }
:root[data-theme="dark"] .om-kpi {
  background: var(--rs-bg-soft, var(--ge-color-bg));
  border-color: var(--ge-color-border);
}
:root[data-theme="dark"] .om-kpi span { color: var(--ge-color-text-mute, var(--ge-color-muted)); }
:root[data-theme="dark"] .om-kpi-card {
  background: var(--rs-bg-soft, var(--ge-color-bg));
  border-color: var(--ge-color-border);
}
:root[data-theme="dark"] .om-kpi-val { color: var(--ge-color-text); }
:root[data-theme="dark"] .om-kpi-label { color: var(--ge-color-text); }
:root[data-theme="dark"] .om-kpi-sub { color: var(--ge-color-text-mute, var(--ge-color-muted)); }
:root[data-theme="dark"] .om-chart-wrap {
  background: var(--ge-color-surface);
  border-color: var(--ge-color-border);
}
:root[data-theme="dark"] .om-chart-title { color: var(--ge-color-text); }
/* Drawer / модалка карточки */
:root[data-theme="dark"] .om-modal {
  background: var(--ge-color-surface);
  border-left-color: var(--ge-color-border);
}
:root[data-theme="dark"] .om-modal-head { border-bottom-color: var(--ge-color-border); }
:root[data-theme="dark"] .om-modal-title { color: var(--ge-color-text); }
:root[data-theme="dark"] .om-modal-close { color: var(--ge-color-text-mute, var(--ge-color-muted)); }
:root[data-theme="dark"] .om-modal-close:hover {
  background: var(--rs-bg-soft, var(--ge-color-bg));
  color: var(--ge-color-text);
}
:root[data-theme="dark"] .om-timeline { border-left-color: var(--ge-color-border); }
:root[data-theme="dark"] .om-timeline-time { color: var(--ge-color-text-mute, var(--ge-color-muted)); }
:root[data-theme="dark"] .om-check-row:hover { background: var(--rs-bg-soft, var(--ge-color-bg)); }
:root[data-theme="dark"] .om-section-h { color: var(--ge-color-text); }

/* ============ Ф-6 «Объект ≠ Проект» — линза эксплуатации + приёмка handover ============ */
.om-obj-lens { display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap;
  border:1px solid var(--ge-color-border,#edebe9); border-radius:10px; padding:10px 14px; margin-bottom:14px;
  background:var(--ge-color-brand-soft,#eef2ff); }
.om-obj-lens.lens-op { border-color:color-mix(in srgb, var(--ge-color-ok,#15803d) 35%, transparent);
  background:var(--ge-color-ok-bg,#dafbe1); }
.om-obj-lens.lens-pending { background:var(--ge-color-surface-2,#f8fafc); }
.om-lens-l { display:flex; align-items:center; gap:10px; min-width:0; }
.om-lens-l > span { flex:0 0 auto; color:var(--ge-color-brand,#4f46e5); }
.om-lens-r { display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
.om-lens-code { font:600 13px/1.3 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; color:var(--ge-color-brand,#4f46e5); }
.om-lens-nm { font-weight:600; font-size:13.5px; color:var(--ge-color-text,#201f1e); }
.om-lens-sub { font-size:11.5px; color:var(--ge-color-text-mute,#605e5c); margin-top:1px; }
.om-lens-state { font-size:12px; padding:3px 10px; border-radius:999px; font-weight:600;
  background:var(--ge-color-surface,#fff); border:1px solid var(--ge-color-border,#edebe9); color:var(--ge-color-text-mute,#605e5c); }
.om-lens-state.st-op { background:var(--ge-color-ok-bg,#dafbe1); border-color:transparent; color:var(--ge-color-ok,#15803d); }
.om-lens-ho { display:inline-flex; align-items:center; gap:4px; font-size:12px; color:var(--ge-color-text-mute,#605e5c); }
.om-ho-sec { margin:12px 0; padding-top:10px; border-top:1px solid var(--ge-color-border,#edebe9); }
.om-ho-sec:first-of-type { border-top:0; padding-top:0; }
.om-ho-h { font-weight:600; font-size:13px; margin-bottom:8px; color:var(--ge-color-text,#201f1e); }
.om-ho-obj { background:var(--ge-color-surface-2,#f8fafc); border:1px solid var(--ge-color-border,#edebe9); border-radius:8px; padding:10px 12px; }
.om-ho-code { font:600 13px/1.3 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; color:var(--ge-color-brand,#4f46e5); }
.om-ho-nm { font-weight:600; font-size:13.5px; margin-top:2px; }
.om-ho-state { font-size:12.5px; color:var(--ge-color-text-mute,#605e5c); margin-top:4px; }
.om-ho-results { max-height:220px; overflow-y:auto; margin-top:8px; border:1px solid var(--ge-color-border,#edebe9); border-radius:7px; }
.om-ho-results:empty { display:none; }
.om-ho-row { padding:7px 10px; font-size:13px; cursor:pointer; border-bottom:1px solid var(--ge-color-border,#edebe9); }
.om-ho-row:last-child { border-bottom:0; }
.om-ho-row:hover { background:var(--ge-color-surface-2,#f8fafc); }
.om-ho-row.sel { background:var(--ge-color-brand-soft,#eef2ff); outline:2px solid var(--ge-color-brand,#4f46e5); outline-offset:-2px; }
.om-ho-row b { color:var(--ge-color-brand,#4f46e5); }
.om-ho-done { display:inline-flex; align-items:center; gap:6px; font-size:13px; color:var(--ge-color-ok,#15803d);
  background:var(--ge-color-ok-bg,#dafbe1); border:1px solid color-mix(in srgb, var(--ge-color-ok,#15803d) 30%, transparent);
  border-radius:7px; padding:8px 12px; }
.om-ho-note { display:block; font-size:12px; color:var(--ge-color-text-mute,#605e5c); }
.om-ho-note .om-input { display:block; width:100%; margin-top:4px; }
:root[data-theme="dark"] .om-obj-lens { background:var(--rs-bg-soft, var(--ge-color-bg)); border-color:var(--ge-color-border); }
:root[data-theme="dark"] .om-obj-lens.lens-op { background:var(--rs-bg-soft, var(--ge-color-bg)); }
:root[data-theme="dark"] .om-lens-state { background:var(--ge-color-bg); border-color:var(--ge-color-border); color:var(--ge-color-text); }
:root[data-theme="dark"] .om-ho-obj,
:root[data-theme="dark"] .om-ho-results { background:var(--ge-color-bg); border-color:var(--ge-color-border); }
:root[data-theme="dark"] .om-lens-nm,
:root[data-theme="dark"] .om-ho-nm { color:var(--ge-color-text); }