/* ============================================================================
   ПАЛИТРА FLATME — единый источник цвета для всего, что связано с FLATME.
   Отдаётся как /static/flatme-theme.css. Подключается ПЕРВЫМ, до стилей страницы.

   Правило владельца (25.10.2026): «всё, что связано с flatme, в этих цветах
   делаем». Меняем цвет — меняем ЗДЕСЬ, а не в отдельной странице.

   Две темы:
     • светлая — по умолчанию ВСЕГДА, у сотрудников и у клиентов;
     • тёмная — только по явному выбору сотрудника (кнопка справа вверху).
   Поэтому prefers-color-scheme здесь СОЗНАТЕЛЬНО не используется: тёмная ОС
   не должна сама переключать кабинет. Тему ставит flatme-theme.js атрибутом
   data-theme="dark" на <html>.

   Правило глубины: чем дальше слой от глаза, тем он темнее. В светлой теме
   фон страницы — самый тёмный из светлых, карточка светлее, поле ввода белое.
   В тёмной теме так же, только отсчёт от своего края.
   ========================================================================= */

:root{
  color-scheme: light;

  /* ——— слои ——— */
  --fm-ground:#E5E0DB;        /* фон страницы — самый дальний слой */
  --fm-panel:#EFEBE7;         /* секция, боковая колонка, шапка таблицы */
  --fm-card:#F8F6F4;          /* карточка — основной рабочий слой */
  --fm-top:#FFFFFF;           /* верхний слой: поле ввода, выпадающий список */
  --fm-hover:#F1EDE9;         /* наведение на строку/карточку */
  --fm-line:#DBD4CD;          /* граница */
  --fm-line-soft:#E8E2DC;     /* мягкая граница, разделитель строк */

  /* ——— чернила ——— */
  --fm-ink:#1C1614;           /* основной текст */
  --fm-ink-2:#4A403B;         /* абзацы, пояснения */
  --fm-ink-3:#6F635C;         /* подписи, даты, единицы */
  --fm-heading:#2E1512;       /* заголовки и крупные цифры — бордовые чернила */

  /* ——— бордо: крупные поверхности (одинаковы в обеих темах) ——— */
  --fm-side:#241715;          /* боковая панель кабинета */
  --fm-surface:#2F1B17;       /* итоговые плашки */
  --fm-surface-deep:#3C1C16;  /* шапка презентации */
  --fm-on-brand:#F4EBE7;      /* текст на любой бордовой поверхности */
  --fm-brand-edge:rgba(20,10,8,.26);   /* тихий кант у мелких бордовых элементов */

  /* ——— бордо: мелкие заливки (ярче в тёмной теме) ——— */
  --fm-brand:#361812;         /* главная кнопка, аватар, столбики графика */
  --fm-brand-soft:#EDE2DE;    /* мягкая подложка: место под фото, пустые состояния */

  /* ——— акцент ——— */
  --fm-accent:#7F3A1F;        /* ссылки, выбранное, фокус, активная вкладка */
  --fm-accent-soft:#F3E7E0;   /* фон выбранного, кольцо фокуса */
  --fm-rubric:#50201A;        /* надписи-рубрики над заголовками */

  /* ——— сигналы: ТОЛЬКО состояние, никогда оформление ——— */
  --fm-ok:#2E6B45;    --fm-ok-bg:#E4EFE7;
  --fm-warn:#8A6412;  --fm-warn-bg:#F4EDD9;
  --fm-hot:#A0500F;   --fm-hot-bg:#F8E8DA;
  --fm-bad:#A3342F;   --fm-bad-bg:#F7E3E0;

  /* ——— подсветка величины в таблицах (НЕ сигнал, а шкала суммы) ———
     Ступени считаются внутри строки. Самая плотная держит обычный текст. */
  --fm-heat-1:#F7F1EE; --fm-heat-2:#F0E3DD; --fm-heat-3:#E7D1C8;
  --fm-heat-4:#DCBCAF; --fm-heat-5:#CEA394;

  /* ——— ряды графиков: различимы между собой, не спорят с бордо ——— */
  --fm-s1:#8C3F21; --fm-s2:#3E6B4E; --fm-s3:#44557F;
  --fm-s4:#8A6412; --fm-s5:#6F4063; --fm-s6:#2F6B6B;


  /* ——— производные, нужные страницам кабинета ——— */
  --fm-accent-dim:rgba(127,58,31,.26);   /* полупрозрачный акцент: рамки, подсветки */
  --fm-bad-dim:rgba(163,52,47,.24);
  --fm-ok-dim:rgba(46,107,69,.24);
  --fm-glow:#A0500F;                     /* декоративное свечение графиков */
  --fm-glow-dim:rgba(160,80,15,.18);
  --fm-tint:rgba(28,22,20,.05);          /* лёгкая подложка поверх слоя (наведение) */
  --fm-tint-2:rgba(28,22,20,.09);        /* она же заметнее */
  --fm-scrim:rgba(255,255,255,.72);      /* полупрозрачная плашка поверх фона */
  --fm-wash-1:rgba(127,58,31,.05);       /* тёплая подсветка фона страницы, угол 1 */
  --fm-wash-2:rgba(127,58,31,.035);      /* она же, угол 2 */
  --fm-shade:rgba(28,22,20,.10);         /* тень карточки */
  --fm-shade-strong:rgba(28,22,20,.16);  /* тень поднятого слоя, модального окна */

  --fm-shadow:0 1px 2px rgba(28,22,20,.05);
  --fm-shadow-lift:0 1px 2px rgba(28,22,20,.05), 0 12px 28px rgba(28,22,20,.08);
  --fm-overlay:rgba(28,22,20,.46);   /* затемнение под модальным окном */
}

/* ——————————————————————————————————————————————————————————————————————
   ТЁМНАЯ ТЕМА. Фон — тёмно-серый с лёгким тёплым уклоном в сторону бордо
   (чисто нейтральный серый рядом с тёплым бордо выглядит из другого набора).
   Крупные бордовые поверхности те же, что в светлой; мелкие заливки
   СВЕТЛЕЮТ, иначе их не видно на тёмном.
   —————————————————————————————————————————————————————————————————————— */
:root[data-theme="dark"]{
  color-scheme: dark;

  --fm-ground:#1A1716;
  --fm-panel:#211D1C;
  --fm-card:#292422;
  --fm-top:#332D2B;
  --fm-hover:#332D2B;
  --fm-line:#413A37;
  --fm-line-soft:#302B29;

  --fm-ink:#EEEAE8;
  --fm-ink-2:#C4BDBA;
  --fm-ink-3:#9E9794;
  --fm-heading:#F0ECEA;

  --fm-side:#241715;
  --fm-surface:#2F1B17;
  --fm-surface-deep:#3C1C16;
  --fm-on-brand:#F8EFEB;
  --fm-brand-edge:rgba(248,239,235,.13);

  --fm-brand:#7A3326;
  --fm-brand-soft:#2E1512;

  --fm-accent:#D98A57;
  --fm-accent-soft:#331E16;
  --fm-rubric:#D98A57;

  --fm-ok:#5FBE86;    --fm-ok-bg:#163020;
  --fm-warn:#E0B445;  --fm-warn-bg:#342712;
  --fm-hot:#EE8B4A;   --fm-hot-bg:#3A2111;
  --fm-bad:#F08077;   --fm-bad-bg:#3A1A18;

  --fm-heat-1:#2A201D; --fm-heat-2:#352320; --fm-heat-3:#412823;
  --fm-heat-4:#512E26; --fm-heat-5:#63362A;

  --fm-s1:#D98A57; --fm-s2:#6FB187; --fm-s3:#8098CC;
  --fm-s4:#D4A64A; --fm-s5:#B98BAE; --fm-s6:#63AFAE;


  --fm-accent-dim:rgba(217,138,87,.30);
  --fm-bad-dim:rgba(240,128,119,.30);
  --fm-ok-dim:rgba(95,190,134,.30);
  --fm-glow:#EE8B4A;
  --fm-glow-dim:rgba(238,139,74,.22);
  --fm-tint:rgba(248,239,235,.05);
  --fm-tint-2:rgba(248,239,235,.09);
  --fm-scrim:rgba(26,23,22,.74);
  --fm-wash-1:rgba(179,90,48,.08);
  --fm-wash-2:rgba(179,90,48,.05);
  --fm-shade:rgba(0,0,0,.35);
  --fm-shade-strong:rgba(0,0,0,.5);

  --fm-shadow:0 1px 2px rgba(0,0,0,.35);
  --fm-shadow-lift:0 1px 2px rgba(0,0,0,.35), 0 12px 28px rgba(0,0,0,.45);
  --fm-overlay:rgba(0,0,0,.6);
}

/* ============================================================================
   РАЗМЕР ТАБЛИЦ — один на весь кабинет (30.10.2026, просьба владельца:
   «переоформи все таблицы, сделай их меньше — как в финансовом учёте»).
   Ориентир взят с таблиц финансового кабинета: мелкий текст и тесные
   ячейки, чтобы на экран помещалось заметно больше строк.

   Страницы ссылаются на эти переменные, а не прописывают размеры у себя:
   поменять плотность ВСЕХ таблиц сразу = поправить четыре строки здесь.
   Размер от темы не зависит, поэтому блок один (в тёмной не дублируется).
   ========================================================================= */
:root{
  --tbl-font:13px;         /* текст ячейки */
  --tbl-head-font:10.5px;  /* заголовок столбца */
  --tbl-pad-y:7px;         /* высоту строки задаёт в основном он */
  --tbl-pad-x:9px;
}

/* ============================================================================
   ПЕРЕКЛЮЧАТЕЛЬ ТЕМ — справа вверху. Ставится только на страницах сотрудников.
   На клиентских страницах (презентация, материалы) его нет вообще.
   ========================================================================= */
.fm-theme{
  position:fixed; top:14px; right:16px; z-index:9000;
  display:inline-flex; gap:2px; padding:3px;
  background:var(--fm-card); border:1px solid var(--fm-line);
  border-radius:999px; box-shadow:var(--fm-shadow);
}
.fm-theme button{
  font:inherit; font-size:12px; font-weight:500; line-height:1;
  border:0; background:transparent; color:var(--fm-ink-3);
  border-radius:999px; padding:7px 12px; cursor:pointer;
  display:inline-flex; align-items:center; gap:6px;
}
.fm-theme button:hover{color:var(--fm-ink);}
.fm-theme button[aria-pressed="true"]{
  background:var(--fm-brand); color:var(--fm-on-brand);
  box-shadow:inset 0 0 0 1px var(--fm-brand-edge);
}
.fm-theme button:focus-visible{outline:2px solid var(--fm-accent); outline-offset:2px;}
.fm-theme svg{width:13px; height:13px; display:block; flex:none;}

/* В узком окне кабинета справа вверху уже стоит бургер — уводим переключатель
   под него, чтобы не перекрывал. 900px — та же точка, где прячется боковая
   панель (см. правило про два меню в team.html/cabinet.html). */
@media (max-width:900px){
  .fm-theme{top:auto; bottom:14px; right:14px;}
  .fm-theme button span{display:none;}
  .fm-theme button{padding:8px 10px;}
}

@media (prefers-reduced-motion: no-preference){
  .fm-theme, .fm-theme button{transition:background-color .15s ease, color .15s ease;}
}