/* РНП · стиль А «Финансовый кабинет» (основа — Stripe), решение Ярослава 04.11.2026.
   Общий файл для всех макетов: подключается после стилей страницы и перекрывает их.
   Меняем вид здесь — меняется на всех страницах. Структура страниц не трогается. */
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap");

/* ——— Цвета, шрифт, тени ——— */
:root, :root[data-theme] {
  --paper: #F6F8FA;          /* фон страницы */
  --sheet: #FFFFFF;          /* карточки */
  --ink: #1A1F36;            /* основной текст */
  --ink-2: #697386;          /* второстепенный */
  --ink-3: #A3ACB9;          /* подписи, неактивное */
  --rule: #E3E8EE;           /* линии */
  --accent: #5850EC;         /* единственный акцент: активное, кнопки, график */
  --accent-soft: rgba(88, 80, 236, .08);
  --on-accent: #FFFFFF;
  /* Шкала выполнения плана: > 105% синий · 90–105% зелёный · 80–90% жёлтый · 70–80% оранжевый · < 70% красный */
  --over: #1F6FEB;   --over-bg: #E3EEFF;
  --good: #0E8A5F;   --good-bg: #DDF7EC;
  --warn: #B58100;   --warn-bg: #FFF4CC;   /* жёлтый */
  --warn-strong: #E8A400;                  /* жёлтый для крупных цифр и полосок — без подложки тёмный жёлтый выглядит болотным */
  --orange: #E0620B; --orange-bg: #FFE9D9;
  --bad: #DF1B41;    --bad-bg: #FFE7EC;    /* и убыток */
  --weekend: #C2185B;
  --changed: #FFF6D6; --changed-line: #E5B53A;
  --heat: 88, 80, 236; --good-rgb: 14, 138, 95; --bad-rgb: 223, 27, 65;
  --display: "Inter", system-ui, -apple-system, sans-serif;
  --text: "Inter", system-ui, -apple-system, sans-serif;
  --shadow: 0 1px 1px rgba(0, 0, 0, .03), 0 2px 5px rgba(60, 66, 87, .08);
  --shadow-pop: 0 4px 12px rgba(60, 66, 87, .12), 0 12px 32px rgba(60, 66, 87, .14);
  --chip: #EBEEF1;           /* подложка переключателей и мягких кнопок */
  --chip-hover: #E3E7EC;
  --row-sub: #FAFBFC;        /* строки истории под основной строкой */
  --accent-soft-hover: rgba(88, 80, 236, .14);
  --fresh: #FFF3C4;          /* подсветка только что изменённой строки */
  color-scheme: light;
}

/* ——— Тёмная тема (переключатель в меню; по умолчанию — как в системе) ———
   Смысл цветов тот же, оттенки светлее, чтобы читаться на тёмном фоне.
   Правило жёлтого в тёмной теме: и на фоне, и на подложке — светлый жёлтый. */
:root[data-theme="dark"] {
  --paper: #0E1117; --sheet: #171B23; --ink: #E6E9EF; --ink-2: #A0A7B4; --ink-3: #6B7383; --rule: #262C36;
  --accent: #8B85FF; --accent-soft: rgba(139, 133, 255, .15); --accent-soft-hover: rgba(139, 133, 255, .24); --on-accent: #0E1117;
  --over: #5B9BFF;   --over-bg: rgba(91, 155, 255, .16);
  --good: #3FC98A;   --good-bg: rgba(63, 201, 138, .15);
  --warn: #F0BB3E;   --warn-bg: rgba(240, 187, 62, .15);   --warn-strong: #F0BB3E;
  --orange: #FF8A3D; --orange-bg: rgba(255, 138, 61, .16);
  --bad: #FF6B81;    --bad-bg: rgba(255, 107, 129, .15);
  --weekend: #FF7EA6;
  --changed: rgba(240, 187, 62, .16); --changed-line: #F0BB3E; --fresh: rgba(240, 187, 62, .14);
  --heat: 139, 133, 255; --good-rgb: 63, 201, 138; --bad-rgb: 255, 107, 129;
  --shadow: 0 0 0 1px rgba(255, 255, 255, .05), 0 2px 6px rgba(0, 0, 0, .35);
  --shadow-pop: 0 0 0 1px rgba(255, 255, 255, .08), 0 12px 32px rgba(0, 0, 0, .55);
  --chip: #232833; --chip-hover: #2C323E; --row-sub: #1B2029;
  color-scheme: dark;
}
/* Переключатель темы — справа в меню */
.theme-seg { margin-left: auto; display: inline-flex; background: var(--chip); border-radius: 8px; padding: 3px; gap: 2px; }
.theme-seg button { width: 32px; height: 28px; border: 0; background: none; border-radius: 6px; color: var(--ink-3); cursor: pointer; display: grid; place-items: center; }
.theme-seg button:hover { color: var(--ink); }
.theme-seg button[aria-pressed="true"] { background: var(--sheet); color: var(--ink); box-shadow: 0 1px 2px rgba(0, 0, 0, .12); }
body { background: var(--paper); color: var(--ink); font-family: var(--text); }
/* Одна ширина у всех страниц — при переходе между ними блоки не прыгают */
.wrap { max-width: 1400px; }
/* Широкие таблицы листаются внутри своей рамки и не растягивают страницу на телефоне */
.wrap > * { min-width: 0; }

/* ——— Заголовки: Inter вместо широкого шрифта черновика ——— */
h1, .pct, .mark, .name, .big .v { font-family: var(--display); letter-spacing: -.02em; }
h1 { font-weight: 700; }
.mark { font-weight: 700; font-size: 16px; }
.mark span { font-weight: 500; }
/* Логотип целиком заглавными: «РНП TVSWOOD» */
.mark { text-transform: uppercase; letter-spacing: .02em; }

/* ——— Верхнее меню: активный пункт — цветом акцента, без рамки ——— */
.top { border-bottom-color: var(--rule); }
nav a[aria-current] { color: var(--accent); background: none; box-shadow: none; font-weight: 600; }

/* ——— Карточки: белые, без рамки, с лёгкой тенью ——— */
.panel, .table-box, .tbl, .kpi { border: 0; border-radius: 8px; box-shadow: var(--shadow); }
.tbl .table-box { box-shadow: none; border-radius: 0 0 8px 8px; }
.tbl-head { border-radius: 8px 8px 0 0; }
/* Плитки итогов на «Месяце» и «Неделе» — отдельными карточками */
.wrap > .kpis { gap: 16px; background: none; border: 0; border-radius: 0; overflow: visible; }
.wrap > .kpis .kpi { background: var(--sheet); }

/* ——— Выпадающие окна ——— */
.cal, .pop, dialog { border: 0; border-radius: 10px; box-shadow: var(--shadow-pop); }

/* ——— Таблицы: шапка мелкими заглавными ——— */
thead th { font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: var(--ink-2); }
thead th small { text-transform: none; letter-spacing: 0; }
.pill { border-radius: 4px; }

/* ——— Кнопки и поля ——— */
.btn, .arrow, .range-btn, .ar { border-color: var(--rule); }
.btn.primary { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
/* Стрелки месяца и недели: без рамки и фона, подложка только при наведении */
.arrow { width: 28px; height: 28px; border: 0; background: transparent; border-radius: 6px; color: var(--ink-2); font-size: 22px; line-height: 1; padding: 0 0 3px; }
.arrow:hover:not(:disabled) { background: var(--chip); color: var(--ink); border: 0; }
.arrow:disabled { opacity: .3; }
/* Строка под заголовком — по началу названия месяца/недели, а не по стрелке (стрелка 28px + отступ 10px) */
.month + .asof, .week + .asof { padding-left: 38px; }
/* Только «Месяц»: чуть больше воздуха между названием месяца и строкой под ним */
.month + .asof { margin-top: 6px; }
.seg { background: var(--chip); border: 0; }
.seg button[aria-pressed="true"] { background: var(--sheet); color: var(--ink); box-shadow: 0 1px 2px rgba(0, 0, 0, .08); }

/* ——— Цвета шкалы выполнения: синий и оранжевый (остальные заданы на страницах) ——— */
.pct.over, b.over, .pill.over { color: var(--over); }
.pct.orange, b.orange, .pill.orange { color: var(--orange); }
.pill.over { background: var(--over-bg); } .pill.orange { background: var(--orange-bg); }
.fill.over, .bar i.over { background: var(--over); } .fill.orange, .bar i.orange { background: var(--orange); }
/* ПРАВИЛО ЖЁЛТОГО (решение Ярослава 04.11.2026):
   жёлтый текст без подложки (на белом) — всегда чистый --warn-strong: тёмный жёлтый на белом выглядит болотным;
   жёлтый текст на светло-жёлтой подложке (плашки, залитые ячейки) — тёмный --warn, иначе сольётся с подложкой. */
td:not([class*="s-"]) > b.warn { color: var(--warn-strong); }
/* Жёлтый в плитках, полосках и легенде — тёплый и чистый; в таблице (на подложке) остаётся --warn */
.pct.warn { color: var(--warn-strong); }
.fill.warn, .bar i.warn, .legend i[style*="--warn"] { background: var(--warn-strong) !important; }

/* ——— Плитки итогов «Заказы» и «Прибыль» — одинаковые на «Месяце» и «Неделе» ———
   подпись → [большой процент слева · справа факт из плана и отставание] → полоска */
.wrap > .kpis .kpi { padding: 26px 24px 28px; display: grid; gap: 0; min-width: 0; }
.kpi-label { font-size: 12px; text-transform: uppercase; letter-spacing: .08em; color: var(--ink-2); font-weight: 600; }
.kpi-row { display: flex; justify-content: space-between; align-items: flex-end; gap: 12px 20px; flex-wrap: wrap; margin-top: 14px; }
.kpis .pct { font: 600 clamp(40px, 6vw, 60px)/1 var(--display); letter-spacing: -.02em; margin: 0; }
.pct.good { color: var(--good); } .pct.bad { color: var(--bad); }
.kpi-abs { text-align: right; color: var(--ink-2); font-size: 16px; line-height: 1.3; padding-bottom: 2px; }
.kpi-abs b { color: var(--ink); font-weight: 600; font-size: 22px; letter-spacing: -.01em; margin-right: 2px; }
.kpi-abs small { display: block; font-size: 14px; color: var(--ink-2); margin-top: 2px; }
.kpis .track { position: relative; height: 8px; background: var(--paper); border-radius: 4px; margin-top: 16px; }
.kpis .track .fill { position: absolute; inset: 0 auto 0 0; border-radius: 4px; }
.kpis .track .fill.good { background: var(--good); } .kpis .track .fill.bad { background: var(--bad); }
.kpis .track .tick { position: absolute; top: -4px; bottom: -4px; width: 2px; background: var(--ink); border-radius: 1px; }
.kpi-note { font-size: 12px; color: var(--ink-3); margin-top: 8px; text-align: right; }

/* ——— Единые размеры текста на всех страницах (решение Ярослава 04.11.2026) ——— */
/* Заголовок страницы — как в «Себестоимости»: 36, жирный */
.wrap h1 { font-size: clamp(24px, 3.6vw, 36px); font-weight: 700; line-height: 1.1; letter-spacing: -.02em; }
/* Строка под заголовком — 14 */
.wrap .asof, .wrap .sub, .wrap .src { font-size: 14px; }
/* Шапка таблиц — 11 ЗАГЛАВНЫМИ, полужирный, серый */
.wrap thead tr th { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--ink-2); }
.wrap thead tr th small { font-size: 11px; font-weight: 400; text-transform: none; letter-spacing: 0; }
/* Цифры в таблицах — 14 (жирность итогов и выделенных значений сохраняется) */
.wrap tbody tr td { font-size: 14px; }