/*
 * Bark design tokens — exact values shipped in barkone (https://lk.nozhmaster.ru/).
 * Version: 2.0.0
 *
 * Two layers:
 *   1. Canonical names  (--accent, --ink, --bad …) — copy/paste straight into a product;
 *      these are the variables the live cabinet reads at runtime.
 *   2. --bark-* aliases — portable, namespaced names for kits that prefer a prefix.
 *      They point at the canonical layer, so the two never drift.
 *
 * Regions between "@generated" markers are built from tokens/brand.tokens.json by
 * `npm run build:tokens` — edit the tokens, not the generated CSS.
 */
:root {
  /* @generated:root start */
  /* fonts */
  --sans: "Onest", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --logo-font: "Red Hat Display", system-ui, sans-serif;

  /* brand */
  --accent: #0d8f9c;
  --banner: #16386e; /* deep-blue hero / banner gradient base */

  /* neutrals & surfaces */
  --bg: #eef0f4;
  --surface: #ffffff;
  --surface-2: #f7f8fb;
  --ink: #14181f;
  --ink2: #3a4150;
  --muted: #6a7180;
  --faint: #98a0ae;
  --line: #e6e8ee;
  --line-2: #eef0f4;
  --field: #f5f6fa;
  --chip: #f0f2f7;
  --sidebar-bg: #fafbfc;
  --raised: #ffffff;

  /* status */
  --ok: #15a06a;
  --warn: #cf850f;
  --bad: #e23d52;
  --info: #2a6fdb;

  /* elevation */
  --shadow-card: 0 1px 2px #14181f0a;
  --shadow-pop: 0 8px 28px #14181f1a;
  --shadow-up: 0 1px 2px #14181f0d, 0 10px 30px #14181f0f;

  /* radii */
  --radius-control: 8px;
  --radius-panel: 12px;
  --radius-tile: 22%;

  /* loading */
  --loader-route-delay: 150ms;
  --loader-min-visible: 300ms;
  --loader-region-threshold: 400ms;
  --loader-slow-label: 2000ms;
  --loader-fail-safe: 8000ms;
  --loader-duration: 900ms;
  --loader-brand-lg-size: 60px;
  --loader-brand-lg-mark: 43px;
  --loader-brand-md-size: 40px;
  --loader-brand-md-mark: 29px;
  --loader-brand-sm-size: 28px;
  --loader-brand-sm-mark: 20px;
  --loader-button-size: 18px;
  --loader-route-height: 2.5px;

  /* motion — fast for hover/focus, base for popover/modal enter, slow for region reveal.
     Transition ONLY color/background/border-color/box-shadow/opacity/transform. */
  --motion-fast: 120ms;
  --motion-base: 200ms;
  --motion-slow: 300ms;
  --ease-out: cubic-bezier(0.2, 0, 0, 1);

  /* z-index scale — pinned; do not invent in-between layers */
  --z-sticky: 20;
  --z-dropdown: 600;
  --z-drawer: 800;
  --z-modal: 1000;
  --z-popover: 1100;
  --z-toast: 1200;
  --z-loader: 9999;
/* @generated:root end */

  /* KPI accent system (RОП/admin highlight metrics) */
  --kpi: var(--accent);
  --kpi-banner: color-mix(in srgb, var(--accent) 42%, #fff);
  --kpi-soft: color-mix(in srgb, var(--kpi) 13%, transparent);

  /* soft tints (backgrounds for chips / active nav / status pills) */
  --accent-soft: color-mix(in srgb, var(--accent) 11%, transparent);
  --accent-line: color-mix(in srgb, var(--accent) 28%, transparent);
  --ok-soft: color-mix(in srgb, var(--ok) 13%, transparent);
  --warn-soft: color-mix(in srgb, var(--warn) 15%, transparent);
  --bad-soft: color-mix(in srgb, var(--bad) 11%, transparent);

  /* component-level constants (manual) */
  --sidebar-logout-height: 40px;

  color-scheme: light;

  /* ---- --bark-* portable aliases (do not give these different values).
     They point at the canonical vars, so they FOLLOW data-theme automatically — never
     redeclare any --bark-* inside the dark block. Soft tints and --kpi* also inherit
     (their color-mix re-mixes over the dark accent); do not redefine them in dark. ---- */
  --bark-accent: var(--accent);
  --bark-banner: var(--banner);
  --bark-ink: var(--ink);
  --bark-ink-2: var(--ink2);
  --bark-muted: var(--muted);
  --bark-faint: var(--faint);
  --bark-bg: var(--bg);
  --bark-surface: var(--surface);
  --bark-surface-2: var(--surface-2);
  --bark-line: var(--line);
  --bark-line-2: var(--line-2);
  --bark-field: var(--field);
  --bark-chip: var(--chip);
  --bark-sidebar-bg: var(--sidebar-bg);
  --bark-success: var(--ok);
  --bark-warning: var(--warn);
  --bark-danger: var(--bad);
  --bark-info: var(--info);
  --bark-kpi: var(--kpi);
  --bark-logo-font: var(--logo-font);
  --bark-ui-font: var(--sans);
  --bark-mono-font: var(--mono);
  --bark-shadow-card: var(--shadow-card);
  --bark-shadow-pop: var(--shadow-pop);
  --bark-shadow-up: var(--shadow-up);
  --bark-loader-duration: var(--loader-duration);
  --bark-loader-button-size: var(--loader-button-size);
  --bark-loader-route-height: var(--loader-route-height);
}

/* ---- Dark theme — applied via :root[data-theme="dark"] by the three-way switch.
   Tunable: a tasteful default derived from the brand (the live cabinet is light-only). ---- */
/* @generated:dark start */
:root[data-theme="dark"] {
  --accent: #1fb6c3;
  --banner: #1d2f57;
  --bg: #0e1116;
  --surface: #161b22;
  --surface-2: #1b212b;
  --ink: #e7eaef;
  --ink2: #aab3c0;
  --muted: #8a93a2;
  --faint: #69727f;
  --line: #262d38;
  --line-2: #1b212b;
  --field: #1a2029;
  --chip: #222a35;
  --sidebar-bg: #11151b;
  --raised: #2b3543;
  --ok: #2bb47f;
  --warn: #e0a23a;
  --bad: #ef5a6e;
  --info: #5a8ff0;
  --shadow-card: 0 1px 2px #00000040;
  --shadow-pop: 0 8px 28px #00000080;
  --shadow-up: 0 1px 2px #00000040, 0 10px 30px #00000066;
  color-scheme: dark;
}
/* @generated:dark end */

.bark-app {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
}

.bark-logo {
  align-items: center;
  display: inline-flex;
  gap: 11px;
  text-decoration: none;
}

.bark-logo__tile {
  align-items: center;
  /* fixed dark tile gradient (STYLE_GUIDE §logo): stays dark in BOTH themes — do NOT use --ink,
     which flips to near-white in dark mode and would hide the white mark. */
  background: linear-gradient(150deg, #1d2733, #14181f);
  border-radius: var(--radius-tile);
  color: #fff;
  display: inline-flex;
  flex: none;
  height: 32px;
  justify-content: center;
  width: 32px;
}

/* The mark sits at ~0.74 × the tile in every size tier (one ratio, not per-template px). */
.bark-logo__tile img {
  display: block;
  height: 74%;
  width: 74%;
}

/* Wordmark type scale — PIN these, do not invent new sizes.
   Font is always Red Hat Display. bark = 800, module = 600 (product colour),
   subtitle = Onest 700 uppercase / 0.05em. Default .bark-logo = lg (sidebar):
   tile 32 / word 18 / subtitle 10 — matches the live barkone cabinet. Other contexts use --xl / --md / --sm. */
.bark-logo__word {
  color: var(--ink);
  display: block;
  font-family: var(--logo-font);
  font-size: 18px;
  font-weight: 800;
  letter-spacing: 0;
  line-height: 1;
}

/* The module suffix is the PRODUCT colour (favicon bowl + module word). Each product sets
   --logo-module to its colour (see templates); it falls back to --accent so barkone — whose
   product colour IS the accent — and any unconfigured lockup stay correct. --accent itself is
   never rewired (it stays the active/hover/KPI colour everywhere). */
.bark-logo__module {
  color: var(--logo-module, var(--accent));
  font-weight: 600;
}

/* The subtitle always sits on its own line under the wordmark (never inline beside it). */
.bark-logo__subtitle {
  color: var(--faint);
  display: block;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.05em;
  line-height: 1.2;
  margin-top: 4px;
  text-transform: uppercase;
}

.bark-panel {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-panel);
  box-shadow: var(--shadow-card);
}

.bark-data {
  font-family: var(--mono);
}

/* ---- Wordmark size modifiers (the only sanctioned sizes) ---- */
.bark-logo--xl .bark-logo__tile { height: 48px; width: 48px; }
.bark-logo--xl .bark-logo__word { font-size: 26px; }
.bark-logo--xl .bark-logo__subtitle { font-size: 11px; }
.bark-logo--md .bark-logo__tile { height: 28px; width: 28px; }
.bark-logo--md .bark-logo__word { font-size: 15px; }
.bark-logo--md .bark-logo__subtitle { font-size: 9px; }
.bark-logo--sm .bark-logo__tile { height: 24px; width: 24px; }
.bark-logo--sm .bark-logo__word { font-size: 13px; }

/* ---- Sidebar: a pinned brand element (see docs/STYLE_GUIDE.md) ---- */
.bark-sidebar {
  background: var(--sidebar-bg);
  border-right: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  gap: 22px;
  height: 100dvh;
  overflow: hidden;
  padding: 20px 14px 14px;
  position: sticky;
  top: 0;
  width: 244px;
}
.bark-sidebar > .bark-logo { flex: none; }
.bark-sidebar__scroll {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 22px;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
}
.bark-sidebar__group { display: grid; gap: 2px; }
.bark-sidebar__group-label {
  color: var(--faint);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.1em;
  margin: 0 0 6px 12px;
  text-transform: uppercase;
}
.bark-sidebar__item {
  align-items: center;
  border-radius: 8px;
  color: var(--ink2);
  display: flex;
  font-size: 14px;
  gap: 10px;
  padding: 10px 12px;
  text-decoration: none;
}
.bark-sidebar__item:hover { background: var(--chip); }
.bark-sidebar__item--active {
  background: var(--accent-soft);
  color: var(--accent);
  font-weight: 700;
}
.bark-sidebar__item svg,
.bark-sidebar__item img { flex: none; height: 18px; width: 18px; }
.bark-sidebar__bottom {
  display: grid;
  flex: none;
  gap: 12px;
}
.bark-sidebar__footer {
  border-top: 1px solid var(--line);
  display: grid;
  gap: 10px;
  padding-top: 12px;
}
/* The employee identity block — THE identity point of the shell (SSO photo/initials + name +
   email + icon-only logout). Pinned above the meta line; barkone is the documented exception. */
.bark-sidebar__user {
  align-items: center;
  display: grid;
  gap: 10px;
  grid-template-columns: auto minmax(0, 1fr) auto;
}
.bark-sidebar__user-info { display: grid; gap: 2px; min-width: 0; }
.bark-sidebar__user-name {
  color: var(--ink);
  font: 600 13px/1.25 var(--sans);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.bark-sidebar__user-mail {
  color: var(--muted);
  font: 500 11px/1.3 var(--sans);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.bark-sidebar__logout {
  align-items: center;
  background: transparent;
  border: 0;
  border-radius: var(--radius-control);
  color: var(--ink2);
  cursor: pointer;
  display: inline-flex;
  flex: none;
  height: var(--sidebar-logout-height);
  justify-content: center;
  padding: 0;
  transition: background var(--motion-fast) var(--ease-out), color var(--motion-fast) var(--ease-out);
  width: var(--sidebar-logout-height);
}
.bark-sidebar__logout:hover { background: var(--bad-soft); color: var(--bad); }
.bark-sidebar__logout:focus-visible {
  background: var(--bad-soft);
  box-shadow: 0 0 0 3px var(--bad-soft);
  color: var(--bad);
  outline: none;
}
.bark-sidebar__logout:disabled {
  cursor: not-allowed;
  opacity: 0.65;
  pointer-events: none;
}
.bark-sidebar__logout[aria-busy="true"] { cursor: progress; }
.bark-sidebar__logout svg { flex: none; height: 18px; width: 18px; }
.bark-sidebar__meta {
  color: var(--faint);
  font: 500 11px/1.5 var(--sans);
}

/* ---- Theme switch: a pinned 3-way segmented control (light / dark / system) ---- */
.bark-theme-switch {
  align-items: center;
  background: var(--chip);
  border: 1px solid var(--line);
  border-radius: 12px;
  display: inline-flex;
  gap: 2px;
  padding: 3px;
}
.bark-theme-switch button {
  align-items: center;
  background: none;
  border: 0;
  border-radius: 9px;
  color: var(--faint);
  cursor: pointer;
  display: inline-flex;
  height: 34px;
  justify-content: center;
  padding: 0;
  width: 42px;
}
.bark-theme-switch button:hover { color: var(--ink2); }
.bark-theme-switch button svg { height: 18px; width: 18px; }
.bark-theme-switch button[aria-pressed="true"] {
  background: var(--raised);
  box-shadow: var(--shadow-card);
  color: var(--accent);
}
.bark-sidebar .bark-theme-switch {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  width: 100%;
}
.bark-sidebar .bark-theme-switch button { width: 100%; }

/* ---- Spacing scale: snap every gap/padding to these (4px base) ---- */
/* @generated:spacing start */
:root {
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
}
/* @generated:spacing end */

/* ---- In-page heading + body scale: all interface text is Onest. ---- */
.bark-h1 { color: var(--ink); font-family: var(--sans); font-size: 28px; font-weight: 700; line-height: 1.15; }
.bark-h2 { color: var(--ink); font-family: var(--sans); font-size: 20px; font-weight: 700; line-height: 1.2; }
.bark-h3 { color: var(--ink); font-family: var(--sans); font-size: 15px; font-weight: 700; line-height: 1.3; }
.bark-body { color: var(--ink); font-family: var(--sans); font-size: 14px; line-height: 1.5; }
.bark-caption { color: var(--muted); font-family: var(--sans); font-size: 12px; font-weight: 500; line-height: 1.4; }

/* ---- Buttons: primary (solid accent) + ghost. Pinned heights: sm 32 / md 40 (default) / lg 48. ---- */
.bark-btn {
  align-items: center;
  background: var(--accent);
  border: 1px solid transparent;
  border-radius: var(--radius-control);
  color: #fff;
  cursor: pointer;
  display: inline-flex;
  flex: none;
  font: 600 14px/1 var(--sans);
  gap: 8px;
  height: 40px;
  justify-content: center;
  padding: 0 16px;
  white-space: nowrap;
}
.bark-btn:hover { filter: brightness(1.06); }
.bark-btn:active { transform: scale(0.98); }
.bark-btn:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--accent-soft); }
.bark-btn[disabled], .bark-btn:disabled { cursor: not-allowed; opacity: 0.45; }
.bark-btn[disabled]:hover, .bark-btn:disabled:hover { filter: none; }
.bark-btn--ghost { background: transparent; border-color: var(--line); color: var(--ink2); }
.bark-btn--ghost:hover { background: var(--chip); filter: none; }
/* sizes */
.bark-btn--sm { height: 32px; padding: 0 12px; font-size: 13px; }
.bark-btn--lg { height: 48px; padding: 0 20px; font-size: 15px; }
/* width / shape */
.bark-btn--block { width: 100%; }
/* No full-width buttons on desktop: a form CTA hugs (capped ~360px) and never spans a wide screen. */
@media (min-width: 640px) { .bark-btn--block { width: auto; min-width: 220px; max-width: 360px; } }
.bark-btn--icon { padding: 0; width: 40px; }
.bark-btn--icon.bark-btn--sm { width: 32px; }
.bark-btn--icon.bark-btn--lg { width: 48px; }
.bark-btn svg { height: 18px; width: 18px; }
.bark-btn--lg svg { height: 20px; width: 20px; }

/* ---- Form fields: visible labels, stable validation space, 32/40/48px heights. ---- */
.bark-field { display: grid; gap: 6px; }
.bark-field__label {
  color: var(--ink2);
  font: 600 12px/1.35 var(--sans);
}
.bark-field__control {
  background: var(--field);
  border: 1px solid var(--line);
  border-radius: var(--radius-control);
  color: var(--ink);
  font: 400 14px/1.4 var(--sans);
  height: 40px;
  outline: none;
  padding: 0 12px;
  width: 100%;
}
.bark-field__control::placeholder { color: var(--faint); }
.bark-field__control:focus-visible {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
.bark-field__control:disabled { cursor: not-allowed; opacity: 0.55; }
.bark-field__control[readonly] { background: var(--surface-2); color: var(--ink2); }
.bark-field__control--sm { height: 32px; }
.bark-field__control--lg { height: 48px; }
textarea.bark-field__control { height: auto; min-height: 96px; padding-block: 10px; resize: vertical; }
.bark-field__control--data { font-family: var(--mono); font-feature-settings: "tnum" 1; }
.bark-field__hint { color: var(--muted); font: 500 12px/1.4 var(--sans); min-height: 17px; }
.bark-field--error .bark-field__control { border-color: var(--bad); }
.bark-field--error .bark-field__hint { color: var(--bad); }

/* ---- Modal: sticky chrome, independently scrolling body, no nested layers. ---- */
.bark-modal-backdrop {
  align-items: center;
  background: rgb(20 24 31 / 56%);
  display: flex;
  inset: 0;
  justify-content: center;
  padding: 20px;
  position: fixed;
  z-index: 1000;
}
.bark-modal {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-panel);
  box-shadow: var(--shadow-pop);
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  max-height: 85dvh;
  overflow: hidden;
  width: min(560px, 100%);
}
.bark-modal--sm { width: min(400px, 100%); }
.bark-modal--lg { width: min(720px, 100%); }
.bark-modal__header,
.bark-modal__footer { align-items: center; display: flex; gap: 12px; padding: 16px 20px; }
.bark-modal__header { border-bottom: 1px solid var(--line); justify-content: space-between; }
.bark-modal__body { overflow-y: auto; padding: 20px; }
.bark-modal__footer { border-top: 1px solid var(--line); justify-content: flex-end; }

/* ---- Loading: one system for app boot, routes, content regions, and async buttons. ---- */
@keyframes bark-loader-spin { to { transform: rotate(1turn); } }
@keyframes bark-route-progress {
  0% { transform: translateX(-120%); }
  55% { transform: translateX(125%); }
  100% { transform: translateX(300%); }
}
@keyframes bark-skeleton-shimmer {
  to { background-position-x: -200%; }
}

.bark-loader {
  --bark-loader-size: var(--loader-brand-lg-size);
  --bark-loader-mark-size: var(--loader-brand-lg-mark);
  display: inline-grid;
  flex: none;
  height: var(--bark-loader-size);
  place-items: center;
  width: var(--bark-loader-size);
}
.bark-loader--md {
  --bark-loader-size: var(--loader-brand-md-size);
  --bark-loader-mark-size: var(--loader-brand-md-mark);
}
.bark-loader--sm {
  --bark-loader-size: var(--loader-brand-sm-size);
  --bark-loader-mark-size: var(--loader-brand-sm-mark);
}
.bark-loader__ring,
.bark-loader__mark {
  display: block;
  grid-area: 1 / 1;
}
.bark-loader__ring {
  animation: bark-loader-spin var(--loader-duration) linear infinite;
  color: var(--accent);
  height: 100%;
  overflow: visible;
  width: 100%;
}
.bark-loader__ring circle {
  fill: none;
  stroke: currentColor;
  stroke-dasharray: 26 40;
  stroke-linecap: round;
  stroke-width: 1.5;
}
.bark-loader__mark {
  color: var(--ink);
  height: var(--bark-loader-mark-size);
  width: var(--bark-loader-mark-size);
}
.bark-loader__mark rect,
.bark-loader__mark path { fill: currentColor; }

.bark-loader-screen {
  align-items: center;
  background: var(--bg);
  display: grid;
  inset: 0;
  justify-items: center;
  position: fixed;
  z-index: 9999;
}
.bark-loader-region {
  align-content: center;
  display: grid;
  justify-items: center;
  min-height: 160px;
  padding: var(--space-6);
  text-align: center;
}
.bark-loader-screen[hidden],
.bark-loader-region[hidden] { display: none; }
.bark-loader__message {
  color: var(--muted);
  font: 500 13px/1.45 var(--sans);
  margin: 12px 0 0;
}

.bark-route-progress {
  background: var(--accent-soft);
  height: var(--loader-route-height);
  opacity: 0;
  overflow: hidden;
  pointer-events: none;
  position: sticky;
  top: 0;
  transition: opacity 100ms ease;
  width: 100%;
  z-index: 20;
}
.bark-route-progress::after {
  animation: bark-route-progress 1100ms ease-in-out infinite;
  background: var(--accent);
  content: "";
  inset: 0 auto 0 0;
  position: absolute;
  width: 38%;
}
.bark-route-progress[data-loading="true"] { opacity: 1; }

.bark-spinner {
  animation: bark-loader-spin var(--loader-duration) linear infinite;
  border: 2px solid color-mix(in srgb, currentColor 32%, transparent);
  border-radius: 50%;
  border-top-color: currentColor;
  box-sizing: border-box;
  display: inline-block;
  flex: none;
  height: var(--loader-button-size);
  width: var(--loader-button-size);
}
.bark-btn[aria-busy="true"] {
  cursor: progress;
  opacity: 1;
  pointer-events: none;
}
.bark-btn[aria-busy="true"]:active { transform: none; }

.bark-skeleton {
  animation: bark-skeleton-shimmer 1400ms linear infinite;
  background: linear-gradient(90deg, var(--chip) 30%, var(--surface-2) 48%, var(--chip) 66%);
  background-size: 300% 100%;
  border-radius: 6px;
  color: transparent;
  min-height: 16px;
  overflow: hidden;
  pointer-events: none;
  user-select: none;
}

.bark-progress {
  appearance: none;
  background: var(--line-2);
  border: 0;
  border-radius: 999px;
  display: block;
  height: 6px;
  overflow: hidden;
  width: 100%;
}
.bark-progress::-webkit-progress-bar { background: var(--line-2); }
.bark-progress::-webkit-progress-value { background: var(--accent); border-radius: inherit; }
.bark-progress::-moz-progress-bar { background: var(--accent); border-radius: inherit; }

.bark-sr-only {
  clip: rect(0, 0, 0, 0);
  clip-path: inset(50%);
  height: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}

@media (prefers-reduced-motion: reduce) {
  .bark-loader__ring,
  .bark-spinner,
  .bark-route-progress::after,
  .bark-skeleton { animation: none; }
  .bark-route-progress::after { transform: none; }
  .bark-skeleton { background: var(--chip); }
}

/* ---- Chart handoff tokens for chart libraries. ---- */
.bark-chart {
  --chart-primary: var(--accent);
  --chart-comparison: var(--ink2);
  --chart-grid: var(--line-2);
  --chart-area-opacity: 0.12;
  color: var(--ink);
  font-family: var(--sans);
}
.bark-chart__value { font-family: var(--mono); font-feature-settings: "tnum" 1; }

/* ---- Status pills: ok / warn / bad / info ---- */
.bark-pill {
  align-items: center;
  border-radius: 999px;
  display: inline-flex;
  font: 600 12px/1 var(--sans);
  gap: 6px;
  padding: 4px 10px;
}
.bark-pill--ok { background: var(--ok-soft); color: var(--ok); }
.bark-pill--warn { background: var(--warn-soft); color: var(--warn); }
.bark-pill--bad { background: var(--bad-soft); color: var(--bad); }
.bark-pill--info { background: color-mix(in srgb, var(--info) 13%, transparent); color: var(--info); }

/* ---- Icons: outline set (Lucide), stroke 1.7; 18px in sidebar, 20px in content ---- */
.bark-icon { height: 20px; width: 20px; stroke-width: 1.7; }

/* ---- Page shell: pinned density (see docs/STYLE_GUIDE.md §Page shell). Working screens never
   exceed these gaps; air above 40px belongs only to empty states and auth screens. ---- */
.bark-main {
  display: grid;
  align-content: start;
  gap: var(--space-6);
  min-width: 0;
  padding: 24px 32px 40px;
}
@media (max-width: 767px) { .bark-main { padding: 16px; } }
.bark-main--reading { justify-self: center; max-width: 840px; width: 100%; }
.bark-grid {
  display: grid;
  gap: var(--space-4);
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
}

/* ---- Page header: title block left, utility cluster right. The avatar is ALWAYS the last
   element of __tools — the shell's single identity point (never in the sidebar). ---- */
.bark-page-header {
  align-items: flex-start;
  display: flex;
  gap: var(--space-4);
  justify-content: space-between;
}
.bark-page-header__meta {
  align-items: center;
  color: var(--muted);
  display: flex;
  flex-wrap: wrap;
  font: 500 12px/1.4 var(--sans);
  gap: 4px 10px;
  margin-top: 6px;
}
.bark-page-header__meta .bark-data { color: var(--ink2); }
.bark-page-header__tools {
  align-items: center;
  display: flex;
  flex: none;
  gap: 8px;
}
.bark-page-header__tool {
  align-items: center;
  background: transparent;
  border: 1px solid var(--line);
  border-radius: var(--radius-control);
  color: var(--ink2);
  cursor: pointer;
  display: inline-flex;
  height: 36px;
  justify-content: center;
  transition: background var(--motion-fast) var(--ease-out), color var(--motion-fast) var(--ease-out);
  width: 36px;
}
.bark-page-header__tool:hover { background: var(--chip); }
.bark-page-header__tool:focus-visible { box-shadow: 0 0 0 3px var(--accent-soft); outline: none; }
.bark-page-header__tool svg { height: 20px; width: 20px; }

/* ---- Avatar: photo from the SSO session or initials fallback (docs/SSO_AVATAR.md).
   Initials come from initialsFromName() — never invent a per-product formula. ---- */
.bark-avatar {
  align-items: center;
  background: var(--accent-soft);
  border: 1px solid var(--line);
  border-radius: 50%;
  color: var(--accent);
  display: inline-flex;
  flex: none;
  font: 600 13px/1 var(--sans);
  height: 32px;
  justify-content: center;
  letter-spacing: 0.02em;
  overflow: hidden;
  position: relative;
  user-select: none;
  width: 32px;
}
.bark-avatar img {
  height: 100%;
  inset: 0;
  object-fit: cover;
  position: absolute;
  width: 100%;
}
.bark-avatar--sm { font-size: 10px; height: 24px; width: 24px; }
.bark-avatar--lg { font-size: 16px; height: 40px; width: 40px; }

/* ---- Panel anatomy: pinned paddings (density is a brand constant, not a mood).
   --dense is the ONLY sanctioned tighter mode (tables/monitoring screens). ---- */
.bark-panel__header {
  align-items: center;
  border-bottom: 1px solid var(--line-2);
  display: flex;
  gap: var(--space-3);
  justify-content: space-between;
  padding: 16px 20px;
}
.bark-panel__title { color: var(--ink); font: 700 15px/1.3 var(--sans); }
.bark-panel__body { padding: 20px; }
.bark-panel--dense .bark-panel__body { padding: 12px 16px; }
.bark-panel__footer {
  border-top: 1px solid var(--line-2);
  display: flex;
  gap: var(--space-3);
  justify-content: flex-end;
  padding: 12px 20px;
}

/* ---- KPI / stat card: the standard dashboard unit ---- */
.bark-kpi { display: grid; gap: 6px; padding: 16px 20px; }
.bark-kpi__label { color: var(--muted); font: 500 12px/1.4 var(--sans); }
.bark-kpi__value {
  color: var(--ink);
  font: 600 24px/1.15 var(--mono);
  font-feature-settings: "tnum" 1;
}
.bark-kpi__hint { color: var(--faint); font: 500 11px/1.4 var(--sans); }

/* ---- Data table: base spec. Numbers right in mono, text left, statuses = pills.
   No zebra; hover = --surface-2; rows 44px (36px dense), header 40px caption-style. ---- */
.bark-table {
  border-collapse: collapse;
  color: var(--ink);
  font: 400 14px/1.4 var(--sans);
  width: 100%;
}
.bark-table th {
  color: var(--faint);
  font: 700 11px/1.2 var(--sans);
  height: 40px;
  letter-spacing: 0.06em;
  text-align: left;
  text-transform: uppercase;
}
.bark-table td { border-top: 1px solid var(--line-2); height: 44px; }
.bark-table--dense td { height: 36px; }
.bark-table th, .bark-table td { padding: 0 12px; }
.bark-table th:first-child, .bark-table td:first-child { padding-left: 20px; }
.bark-table th:last-child, .bark-table td:last-child { padding-right: 20px; }
.bark-table tbody tr { transition: background var(--motion-fast) var(--ease-out); }
.bark-table tbody tr:hover { background: var(--surface-2); }
.bark-table tbody tr[aria-selected="true"] { background: var(--accent-soft); }
.bark-table .bark-data, .bark-table td[data-type="number"] {
  font-feature-settings: "tnum" 1;
  text-align: right;
}

/* ---- Table sorting: exactly ONE active sort; th carries aria-sort. First click — numbers/dates
   desc, text asc; second click flips. The whole header label is the button. ---- */
.bark-table__sort {
  align-items: center;
  background: none;
  border: 0;
  border-radius: 6px;
  color: inherit;
  cursor: pointer;
  display: inline-flex;
  font: inherit;
  gap: 4px;
  letter-spacing: inherit;
  margin: -2px -4px;
  padding: 2px 4px;
  text-transform: inherit;
  transition: color var(--motion-fast) var(--ease-out);
}
.bark-table__sort:hover { color: var(--ink2); }
.bark-table__sort:focus-visible { box-shadow: 0 0 0 3px var(--accent-soft); outline: none; }
.bark-table__sort svg { flex: none; height: 14px; width: 14px; }
.bark-table th[aria-sort] .bark-table__sort { color: var(--accent); }

/* ---- Row actions: right-aligned last column; <=2 inline icon buttons, 3+ => kebab + menu ---- */
.bark-table th.bark-table__actions,
.bark-table td.bark-table__actions { text-align: right; white-space: nowrap; width: 1%; }
.bark-row-action {
  align-items: center;
  background: transparent;
  border: 0;
  border-radius: var(--radius-control);
  color: var(--ink2);
  cursor: pointer;
  display: inline-flex;
  height: 32px;
  justify-content: center;
  transition: background var(--motion-fast) var(--ease-out), color var(--motion-fast) var(--ease-out);
  width: 32px;
}
.bark-row-action:hover { background: var(--chip); color: var(--ink); }
.bark-row-action:focus-visible { box-shadow: 0 0 0 3px var(--accent-soft); outline: none; }
.bark-row-action svg { height: 18px; width: 18px; }

/* ---- Menu: dropdown/popover (row kebab, toolbar «Фильтры»). Destructive item = --bad after a
   separator. Layer --z-dropdown. ---- */
.bark-menu {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-control);
  box-shadow: var(--shadow-pop);
  display: grid;
  min-width: 180px;
  padding: 4px;
  z-index: var(--z-dropdown);
}
.bark-menu__item {
  align-items: center;
  background: none;
  border: 0;
  border-radius: 6px;
  color: var(--ink);
  cursor: pointer;
  display: flex;
  font: 400 14px/1 var(--sans);
  gap: 10px;
  height: 36px;
  padding: 0 10px;
  text-align: left;
  transition: background var(--motion-fast) var(--ease-out);
  width: 100%;
}
.bark-menu__item:hover { background: var(--chip); }
.bark-menu__item:focus-visible { background: var(--chip); box-shadow: inset 0 0 0 2px var(--accent-line); outline: none; }
.bark-menu__item svg { color: var(--ink2); flex: none; height: 18px; width: 18px; }
.bark-menu__item--bad { color: var(--bad); }
.bark-menu__item--bad svg { color: var(--bad); }
.bark-menu__item--bad:hover { background: var(--bad-soft); }
.bark-menu__sep { background: var(--line-2); height: 1px; margin: 4px 0; }

/* ---- Toolbar: search + up to 3 inline filters left, actions right (controls 32px).
   Applied filters = removable accent chips + «Сбросить»; >3 filters → one «Фильтры» popover. ---- */
.bark-toolbar {
  align-items: center;
  border-bottom: 1px solid var(--line-2);
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 12px 20px;
}
.bark-toolbar__spacer { flex: 1 1 auto; }
.bark-toolbar .bark-field__control { height: 32px; width: auto; }
.bark-toolbar__search { min-width: 220px; }
.bark-filter-chip {
  align-items: center;
  background: var(--accent-soft);
  border: 0;
  border-radius: 999px;
  color: var(--accent);
  cursor: pointer;
  display: inline-flex;
  flex: none;
  font: 600 12px/1 var(--sans);
  gap: 6px;
  height: 28px;
  padding: 0 10px;
  transition: background var(--motion-fast) var(--ease-out);
}
.bark-filter-chip svg { height: 14px; width: 14px; }
.bark-filter-chip:hover { background: color-mix(in srgb, var(--accent) 18%, transparent); }
.bark-filter-chip:focus-visible { box-shadow: 0 0 0 3px var(--accent-soft); outline: none; }

/* ---- Pagination: panel footer row. Mono range counter, 32px prev/next, fixed page sizes. ---- */
.bark-pagination {
  align-items: center;
  border-top: 1px solid var(--line-2);
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: space-between;
  padding: 10px 20px;
}
.bark-pagination__range {
  color: var(--muted);
  font: 500 12px/1 var(--mono);
  font-feature-settings: "tnum" 1;
}
.bark-pagination__nav { align-items: center; display: flex; gap: 4px; }
.bark-pagination__btn {
  align-items: center;
  background: transparent;
  border: 1px solid var(--line);
  border-radius: var(--radius-control);
  color: var(--ink2);
  cursor: pointer;
  display: inline-flex;
  height: 32px;
  justify-content: center;
  transition: background var(--motion-fast) var(--ease-out), color var(--motion-fast) var(--ease-out);
  width: 32px;
}
.bark-pagination__btn:hover { background: var(--chip); }
.bark-pagination__btn:focus-visible { box-shadow: 0 0 0 3px var(--accent-soft); outline: none; }
.bark-pagination__btn:disabled { cursor: not-allowed; opacity: 0.45; }
.bark-pagination__btn svg { height: 18px; width: 18px; }

/* ---- Toasts: ONE stack bottom-right, max 3 visible. ok/info 5s, warn 8s, bad sticky. ---- */
@keyframes bark-toast-in {
  from { opacity: 0; transform: translateY(6px); }
}
.bark-toast-stack {
  bottom: 16px;
  display: grid;
  gap: 8px;
  justify-items: end;
  position: fixed;
  right: 16px;
  z-index: var(--z-toast);
}
.bark-toast {
  align-items: flex-start;
  animation: bark-toast-in var(--motion-base) var(--ease-out);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-panel);
  box-shadow: var(--shadow-pop);
  display: flex;
  gap: 10px;
  max-width: 360px;
  padding: 12px 14px;
}
.bark-toast__icon { flex: none; height: 20px; margin-top: 1px; width: 20px; }
.bark-toast--ok .bark-toast__icon { color: var(--ok); }
.bark-toast--info .bark-toast__icon { color: var(--info); }
.bark-toast--warn .bark-toast__icon { color: var(--warn); }
.bark-toast--bad .bark-toast__icon { color: var(--bad); }
.bark-toast__body { display: grid; gap: 2px; min-width: 0; }
.bark-toast__title { color: var(--ink); font: 600 14px/1.35 var(--sans); }
.bark-toast__text { color: var(--muted); font: 400 12px/1.45 var(--sans); }
.bark-toast__action {
  color: var(--accent);
  cursor: pointer;
  font: 600 12px/1.4 var(--sans);
  justify-self: start;
  text-decoration: none;
}
.bark-toast__close {
  align-items: center;
  background: transparent;
  border: 0;
  border-radius: 6px;
  color: var(--faint);
  cursor: pointer;
  display: inline-flex;
  flex: none;
  height: 24px;
  justify-content: center;
  margin: -2px -4px 0 0;
  transition: background var(--motion-fast) var(--ease-out), color var(--motion-fast) var(--ease-out);
  width: 24px;
}
.bark-toast__close:hover { background: var(--chip); color: var(--ink2); }
.bark-toast__close svg { height: 16px; width: 16px; }

/* ---- Inline alert: persistent region state (toast = событие, alert = состояние) ---- */
.bark-alert {
  align-items: flex-start;
  border: 1px solid;
  border-radius: var(--radius-control);
  display: flex;
  font: 400 13px/1.45 var(--sans);
  gap: 10px;
  padding: 12px 16px;
}
.bark-alert svg { flex: none; height: 18px; margin-top: 1px; width: 18px; }
.bark-alert--info { background: color-mix(in srgb, var(--info) 8%, transparent); border-color: color-mix(in srgb, var(--info) 25%, transparent); color: var(--ink2); }
.bark-alert--info svg { color: var(--info); }
.bark-alert--ok { background: var(--ok-soft); border-color: color-mix(in srgb, var(--ok) 25%, transparent); color: var(--ink2); }
.bark-alert--ok svg { color: var(--ok); }
.bark-alert--warn { background: var(--warn-soft); border-color: color-mix(in srgb, var(--warn) 28%, transparent); color: var(--ink2); }
.bark-alert--warn svg { color: var(--warn); }
.bark-alert--bad { background: var(--bad-soft); border-color: color-mix(in srgb, var(--bad) 25%, transparent); color: var(--ink2); }
.bark-alert--bad svg { color: var(--bad); }

@media (prefers-reduced-motion: reduce) {
  .bark-toast { animation: none; }
}

/* ---- Empty state: useful and short, inside its region — never full-screen, never a hero ---- */
.bark-empty {
  align-content: center;
  display: grid;
  gap: 8px;
  justify-items: center;
  padding: 40px 20px;
  text-align: center;
}
.bark-empty__icon {
  align-items: center;
  background: var(--chip);
  border-radius: 50%;
  color: var(--faint);
  display: inline-flex;
  height: 40px;
  justify-content: center;
  width: 40px;
}
.bark-empty__icon svg { height: 20px; width: 20px; }
.bark-empty__title { color: var(--ink2); font: 600 14px/1.4 var(--sans); }
.bark-empty__hint { color: var(--muted); font: 400 12px/1.5 var(--sans); max-width: 360px; }
.bark-empty .bark-btn { margin-top: 8px; }