/* ======================================================================
Единый хедер подпрограмм Raschet.
Подключается в каждой подпрограмме через . Высота 56 px, фиксированные
отступы. Левая часть: home-иконка + «Raschet» + название подпрограммы.
Цвет — через ЦЕНТРАЛЬНЫЕ токены семейства (var(--ge-color-*, <светлый-fallback>)):
светлая тема берёт значения из :root (suite-theme.css), тёмная — из
:root[data-theme="dark"] (themes/dark/dark.css). Поэтому общий хром следует за
единым бренд-зерном, а отдельный dark-оверрайд не нужен. Fallback в var() = текущий
светлый hex (страховка, если токен не подгружен). Сплошные заливки с белым текстом
(sync-кнопка) и категориальная палитра plan-бейджей — намеренно фикс. hex.
====================================================================== */
/* ── Декларативный каркас (Фаза 1, карта 1478) ─────────────────────────────
— обёртка-якорь: сам тег не участвует в layout (contents),
хедер внутри ведёт себя как прямой ребёнок body (sticky работает как раньше). */
suite-header { display: contents; }
/* Барьер от протекания CSS модуля (только под , старые страницы
с mountHeader() не затронуты — ноль риска регресса до cutover'а).
Механика: специфичность барьера ровно (0,1,0) — :where() обнуляет свои части,
остаётся только .rs-header. Низкоспецифичные глобальные правила модуля
(button{…}, div{…}, *{…} — (0,0,*)) проигрывают барьеру и откатываются к
UA-дефолтам (all:revert); собственные правила хедера классами rs-* — той же
или выше специфичности и ПОЗЖЕ в этом файле — переопределяют барьер штатно.
Каскадные слои (@layer) сознательно НЕ используются: слой ПОНИЖАЕТ приоритет
против нелейерных стилей модуля — обратный эффект. all не трогает --токены —
центральная тема (--ge-*) продолжает наследоваться сквозь барьер. */
:where(suite-header) .rs-header :where(*),
:where(suite-header) .rs-header :where(*)::before,
:where(suite-header) .rs-header :where(*)::after { all: revert; }
.rs-header {
position: sticky;
top: 0;
z-index: 9990;
flex: none;
height: 56px;
background: var(--ge-color-surface, #fff);
border-bottom: 1px solid var(--ge-color-border, #edebe9);
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 24px;
font-family: -apple-system, "Segoe UI", Roboto, sans-serif;
color: var(--ge-color-text, #201f1e);
-webkit-font-smoothing: antialiased;
}
/* Нижний padding-bottom управляет suite-footer.js (52px для fixed-футера).
Здесь только базовый reset, без отступа — иначе race condition: app-header.css
подключается синхронно в , suite-footer.js инжектится позже и перезаписывает
значение → визуальное «слетание». */
body { margin: 0; box-sizing: border-box; }
.rs-header-left { display: flex; align-items: center; gap: 12px; }
.rs-header-right { display: flex; align-items: center; gap: 12px; }
/* Именованные якоря виджетов (notifications/help/account): display:contents — пустой якорь
ничего не занимает (без лишних 12px-gap), заполненный отдаёт свою кнопку прямо в flex кластера,
сохраняя фиксированный порядок и исключая overlap/FAB-наезды. */
.rs-header-right > .rs-slot { display: contents; }
/* «Глупая шапка» G-Search: центральная строка глобального поиска (MS365-style).
Ядро не ищет само — по Enter редирект на портал. flex:0 1 — ужимается при нехватке. */
.rs-header-search {
flex: 0 1 460px;
display: flex;
align-items: center;
gap: 8px;
height: 36px;
margin: 0 16px;
padding: 0 10px;
border: 1px solid var(--ge-color-border, #edebe9);
border-radius: 8px;
background: var(--rs-bg-soft, #f4f6fa);
transition: border-color .15s, background .15s, box-shadow .15s;
min-width: 0;
}
.rs-header-search:focus-within {
background: var(--ge-color-surface, #fff);
border-color: var(--ge-color-brand, #4f46e5);
box-shadow: 0 0 0 3px var(--ge-color-brand-soft, rgba(80, 120, 200, .14));
}
.rs-gsearch-ic { display: inline-flex; align-items: center; color: var(--ge-color-text-mute, #605e5c); flex: none; }
.rs-gsearch-ic svg { width: 17px; height: 17px; }
.rs-gsearch-input {
flex: 1 1 auto;
min-width: 0;
border: 0;
outline: 0;
background: transparent;
font: inherit;
font-size: 14px;
color: var(--ge-color-text, #201f1e);
padding: 0;
}
.rs-gsearch-input::placeholder { color: var(--ge-color-text-faint, #726f6d); }
/* нативный «крестик» очистки скрываем — единый вид во всех браузерах */
.rs-gsearch-input::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; }
.rs-gsearch-kbd {
flex: none;
font: 600 11px/1 -apple-system, "Segoe UI", Roboto, sans-serif;
color: var(--ge-color-text-mute, #605e5c);
background: var(--ge-color-surface, #fff);
border: 1px solid var(--ge-color-border, #edebe9);
border-radius: 5px;
padding: 3px 6px;
letter-spacing: .3px;
}
.rs-header-search:focus-within .rs-gsearch-kbd { display: none; }
/* На узких экранах строка мешает — прячем (поиск доступен на портале/по Ctrl+K нет смысла без строки). */
@media (max-width: 900px) {
.rs-header-search { display: none; }
}
/* Канон Suite: вафля-переключатель продуктов крайней слева. Пуста (switcher не
загрузился / не сконфигурирован) — не занимает место (без фантомного gap). */
.rs-suite-switch { display: inline-flex; align-items: center; }
.rs-suite-switch:empty { display: none; }
.rs-home-btn {
width: 36px;
height: 36px;
border: 1px solid var(--ge-color-border, #edebe9);
border-radius: 8px;
background: var(--rs-bg-soft, #fff);
display: flex;
align-items: center;
justify-content: center;
color: var(--ge-color-text-mute, #605e5c);
cursor: pointer;
text-decoration: none;
transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.rs-home-btn:hover {
background: var(--rs-bg-hover, #f5f7fa);
border-color: var(--ge-color-brand, #4f46e5);
color: var(--ge-color-brand, #4f46e5);
}
.rs-home-btn svg { width: 20px; height: 20px; }
/* #9: селектор рабочего пространства (#wsxSpace) — на месте удалённой локальной вафли
(4 квадрата). Наполняется suite-spaces.js теми же пространствами, что Хаб/рабочее место;
при единственном доступном пространстве компонент сам прячет его (обычный режим модуля). */
.rs-space-select {
height: 36px;
max-width: 240px;
padding: 0 30px 0 12px;
border: 1px solid var(--ge-color-border, #edebe9);
border-radius: 8px;
background-color: var(--rs-bg-soft, #fff);
color: var(--ge-color-text, #201f1e);
font: inherit;
font-size: 13.5px;
font-weight: 600;
cursor: pointer;
-webkit-appearance: none;
appearance: none;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 9px center;
background-size: 15px;
transition: background-color 0.15s, border-color 0.15s;
}
.rs-space-select:hover { background-color: var(--rs-bg-hover, #f5f7fa); border-color: var(--ge-color-brand, #4f46e5); }
.rs-space-select:focus-visible { outline: 2px solid var(--ge-color-brand, #4f46e5); outline-offset: 2px; }
.rs-brand {
font-size: 18px;
font-weight: 700;
color: var(--ge-color-text, #201f1e);
letter-spacing: 0.3px;
}
.rs-subtitle {
font-size: 13px;
color: var(--ge-color-text-mute, #605e5c);
border-left: 1px solid var(--ge-color-border, #edebe9);
padding-left: 12px;
margin-left: 4px;
}
.rs-version {
font-size: 11px;
color: var(--ge-color-text-faint, #726f6d);
font-weight: 400;
margin-left: 6px;
}
/* ===== Кнопки справа: шестерёнка + auth ===== */
.rs-icon-btn {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 36px;
height: 36px;
padding: 0 10px;
border: 1px solid var(--ge-color-border, #edebe9);
border-radius: 8px;
background: var(--rs-bg-soft, #fff);
color: var(--ge-color-text-mute, #605e5c);
cursor: pointer;
font-size: 13px;
font-family: inherit;
transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.rs-icon-btn:hover {
background: var(--rs-bg-hover, #f5f7fa);
border-color: var(--ge-color-brand, #4f46e5);
color: var(--ge-color-brand, #4f46e5);
}
.rs-icon-btn svg { width: 18px; height: 18px; }
.rs-auth-widget { display: inline-flex; align-items: center; }
.rs-user-chip {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 4px 10px 4px 4px;
border: 1px solid var(--ge-color-border, #edebe9);
border-radius: 20px;
background: var(--rs-bg-soft, #f5f7fa);
cursor: pointer;
transition: background 0.15s;
}
.rs-user-chip:hover { background: var(--rs-bg-hover, #e8eef5); }
.rs-user-photo {
width: 28px;
height: 28px;
border-radius: 50%;
object-fit: cover;
background: var(--ge-color-border, #edebe9);
}
.rs-user-name {
font-size: 13px;
color: var(--ge-color-text, #201f1e);
font-weight: 500;
max-width: 160px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
/* ===== v0.59.342: back-кнопка и project-badge ===== */
.rs-back-btn {
display: inline-flex;
align-items: center;
height: 32px;
padding: 0 12px;
border: 1px solid var(--ge-color-border, #edebe9);
border-radius: 8px;
background: var(--rs-bg-soft, #fff);
color: var(--ge-color-text-mute, #605e5c);
cursor: pointer;
font-size: 12px;
font-family: inherit;
font-weight: 500;
white-space: nowrap;
transition: background 0.15s, border-color 0.15s, color 0.15s;
margin-left: 4px;
}
.rs-back-btn:hover {
background: var(--rs-bg-hover, #f1f5f9);
border-color: var(--ge-color-brand, #4f46e5);
color: var(--ge-color-brand, #4f46e5);
}
/* project-badge: брендовый soft-чип (следует за зерном в обеих темах). */
.rs-proj-badge {
display: inline-flex;
align-items: center;
height: 32px;
padding: 0 12px;
border: 1px solid color-mix(in srgb, var(--ge-color-brand, #4f46e5) 30%, transparent);
border-radius: 16px;
background: var(--ge-color-brand-soft, #eef2ff);
color: var(--ge-color-brand, #4f46e5);
font-size: 12px;
font-weight: 600;
white-space: nowrap;
max-width: 280px;
overflow: hidden;
text-overflow: ellipsis;
transition: background 0.15s, border-color 0.15s;
}
.rs-proj-badge:hover {
background: color-mix(in srgb, var(--ge-color-brand, #4f46e5) 16%, var(--ge-color-surface, #fff));
border-color: color-mix(in srgb, var(--ge-color-brand, #4f46e5) 45%, transparent);
}
/* v0.60.103: standalone-режим (модуль запущен напрямую без ?project=).
Предупреждающий (warn) soft-чип, чтобы визуально отличить от привычного
брендового «через ссылку из /projects/». При клике — меню переключения/создания. */
.rs-proj-badge.rs-proj-badge-standalone {
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);
cursor: pointer;
}
.rs-proj-badge.rs-proj-badge-standalone:hover {
background: color-mix(in srgb, var(--ge-color-warn, #b45309) 22%, var(--ge-color-surface, #fff));
border-color: color-mix(in srgb, var(--ge-color-warn, #b45309) 45%, transparent);
}
/* Нет активного проекта вообще (после очистки LS / первой загрузки) — error soft-чип. */
.rs-proj-badge.rs-proj-badge-empty {
background: var(--ge-color-err-bg, #fde7e9);
border-color: color-mix(in srgb, var(--ge-color-err, #b91c1c) 30%, transparent);
color: var(--ge-color-err, #b91c1c);
cursor: pointer;
}
.rs-proj-badge.rs-proj-badge-empty:hover {
background: color-mix(in srgb, var(--ge-color-err, #b91c1c) 22%, var(--ge-color-surface, #fff));
border-color: color-mix(in srgb, var(--ge-color-err, #b91c1c) 45%, transparent);
}
/* button-стиль для бейджей. Раньше были , теперь