/* Компоненты CRM (ТЗ по дизайну, раздел 3.4). Только токены из tokens.css. Витрина — /ui-kit. */

/* Иконки: SVG-спрайт /static/icons.svg, 16 и 20 px, currentColor */
.ico { width:var(--icon-sm); height:var(--icon-sm); flex:none; fill:none; stroke:currentColor; stroke-width:1.8;
       stroke-linecap:round; stroke-linejoin:round; vertical-align:-3px; }
.ico.md { width:var(--icon-md); height:var(--icon-md); }

/* Видимый фокус на всём, что можно выбрать с клавиатуры */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible { outline:2px solid var(--c-primary); outline-offset:2px; }

/* ---------- Кнопка: primary / secondary / ghost / danger; sm / md; loading ---------- */
.btn, button { display:inline-flex; align-items:center; justify-content:center; gap:var(--sp-2); height:var(--h-control);
  padding:0 var(--sp-4); font:var(--fw-medium) var(--fs-md)/var(--lh-md) var(--font); border-radius:var(--r-md);
  border:1px solid var(--c-primary); background:var(--c-primary); color:var(--c-on-primary); cursor:pointer;
  white-space:nowrap; text-decoration:none; transition:background var(--t-fast), border-color var(--t-fast); }
.btn:hover, button:hover { background:var(--c-primary-hover); border-color:var(--c-primary-hover); text-decoration:none; }
.btn.secondary, button.secondary, .btn.sec, button.sec { background:var(--c-surface); color:var(--c-primary); border-color:var(--c-border-strong); }
.btn.secondary:hover, button.secondary:hover, .btn.sec:hover, button.sec:hover { background:var(--c-info-bg); border-color:var(--c-primary); }
.btn.ghost, button.ghost { background:transparent; border-color:transparent; color:var(--c-text); }
.btn.ghost:hover, button.ghost:hover { background:var(--c-surface-sunken); }
.btn.danger, button.danger { background:var(--c-surface); color:var(--c-danger); border-color:var(--c-danger); }
.btn.danger:hover, button.danger:hover { background:var(--c-danger-bg); }
.btn.danger.solid, button.danger.solid { background:var(--c-danger); color:var(--c-on-primary); }
.btn.sm, button.sm { height:var(--h-control-sm); padding:0 var(--sp-3); font-size:var(--fs-sm); }
.btn.icon, button.icon { width:var(--h-control); padding:0; } .btn.icon.sm, button.icon.sm { width:var(--h-control-sm); }
.btn:disabled, button:disabled, .btn[aria-disabled="true"] { opacity:.5; cursor:default; pointer-events:none; }
.btn.loading, button.loading { color:transparent !important; position:relative; pointer-events:none; }
.btn.loading::after, button.loading::after { content:""; position:absolute; width:var(--icon-sm); height:var(--icon-sm);
  border:2px solid var(--c-on-primary); border-right-color:transparent; border-radius:var(--r-full); animation:spin .7s linear infinite; }
.btn.secondary.loading::after, button.sec.loading::after, button.secondary.loading::after { border-color:var(--c-primary); border-right-color:transparent; }
@keyframes spin { to { transform:rotate(360deg); } }

/* ---------- Поля: default / focus / error / disabled / read-only; префикс и суффикс ---------- */
label, .label { display:block; font-size:var(--fs-xs); line-height:var(--lh-xs); color:var(--c-text-secondary); margin-bottom:var(--sp-1); }
input, select, textarea { font:var(--fs-md)/var(--lh-md) var(--font); height:var(--h-control); padding:0 var(--sp-3);
  border:1px solid var(--c-border-strong); border-radius:var(--r-md); width:100%; background:var(--c-surface); color:var(--c-text); }
input[type="checkbox"], input[type="radio"] { width:auto; height:auto; accent-color:var(--c-primary); }
input[type="color"] { padding:var(--sp-0); }
textarea { height:auto; min-height:calc(var(--h-control) * 2); padding:var(--sp-2) var(--sp-3); resize:vertical; }
input:focus, select:focus, textarea:focus { outline:none; border-color:var(--c-primary); box-shadow:0 0 0 3px var(--c-info-bg); }
input:disabled, select:disabled, textarea:disabled { background:var(--c-surface-sunken); color:var(--c-text-secondary); }
input[readonly], textarea[readonly] { background:var(--c-bg); border-style:dashed; }
.field { margin-bottom:var(--sp-3); }
.field.error input, .field.error select, .field.error textarea, input.error, select.error { border-color:var(--c-danger); }
.field .err, .field-error { display:block; color:var(--c-danger); font-size:var(--fs-xs); line-height:var(--lh-xs); margin-top:var(--sp-1); }
.affix { display:flex; align-items:stretch; }
.affix > span { display:flex; align-items:center; padding:0 var(--sp-3); background:var(--c-surface-sunken); color:var(--c-text-secondary);
  border:1px solid var(--c-border-strong); font-size:var(--fs-sm); }
.affix > span:first-child { border-right:0; border-radius:var(--r-md) 0 0 var(--r-md); }
.affix > span:last-child { border-left:0; border-radius:0 var(--r-md) var(--r-md) 0; }
.affix > input:not(:first-child) { border-top-left-radius:0; border-bottom-left-radius:0; }
.affix > input:not(:last-child) { border-top-right-radius:0; border-bottom-right-radius:0; }

/* Комбобокс с поиском: список под полем, последний пункт — «Создать …» */
.combo { position:relative; }
.combo-list { position:absolute; left:0; right:0; top:calc(100% + var(--sp-1)); z-index:var(--z-menu); background:var(--c-surface);
  border:1px solid var(--c-border); border-radius:var(--r-md); box-shadow:var(--shadow-2); max-height:280px; overflow:auto; padding:var(--sp-1) 0; }
.combo-list .opt { padding:var(--sp-2) var(--sp-3); cursor:pointer; font-size:var(--fs-sm); }
.combo-list .opt small { color:var(--c-text-secondary); margin-left:var(--sp-2); }
.combo-list .opt:hover, .combo-list .opt.on { background:var(--c-info-bg); }
.combo-list .opt.create { border-top:1px solid var(--c-border); color:var(--c-primary); }

/* ---------- Таблица: липкий заголовок, сортировка, выбор строк, числа справа, итог, правка по клику ---------- */
.table { width:100%; border-collapse:collapse; font-size:var(--fs-sm); line-height:var(--lh-sm); background:var(--c-surface); }
.table th { position:sticky; top:0; z-index:1; background:var(--c-surface); text-align:left; font-weight:var(--fw-bold);
  font-size:var(--fs-xs); color:var(--c-text-secondary); padding:var(--sp-2) var(--sp-3); border-bottom:1px solid var(--c-border-strong); white-space:nowrap; }
.table th.sortable { cursor:pointer; } .table th.sortable:hover { color:var(--c-text); }
.table th.sorted::after { content:" ▾"; } .table th.sorted.asc::after { content:" ▴"; }
.table td { height:var(--h-row); padding:var(--sp-1) var(--sp-3); border-bottom:1px solid var(--c-border); vertical-align:middle; }
.table tbody tr:hover td { background:var(--c-bg); }
.table tr.selected td { background:var(--c-info-bg); }
.table .num, .num { text-align:right; font-variant-numeric:tabular-nums; white-space:nowrap; }
.table tfoot td { font-weight:var(--fw-bold); border-top:1px solid var(--c-border-strong); border-bottom:0; background:var(--c-bg); }
.table td.editable { cursor:text; } .table td.editable:hover { box-shadow:inset 0 0 0 1px var(--c-border-strong); }
.table td.warn-cell { background:var(--c-warning-bg); }
.table td input, .table td select { height:var(--h-control-sm); }

/* ---------- Бейдж и тег: нейтральный, статусы, этап, счётчик ---------- */
.badge, .tag { display:inline-flex; align-items:center; gap:var(--sp-1); font-size:var(--fs-xs); line-height:var(--lh-xs);
  padding:var(--sp-0) var(--sp-2); border-radius:var(--r-sm); background:var(--c-surface-sunken); color:var(--c-text); white-space:nowrap; }
.badge.success { background:var(--c-success-bg); color:var(--c-success); }
.badge.warning { background:var(--c-warning-bg); color:var(--c-warning); }
.badge.danger { background:var(--c-danger-bg); color:var(--c-danger); }
.badge.info { background:var(--c-info-bg); color:var(--c-primary); }
.badge.stage { background:var(--stage, var(--stage-1)); color:var(--c-on-primary); }
.count { display:inline-flex; align-items:center; justify-content:center; min-width:var(--icon-md); height:var(--icon-md);
  padding:0 var(--sp-1); border-radius:var(--r-full); font-size:var(--fs-xs); font-weight:var(--fw-bold);
  background:var(--c-primary); color:var(--c-on-primary); font-variant-numeric:tabular-nums; }
.count.danger { background:var(--c-danger); }

/* ---------- Аватар: инициалы на цвете из набора ---------- */
.avatar { display:inline-flex; align-items:center; justify-content:center; width:var(--h-control-sm); height:var(--h-control-sm);
  border-radius:var(--r-full); background:var(--av, var(--avatar-1)); color:var(--c-on-primary); font-size:var(--fs-xs);
  font-weight:var(--fw-bold); flex:none; }
.avatar.sm { width:var(--icon-md); height:var(--icon-md); font-size:var(--fs-xs); }

/* ---------- Вкладки: подчёркивание, счётчик ---------- */
.tabs { display:flex; gap:var(--sp-1); border-bottom:1px solid var(--c-border); margin-bottom:var(--sp-3); }
.tabs .tab { display:inline-flex; align-items:center; gap:var(--sp-2); padding:var(--sp-2) var(--sp-3); color:var(--c-text-secondary);
  font-size:var(--fs-md); border:0; background:none; border-bottom:2px solid transparent; margin-bottom:-1px; cursor:pointer; height:auto; border-radius:0; }
.tabs .tab:hover { color:var(--c-text); background:none; text-decoration:none; }
.tabs .tab.on, .tabs .tab[aria-selected="true"] { color:var(--c-primary); border-bottom-color:var(--c-primary); }

/* ---------- Модальное окно и боковая панель ---------- */
dialog, .modal { border:0; border-radius:var(--r-xl); padding:0; width:min(var(--w-modal), 94vw); box-shadow:var(--shadow-2);
  color:var(--c-text); background:var(--c-surface); }
dialog::backdrop { background:var(--c-overlay); }
dialog:not(.raw) { padding:var(--sp-4) var(--sp-6); }
.modal-head { display:flex; align-items:center; justify-content:space-between; gap:var(--sp-3); margin-bottom:var(--sp-3); }
.modal-head h2 { margin:0; font-size:var(--fs-lg); line-height:var(--lh-lg); }
.modal-foot { display:flex; justify-content:flex-end; gap:var(--sp-2); margin-top:var(--sp-4); }
dialog.lg { width:min(var(--w-modal-lg), 96vw); }
.drawer { position:fixed; top:0; right:0; bottom:0; width:min(var(--w-drawer), 96vw); background:var(--c-surface); z-index:var(--z-modal);
  box-shadow:var(--shadow-2); padding:var(--sp-4) var(--sp-6); overflow:auto; transform:translateX(100%); transition:transform var(--t-fast); }
.drawer.open { transform:none; }

/* ---------- Меню «Ещё»: пункты с иконками, опасный отделён и красный ---------- */
.menu { position:absolute; z-index:var(--z-menu); min-width:200px; background:var(--c-surface); border:1px solid var(--c-border);
  border-radius:var(--r-lg); box-shadow:var(--shadow-2); padding:var(--sp-1) 0; }
.menu .item { display:flex; align-items:center; gap:var(--sp-2); width:100%; height:auto; padding:var(--sp-2) var(--sp-3);
  background:none; border:0; border-radius:0; color:var(--c-text); font-weight:var(--fw-normal); font-size:var(--fs-md); text-align:left; justify-content:flex-start; }
.menu .item:hover { background:var(--c-info-bg); }
.menu .item.danger { color:var(--c-danger); } .menu .item.danger:hover { background:var(--c-danger-bg); }
.menu .sep { height:1px; background:var(--c-border); margin:var(--sp-1) 0; }

/* ---------- Уведомление (toast): success / error / info, с «Отменить» ---------- */
#toast { position:fixed; bottom:var(--sp-4); right:var(--sp-4); z-index:var(--z-toast); display:flex; align-items:center; gap:var(--sp-3);
  max-width:440px; padding:var(--sp-3) var(--sp-4); border-radius:var(--r-lg); background:var(--c-toast); color:var(--c-on-primary);
  font-size:var(--fs-md); box-shadow:var(--shadow-2); opacity:0; transform:translateY(var(--sp-2)); pointer-events:none;
  transition:opacity var(--t-fast), transform var(--t-fast); }
#toast.show { opacity:1; transform:none; pointer-events:auto; }
#toast.err, #toast.error { background:var(--c-danger); } #toast.success { background:var(--c-success); }
#toast .undo { background:none; border:1px solid var(--c-on-primary); color:var(--c-on-primary); height:var(--h-control-sm); padding:0 var(--sp-3); }

/* ---------- Пустое состояние, скелетон, подсказка, KPI ---------- */
.empty { text-align:center; padding:var(--sp-8) var(--sp-4); color:var(--c-text-secondary); }
.empty .ico { width:var(--sp-8); height:var(--sp-8); stroke-width:1.4; margin-bottom:var(--sp-2); }
.empty p { margin:0 0 var(--sp-3); font-size:var(--fs-md); }
.skeleton { display:block; height:var(--fs-md); border-radius:var(--r-sm); margin:var(--sp-2) 0;
  background:linear-gradient(90deg, var(--c-skeleton) 25%, var(--c-skeleton-shine) 50%, var(--c-skeleton) 75%);
  background-size:200% 100%; animation:shine 1.2s linear infinite; }
.skeleton.card { height:calc(var(--h-row) * 2); border-radius:var(--r-md); }
.skeleton.row { height:var(--h-row); }
@keyframes shine { to { background-position:-200% 0; } }
[data-tip] { position:relative; }
[data-tip]:hover::after, [data-tip]:focus-visible::after { content:attr(data-tip); position:absolute; left:50%; bottom:calc(100% + var(--sp-1));
  transform:translateX(-50%); background:var(--c-toast); color:var(--c-on-primary); font-size:var(--fs-xs); line-height:var(--lh-xs);
  padding:var(--sp-1) var(--sp-2); border-radius:var(--r-sm); white-space:nowrap; z-index:var(--z-menu); pointer-events:none; }
.kpi { background:var(--c-surface); border:1px solid var(--c-border); border-radius:var(--r-lg); padding:var(--sp-4); min-width:180px; }
.kpi .v { font-size:var(--fs-2xl); line-height:var(--lh-2xl); font-weight:var(--fw-bold); font-variant-numeric:tabular-nums; }
.kpi .l { font-size:var(--fs-xs); color:var(--c-text-secondary); }
.kpi .d { font-size:var(--fs-xs); } .kpi .d.up { color:var(--c-success); } .kpi .d.down { color:var(--c-danger); }

/* «Сохранено · 14:32» у блока */
.saved { font-size:var(--fs-xs); color:var(--c-text-secondary); }

.num { font-variant-numeric:tabular-nums; }