/* ============================================================
   insAIder · UI Components (извлечено из design-system.html)
   Подключается после tokens.css.
   Версия: 1.0 · 2026-05-24
   ============================================================ */

/* === Wordmark / logo insAIder =============================
   Дизайнерский эталон: Space Grotesk + iridescent на «AI».
   Рендерится как ЕДИНОЕ слово «insAIder» без visible-gaps —
   НЕ inline-flex (flex-items с background-clip:text дают
   микро-зазоры между «ins», «AI», «der»). Обычный inline-поток.
   Используется отдельно от .mono (квадратик-monogram) —
   их нельзя ставить рядом в одной строке.
   ============================================================ */
.wm {
  font-family: var(--font-brand); font-weight: 600;
  letter-spacing: -0.035em; line-height: 1;
  color: var(--brand-navy); white-space: nowrap;
}
.wm--dark { color: #fff; }
.wm .ai {
  font-weight: 700; letter-spacing: -0.05em;
  background-image: var(--iridescent);
  -webkit-background-clip: text; background-clip: text;
  color: transparent; -webkit-text-fill-color: transparent;
}

/* monogram-квадратик с буквами AI */
.mono {
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--brand-navy); border-radius: 22%;
  flex: 0 0 auto;
}
.mono span {
  font-family: var(--font-brand); font-weight: 700; letter-spacing: -0.05em;
  background-image: var(--iridescent);
  -webkit-background-clip: text; background-clip: text;
  color: transparent; -webkit-text-fill-color: transparent;
  line-height: 1;
}

/* === Button ================================================ */
.btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 16px; height: 38px;
  font-family: var(--font-ui); font-size: var(--text-sm); font-weight: 500;
  border-radius: var(--radius-sm); border: 1px solid transparent;
  cursor: pointer; transition: background var(--dur-fast), border-color var(--dur-fast);
  white-space: nowrap; text-decoration: none;
}
.btn--primary { background: var(--brand-navy); color: var(--text-inverse); border-color: var(--brand-navy); }
.btn--primary:hover { background: var(--navy-700); }
.btn--teal { background: var(--teal-500); color: #fff; border-color: var(--teal-500); }
.btn--teal:hover { background: var(--teal-600); }
.btn--ghost { background: var(--surface); color: var(--brand-navy); border-color: var(--border-strong); }
.btn--ghost:hover { background: var(--navy-50); }
.btn--text { background: transparent; color: var(--brand-navy); border-color: transparent; }
.btn--text:hover { background: var(--navy-50); }
.btn--danger { background: var(--red-600); color: #fff; border-color: var(--red-600); }
.btn--danger:hover { background: var(--red-700); }
.btn--sm { height: 30px; padding: 5px 12px; font-size: var(--text-xs); border-radius: var(--radius-xs); }
.btn--lg { height: 46px; padding: 12px 22px; font-size: var(--text-md); }

/* === Field / Input ========================================= */
.field {
  display: flex; align-items: center; gap: 8px;
  background: var(--surface); border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm); padding: 8px 12px;
  font-size: var(--text-sm);
}
.field input, .field select, .field textarea {
  flex: 1; border: none; outline: none; background: transparent;
  font-family: var(--font-ui); font-size: var(--text-sm); color: var(--text-primary);
}
.field input::placeholder { color: var(--text-tertiary); }
.field:focus-within { border-color: var(--border-focus); box-shadow: 0 0 0 3px var(--cyan-100); }
.kbd {
  font-family: var(--font-mono); font-size: 10px; font-weight: 500;
  padding: 2px 5px; border-radius: 3px;
  background: var(--navy-50); color: var(--text-secondary);
}

/* === Badge / Pill ========================================== */
.badge {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 8px; border-radius: var(--radius-xs);
  font-family: var(--font-mono); font-size: var(--text-xs); font-weight: 500;
  letter-spacing: 0.06em; text-transform: uppercase;
  border: 1px solid transparent;
}
.badge--cyan   { background: var(--cyan-100);    color: var(--cyan-700);   border-color: var(--cyan-300); }
.badge--teal   { background: var(--teal-50);     color: var(--teal-700);   border-color: var(--teal-200); }
.badge--coral  { background: var(--coral-50);    color: var(--coral-700);  border-color: var(--coral-100); }
.badge--red    { background: var(--red-50);      color: var(--red-700);    border-color: var(--red-100); }
.badge--orange { background: var(--orange-50);   color: var(--orange-700); border-color: var(--orange-100); }
.badge--green  { background: var(--green-50);    color: var(--green-700);  border-color: var(--green-100); }
.badge--gray   { background: var(--navy-50);     color: var(--navy-400);   border-color: var(--navy-100); }
.badge--ai {
  background: var(--cyan-100); color: var(--cyan-700);
  border-color: var(--cyan-300);
}
.badge--ai::before {
  content: ''; width: 6px; height: 6px; border-radius: 3px;
  background: var(--brand-cyan); box-shadow: var(--glow-cyan);
}

/* === Card (универсальная по DESIGN.md §5) ================== */
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 18px 20px;
}

/* === KPI card (главный блок дашбордов) ===================== */
.kpi {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-md); padding: 18px 20px;
}
.kpi__label {
  font-family: var(--font-mono); font-size: var(--text-xs); font-weight: 500;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--text-tertiary); margin-bottom: 10px;
}
.kpi__value {
  font-family: var(--font-ui); font-size: var(--text-3xl); font-weight: 600;
  letter-spacing: -0.025em; line-height: 1;
  display: flex; align-items: baseline; gap: 6px;
}
.kpi__unit { font-size: 18px; color: var(--text-tertiary); font-weight: 400; }
.kpi__sub  { font-size: var(--text-sm); color: var(--text-secondary); margin-top: 8px; }
.kpi__delta { font-family: var(--font-mono); font-size: var(--text-xs); }
.kpi__delta--up   { color: var(--green-700); }
.kpi__delta--down { color: var(--red-700); }

/* === Banner ================================================ */
.banner {
  padding: 14px 18px; border-radius: var(--radius-md);
  font-size: var(--text-sm); border: 1px solid transparent;
  display: flex; gap: 12px; align-items: flex-start;
}
.banner__icon { flex: 0 0 auto; margin-top: 1px; }
.banner--info    { background: var(--blue-50);   color: var(--blue-700);   border-color: rgba(3,105,161,0.20); }
.banner--warning { background: var(--yellow-50); color: var(--yellow-700); border-color: rgba(161,98,7,0.20); }
.banner--success { background: var(--green-50);  color: var(--green-700);  border-color: rgba(21,128,61,0.20); }
.banner--danger  { background: var(--red-50);    color: var(--red-700);    border-color: rgba(185,28,28,0.20); }
.banner b { font-weight: 600; }

/* === Insight (AI/анализ) =================================== */
.insight {
  background: var(--surface); border: 1px solid var(--border);
  border-left: 3px solid var(--brand-cyan);
  border-radius: var(--radius-md);
  padding: 14px 18px; display: flex; gap: 14px; align-items: flex-start;
  transition: box-shadow var(--dur-fast), transform var(--dur-fast);
}
.insight:hover { box-shadow: var(--shadow-md); transform: translateX(2px); }
.insight__body { flex: 1; }
.insight__title { font-weight: 600; font-size: var(--text-base); margin: 0 0 4px; }
.insight__text  { font-size: var(--text-sm); color: var(--text-secondary); margin: 0; }
.insight__delta { font-family: var(--font-mono); font-size: var(--text-sm); font-weight: 600; }
.insight__arrow { color: var(--text-tertiary); transition: transform var(--dur-fast), color var(--dur-fast); }
.insight:hover .insight__arrow { transform: translateX(4px); color: var(--text-primary); }
.insight--good { border-left-color: var(--green-600); }
.insight--good .insight__delta { color: var(--green-700); }
.insight--warn { border-left-color: var(--orange-500); }
.insight--warn .insight__delta { color: var(--orange-700); }
.insight--bad  { border-left-color: var(--red-600); }
.insight--bad  .insight__delta { color: var(--red-700); }
.insight--ai   { border-left-color: var(--brand-cyan); }

/* === Nav app sidebar ======================================= */
.nav-app {
  background: var(--surface); border-right: 1px solid var(--border);
  padding: 16px 12px; width: 232px;
}
.nav-app__item {
  display: flex; align-items: center; gap: 10px;
  padding: 7px 10px; border-radius: var(--radius-sm);
  font-size: var(--text-sm); color: var(--text-secondary);
  cursor: pointer; user-select: none; text-decoration: none;
}
.nav-app__item--active { background: var(--navy-50); color: var(--text-primary); font-weight: 500; }
.nav-app__item:hover { background: var(--navy-50); }
.nav-app__count {
  margin-left: auto; font-family: var(--font-mono); font-size: 10px;
  padding: 1px 6px; border-radius: 3px;
  background: var(--cyan-100); color: var(--cyan-700); font-weight: 600; letter-spacing: 0.04em;
}

/* === Table ================================================= */
.table {
  width: 100%; border-collapse: collapse;
  font-size: var(--text-sm);
  background: var(--surface);
  border: 1px solid var(--border); border-radius: var(--radius-md);
  overflow: hidden;
}
.table th, .table td {
  text-align: left; padding: 10px 14px;
  border-bottom: 1px solid var(--border);
}
.table thead th {
  background: var(--surface-2); font-family: var(--font-mono);
  font-size: var(--text-xs); letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--text-tertiary); font-weight: 500;
}
.table tbody tr:last-child td { border-bottom: none; }
.table tbody tr:hover { background: var(--surface-2); }
.table .num { font-family: var(--font-mono); text-align: right; }

/* === Login card ============================================ */
.login-card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-lg); padding: 36px 40px;
  width: 380px; box-shadow: var(--shadow-lg);
  display: flex; flex-direction: column; gap: 14px;
}
.login-card__brand {
  display: flex; flex-direction: column; align-items: center;
  gap: 10px; margin-bottom: 6px;
}
.login-card__title {
  font-size: var(--text-xl); font-weight: 600; letter-spacing: -0.015em; margin: 0;
}
.login-card__sub {
  font-size: var(--text-sm); color: var(--text-secondary); margin: 0;
}
.login-card__field { display: flex; flex-direction: column; gap: 6px; }
.login-card__field label {
  font-family: var(--font-mono); font-size: var(--text-xs);
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--text-tertiary); font-weight: 500;
}
.login-card__hint {
  font-size: var(--text-xs); color: var(--text-tertiary);
  text-align: center; margin: 8px 0 0;
}
.login-card__error {
  font-family: var(--font-mono); font-size: var(--text-xs);
  color: var(--red-600); text-align: center; margin: -4px 0 4px;
}

/* === Utility: число моноширинным шрифтом =================== */
.num { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }

/* === Служебный текст не выделяется мышью (Пр-157) =========== */
/* Меню, заголовки колонок, подписи и ЧИСЛА KPI-карточек, бейджи, подписи
   полей и графиков — это хром интерфейса: системное синее выделение на них
   выглядит дёшево, а курсор-«I» намекает на редактируемый текст.
   Значения и названия в ЯЧЕЙКАХ таблиц выделять МОЖНО и НУЖНО — клиент
   копирует сумму или название товара, чтобы найти его в учёте.
   Граница подтверждена Нурланом 17.08.2026: хром + числа KPI, ячейки живые.
   Список селекторов покрывает варианты, реально встречающиеся на порталах
   Покрыты и DS-имена (kpi__label, nav-app), и клиентские (card .value,
   ds-table th, nav-item).
   ⚠️ В комментариях CSS не писать последовательность звёздочка-слэш внутри
   текста: она закрывает комментарий досрочно и парсер съедает следующее
   правило целиком. На этом уже поймались 17.08.2026. */
aside.side, .nav-app, .nav-app__item, .nav-item, .nav-group, .nav-stub-badge,
th,
.kpi__label, .kpi__value, .kpi__unit, .card .label, .card .value,
.badge, .st, .tag,
.login-card__field label, .banner__title,
.filter-bar label, .fld label, .bar-lab, .bar-val,
.ds-hint {
  -webkit-user-select: none; user-select: none;
}
aside.side, .nav-app, th,
.kpi__label, .kpi__value, .card .label, .card .value,
.login-card__field label, .filter-bar label, .fld label { cursor: default; }
/* кликабельное внутри хрома курсор не теряет */
aside.side a, .nav-app__item, .nav-item, a.badge, th a { cursor: pointer; }

/* === ds-hint: подсказка-аннотация «?» ======================= */
/* ⚠️ Имя именно `ds-hint`, НЕ `hint`: класс `.hint` уже занят у
   kenkost-assistant, 555 и gos — там это мелкий серый текст-пояснение.
   Переиспользование имени превратило бы их подписи в круглые значки. */
/* Ставится в заголовок отчёта или колонки: наводишь мышь — короткое описание,
   что за цифра и как считается. Источник данных (таблицы, базы, регистры)
   в подсказке НЕ упоминаем — правило платформы.
   Разметка: <span class="ds-hint" tabindex="0">?<span class="ds-hint__body">текст</span></span>
   Блок раскрывается ВНИЗ: у карточек и обёрток таблиц бывает overflow:hidden.
   Если контейнер всё же обрезает — переводить .ds-hint__body в position:fixed
   и считать координаты по getBoundingClientRect (эталон: clients/kbk). */
.ds-hint {
  display: inline-flex; align-items: center; justify-content: center;
  width: 15px; height: 15px; flex: 0 0 auto; margin-left: 6px; vertical-align: 1px;
  border-radius: 50%; border: 1px solid var(--cyan-300);
  background: var(--cyan-bg); color: var(--cyan-800);
  font-family: var(--font-ui); font-size: 10px; font-weight: 700; line-height: 1;
  text-transform: none; letter-spacing: 0; cursor: help; position: relative;
  -webkit-user-select: none; user-select: none;
}
.ds-hint:hover, .ds-hint:focus { background: var(--cyan-300); outline: none; }
.ds-hint > .ds-hint__body {
  position: absolute; top: calc(100% + 7px); left: 50%; transform: translateX(-50%);
  width: max-content; max-width: 280px; padding: 9px 12px;
  background: var(--surface); color: var(--text-secondary);
  border: 1px solid var(--cyan-300); border-radius: var(--radius-md);
  font-size: var(--text-xs); font-weight: 400; line-height: 1.55;
  text-align: left; text-transform: none; letter-spacing: 0; white-space: normal;
  box-shadow: var(--shadow-lg, 0 8px 24px rgba(15, 27, 61, 0.16));
  opacity: 0; visibility: hidden; transition: opacity 0.12s;
  z-index: 60; pointer-events: none;
}
.ds-hint > .ds-hint__body b { color: var(--text-primary); }
.ds-hint:hover > .ds-hint__body, .ds-hint:focus > .ds-hint__body { opacity: 1; visibility: visible; }