/* ---------- Палитра и тёмная тема ---------- Светлые значения — в :root, тёмные — в :root[data-theme="dark"]. Атрибут data-theme на ставит маленький скрипт в каждой страницы (до отрисовки, чтобы не мигало светлым) и тумблер «☀ / ☾» в шапке (applyTheme в app.js). Перенесено из проекта «Валеев» (там макет и план). Цвета в правилах ниже задавать только через эти переменные: литерал-hex в тёмной теме останется светлым «пятном». */ :root { --bg: #f3f2f2; --panel: #faf9f8; --surface: #fff; /* поля ввода, кнопки, ячейки — «лист» поверх панели */ --text: #201f1d; --text-2: #4a453d; /* второстепенный тёмный текст (строки-расшифровки) */ --mut: #7d7669; --faint: #c4bdae; /* нули, прошлые/выключенные значения, ручки перетаскивания */ --faint-strong: #a49b8b; --line: #d8d4cc; --soft: #e8e5df; --hover: #efece6; /* наведение на строку, шапки таблиц */ --grid: #efece6; /* линии сетки графиков */ --ghost: #cfcac0; /* «пустые» столбцы/дорожки */ --muted-bg: #f5f3f0; /* прошедшие/только для чтения ячейки, итоговые строки */ --block-bg: #e7ded0; /* строки-блоки в матрицах */ --tint-soft: #fbf6ec; /* кремовые подсветки: слабая … сильная */ --tint: #f6ece0; --tint-strong: #f1e7d6; --g1: #b68235; --g1-hover: #8f6428; /* заливка золотой кнопки при наведении */ --g2: #c99f5e; --g3: #dcc59a; --g4: #ece0c8; --on-accent: #fff; /* текст на золотой/терракотовой заливке */ --link: #8f6428; --link-hover: #6f4d1f; --warm: #a3502a; --warm-hover: #8f4222; --on-warm-mut: #f0d9cf; --fact: #7a3626; --dds-in: #5f7a52; /* базовый оттенок столбца поступлений в динамике ДДС — оливковый, тот же, что «приход» ниже */ --in: #5f7a52; /* приход в платёжном календаре — приглушённый оливковый */ --in-soft: #e7ecdf; --out-soft: #f0e2dc; --saved: #5c7a4a; --ok: #4f6f45; --ok-bg: #e9efe2; --ok-border: #c7d6ba; --ok-text: #2f4a27; --pcwarn: #9a6b1f; --pcwarn-bg: #f6ecd8; --pcwarn-border: #e6d3ad; --pcwarn-text: #6b4d16; --pcwarn-flash: #f6e4bf; --mark: #f3e2b3; --bad: #9a3423; --bad-bg: #f6e2dc; --bad-soft: #f8ece8; --bad-border: #e6c3b8; --bad-text: #6f2417; --buf-line: #c9a86a; --tip-bg: #2b2823; --tip-text: #f3efe6; /* тёмные всплывающие подсказки — тёмные в обеих темах */ /* палитры графиков (массивы в app.js/overview.js ссылаются на эти переменные) */ --dds-1: #6d4b1e; --dds-2: #8a6327; --dds-3: #a67f3c; --dds-4: #c29a5c; --dds-5: #d9bd8b; --dds-6: #ece0c8; --dds-7: #efe9dd; --dds-rest: #e3ddd0; --dds-in-1: #5f7a52; --dds-in-2: #8ba077; --dds-in-3: #b9c9a6; --fot-1: #e7d4ac; --fot-2: #d8b981; --fot-3: #c99f5e; --fot-4: #b07d33; --fot-5: #7f571f; --ov-dir-1: #edcf92; --ov-dir-2: #e2b563; --ov-dir-3: #d79b3f; --ov-dir-4: #b7791f; --ov-dir-5: #845411; --ov-dir-6: #61401a; --ov-deep: #956118; --ov-rest: #cac0ae; --plan-hatch: #b8ac96; --plan-hatch-bg: #faf7f0; --plan-hatch-line: #c9bda3; --tax-1: #34220e; --tax-vat: #a36d26; --tax-contrib: #6a4416; --tax-hatch-bg: #f6efe2; } :root[data-theme="dark"] { color-scheme: dark; /* тёмные полосы прокрутки, календарики полей даты и т. п. */ --bg: #1b1916; --panel: #242220; --surface: #2b2925; --text: #efe9df; --text-2: #d4ccbf; --mut: #a89b89; --faint: #6a6255; --faint-strong: #857a6a; --line: #3c372f; --soft: #332f28; --hover: #302c26; --grid: #38342d; --ghost: #4a443b; --muted-bg: #221f1c; --block-bg: #3a342b; --tint-soft: #2c2820; --tint: #332d23; --tint-strong: #3b3327; --g1: #d9a45a; --g1-hover: #e6b574; --g2: #c48a4a; --g3: #8f6a3e; --g4: #5c4a30; --on-accent: #1b1916; --link: #e0ac68; --link-hover: #f0c080; --warm: #e08a5c; --warm-hover: #ea9d74; --on-warm-mut: #4a2616; --fact: #e0876a; --dds-in: #8fae78; --in: #8fae78; --in-soft: #2a3324; --out-soft: #3a2822; --saved: #8fbf7a; --ok: #8fbf7a; --ok-bg: #243020; --ok-border: #3f5635; --ok-text: #b3d69e; --pcwarn: #e0b060; --pcwarn-bg: #372d1b; --pcwarn-border: #5c4a2a; --pcwarn-text: #ecc98a; --pcwarn-flash: #5a4623; --mark: #5c4a20; --bad: #e98a72; --bad-bg: #3d2520; --bad-soft: #33221d; --bad-border: #5e3328; --bad-text: #f0a58f; --buf-line: #9c7c45; --tip-bg: #3a362f; --tip-text: #f3efe6; --pnl-up: #84b56a; --dds-1: #ecc88a; --dds-2: #d9ad68; --dds-3: #c4944e; --dds-4: #a87a3c; --dds-5: #8a6330; --dds-6: #6b4e2a; --dds-7: #524231; --dds-rest: #4a443b; --dds-in-1: #a3c48c; --dds-in-2: #7f9e6a; --dds-in-3: #5c7650; --fot-1: #f0ddb3; --fot-2: #e0c187; --fot-3: #c48a4a; --fot-4: #b98a4a; --fot-5: #9c703a; --ov-dir-1: #f2d596; --ov-dir-2: #e8bd6a; --ov-dir-3: #dca24a; --ov-dir-4: #c0852e; --ov-dir-5: #9c6a28; --ov-dir-6: #7a5530; --ov-deep: #e8b870; --ov-rest: #5a5246; --plan-hatch: #6b604e; --plan-hatch-bg: #2b2925; --plan-hatch-line: #6b604e; --tax-1: #f0d8a8; --tax-vat: #a87a3c; --tax-contrib: #d9a45a; --tax-hatch-bg: #2b2925; } /* плавная смена темы: общий переход цветов для всех элементов, включая fill/stroke SVG-графиков. Тумблер темы не перерисовывает страницу — меняются только значения переменных, поэтому переход реально анимируется. Класс theme-anim висит на только ~0.5 с после клика (applyTheme в app.js): постоянный переход замедлил бы все наведения в интерфейсе. */ html.theme-anim *, html.theme-anim *::before, html.theme-anim *::after { transition: background-color .4s ease, border-color .4s ease, color .4s ease, fill .4s ease, stroke .4s ease; } * { box-sizing: border-box; } /* атрибут hidden должен прятать элемент даже если классу задан display (например .settings-overlay / .settings-guard с display:flex) */ [hidden] { display: none !important; } body { margin: 0; background: var(--bg); color: var(--text); font-family: "PT Sans", system-ui, sans-serif; -webkit-font-smoothing: antialiased; font-size: 13px; font-weight: 400; } button { font-family: inherit; } /* ---------- Вход ---------- */ .login-wrap { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 20px; } .login-card { width: 100%; max-width: 340px; background: var(--panel); border: 1px solid var(--line); padding: 40px 32px; display: flex; flex-direction: column; gap: 16px; } .login-brand { font-size: 18px; font-weight: 600; letter-spacing: .24em; text-transform: uppercase; text-align: center; } .login-sub { font-size: 12px; color: var(--mut); text-align: center; margin-bottom: 8px; } .field { display: flex; flex-direction: column; gap: 6px; font-size: 12px; color: var(--mut); } .field input { font-family: inherit; font-size: 13px; padding: 10px 12px; border: 1px solid var(--line); background: var(--surface); color: var(--text); } .login-card button { margin-top: 8px; padding: 10px 14px; background: var(--g1); color: var(--on-accent); border: none; cursor: pointer; font-size: 13px; font-weight: 500; } .login-card button:hover { background: var(--g1-hover); } .login-error { min-height: 16px; font-size: 12px; color: var(--warm); text-align: center; line-height: 1.5; } .login-error.info { color: var(--mut); } /* ---------- Демо-доступ (src/demo.js; макет — МАКЕТ-демо-доступ.html) ---------- */ .demo-strip { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 10px; padding: 9px 14px; background: var(--tint); border: 1px solid var(--g3); font-size: 12px; color: var(--text-2); } .demo-strip[hidden] { display: none; } .demo-strip .tag { font-size: 10px; letter-spacing: .12em; text-transform: uppercase; font-weight: 700; color: var(--on-accent); background: var(--g1); padding: 3px 8px; } .demo-strip .sp { flex: 1; } .demo-strip .left { font-size: 11px; color: var(--mut); } /* окно «Изменить режим» на вкладке «Налоговое планирование» */ .tx-regime.has-pop { position: relative; } .tx-pop { position: absolute; right: 0; top: calc(100% + 6px); z-index: 20; width: 420px; max-width: calc(100vw - 32px); padding: 16px; background: var(--surface); border: 1px solid var(--line); box-shadow: 0 8px 24px rgba(0, 0, 0, .14); } .tx-pop h4 { margin: 0 0 12px; font-size: 13px; } .tx-pop .row { margin-bottom: 12px; } .tx-pop .row .l { display: block; font-size: 11px; color: var(--mut); margin-bottom: 6px; } .tx-pop .row .h { font-size: 10.5px; color: var(--mut); margin-top: 5px; } .tx-pop .tx-pill button:disabled { color: var(--faint-strong); cursor: not-allowed; } .tx-pop .err { font-size: 11.5px; color: var(--bad); margin-bottom: 10px; } .tx-pop .acts { display: flex; gap: 8px; justify-content: flex-end; } /* «Настройки → Демо-доступ» */ .demo-card { border: 1px solid var(--line); background: var(--surface); padding: 16px 18px; margin-top: 16px; } .demo-card h3 { margin: 0 0 4px; font-size: 13px; } .demo-card .d { font-size: 11.5px; color: var(--mut); line-height: 1.5; margin-bottom: 12px; } .demo-card .pw-chip { margin-top: 0; } .demo-kv { display: grid; grid-template-columns: 200px 1fr; gap: 6px 14px; font-size: 12px; margin: 10px 0 12px; } .demo-kv .k { color: var(--mut); } .slot-table { width: 100%; border-collapse: collapse; font-size: 12px; } .slot-table th { text-align: left; font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--mut); font-weight: 600; padding: 7px 10px; border-bottom: 1px solid var(--line); } .slot-table td { padding: 9px 10px; border-bottom: 1px solid var(--soft); } .slot-table .free { color: var(--faint-strong); } .slot-dot { display: inline-block; width: 8px; height: 8px; margin-right: 6px; background: var(--ok); } .slot-dot.idle { background: var(--pcwarn); } @media (max-width: 640px) { .demo-kv { grid-template-columns: 1fr; } } .pw-wrap { position: relative; display: flex; } .pw-wrap input { flex: 1; padding-right: 40px; } /* .login-card button задаёт золотую заливку — перебиваем её более точным селектором */ .pw-wrap .pw-eye { position: absolute; right: 1px; top: 1px; bottom: 1px; width: 34px; margin: 0; padding: 0; border: none; background: none; color: var(--mut); cursor: pointer; display: flex; align-items: center; justify-content: center; } .pw-wrap .pw-eye:hover { background: none; color: var(--text); } .pw-wrap .pw-eye svg { width: 16px; height: 16px; } .login-forgot { text-align: center; font-size: 11.5px; } .login-forgot a { cursor: pointer; } /* ---------- Дашборд ---------- */ .app { min-height: 100vh; padding-bottom: 90px; } .page { max-width: 1480px; margin: 0 auto; padding: 0 32px; } .topbar { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 24px 0 20px; flex-wrap: wrap; } .brand-row { display: flex; align-items: baseline; gap: 16px; } .brand-name { font-size: 16px; font-weight: 600; letter-spacing: .24em; text-transform: uppercase; } .period-label { font-size: 11px; color: var(--mut); letter-spacing: .04em; } /* Справочная строка «Данные загружены из …» рядом с периодом (демо-проект) */ .source-note { font-size: 11px; color: var(--text-2); letter-spacing: .04em; } .source-note:empty { display: none; } .source-note::before { content: '· '; color: var(--mut); } .controls { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } /* панель управления в шапке всегда прижата к правому краю, даже когда не помещается в одну строку с названием и переносится под него */ .topbar > .controls { margin-left: auto; justify-content: flex-end; } .control-btn { display: flex; align-items: center; gap: 8px; padding: 9px 14px; background: var(--panel); border: 1px solid var(--line); cursor: pointer; font-size: 12px; font-weight: 500; color: var(--text); } .control-btn:hover { border-color: var(--g2); } .control-btn .arrow { color: var(--mut); font-size: 9px; } .dropdown { position: relative; } .dropdown-panel { position: absolute; top: calc(100% + 6px); right: 0; z-index: 40; background: var(--panel); border: 1px solid var(--line); padding: 10px 0; min-width: 230px; } .dropdown-panel.wide { width: 320px; padding: 14px 16px 16px; } .dir-item { display: flex; align-items: center; gap: 11px; padding: 8px 16px; cursor: pointer; font-size: 12.5px; } .dir-item:hover { background: var(--hover); } .dir-check { width: 15px; height: 15px; border: 1px solid var(--faint); display: flex; align-items: center; justify-content: center; flex: none; font-size: 10px; color: var(--panel); } .dir-check.on { background: var(--g1); border-color: var(--g1); } .dropdown-actions { display: flex; gap: 18px; padding: 8px 16px 2px; border-top: 1px solid var(--line); margin-top: 6px; } .link-btn { font-size: 11px; color: var(--link); cursor: pointer; background: none; border: none; padding: 0; } .link-btn.muted { color: var(--mut); } .link-btn:hover { color: var(--link-hover); } .quick-row { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; } .quick-btn { padding: 7px 11px; font-size: 11.5px; cursor: pointer; border: 1px solid var(--line); color: var(--text); background: var(--surface); } .quick-btn.active { border-color: var(--g1); color: var(--link); } .month-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; } .month-cell { padding: 9px 0; text-align: center; font-size: 11.5px; cursor: pointer; border: 1px solid var(--soft); background: transparent; } .month-cell.selected { background: var(--g1); color: var(--panel); border-color: var(--g1); } /* Сетка месяцев за несколько лет: заголовок над каждым годом; при пяти годах панель прокручивается. Когда в данных один год, заголовков нет и панель выглядит как раньше. */ .grid-scroll { position: relative; max-height: 400px; overflow-y: auto; margin: 0 -6px; padding: 0 6px; } .year-block + .year-block { margin-top: 12px; } .year-head { display: flex; align-items: center; gap: 10px; margin: 0 0 6px; font-size: 11px; color: var(--mut); } .year-head::after { content: ""; flex: 1; height: 1px; background: var(--line); } .year-head b { font-weight: 700; color: var(--text); letter-spacing: .04em; font-size: 12px; } .year-head.has-sel b { color: var(--link); } .year-head .link-btn { order: 3; } .mode-toggle { display: flex; border: 1px solid var(--line); background: var(--panel); } .mode-btn { padding: 9px 15px; cursor: pointer; font-size: 12px; background: transparent; border: none; color: var(--mut); } .mode-btn.active { background: var(--g1); color: var(--panel); font-weight: 500; } /* тумблер темы «☀ / ☾» в шапке — тот же сегментированный переключатель, только с иконками */ .theme-btn { display: flex; align-items: center; justify-content: center; padding: 8px 13px; } .theme-btn svg { width: 15px; height: 15px; display: block; } /* текст, который зависит от темы (например, «светлый/тёмный столбец» в подписи графика) */ :root[data-theme="dark"] .only-light, :root:not([data-theme="dark"]) .only-dark { display: none; } .sync-btn { width: 34px; height: 34px; display: flex; align-items: center; justify-content: center; border: 1px solid var(--line); background: var(--panel); cursor: pointer; color: var(--mut); } .sync-btn:hover { border-color: var(--g2); color: var(--text); } .sync-btn.syncing { animation: spin 1s linear infinite; } .tabs { display: flex; gap: 40px; border-bottom: 1px solid var(--line); } .tab-btn { padding: 17px 0 16px; cursor: pointer; font-size: 13px; letter-spacing: .02em; background: none; border: none; border-bottom: 2px solid transparent; color: var(--mut); max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .tab-btn.active { color: var(--text); font-weight: 600; border-bottom-color: var(--g1); } .help-btn { margin-left: auto; align-self: center; width: 22px; height: 22px; border-radius: 50%; border: 1px solid var(--line); background: none; color: var(--mut); font-size: 12px; cursor: pointer; line-height: 1; } .help-btn:hover { color: var(--text); border-color: var(--g2); } .help-pop-text { font-size: 13px; line-height: 1.6; color: var(--text); } .help-pop-text.mut { color: var(--mut); } .empty-state { padding: 120px 0; text-align: center; } .empty-state .title { font-size: 15px; font-weight: 500; } .empty-state .sub { font-size: 12px; color: var(--mut); margin-top: 10px; } .kpi-row { display: grid; grid-template-columns: repeat(4, 1fr); padding: 30px 0; } .kpi { padding: 0 26px; border-right: 1px solid var(--line); } .kpi:first-child { padding-left: 0; } .kpi:last-child { border-right: none; } .kpi-label { font-size: 10.5px; letter-spacing: .13em; text-transform: uppercase; color: var(--mut); font-weight: 500; } .kpi-value { font-size: 26px; font-weight: 300; margin-top: 12px; font-variant-numeric: tabular-nums; } .kpi-sub { font-size: 11.5px; color: var(--mut); margin-top: 8px; } .content-grid { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); border-top: 1px solid var(--line); } .panel { padding: 28px 40px 32px 0; border-right: 1px solid var(--line); } .panel:last-child { border-right: none; padding: 28px 0 32px 40px; } .panel-title { position: relative; font-size: 10.5px; letter-spacing: .13em; text-transform: uppercase; color: var(--mut); font-weight: 500; margin-bottom: 22px; } .bar-row { margin-bottom: 20px; } .bar-row .bar-top { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 8px; gap: 12px; } .bar-row .bar-name { font-size: 12.5px; font-weight: 500; } .bar-row .bar-val { font-size: 12.5px; font-variant-numeric: tabular-nums; white-space: nowrap; } .bar-track { position: relative; height: 6px; background: var(--soft); } .bar-fill { position: absolute; left: 0; top: 0; height: 100%; background: var(--g1); } .chart-cols { display: flex; align-items: flex-end; gap: 12px; height: 200px; } .chart-col { flex: 1; display: flex; align-items: flex-end; justify-content: center; height: 100%; } .chart-bar { width: 60%; max-width: 34px; background: var(--g1); } .chart-labels { display: flex; gap: 8px; margin-top: 9px; border-top: 1px solid var(--line); padding-top: 9px; } .chart-labels span { flex: 1; text-align: center; font-size: 11px; color: var(--mut); } /* накопительный столбец ФОТ «по периодам»: сегменты по направлениям сверху вниз по алфавиту — светлое направление сверху, тёмное у основания столбца */ .fot-stack { width: 60%; max-width: 34px; display: flex; flex-direction: column; } .fot-seg { width: 100%; min-height: 1px; } /* тонкий светлый разделитель между сегментами (не над верхним) */ .fot-seg:not(:first-child) { border-top: 1px solid rgba(255, 255, 255, 0.55); } /* цветовая легенда направлений под графиком «по периодам» */ .fot-legend { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 12px; font-size: 11px; color: var(--mut); } .fot-legend > span { display: inline-flex; align-items: center; gap: 6px; } .fot-legend-dot { width: 9px; height: 9px; border-radius: 1px; display: inline-block; flex: none; } /* цветная метка направления слева от названия в панели «по направлениям» */ .fot-tick { display: inline-block; width: 3px; height: 13px; border-radius: 1px; margin-right: 9px; vertical-align: -2px; flex: none; } /* собственный фильтр направлений вкладки «Выручка и ФОТ» (чипы, мультивыбор) */ .fot-filter { display: flex; flex-wrap: wrap; gap: 8px; padding: 30px 0 2px; } .fot-chip { display: inline-flex; align-items: center; gap: 7px; padding: 8px 13px; font-size: 12px; cursor: pointer; border: 1px solid var(--line); background: var(--surface); color: var(--mut); } .fot-chip.on { background: var(--g1); border-color: var(--g1); color: var(--panel); font-weight: 500; } .fot-chip-dot { width: 8px; height: 8px; border-radius: 1px; flex: none; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.12); } /* переключатель показателя над блоком графиков «Маркетинга» */ .metric-toggle { display: flex; flex-wrap: wrap; gap: 8px; padding: 30px 0 2px; } .metric-toggle .mode-btn { border: 1px solid var(--line); background: var(--surface); color: var(--mut); } .metric-toggle .mode-btn.active { background: var(--g1); color: var(--panel); border-color: var(--g1); font-weight: 500; } /* ряд переключателей над таблицей ОПиУ («Суммы/Прирост», «К пред. периоду/К прошлому году», «Показать статьи»): отступ переносим сюда с .metric-toggle, чтобы кнопка «Показать статьи» не съезжала — иначе она выравнивалась по центру группы без собственного верхнего отступа */ .pnl-viewbar { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; padding: 30px 0 2px; } .pnl-viewbar .metric-toggle { padding: 0; } /* парные полосы «план / факт» по направлениям */ .bar-group { margin-bottom: 18px; } /* padding-right = ширина колонки значений (.bar-val 96px) + зазор (10px): так «план X · факт Y» выравнивается по правому краю полос, а не по краю панели, и не смешивается визуально с колонкой процентов */ .bar-group-name { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding-right: 106px; font-size: 12.5px; font-weight: 500; margin-bottom: 7px; } .bar-group-note { font-size: 11px; font-weight: 400; color: var(--mut); font-variant-numeric: tabular-nums; white-space: nowrap; } /* 3px, а не 1px: зазор между «план» и «факт» должен стабильно рисоваться во всех группах — при 1px он местами схлопывался и выглядел неодинаково */ .bar-line { display: flex; align-items: center; gap: 10px; margin-bottom: 3px; } .bar-line .bar-tag { flex: none; width: 34px; font-size: 10px; letter-spacing: .06em; text-transform: uppercase; color: var(--mut); } .bar-line .bar-track { flex: 1; height: 16px; } .bar-line .bar-val { flex: none; width: 96px; text-align: right; font-size: 12px; font-variant-numeric: tabular-nums; white-space: nowrap; } .bar-fill.plan { background: var(--g1); } .bar-fill.fact { background: var(--fact); } /* вкладка «Выручка и ФОТ»: один ряд чисел (ФОТ-факт), без пары план/факт */ .bar-fill.fot { background: var(--g1); } /* парные столбцы «план / факт» по периодам: план и факт вплотную, зазор — между месяцами */ .chart-col .col-pair { display: flex; align-items: flex-end; justify-content: center; gap: 1px; width: 100%; max-width: 72px; height: 100%; margin: 0 auto; } .chart-col .col-pair .chart-bar { flex: 1 1 0; min-width: 0; width: auto; max-width: 34px; } .chart-bar.plan { background: var(--g1); } .chart-bar.fact { background: var(--fact); } /* ДДС: пара «приход | расход» в помесячной динамике. Оба столбца составные — .dds-in по видам поступлений (оливковая гамма), .dds-out по статьям расхода (тёплая гамма), теми же сегментами .fot-seg. */ .chart-col .col-pair .dds-in, .chart-col .col-pair .dds-out { background: var(--dds-in); display: flex; flex-direction: column; } .chart-col .col-pair .dds-out { background: transparent; } .net-cols { display: flex; gap: 8px; margin-top: 6px; } .net-cols span { flex: 1; text-align: center; font-size: 10.5px; font-variant-numeric: tabular-nums; color: var(--mut); } .net-cols span.neg { color: var(--warm); } .net-cols span.share { color: var(--g1); } .fot-legend-grp { font-weight: 500; color: var(--text); } /* вкладка «Выручка и ФОТ»: выручка (Bitrix24) рядом с ФОТ (Excel). Полосы «Выручка / ФОТ» по направлениям — золотая и терракотовая (.bar-fill .plan / .fact, как «план / факт» на «Маркетинге»); справа от полос — доля ФОТ в выручке и валовая прибыль в две строки. Столбцы «по периодам» — парные (.col-pair + .chart-bar), как на «ДДС». */ .panel.revfot .bar-group { margin-bottom: 9px; } .panel.revfot .bar-group-name { padding-right: 0; } .panel.revfot .bar-line .bar-tag { width: 62px; text-transform: none; letter-spacing: 0; font-size: 11px; } .panel.revfot .chart-cols { gap: 8px; } .revfot-row { display: flex; align-items: center; gap: 18px; } .revfot-row .revfot-bars { flex: 1; min-width: 0; } .revfot-stat { flex: none; width: 170px; border-left: 1px solid var(--line); padding-left: 16px; } .revfot-stat .s { display: flex; justify-content: space-between; gap: 6px; font-size: 10.5px; color: var(--mut); line-height: 1.9; white-space: nowrap; } .revfot-stat .s b { color: var(--text); font-weight: 500; font-variant-numeric: tabular-nums; } .revfot-stat .s.neg b { color: var(--warm); } @media (max-width: 820px) { .revfot-row { flex-wrap: wrap; } .revfot-stat { width: 100%; border-left: none; border-top: 1px solid var(--line); padding: 8px 0 0; margin-top: 4px; } } /* ДДС: фильтр «Все статьи расходов» — список с суммами и полоса выбранного */ .dropdown-panel.cats { min-width: 360px; max-height: 380px; overflow-y: auto; } .dropdown-panel.cats .dir-item { padding-right: 16px; } .dir-item .dir-sum { margin-left: auto; padding-left: 16px; font-size: 11px; color: var(--mut); font-variant-numeric: tabular-nums; white-space: nowrap; } .dds-selband { display: flex; flex-wrap: wrap; align-items: stretch; border: 1px solid var(--g3); background: var(--tint-soft); margin: 4px 0 2px; } .dds-selband-cell { padding: 14px 24px; border-right: 1px solid var(--g3); } .dds-selband-cell.names { flex: 1; min-width: 200px; } .dds-selband-cell .l { font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--mut); } .dds-selband-cell .v { font-size: 19px; font-weight: 600; margin-top: 6px; } .dds-selband-cell.names .v { font-size: 13px; font-weight: 500; line-height: 1.5; } .dds-selband-clear { align-self: center; margin: 0 16px 0 auto; font-size: 11px; color: var(--link); background: none; border: none; cursor: pointer; } .dds-selband-clear:hover { color: var(--link-hover); } .dds-panel-sub { font-size: 11px; color: var(--mut); margin: -14px 0 20px; } .dds-donut-c1 { font-size: 8.5px; letter-spacing: .1em; text-transform: uppercase; fill: var(--mut); } .dds-donut-c2 { font-size: 17px; font-weight: 600; fill: var(--text); } /* подпись окна сравнения над KPI-блоком «Маркетинга» */ .mkt-cov { font-size: 11.5px; color: var(--mut); padding: 26px 0 0; } .mkt-cov b { color: var(--text); font-weight: 500; } /* мелкий переключатель «% / значения» в заголовке сводной панели */ .allview-toggle { position: absolute; right: 0; top: -6px; display: inline-flex; gap: 4px; } .allview-toggle button { font-size: 10px; padding: 3px 9px; border: 1px solid var(--line); background: var(--surface); color: var(--mut); cursor: pointer; text-transform: none; letter-spacing: 0; } .allview-toggle button.active { background: var(--g1); color: var(--panel); border-color: var(--g1); } /* ---------- вкладка «Продажи» (сделки и воронки из Bitrix24) ---------- */ /* Пончик «Выручка по направлениям» использует классы .dds-donut* (см. ниже). Чипы направлений — .fot-filter/.fot-chip, столбцы «по периодам» — .chart-cols/.fot-stack/.fot-seg, сводная таблица — .data-table.fot-pivot. */ .funnel-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; border-top: 1px solid var(--line); padding-top: 26px; margin-top: 6px; flex-wrap: wrap; } .funnel-head .panel-title { margin: 0; } .funnel-row { margin-bottom: 4px; } .funnel-row .f-top { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; font-size: 12.5px; margin-bottom: 6px; } .funnel-row .f-name { font-weight: 500; } .funnel-row .f-val { color: var(--mut); font-variant-numeric: tabular-nums; white-space: nowrap; } .funnel-track { background: var(--soft); height: 22px; } .funnel-fill { background: var(--g1); height: 100%; } .funnel-fill.won { background: var(--fact); } .funnel-fill.lost { background: var(--ghost); } .funnel-drop { font-size: 10.5px; color: var(--mut); text-align: center; padding: 5px 0; letter-spacing: .04em; } .funnel-conv-track { display: flex; justify-content: center; } .funnel-foot { font-size: 11.5px; color: var(--warm); margin-top: 12px; } .table-wrap { padding: 28px 0 0; overflow-x: auto; } .data-table { width: 100%; border-collapse: collapse; min-width: 760px; } .data-table th { font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--mut); font-weight: 500; text-align: right; padding: 0 10px 12px; border-bottom: 1px solid var(--line); } .data-table th:first-child, .data-table td:first-child { text-align: left; } .data-table td { font-size: 12.5px; text-align: right; padding: 12px 10px; border-bottom: 1px solid var(--soft); font-variant-numeric: tabular-nums; } .data-table tr:hover td { background: var(--hover); } .data-table tfoot td { border-top: 1px solid var(--line); border-bottom: none; font-weight: 500; padding-top: 14px; } /* таблица ФОТ: строка на месяц, колонки — направления */ .data-table.fot-pivot th { vertical-align: bottom; } .data-table.fot-pivot th.dir { min-width: 88px; white-space: normal; line-height: 1.35; } .fot-th-tick { display: block; width: 16px; height: 3px; border-radius: 1px; margin: 0 0 6px auto; } .data-table.fot-pivot td.mut { color: var(--mut); } .data-table.fot-pivot td.col-hl { background: rgba(182, 130, 53, 0.07); } .data-table.fot-pivot tr:hover td.col-hl { background: rgba(182, 130, 53, 0.12); } .top-actions { display: flex; align-items: center; gap: 10px; font-size: 11px; color: var(--mut); } .user-badge { padding: 8px 12px; border: 1px solid var(--line); background: var(--panel); font-size: 11.5px; } .logout-btn { background: none; border: none; color: var(--mut); cursor: pointer; font-size: 11.5px; text-decoration: underline; padding: 0; } /* ---------- Платёжный календарь ---------- */ .value-plan { color: var(--g1); font-weight: 500; } .value-fact { color: var(--fact); font-weight: 500; } .value-fot { color: var(--g1); font-weight: 500; } /* легенда план/факт и сводка «за период» — используются также на «ДДС», «ФОТ», «Маркетинге» */ .legend { display: flex; gap: 20px; align-items: center; font-size: 11.5px; color: var(--mut); margin: 28px 0 10px; flex-wrap: wrap; } .legend .dot { width: 9px; height: 9px; display: inline-block; margin-right: 7px; border-radius: 1px; vertical-align: middle; } .legend .dot.plan { background: var(--g1); } .legend .dot.fact { background: var(--fact); } .legend .dot.fot { background: var(--g1); } .cal-summary { display: flex; gap: 40px; padding: 18px 0 8px; border-top: 1px solid var(--line); margin-top: 4px; flex-wrap: wrap; } .cal-summary .item .label { font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--mut); margin-bottom: 6px; } .cal-summary .item .val { font-size: 18px; font-variant-numeric: tabular-nums; font-weight: 300; } /* строка над содержимым: переключатель «График / Календарь», навигация календаря, буфер */ .pc-viewrow { display: flex; align-items: center; gap: 12px; padding: 20px 0 4px; flex-wrap: wrap; } .pc-viewrow .mode-toggle { background: var(--surface); } .pc-calnav { display: flex; align-items: center; gap: 8px; } .pc-caltitle { font-size: 13px; font-weight: 500; min-width: 150px; text-align: center; } .pc-buf { margin-left: auto; display: inline-flex; align-items: center; gap: 8px; font-size: 11.5px; color: var(--mut); white-space: nowrap; } .pc-buf > span { cursor: help; border-bottom: 1px dotted var(--mut); } .pc-buf input { width: 118px; padding: 8px 10px; border: 1px solid var(--line); background: var(--panel); font-size: 12px; text-align: right; font-variant-numeric: tabular-nums; color: var(--text); } .pc-buf input:focus { outline: none; border-color: var(--g2); } .pc-buf input:disabled { color: var(--mut); background: var(--soft); } /* KPI-ряд платёжного календаря: карточка-статус + 4 показателя */ .kpi-row.pc-kpi-row { grid-template-columns: 1.15fr 1fr 1fr 1fr 1fr; padding: 20px 0 26px; } @media (max-width: 900px) { .kpi-row.pc-kpi-row { grid-template-columns: 1fr 1fr 1fr; } .kpi-row.pc-kpi-row .kpi.pc-status { grid-column: 1 / -1; } } /* строка-шапка над KPI: какой период и где граница факт/план */ .pc-period-cap { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 14px 26px 0; font-size: 12px; color: var(--mut); } .pc-period-cap b { color: var(--text); font-weight: 600; } .pc-period-cap .div { color: var(--line); } .pc-period-cap .fd, .pc-period-cap .pd { display: inline-block; width: 7px; height: 7px; border-radius: 50%; margin-right: 5px; } .pc-period-cap .fd { background: var(--fact); } .pc-period-cap .pd { background: var(--g1); } /* карточки «Поступления»/«Расходы»: сумма разбита на факт и план */ .kpi-split { display: flex; flex-direction: column; gap: 4px; margin-top: 11px; } .kpi-split .row { display: flex; align-items: baseline; gap: 7px; font-variant-numeric: tabular-nums; } .kpi-split .row .dot { width: 6px; height: 6px; border-radius: 50%; flex: none; } .kpi-split .row.fact .dot { background: var(--fact); } .kpi-split .row.plan .dot { background: var(--g1); } .kpi-split .row .lbl { font-size: 10.5px; color: var(--mut); width: 34px; flex: none; } .kpi-split .row .val { font-size: 15px; font-weight: 500; } .kpi-split .total { font-size: 20px; font-weight: 300; margin-top: 2px; padding-top: 7px; border-top: 1px solid var(--line); } .kpi-split .total .n { font-size: 11px; color: var(--mut); font-weight: 400; } /* карточка-статус первой в ряду KPI */ .kpi.pc-status { border-right: none; cursor: pointer; padding: 14px 18px; display: flex; flex-direction: column; justify-content: center; border: 1px solid transparent; } .kpi.pc-status .s-mark { font-size: 10.5px; letter-spacing: .11em; text-transform: uppercase; font-weight: 600; } .kpi.pc-status .s-phrase { font-size: 15px; font-weight: 500; line-height: 1.3; margin-top: 8px; } .kpi.pc-status .s-go { font-size: 11px; margin-top: 9px; opacity: .75; } .kpi.pc-status.s-ok { background: var(--ok-bg); border-color: var(--ok-border); color: var(--ok-text); } .kpi.pc-status.s-warn { background: var(--pcwarn-bg); border-color: var(--pcwarn-border); color: var(--pcwarn-text); } .kpi.pc-status.s-bad { background: var(--bad-bg); border-color: var(--bad-border); color: var(--bad-text); } .kpi.pc-status.s-past { background: var(--soft); border-color: var(--line); color: var(--mut); } .kpi.pc-status:hover { filter: brightness(.98); } /* раннвей */ .pc-rw-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 8px; flex-wrap: wrap; } .pc-rw-title { font-size: 10.5px; letter-spacing: .13em; text-transform: uppercase; color: var(--mut); font-weight: 500; margin-bottom: 4px; } .pc-rw-sub { font-size: 11px; color: var(--mut); } .pc-rw-zoom { display: flex; gap: 6px; flex: none; } .pc-rw-zoom button { border: 1px solid var(--line); background: var(--surface); color: var(--text); cursor: pointer; font-size: 12px; padding: 6px 11px; } .pc-rw-zoom button:hover { border-color: var(--g2); } .pc-rw-zoom button[disabled] { opacity: .4; cursor: default; } .pc-rw-wrap { position: relative; display: flex; align-items: flex-start; } .pc-yax { width: 66px; height: 240px; flex: none; display: block; } .pc-yax text { font-size: 10px; fill: var(--mut); font-variant-numeric: tabular-nums; } .pc-yax line { stroke: var(--line); } .pc-rw-scroll { flex: 1; min-width: 0; height: 240px; overflow: hidden; border: 1px solid var(--soft); background: var(--surface); } .pc-rw-svg { display: block; height: 240px; width: 100%; cursor: grab; } .pc-rw-svg.grabbing { cursor: grabbing; } .pc-rw-svg .grid { stroke: var(--grid); } .pc-rw-svg .buffer { fill: rgba(154, 107, 31, .09); } .pc-rw-svg .below { fill: rgba(154, 52, 35, .14); } .pc-rw-svg .zero { stroke: var(--line); } .pc-rw-svg .bufline { stroke: var(--buf-line); stroke-dasharray: 4 3; } .pc-rw-svg .today { stroke: var(--mut); stroke-dasharray: 2 3; } .pc-rw-svg .factline { stroke: var(--pcwarn); stroke-dasharray: 2 2; } .pc-rw-svg .factlbl { font-size: 9px; fill: var(--pcwarn); } .pc-rw-svg .bk { stroke: var(--grid); } .pc-rw-svg .bklabel { font-size: 10px; fill: var(--mut); } .pc-rw-svg .line-fact { fill: none; stroke: var(--fact); stroke-width: 2; } .pc-rw-svg .line-plan { fill: none; stroke: var(--g1); stroke-width: 2; stroke-dasharray: 5 3; } .pc-rw-svg .mindot { fill: var(--bad); } .pc-rw-svg .minlbl { font-size: 10px; fill: var(--bad); font-weight: 600; } .pc-rw-svg .hline { stroke: var(--g2); } .pc-rw-svg .hdot { fill: var(--g1); } .pc-rw-tip { position: absolute; z-index: 20; pointer-events: none; background: var(--tip-bg); color: var(--tip-text); font-size: 11px; line-height: 1.55; padding: 8px 11px; border-radius: 2px; box-shadow: 0 4px 14px rgba(0, 0, 0, .22); white-space: nowrap; } .pc-rw-tip b { color: #fff; font-weight: 600; } .pc-rw-tip .r { color: #d9cbb2; } .pc-rw-tip .neg { color: #f0a58f; } .pc-legend { display: flex; gap: 18px; align-items: center; font-size: 11px; color: var(--mut); margin-top: 10px; flex-wrap: wrap; } .pc-legend .solid { display: inline-block; width: 14px; border-top: 2px solid var(--fact); margin-right: 6px; vertical-align: middle; } .pc-legend .dash { display: inline-block; width: 14px; border-top: 2px dashed var(--g1); margin-right: 6px; vertical-align: middle; } .pc-legend .sw { display: inline-block; width: 12px; height: 10px; margin-right: 6px; vertical-align: middle; } /* таблица по бакетам */ .pc-bk-table { width: 100%; border-collapse: collapse; margin-top: 24px; } .pc-bk-table th { font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--mut); font-weight: 500; text-align: right; padding: 0 12px 12px; border-bottom: 1px solid var(--line); } .pc-bk-table th:first-child { text-align: left; } .pc-bk-table td { font-size: 12.5px; text-align: right; padding: 9px 12px; border-bottom: 1px solid var(--soft); font-variant-numeric: tabular-nums; } .pc-bk-table td:first-child { text-align: left; } .pc-bk-table tr.row { cursor: pointer; } .pc-bk-table tr.row:hover td { background: var(--hover); } .pc-bk-table tr.lvl1 td:first-child { padding-left: 30px; } .pc-bk-table tr.lvl2 td:first-child { padding-left: 50px; } .pc-bk-table tr.lvl2 td { color: var(--text-2); } .pc-bk-table tr.pay td { background: var(--muted-bg); font-size: 12px; color: var(--text-2); cursor: default; } .pc-bk-table tr.pay td:first-child { padding-left: 70px; } .pc-bk-table tr.red > td { background: var(--bad-soft); } .pc-bk-table tr.red.row:hover > td { background: var(--bad-bg); } .pc-bk-table tr.amber > td { background: var(--pcwarn-bg); } .pc-bk-table tr.flash > td { animation: pcflash 1.6s ease; } @keyframes pcflash { 0%,100% { background: transparent; } 15%,50% { background: var(--pcwarn-flash); } } .pc-caret { display: inline-block; width: 12px; color: var(--mut); font-size: 9px; } .pc-st { display: inline-block; width: 9px; height: 9px; border-radius: 50%; } .pc-st.g { background: var(--ok); } .pc-st.a { background: var(--pcwarn); } .pc-st.r { background: var(--bad); } .pc-t-in { color: var(--in); } .pc-t-out { color: var(--fact); } .pc-neg { color: var(--bad); font-weight: 500; } .pc-bk-table td.stcell { cursor: help; } /* нижний раздел «Подробности» */ .pc-details { margin-top: 26px; border-top: 1px solid var(--line); } .pc-details-head { width: 100%; text-align: left; background: none; border: none; cursor: pointer; padding: 16px 0 14px; font-size: 10.5px; letter-spacing: .13em; text-transform: uppercase; color: var(--mut); font-weight: 600; display: flex; align-items: center; gap: 8px; } .pc-details-head:hover { color: var(--text); } .pc-details-body { padding-bottom: 20px; } .pc-d-summary { font-size: 12.5px; line-height: 1.7; color: var(--text); } .pc-d-summary b { font-weight: 600; } .pc-d-summary .lnk { color: var(--g1); cursor: pointer; border-bottom: 1px dotted var(--g1); } .pc-gap { border-left: 3px solid var(--bad); background: var(--bad-soft); padding: 12px 16px; margin-bottom: 10px; cursor: pointer; } .pc-gap:hover { background: var(--bad-bg); } .pc-gap .g1 { font-size: 13px; font-weight: 500; color: var(--bad-text); } .pc-gap .g2 { font-size: 11.5px; color: var(--mut); margin-top: 5px; line-height: 1.6; } /* вид «Календарь» */ .pc-cal-wd { display: grid; grid-template-columns: repeat(7, 1fr); gap: 1px; margin-top: 14px; } .pc-cal-wd span { text-align: center; font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--mut); padding-bottom: 8px; } .pc-cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); } .pc-cal-day { background: var(--panel); min-height: 92px; padding: 8px; display: flex; flex-direction: column; gap: 3px; position: relative; } .pc-cal-day.outside { opacity: .4; } .pc-cal-day.past { background: var(--muted-bg); } .pc-cal-day.pending { background: repeating-linear-gradient(45deg, var(--muted-bg), var(--muted-bg) 5px, var(--tint-strong) 5px, var(--tint-strong) 7px); cursor: help; } .pc-cal-day.pending .pc-cal-badge { color: var(--pcwarn); } .pc-cal-day.today .pc-cal-num { color: var(--g1); font-weight: 700; } .pc-cal-day.below { box-shadow: inset 0 0 0 2px rgba(154, 52, 35, .35); } .pc-cal-num { font-size: 12px; } .pc-cal-in { font-size: 11px; color: var(--in); font-weight: 500; font-variant-numeric: tabular-nums; } .pc-cal-out { font-size: 11px; color: var(--fact); font-weight: 500; font-variant-numeric: tabular-nums; } .pc-cal-bal { font-size: 10px; color: var(--mut); margin-top: auto; font-variant-numeric: tabular-nums; } .pc-cal-bal.neg { color: var(--bad); } .pc-cal-badge { position: absolute; top: 6px; right: 7px; font-size: 8.5px; letter-spacing: .04em; text-transform: uppercase; color: var(--mut); } .pc-cal-legend { font-size: 11px; color: var(--mut); margin-top: 12px; } /* общий тултип по data-tip */ .pc-tip { position: fixed; z-index: 60; pointer-events: none; background: var(--tip-bg); color: var(--tip-text); font-size: 11px; line-height: 1.5; padding: 8px 11px; border-radius: 2px; box-shadow: 0 4px 14px rgba(0, 0, 0, .22); max-width: 280px; } /* ---------- вкладка «ДДС»: пончик структуры расходов ---------- */ .dds-donut { display: flex; align-items: center; gap: 26px; flex-wrap: wrap; } .dds-donut-svg { width: 176px; height: 176px; flex: none; } .dds-legend { flex: 1; min-width: 220px; display: flex; flex-direction: column; gap: 10px; } .dds-legend-row { display: grid; grid-template-columns: 10px minmax(0, 1fr) auto auto auto; align-items: center; column-gap: 12px; font-size: 12px; } .dds-legend-dot { width: 9px; height: 9px; border-radius: 1px; } .dds-legend-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .dds-legend-val { color: var(--mut); font-variant-numeric: tabular-nums; } .dds-legend-pct { color: var(--mut); font-variant-numeric: tabular-nums; min-width: 46px; text-align: right; } .dds-legend-drill { border: none; background: none; padding: 2px; cursor: pointer; display: inline-flex; color: var(--mut); } .dds-legend-drill:hover { color: var(--link); } .dds-legend-drill-ph { display: inline-block; width: 16px; height: 16px; } @keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } @media (max-width: 720px) { .kpi-row { grid-template-columns: repeat(2, 1fr); row-gap: 20px; } .kpi { border-right: none; padding: 0 12px; } .content-grid { grid-template-columns: 1fr; } .panel, .panel:last-child { padding: 24px 0; border-right: none; border-bottom: 1px solid var(--line); } } /* ---------- Экран «Настройки» (значения из .env + пользователи) ---------- */ /* Раньше было всплывающее окно; теперь — восьмой внутренний экран: та же общая шапка, строка вкладок скрыта, слева список разделов. */ #settingsBtn svg { width: 16px; height: 16px; display: block; } .set-top { padding: 16px 0 12px; } .set-back { display: inline-flex; align-items: center; gap: 7px; border: none; background: none; padding: 0; cursor: pointer; font: inherit; font-size: 12px; color: var(--link); } .set-back:hover { color: var(--link-hover); } .settings-guard { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 12px 16px; margin-bottom: 12px; background: var(--tint); border: 1px solid var(--g3); font-size: 12px; color: var(--warm); } .settings-guard b { font-weight: 600; } .settings-guard-sp { flex: 1; } .settings-guard button { padding: 6px 11px; font-size: 11.5px; border: 1px solid var(--g2); background: var(--surface); color: var(--text); cursor: pointer; } .settings-guard button.stay { background: var(--g1); color: var(--on-accent); border-color: var(--g1); } .set-shell { display: grid; grid-template-columns: 212px 1fr; border: 1px solid var(--line); background: var(--panel); box-shadow: 0 24px 60px -20px rgba(32, 31, 29, .14); min-height: 520px; } .set-nav { border-right: 1px solid var(--line); padding: 14px 0; } .set-nav-h { font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: var(--mut); font-weight: 600; padding: 6px 20px 10px; } .set-nav button { display: block; width: 100%; text-align: left; padding: 10px 20px; border: none; border-left: 2px solid transparent; background: none; font: inherit; font-size: 12.5px; color: var(--text); cursor: pointer; } .set-nav button:hover { background: var(--tint); } .set-nav button.on { border-left-color: var(--g1); background: var(--tint); font-weight: 600; } .set-pane { padding: 24px 28px 30px; min-width: 0; } .set-pane h2 { font-size: 16px; font-weight: 600; margin: 2px 0 4px; } .set-pane h3 { font-size: 12.5px; font-weight: 600; margin: 0 0 14px; } .set-lead { font-size: 11.5px; color: var(--mut); line-height: 1.55; margin-bottom: 20px; max-width: 560px; } .set-pane .settings-body { padding: 0; } .settings-body { overflow-y: auto; } .settings-loading { padding: 30px 0; text-align: center; color: var(--mut); font-size: 12px; } @media (max-width: 720px) { .set-shell { grid-template-columns: 1fr; } .set-nav { border-right: none; border-bottom: 1px solid var(--line); } .set-nav button { border-left: none; border-bottom: 2px solid transparent; } .set-nav button.on { border-left: none; border-bottom-color: var(--g1); } } /* --- раздел «Пользователи» --- */ .usr-table { width: 100%; border-collapse: collapse; margin-bottom: 8px; font-size: 12px; } .usr-table th { text-align: left; font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--mut); font-weight: 600; padding: 8px 10px; border-bottom: 1px solid var(--line); } .usr-table td { padding: 11px 10px; border-bottom: 1px solid var(--soft); vertical-align: top; } .usr-email { font-weight: 500; } .usr-sub { font-size: 10.5px; color: var(--mut); margin-top: 3px; } .role-pill { display: inline-block; font-size: 10px; letter-spacing: .04em; padding: 3px 8px; border: 1px solid var(--line); background: var(--surface); color: var(--mut); } .role-pill.admin { border-color: var(--g2); background: var(--tint); color: var(--g1); } .role-pill.editor { border-color: var(--ok-border); background: var(--ok-bg); color: var(--ok); } .usr-actions { display: flex; gap: 6px; flex-wrap: wrap; } .mini-btn { font: inherit; font-size: 11px; padding: 6px 10px; border: 1px solid var(--line); background: var(--surface); color: var(--text); cursor: pointer; } .mini-btn:hover { border-color: var(--g2); } .mini-btn.danger { color: var(--bad); } .mini-btn.danger:hover { border-color: var(--bad); background: var(--bad-bg); } .mini-btn:disabled { opacity: .4; cursor: not-allowed; } .usr-edit { background: var(--tint-soft); } .usr-edit .usr-email { margin-bottom: 10px; } .usr-edit-actions { display: flex; gap: 8px; margin-top: 14px; } .pw-chip { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 14px 0 6px; padding: 12px 14px; background: var(--tint); border: 1px solid var(--g3); } .pw-chip .lbl { font-size: 11px; color: var(--warm); } .pw-chip code { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 14px; letter-spacing: .12em; background: var(--surface); border: 1px solid var(--g3); padding: 4px 10px; color: var(--text); } .pw-chip button { font: inherit; font-size: 11px; padding: 5px 10px; border: 1px solid var(--g2); background: var(--surface); cursor: pointer; } .pw-chip .pw-done { font-size: 11px; color: var(--ok); } .add-box { margin-top: 22px; border: 1px solid var(--line); background: var(--surface); padding: 18px 18px 20px; max-width: 620px; } .add-row { display: flex; gap: 14px; flex-wrap: wrap; align-items: flex-end; } .add-row label { display: flex; flex-direction: column; gap: 5px; font-size: 11px; color: var(--mut); } .add-row input, .add-row select { font: inherit; font-size: 12.5px; padding: 8px 10px; border: 1px solid var(--line); background: var(--surface); color: var(--text); min-width: 200px; } .add-row input:focus, .add-row select:focus { outline: none; border-color: var(--g2); } .add-btn { padding: 9px 16px; background: var(--g1); color: var(--on-accent); border: none; font: inherit; font-size: 12.5px; font-weight: 500; cursor: pointer; } .add-btn:hover { background: var(--g1-hover); } .add-btn:disabled { opacity: .5; cursor: default; } .sec-pick { margin-top: 16px; } .sec-pick .cap { font-size: 11px; color: var(--mut); margin-bottom: 8px; } .sec-note { font-size: 10.5px; color: var(--mut); margin-top: 10px; } .sec-grid { display: flex; flex-wrap: wrap; gap: 10px 20px; } .sec-grid label { display: flex; flex-direction: row; align-items: center; gap: 9px; font-size: 12px; color: var(--text); cursor: pointer; } /* Флаги доступа к разделам — в виде переключателей (тумблеров). Разметка остаётся , меняется только вид. Скоуп — только .sec-grid. */ .sec-grid input[type="checkbox"] { appearance: none; -webkit-appearance: none; margin: 0; flex: none; position: relative; width: 34px; height: 18px; border-radius: 999px; background: var(--line); border: 1px solid var(--line); cursor: pointer; transition: background .15s, border-color .15s; } .sec-grid input[type="checkbox"]::after { content: ""; position: absolute; top: 1px; left: 1px; width: 14px; height: 14px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(32, 31, 29, .25); transition: transform .15s; } .sec-grid input[type="checkbox"]:checked { background: var(--g1); border-color: var(--g1); } .sec-grid input[type="checkbox"]:checked::after { transform: translateX(16px); } .sec-grid input[type="checkbox"]:focus-visible { outline: 2px solid var(--g2); outline-offset: 2px; } .hint { font-size: 10.5px; color: var(--mut); margin-top: 10px; line-height: 1.5; } .usr-err { font-size: 11.5px; color: var(--bad); background: var(--bad-bg); border: 1px solid var(--bad-border); padding: 8px 10px; margin-bottom: 12px; } .st-row { padding: 16px 0; border-bottom: 1px solid var(--soft); } .st-row:last-child { border-bottom: none; } .st-label { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; margin-bottom: 9px; } .st-name { font-size: 12.5px; font-weight: 600; letter-spacing: .01em; } .st-info { position: relative; width: 15px; height: 15px; flex: none; border: 1px solid var(--faint); border-radius: 50%; color: var(--mut); font-size: 10px; display: flex; align-items: center; justify-content: center; cursor: help; font-family: Georgia, "Times New Roman", serif; font-style: italic; } .st-info:hover, .st-info:focus-visible { border-color: var(--g1); color: var(--g1); outline: none; } .st-tip { position: absolute; top: calc(100% + 8px); left: -6px; width: 270px; background: var(--tip-bg); color: var(--tip-text); font-size: 11.5px; line-height: 1.5; padding: 10px 12px; letter-spacing: .01em; z-index: 5; font-family: "PT Sans", sans-serif; font-style: normal; font-weight: 400; opacity: 0; visibility: hidden; transform: translateY(-3px); transition: opacity .13s, transform .13s; } .st-tip::before { content: ""; position: absolute; bottom: 100%; left: 10px; border: 6px solid transparent; border-bottom-color: var(--tip-bg); } .st-info:hover .st-tip, .st-info:focus-visible .st-tip { opacity: 1; visibility: visible; transform: translateY(0); } .st-row:nth-last-child(-n+2) .st-tip { top: auto; bottom: calc(100% + 8px); } .st-row:nth-last-child(-n+2) .st-tip::before { bottom: auto; top: 100%; border-bottom-color: transparent; border-top-color: var(--tip-bg); } .st-tag { font-size: 9.5px; letter-spacing: .07em; text-transform: uppercase; font-weight: 600; padding: 2px 6px; border: 1px solid var(--g3); color: var(--g1); background: var(--tint); } .st-tag.changed { border-color: var(--warm); color: var(--warm); background: var(--bad-soft); } .st-control { display: flex; align-items: stretch; gap: 8px; } .st-val { flex: 1; min-width: 0; font-size: 12px; letter-spacing: .02em; font-family: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace; padding: 9px 11px; border: 1px solid var(--line); background: var(--surface); color: var(--text); } .st-val:read-only { background: var(--muted-bg); color: var(--mut); cursor: default; } .st-val.empty { font-family: "PT Sans", sans-serif; font-style: italic; color: var(--faint-strong); } .st-val:focus { outline: none; border-color: var(--g2); } .st-eye { width: 36px; flex: none; border: 1px solid var(--line); background: var(--surface); color: var(--mut); cursor: pointer; display: flex; align-items: center; justify-content: center; } .st-eye:hover { border-color: var(--g2); color: var(--text); } .st-eye svg { width: 16px; height: 16px; } .st-save { flex: none; padding: 0 15px; font-size: 11.5px; font-weight: 500; border: 1px solid var(--g1); background: var(--g1); color: var(--on-accent); cursor: pointer; } .st-save:disabled { background: var(--soft); border-color: var(--line); color: var(--faint-strong); cursor: default; } .st-save.saved { background: var(--saved); border-color: var(--saved); } .st-foot-row { display: flex; align-items: center; gap: 14px; margin-top: 8px; min-height: 14px; } .help-row { padding: 16px 0; border-bottom: 1px solid var(--soft); } .help-row:last-child { border-bottom: none; } .help-row-h { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; } .help-row-name { font-size: 12.5px; font-weight: 600; letter-spacing: .01em; margin-right: auto; } .help-bold-btn { width: 28px; height: 28px; border: 1px solid var(--line); background: var(--surface); color: var(--text); cursor: pointer; font-size: 12px; } .help-bold-btn:hover { border-color: var(--g2); } .help-row-h .st-save { padding: 7px 15px; } .help-saved-msg { font-size: 11px; color: var(--saved); } .help-textarea { width: 100%; min-height: 78px; font-family: inherit; font-size: 12.5px; line-height: 1.55; padding: 9px 11px; border: 1px solid var(--line); background: var(--surface); color: var(--text); resize: vertical; } .help-textarea:focus { outline: none; border-color: var(--g2); } .st-undo { background: none; border: none; padding: 0; font-size: 11px; color: var(--link); text-decoration: underline; cursor: pointer; } .st-msg { font-size: 11px; color: var(--saved); opacity: 0; transition: opacity .15s; } .st-msg.show { opacity: 1; } .st-note { font-size: 10.5px; color: var(--mut); } .settings-foot { padding: 14px 24px 18px; border-top: 1px solid var(--line); font-size: 11px; color: var(--mut); line-height: 1.5; } .settings-foot b { color: var(--text); font-weight: 600; } .tab-rows { max-width: 620px; border-top: 1px solid var(--soft); } .tab-row { display: flex; align-items: center; gap: 14px; padding: 13px 2px; border-bottom: 1px solid var(--soft); } .tab-row-name { flex: 1; min-width: 0; display: flex; align-items: center; gap: 9px; font-size: 13px; } .tab-row.disabled .tab-row-name { color: var(--mut); } .tab-row-who { font-size: 10.5px; color: var(--mut); } .tab-row-status { font-size: 11px; color: var(--mut); width: 74px; flex: none; } .tab-row-status.on { color: var(--saved); } .tab-row-saved { font-size: 10.5px; color: var(--saved); width: 66px; flex: none; opacity: 0; transition: opacity .25s; } .tab-row-saved.show { opacity: 1; } .tab-row-dragging { opacity: .45; } .tab-row.tab-drop-before { box-shadow: inset 0 2px 0 0 var(--g1); } .tab-row.tab-drop-after { box-shadow: inset 0 -2px 0 0 var(--g1); } .tab-row-editing { flex-wrap: wrap; } .tab-row-name-edit { flex: 1; min-width: 220px; display: flex; align-items: center; gap: 8px; } .tab-row-input { font: inherit; font-size: 12.5px; padding: 7px 9px; border: 1px solid var(--line); background: var(--surface); color: var(--text); width: 180px; } .tab-row-input:focus { outline: none; border-color: var(--g2); } .tab-row-hint { flex-basis: 100%; font-size: 11px; color: var(--mut); padding-left: 26px; } .switch { position: relative; display: inline-block; width: 34px; height: 19px; flex: none; } .switch input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; } .switch .track { position: absolute; inset: 0; background: var(--soft); border: 1px solid var(--line); transition: background .15s, border-color .15s; } .switch .thumb { position: absolute; top: 2px; left: 2px; width: 13px; height: 13px; background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.25); transition: transform .15s; } .switch input:checked + .track { background: var(--g1); border-color: var(--g1); } .switch input:checked + .track .thumb { transform: translateX(15px); } .switch input:focus-visible + .track { outline: 2px solid var(--g2); outline-offset: 2px; } .settings-toast { position: fixed; left: 50%; bottom: 26px; transform: translateX(-50%) translateY(12px); background: var(--tip-bg); color: var(--tip-text); font-size: 12px; padding: 11px 18px; opacity: 0; transition: opacity .2s, transform .2s; z-index: 200; pointer-events: none; max-width: 90vw; } .settings-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); } /* ---------- Вкладка «ОПиУ» (отчёт о прибылях и убытках) ---------- */ /* Зелёный тон прироста и терракотовый убытка — в тёплой гамме «Наш проект». */ :root { --pnl-up: #4f7a3f; } .pnl-up { color: var(--pnl-up); } .pnl-down { color: var(--warm); } .pnl-flat { color: var(--mut); } /* пометка у сравнения с прошлым годом, когда в периоде есть незаконченный месяц */ .kpi-note { color: var(--pcwarn); cursor: help; border-bottom: 1px dotted var(--pcwarn); } .pnl-neg { color: var(--warm); } .kpi-value.pnl-neg { color: var(--warm); } /* каскад во времени */ .data-table.pnl-table { min-width: 640px; } .data-table.pnl-table td.pnl-in { padding-left: 26px; color: var(--mut); } /* разворот ОПиУ до статей: кнопка «+/−», строки статей и подразделов */ .pnl-pm { display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px; margin-right: 7px; padding: 0; border: 1px solid var(--g3); background: var(--surface); color: var(--link); font-size: 12px; font-weight: 700; line-height: 1; cursor: pointer; vertical-align: middle; } .pnl-pm:hover { border-color: var(--g1); } .pnl-pm-gap { display: inline-block; width: 16px; margin-right: 7px; } .data-table.pnl-table tr.pnl-art td { background: var(--tint-soft); font-size: 11.5px; color: var(--text); } .data-table.pnl-table tr.pnl-art.pnl-artgrp td { background: var(--tint-soft); font-weight: 600; } .data-table.pnl-table td.pnl-a1 { padding-left: 44px; } .data-table.pnl-table td.pnl-a2 { padding-left: 68px; } .data-table.pnl-table td.pnl-a3 { padding-left: 92px; } .data-table.pnl-table tr.pnl-unk td:first-child { font-style: italic; color: var(--mut); } .pnl-unk-hint { margin-left: 8px; font-size: 10px; font-style: normal; color: var(--mut); } .data-table.pnl-table tr.pnl-sub td { font-weight: 600; color: var(--text); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: rgba(182, 130, 53, 0.06); } .data-table.pnl-table tr.pnl-sub.pnl-net td { background: rgba(182, 130, 53, 0.13); } .data-table.pnl-table td.pnl-total-col, .data-table.pnl-table th.pnl-total-col { border-left: 1px solid var(--line); font-weight: 500; } /* заголовок-обёртка блока (Косвенные расходы / Ниже EBITDA) */ .data-table.pnl-table tr.pnl-group td { font-weight: 600; color: var(--text); border-top: 1px solid var(--line); background: rgba(182, 130, 53, 0.03); letter-spacing: .02em; } /* строка рентабельности к выручке — мелкая, приглушённая */ .data-table.pnl-table tr.pnl-pct td { font-size: 11px; color: var(--mut); } .data-table.pnl-table tr.pnl-pct td:first-child { font-style: italic; } .pnl-dp { display: block; font-size: 10px; color: var(--mut); margin-top: 2px; } /* KPI-ряд вкладки «ОПиУ» — пять карточек */ .kpi-row.pnl-kpi-row { grid-template-columns: repeat(5, 1fr); } @media (max-width: 900px) { .kpi-row.pnl-kpi-row { grid-template-columns: repeat(3, 1fr); row-gap: 20px; } } /* столбцы «уровень по периодам» */ .pnl-col-wrap { flex: 1; display: flex; align-items: flex-end; justify-content: center; height: 100%; } .pnl-col { width: 58%; max-width: 30px; background: var(--g1); min-height: 1px; } .pnl-col.loss { background: var(--warm); opacity: .55; } /* «год назад» рядом с основным столбцом: два тонких столбца вместо одного */ .pnl-col-wrap.pair { gap: 2px; } .pnl-col-wrap.pair .pnl-col { width: 34%; max-width: 20px; } .pnl-col.ghost { background: var(--ghost); opacity: 1; } /* «год назад» на графиках с парными и составными столбцами: тонкая серая черта на высоте прошлогоднего значения */ .chart-col, .chart-col .col-pair { position: relative; } .yoy-tick { position: absolute; height: 0; border-top: 2px solid var(--mut); pointer-events: auto; z-index: 2; } .pnl-col-labels { display: flex; gap: 8px; margin-top: 9px; border-top: 1px solid var(--line); padding-top: 9px; } .pnl-col-labels > span { flex: 1; text-align: center; font-size: 10.5px; color: var(--mut); line-height: 1.45; } .pnl-col-labels > span > span { display: block; } /* «за счёт чего изменилась прибыль» — вклад видов */ .pnl-contrib-head { font-size: 11.5px; color: var(--mut); margin-bottom: 14px; line-height: 1.5; } .pnl-contrib-head b { color: var(--text); font-weight: 500; } .pnl-contrib-row { display: grid; grid-template-columns: 160px 1fr 110px; align-items: center; column-gap: 10px; font-size: 12px; margin-bottom: 7px; } .pnl-contrib-name { color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .pnl-contrib-track { position: relative; height: 14px; background: linear-gradient(var(--soft), var(--soft)) center / 1px 100% no-repeat; } .pnl-contrib-bar { position: absolute; top: 0; height: 100%; } .pnl-contrib-bar.pos { left: 50%; background: var(--pnl-up); } .pnl-contrib-bar.neg { right: 50%; background: var(--warm); } .pnl-contrib-val { text-align: right; font-variant-numeric: tabular-nums; } .pnl-contrib-total { display: flex; justify-content: space-between; font-weight: 600; font-size: 12.5px; border-top: 1px solid var(--line); margin-top: 12px; padding-top: 11px; } /* разрез по направлениям */ .pnl-dir-row { margin-bottom: 15px; } .pnl-dir-top { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; font-size: 12.5px; margin-bottom: 6px; } .pnl-dir-name { font-weight: 500; display: flex; align-items: center; gap: 8px; } .pnl-dir-tick { width: 3px; height: 12px; border-radius: 1px; flex: none; } .pnl-dir-val { color: var(--mut); font-variant-numeric: tabular-nums; white-space: nowrap; } .pnl-dir-bar { position: relative; height: 15px; background: var(--soft); } .pnl-dir-fill { position: absolute; left: 0; top: 0; height: 100%; background: var(--g1); } .pnl-dir-fill.loss { background: var(--warm); } .pnl-dir-foot { display: flex; justify-content: space-between; font-size: 12.5px; font-weight: 600; border-top: 1px solid var(--line); margin-top: 6px; padding-top: 12px; } /* ---------- Вкладка «Плановые данные» (бюджетная матрица) ---------- */ .control-btn.primary { background: var(--g1); border-color: var(--g1); color: var(--on-accent); } .control-btn.primary:hover { background: var(--g1-hover); border-color: var(--g1-hover); } .ref-export-btn { text-decoration: none; } .pl-intro { font-size: 12.5px; color: var(--mut); line-height: 1.7; padding: 26px 0 4px; max-width: 820px; } .pl-toolrow { display: flex; align-items: center; gap: 12px; padding: 16px 0 6px; flex-wrap: wrap; } .pl-yearnav { display: inline-flex; align-items: center; gap: 4px; } .pl-yearnav .control-btn { padding: 7px 12px; } .pl-year { min-width: 66px; text-align: center; font-size: 13px; font-weight: 600; } .pl-hint { font-size: 11px; color: var(--mut); } /* Сама обёртка — прокручиваемая область ограниченной высоты (а не просто overflow-x): position: sticky у шапки/первого столбца считается относительно ближайшего контейнера прокрутки. Раз overflow-x: auto и так делает эту обёртку таким контейнером, прилипание к странице (без своей высоты) не работает — оно должно прилипать здесь, к верху этой же прокручиваемой области. */ .pl-mx-wrap { margin-top: 12px; border: 1px solid var(--line); overflow: auto; max-height: 70vh; background: var(--panel); } table.pl-mx { border-collapse: collapse; width: 100%; min-width: 1120px; } table.pl-mx th, table.pl-mx td { font-size: 12px; padding: 8px 10px; border-bottom: 1px solid var(--soft); text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; } table.pl-mx thead th { position: sticky; top: 0; background: var(--hover); z-index: 3; font-size: 10px; letter-spacing: .06em; text-transform: uppercase; color: var(--mut); font-weight: 600; border-bottom: 1px solid var(--line); } table.pl-mx th.c0, table.pl-mx td.c0 { text-align: left; position: sticky; left: 0; background: var(--panel); z-index: 2; min-width: 250px; max-width: 250px; white-space: normal; } table.pl-mx thead th.c0 { z-index: 4; background: var(--hover); } table.pl-mx td.pl-yr, table.pl-mx th.pl-yr { border-left: 1px solid var(--line); font-weight: 600; } table.pl-mx td.z { color: var(--faint); } table.pl-mx td.pl-cell { cursor: pointer; } table.pl-mx td.pl-cell:hover { background: var(--tint-strong); box-shadow: inset 0 0 0 1px var(--g3); } table.pl-mx td.pl-cell-past { color: var(--mut); background: var(--muted-bg); } table.pl-mx td.pl-cell-past:hover { background: var(--hover); box-shadow: none; } table.pl-mx tr.pl-sec td { background: var(--tint-strong); font-weight: 600; color: var(--text); border-top: 1px solid var(--line); } table.pl-mx tr.pl-parent td.c0 { font-weight: 600; } table.pl-mx tr.pl-total td { border-top: 2px solid var(--line); font-weight: 700; background: var(--muted-bg); } .pl-tw { display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px; flex: none; margin-right: 2px; border: 1px solid var(--g3); background: var(--surface); color: var(--link); font-size: 12px; font-weight: 700; line-height: 1; cursor: pointer; user-select: none; } .pl-tw:hover { border-color: var(--g1); } .pl-tw-empty { visibility: hidden; cursor: default; } .pl-grip { display: inline-block; width: 12px; color: var(--faint); font-size: 12px; line-height: 1; cursor: grab; user-select: none; } .pl-grip:active { cursor: grabbing; } /* «подраздел» в матрице — итоговая строка по вложенным статьям, без клика по ячейкам */ table.pl-mx tr.pl-group td { background: var(--tint-soft); font-weight: 600; } table.pl-mx tr.pl-group td.c0 { background: var(--tint-soft); } table.pl-mx td.pl-gcell { cursor: default; } table.pl-mx tr.pl-sec-empty td { color: var(--mut); font-weight: 500; } .pl-c0 { display: flex; align-items: center; gap: 5px; } .pl-lvl1 .pl-c0 { padding-left: 16px; } .pl-lvl2 .pl-c0 { padding-left: 34px; } .pl-lvl3 .pl-c0 { padding-left: 52px; } .pl-fdot { width: 7px; height: 7px; border-radius: 1px; flex: none; } .pl-fdot.o { background: var(--fact); } .pl-fdot.i { background: var(--in); } .pl-arch { font-size: 9.5px; letter-spacing: .05em; text-transform: uppercase; color: var(--mut); border: 1px solid var(--line); padding: 1px 5px; } .pl-cname { border-bottom: 1px dotted var(--mut); cursor: help; } .pl-sec-cap { font-size: 9px; letter-spacing: .04em; text-transform: uppercase; color: var(--mut); font-weight: 600; } /* название раздела в матрице — кликается, «проваливается» в карточку раздела */ .pl-secname { cursor: pointer; border-bottom: 1px dashed transparent; } .pl-secname:hover { border-bottom-color: var(--g2); } .pl-secchev { color: var(--mut); font-size: 9px; margin-left: 6px; } table.pl-mx tr.pl-sec-ind td.c0 .pl-secname { margin-left: 14px; } /* заголовок блока каскада (Косвенные расходы / Ниже EBITDA / Вне ОПиУ) */ table.pl-mx tr.pl-block td { background: var(--block-bg); font-weight: 700; color: var(--text); border-top: 2px solid var(--g2); text-transform: uppercase; letter-spacing: .05em; font-size: 10.5px; } table.pl-mx tr.pl-block td.c0 { background: var(--block-bg); } /* строка подытога прибыли */ table.pl-mx tr.pl-subtotal td { border-top: 1px solid var(--g2); border-bottom: 1px solid var(--g2); font-weight: 700; background: rgba(182, 130, 53, .10); } table.pl-mx tr.pl-subtotal td.c0 { background: rgba(182, 130, 53, .10); } table.pl-mx td.pl-neg { color: var(--warm); } /* карточка раздела ОПиУ */ .pl-sec-meta { font-size: 11.5px; color: var(--mut); margin: 2px 0 14px; } .pl-radiolist { display: flex; flex-direction: column; gap: 2px; margin-top: 4px; } .pl-radiolist label { display: flex; align-items: center; gap: 9px; padding: 8px 10px; border: 1px solid var(--line); background: var(--surface); font-size: 12.5px; color: var(--text); cursor: pointer; } .pl-radiolist label:hover { border-color: var(--g2); } .pl-radiolist input { width: 15px; height: 15px; accent-color: var(--g1); } .pl-warn { margin-top: 10px; font-size: 11px; color: var(--pcwarn); background: var(--pcwarn-bg); border: 1px solid var(--pcwarn-border); padding: 8px 10px; line-height: 1.5; } .pl-sec-arts { margin-top: 16px; border-top: 1px solid var(--line); padding-top: 12px; } .pl-sec-arts h4 { font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--mut); font-weight: 600; margin: 0 0 8px; } .pl-sec-a { display: flex; justify-content: space-between; font-size: 12.5px; padding: 6px 0; border-bottom: 1px solid var(--soft); } .pl-sec-a span:last-child { font-variant-numeric: tabular-nums; } /* модальные окна вкладки «Плановые данные» */ .pl-ov { position: fixed; inset: 0; z-index: 120; background: rgba(32, 31, 29, .38); display: flex; align-items: flex-start; justify-content: center; padding: 48px 18px; overflow-y: auto; } .pl-sheet { width: 100%; max-width: 640px; background: var(--panel); border: 1px solid var(--line); box-shadow: 0 24px 60px -20px rgba(32, 31, 29, .35); display: flex; flex-direction: column; } .pl-sheet.narrow { max-width: 460px; } .pl-sheet.wide { max-width: 960px; } .pl-head { display: flex; align-items: flex-start; justify-content: space-between; padding: 22px 24px 16px; border-bottom: 1px solid var(--line); } .pl-eyebrow { font-size: 10px; letter-spacing: .16em; text-transform: uppercase; color: var(--mut); font-weight: 600; } .pl-head h2 { font-size: 17px; font-weight: 600; margin: 6px 0 0; } .pl-x { width: 30px; height: 30px; border: 1px solid transparent; background: none; font-size: 19px; line-height: 1; color: var(--mut); cursor: pointer; } .pl-x:hover { border-color: var(--line); color: var(--text); } .pl-body { padding: 18px 24px 10px; } .pl-foot { padding: 16px 24px 20px; border-top: 1px solid var(--line); display: flex; gap: 10px; align-items: center; flex-wrap: wrap; } .pl-foot-sp { flex: 1; } .pl-btn { padding: 9px 16px; font-size: 12px; font-weight: 500; border: 1px solid var(--line); background: var(--surface); color: var(--text); cursor: pointer; } .pl-btn.primary { background: var(--g1); border-color: var(--g1); color: var(--on-accent); } .pl-btn.primary:hover { background: var(--g1-hover); } .pl-form { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 16px; } .pl-form label { display: flex; flex-direction: column; gap: 6px; font-size: 11px; color: var(--mut); min-width: 0; } .pl-form .w { grid-column: 1 / -1; } .pl-form label.chk { flex-direction: row; align-items: center; gap: 8px; color: var(--text); font-size: 12px; } .pl-form label i { color: var(--warm); font-style: normal; } .pl-form input:not([type="checkbox"]), .pl-form select, .pl-form textarea { font-family: inherit; font-size: 12.5px; padding: 9px 11px; border: 1px solid var(--line); background: var(--surface); color: var(--text); width: 100%; min-width: 0; max-width: 100%; } .pl-form input:focus, .pl-form select:focus, .pl-form textarea:focus { outline: none; border-color: var(--g2); } .pl-form textarea { resize: vertical; min-height: 52px; } .pl-note { font-size: 10.5px; color: var(--mut); line-height: 1.5; } .pl-note .pl-lnk { font-size: 10.5px; } .pl-repeat { border: 1px solid var(--line); background: var(--surface); padding: 12px 14px; display: flex; flex-direction: column; gap: 9px; } .pl-repeat-line { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; font-size: 12px; color: var(--text); } .pl-repeat-line.off { opacity: .4; pointer-events: none; } .pl-repeat-line select, .pl-repeat-line input { font-size: 12px; padding: 7px 9px; border: 1px solid var(--line); background: var(--surface); width: auto; } .pl-repeat-line input { width: 72px; } /* Подпись со своим полем не должны переноситься порознь — иначе строка "разъезжается" */ .pl-repeat-grp { display: inline-flex; align-items: center; gap: 9px; flex-wrap: nowrap; } .pl-seg { display: flex; border: 1px solid var(--line); background: var(--surface); } .pl-seg button { flex: 1; padding: 9px 12px; font-size: 12px; background: transparent; border: none; color: var(--mut); cursor: pointer; } .pl-seg button.on { background: var(--g1); color: var(--on-accent); font-weight: 500; } .pl-formerr { grid-column: 1 / -1; margin-top: 12px; font-size: 12px; color: var(--bad); } .pl-lnk { background: none; border: none; padding: 0; font-size: 11.5px; color: var(--link); text-decoration: underline; cursor: pointer; } .pl-lnk.mut { color: var(--mut); } .pl-lnk:hover { color: var(--link-hover); } .pl-acts { display: inline-flex; gap: 14px; white-space: nowrap; } .pl-tw2 { overflow-x: auto; } .pl-drill { width: 100%; border-collapse: collapse; min-width: 720px; } .pl-drill th { font-size: 9.5px; letter-spacing: .07em; text-transform: uppercase; color: var(--mut); font-weight: 500; text-align: right; padding: 0 10px 8px; white-space: nowrap; } .pl-drill th.l, .pl-drill td.l { text-align: left; } .pl-drill td { font-size: 12.5px; text-align: right; padding: 9px 10px; border-top: 1px solid var(--soft); font-variant-numeric: tabular-nums; } .pl-drill td.mut { color: var(--mut); } /* «Входит в» — объединение кошельков, см. ПЛАН-ДДС-КОШЕЛЬКИ.md в проекте Валеев */ .ref-merge-tag { font-size: 10.5px; color: var(--mut); background: var(--soft); padding: 2px 8px; display: inline-flex; align-items: center; gap: 6px; font-variant-numeric: initial; } .pl-drill-sum { display: flex; justify-content: space-between; align-items: baseline; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line); font-size: 13px; } .pl-drill-sum b { font-weight: 600; font-variant-numeric: tabular-nums; } /* справочник «Статьи»: дерево по разделам с перетаскиванием (только admin) */ table.ref-tree tr.ref-sec td { background: var(--tint-strong); font-weight: 600; font-size: 12.5px; border-top: 1px solid var(--line); text-align: left; } .ref-cnt { font-weight: 400; color: var(--mut); font-size: 11px; margin-left: 8px; } .ref-hint { font-weight: 400; color: var(--mut); font-size: 11px; margin-left: 10px; } .ref-c0 { display: inline-flex; align-items: center; gap: 5px; } .ref-lvl1 .ref-c0 { padding-left: 20px; } .ref-lvl2 .ref-c0 { padding-left: 40px; } .ref-lvl3 .ref-c0 { padding-left: 60px; } .ref-grip { display: inline-block; width: 12px; color: var(--faint); font-size: 12px; line-height: 1; cursor: grab; user-select: none; } .ref-grip:active { cursor: grabbing; } table.ref-tree tr.ref-item:hover .ref-grip { color: var(--g2); } .ref-tw { display: inline-block; width: 14px; color: var(--mut); font-size: 9px; cursor: pointer; user-select: none; } table.ref-tree tr.ref-group td { background: var(--tint-soft); } table.ref-tree tr.ref-group .ref-nm { font-weight: 600; } .ref-tag { margin-left: 6px; padding: 1px 6px; font-size: 9.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--link); background: var(--tint); border: 1px solid var(--g3); } table.ref-tree tr.ref-dragging td { opacity: .4; } table.ref-tree tr.ref-drop-before td { box-shadow: inset 0 2px 0 0 var(--g1); } table.ref-tree tr.ref-drop-after td { box-shadow: inset 0 -2px 0 0 var(--g1); } table.ref-tree tr.ref-drop-into td { box-shadow: inset 0 0 0 2px var(--g1); background: var(--tint-strong); } .pl-subtabs { display: flex; gap: 8px; align-items: center; margin-bottom: 12px; flex-wrap: wrap; } .pl-subtabs button[data-dv], .pl-subtabs button[data-rv] { font-size: 11.5px; padding: 7px 12px; border: 1px solid var(--line); background: var(--surface); color: var(--mut); cursor: pointer; } .pl-subtabs button[data-dv].on, .pl-subtabs button[data-rv].on { background: var(--g1); border-color: var(--g1); color: var(--on-accent); } /* ---------- «Настройки → Справочники» (admin): сноска о независимости от боевой синхронизации, заглушка «Правила разметки», пилюля «скоро» ---------- */ .ref-note { display: flex; gap: 10px; align-items: flex-start; padding: 11px 14px; margin-bottom: 20px; background: var(--tint); border: 1px solid var(--g3); font-size: 11.5px; line-height: 1.55; color: var(--warm); max-width: 640px; } .ref-note b { font-weight: 600; } .soon-pill { font-size: 9px; letter-spacing: .06em; text-transform: uppercase; padding: 1px 5px; border: 1px solid var(--g3); color: var(--g1); background: var(--tint); margin-left: 6px; } .soon-box { border: 1px dashed var(--line); background: var(--surface); padding: 26px 24px; max-width: 640px; text-align: left; } .soon-box h3 { font-size: 13px; font-weight: 600; margin-bottom: 8px; } .soon-box p { font-size: 12px; color: var(--mut); line-height: 1.6; } /* ---------- загрузка начислений по ФОТ Excel-файлом (вкладка «Выручка и ФОТ») ---------- */ .fot-up { margin: 16px 0 22px; } .fot-up-bar { border: 1px solid var(--line); background: var(--panel); padding: 11px 14px; display: flex; align-items: center; gap: 14px; flex-wrap: wrap; transition: background .12s, border-color .12s; } .fot-up-bar.hot { border-color: var(--g1); background: var(--tint-soft); } .fot-up-bar.busy { opacity: .75; } .fot-up-lead { font-size: 12.5px; } .fot-up-btn { padding: 8px 14px; font-size: 12px; font-weight: 500; border: 1px solid var(--g1); background: var(--g1); color: var(--on-accent); cursor: pointer; white-space: nowrap; } .fot-up-btn:hover { background: var(--g1-hover); } .fot-up-btn[disabled] { opacity: .6; cursor: default; } .fot-up-hint { font-size: 11px; color: var(--g1); font-weight: 500; } .fot-up-sp { flex: 1; } .fot-up-meta { font-size: 11px; color: var(--mut); } .fot-up-msg { margin-top: 10px; font-size: 12px; line-height: 1.6; padding: 10px 12px; border: 1px solid var(--line); display: flex; gap: 10px; align-items: flex-start; } .fot-up-msg .mk { flex: none; font-weight: 700; font-size: 13px; line-height: 1.3; } .fot-up-msg.ok { background: var(--ok-bg); border-color: var(--ok-border); color: var(--ok-text); } .fot-up-msg.ok .mk { color: var(--ok); } .fot-up-msg.dup { background: var(--pcwarn-bg); border-color: var(--pcwarn-border); color: var(--pcwarn-text); } .fot-up-msg.dup .mk { color: var(--pcwarn); } .fot-up-msg.err { background: var(--bad-bg); border-color: var(--bad-border); color: var(--bad-text); } .fot-up-msg.err .mk { color: var(--bad); } .fot-up-x { margin-left: auto; flex: none; border: none; background: none; font-size: 15px; line-height: 1; color: var(--mut); cursor: pointer; padding: 0 2px; } .fot-up-x:hover { color: var(--text); } .fot-jrnl { margin-top: 12px; } .fot-jrnl > summary { font-size: 11px; letter-spacing: .04em; text-transform: uppercase; color: var(--mut); font-weight: 600; cursor: pointer; padding: 6px 0; } .fot-jrnl table { width: 100%; border-collapse: collapse; margin-top: 6px; } .fot-jrnl th { font-size: 9.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--mut); font-weight: 500; text-align: left; padding: 0 12px 9px; border-bottom: 1px solid var(--line); } .fot-jrnl td { font-size: 12px; padding: 10px 12px; border-bottom: 1px solid var(--soft); vertical-align: top; } .fot-jrnl td.num { font-variant-numeric: tabular-nums; white-space: nowrap; } .fot-jrnl td b { font-weight: 600; } /* окно сводки различий (D1) */ .fd-saved { font-size: 11.5px; line-height: 1.6; color: var(--ok-text); background: var(--ok-bg); border: 1px solid var(--ok-border); padding: 10px 12px; margin-bottom: 14px; } .fd-table { width: 100%; border-collapse: collapse; min-width: 620px; } .fd-table th { font-size: 9.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--mut); font-weight: 500; text-align: left; padding: 0 10px 9px; border-bottom: 1px solid var(--line); } .fd-table th.r, .fd-table td.r { text-align: right; font-variant-numeric: tabular-nums; } .fd-table td { font-size: 12.5px; padding: 10px; border-bottom: 1px solid var(--soft); } .fd-row { cursor: pointer; } .fd-row.changed td { background: var(--pcwarn-bg); } .fd-row.removed td { background: var(--bad-bg); } .fd-row td.tw { text-align: center; width: 30px; } .fd-chev { display: inline-block; color: var(--mut); font-size: 9px; transition: transform .14s; } .fd-row.open .fd-chev { transform: rotate(90deg); } .fd-was { color: var(--mut); text-decoration: line-through; } .fd-now { font-weight: 600; } .fd-now.rm { color: var(--bad); font-weight: 600; } .fd-tag { font-size: 9px; letter-spacing: .05em; text-transform: uppercase; padding: 2px 6px; border: 1px solid var(--line); color: var(--mut); white-space: nowrap; } .fd-tag.chg { color: var(--pcwarn); border-color: var(--pcwarn-border); } .fd-tag.rm { color: var(--bad); border-color: var(--bad-border); } .fd-det > td { padding: 0; } .fd-det > td:last-child { padding: 2px 10px 12px; } .fd-sum { display: flex; gap: 16px; flex-wrap: wrap; font-size: 11.5px; color: var(--mut); margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line); } .fd-sum b { color: var(--text); font-weight: 600; } .fd-emp-empty, .fd-emp-note { font-size: 11px; color: var(--mut); padding: 6px 2px; } .fd-emp { width: 100%; border-collapse: collapse; margin-top: 6px; } .fd-emp th { font-size: 9px; letter-spacing: .05em; text-transform: uppercase; color: var(--mut); font-weight: 500; text-align: left; padding: 4px 8px 6px; border-bottom: 1px solid var(--soft); } .fd-emp th.r, .fd-emp td.r { text-align: right; font-variant-numeric: tabular-nums; } .fd-emp td { font-size: 11.5px; padding: 6px 8px; border-bottom: 1px solid var(--soft); } .fd-emp tr:last-child td { border-bottom: none; } .fd-emp tr.chg td { background: var(--pcwarn-bg); } .fd-emp tr.new td { background: var(--ok-bg); } .fd-emp tr.gone td { background: var(--bad-soft); } .fd-emp .fd-delta { font-weight: 600; } .fd-emp tr.chg .fd-delta { color: var(--pcwarn); } .fd-mut { color: var(--mut); } .fd-badge { font-size: 8.5px; letter-spacing: .04em; text-transform: uppercase; border: 1px solid var(--ok-border); color: var(--in); padding: 1px 4px; margin-left: 4px; } /* ---------- Настройки → Налоги ---------- */ .tax-frm { display: grid; grid-template-columns: 230px minmax(0, 470px); gap: 16px 24px; align-items: start; margin-top: 4px; } .tax-frm .l { font-size: 12.5px; font-weight: 600; padding-top: 7px; } .tax-frm .l .s { display: block; font-weight: 400; font-size: 11px; color: var(--mut); margin-top: 3px; line-height: 1.45; } .tax-year-row { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; } .tax-inp { width: 100%; padding: 8px 10px; border: 1px solid var(--line); background: var(--surface); font: inherit; font-size: 13px; color: var(--text); } .tax-inp:focus { outline: none; border-color: var(--g1); } .tax-inp.short { width: 150px; } .tax-inp:disabled { background: var(--muted-bg); color: var(--mut); } .tax-pill { display: inline-flex; border: 1px solid var(--line); } .tax-pill button { border: none; background: var(--surface); padding: 7px 14px; cursor: pointer; font: inherit; font-size: 12px; color: var(--text); } .tax-pill button + button { border-left: 1px solid var(--line); } .tax-pill button.on { background: var(--g1); color: var(--on-accent); } .tax-opts { display: flex; flex-direction: column; gap: 6px; } .tax-opt { display: flex; gap: 10px; align-items: flex-start; padding: 9px 12px; border: 1px solid var(--line); background: var(--surface); cursor: pointer; font-size: 12.5px; } .tax-opt.on { border-color: var(--g1); background: var(--tint-soft); } .tax-opt.dis { opacity: .5; cursor: not-allowed; } .tax-opt .r { width: 14px; height: 14px; border: 1px solid var(--g2); border-radius: 50%; margin-top: 2px; flex: none; } .tax-opt.on .r { background: radial-gradient(var(--g1) 45%, var(--surface) 50%); } .tax-opt .d { font-size: 11px; color: var(--mut); margin-top: 2px; } .tax-h3 { margin: 30px 0 6px !important; } .tax-enp-warn { margin-top: 8px; font-size: 11.5px; line-height: 1.5; color: var(--pcwarn-text); background: var(--tint); border: 1px solid var(--g3); padding: 9px 11px; } .tax-enp-warn .add-btn { margin-top: 8px; font-size: 11.5px; padding: 6px 12px; } .tax-enp-list { font-size: 12px; line-height: 1.55; padding-top: 7px; } .tax-enp-list .note { font-size: 11px; color: var(--mut); margin-top: 4px; } .pc-bk-table tr.pay td.pc-enp { cursor: help; } .pc-enp-parts { color: var(--mut); } .tax-params-wrap { overflow-x: auto; } .tax-params, .tax-roles { border-collapse: collapse; } .tax-params th, .tax-params td, .tax-roles th, .tax-roles td { font-size: 12px; padding: 6px 10px; border-bottom: 1px solid var(--soft); text-align: left; white-space: nowrap; } .tax-params th, .tax-roles th { font-size: 10px; letter-spacing: .06em; text-transform: uppercase; color: var(--mut); font-weight: 600; border-bottom: 1px solid var(--line); background: var(--hover); } .tax-params th.yr { text-align: right; min-width: 170px; } .tax-params td.pv { text-align: right; padding: 4px 6px; } .tax-params .tax-inp { width: 130px; padding: 6px 8px; text-align: right; font-variant-numeric: tabular-nums; } .tax-params .u { color: var(--mut); font-size: 11px; padding-left: 4px; display: inline-block; width: 14px; text-align: left; } .tax-params tr.pg td { background: var(--tint-strong); font-weight: 700; font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--mut); } .tax-del-year { margin-left: 6px; text-decoration: none; font-size: 13px; } .tax-roles tr.msec td { background: var(--tint); } .tax-roles .tw { display: inline-block; width: 18px; color: var(--g1); font-weight: 700; cursor: pointer; user-select: none; } .tax-roles tr.art td:first-child { color: var(--mut); } .tax-roles tr.art.ov td:first-child { color: var(--text); } .tax-roles .note { font-size: 11px; color: var(--mut); } .tax-role { display: inline-flex; border: 1px solid var(--line); } .tax-role button { border: none; background: var(--surface); padding: 5px 10px; font: inherit; font-size: 11.5px; cursor: pointer; color: var(--mut); } .tax-role button + button { border-left: 1px solid var(--line); } .tax-role button.on { background: var(--g4); color: var(--link-hover); font-weight: 600; } .tax-role.inh button.on { background: var(--tint); color: var(--mut); font-weight: 500; } .ovtag { font-size: 10px; letter-spacing: .06em; text-transform: uppercase; color: var(--g1); font-weight: 700; } .tax-save { display: flex; gap: 14px; align-items: center; margin-top: 24px; padding-top: 16px; border-top: 1px solid var(--line); } .tax-save .add-btn:disabled { opacity: .6; cursor: default; } .tax-save-msg { font-size: 12px; color: var(--mut); } .tax-save-msg.warn { color: var(--pcwarn); } .tax-save-msg.ok { color: var(--ok); } .tax-errors { margin: 0 0 18px; padding: 12px 16px; background: var(--bad-bg); color: var(--bad); font-size: 12px; border-left: 3px solid var(--bad); } .tax-errors ul { margin: 6px 0 0; padding-left: 18px; } @media (max-width: 720px) { .tax-frm { grid-template-columns: 1fr; gap: 8px; } .tax-frm .l { padding-top: 10px; } } .tax-flag { display: inline-flex; align-items: center; gap: 4px; margin-left: 10px; width: 62px; font-size: 11px; color: var(--mut); cursor: pointer; user-select: none; } .tax-flag input { accent-color: var(--g1); width: 14px; height: 14px; margin: 0; cursor: pointer; } .tax-flag-sp { display: inline-block; width: 62px; margin-left: 10px; } /* ---------- Вкладка «Налоговое планирование» ---------- */ .tx-disclaimer { margin-top: 22px; font-size: 13px; font-weight: 700; color: var(--text); } .tx-save-state { font-size: 11.5px; color: var(--mut); } .tx-save-state.err { color: var(--bad); } .tx-regime { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 6px; padding: 12px 16px; background: var(--panel); border: 1px solid var(--line); } .tx-eyebrow { font-size: 10.5px; letter-spacing: .13em; text-transform: uppercase; color: var(--mut); font-weight: 600; margin-right: 6px; } .tx-chip { display: inline-flex; align-items: center; padding: 4px 10px; background: var(--g4); color: var(--link-hover); font-size: 11.5px; font-weight: 600; } .tx-chip.grey { background: var(--soft); color: var(--mut); font-weight: 500; } .tx-sp { flex: 1; } .tx-lock { font-size: 11px; color: var(--mut); } .tx-warn { margin-top: 10px; padding: 10px 14px; background: var(--pcwarn-bg); color: var(--pcwarn); font-size: 12px; border-left: 3px solid var(--pcwarn); } .tx-blk { margin-top: 28px; } .tx-blk-head { margin-bottom: 12px; } .tx-blk-head h2 { font-size: 15px; font-weight: 600; margin: 4px 0 0; } .tx-d { font-size: 11.5px; color: var(--mut); margin-top: 4px; max-width: 760px; line-height: 1.5; } .tx-num { display: inline-flex; width: 20px; height: 20px; align-items: center; justify-content: center; background: var(--g1); color: var(--on-accent); font-size: 11px; font-weight: 700; margin-right: 8px; letter-spacing: 0; } .tx-vatbar { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding: 9px 14px; border: 1px solid var(--line); border-bottom: none; background: var(--tint-soft); } .tx-chk { display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; font-weight: 600; cursor: pointer; white-space: nowrap; } .tx-chk input { accent-color: var(--g1); width: 15px; height: 15px; margin: 0; } .tx-chk.lockd { color: var(--mut); cursor: default; } .tx-note { font-size: 11.5px; color: var(--mut); line-height: 1.5; } .tx-vtag { font-size: 10px; font-weight: 600; color: var(--link-hover); background: var(--g4); padding: 1px 6px; margin-left: 4px; } .tx-inwrap, .tx-mx-wrap { border: 1px solid var(--line); overflow-x: auto; background: var(--panel); } .tx-in, .tx-mx { border-collapse: collapse; width: 100%; } .tx-in { min-width: 1240px; } .tx-mx { min-width: 1180px; } .tx-in th, .tx-in td { font-size: 12px; padding: 6px 5px; border-bottom: 1px solid var(--soft); text-align: right; white-space: nowrap; } .tx-in thead th, .tx-mx thead th { background: var(--hover); font-size: 10px; letter-spacing: .06em; text-transform: uppercase; color: var(--mut); font-weight: 600; border-bottom: 1px solid var(--line); padding: 9px 6px; } .tx-in .c0, .tx-mx .c0 { text-align: left; position: sticky; left: 0; background: var(--panel); min-width: 210px; padding-left: 14px; z-index: 1; } .tx-in thead .c0, .tx-mx thead .c0 { background: var(--hover); } .tx-in td.c0 .t { font-weight: 600; } .tx-in td.c0 .s { font-size: 10.5px; color: var(--mut); margin-top: 2px; } .tx-in .yr { border-left: 1px solid var(--line); background: var(--tint); padding: 6px 10px; } .tx-in .sp { border-left: 1px solid var(--line); text-align: left; padding: 6px 12px 6px 8px; } .tx-cin { width: 100%; min-width: 62px; padding: 7px 6px; border: 1px solid var(--line); background: var(--surface); font: inherit; font-size: 12.5px; text-align: right; font-variant-numeric: tabular-nums; color: var(--text); } .tx-cin:focus { outline: none; border-color: var(--g1); box-shadow: 0 0 0 2px var(--g4); } .tx-cin.year { font-weight: 700; min-width: 96px; border-color: var(--g3); } .tx-cin[readonly] { background: var(--muted-bg); color: var(--mut); border-color: var(--soft); } .tx-mini { font: inherit; font-size: 11.5px; padding: 5px 6px; border: 1px solid var(--line); background: var(--surface); color: var(--text); } .tx-kpis { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); margin-top: 26px; padding: 22px 0; } .tx-mx th, .tx-mx td { font-size: 12px; padding: 8px 9px; border-bottom: 1px solid var(--soft); text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; } .tx-mx .y { border-left: 1px solid var(--line); font-weight: 600; } .tx-mx td.z { color: var(--faint); } .tx-mx tr.block td { background: var(--block-bg); font-weight: 700; border-top: 2px solid var(--g2); text-transform: uppercase; letter-spacing: .05em; font-size: 10.5px; } .tx-mx tr.block td.c0 { background: var(--block-bg); } .tx-mx tr.tot td { font-weight: 700; border-top: 2px solid var(--line); background: var(--muted-bg); } .tx-mx tr.tot td.c0 { background: var(--muted-bg); } .tx-mx tr.info td { color: var(--mut); font-style: italic; } .tx-mx tr.info td.c0 { white-space: normal; } .tx-mx tr.pay td { background: rgba(182, 130, 53, .10); font-weight: 600; } .tx-mx tr.pay td.c0 { background: var(--tint-strong); } .tx-qmark { display: block; font-size: 9.5px; color: var(--g1); font-weight: 400; } .tx-head-row { display: flex; align-items: flex-end; gap: 16px; flex-wrap: wrap; justify-content: space-between; } .tx-sw { display: inline-block; width: 9px; height: 9px; border-radius: 2px; margin-right: 7px; vertical-align: 0; } .tx-chart-card { border: 1px solid var(--line); background: var(--panel); padding: 18px 22px 16px; } .tx-chart-top { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 10px; } .tx-pill { display: inline-flex; border: 1px solid var(--line); } .tx-pill button { border: none; background: var(--surface); padding: 6px 12px; cursor: pointer; font: inherit; font-size: 11.5px; color: var(--text); } .tx-pill button + button { border-left: 1px solid var(--line); } .tx-pill button.on { background: var(--g1); color: var(--on-accent); } .tx-legend { display: flex; gap: 16px; flex-wrap: wrap; font-size: 11.5px; } .tx-legend > span { display: inline-flex; align-items: center; } .tx-chart-grid { display: grid; grid-template-columns: minmax(0, 1fr) 290px; gap: 28px; align-items: start; } .tx-chart { position: relative; } .tx-chart-svg { display: block; width: 100%; height: auto; overflow: visible; } .tx-tip { position: absolute; pointer-events: none; background: var(--surface); border: 1px solid var(--line); box-shadow: 0 8px 24px -8px rgba(32, 31, 29, .25); padding: 10px 12px; font-size: 11.5px; min-width: 210px; z-index: 5; opacity: 0; transition: opacity .08s; } .tx-tip.on { opacity: 1; } .tx-tip .h { font-weight: 700; margin-bottom: 6px; } .tx-tip .r { display: flex; justify-content: space-between; gap: 14px; margin: 3px 0; font-variant-numeric: tabular-nums; } .tx-tip .r > span:first-child { display: inline-flex; align-items: center; } .tx-tip .r.tot { border-top: 1px solid var(--soft); padding-top: 4px; margin-top: 5px; font-weight: 700; } .tx-tip .r.m { color: var(--mut); } .tx-share .tx-big { font-size: 13px; line-height: 1.5; margin: 10px 0 14px; } .tx-share .tx-big b { font-size: 22px; color: var(--g1); font-variant-numeric: tabular-nums; } .tx-stack { display: flex; height: 16px; gap: 2px; margin: 6px 0 12px; } .tx-stack i { display: block; height: 100%; } .tx-stack i:first-child { border-radius: 3px 0 0 3px; } .tx-stack i:last-child { border-radius: 0 3px 3px 0; } .tx-srow { display: flex; justify-content: space-between; gap: 10px; font-size: 12px; margin: 7px 0; font-variant-numeric: tabular-nums; } .tx-srow > span:first-child { display: inline-flex; align-items: center; } .tx-srow .m { color: var(--mut); } .tx-srow.tot { border-top: 1px solid var(--line); padding-top: 8px; margin-top: 10px; font-weight: 700; } @media (max-width: 900px) { .tx-chart-grid { grid-template-columns: 1fr; } } .tx-source { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 10px; padding: 10px 14px; border: 1px dashed var(--g3); background: var(--tint-soft); } .tx-source .t { font-size: 12.5px; font-weight: 600; } .tx-source .h { font-size: 11.5px; color: var(--mut); line-height: 1.5; max-width: 900px; } .tx-unit { display: inline-flex; align-items: center; gap: 8px; } .tx-unit .l { font-size: 11.5px; color: var(--mut); } .tx-yrhint { display: block; font-size: 10.5px; color: var(--mut); text-align: right; margin-top: 3px; } /* в рублях числа длиннее — клетки шире, таблица прокручивается вбок */ .tx-in.rub { min-width: 1640px; } .tx-in.rub .tx-cin { min-width: 92px; } .tx-in.rub .tx-cin.year { min-width: 122px; } .tx-mx.rub { min-width: 1620px; } .tx-switch { position: relative; width: 34px; height: 18px; background: var(--ghost); border-radius: 10px; cursor: pointer; flex: none; transition: background .15s; } .tx-switch::after { content: ""; position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; background: #fff; border-radius: 50%; transition: left .15s; } .tx-switch.on { background: var(--g1); } .tx-switch.on::after { left: 18px; } .tx-switch:focus-visible { outline: 2px solid var(--g2); outline-offset: 2px; } .tx-in-foot { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; padding: 10px 14px; border-top: 1px solid var(--line); background: var(--tint-soft); } .pl-vatnote { font-size: 11.5px; color: var(--mut); line-height: 1.55; padding: 10px 14px; margin: 6px 0 10px; background: var(--tint-soft); border-left: 3px solid var(--g2); max-width: 980px; } .pl-vatnote b { color: var(--text); } .pl-vmut { color: var(--faint-strong); } .pl-mx .pl-vc { text-align: center; width: 52px; padding-left: 4px; padding-right: 4px; border-left: 1px solid var(--soft); border-right: 1px solid var(--line); } .pl-mx th.pl-vc { color: var(--link-hover); } .pl-vbox { width: 15px; height: 15px; accent-color: var(--g1); cursor: pointer; margin: 0; vertical-align: middle; } .pl-vbox:disabled { cursor: default; } .pl-vdash { color: var(--faint); } .tx-transfer { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; margin-top: 18px; padding: 14px 16px; border: 1px solid var(--g3); background: var(--tint-soft); } .tx-transfer .t { font-weight: 600; font-size: 12.5px; } .tx-transfer .h { font-size: 11.5px; color: var(--mut); max-width: 760px; line-height: 1.5; margin-top: 2px; } .tx-done { color: var(--ok); font-size: 12px; font-weight: 600; } .tx-tr-body { overflow-x: auto; } .tx-tr { min-width: 880px; } .tx-tr td.tx-past { color: var(--faint); text-decoration: line-through; } .tx-tr tr.tx-tr-off td { color: var(--faint); } .tx-warnnote { font-size: 10.5px; color: var(--bad); font-weight: 600; } .tx-radio { display: flex; flex-direction: column; gap: 8px; margin-top: 14px; } .tx-radio label { display: flex; gap: 8px; align-items: flex-start; font-size: 12px; cursor: pointer; } .tx-radio label .d { font-size: 11px; color: var(--mut); margin-top: 2px; } .tx-radio input { accent-color: var(--g1); margin-top: 2px; } /* ---------- Справочник: архивирование статьи с переносом ---------- */ .ref-usage { font-size: 11px; white-space: nowrap; } .pl-sheet.arc-sheet { max-width: 760px; } .arc-uses { border: 1px solid var(--line); background: var(--surface); margin-bottom: 16px; } .arc-uses .h { font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--mut); font-weight: 600; padding: 10px 14px 6px; } .arc-use { display: flex; justify-content: space-between; gap: 16px; padding: 7px 14px; border-top: 1px solid var(--soft); font-size: 12.5px; } .arc-use .n { font-weight: 700; white-space: nowrap; } .arc-use .d { font-size: 11px; color: var(--mut); } .arc-use.zero { color: var(--faint); } .arc-use.zero .n { font-weight: 400; } .arc-use.x { cursor: pointer; } .arc-use.x:hover { background: var(--tint-soft); } .arc-tw { display: inline-block; width: 16px; color: var(--g1); font-weight: 700; } .arc-det { border-top: 1px solid var(--soft); background: var(--tint-soft); padding: 6px 14px 10px 30px; max-height: 280px; overflow: auto; } .arc-det table { border-collapse: collapse; width: 100%; } .arc-det th, .arc-det td { font-size: 11.5px; padding: 5px 6px; border-bottom: 1px solid var(--soft); text-align: left; vertical-align: top; } .arc-det th { font-size: 9.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--mut); font-weight: 600; } .arc-det .r { text-align: right; white-space: nowrap; } .arc-det tr.past td { color: var(--faint); } .arc-more { margin-top: 6px; font-size: 11.5px; color: var(--mut); } .arc-tag { display: inline-block; background: var(--soft); padding: 2px 8px; margin: 3px 4px 0 0; font-size: 11.5px; } .arc-note { font-size: 11.5px; color: var(--mut); line-height: 1.5; } .arc-choice { border: 1px solid var(--line); background: var(--surface); padding: 12px 14px; margin-bottom: 8px; cursor: pointer; display: flex; gap: 10px; } .arc-choice.on { border-color: var(--g1); background: var(--tint-soft); } .arc-choice input[type=radio] { accent-color: var(--g1); margin-top: 3px; } .arc-choice .t { font-weight: 600; font-size: 13px; } .arc-choice .d { font-size: 11.5px; color: var(--mut); line-height: 1.5; margin-top: 3px; } .arc-sel { margin-top: 9px; width: 100%; max-width: 420px; padding: 7px 9px; border: 1px solid var(--line); font: inherit; font-size: 12.5px; background: var(--surface); } .arc-sel.inline { width: auto; max-width: 280px; margin: 0 0 0 4px; padding: 3px 6px; } .arc-sub { margin-top: 10px; } .arc-chk { display: flex; gap: 7px; align-items: flex-start; font-size: 12px; } .arc-chk input { accent-color: var(--g1); margin-top: 2px; } .arc-bad { padding: 10px 14px; background: var(--bad-bg); color: var(--bad); font-size: 12.5px; border-left: 3px solid var(--bad); line-height: 1.5; }