/* ═══════════════════════════════════════════════════════════════════════
 * app-overrides.css — Подтягивает дизайн v200.0 к существующему UI.
 *
 * НЕ ломает функционал, только:
 *  - подменяет hardcoded цвета на токены через legacy селекторы
 *  - выравнивает spacing на 8px grid
 *  - даёт правильную типографику, focus-ring, hover-states
 *  - убирает «2010-2015» feel у legacy-кнопок/полей/таблиц
 *
 * Подключается ПОСЛЕ legacy CSS чтобы переопределять.
 * Префикс не нужен — селекторы targeting'ом легаси-классов.
 * ═══════════════════════════════════════════════════════════════════════ */

/* ─── ТИПОГРАФИКА body ─── */
body {
  font-family: var(--font-sans) !important;
  font-size: var(--fs-md);
  color: var(--text);
  background: var(--bg);
  line-height: var(--lh-normal);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ─── LEGACY BUTTONS (.btn .btn-primary etc) ─── */
.btn {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  height: var(--button-height);
  padding: 0 var(--sp-3) !important;
  border-radius: var(--r-md) !important;
  font-family: var(--font-sans);
  font-size: var(--fs-md);
  font-weight: var(--fw-medium);
  line-height: 1;
  border: 1px solid transparent;
  cursor: pointer;
  white-space: nowrap;
  transition: background-color var(--duration-fast) var(--ease-out),
              border-color var(--duration-fast) var(--ease-out),
              box-shadow var(--duration-fast) var(--ease-out),
              transform var(--duration-fast) var(--ease-out) !important;
}
.btn:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.btn:active { transform: translateY(0.5px); }

.btn-primary {
  background: var(--accent) !important;
  color: white !important;
  border-color: var(--accent) !important;
}
.btn-primary:hover { background: var(--accent-hover) !important; box-shadow: var(--shadow-sm); }

.btn-secondary {
  background: var(--surface) !important;
  color: var(--text) !important;
  border: 1px solid var(--border) !important;
}
.btn-secondary:hover { background: var(--surface-hover) !important; border-color: var(--border-2) !important; }

.btn-ghost {
  background: transparent !important;
  color: var(--text-2) !important;
  border-color: transparent !important;
}
.btn-ghost:hover { background: var(--surface-2) !important; color: var(--text) !important; }

.btn-danger {
  background: var(--danger) !important;
  color: white !important;
  border-color: var(--danger) !important;
}
.btn-danger:hover { background: var(--danger-hover) !important; box-shadow: var(--shadow-sm); }

/* ─── LEGACY FORM INPUTS ─── */
input[type="text"]:not(.v2-input):not([class*="cmdk"]):not([class*="ux-"]),
input[type="email"]:not(.v2-input):not([class*="cmdk"]):not([class*="ux-"]),
input[type="password"]:not(.v2-input):not([class*="cmdk"]):not([class*="ux-"]),
input[type="number"]:not(.v2-input):not([class*="cmdk"]):not([class*="ux-"]),
input[type="search"]:not(.v2-input):not([class*="cmdk"]):not([class*="ux-"]),
input[type="tel"]:not(.v2-input):not([class*="cmdk"]):not([class*="ux-"]),
input[type="url"]:not(.v2-input):not([class*="cmdk"]):not([class*="ux-"]),
input[type="date"]:not(.v2-input):not([class*="cmdk"]):not([class*="ux-"]),
textarea:not(.v2-textarea):not([class*="cmdk"]):not([class*="ux-"]),
select:not(.v2-select):not([class*="cmdk"]):not([class*="ux-"]) {
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  font-family: var(--font-sans);
  font-size: var(--fs-md);
  transition: border-color var(--duration-fast) var(--ease-out),
              box-shadow var(--duration-fast) var(--ease-out);
}
input:focus, textarea:focus, select:focus {
  outline: none;
  border-color: var(--border-focus);
  box-shadow: var(--focus-ring);
}
input::placeholder, textarea::placeholder { color: var(--text-3); }

/* ─── SCROLLBARS ─── */
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb { background: var(--border-2); border-radius: var(--r-full); border: 2px solid transparent; background-clip: content-box; }
*::-webkit-scrollbar-thumb:hover { background: var(--border-strong); background-clip: content-box; border: 2px solid transparent; }

/* ─── LEGACY MODAL — апгрейд внешнего вида ─── */
.modal, [class*="modal"] {
  font-family: var(--font-sans);
}

/* ─── LEGACY TABLE ─── */
table.list-table thead th {
  background: var(--surface-2) !important;
  color: var(--text-2) !important;
  font-size: var(--fs-xs) !important;
  font-weight: var(--fw-semibold) !important;
  text-transform: uppercase;
  letter-spacing: var(--tracking-caps);
  padding: var(--sp-2) var(--sp-3) !important;
  border-bottom: 1px solid var(--border) !important;
}
table.list-table tbody td {
  padding: var(--sp-3) !important;
  border-bottom: 1px solid var(--border) !important;
  font-size: var(--fs-md);
}
table.list-table tbody tr { transition: background var(--duration-fast); }
table.list-table tbody tr:hover { background: var(--surface-hover); }

/* Числа в таблицах — tabular-nums */
.col-primary, td[data-col*="budget"], td[data-col*="price"], td[data-col*="sum"] {
  font-variant-numeric: tabular-nums;
}

/* ─── LEGACY SIDEBAR ─── */
.sidebar, #sidebar, .app-sidebar {
  background: var(--surface) !important;
  border-right: 1px solid var(--border) !important;
}

/* ─── LEGACY KANBAN CARDS — мягкий апгрейд ─── */
.pipeline-card, .kanban-card, [class*="deal-card"]:not(.deal-card-v2):not(.kb-card) {
  border-radius: var(--card-radius) !important;
  border: 1px solid var(--border) !important;
  background: var(--surface) !important;
  transition: all var(--duration-fast) var(--ease-out) !important;
  box-shadow: var(--shadow-xs);
}
.pipeline-card:hover, .kanban-card:hover {
  border-color: var(--border-2) !important;
  box-shadow: var(--shadow-md);
  transform: translateY(-1px);
}

/* ─── LEGACY DEAL CARD HEADER ─── */
.deal-num {
  color: var(--text);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--tracking-tight);
}

/* ─── LEGACY TABS ─── */
.deal-tab, .an-tab, .st-tab, .gd-tab {
  font-family: var(--font-sans) !important;
  font-size: var(--fs-md) !important;
  font-weight: var(--fw-medium) !important;
  color: var(--text-3) !important;
  transition: color var(--duration-fast), border-color var(--duration-fast) !important;
  border-radius: 0 !important;
  background: transparent !important;
}
.deal-tab:hover, .an-tab:hover, .st-tab:hover, .gd-tab:hover { color: var(--text) !important; }
.deal-tab.on, .an-tab.on, .st-tab.on, .gd-tab.on,
.deal-tab.is-active, .an-tab.is-active {
  color: var(--accent) !important;
  border-bottom-color: var(--accent) !important;
}

/* ─── LEGACY BADGES (sb-* badges in sidebar) ─── */
[id*="badge"], .sb-badge {
  background: var(--accent) !important;
  color: white !important;
  border-radius: var(--r-full) !important;
  font-size: var(--fs-xs) !important;
  font-weight: var(--fw-semibold) !important;
  padding: 2px 6px !important;
}

/* ─── USER MENU полировка ─── */
.user-menu {
  background: var(--surface) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--r-lg) !important;
  box-shadow: var(--shadow-xl) !important;
  padding: var(--sp-1) !important;
}
.user-menu-item {
  padding: var(--sp-2) var(--sp-3) !important;
  border-radius: var(--r-md) !important;
  font-size: var(--fs-md) !important;
  color: var(--text-2) !important;
  display: flex !important;
  align-items: center !important;
  gap: var(--sp-2) !important;
  transition: background var(--duration-fast), color var(--duration-fast);
  cursor: pointer;
}
.user-menu-item:hover { background: var(--surface-2) !important; color: var(--text) !important; }
.user-menu-item.danger { color: var(--danger) !important; }
.user-menu-item.danger:hover { background: var(--danger-soft) !important; }
.user-menu-item svg { width: 16px; height: 16px; opacity: 0.7; flex-shrink: 0; }
.user-menu-hd {
  padding: var(--sp-3) var(--sp-3) var(--sp-2);
  border-bottom: 1px solid var(--border);
  margin-bottom: var(--sp-1);
}
.user-menu-name { font-size: var(--fs-md); font-weight: var(--fw-semibold); color: var(--text); }
.user-menu-email { font-size: var(--fs-sm); color: var(--text-3); }

/* ─── USER PILL (топ-бар юзер) ─── */
.user-pill {
  background: var(--surface) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--r-full) !important;
  padding: 4px 12px 4px 4px !important;
  font-size: var(--fs-md) !important;
  color: var(--text) !important;
  font-weight: var(--fw-medium) !important;
}
.user-pill:hover { background: var(--surface-2) !important; border-color: var(--border-2) !important; }

/* ─── PIPELINE STAGES headers ─── */
.stage-hd, .pipeline-stage-header {
  background: var(--surface-2);
  border-radius: var(--card-radius);
  padding: var(--sp-2) var(--sp-3);
}

/* ─── HOVER на ссылках ─── */
a:not(.btn):not([role="button"]):not(.deal-tab):not(.an-tab) {
  color: var(--accent);
  text-decoration: none;
  transition: color var(--duration-fast);
}
a:not(.btn):not([role="button"]):not(.deal-tab):not(.an-tab):hover {
  color: var(--accent-hover);
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* ─── SELECTION ─── */
::selection { background: var(--accent-soft); color: var(--accent-text); }

/* ─── FOCUS-VISIBLE везде ─── */
button:focus-visible,
a:focus-visible,
[role="button"]:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

/* ─── DEAL CARD KANBAN — числа лучше ─── */
.pipeline-card .price, .pipeline-card [class*="budget"],
.kanban-card .price, .kanban-card [class*="budget"] {
  font-variant-numeric: tabular-nums;
  font-weight: var(--fw-bold);
  color: var(--text);
}

/* ═══════════════════════════════════════════════════════════════════════
 * Audit v2 fixes — consistency между страницами.
 * Дополнения после прохода по pipeline/tasks/contacts/companies/analytics/settings-v2
 * ═══════════════════════════════════════════════════════════════════════ */

/* FIX 1: Settings-v2 — кнопки stg-nav-item получают консистентный focus + hover */
.stg-nav-item:focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: var(--r-md); }

/* FIX 2: stage-step (этапы в карточке сделки) — touch-target и focus-ring */
.stage-step:focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: var(--r-md); z-index: 1; }
.stage-step { transition: background-color var(--duration-fast) var(--ease-out); }

/* FIX 3: Settings-nav links — typography консистентная */
.stg-nav-item, .stg-nav-group {
  font-family: var(--font-sans);
}

/* FIX 4: page-tasks/contacts/companies inline-style backgrounds — нормализовать карточки */
.page-tasks .ent-card, .page-contacts .ent-card, .page-companies .ent-card,
[id*="-list"] > [style*="background"] {
  border-radius: var(--card-radius);
  transition: all var(--duration-fast) var(--ease-out);
}

/* FIX 5: .ptb (page top bar) — единый стиль */
.ptb {
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  padding: var(--sp-3) var(--sp-5) !important;
  display: flex;
  align-items: center;
  gap: var(--sp-3);
}
.ptb-title {
  font-size: var(--fs-lg);
  font-weight: var(--fw-semibold);
  color: var(--text);
  letter-spacing: var(--tracking-tight);
  margin: 0;
}
.ptb-right { display: flex; align-items: center; gap: var(--sp-2); margin-left: auto; }

/* FIX 6: ptb-sep — divider правильный */
.ptb-sep {
  height: 1px;
  background: var(--border);
  margin: 0;
}

/* FIX 7: deal-back-btn — кнопка «← Назад» консистентна */
.deal-back, .deal-back-btn {
  background: transparent !important;
  color: var(--text-2) !important;
  border: none !important;
  padding: var(--sp-1) var(--sp-2) !important;
  font-size: var(--fs-sm) !important;
  font-weight: var(--fw-medium) !important;
  border-radius: var(--r-md) !important;
  cursor: pointer;
  transition: background var(--duration-fast);
}
.deal-back:hover, .deal-back-btn:hover { background: var(--surface-2) !important; color: var(--text) !important; }

/* FIX 8: dbb-sel (select в карточке сделки) — единый стиль с v2-input */
.dbb-sel, select.dbb-sel {
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: 0 var(--sp-2);
  height: 30px;
  font-size: var(--fs-md);
  font-family: var(--font-sans);
}
.dbb-sel:focus { outline: none; border-color: var(--border-focus); box-shadow: var(--focus-ring); }

/* FIX 9: an-tab (analytics tabs) — выровнять с v2-tab */
.an-tabs, .deal-tabs {
  border-bottom: 1px solid var(--border);
  padding: 0 var(--sp-3);
  gap: 0;
}

/* FIX 10: stat-cards в analytics — фон карточек с правильной тенью */
.an-card, .an-stats-grid > div {
  background: var(--surface) !important;
  border: 1px solid var(--border);
  border-radius: var(--card-radius) !important;
  padding: var(--sp-4);
}
.an-card-title {
  font-size: var(--fs-xs) !important;
  font-weight: var(--fw-semibold) !important;
  text-transform: uppercase;
  letter-spacing: var(--tracking-caps);
  color: var(--text-3) !important;
  margin-bottom: var(--sp-1);
}
.an-card-big {
  font-size: var(--fs-2xl) !important;
  font-weight: var(--fw-bold) !important;
  font-variant-numeric: tabular-nums;
  color: var(--text);
}
.an-card-sub {
  font-size: var(--fs-sm);
  color: var(--text-3);
  margin-top: var(--sp-1);
}

/* FIX 11: an-bar (воронка в analytics) — приятная палитра */
.an-bar-row {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-2) 0;
  font-size: var(--fs-md);
}
.an-bar-lbl { min-width: 160px; color: var(--text-2); }
.an-bar-track { flex: 1; height: 8px; background: var(--surface-2); border-radius: var(--r-full); overflow: hidden; }
.an-bar-fill { height: 100%; background: var(--accent); border-radius: var(--r-full); transition: width var(--duration-slow) var(--ease-out); }
.an-bar-val { font-size: var(--fs-sm); color: var(--text-3); font-variant-numeric: tabular-nums; }

/* FIX 12: dbb-task-text textarea — единый стиль с v2-textarea */
#dbb-task-text, .dbb-note-ta {
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: var(--sp-2) var(--sp-3);
  font-family: var(--font-sans);
  font-size: var(--fs-md);
  resize: vertical;
}
#dbb-task-text:focus, .dbb-note-ta:focus { outline: none; border-color: var(--border-focus); box-shadow: var(--focus-ring); }

/* FIX 13: sidebar (.sb-btn) — консистентность с stg-nav-item */
.sb-btn {
  border-radius: var(--r-md);
  transition: background var(--duration-fast), color var(--duration-fast);
}
.sb-btn:hover { background: var(--surface-2); color: var(--text); }
.sb-btn.is-active, .sb-btn.active {
  background: var(--accent-soft) !important;
  color: var(--accent-text) !important;
}

/* FIX 14: bulk-bar (выделение) — выровнять с design-tokens */
.bulk-bar, [class*="bulk-bar"] {
  background: var(--text);
  color: var(--surface);
  border-radius: var(--r-full);
  padding: var(--sp-2) var(--sp-4);
  box-shadow: var(--shadow-lg);
}

/* FIX 15: deal-card в канбане — мягкий hover */
.pipeline-card-wrap > div, .pipeline-card-wrap > a {
  border-radius: var(--card-radius);
  transition: all var(--duration-fast) var(--ease-out);
}

/* FIX 16: empty-state container — typography */
.an-log-empty, .empty-state, [class*="empty"] {
  font-size: var(--fs-md);
  color: var(--text-3);
  text-align: center;
  padding: var(--sp-6);
}

/* FIX 17: убрать ::after стрелочки у stage-step справа последней */
.stage-step:last-child::after { display: none; }

/* FIX 18: dropdown в карточке сделки — overflow shadow */
[class*="drop"], [class*="dropdown"] {
  box-shadow: var(--shadow-lg);
  border-radius: var(--r-md);
  border: 1px solid var(--border);
  background: var(--surface);
}

/* ═══════════════════════════════════════════════════════════════════════
 * Empty-state polish для legacy .an-log-empty и подобных.
 * Без рефактора JS — просто визуально приводим к v200-стилю.
 * ═══════════════════════════════════════════════════════════════════════ */

/* v199.306: ТОЛЬКО для известных empty-state контейнеров СПИСКОВ — не для inline-значений полей.
 * Раньше [class*="-empty"] ловил .ev-empty (тире "—" в пустом поле карточки) и раздувал
 * inline-span в огромный блок с пунктиром, который выпихивал контент модалки. */
.an-log-empty,
.entity-empty,
.empty-state,
.list-empty,
.kanban-empty {
  padding: var(--sp-12) var(--sp-5);
  text-align: center;
  color: var(--text-3);
  font-size: var(--fs-md);
  line-height: var(--lh-snug);
  background: var(--surface);
  border-radius: var(--card-radius);
  border: 1px dashed var(--border);
  margin: var(--sp-3);
}

.an-log-empty::before,
.entity-empty::before,
.empty-state::before,
.list-empty::before,
.kanban-empty::before {
  content: '📭';
  display: block;
  font-size: 36px;
  margin-bottom: var(--sp-2);
  opacity: 0.6;
  filter: grayscale(0.3);
}

/* ev-empty (тире в пустом поле карточки entity-view) — inline, без раздутия */
.ev-row-val.ev-empty {
  display: inline !important;
  padding: 0 !important;
  background: transparent !important;
  border: none !important;
  margin: 0 !important;
  text-align: left !important;
  font-size: var(--fs-sm) !important;
  color: var(--text-3) !important;
  font-style: italic;
}
.ev-row-val.ev-empty::before { content: none !important; }

/* Bulk-bar шире на mobile */
@media (max-width: 640px) {
  .ux-bulk-bar {
    left: var(--sp-3) !important;
    right: var(--sp-3) !important;
    transform: none !important;
    bottom: calc(var(--sp-3) + env(safe-area-inset-bottom, 0)) !important;
  }
}

/* Stats grid одинаковый отступ */
.an-stats-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: var(--sp-3) !important;
  padding: 0 var(--sp-5) !important;
}

/* Legacy modal стилизация — закрыть кнопка вверху */
.modal [onclick*="remove"]:first-of-type,
.modal button[onclick*="display=\\'none\\'"] {
  position: absolute;
  top: var(--sp-2);
  right: var(--sp-2);
}


/* ═══════════════════════════════════════════════════════════════════════
 * UNIFY: Tabs «Настройки» (.st-tab) — крупнее, как в Аналитике
 * ═══════════════════════════════════════════════════════════════════════ */

.st-tab {
  padding: 10px 18px !important;
  font-size: var(--fs-md) !important;
  font-weight: var(--fw-medium) !important;
  gap: 10px !important;
  height: auto;
  min-height: 40px;
  border-radius: var(--r-md) !important;
}

/* Иконки в табах — больше и темнее */
.st-tab svg {
  width: 18px !important;
  height: 18px !important;
  stroke-width: 2 !important;
  color: var(--text-2);
  transition: color var(--duration-fast);
  flex-shrink: 0;
}
.st-tab:hover svg {
  color: var(--text);
}
.st-tab.active svg,
.st-tab.is-active svg,
.st-tab.on svg {
  color: white !important;
  stroke: white !important;
}

/* Активная вкладка — мягче (без жёсткого синего фона) */
.st-tab.active {
  background: var(--accent) !important;
  border-color: var(--accent) !important;
  color: white !important;
  box-shadow: var(--shadow-sm);
}
.st-tab:hover:not(.active) {
  background: var(--surface-2) !important;
  border-color: var(--border-2) !important;
}

/* Контейнер табов — отступ ровный */
.settings-tabs,
[class*="st-tabs"] {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  padding: var(--sp-3) var(--sp-5);
  background: var(--surface);
  border-bottom: 1px solid var(--border);
}

/* Иконки в кнопках любого типа .btn — тоже подтянуть */
.btn svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}


/* ═══════════════════════════════════════════════════════════════════════
 * Дополнительные иконо-фиксы по всем кнопкам / нав-элементам
 * ═══════════════════════════════════════════════════════════════════════ */

/* sb-btn (сайдбар главного меню) — иконки крупнее и темнее */
.sb-btn svg {
  width: 20px !important;
  height: 20px !important;
  stroke-width: 1.8;
  color: var(--text-2);
  flex-shrink: 0;
  transition: color var(--duration-fast);
}
.sb-btn:hover svg { color: var(--text); }
.sb-btn.is-active svg, .sb-btn.active svg { color: var(--accent) !important; stroke: var(--accent) !important; }

/* sb-btn-lbl — лейбл сайдбара */
.sb-btn-lbl {
  font-size: var(--fs-xs);
  font-weight: var(--fw-medium);
  letter-spacing: var(--tracking-tight);
}

/* user-menu иконки */
.user-menu-item svg {
  width: 18px !important;
  height: 18px !important;
  stroke-width: 1.8;
  color: var(--text-3);
  flex-shrink: 0;
}
.user-menu-item:hover svg { color: var(--text-2); }

/* ptb-right buttons — иконки больше */
.ptb-right button svg, .ptb button svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

/* Header кнопки в карточке сделки — крупнее */
#page-deal .btn svg, .deal-header .btn svg {
  width: 16px;
  height: 16px;
}

/* Чекбоксы — стандартный размер 16x16 везде */
input[type="checkbox"]:not(.v2-checkbox):not(.v2-switch):not(.bulk-cb) {
  width: 16px;
  height: 16px;
  cursor: pointer;
  accent-color: var(--accent);
}

/* Radio buttons — единый стиль */
input[type="radio"]:not(.v2-radio) {
  width: 16px;
  height: 16px;
  cursor: pointer;
  accent-color: var(--accent);
}


/* ═══════════════════════════════════════════════════════════════════════
 * v199.306 — P0-2: «Загрузка…» в модалке = absolute overlay, не двигает контент
 * ═══════════════════════════════════════════════════════════════════════ */

/* Модалка entity-view body — relative-контейнер для overlay-loading */
#ev-body, .ov .ov-body, .modal-body {
  position: relative;
  min-height: 200px;
}

/* Любой текстовый «Загрузка…» внутри модалок — overlay по центру, без блочного сдвига */
.ov [data-loading], .ov-loading, .modal-loading,
.ov *:not(input):not(textarea):not(button):not(.ev-row-val) > *:where([class*="loading"], [data-state="loading"]) {
  position: absolute !important;
  inset: 0 !important;
  display: flex !important;
  align-items: center;
  justify-content: center;
  background: rgba(255,255,255,0.7);
  backdrop-filter: blur(2px);
  z-index: 5;
  pointer-events: none;
  color: var(--text-3);
  font-size: var(--fs-sm);
}

/* Спиннер унифицирован */
.ov-loading::before, .modal-loading::before {
  content: '';
  width: 24px; height: 24px;
  border: 2px solid var(--border);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
  margin-right: 10px;
}
@keyframes spin { to { transform: rotate(360deg); } }


/* ═══════════════════════════════════════════════════════════════════════
 * v199.306 — P0-6: Карточка сделки <1280px — правая колонка вниз, не наезжает
 * ═══════════════════════════════════════════════════════════════════════ */
@media (max-width: 1279px) {
  #page-deal .deal-layout, 
  #page-deal .deal-body,
  .deal-main-grid {
    display: flex !important;
    flex-direction: column !important;
    gap: var(--sp-3);
  }
  #page-deal .deal-side, 
  #page-deal .deal-right,
  .deal-side-col {
    width: 100% !important;
    max-width: 100% !important;
    margin-top: var(--sp-3);
  }
  /* Лента занимает полную ширину */
  #page-deal .deal-feed, .deal-feed-col {
    width: 100% !important;
  }
}

/* Mobile <768 — sticky-header карточки */
@media (max-width: 767px) {
  #page-deal .ptb {
    position: sticky;
    top: 0;
    z-index: 10;
    background: var(--bg);
    box-shadow: var(--shadow-sm);
  }
  /* Tabs скроллятся горизонтально */
  .deal-tabs, .ev-tabs {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    flex-wrap: nowrap !important;
  }
  .deal-tab, .ev-tab {
    flex-shrink: 0;
  }
}


/* ═══════════════════════════════════════════════════════════════════════
 * v199.307 — uxLoading стили (унификация loading)
 * ═══════════════════════════════════════════════════════════════════════ */
.uxs-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--sp-3);
  padding: var(--sp-10) var(--sp-4);
  color: var(--text-3);
  font-size: var(--fs-sm);
  min-height: 120px;
}
.uxs-loading-compact {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-3);
  color: var(--text-3);
  font-size: var(--fs-sm);
}
.uxs-spin {
  display: inline-block;
  width: 16px; height: 16px;
  border: 2px solid var(--border);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
  flex-shrink: 0;
}
.uxs-spin-lg { width: 28px; height: 28px; border-width: 3px; }
.uxs-loading-msg { line-height: var(--lh-snug); }


/* ═══════════════════════════════════════════════════════════════════════
 * v199.312 Sprint 6 mini: content-visibility:auto
 * Браузер skip-render off-screen строк ⇒ 2-10× ускорение на 1000+ записей.
 * Поддержка: Chrome 85+, Safari 18+, Firefox 125+ (≥90% юзеров).
 * contain-intrinsic-size резервирует место чтобы CLS=0.
 * ═══════════════════════════════════════════════════════════════════════ */

/* Таблицы записей (контакты/компании/товары/задачи) */
table.list-table tbody tr {
  content-visibility: auto;
  contain-intrinsic-size: 0 44px; /* ≈ типичная высота строки */
}

/* Карточки канбана */
.cb-card, .pipeline-card, .kanban-card {
  content-visibility: auto;
  contain-intrinsic-size: 0 120px; /* типичная высота карточки */
}

/* Длинные feed-листы */
.feed-item, .deal-feed-item, .ux-drawer-event {
  content-visibility: auto;
  contain-intrinsic-size: 0 60px;
}

/* Cmd+K items (если 50+ результатов) */
.cmdk-item {
  content-visibility: auto;
  contain-intrinsic-size: 0 36px;
}


/* ═══════════════════════════════════════════════════════════════════════
 * v199.313 Sprint 7 — Mobile-first + a11y full pass
 * ═══════════════════════════════════════════════════════════════════════ */

/* ─── A11Y: focus-visible на ВСЕХ интерактивах (включая div-onclick) ─── */
*:focus-visible {
  outline: 2px solid var(--accent) !important;
  outline-offset: 2px;
  border-radius: var(--r-sm, 4px);
}
button:focus-visible,
.btn:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
[role="button"]:focus-visible,
[tabindex]:not([tabindex="-1"]):focus-visible {
  outline: 2px solid var(--accent) !important;
  outline-offset: 2px;
  box-shadow: var(--focus-ring, 0 0 0 3px rgba(108,92,231,0.25));
}

/* ─── A11Y: skip-to-content ссылка (для клавиатурной навигации) ─── */
.skip-to-content {
  position: absolute;
  top: -100px;
  left: 0;
  background: var(--accent);
  color: white;
  padding: var(--sp-3) var(--sp-5);
  z-index: 99999;
  text-decoration: none;
  border-radius: 0 0 var(--r-md) 0;
  font-weight: var(--fw-semibold);
}
.skip-to-content:focus {
  top: 0;
}

/* ─── A11Y: высокий контраст (prefers-contrast: more) ─── */
@media (prefers-contrast: more) {
  :root {
    --border: #000 !important;
    --text-3: #444 !important;
  }
  .btn { border-width: 2px !important; }
}

/* ─── A11Y: reduced motion ─── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ─── MOBILE: touch targets ≥ 44px ─── */
@media (max-width: 768px) {
  .btn,
  button:not(.icon-btn-sm):not(.ux-bulk-bar button),
  input[type="checkbox"],
  input[type="radio"],
  [role="button"],
  .st-tab, .deal-tab, .an-tab,
  .sb-btn,
  .user-menu-item {
    min-height: 44px;
    min-width: 44px;
  }
  /* Иконо-кнопки в ptb-right оставляем компактными внутри, но touch-area 44px через padding */
  .ptb-right .btn,
  .deal-header .btn {
    padding: 0 var(--sp-3) !important;
  }
  /* Чекбоксы — крупнее для пальца */
  input[type="checkbox"],
  input[type="radio"] {
    width: 22px !important;
    height: 22px !important;
  }
  /* В тестах a11y: тапаемый span 44px+ */
  a:not(.btn) {
    padding: 4px 0;
    display: inline-block;
  }
}

/* ─── MOBILE: safe-area iOS ─── */
@media (max-width: 768px) {
  body {
    padding-top: env(safe-area-inset-top, 0);
    padding-bottom: env(safe-area-inset-bottom, 0);
  }
  /* Bottom-bar (bulk-actions) выше home indicator */
  .ux-bulk-bar {
    bottom: calc(var(--sp-3) + env(safe-area-inset-bottom, 0)) !important;
  }
  /* Mobile-tab-bar если есть */
  .mobile-tabs, .mob-tabs {
    padding-bottom: env(safe-area-inset-bottom, 0) !important;
  }
}

/* ─── MOBILE: модалки → bottom-sheet ─── */
@media (max-width: 640px) {
  .ov:not([data-keep-modal="1"]) {
    align-items: flex-end !important;
  }
  .ov:not([data-keep-modal="1"]) > div,
  .ov:not([data-keep-modal="1"]) > .ov-content,
  .ov:not([data-keep-modal="1"]) > [class*="modal"] {
    width: 100% !important;
    max-width: 100% !important;
    max-height: 92vh !important;
    margin: 0 !important;
    border-radius: var(--r-xl, 16px) var(--r-xl, 16px) 0 0 !important;
    animation: bottomSheetUp 0.24s cubic-bezier(.22,.61,.36,1) !important;
  }
  @keyframes bottomSheetUp {
    from { transform: translateY(100%); }
    to   { transform: translateY(0); }
  }
  /* Грабер сверху bottom-sheet */
  .ov:not([data-keep-modal="1"]) > div::before {
    content: '';
    display: block;
    width: 40px;
    height: 4px;
    background: var(--border-2, #d0d0d0);
    border-radius: 2px;
    margin: 8px auto 4px;
  }
}

/* ─── MOBILE: сайдбар → drawer ─── */
@media (max-width: 768px) {
  .sb-rail, #sidebar, aside.sidebar {
    position: fixed;
    left: 0;
    top: 0;
    bottom: 0;
    z-index: 100;
    transform: translateX(-100%);
    transition: transform 0.24s ease;
    box-shadow: var(--shadow-xl);
  }
  .sb-rail.is-open, #sidebar.is-open, aside.sidebar.is-open {
    transform: translateX(0);
  }
  /* Hamburger для открытия */
  #mobile-menu-toggle {
    display: flex !important;
    position: fixed;
    top: calc(var(--sp-2) + env(safe-area-inset-top, 0));
    left: var(--sp-2);
    z-index: 99;
    width: 44px;
    height: 44px;
    align-items: center;
    justify-content: center;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--r-md);
    cursor: pointer;
  }
}
@media (min-width: 769px) {
  #mobile-menu-toggle { display: none !important; }
}

/* ─── A11Y: screen-reader only текст ─── */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}