/* ═══════════════════════════════════════════════════════════════
   CONTAB — Components (дизайн-система «Точка Роста»)
   Легаси-классы платформы (btn, card, pill-*, status-dot,
   btn-icon, back-link, c-*) сохранены и переодеты в новый стиль.
   Все цвета — только var(--…). Требует tokens/*, подключается
   подключается после shell.css (см. includes/head_css.html).
   Primary-кнопка = солидный графит; лайм = акцентная кнопка
   (.btn-accent) с ТЁМНЫМ текстом (--accent-text).
   ═══════════════════════════════════════════════════════════════ */

/* ── CARD: стеклянная контентная поверхность (Liquid Glass v2) ──
   Blur только на контейнере — НИКОГДА на строках/ячейках таблиц. */
.card {
  background: var(--glass-card); border: 1px solid var(--glass-edge);
  -webkit-backdrop-filter: blur(var(--glass-card-blur)) saturate(170%);
  backdrop-filter: blur(var(--glass-card-blur)) saturate(170%);
  border-radius: var(--r-card, 16px); overflow: hidden;
  box-shadow: 0 1px 2px rgba(15,20,30,.05), 0 8px 28px -14px rgba(15,20,30,.12);
}
:is([data-theme="dark"]) .card {
  box-shadow: 0 1px 2px rgba(0,0,0,.5), 0 10px 30px -12px rgba(0,0,0,.55);
}

/* ── BUTTONS ── */
.btn {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 9px 16px; border-radius: var(--radius-md); border: none;
  font-family: inherit; font-size: 14px; font-weight: var(--fw-medium);
  cursor: pointer; text-decoration: none; line-height: 1.35;
  transition: background-color var(--dur-base) var(--ease-out),
              border-color var(--dur-base) var(--ease-out),
              color var(--dur-base) var(--ease-out),
              transform .05s var(--ease-out);
}
.btn:active { transform: scale(.97); }
.btn-primary { background: var(--btn-primary-bg); color: var(--btn-primary-color); }
.btn-primary:hover { background: var(--btn-primary-hover); }
.btn-accent { background: var(--accent); color: var(--accent-text); }
.btn-accent:hover { background: var(--accent-hover); color: var(--accent-text); }
.btn-ghost, .btn-outline {
  background: var(--surface); border: 1px solid var(--border); color: var(--text);
  padding: 8px 15px;
}
.btn-ghost:hover, .btn-outline:hover { background: var(--bg-soft); border-color: var(--border-2); color: var(--text); }
.btn-danger { background: var(--red-bg); border: 1px solid transparent; color: var(--danger-text); }
.btn-danger:hover { background: var(--danger); color: #fff; }
.btn-sm { padding: 6px 12px; font-size: 13px; border-radius: var(--radius-sm); }
.btn-ghost.btn-sm, .btn-outline.btn-sm { padding: 5px 11px; }

/* ── BADGES / PILLS ── */
.pill {
  display: inline-block; padding: 3px 11px; border-radius: var(--radius-full);
  font-size: 12px; font-weight: var(--fw-semibold); border: 1px solid transparent;
  line-height: 1.5;
}
.pill-A, .pill-green  { background: var(--success-soft); color: var(--success-text); }
.pill-B, .pill-orange { background: var(--warning-soft); color: var(--warning-text); }
.pill-C, .pill-red    { background: var(--danger-soft);  color: var(--danger-text); }
.pill-gray            { background: var(--bg-soft);      color: var(--muted); }
.pill-brand           { background: var(--accent-soft);  color: var(--accent-strong); }

/* ── STATUS DOTS ── */
.status-dot {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12px; font-weight: var(--fw-semibold);
}
.status-dot::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex-shrink: 0; }
.status-active     { color: var(--success-text); }
.status-disconnect { color: var(--muted); }
.status-court      { color: var(--danger-text); }
.status-suspend    { color: var(--warning-text); }
.status-liquidated { color: var(--muted); text-decoration: line-through; }

/* ── ICON BUTTONS ── */
.btn-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; border-radius: var(--radius-sm);
  border: 1px solid var(--border); background: var(--surface); color: var(--muted);
  cursor: pointer; text-decoration: none; vertical-align: middle;
  transition: background-color var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out);
}
.btn-icon:hover { color: var(--text); border-color: var(--border-2); background: var(--bg-soft); }
.btn-icon-danger { background: var(--danger-soft); color: var(--danger-text); border-color: transparent; }
.btn-icon-danger:hover { background: var(--danger); color: #fff; }
.btn-icon-warn { background: var(--warning-soft); color: var(--warning-text); border-color: transparent; }
/* На янтарной заливке белый даёт ~2.1:1 — текст тёмный */
.btn-icon-warn:hover { background: var(--warning); color: #3A2606; }

/* ── BACK LINK ── */
.back-link {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 12.5px; font-weight: var(--fw-medium); color: var(--muted);
  text-decoration: none; margin-bottom: 8px;
  transition: color var(--dur-fast) var(--ease-out);
}
.back-link svg { flex-shrink: 0; }
.back-link:hover { color: var(--text); }

/* ── FORMS: anti-double-submit feedback (глобальный listener в base.html) ── */
form button:disabled, form input[type=submit]:disabled {
  opacity: 0.6; cursor: not-allowed; filter: saturate(.5);
}
form button[aria-busy=true]::after, form input[type=submit][aria-busy=true]::after {
  content: ''; display: inline-block; width: 12px; height: 12px;
  margin-left: 7px; vertical-align: -2px;
  border: 2px solid currentColor; border-right-color: transparent;
  border-radius: 50%; animation: contab-spin .7s linear infinite;
  opacity: .85;
}
@keyframes contab-spin { to { transform: rotate(360deg); } }

/* ── C-EMPTY: empty-state (standalone — стеклянная карточка) ── */
.c-empty {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 8px; padding: 48px 24px; text-align: center;
  color: var(--muted);
  background: var(--glass-card); border: 1px solid var(--glass-edge);
  -webkit-backdrop-filter: blur(var(--glass-card-blur)) saturate(170%);
  backdrop-filter: blur(var(--glass-card-blur)) saturate(170%);
  border-radius: var(--r-card, 16px);
  box-shadow: var(--shadow-card);
}
/* Внутри карточки — без вложенного стекла */
.card .c-empty {
  background: transparent; border: none; box-shadow: none;
  -webkit-backdrop-filter: none; backdrop-filter: none;
}
.c-empty__icon {
  width: 44px; height: 44px; border-radius: var(--radius-lg);
  display: flex; align-items: center; justify-content: center;
  background: var(--bg-soft); color: var(--muted);
  margin-bottom: 4px;
}
.c-empty__icon svg { width: 22px; height: 22px; }
.c-empty__title { font-size: 14px; font-weight: var(--fw-semibold); color: var(--text); }
.c-empty__hint  { font-size: 13px; color: var(--muted); max-width: 360px; }
.c-empty .btn   { margin-top: 8px; }

/* ── C-TOAST: тосты (JS-hook: window.CONTAB.toast из format.js) ── */
.c-toast-stack {
  position: fixed; right: 16px; bottom: 16px; z-index: 400;
  display: flex; flex-direction: column; gap: 8px; align-items: flex-end;
  pointer-events: none;
}
.c-toast {
  display: inline-flex; align-items: center; gap: 8px;
  max-width: 360px; padding: 10px 14px;
  background: var(--bg-elevated); color: var(--text);
  border: 1px solid var(--border); border-left: 3px solid var(--muted);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-pop);
  font-size: 13px; font-weight: var(--fw-medium); line-height: 1.4;
  pointer-events: auto;
  opacity: 0; transform: translateY(6px);
  transition: opacity var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out);
}
.c-toast.visible { opacity: 1; transform: translateY(0); }
.c-toast--success { border-left-color: var(--success); }
.c-toast--error   { border-left-color: var(--danger); }
.c-toast--warning { border-left-color: var(--warning); }
.c-toast--info    { border-left-color: var(--info); }

/* ── C-FILTERBAR: единственный вид фильтров (контракт §3) ──
   Карточка под шапкой на всю ширину контента. Внутри: поиск слева,
   группы чипов (__group + __lbl), разделители (__sep), контролы
   (.c-select / .c-date), __spacer и btn-primary btn-sm при submit. */
.c-filterbar {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 10px 14px; margin-bottom: 14px;
  background: var(--glass-card-strong); border: 1px solid var(--glass-edge);
  -webkit-backdrop-filter: blur(var(--glass-card-blur)) saturate(170%);
  backdrop-filter: blur(var(--glass-card-blur)) saturate(170%);
  border-radius: 14px; box-shadow: var(--shadow-card);
  /* backdrop-filter создаёт stacking context: без подъёма выпадашки
     внутри бара (.ac-suggest) ушли бы ПОД следующую .card (тоже стекло).
     2 < 50 у .page-header — шапку не перекрываем. */
  position: relative; z-index: 2;
}
.c-filterbar__group { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.c-filterbar__lbl {
  font-size: var(--fs-label); font-weight: var(--fw-semibold); text-transform: uppercase;
  letter-spacing: var(--ls-label); color: var(--text-faint); margin-right: 2px;
  white-space: nowrap;
}
.c-filterbar__sep { width: 1px; height: 22px; background: var(--border); flex-shrink: 0; }
.c-filterbar__spacer { flex: 1; }
.c-filterbar__search {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 0 12px; min-width: 210px;
  border: 1px solid var(--border); border-radius: var(--radius-md);
  background: var(--surface); color: var(--muted);
  transition: border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}
.c-filterbar__search svg { flex-shrink: 0; }
/* Специфичность 0,2,1+ — чтобы перебить «сетку-ловушку» форм из tokens/base.css */
.c-filterbar .c-filterbar__search input,
.c-filterbar .c-filterbar__search input:focus {
  border: none; outline: none; background: transparent; box-shadow: none;
  font-family: inherit; font-size: 13px; color: var(--text);
  padding: 8px 0; width: 100%; min-width: 140px; border-radius: 0;
}
.c-filterbar .c-filterbar__search input::placeholder { color: var(--text-faint); }
.c-filterbar__search:focus-within { border-color: var(--accent); box-shadow: var(--ring); }

/* Чип-фильтр: default — surface; active — лаймовый (НЕ графит) */
.c-chip {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 5px 13px; border-radius: var(--radius-full);
  border: 1px solid var(--border); background: var(--surface); color: var(--muted);
  font-family: inherit; font-size: 12.5px; font-weight: var(--fw-medium);
  line-height: 1.5; white-space: nowrap;
  cursor: pointer; text-decoration: none;
  transition: background-color var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out);
}
.c-chip:hover { color: var(--text); border-color: var(--border-2); background: var(--bg-soft); }
.c-chip.active {
  background: var(--accent-soft); color: var(--accent-strong);
  border-color: transparent; font-weight: var(--fw-semibold);
}
.c-chip.active:hover { background: var(--accent-soft); color: var(--accent-strong); }

/* Контролы фильтр-бара.
   «Сетка-ловушка» голых Django-полей (tokens/base.css) имеет
   специфичность 0,2,1 — :is(.page-body,…) :is(input[type=…], select).
   Поэтому дубль тоже должен быть 0,2,1: элемент+класс внутри :is()
   (select.c-select = 0,1,1). При равной специфичности выигрывает
   components.css — он импортируется после tokens/base.css. */
.c-select, .c-date,
:is(.page-body, .tr-content, .c-filterbar) :is(select.c-select, input.c-date) {
  padding: 7px 10px; border: 1px solid var(--border); border-radius: var(--radius-md);
  background: var(--surface); color: var(--text);
  font-family: inherit; font-size: 13px;
  transition: border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}
.c-select { cursor: pointer; }
.c-select:focus, .c-date:focus,
:is(.page-body, .tr-content, .c-filterbar) :is(select.c-select, input.c-date):focus {
  outline: none; border-color: var(--accent); box-shadow: var(--ring);
}

@media (max-width: 768px) {
  .c-filterbar { padding: 10px 12px; gap: 8px; }
  .c-filterbar__sep { display: none; }
  .c-filterbar__search { min-width: 0; width: 100%; }
}

/* ── C-METRICS: единственный вид KPI (контракт §2) ── */
.c-metrics {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(150px, 100%), 1fr));
  gap: 12px;
}
.c-metric {
  display: flex; flex-direction: column; gap: 3px;
  padding: 15px 16px; border-radius: 18px;
  background: var(--glass-card); border: 1px solid var(--glass-edge);
  -webkit-backdrop-filter: blur(var(--glass-card-blur)) saturate(170%);
  backdrop-filter: blur(var(--glass-card-blur)) saturate(170%);
  box-shadow: var(--shadow-card);
  transition: transform .18s var(--ease-out), box-shadow .18s var(--ease-out);
}
.c-metric:hover { transform: translateY(-2px); box-shadow: var(--shadow-pop); }
.c-metric__top {
  display: flex; align-items: center; justify-content: space-between;
  gap: 8px; margin-bottom: 6px; min-height: 20px;
}
.c-metric__top:has(.c-metric__delta:only-child) { justify-content: flex-end; }
.c-metric__ico {
  width: 32px; height: 32px; border-radius: 8px; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--bg-soft); color: var(--muted);
}
.c-metric__ico svg { width: 16px; height: 16px; }
.c-metric__ico--lime   { background: var(--accent-soft);  color: var(--accent-strong); }
.c-metric__ico--green  { background: var(--success-soft); color: var(--ok-text); }
.c-metric__ico--red    { background: var(--danger-soft);  color: var(--debt-text); }
.c-metric__ico--orange { background: var(--warning-soft); color: var(--warn-text); }
.c-metric__ico--blue   { background: var(--info-soft);    color: var(--info-chart-text); }
.c-metric__delta {
  display: inline-flex; align-items: center; gap: 3px;
  padding: 2px 8px; border-radius: var(--radius-full);
  font-size: 11px; font-weight: var(--fw-semibold);
  font-variant-numeric: tabular-nums;
  background: var(--bg-soft); color: var(--muted);
}
.c-metric__delta.up   { background: var(--success-soft); color: var(--ok-text); }
.c-metric__delta.down { background: var(--danger-soft);  color: var(--debt-text); }
.c-metric__lbl {
  font-size: var(--fs-label); font-weight: var(--fw-semibold); text-transform: uppercase;
  letter-spacing: var(--ls-label); color: var(--text-faint);
}
.c-metric__num {
  font-size: 25px; font-weight: var(--fw-semibold);
  font-variant-numeric: tabular-nums; line-height: 1.1;
  letter-spacing: var(--ls-tight); color: var(--text);
}
.c-metric__num.red    { color: var(--debt-text); }
.c-metric__num.green  { color: var(--ok-text); }
.c-metric__num.blue   { color: var(--info-chart-text); }
.c-metric__num.orange { color: var(--warn-text); }
.c-metric__num.accent { color: var(--accent-strong); }
.c-metric__sub { font-size: 11px; color: var(--muted); }

/* Горизонтальная лента метрик (напр. остатки счетов в календаре):
   один ряд с горизонтальным скроллом вместо грид-переноса. */
.c-metrics--scroll {
  display: flex; overflow-x: auto; -webkit-overflow-scrolling: touch;
  padding-bottom: 4px;
}
.c-metrics--scroll .c-metric { flex: 0 0 auto; min-width: 150px; }

/* ── C-TABLE: один табличный скин (контракт §4).
   Всегда внутри .table-wrap [.table-wrap--sticky]; sticky-паттерны
   (thead top:0 z:2, sticky-left колонки z:2/3) совместимы. ── */
.c-table { width: 100%; border-collapse: collapse; }
.c-table thead th {
  text-align: left; padding: 10px 14px;
  font-size: 10.5px; font-weight: 600; text-transform: uppercase;
  letter-spacing: var(--ls-wide); color: var(--text-faint);
  border-bottom: 1px solid var(--border); background: var(--glass-card-solid);
  position: sticky; top: 0; z-index: 2; white-space: nowrap;
}
.c-table td {
  padding: 12px 14px; font-size: 13px; vertical-align: middle;
  border-bottom: 1px solid var(--border);
}
.c-table tbody tr:last-child td { border-bottom: none; }
.c-table tbody tr:hover td { background: var(--bg-soft); }
.c-table th.right, .c-table td.right { text-align: right; }
.c-table td.right, .c-table td.num { font-variant-numeric: tabular-nums; }
.c-table .cell-name { font-size: 14px; font-weight: var(--fw-semibold); }
.c-table .cell-sub  { font-size: 12px; color: var(--muted); font-weight: var(--fw-regular); margin-top: 1px; }
.c-table a { text-decoration: none; }

/* ── CARD-HEAD: заголовок секции-карточки (контракт §6) ── */
.card-head {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 13px 18px; border-bottom: 1px solid var(--border-soft);
}
.card-head__title { font-size: 15px; font-weight: var(--fw-semibold); color: var(--text); }
.card-head__meta  { font-size: 11px; color: var(--muted); }

/* ═══════════════════════════════════════════════════════════════
   MOTION-СЛОЙ (Liquid Glass v2) — пара к static/js/contab-motion.js
   ═══════════════════════════════════════════════════════════════ */

/* Press-эффект: чипы, кнопки, сегменты — короткий «нажим» */
:is(.c-chip, .btn-icon, .tr-seg__opt, .bgpick-swatch, .c-filterbar .btn):active {
  transform: scale(.97);
}

/* Scroll-reveal: элементы с [data-reveal] мягко всплывают.
   Скрываются ТОЛЬКО когда motion.js добавил html.has-motion —
   без JS всё видно сразу. Stagger — через data-reveal-order (JS). */
html.has-motion [data-reveal] {
  opacity: 0; transform: translateY(12px);
  transition: opacity .38s var(--ease-out), transform .38s var(--ease-out);
  transition-delay: var(--reveal-delay, 0s);
  will-change: opacity, transform;
}
html.has-motion [data-reveal].is-revealed {
  opacity: 1; transform: none;
  will-change: auto;
}
@media (prefers-reduced-motion: reduce) {
  html.has-motion [data-reveal] { opacity: 1; transform: none; transition: none; }
}

/* ═══ Деградации стекла контента ═══ */

/* Без backdrop-filter: полупрозрачный фон поверх спокойного градиента
   остаётся читаемым, но плотность поднимаем */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .card, .c-empty { background: rgba(255,255,255,.86); }
  .c-metric, .c-filterbar { background: rgba(255,255,255,.9); }
  :is([data-theme="dark"]) :is(.card, .c-empty) { background: rgba(20,21,25,.88); }
  :is([data-theme="dark"]) :is(.c-metric, .c-filterbar) { background: rgba(22,23,28,.92); }
}

/* Пользователь просит меньше прозрачности → солидные поверхности */
@media (prefers-reduced-transparency: reduce) {
  .card, .c-metric, .c-filterbar, .c-empty {
    background: var(--glass-card-solid);
    -webkit-backdrop-filter: none; backdrop-filter: none;
  }
}