/* ============================================================
   ЮК «Открытые Решения» — дизайн-токены CRM
   15.09.2026
   Подключать первым файлом, до остальных стилей.
   Шрифты положить в /static/fonts/ (Manrope 400/500/600/700, PT Serif 400/700).
   ============================================================ */

/* Гарнитура одна — Times New Roman, системная, подключать нечего.
   PT Serif стоит вторым в стопке: если решите перейти на него ради
   экранной читаемости, достаточно поменять порядок в --sans/--serif
   и положить два .woff2 в /static/fonts/. */

:root{
  /* --- шрифты ------------------------------------------------ */
  --sans:  "Times New Roman", Times, "PT Serif", Georgia, serif;
  --serif: "Times New Roman", Times, Georgia, serif;

  /* --- цвет: монохромная основа ------------------------------ */
  --ink:       #1c1d1f;   /* текст, суммы, заголовки          */
  --graphite:  #5c6066;   /* второстепенный текст             */
  --muted:     #9aa0a6;   /* подписи, шапки таблиц            */
  --line:      #eef1f4;   /* шов внутри карточки              */
  --ls:        #e6eaee;   /* редкий контур, если нужен        */
  --bg:        #f6f8fa;   /* фон страницы                     */
  --card:      #ffffff;   /* плоскость карточки               */

  /* --- единственный акцент ----------------------------------- */
  --accent:    #06b8af;
  --accent-s:  #e7f7f6;   /* подложка акцента                 */

  /* --- статусы: цвет + светлая подложка ---------------------- */
  --ok:        #3a7d72;   --ok-s:    #eaf4f2;
  --warn:      #8c7434;   --warn-s:  #f8f3e6;
  --alert:     #8f4a52;   --alert-s: #faeef0;

  /* --- геометрия --------------------------------------------- */
  --r:         12px;      /* карточки, плашки, сигналы        */
  --rs:        8px;       /* кнопки, поля                     */
  --rp:        999px;     /* статусы, чипы, счётчики          */
  --sh:        0 1px 2px rgba(24,28,33,.05), 0 6px 20px rgba(24,28,33,.045);
  --sh-accent: 0 2px 8px rgba(6,184,175,.28);

  --space-1: 4px;  --space-2: 8px;  --space-3: 12px;
  --space-4: 16px; --space-5: 24px; --space-6: 32px;

  --side-w:   236px;
  --rail-w:   68px;

  /* --- тёмное меню --- */
  --nav-bg:      #1c1d1f;
  --nav-text:    rgba(255,255,255,.72);
  --nav-active:  #ffffff;
  --nav-group:   rgba(255,255,255,.34);
  --nav-icon:    rgba(255,255,255,.38);
  --nav-hover:   rgba(255,255,255,.08);
  --nav-sep:     rgba(255,255,255,.12);
  --nav-alert:   #ffb3b9;
  --nav-alert-bg:rgba(255,120,130,.18);
  --appbar-h: 64px;
  --ctl-h:    38px;   /* кнопка, поле          */
  --ctl-sm:   30px;   /* внутри строки таблицы */
  --tap:      44px;   /* минимальная зона нажатия */

  /* --- движение ---------------------------------------------- */
  --t-hover: 100ms;  --t-fast: 160ms;  --t-base: 200ms;
  --t-panel: 240ms;  --t-flash: 400ms;
  --e-out:  cubic-bezier(.2, .8, .2, 1);
  --e-in:   cubic-bezier(.4, 0, 1, 1);
  --e-move: cubic-bezier(.4, 0, .2, 1);
}

/* ===== база ================================================== */
body{ background: var(--bg); color: var(--ink); font-family: var(--sans);
      font-size: 15px; line-height: 1.55; -webkit-font-smoothing: antialiased; }

/* У Times только два начертания. 500 и 600 браузер подделывает —
   текст выглядит грязно, поэтому в проекте только 400 и 700. */

h1{ font-family: var(--serif); font-size: 27px; font-weight: 400;
    letter-spacing: -.01em; line-height: 1.1; margin: 0; }

/* Все суммы, даты, номера и проценты — табличными цифрами.
   Без этого разряды в колонке не стоят друг под другом. */
.num, td.n, .v, .d, input[type="number"]{
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

/* ===== фокус (обязательно) =================================== */
:where(a, button, input, select, textarea, [tabindex]):focus-visible{
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: var(--rs);
}

/* ===== зона нажатия ========================================== */
/* Кнопка внутри строки таблицы может выглядеть на 30 px,
   но кликабельная область дотягивается невидимыми отступами до 44. */
.btn-sm{ position: relative; }
.btn-sm::after{
  content: ""; position: absolute; left: 50%; top: 50%;
  width: var(--tap); height: var(--tap); transform: translate(-50%, -50%);
}

/* ===== движение ============================================== */
.row{ transition: background-color var(--t-hover) var(--e-out); }
.row .acts{ opacity: 0; transition: opacity 120ms var(--e-out); }
.row:hover .acts{ opacity: 1; }          /* проявляется на месте, без сдвига */

.panel-body{ overflow: hidden;
  transition: height var(--t-base) var(--e-move),
              opacity var(--t-base) var(--e-out); }

.side{ transition: width var(--t-panel) var(--e-move); }
.side .label{ transition: opacity 120ms var(--e-in); }
.side.collapsed .label{ opacity: 0; }    /* подписи гаснут раньше ширины */

@keyframes flash{ from{ background: var(--accent-s) } to{ background: transparent } }
.saved{ animation: flash var(--t-flash) var(--e-out); }

/* ===== доступность (обязательно) ============================= */
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ===== тёмное меню ============================================ */
.side{
  width: var(--side-w);
  background: var(--nav-bg);
  color: var(--nav-text);
  padding: 0 10px;
}
.side a{
  display:flex; align-items:center; gap:10px;
  padding: 8px 10px; border-radius: var(--rs);
  color: var(--nav-text); text-decoration: none;
}
.side a:hover{ background: var(--nav-hover); color: var(--nav-active); }
.side a.on{
  background: var(--nav-hover);
  color: var(--nav-active);
  font-weight: 700;
  box-shadow: inset 3px 0 0 var(--accent);
}
.side a.on .ic{ color: var(--accent); }
.side .grp{ color: var(--nav-group); font-size: 11px; letter-spacing: .09em; text-transform: uppercase; font-weight: 700; }
.side .cnt.a{ color: var(--nav-alert); background: var(--nav-alert-bg); border-radius: 999px; padding: 1px 7px; }

/* Верхняя панель больше не нуждается в нижней границе:
   левый край экрана держит тёмное меню. */
.bar{ border-bottom: 0; background: transparent; }