/*
 * Bark design tokens — exact values shipped in barkone (https://lk.nozhmaster.ru/).
 *
 * 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.
 */
:root {
  /* 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: #fff;
  --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; /* segmented-control active pill */

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

  /* 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);

  /* 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%;
  --sidebar-logout-height: 40px;

  /* 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;

  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). ---- */
: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;
}

.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;
}
.bark-sidebar__logout {
  align-items: center;
  background: transparent;
  border: 0;
  border-radius: var(--radius-control);
  color: var(--ink2);
  cursor: pointer;
  display: flex;
  font: 600 14px/1 var(--sans);
  gap: 10px;
  height: var(--sidebar-logout-height);
  padding: 0 12px;
  text-align: left;
  width: 100%;
}
.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) ---- */
: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;
}

/* ---- 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; }