/* arbly-ui/components.css — примитивы новой системы.
 * Имена классов те же, что в текущем components.css (.btn, .pill, .card…),
 * плюс несколько новых (.nav-item, .seg, .avatar, .progress, .eyebrow). */

.icon {
  display: inline-block;
  vertical-align: middle;
  flex: 0 0 auto;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ---------- Кнопки ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-8);
  min-height: 40px;
  padding: 0 var(--space-16);
  border: 1px solid transparent;
  border-radius: 12px;
  background: var(--bg-elevated);
  color: var(--text-primary);
  font: var(--fw-medium) var(--fs-body) / 20px var(--font-sans);
  white-space: nowrap;
  text-decoration: none;
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-standard), border-color var(--dur-fast) var(--ease-standard), color var(--dur-fast) var(--ease-standard), transform var(--dur-micro) var(--ease-standard);
}
.btn:hover:not(:disabled) { background: var(--bg-hover); text-decoration: none; }
.btn:active:not(:disabled) { transform: scale(0.98); }
.btn:disabled, .btn[aria-disabled="true"] { opacity: 0.45; cursor: not-allowed; }
.btn--sm { min-height: 32px; padding: 0 var(--space-12); border-radius: 10px; font-size: var(--fs-secondary); }
.btn--primary { background: var(--accent); color: var(--text-on-accent); }
.btn--primary:hover:not(:disabled) { background: var(--accent-hover); }
.btn--secondary { background: var(--bg-surface); border-color: var(--border-default); color: var(--text-primary); }
.btn--secondary:hover:not(:disabled) { background: var(--bg-hover); border-color: var(--border-strong); }
.btn--ghost { background: transparent; color: var(--text-secondary); }
.btn--ghost:hover:not(:disabled) { background: var(--bg-hover); color: var(--text-primary); }
.btn--danger { background: transparent; border-color: var(--border-default); color: var(--danger); }
.btn--danger:hover:not(:disabled) { background: var(--danger-soft-bg); border-color: transparent; }
.btn__count {
  display: inline-grid;
  place-items: center;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.22);
  color: inherit;
  font: var(--fw-bold) var(--fs-label) / 1 var(--font-sans);
}
.btn--secondary .btn__count, .btn--ghost .btn__count { background: var(--bg-elevated); color: var(--text-secondary); }

.iconbtn {
  display: inline-grid;
  place-items: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--text-tertiary);
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-standard), color var(--dur-fast) var(--ease-standard), transform var(--dur-micro) var(--ease-standard);
}
.iconbtn:hover { background: var(--bg-hover); color: var(--text-primary); }
.iconbtn:active { transform: scale(0.92); }
.iconbtn--outline { border: 1px solid var(--border-default); background: var(--bg-surface); }
.iconbtn--sm { width: 28px; height: 28px; border-radius: 8px; }

/* ---------- Пилюли статусов ---------- */
.pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px;
  border-radius: var(--radius-pill);
  font: var(--fw-medium) var(--fs-small) / 18px var(--font-sans);
  white-space: nowrap;
  transition: background var(--dur-base) var(--ease-standard), color var(--dur-base) var(--ease-standard);
}
.pill--sm { padding: 1px 8px; font-size: var(--fs-label); line-height: 16px; }
.pill--dot::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: 0 0 auto; }
.pill--ok     { color: var(--ok);     background: var(--ok-soft-bg); }
.pill--warn   { color: var(--warn);   background: var(--warn-soft-bg); }
.pill--danger { color: var(--danger); background: var(--danger-soft-bg); }
.pill--info   { color: var(--info);   background: var(--info-soft-bg); }
.pill--muted  { color: var(--text-tertiary); background: var(--bg-elevated); }
.pill--accent { color: var(--accent-soft-text); background: var(--accent-soft-bg); }
.pill--solid  { color: var(--text-on-accent); background: var(--accent); }

/* ---------- Карточки ---------- */
.card {
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: 20px;
  box-shadow: var(--shadow-sm);
  color: var(--text-primary);
  transition: background var(--dur-base) var(--ease-standard), border-color var(--dur-base) var(--ease-standard), box-shadow var(--dur-base) var(--ease-standard), transform var(--dur-base) var(--ease-standard);
}
.card--inset { background: var(--bg-elevated); border-color: transparent; box-shadow: none; border-radius: 14px; }
.card--interactive { cursor: pointer; transition: box-shadow var(--dur-base) var(--ease-standard), border-color var(--dur-base) var(--ease-standard); }
.card--interactive:hover { box-shadow: var(--shadow-md); border-color: var(--border-default); transform: translateY(-2px); }

/* ---------- Аватар с инициалами ---------- */
.avatar {
  display: inline-grid;
  place-items: center;
  flex: 0 0 auto;
  width: 36px;
  height: 36px;
  border-radius: 12px;
  background: var(--accent-soft-bg);
  color: var(--accent-soft-text);
  font: var(--fw-bold) var(--fs-small) / 1 var(--font-sans);
  letter-spacing: 0.02em;
}
.avatar--sm { width: 28px; height: 28px; border-radius: 9px; font-size: var(--fs-micro); }
.avatar--lg { width: 44px; height: 44px; border-radius: 14px; font-size: var(--fs-body); }
.avatar--round { border-radius: 50%; }
.avatar--neutral { background: var(--bg-elevated); color: var(--text-secondary); }

/* ---------- Прогресс ---------- */
.progress { display: block; height: 6px; border-radius: 999px; background: var(--bg-elevated); overflow: hidden; }
.progress--lg { height: 8px; }
.progress__fill { display: block; height: 100%; border-radius: inherit; background: var(--accent); transition: width var(--dur-slow) var(--ease-standard); }
.progress__fill--ok { background: var(--ok); }
.progress__fill--warn { background: var(--warn); }
.progress__fill--danger { background: var(--danger); }

/* ---------- Сегментный переключатель ---------- */
.seg { display: inline-flex; gap: 2px; padding: 3px; border-radius: 12px; background: var(--bg-elevated); }
.seg__opt {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 28px;
  padding: 0 10px;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: var(--text-tertiary);
  font: var(--fw-medium) var(--fs-small) / 1 var(--font-sans);
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-standard), color var(--dur-fast) var(--ease-standard);
}
.seg__opt:hover { color: var(--text-primary); }
.seg__opt--active { transition: background var(--dur-base) var(--ease-standard), box-shadow var(--dur-base) var(--ease-standard); }
.seg__opt--active { background: var(--bg-surface); color: var(--text-primary); box-shadow: var(--shadow-sm); }
.seg__opt.is-disabled { opacity: 0.5; cursor: default; }

/* ---------- Навигация сайдбара ---------- */
.nav-item {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 40px;
  padding: 0 12px;
  border: 0;
  border-radius: 12px;
  background: transparent;
  color: var(--text-secondary);
  font: var(--fw-medium) var(--fs-body) / 20px var(--font-sans);
  text-align: left;
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-standard), color var(--dur-fast) var(--ease-standard);
}
.nav-item:hover { background: var(--bg-hover); color: var(--text-primary); }
.nav-item--active { background: var(--accent-soft-bg); color: var(--accent-soft-text); font-weight: var(--fw-bold); }
.nav-item--active .icon { color: var(--accent); }
.nav-group {
  padding: 14px 12px 6px;
  font: var(--fw-bold) var(--fs-label) / 14px var(--font-sans);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
}

/* ---------- Поля ---------- */
.input, .select, .textarea {
  width: 100%;
  min-height: 40px;
  padding: 8px 12px;
  border: 1px solid var(--control-border);
  border-radius: 12px;
  background: var(--bg-input);
  color: var(--text-primary);
  font: var(--fw-normal) var(--fs-body) / 20px var(--font-sans);
}
.input::placeholder { color: var(--text-muted); }
.input:focus-visible, .select:focus-visible, .textarea:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 1px; border-color: var(--accent); }
.search {
  display: flex;
  min-width: 0;
  white-space: nowrap;
  align-items: center;
  gap: 8px;
  min-height: 36px;
  padding: 0 12px;
  border-radius: 999px;
  background: var(--bg-elevated);
  color: var(--text-muted);
  font: var(--fw-normal) var(--fs-secondary) / 18px var(--font-sans);
}

/* ---------- Типографика-хелперы ---------- */
.eyebrow {
  font: var(--fw-bold) var(--fs-label) / 14px var(--font-sans);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.mono { font-family: var(--font-mono); font-feature-settings: "tnum" 1; }
.num { font-variant-numeric: tabular-nums; }
.caps { font: var(--fw-bold) var(--fs-label) / 14px var(--font-sans); letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-muted); }

/* ---------- Верхняя навигация ---------- */
.nav-pill { border-radius: 999px; }
.nav-pill--active, .nav-pill--active:hover:not(:disabled) { background: var(--accent-soft-bg); color: var(--accent-soft-text); font-weight: var(--fw-bold); }

/* ---------- Таблица ---------- */
.tbl { width: 100%; border-collapse: separate; border-spacing: 0; font-size: var(--fs-secondary); }
/* Обёртка таблицы: на десктопе overflow-x:clip не создаёт scroll-контейнер, поэтому thead липнет к странице под шапкой (--header-h). На узких экранах — обычная горизонтальная прокрутка */
.tbl-wrap { overflow-x: clip; }
.tbl thead th { position: sticky; top: var(--header-h, 93px); z-index: 10; background: var(--bg-surface); }
@media (max-width: 1023px) { .tbl-wrap { overflow-x: auto; } .tbl thead th { position: static; } }
/* Широкие таблицы (9+ колонок): прокрутка вместо клипа до тех пор, пока не помещаются целиком */
@media (max-width: 1199px) { .tbl-wrap--scroll { overflow-x: auto; } .tbl-wrap--scroll .tbl thead th { position: static; } }
.tbl th { padding: 10px 16px; text-align: left; font: var(--fw-bold) var(--fs-label) / 14px var(--font-sans); letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-muted); border-bottom: 1px solid var(--border-subtle); white-space: nowrap; }
.tbl td { padding: 11px 16px; border-bottom: 1px solid var(--border-subtle); vertical-align: middle; transition: background var(--dur-fast) var(--ease-standard); }
.tbl tr:last-child td { border-bottom: 0; }
.tbl th:first-child, .tbl td:first-child { padding-left: 20px; }
.tbl th:last-child, .tbl td:last-child { padding-right: 20px; }
.tbl tbody tr { cursor: pointer; transition: background var(--dur-fast) var(--ease-standard); }
.tbl tbody tr:hover td { background: var(--bg-hover); }
.tbl tbody tr.is-selected td { background: var(--bg-selected); }
.cell-title { display: block; font-weight: var(--fw-medium); color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cell-sub { display: block; font-size: var(--fs-small); line-height: 16px; color: var(--text-tertiary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ---------- Чекбокс и переключатель ---------- */
.check { appearance: none; transition: background var(--dur-fast) var(--ease-standard), border-color var(--dur-fast) var(--ease-standard); display: inline-block; vertical-align: middle; width: 18px; height: 18px; margin: 0; border: 1.5px solid var(--control-border); border-radius: 6px; background: var(--bg-input); cursor: pointer; }
.check:checked { border-color: transparent; background: var(--accent) center / 70% no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E"); }
.switch { position: relative; display: inline-block; flex: 0 0 auto; width: 36px; height: 20px; border-radius: 999px; background: var(--border-default); cursor: pointer; transition: background var(--dur-fast) var(--ease-standard); }
.switch::after { content: ""; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: var(--shadow-sm); transition: transform var(--dur-base) var(--ease-standard); }
.switch--on { background: var(--accent); }
.switch--on::after { transform: translateX(16px); }

/* ---------- Вкладки ---------- */
.tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--border-subtle); }
.tab { display: inline-flex; align-items: center; gap: 8px; padding: 10px 12px; margin-bottom: -1px; border: 0; border-bottom: 2px solid transparent; background: transparent; color: var(--text-tertiary); font: var(--fw-medium) var(--fs-body) / 20px var(--font-sans); cursor: pointer; white-space: nowrap; }
.tab { transition: color var(--dur-fast) var(--ease-standard), border-color var(--dur-base) var(--ease-standard); }
.tab:hover { color: var(--text-primary); }
.tab--active { color: var(--text-primary); border-bottom-color: var(--accent); font-weight: var(--fw-bold); }

/* ---------- Чипы фильтров ---------- */
.chip { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 12px; border: 1px solid var(--border-default); border-radius: 999px; text-decoration: none; background: var(--bg-surface); color: var(--text-secondary); font: var(--fw-medium) var(--fs-secondary) / 1 var(--font-sans); cursor: pointer; white-space: nowrap; }
.chip:hover { background: var(--bg-hover); text-decoration: none; }
.chip--active { background: var(--accent-soft-bg); border-color: var(--accent-soft-border); color: var(--accent-soft-text); }

/* ---------- Поля формы ---------- */
.field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.field__label { font: var(--fw-medium) var(--fs-small) / 16px var(--font-sans); color: var(--text-tertiary); }
.select { appearance: none; padding-right: 32px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238e889a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 10px center; background-size: 16px; cursor: pointer; }
.textarea { min-height: 88px; resize: vertical; }
.select { transition: border-color var(--dur-fast) var(--ease-standard), box-shadow var(--dur-fast) var(--ease-standard), background-color var(--dur-fast) var(--ease-standard); }
.select:hover { border-color: var(--border-strong); }
.select.is-open { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft-bg); }

/* ---------- Подменю настроек ---------- */
.subnav-item { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 36px; padding: 0 12px; border: 0; border-radius: 10px; background: transparent; color: var(--text-secondary); font: var(--fw-medium) var(--fs-secondary) / 18px var(--font-sans); text-align: left; cursor: pointer; }
.subnav-item { transition: background var(--dur-fast) var(--ease-standard), color var(--dur-fast) var(--ease-standard); }
.subnav-item:hover { background: var(--bg-hover); color: var(--text-primary); }
.subnav-item--active { background: var(--accent-soft-bg); color: var(--accent-soft-text); font-weight: var(--fw-bold); }

/* ---------- Мобильные строки-карточки (замена таблиц на телефоне) ---------- */
.m-row { cursor: pointer; transition: background var(--dur-fast) var(--ease-standard); }
.m-row:active { background: var(--bg-hover); }
.m-row.is-selected { background: var(--bg-selected); }
.m-row:first-child { border-top: 0 !important; }

/* ---------- Телефон: крупнее цели касания ---------- */
@media (max-width: 719px) {
  .btn { min-height: 40px; }
  .btn--sm { min-height: 36px; }
  .iconbtn { width: 40px; height: 40px; }
  .iconbtn--sm { width: 32px; height: 32px; }
  .subnav-item { min-height: 44px; font-size: 14px; }
  .row-link { min-height: 48px; }
  .tab { min-height: 44px; white-space: nowrap; flex: 0 0 auto; }
  .chip { min-height: 40px; }
  .check { width: 20px; height: 20px; }
  .input, .select { min-height: 44px; }
}

/* ---------- Строка-ссылка ---------- */
.row-link { display: flex; align-items: center; gap: 12px; width: 100%; padding: 12px 20px; border: 0; border-top: 1px solid var(--border-subtle); background: transparent; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.row-link:hover { background: var(--bg-hover); }

.th-sort { display: inline-flex; align-items: center; gap: 4px; margin: -4px -8px; padding: 4px 8px; border: 0; border-radius: 8px; background: none; font: inherit; letter-spacing: inherit; text-transform: inherit; color: inherit; cursor: pointer; white-space: nowrap; transition: color var(--dur-fast) var(--ease-standard), background var(--dur-fast) var(--ease-standard); }
.th-sort:hover { color: var(--text-primary); background: var(--bg-hover); }
.th-sort__icon { flex: 0 0 auto; opacity: 0; transition: opacity var(--dur-fast) var(--ease-standard), transform var(--dur-base) var(--ease-standard); }
.th-sort:hover .th-sort__icon { opacity: .5; }
.th-sort--asc, .th-sort--desc { color: var(--text-primary); }
.th-sort--asc .th-sort__icon, .th-sort--desc .th-sort__icon { opacity: 1; }
.th-sort--asc .th-sort__icon { transform: rotate(180deg); }
.tbl td, .num, .mono { font-variant-numeric: tabular-nums; }

:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }

/* Клавиатурный фокус на кликабельной строке */
.tbl tbody tr:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; border-radius: 6px; }