/* ═══════════════════════════════════════════════════════════════════
   mirko.ai — брендовый слой поверх клиентской темы
   ───────────────────────────────────────────────────────────────────
   Что делает: типографика дизайн-системы mirko.ai + wordmark в шапке.
   Чего НЕ делает: не трогает цвета клиента. --brand-color и всё, что
   от него зависит, остаётся за theme.css и brand-config.js.

   Подключать ПОСЛЕ theme.css и ДО постраничных стилей.
   ═══════════════════════════════════════════════════════════════════ */

@import url("./mirko-fonts.css");

:root {
  /* ── Фирменные цвета mirko.ai (только для wordmark, не для UI) ── */
  --mk-red: #E64A35;
  --mk-red-dark: #C63C29;
  --mk-ink: #211E1B;
  --mk-ink-2: #6B655E;

  /* ── Шрифтовые стеки ──
     MirkoNum первым: цифры уходят в Outfit, буквы — в Manrope.
     Подробности в mirko-fonts.css. */
  --mk-font-body: 'MirkoNum', 'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --mk-font-display: 'MirkoNum', 'Manrope', system-ui, -apple-system, sans-serif;
  --mk-font-wordmark: 'Outfit', system-ui, sans-serif;

  /* Табличные цифры — всегда включены на числах */
  --mk-num-feat: "tnum" 1, "lnum" 1;

  /* Трекинг заголовков (Manrope тесноват — поджимаем как в системе) */
  --mk-ls-h1: -0.025em;
  --mk-ls-h2: -0.02em;
  --mk-ls-h3: -0.015em;
}

/* ── База ───────────────────────────────────────────────────────── */
body {
  font-family: var(--mk-font-body);
  /* Цифры табличные по всему дашборду: колонки не «прыгают» при
     обновлении данных, суммы выравниваются по разрядам. */
  font-variant-numeric: tabular-nums lining-nums;
  font-feature-settings: var(--mk-num-feat);
}

/* Контролы наследуют стек (в theme.css уже font-family: inherit,
   но select в Firefox/Safari иногда откатывается на системный). */
button, input, select, textarea, optgroup {
  font-family: var(--mk-font-body);
  font-variant-numeric: tabular-nums lining-nums;
}

/* ── Заголовки ──────────────────────────────────────────────────── */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--mk-font-display);
  font-weight: 700;
}
h1 { letter-spacing: var(--mk-ls-h1); }
h2 { letter-spacing: var(--mk-ls-h2); }
h3, h4 { letter-spacing: var(--mk-ls-h3); }

/* Заголовок в шапке — плотнее и чуть тяжелее, как в дизайн-системе */
.app-header h1 {
  font-weight: 700;
  letter-spacing: -0.02em;
}

/* ── Числа в таблицах ───────────────────────────────────────────── */
/* Стек уже на body, здесь только гарантируем tnum там, где страничные
   стили могли перебить font-feature-settings. */
table th,
table td {
  font-variant-numeric: tabular-nums lining-nums;
  font-feature-settings: var(--mk-num-feat);
}

/* Шапки таблиц — Manrope semibold, чуть разреженный микро-лейбл */
.glass-table th {
  font-weight: 600;
  letter-spacing: 0.01em;
}

/* Итоговые строки — цифры весомее */
.glass-table tfoot td,
.glass-table .row-total td {
  font-weight: 700;
}

/* ── Wordmark mirko.ai в шапке ──────────────────────────────────── */
/* Прижимается к правому краю: .app-header — flex, margin-left:auto
   отодвигает блок от навигации без лишних распорок. */
.mk-wordmark {
  margin-left: auto;
  display: inline-flex;
  align-items: baseline;
  gap: 7px;
  text-decoration: none;
  white-space: nowrap;
  flex-shrink: 0;
  padding: 4px 2px;
  border-radius: 8px;
  transition: opacity 0.15s ease, transform 0.15s ease;
}

/* Отклик на наведение — только когда wordmark реально ссылка.
   Без сайта brand-config.js рендерит <span>, и подсветка не нужна:
   она обещала бы переход, которого нет. */
a.mk-wordmark:hover {
  opacity: 0.85;
  transform: translateY(-1px);
}

a.mk-wordmark:active {
  transform: scale(0.98);
}

span.mk-wordmark {
  cursor: default;
  user-select: none;
}

/* «дашборд от» — тихая подпись слева от логотипа */
.mk-wordmark-by {
  font-family: var(--mk-font-body);
  font-size: 11px;
  font-weight: 500;
  color: var(--mk-ink-2);
  letter-spacing: 0.01em;
}

/* Сам логотип — Outfit 700, как в assets/logo.svg дизайн-системы */
.mk-wordmark-text {
  font-family: var(--mk-font-wordmark);
  font-size: 19px;
  font-weight: 700;
  letter-spacing: -0.035em;
  color: var(--mk-ink);
  line-height: 1;
}

.mk-wordmark-text .mk-dot-ai {
  color: var(--mk-red);
}

/* ── Мобильная адаптация ────────────────────────────────────────── */
/* В шапке на телефоне место дорогое: подпись убираем, логотип
   оставляем — узнаваемость сохраняется. */
@media (max-width: 700px) {
  .mk-wordmark-by { display: none; }
  .mk-wordmark-text { font-size: 16px; }
  .mk-wordmark { gap: 0; padding: 2px; }
}