/* ═══ Стили Финансов. Вынесено из dashboard.html 06.09.2026 (строки 10–1010) без изменений. ═══ */
:root {
--navy-dark: #0E0E0E; /* шапка: один цвет в обеих темах */ --topbar-bg: #0E0E0E; --navy: #12172A; --navy-mid: #202020; --blue: #888888; --blue-light: #E8E8E8;
--bg-page: #F2F2F2; --card: #FFFFFF; --text: #1A1A1A; --text-soft: #666666; --border: #CCCCCC;
/* Акцент для активных вкладок — серый --blue для этого слишком блёклый */
--accent: #4A6B85; --accent-2: #6284A0;
/* Отклик на курсор — общий для всех программ (как в AI-Auth).
--accent оставлен как есть: это активная вкладка, другая роль. */
--hover: #14b8a6; --hover-bg: rgba(20,184,166,.12);
--green: #10b981; --green-bg: #E7F5EC; --amber: #C98A1F; --amber-bg: #FBF1DF; --red: #ef4444; --red-bg: #FCEAEA;
--readonly-bg: #EBEBEB; --card-bg2: #F0F0F0;
}
html[data-theme="dark"] {
--navy: #E8E8E8; --blue-light: #202020; --bg-page: #0E0E0E; --card: #181818;
--text: #8AB4D4; --text-soft: #507090; --border: #333333;
--blue: #888888;
--accent: #456B88; --accent-2: #5C82A2;
/* Отклик на курсор — общий для всех программ (как в AI-Auth).
--accent оставлен как есть: это активная вкладка, другая роль. */
--hover: #14b8a6; --hover-bg: rgba(20,184,166,.12);
--green-bg: #163325; --amber-bg: #2A2A14; --red-bg: #3A1A1A;
--readonly-bg: #202020; --card-bg2: #242424;
}
html[data-theme="dark"] input, html[data-theme="dark"] select, html[data-theme="dark"] textarea {
background: #202020; color: var(--text); border-color: var(--border);
}
html[data-theme="dark"] table tr:hover, html[data-theme="dark"] .contact-row:hover { background: #222222; }
html[data-theme="dark"] .admin-panel, html[data-theme="dark"] .sidebar-btn { background: var(--card); }
html[data-theme="dark"] .cal-item, html[data-theme="dark"] .bubble.theirs { background: var(--card); }
html[data-theme="dark"] .cattype-btn, html[data-theme="dark"] .period-btn { background: var(--card); }
* { box-sizing: border-box; }
body { margin: 0; background: var(--bg-page); font-family: 'Inter', sans-serif; color: var(--text); }
.org-selector-sync option { color: #12172A; background: #fff; }
.wrap {
max-width: 1520px; margin: 0 auto; padding: 22px 24px 60px;
display: flex; gap: 24px; align-items: flex-start;
}
.sidebar {
flex: 0 0 210px; display: flex; flex-direction: column; gap: 6px;
position: sticky; top: 20px;
min-height: calc(100vh - 40px);
}
.sidebar-title {
font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em;
color: #9f1d3c; padding: 0 4px 4px;
}
/* Название программы — на месте бывшей шапки, как в остальных восьми. */
.sidebar-logo { cursor: pointer; padding: 2px 4px 10px; }
.sidebar-logo .logo-text {
font-size: 20px; font-weight: 800; color: var(--text); line-height: 1.1;
}
.sidebar-logo .logo-sub {
/* --muted в Финансах не объявлена: в общем ui.css она встречается
только с запасным значением. Здесь родная приглушённая переменная. */
font-size: 11px; color: var(--text-soft); font-family: 'IBM Plex Mono', monospace;
letter-spacing: 0.04em; margin-top: 2px;
}
/* Выбор организации: раньше стоял на тёмной шапке и был белым по
прозрачному. В светлом меню такой стиль стал бы невидимым. */
.sidebar-org {
width: 100%; font-family: 'IBM Plex Mono', monospace; font-size: 12px;
padding: 7px 8px; border-radius: 8px; border: 1px solid var(--border);
background: var(--card); color: var(--text); margin-bottom: 6px;
}
.sidebar-entry { color: var(--blue); font-weight: 700; margin-bottom: 10px; }
.sidebar-btn {
text-align: left; font-family: 'Inter', sans-serif; font-weight: 600; font-size: 13px;
padding: 11px 14px; border-radius: 9px; border: 1px solid var(--border);
background: #fff; color: var(--text-soft); cursor: pointer;
}
.sidebar-btn.active { background: var(--navy); border-color: var(--navy); color: #fff; }
/* Подсветка при наведении — единая со всеми программами: рамка акцентным
цветом и лёгкая заливка. Раньше у пунктов меню и кнопок действий
реакции на курсор не было вовсе. */
.sidebar-btn { transition: background-color .15s, border-color .15s, color .15s; }
.sidebar-btn:hover:not(.active) { background: var(--blue-light); border-color: var(--hover); color: var(--text); }
/* Единый вид кнопок действий в таблицах — светлый прямоугольник, как в
списке пользователей. Наведение остаётся смысловым: «Изменить» зеленеет,
«Удалить» краснеет — те правила тяжелее и побеждают. Классы общие,
новые таблицы получают вид автоматически. */
td .save-btn, td .del-btn2, .org-row .save-btn, .org-row .del-btn2,
.emp-table td.emp-actions button {
background: #f0f0f0; color: #111;
border: 1px solid #9aa1a9; border-radius: 3px;
padding: 4px 10px; font-size: 11.5px; font-weight: 600; cursor: pointer;
}
/* Общий стиль полос прокрутки — тот же, что у верхней полосы таблиц:
бегунок виден всегда, при наведении голубеет. Применяется ко всем
прокручиваемым блокам программы, включая будущие. */
::-webkit-scrollbar { height: 10px; width: 10px; }
::-webkit-scrollbar-track { background: rgba(127,127,127,.12); border-radius: 6px; }
::-webkit-scrollbar-thumb { background: var(--text-soft, #888); border-radius: 6px; }
::-webkit-scrollbar-thumb:hover { background: var(--blue, #7fb2ff); }
* { scrollbar-width: thin; scrollbar-color: var(--text-soft, #888) transparent; }
/* contacts-btn — единый вид с «Изменить»: тот же светлый прямоугольник и
размер. Отступ сверху разделяет кнопки, когда они встают в столбик.
Наведение — голубое: это переход к просмотру, а не правка и не удаление. */
td .contacts-btn, .emp-actions .contacts-btn {
background: #f0f0f0; color: #111; border: 1px solid #9aa1a9; border-radius: 3px;
padding: 4px 10px; font-size: 11.5px; font-weight: 600; cursor: pointer;
margin-right: 6px; margin-top: 4px;
}
td .contacts-btn:hover, .emp-actions .contacts-btn:hover {
background: #14b8a6; border-color: #14b8a6; color: #fff; /* морская волна */
}
/* Стаж: «Изменить» и «Должности» в столбик — одинаковой ширины */
#tenureList .emp-actions button { display:block; width:100%; margin:0 0 4px; box-sizing:border-box; }
#tenureList .emp-actions button:last-child { margin-bottom:0; }
/* Полоса-разделитель компаний: заметнее в обеих темах. Правило с !important,
потому что фон задан в разметке строк инлайном и иначе его не перебить. */
.group-band { font-weight:700; padding:9px 10px;
background: rgba(140,170,255,.28) !important; color:#0f2f66; }
html[data-theme="dark"] .group-band { background: rgba(140,170,255,.20) !important; color:#cfe0ff; }
.save-btn, .del-btn2, .cattype-btn, .period-btn, .btn-logout,
.subtab-btn, .mgmt-subtab { transition: background-color .15s, border-color .15s, color .15s, opacity .15s; }
/* Вкладки, переехавшие в раздел «Фин. потоки»: из ряда вкладок дашборда
убраны, но в разметке остались — «таблетки» раздела нажимают именно их,
переиспользуя штатные обработчики загрузки данных. */
.tab-btn-moved { display: none; }
/* «Сохранить» при наведении — зелёная. Селектор намеренно тяжелее
правила .emp-table td.emp-actions .save-btn, которое объявлено ниже
по файлу и иначе перебило бы фон. */
.emp-table td.emp-actions .save-btn:hover,
.save-btn:hover {
background: var(--green); border-color: var(--green); color: #fff; opacity: 1;
}
/* «Удалить» при наведении — красная. Селектор так же тяжелее базового
правила .emp-table td.emp-actions .del-btn2, объявленного ниже. */
.emp-table td.emp-actions .del-btn2:hover,
.del-btn2:hover {
background: var(--red); border-color: var(--red); color: #fff; opacity: 1;
}
.cattype-btn:hover:not(.active), .period-btn:hover:not(.active) {
background: var(--blue-light); border-color: var(--accent); color: var(--text);
}
/* Блок пользователя внизу сайдбара — тот же вид, что в Продажи/Телеком */
.sidebar-bottom { margin-top: 12px; border-top: 1px solid var(--border); padding-top: 12px; }
.user-block { display: flex; align-items: center; gap: 10px; padding: 8px 6px;
border: 1px solid transparent; border-radius: 10px;
transition: background-color .15s, border-color .15s; }
/* Строка переключения темы — отдельный элемент под блоком профиля.
Раньше переключатель был ВНУТРИ кликабельного блока, и промах мимо
тумблера открывал профиль. */
.theme-row { display:flex; align-items:center; justify-content:space-between; gap:10px;
padding:8px 10px; margin-top:6px; border:1px solid transparent; border-radius:10px;
transition:background-color .15s, border-color .15s; }
.theme-row:hover { background:var(--blue-light); border-color:var(--hover); }
.theme-row-label { font-size:12px; color:var(--text-soft); user-select:none; }
.user-block:hover { background: var(--card2, var(--blue-light)); border-color: var(--hover); }
.user-avatar {
width: 32px; height: 32px; border-radius: 50%; flex-shrink: 0;
background: linear-gradient(135deg, var(--blue), #999999);
display: flex; align-items: center; justify-content: center;
font-weight: 700; font-size: 12.5px; color: #fff;
}
.user-name { font-size: 13px; font-weight: 600; }
.user-role { font-size: 11.5px; color: var(--text-soft); }
.theme-switch {
position: relative; width: 52px; height: 26px; background: var(--blue-light);
border: 1px solid var(--border); border-radius: 99px; cursor: pointer;
display: flex; align-items: center; justify-content: space-between;
padding: 0 6px; flex-shrink: 0; margin-left: auto;
}
.theme-switch .ts-icon { font-size: 11px; line-height: 1; z-index: 1; user-select: none; }
.theme-switch .ts-knob {
position: absolute; top: 2px; left: 2px; width: 20px; height: 20px; border-radius: 50%;
background: linear-gradient(135deg, var(--blue), #999999);
transition: left .2s ease; box-shadow: 0 2px 6px rgba(0,0,0,.3);
}
html[data-theme="dark"] .theme-switch .ts-knob { left: 28px; }
.btn-logout {
width: 100%; margin-top: 8px; padding: 8px; background: transparent;
border: 1px solid var(--border); border-radius: 8px; color: var(--text-soft);
font-size: 12.5px; cursor: pointer; font-family: 'Inter', sans-serif;
}
.btn-logout:hover { border-color: #ef4444; color: #ef4444; }
.main-content { flex: 1; min-width: 0; }
.admin-panel {
display: none; background: var(--card); border: 1px solid var(--border);
border-radius: 12px; padding: 22px; margin-bottom: 20px;
}
.admin-panel.active { display: block; }
@media (max-width: 860px) {
.wrap { flex-direction: column; }
.sidebar { flex-direction: row; flex-wrap: wrap; position: static; width: 100%; }
.sidebar-btn { flex: 1 1 auto; }
}
.card { background: var(--card); border: 1px solid var(--border); border-radius: 12px; box-shadow: 0 1px 2px rgba(16,24,64,0.04); }
details.card summary {
cursor: pointer; list-style: none; padding: 16px 20px; font-weight: 600; font-size: 14px; color: var(--navy);
display: flex; align-items: center; gap: 8px;
}
details.card summary::-webkit-details-marker { display: none; }
details.card summary::after {
content: 'Развернуть ▾';
margin-left: auto;
font-size: 11.5px;
font-weight: 500;
color: var(--text-soft);
text-transform: none;
letter-spacing: normal;
}
details.card[open] summary::after {
content: 'Свернуть ▴';
}
.config-body { padding: 4px 20px 20px; display: flex; flex-direction: column; gap: 16px; }
.limits-grid { display: flex; flex-wrap: wrap; gap: 10px 20px; }
.limit-item { display: flex; align-items: center; gap: 8px; font-size: 12.5px; background: var(--bg-page); border-radius: 8px; padding: 6px 10px; }
.limit-item span { color: var(--text-soft); white-space: nowrap; }
.limit-item input { width: 90px; font-family: 'IBM Plex Mono', monospace; font-size: 12.5px; padding: 5px 7px; border: 1px solid var(--border); border-radius: 6px; }
.btn { font-family: 'Inter', sans-serif; font-weight: 600; font-size: 13px; padding: 9px 18px; border-radius: 8px; border: none; background: var(--blue); color: #fff; cursor: pointer; }
.btn.secondary { background: var(--blue-light); color: var(--blue); }
/* Действия в разделе «Доп. соц. пакет»: добавление — зелёным,
выгрузка в Excel — жёлтым, чтобы кнопки различались с одного взгляда */
/* Обе кнопки — одна форма и размер, различаются только цветом.
Геометрию задаём здесь целиком: у базового .btn нет рамки, и без
этого выравнивания кнопка с рамкой оказывалась на 2px крупнее. */
.btn.act-add, .btn.act-excel {
display: block; width: 100%; margin: 0 0 10px;
padding: 10px 18px; border-radius: 8px; border: 1px solid;
font-size: 13px; font-weight: 700; text-align: center; box-sizing: border-box;
transition: background-color .15s, color .15s;
}
.btn.act-add { background: var(--green-bg); color: var(--green); border-color: var(--green); }
.btn.act-excel { background: var(--amber-bg); color: var(--amber); border-color: var(--amber); }
.btn.act-add:hover { background: var(--green); color: #fff; }
.btn.act-excel:hover { background: var(--amber); color: #fff; }
/* Компактная таблица: у корпоративов много колонок, и при обычных
отступах строка не помещалась по ширине — появлялась прокрутка,
из-за которой кнопки действий уезжали за край. */
#corporateTable, #seaTripsTable { table-layout: fixed; width: 100%; }
#corporateTable th, #corporateTable td,
#seaTripsTable th, #seaTripsTable td { padding: 7px 6px; }
#corporateTable input, #seaTripsTable input { padding: 6px 7px; font-size: 12.5px; max-width: 100%; }
#corporateTable input[type="date"], #seaTripsTable input[type="date"] { width: 100%; padding: 6px 4px; }
/* Колонка действий одинакова на всех четырёх вкладках соц. пакета:
кнопки прижаты вправо, отступ до края таблицы один и тот же. */
table.emp-table.sp-table td.emp-actions { white-space: nowrap; text-align: right; padding-right: 14px; }
table.emp-table.sp-table td.emp-actions button:last-child { margin-right: 0; }
/* Размер кнопок действий НЕ переопределяем — он общий для всех таблиц
(.emp-table td.emp-actions button), иначе вкладки выглядят по-разному.
Вместо этого под кнопки отведена достаточная ширина колонки. */
/* Длинный текст не должен распирать таблицу — обрезаем в пределах ячейки,
полное значение остаётся во всплывающей подсказке при наведении */
#corporateTable td, #seaTripsTable td { overflow: hidden; }
/* Кнопки действий и раскрытая смета обрезаться не должны */
#corporateTable td.emp-actions, #seaTripsTable td.emp-actions,
#corporateTable .cp-costs-tr td { overflow: visible; }
#corporateTable input, #seaTripsTable input { text-overflow: ellipsis; }
/* Итоговая строка помесячной сводки — вишнёвым, как фирменный акцент
заголовков разделов. Цвет одинаков на всех вкладках соц. пакета. */
/* Итог оформлен так же, как кнопки «Добавить» и «Скачать Excel»:
скруглённая рамка той же толщины и радиуса, отличается только цветом.
Скругление у строки таблицы работает лишь при раздельных границах,
поэтому у таблиц сводки border-collapse: separate. */
/* ВАЖНО: селекторы намеренно «тяжелее» (table.emp-table.monthly-table,
tr.total-row), потому что общие правила .emp-table объявлены НИЖЕ по
файлу — при равной специфичности они перебивали бы эти. */
table.emp-table.monthly-table { border-collapse: separate; border-spacing: 0; }
table.emp-table.monthly-table th,
table.emp-table.monthly-table td { border-bottom: 1px solid var(--border); }
table.emp-table.monthly-table tr.total-row td {
background: rgba(159, 29, 60, .10);
color: #9f1d3c; font-weight: 700;
border-top: 1px solid #9f1d3c; border-bottom: 1px solid #9f1d3c;
padding-top: 10px; padding-bottom: 10px;
}
table.emp-table.monthly-table tr.total-row td:first-child {
border-left: 1px solid #9f1d3c;
border-top-left-radius: 8px; border-bottom-left-radius: 8px;
}
table.emp-table.monthly-table tr.total-row td:last-child {
border-right: 1px solid #9f1d3c;
border-top-right-radius: 8px; border-bottom-right-radius: 8px;
}
html[data-theme="dark"] table.emp-table.monthly-table tr.total-row td {
background: rgba(159, 29, 60, .18); color: #e0798f; border-color: #c2415f;
}
/* При наведении подложка густеет. Общее правило tbody tr:hover красит
строку целиком, но у итога фон задан на ячейках — поэтому и ховер
описываем на уровне ячеек, иначе он не будет виден. */
table.emp-table.monthly-table tr.total-row:hover td { background: rgba(159, 29, 60, .20); }
html[data-theme="dark"] table.emp-table.monthly-table tr.total-row:hover td { background: rgba(159, 29, 60, .30); }
.inline-input {
font-family: 'IBM Plex Mono', monospace; font-size: 13px; padding: 8px 10px;
border: 1px solid var(--border); border-radius: 8px;
}
/* ---------- Tabs ---------- */
.tabs {
display: flex; gap: 4px; margin: 20px 0 4px; border-bottom: 2px solid var(--border);
position: sticky; top: 0; z-index: 50; background: var(--bg-page);
overflow-x: auto; white-space: nowrap; padding-top: 2px;
}
.tab-btn {
font-family: 'Inter', sans-serif; font-weight: 600; font-size: 13.5px;
padding: 10px 18px; border: none; background: none; color: var(--text-soft);
cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -2px;
}
.tab-btn.active { color: var(--blue); border-bottom-color: var(--blue); }
.tab-panel { display: none; }
.tab-panel.active { display: block; }
.tab-org-row {
display: flex; align-items: center; gap: 10px; margin: 20px 0 4px;
}
.tab-org-row label {
font-size: 12.5px; font-weight: 600; color: var(--text-soft);
}
.tab-org-row select {
font-family: 'Inter', sans-serif; font-size: 13px; padding: 7px 11px;
border: 1px solid var(--border); border-radius: 8px; background: #fff; color: var(--text);
min-width: 200px;
}
.header-org-select {
font-family: 'Inter', sans-serif; font-size: 13px; padding: 7px 11px;
border: 1px solid var(--border); border-radius: 8px; background: #fff; color: var(--text);
min-width: 200px;
}
/* ---------- Внутренние вкладки внутри раздела "Организации" ---------- */
.subtabs-bar {
display: flex; gap: 4px; margin: 0 0 4px; border-bottom: 2px solid var(--border);
overflow-x: auto; white-space: nowrap;
}
/* Подвкладки: активная — заметная "таблетка" (тот же приём, что у вкладок
раздела "Управление"). Раньше активная отличалась только серым цветом
текста и подчёркиванием — на глаз было почти не видно, какая открыта. */
.subtab-btn {
font-family: 'Inter', sans-serif; font-weight: 600; font-size: 13.5px;
padding: 9px 16px; border: 1px solid transparent; border-radius: 10px 10px 0 0;
background: none; color: var(--text-soft);
cursor: pointer; border-bottom: 3px solid transparent; margin-bottom: -2px;
transition: background .15s, color .15s;
}
.subtab-btn:hover:not(.active) { background: var(--blue-light); color: var(--text); }
.subtab-btn.active {
background: linear-gradient(135deg, var(--accent), var(--accent-2));
color: #fff; border-bottom-color: var(--accent);
box-shadow: 0 2px 6px rgba(74,107,133,0.25);
}
.subtab-panel { display: none; }
.subtab-panel.active { display: block; }
/* Горизонтальные "таблетки" для подвкладок раздела "Управление" —
тот же визуальный стиль, что в Продажи/Телеком (не .subtab-btn,
который используется в других местах с подчёркиванием). */
.mgmt-subtabs { display:flex; gap:6px; padding:0 0 16px; flex-wrap:wrap; }
.mgmt-subtab { display:flex; align-items:center; gap:7px; padding:9px 16px; border-radius:10px; font-size:13.5px; font-weight:600; color:var(--text-soft); cursor:pointer; background:var(--card); border:1px solid var(--border); user-select:none; }
.mgmt-subtab:hover:not(.active) { background:var(--blue-light); color:var(--text); }
.mgmt-subtab.active { background:linear-gradient(135deg,var(--accent),var(--accent-2)); color:#fff; border-color:transparent; box-shadow:0 2px 6px rgba(74,107,133,0.25); }
/* Раздел «Инвестиции» виден только владельцу. Класс role-* ставится в
checkAuth() после ответа /api/me; до этого момента body без него, и
раздел скрыт — мелькания у чужого человека не будет. */
body:not(.role-owner) .sidebar-btn[data-panel="investPanel"],
body:not(.role-owner) #investPanel { display: none !important; }
/* ══════════ Единый слой компонентов (ui-*) ══════════
Причина появления: один и тот же элемент назывался в программах
по-разному — кнопка это .btn/.btn.secondary в Финансах и
.btn-primary/.btn-secondary в Делопроизводстве и Инфраструктуре, а поля
ввода вообще оформлялись на месте, каждый раз заново. Здесь собран
минимальный набор, одинаковый во всех программах; вводится постепенно —
старая вёрстка продолжает работать, новые разделы собираются из этого. */
/* Блок — единица содержания. Раздел это стопка блоков, а не сплошной поток. */
.ui-stack { display:flex; flex-direction:column; gap:16px; }
.ui-block { background:var(--card); border:1px solid var(--border); border-radius:12px; padding:18px 20px; }
.ui-block-title { font-size:11.5px; font-weight:700; text-transform:uppercase; letter-spacing:.07em;
color:var(--text-soft); margin:0 0 14px; display:flex; align-items:center; gap:8px; }
.ui-block-title .sp { margin-left:auto; text-transform:none; letter-spacing:normal; font-weight:600; }
/* Поля выкладываются сеткой, а не столбиком: форма из восьми полей в одну
колонку заставляет прокручивать экран там, где всё помещается. */
.ui-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); gap:14px 18px; }
.ui-grid .full { grid-column:1 / -1; }
.ui-field { display:flex; flex-direction:column; gap:5px; min-width:0; }
.ui-field > label { font-size:11.5px; font-weight:600; color:var(--text-soft); }
.ui-field .hint { font-size:11px; color:var(--text-soft); line-height:1.45; }
.ui-field input, .ui-field select, .ui-field textarea {
font-family:'Inter',sans-serif; font-size:13px; color:var(--text); background:var(--card);
border:1px solid var(--border); border-radius:8px; padding:9px 11px; width:100%;
box-sizing:border-box; transition:border-color .15s, box-shadow .15s; }
.ui-field input:focus, .ui-field select:focus, .ui-field textarea:focus {
outline:none; border-color:var(--accent); box-shadow:0 0 0 3px rgba(74,107,133,.16); }
.ui-field textarea { min-height:120px; resize:vertical; line-height:1.55; }
.ui-field input.mono { font-family:'IBM Plex Mono',monospace; letter-spacing:.02em; }
.ui-actions { display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
/* Состояние словом и цветом сразу — точка без подписи ничего не сообщает. */
.ui-pill { display:inline-flex; align-items:center; gap:6px; padding:3px 10px; border-radius:999px;
font-size:11.5px; font-weight:700; border:1px solid; white-space:nowrap; }
.ui-pill.ok { color:var(--green); background:var(--green-bg); border-color:var(--green); }
.ui-pill.warn { color:var(--amber); background:var(--amber-bg); border-color:var(--amber); }
.ui-pill.bad { color:var(--red); background:var(--red-bg); border-color:var(--red); }
.ui-pill.mute { color:var(--text-soft); background:var(--card-bg2); border-color:var(--border); }
.ui-note { font-size:12px; color:var(--text-soft); line-height:1.6; }
.ui-note b { color:var(--text); }
.ui-empty { text-align:center; padding:26px; color:var(--text-soft); font-size:13px; }
.ui-list { margin:0; padding-left:18px; font-size:12.5px; line-height:1.7; color:var(--text); }
.ui-list li { margin-bottom:3px; }
/* Недостающие варианты кнопки. Имена как в остальных программах, чтобы
одна и та же разметка работала везде. */
.btn-primary { font-family:'Inter',sans-serif; font-weight:600; font-size:13px; padding:9px 18px;
border-radius:8px; border:none; cursor:pointer;
background:linear-gradient(135deg,var(--accent),var(--accent-2)); color:#fff; }
.btn-secondary { font-family:'Inter',sans-serif; font-weight:600; font-size:13px; padding:9px 18px;
border-radius:8px; cursor:pointer; background:var(--card);
border:1px solid var(--border); color:var(--text-soft); }
.btn-secondary:hover { color:var(--text); border-color:var(--hover); }
.btn-danger { font-family:'Inter',sans-serif; font-weight:600; font-size:13px; padding:9px 18px;
border-radius:8px; cursor:pointer; background:var(--red-bg);
border:1px solid var(--red); color:var(--red); }
.btn-danger:hover { background:var(--red); color:#fff; }
/* Панель инструментов графика. */
.chart-tools { display:flex; gap:14px; flex-wrap:wrap; align-items:center; margin-bottom:10px;
padding-bottom:10px; border-bottom:1px solid var(--border); }
.ct-group { display:flex; gap:5px; align-items:center; flex-wrap:wrap; }
.ct-btn { font-family:'Inter',sans-serif; font-size:11.5px; font-weight:600; padding:5px 10px;
border-radius:6px; cursor:pointer; background:var(--card); color:var(--text-soft);
border:1px solid var(--border); white-space:nowrap; }
.ct-btn:hover:not(:disabled):not(.active) { color:var(--text); border-color:var(--hover); }
.ct-btn.active { background:var(--accent); color:#fff; border-color:transparent; }
.ct-btn:disabled { opacity:.45; cursor:default; }
.ct-chk { display:flex; align-items:center; gap:4px; font-size:11.5px; font-weight:600;
cursor:pointer; user-select:none; }
.ct-chk input { width:auto; margin:0; cursor:pointer; }
.ct-info { font-size:11px; color:var(--text-soft); margin-right:4px; }
/* Строка под курсором: значения свечи, как в терминале. Высоту держим
постоянной, иначе график дёргается вверх-вниз при движении мыши. */
.ohlc-row { font-family:'IBM Plex Mono',monospace; font-size:11.5px; color:var(--text-soft);
min-height:18px; margin-bottom:4px; white-space:nowrap; overflow:hidden;
text-overflow:ellipsis; }
/* Ряд таймфреймов графика. */
.tf-row { display:flex; gap:6px; flex-wrap:wrap; margin-bottom:12px; }
.tf-btn { font-family:'Inter',sans-serif; font-size:12px; font-weight:600; padding:6px 12px;
border-radius:7px; cursor:pointer; background:var(--card); color:var(--text-soft);
border:1px solid var(--border); }
.tf-btn:hover:not(.active) { color:var(--text); border-color:var(--hover); }
.tf-btn.active { background:linear-gradient(135deg,var(--accent),var(--accent-2));
color:#fff; border-color:transparent; }
.tf-btn.live { color:var(--red); }
.tf-btn.live.active { color:#fff; }
/* Стакан в раскладке торгового терминала: три колонки и жирная черта
между продавцами и покупателями. */
.ob2 { font-family:'IBM Plex Mono',monospace; font-size:12.5px; max-width:560px; }
.ob2-head { display:grid; grid-template-columns:1fr 108px 1fr; padding-bottom:6px;
font-family:'Inter',sans-serif; font-size:10.5px; font-weight:700;
text-transform:uppercase; letter-spacing:.06em; color:var(--text-soft); }
.ob2-head span:nth-child(1) { text-align:right; padding-right:8px; }
.ob2-head span:nth-child(2) { text-align:center; }
.ob2-head span:nth-child(3) { padding-left:8px; }
.ob2-row { display:grid; grid-template-columns:1fr 108px 1fr; align-items:center; height:23px; }
.ob2-cell { position:relative; height:100%; display:flex; align-items:center; }
.ob2-cell.left { justify-content:flex-end; padding-right:8px; }
.ob2-cell.right { justify-content:flex-start; padding-left:8px; }
.ob2-bar { position:absolute; top:2px; bottom:2px; border-radius:3px; opacity:.2; }
.ob2-bar.ask { right:0; background:var(--red); }
.ob2-bar.bid { left:0; background:var(--green); }
.ob2-qty { position:relative; color:var(--text); }
.ob2-price { text-align:center; font-weight:700; }
.ob2-price.ask { color:var(--red); }
.ob2-price.bid { color:var(--green); }
.ob2-split { display:flex; justify-content:space-between; align-items:center; gap:12px;
margin:7px 0; padding:8px 12px; background:var(--card-bg2);
border-top:2px solid var(--accent); border-bottom:2px solid var(--accent);
font-family:'Inter',sans-serif; font-size:11.5px; color:var(--text-soft); }
.ob2-split b { color:var(--text); }
.ob2-foot { display:flex; justify-content:space-between; gap:12px; margin-top:8px;
padding-top:8px; border-top:1px solid var(--border);
font-family:'Inter',sans-serif; font-size:11.5px; color:var(--text-soft); }
.ob2-foot b { color:var(--text); }
/* Прежняя раскладка стакана — оставлена, пока на неё что-то ссылается.
Цена и объём в строке, ширина полосы — доля от максимального
объёма в стакане. Полоса растёт от края к центру, чтобы спрос и
предложение читались как две встречные стены. */
.ob { font-family:'IBM Plex Mono',monospace; font-size:12.5px; max-width:460px; }
/* Статус сигнала — плашка-кнопка с пояснением при наведении. */
.inv-st { display:inline-block; padding:4px 12px; border-radius:8px; font-size:.8rem;
font-weight:600; cursor:help; border:1px solid var(--border);
background:var(--card2, #f2f4f7); transition:filter .15s; }
.inv-st:hover { filter:brightness(.94); }
.inv-st-confirmed { color:var(--green); border-color:var(--green); }
.inv-st-dismissed { color:var(--muted); }
.inv-st-expired { color:var(--red); border-color:var(--red); }
.ob-row { position:relative; display:flex; align-items:center; justify-content:space-between;
padding:3px 10px; border-radius:4px; }
.ob-bar { position:absolute; top:1px; bottom:1px; right:0; border-radius:4px; opacity:.16; }
.ob-bar.ask { background:var(--red); }
.ob-bar.bid { background:var(--green); }
.ob-price { position:relative; font-weight:700; }
.ob-price.ask { color:var(--red); }
.ob-price.bid { color:var(--green); }
.ob-qty { position:relative; color:var(--text-soft); }
.ob-mid { display:flex; justify-content:space-between; gap:12px; padding:7px 10px; margin:4px 0;
border-top:1px solid var(--border); border-bottom:1px solid var(--border);
font-size:11.5px; color:var(--text-soft); font-family:'Inter',sans-serif; }
/* Карточка горизонта торговли: цветная полоса слева — единственное, чем
они различаются внешне, всё остальное одинаково. */
.inv-prof { border-left:4px solid var(--border); }
.inv-prof[data-key="long"] { border-left-color:var(--green); }
.inv-prof[data-key="short"] { border-left-color:var(--amber); }
.inv-prof[data-key="scalp"] { border-left-color:var(--red); }
.cattype-btn {
font-family: 'Inter', sans-serif; font-weight: 600; font-size: 13px;
padding: 8px 16px; border: 1px solid var(--border); border-radius: 8px;
background: #fff; color: var(--text-soft); cursor: pointer;
}
.cattype-btn.active { background: var(--blue); border-color: var(--blue); color: #fff; }
.flow-summary {
display: flex; gap: 20px; flex-wrap: wrap; margin-bottom: 16px;
font-size: 13.5px;
}
.flow-summary .chip {
padding: 8px 14px; border-radius: 8px; font-family: 'IBM Plex Mono', monospace; font-size: 12.5px;
}
.flow-summary .chip.income { background: var(--green-bg); color: var(--green); }
.flow-summary .chip.expense { background: var(--red-bg); color: var(--red); }
.flow-summary .chip.net { background: var(--blue-light); color: var(--blue); }
.org-row {
display: flex; gap: 8px; flex-wrap: wrap; align-items: center;
padding: 12px; background: var(--amber-bg); border-radius: 8px; margin-bottom: 10px;
border-left: 3px solid var(--amber);
}
#employeesList .org-row { flex-wrap: nowrap; }
#employeesList .org-row .save-btn,
#employeesList .org-row .del-btn2 { flex-shrink: 0; white-space: nowrap; }
#employeesList .org-row .emp-total { flex-shrink: 0; white-space: nowrap; }
#employeesList .org-row.locked input[readonly] { background: var(--readonly-bg); color: var(--text-soft); cursor: default; }
#employeesList .org-row.locked select:disabled { background: var(--readonly-bg); color: var(--text-soft); }
/* Строка "в режиме редактирования, ещё не сохранена" — во всех таблицах приложения,
где строка становится доступной для правки по кнопке "Изменить" (снимается класс .locked). */
.cp-tr:not(.locked), .cpc-tr:not(.locked), .sp-tr:not(.locked), .tenure-tr:not(.locked),
.php-tr:not(.locked), .sal-tr:not(.locked), .adj-tr:not(.locked), .emp-tr:not(.locked),
.vac-tr:not(.locked), .prop-tr:not(.locked), .trip-tr:not(.locked) {
background: var(--amber-bg) !important;
}
.cp-tr:not(.locked) td:first-child, .cpc-tr:not(.locked) td:first-child, .sp-tr:not(.locked) td:first-child,
.tenure-tr:not(.locked) td:first-child, .php-tr:not(.locked) td:first-child, .sal-tr:not(.locked) td:first-child,
.adj-tr:not(.locked) td:first-child, .emp-tr:not(.locked) td:first-child, .vac-tr:not(.locked) td:first-child,
.prop-tr:not(.locked) td:first-child, .trip-tr:not(.locked) td:first-child {
box-shadow: inset 3px 0 0 var(--amber);
}
.emp-table { width: 100%; border-collapse: collapse; }
.emp-table th {
text-align: left; font-size: 11px; text-transform: uppercase; letter-spacing: 0.04em;
color: var(--text-soft); font-weight: 700; padding: 8px 10px; border-bottom: 2px solid var(--border); white-space: nowrap;
}
.emp-table td { padding: 8px 10px; border-bottom: 1px solid var(--border); vertical-align: middle; }
.emp-table input, .emp-table select, .emp-table textarea {
width: 100%; padding: 8px 10px; border: 1px solid var(--border); border-radius: 6px;
font-size: 13px; font-family: 'Inter', sans-serif; box-sizing: border-box;
}
.emp-table input[readonly], .emp-table textarea[readonly] {
background: transparent; border-color: transparent; color: var(--text); cursor: default; padding-left: 2px;
}
.emp-table select:disabled {
background: transparent; border-color: transparent; color: var(--text); appearance: none; padding-left: 2px;
}
.emp-table input.emp-name[readonly] { font-weight: 700; }
/* ФИО — жирный шрифт и минимальная ширина во всей программе */
input.emp-name, input.bc-cardholder, input.bc-responsible,
input.cp-contact, input.cpc-name, input.st-name,
input.org-contact, input.org-director { font-weight: 700; min-width: 200px; }
input.emp-name { min-width: 220px; }
.emp-table select.cp-legal-form:disabled {
display: inline-block; width: auto; min-width: 60px; text-align: center;
background: var(--blue-light); color: var(--blue); border: none; border-radius: 20px;
padding: 3px 12px; font-size: 11px; font-weight: 700; appearance: none; -webkit-appearance: none;
}
.emp-table td.emp-total-cell { font-family: 'IBM Plex Mono', monospace; font-size: 12.5px; white-space: nowrap; }
.emp-table td.emp-actions { white-space: nowrap; }
.emp-table td.emp-actions button { margin-right: 6px; font-size: 11.5px; padding: 4px 10px; border-radius: 3px; border: 1px solid #9aa1a9; cursor: pointer; }
/* ==================== СТИЛИ ДЛЯ ОТРИСОВАННОГО RULES.md ==================== */
.markdown-content h1 { font-size: 19px; margin: 0 0 12px; color: var(--navy); }
.markdown-content h2 { font-size: 16px; margin: 26px 0 10px; color: var(--navy); border-bottom: 1px solid var(--border); padding-bottom: 6px; }
.markdown-content h3 { font-size: 13.5px; margin: 18px 0 8px; color: var(--navy); }
.markdown-content p { font-size: 13.5px; line-height: 1.6; margin: 0 0 10px; }
.markdown-content ul, .markdown-content ol { font-size: 13.5px; line-height: 1.6; padding-left: 22px; margin: 0 0 12px; }
.markdown-content li { margin-bottom: 4px; }
.markdown-content strong { color: var(--text); }
.markdown-content code {
background: var(--readonly-bg, #EDEFF5); padding: 1px 6px; border-radius: 4px;
font-family: 'IBM Plex Mono', monospace; font-size: 12px;
}
.markdown-content hr { border: none; border-top: 1px solid var(--border); margin: 20px 0; }
.markdown-content table { width: 100%; border-collapse: collapse; margin: 12px 0 18px; font-size: 13px; }
.markdown-content th {
text-align: left; background: var(--bg-page); color: var(--text-soft); font-weight: 700;
padding: 8px 10px; border: 1px solid var(--border); font-size: 12px; text-transform: uppercase; letter-spacing: 0.03em;
}
.markdown-content td { padding: 8px 10px; border: 1px solid var(--border); text-align: center; }
.markdown-content td:first-child { text-align: left; font-weight: 600; }
/* ==================== ПРАВА ДОСТУПА ПО РОЛЯМ ==================== */
/* Обычный пользователь не видит зарплату сотрудников — только список и контакты.
Владелец и Бухгалтер (ГБ) видят всё как обычно. */
body.role-user .emp-salary-col {
display: none !important;
}
/* Обычный пользователь: просмотр + скачивание Excel/PDF везде, но без прав добавлять/менять/удалять
в Организациях, Банковских счетах и Пользователях. Лимиты бюджета — тоже только просмотр.
Сотрудники и Табель посещаемости остаются полностью редактируемыми для этой роли. */
body.role-user #orgsPanel .save-btn,
body.role-user #orgsPanel .del-btn2,
body.role-user #addOrgBtn,
body.role-user #addOrgHint,
body.role-user #bankAccountsPanel .save-btn,
body.role-user #bankAccountsPanel .del-btn2,
body.role-user #addBankAccountBtn,
body.role-user #usersPanel .save-btn,
body.role-user #usersPanel .del-btn2,
body.role-user #addUserBtn {
display: none !important;
}
body.role-user #orgsList input, body.role-user #orgsList select,
body.role-user #bankAccountsList input {
pointer-events: none; opacity: 0.7;
}
/* Бухгалтер: Лимиты бюджета — только просмотр, без права менять */
body.role-accountant #configPanel .btn {
display: none !important;
}
body.role-accountant #configPanel input, body.role-accountant #configPanel select {
pointer-events: none; opacity: 0.7;
}
/* Обычный пользователь — не видит Лимиты бюджета вообще */
body.role-user .sidebar-btn[data-panel="configPanel"] {
display: none !important;
}
/* Обычный пользователь: Сотрудники, Доп.соц.пакет, Заказчики, Продавцы — только просмотр,
редактирование доступно лишь Владельцу, Главному Бухгалтеру, ОД, ДК (роль accountant) */
body.role-user #employeesPanel .save-btn,
body.role-user #employeesPanel .del-btn2,
body.role-user #employeesPanel button[onclick="openEmployeeModal(null)"],
body.role-user #socialPackagePanel .save-btn,
body.role-user #socialPackagePanel .del-btn2,
body.role-user #socialPackagePanel button[onclick="openSocialPackageModal(null)"],
body.role-user #customersPanel .save-btn,
body.role-user #customersPanel .del-btn2,
body.role-user #customersPanel button[onclick="openCpModal('customer', null)"],
body.role-user #suppliersPanel .save-btn,
body.role-user #suppliersPanel .del-btn2,
body.role-user #suppliersPanel button[onclick="openCpModal('supplier', null)"],
body.role-user #banksPanel .save-btn,
body.role-user #banksPanel .del-btn2,
body.role-user #banksPanel button[onclick="openCpModal('bank', null)"],
body.role-user #tenurePanel .save-btn {
display: none !important;
}
/* Обычный пользователь: вкладки ЗП/Премии/Штрафы/Отпуск — полностью скрыты (не видит вообще) */
body.role-user .tab-btn[data-tab="salary"],
body.role-user .tab-btn[data-tab="bonuses"],
body.role-user .tab-btn[data-tab="penalties"],
body.role-user .tab-btn[data-tab="vacation"] {
display: none !important;
}
/* Персональные исключения из AI-Auth — скрывают конкретный раздел именно
у этого сотрудника, НЕЗАВИСИМО от его роли (даже если роль в остальном
видит всё, например бухгалтер или директор). */
body.restr-payroll .tab-btn[data-tab="salary"],
body.restr-bonus .tab-btn[data-tab="bonuses"],
body.restr-fines .tab-btn[data-tab="penalties"] {
display: none !important;
}
body.role-user #tab-salary .save-btn,
body.role-user #tab-bonuses .save-btn,
body.role-user #tab-bonuses .del-btn2,
body.role-user #tab-bonuses button[onclick="openAdjustmentModal('bonus', null)"],
body.role-user #tab-penalties .save-btn,
body.role-user #tab-penalties .del-btn2,
body.role-user #tab-penalties button[onclick="openAdjustmentModal('penalty', null)"],
body.role-user #tab-vacation .save-btn,
body.role-user #tab-vacation .del-btn2,
body.role-user #tab-vacation button[onclick="openVacationModal(null)"],
body.role-user #tab-trips .save-btn,
body.role-user #tab-trips .del-btn2,
body.role-user #tab-trips button[onclick="openTripModal(null)"] {
display: none !important;
}
.emp-actions .contacts-btn {
background: #f0f0f0; color: #111; border: 1px solid #9aa1a9; border-radius: 3px;
padding: 4px 10px; font-size: 11.5px; font-weight: 600; cursor: pointer;
margin-right: 6px; margin-top: 4px;
}
/* Обычный пользователь — только просмотр контактов заказчика/продавца, без права редактировать */
body.role-user #cpContactsModal .save-btn,
body.role-user #cpContactsModal .del-btn2,
body.role-user #cpContactsModal button[onclick="addCpContactRow()"],
body.role-user #positionHistoryModal .save-btn,
body.role-user #positionHistoryModal .del-btn2,
body.role-user #positionHistoryModal button[onclick="addPositionHistoryRow()"] {
display: none !important;
}
.org-row input, .org-row select {
font-family: 'Inter', sans-serif; font-size: 12.5px; padding: 7px 9px;
border: 1px solid var(--border); border-radius: 6px;
}
.org-row .org-name { flex: 1 1 160px; }
.org-row .org-inn { flex: 0 1 120px; }
.org-row .org-regime { flex: 1 1 200px; }
.org-row .org-rate { flex: 0 1 90px; }
.org-row .org-patent { flex: 0 1 130px; }
.org-row button { font-size: 12px; padding: 6px 12px; border-radius: 6px; border: none; cursor: pointer; }
.org-row .save-btn:disabled, .save-btn:disabled { background: var(--text-soft); color: #fff; cursor: default; opacity: 0.7; }
.org-row-requisites {
margin-top: -6px; background: var(--readonly-bg); font-size: 12px;
}
.org-row-requisites input { font-size: 12px; }
.orgs-summary-table { width: 100%; border-collapse: collapse; margin-bottom: 18px; }
.orgs-summary-table th {
text-align: left; font-size: 11px; text-transform: uppercase; letter-spacing: 0.04em;
color: var(--text-soft); font-weight: 600; padding: 8px 10px; border-bottom: 2px solid var(--border);
}
.orgs-summary-table td { padding: 10px; border-bottom: 1px solid var(--border); font-size: 13px; }
.orgs-summary-table .org-tag {
display: inline-block; font-size: 11px; font-weight: 600; padding: 2px 9px; border-radius: 20px;
background: var(--blue-light); color: var(--blue); border: 1px solid rgba(136,136,136,.3);
}
html[data-theme="dark"] .orgs-summary-table .org-tag {
background: rgba(138,180,212,.18); color: #8AB4D4; border-color: rgba(138,180,212,.35);
}
.period-btn {
font-family: 'Inter', sans-serif; font-weight: 600; font-size: 12.5px;
padding: 7px 14px; border: 1px solid var(--border); border-radius: 8px;
background: #fff; color: var(--text-soft); cursor: pointer;
}
.period-btn.active { background: var(--blue); border-color: var(--blue); color: #fff; }
.tax-result-row {
display: flex; justify-content: space-between; padding: 10px 0; border-bottom: 1px solid var(--border); font-size: 14px;
}
.tax-disclaimer {
margin-top: 16px; padding: 12px 14px; background: var(--amber-bg); border-left: 4px solid var(--amber);
border-radius: 0 8px 8px 0; font-size: 12.5px; color: var(--text);
}
.scope-note {
padding: 12px 14px; background: var(--blue-light); border-left: 4px solid var(--blue);
border-radius: 0 8px 8px 0; font-size: 12.5px; color: var(--text); margin-bottom: 16px;
}
/* В тёмной теме основной цвет текста голубой (--text: #8AB4D4), и пояснения
читались как ссылки. Здесь делаем их нейтральными: обычный текст —
светло-серый, выделенное полужирным — чуть ярче, курсив — приглушён. */
html[data-theme="dark"] .scope-note { color: #ccd3da; background: #1d2126; border-left-color: #4A6B85; }
html[data-theme="dark"] .scope-note b,
html[data-theme="dark"] .scope-note strong { color: #f0f3f6; }
html[data-theme="dark"] .scope-note i,
html[data-theme="dark"] .scope-note em { color: #9aa4ae; }
.cal-item {
display: flex; align-items: center; gap: 14px; padding: 12px 0; border-bottom: 1px solid var(--border);
}
.cal-item:last-child { border-bottom: none; }
.cal-date {
font-family: 'IBM Plex Mono', monospace; font-weight: 600; font-size: 13px;
min-width: 90px; color: var(--navy);
}
.cal-title { flex: 1; font-size: 13.5px; }
.cal-badge {
font-family: 'IBM Plex Mono', monospace; font-size: 11px; font-weight: 600;
padding: 3px 10px; border-radius: 20px; white-space: nowrap;
}
.cal-badge.soon { background: var(--red-bg); color: var(--red); }
.cal-badge.upcoming { background: var(--amber-bg); color: var(--amber); }
.cal-badge.later { background: var(--green-bg); color: var(--green); }
.cal-type-icon { font-size: 15px; }
.card-field-check {
display: flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 500; cursor: pointer;
}
.card-field-check input { width: auto; }
section { margin-top: 24px; }
.section-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; flex-wrap: wrap; gap: 10px; }
.section-title { font-size: 16px; font-weight: 700; color: var(--navy); margin: 0; }
.kpi-row { display: flex; flex-wrap: wrap; gap: 16px; }
.kpi-card { flex: 1 1 220px; padding: 20px 22px; }
.kpi-card .label { font-size: 12px; color: var(--text-soft); font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 10px; }
.kpi-card .value { font-family: 'IBM Plex Mono', monospace; font-weight: 600; font-size: 26px; color: var(--navy); }
.kpi-card .value.green { color: var(--green); } .kpi-card .value.red { color: var(--red); }
.kpi-card .note { margin-top: 8px; font-size: 12.5px; color: var(--text-soft); }
.alert { display: flex; gap: 12px; align-items: flex-start; padding: 13px 16px; border-radius: 10px; background: var(--red-bg); border-left: 4px solid var(--red); margin-bottom: 8px; font-size: 13.5px; }
.alert.warn { background: var(--amber-bg); border-color: var(--amber); }
.split-row { display: flex; gap: 20px; flex-wrap: wrap; align-items: stretch; }
.split-row > .card { flex: 1 1 380px; padding: 22px; }
.cat-item { margin-bottom: 16px; } .cat-item:last-child { margin-bottom: 0; }
.cat-top { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 6px; gap: 8px; flex-wrap: wrap; }
.cat-name { font-weight: 600; font-size: 13.5px; }
.cat-figures { font-family: 'IBM Plex Mono', monospace; font-size: 12px; color: var(--text-soft); white-space: nowrap; }
.cat-track { height: 9px; background: var(--bg-page); border-radius: 5px; overflow: hidden; }
.cat-fill { height: 100%; border-radius: 5px; }
.table-card { padding: 22px; overflow-x: auto; }
.table-wrap { overflow-x: auto; max-width: 100%; }
/* В автоматическом режиме ручная разметка остаётся доступной — рисовать для
себя никто не запрещает, — но перестаёт влиять на решения робота. Гасим
её, чтобы это было видно, а не подразумевалось. */
/* Режим работы робота. Ручной — жёлтый, автомат — зелёный; невыбранный
остаётся нейтральным, чтобы включённый читался с одного взгляда. */
.mode-btn {
flex: 1; min-width: 230px; text-align: left; padding: 14px 16px;
border: 1px solid var(--border); border-radius: 11px;
background: var(--card); color: var(--muted);
cursor: pointer; transition: background .15s, border-color .15s, color .15s;
}
.mode-btn .mode-ttl { font-weight: 700; font-size: 14px; }
.mode-btn .mode-sub { font-size: 12px; margin-top: 3px; font-weight: 400; line-height: 1.4; }
/* Наведение должно быть видно на любой кнопке, включая уже выбранную и
недоступную: иначе непонятно, нажимается ли она вообще. */
.mode-btn:hover:not(.locked) {
transform: translateY(-1px);
box-shadow: 0 4px 12px rgba(0, 0, 0, .12);
}
.mode-btn:active:not(.locked) { transform: translateY(0); box-shadow: none; }
.mode-btn.manual:hover:not(.active):not(.locked) {
border-color: var(--amber); background: var(--amber-bg); color: var(--amber);
}
.mode-btn.auto:hover:not(.active):not(.locked) {
border-color: var(--green); background: var(--green-bg); color: var(--green);
}
/* Недоступная не поднимается — но показывает, почему её нельзя нажать. */
.mode-btn.locked:hover { border-color: var(--red); color: var(--red); opacity: .85; }
/* Недоступный вариант не прячем: человек должен видеть, что такая ступень
есть, и чего именно не хватает. Но нажать её нельзя. */
.mode-btn.locked { cursor: not-allowed; opacity: .6; border-style: dashed; }
.mode-sub-title {
font-size: 11.5px; font-weight: 700; letter-spacing: .04em;
text-transform: uppercase; color: var(--muted); margin: 18px 0 8px;
}
.rd-list { list-style: none; padding: 0; margin: 10px 0 0; }
.rd-list li { display: flex; gap: 9px; align-items: flex-start; padding: 5px 0; font-size: 12.5px; }
.rd-list .rd-mark { flex: 0 0 auto; font-weight: 700; line-height: 1.45; }
.mode-btn.manual.active {
background: var(--amber-bg); border-color: var(--amber); color: var(--amber);
}
.mode-btn.auto.active {
background: var(--green-bg); border-color: var(--green); color: var(--green);
}
/* Отчёт о финансовых результатах: производные строки должны отличаться
от вводимых с одного взгляда — их не правят, они считаются. */
.rs-table { width: 100%; border-collapse: collapse; }
.rs-table td { padding: 9px 10px; border-bottom: 1px solid var(--border); vertical-align: top; }
.rs-code { color: var(--muted); font-size: 12px; width: 58px; white-space: nowrap; }
.rs-name { font-size: 13.5px; }
.rs-hint { font-size: 11.5px; color: var(--muted); margin-top: 2px; }
.rs-val { width: 190px; text-align: right; white-space: nowrap; }
.rs-val input { width: 170px; text-align: right; }
.rs-sum td { background: var(--bg); font-weight: 700; }
.rs-sum .rs-name { font-size: 14px; }
.rs-final td { background: var(--green-bg); font-weight: 800; border-bottom: none; }
.rs-final .rs-name, .rs-final .rs-val { font-size: 15.5px; color: var(--green); }
.rs-final.neg td { background: var(--red-bg); }
.rs-final.neg .rs-name, .rs-final.neg .rs-val { color: var(--red); }
.rs-sign { color: var(--muted); font-weight: 700; padding-right: 4px; }
.pf-tabs { display: flex; gap: 8px; flex-wrap: wrap; }
.pf-tab {
padding: 9px 16px; border: 1px solid var(--border); border-radius: 9px;
background: var(--card); color: var(--text); font-size: 13.5px; font-weight: 600;
cursor: pointer; transition: background .15s, border-color .15s, color .15s;
}
.pf-tab:hover { border-color: var(--blue); }
.pf-tab.active { background: var(--blue); border-color: var(--blue); color: #fff; }
.inv-manual-only { transition: opacity .15s; }
#investPanel.inv-auto .inv-manual-only { opacity: .4; filter: grayscale(1); }
.inv-auto-note { display: none; }
#investPanel.inv-auto .inv-auto-note { display: block; }
.table-wrap > table { min-width: max-content; }
table { width: 100%; border-collapse: collapse; min-width: 660px; }
thead th { text-align: left; font-size: 11.5px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-soft); font-weight: 600; border-bottom: 2px solid var(--border); padding: 10px 12px; background: var(--card); }
thead th.num { text-align: right; min-width: 110px; }
tbody td { padding: 11px 12px; border-bottom: 1px solid var(--border); font-size: 13.5px; }
tbody td.num { text-align: right; font-family: 'IBM Plex Mono', monospace; white-space: nowrap; }
tbody tr:hover { background: var(--bg-page); }
.tag { display: inline-block; font-size: 11px; font-weight: 600; padding: 3px 10px; border-radius: 20px; }
.tag.paid { background: var(--green-bg); color: var(--green); }
.tag.pending { background: var(--amber-bg); color: var(--amber); }
.tag.overdue { background: var(--red-bg); color: var(--red); }
.tag.income { background: var(--green-bg); color: var(--green); }
.tag.expense { background: var(--red-bg); color: var(--red); }
.del-btn { background: none; border: none; color: var(--red); cursor: pointer; font-size: 12px; }
.filters-row { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 16px; }
.filters-row select, .filters-row input {
font-family: 'Inter', sans-serif; font-size: 13px; padding: 8px 11px;
border: 1px solid var(--border); border-radius: 8px;
}
.filters-row input[type=text] { flex: 1; min-width: 160px; }
.empty-state { font-family: 'IBM Plex Mono', monospace; font-size: 12.5px; color: var(--text-soft); padding: 30px 0; text-align: center; }
@media (max-width: 640px) {
.wrap { padding: 20px 14px 40px; } .kpi-card { flex: 1 1 100%; }
.tabs { overflow-x: auto; white-space: nowrap; }
}
.modal-overlay {
display: none; position: fixed; inset: 0; background: rgba(11,18,32,0.5); z-index: 100;
align-items: center; justify-content: center;
}
.modal-overlay.open { display: flex; }
.modal-box { background: var(--card); color: var(--text); border-radius: 14px; padding: 26px; width: 100%; max-width: 420px; max-height: 85vh; overflow-y: auto; }
.modal-box h3 { margin: 0 0 16px; font-size: 16px; }
.modal-box label { display: block; font-size: 12px; font-weight: 600; color: var(--text-soft); margin: 12px 0 4px; }
.modal-box label:first-of-type { margin-top: 0; }
.modal-box input, .modal-box select, .modal-box textarea {
width: 100%; padding: 9px 11px; border: 1px solid var(--border); border-radius: 8px; font-size: 13.5px; font-family: 'Inter', sans-serif;
}
.modal-box.wide { max-width: 920px; }
/* Верхняя полоса прокрутки таблиц: бегунок виден всегда, при наведении
светлеет — чтобы полосу замечали и понимали, что она рабочая */
.top-scrollbar::-webkit-scrollbar { height: 10px; }
.top-scrollbar::-webkit-scrollbar-track { background: var(--card-bg2, rgba(127,127,127,.12)); border-radius: 6px; }
.top-scrollbar::-webkit-scrollbar-thumb { background: var(--text-soft, #888); border-radius: 6px; }
.top-scrollbar:hover::-webkit-scrollbar-thumb { background: var(--blue, #7fb2ff); }
.top-scrollbar { scrollbar-color: var(--text-soft, #888) transparent; }
.top-scrollbar:hover { scrollbar-color: var(--blue, #7fb2ff) transparent; }
/* Разметка организации родом из строки списка — внутри окна разворачиваем
её в колонку и растягиваем поля на всю ширину. */
.org-modal-body .org-row { display:flex; flex-wrap:wrap; gap:10px; margin:0 0 10px; }
.org-modal-body .org-row input, .org-modal-body .org-row select { flex:1 1 200px; }
/* Поля в две колонки; строке можно вернуть всю ширину классом full */
.form-2col { display: grid; grid-template-columns: 1fr 1fr; gap: 0 22px; align-items: start; }
.form-2col .full { grid-column: 1 / -1; }
@media (max-width: 760px) { .form-2col { grid-template-columns: 1fr; } }
/* Кнопки прижаты к низу окна и видны при прокрутке длинной формы */
.modal-actions { display: flex; gap: 10px; margin-top: 20px;
position: sticky; bottom: -26px; background: var(--card); padding-bottom: 2px; }
/* Цвет по смыслу действия — как в AI-Auth */
.modal-actions .save-btn, .modal-actions .del-btn2 { transition: background-color .15s, color .15s; }
.modal-actions .save-btn:hover { background: var(--green); color: #fff; }
.modal-actions .del-btn2:hover { background: var(--red); color: #fff; }
.modal-actions button { flex: 1; padding: 10px; border-radius: 8px; border: none; font-weight: 600; cursor: pointer; font-size: 13.5px; }
.modal-actions .primary { background: var(--blue); color: #fff; }
.modal-actions .secondary { background: var(--bg-page); color: var(--text-soft); }
/* Тонкий современный скроллбар вместо системного (со стрелками сверху/снизу) */
html { scrollbar-width: thin; scrollbar-color: var(--border) transparent; }
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 6px; }
::-webkit-scrollbar-thumb:hover { background: var(--text-soft); }
::-webkit-scrollbar-button { display: none; height: 0; width: 0; }
/* Подсветка только что изменённой строки таблицы */
tr.row-flash td { animation: rowFlash 4s ease-out; }
@keyframes rowFlash {
0% { background: rgba(99, 140, 255, .28); }
60% { background: rgba(99, 140, 255, .18); }
100% { background: transparent; }
}
/* Переход в другие программы — действие безопасное, подсвечиваем зелёным,
как обновление и прочие неразрушающие кнопки (а не как «Выйти») */
#switchAppBtn:hover {
border-color: var(--hover) !important;
color: var(--hover) !important;
background: rgba(22, 163, 74, .08) !important;
}
#switchAppBtn:active { background: rgba(22, 163, 74, .16) !important; }