/* styles/components/kpi-ticker.css
   KPI Ticker — бегущая строка. Бесконечный CSS-анимированный скролл. */

.ark-ticker {
  width: 100%; overflow: hidden; height: 28px;
  display: flex; align-items: center;
  border-top: 1px solid var(--border, rgba(255,255,255,.07));
  background: var(--header-bg, transparent);
  position: relative;
}
.ark-ticker::before, .ark-ticker::after {
  content: ''; position: absolute; top: 0; bottom: 0; width: 48px; z-index: 2; pointer-events: none;
}
.ark-ticker::before { left: 0;  background: linear-gradient(to right, var(--header-bg, var(--bg-base, #0D1B3A)), transparent); }
.ark-ticker::after  { right: 0; background: linear-gradient(to left,  var(--header-bg, var(--bg-base, #0D1B3A)), transparent); }

.ark-ticker__track  { display: flex; width: 100%; overflow: hidden; }
.ark-ticker__inner  { display: flex; align-items: center; white-space: nowrap; animation: ark-tick 24s linear infinite; will-change: transform; }

@keyframes ark-tick { from { transform: translateX(0); } to { transform: translateX(-50%); } }

.ark-ticker__item   { display: inline-flex; align-items: center; gap: 5px; padding: 0 6px; font-size: 11.5px; color: var(--text-secondary, #9FB0D0); white-space: nowrap; }
.ark-ticker__ico    { color: var(--text-muted, #7384A8); display: flex; align-items: center; flex: none; }
.ark-ticker__lbl    { color: var(--text-muted, #7384A8); }
.ark-ticker__val    { font-weight: 600; color: var(--text-primary, #E6ECF8); font-variant-numeric: tabular-nums; font-family: var(--font-mono, 'IBM Plex Mono', monospace); }

.ark-ticker__item--warn .ark-ticker__val { color: var(--status-warning, #f59e0b); }
.ark-ticker__item--err  .ark-ticker__val { color: var(--status-danger, #ef4444); }
.ark-ticker__item--ok   .ark-ticker__val { color: var(--status-success, #34d399); }

.ark-ticker__sep { color: var(--border, rgba(255,255,255,.15)); margin: 0 4px; font-size: 11px; user-select: none; }

.ark-ticker__item--skel .ark-ticker__lbl {
  display: inline-block; width: 120px; height: 9px; border-radius: 4px;
  background: var(--border, rgba(255,255,255,.08));
  animation: ark-skel 1.4s ease-in-out infinite;
}
@keyframes ark-skel { 0%, 100% { opacity: .5; } 50% { opacity: 1; } }

.ark-ticker__track:hover .ark-ticker__inner { animation-play-state: paused; }

@media (prefers-reduced-motion: reduce) {
  .ark-ticker__inner { animation: none; overflow-x: auto; scrollbar-width: none; }
  .ark-ticker__inner::-webkit-scrollbar { display: none; }
}
@media (max-width: 480px) { .ark-ticker { display: none; } }

/* ── Место в сетке body: своя строка 28px между шапкой и содержимым; пока полосы нет (#app-ticker без is-on), сетка прежняя ── */
#app-ticker { grid-area: ticker; display: none; min-width: 0; }
#app-ticker.is-on { display: block; }
@media (min-width: 769px) {
  body:has(#app-ticker.is-on) {
    grid-template-rows: var(--header-height) 28px minmax(0, 1fr);
    grid-template-areas:
      "sidebar header"
      "sidebar ticker"
      "sidebar main";
  }
}
@media (max-width: 768px) {
  body:has(#app-ticker.is-on) {
    grid-template-rows: var(--header-height) 28px minmax(0, 1fr);
    grid-template-areas:
      "header"
      "ticker"
      "main";
  }
}
@media (max-width: 480px) { #app-ticker.is-on { display: none; } body:has(#app-ticker.is-on) { grid-template-rows: var(--header-height) 0 minmax(0, 1fr); } }