/* Бегущая строка кабинета: полоса над шапкой, 12 эффектов, кнопки админа.
   Один файл на все страницы; вёрстка адаптивная (телефон — узкая полоса и нижний лист правок).
   v2.9.29-sticky: полоса закреплена у верха (fixed), в ней же — строка «кто вошёл» и «Тип ТТ».
   v2.9.30-autohide: на телефоне всё под бегущей строкой уезжает влево при прокрутке вниз.
   v2.9.31-smooth: высоту строк ведёт движок точным значением (max-height в px), в CSS
   остались только плавные transform/opacity — переход max-height «щёлкал» и дёргал.
   v2.9.33-tabsout: ряды вкладок уезжают вбок при прокрутке вниз, а слева остаётся
   язычок `.tk-tabs-handle` — один тап, и они возвращаются.
   v2.9.34-origlook: вид кнопок вернули к исходному (крупные, в несколько строк) —
   однострочная прокрутка вбок не подошла; уезжание и язычок остались.
   v2.9.35-fastscroll: убрано размытие фона под липкими рядами (оно пересчитывалось каждый
   кадр и тормозило быструю прокрутку), ряды подняты на отдельный слой.
   v2.9.37-foldfio: блок «кто вошёл» + «Тип ТТ» на телефоне свёрнут СРАЗУ (класс
   `tk-info-folded`) и открывается язычком; отступ страницы пишется только у верха.
   v2.9.38-nosliver: в свёрнутом виде обнуляются отступы и рамка строки — без этого
   `max-height: 0` оставлял 13 px (padding+border — это «пол» высоты блока). */

.tk-bar {
  position: fixed;               /* липкий верх: виден при прокрутке */
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  margin: 0 !important;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  background: linear-gradient(90deg, #1a365d 0%, #2c5282 50%, #1a365d 100%);
  color: #fff;
  font-family: Comfortaa, system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: .3px;
  padding: 0;
  padding-left: env(safe-area-inset-left, 0px);
  padding-right: env(safe-area-inset-right, 0px);
  box-sizing: border-box;
  z-index: 4000;                /* выше шапок/фона кабинетов */
  box-shadow: 0 1px 0 rgba(255, 255, 255, .08), 0 6px 18px rgba(6, 14, 28, .22);
}
.tk-bar[hidden] { display: none !important; }

/* Страница должна резервировать высоту липкой полосы отступом сверху (ставится из JS). */
body:has(.tk-bar:not([hidden])) { padding-top: calc(var(--tk-page-pad-top, 0px) + var(--tk-fixed-h, 0px)) !important; }
.tk-spacer { display: block; width: 100%; }

/* первый ряд: бегущий текст + кнопки админа; ниже — «кто вошёл» и «Тип ТТ» */
.tk-top {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 11px 0;
  box-sizing: border-box;
}

.tk-viewport {
  position: relative;
  overflow: hidden;
  white-space: nowrap;
  flex: 1 1 auto;
  min-width: 0;
  padding-right: 46px;
  transition: transform .32s ease, opacity .32s ease;
  transform-origin: 50% 50%;
}
.tk-viewport[hidden] { display: none !important; }
/* Эффекты смены строк: класс .tk-trans-* задаёт тип перехода, .tk-flipping — момент */
.tk-bar.tk-trans-flip.tk-flipping .tk-viewport { opacity: 0; transform: rotateX(88deg); }
.tk-bar.tk-trans-fade.tk-flipping .tk-viewport { opacity: 0; }
.tk-bar.tk-trans-slide.tk-flipping .tk-viewport { opacity: 0; transform: translateY(-16px); }
.tk-bar.tk-trans-zoom.tk-flipping .tk-viewport { opacity: 0; transform: scale(.88); }

/* Кнопка «включить» для админа, когда строка выключена и сама полоса скрыта */
.tk-off-toggle {
  position: fixed;
  top: 10px;
  right: 12px;
  z-index: 4001;
  border: 1px solid #c9d4e4;
  border-radius: 999px;
  padding: 8px 13px;
  background: #ffffff;
  color: #33445f;
  font: 600 12.5px/1 system-ui, -apple-system, "Segoe UI", sans-serif;
  cursor: pointer;
  box-shadow: 0 6px 20px rgba(0, 0, 0, .14);
}
.tk-off-toggle[hidden] { display: none !important; }
@media (max-width: 640px) {
  .tk-off-toggle { top: auto; bottom: 14px; right: 12px; }
}

.tk-track {
  display: inline-flex;
  align-items: center;
  will-change: transform;
  animation: tk-marquee var(--tk-dur, 24s) linear infinite;
}
/* Одна «единица» = надпись + зазор. Внутри копии таких единиц несколько (чтобы полоса
   всегда была длиннее экрана), и обе копии строго одинаковые — тогда стык бесшовный. */
.tk-unit { display: inline-block; white-space: nowrap; padding-right: 72px; }
.tk-copy { display: inline-block; white-space: nowrap; }

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

/* «Остановка и мигание»: пауза на центре (надпись видна целиком), потом едет дальше */
.tk-e-stopblink .tk-track {
  animation-name: tk-stopblink;
  animation-timing-function: cubic-bezier(.4, 0, .2, 1);
}
@keyframes tk-stopblink {
  0%, 22% { transform: translateX(var(--tk-center, 0px)); }
  100%    { transform: translateX(calc(var(--tk-center, 0px) - 50%)); }
}

/* --- эффекты текста (буквы) --- */
.tk-ch { display: inline-block; }
.tk-e-wave .tk-ch { animation: tk-wave 1.6s ease-in-out infinite; }
@keyframes tk-wave {
  0%, 60%, 100% { transform: translateY(0); }
  30%           { transform: translateY(-7px); }
}
.tk-e-flip .tk-ch { animation: tk-flip 2.4s ease-in-out infinite; transform-origin: 50% 60%; }
@keyframes tk-flip {
  0%, 55%, 100% { transform: rotateX(0deg); }
  25%           { transform: rotateX(-88deg); }
}
.tk-e-blink .tk-ch { animation: tk-blink 1.5s steps(1, end) infinite; }
@keyframes tk-blink {
  0%, 45%   { opacity: 1; }
  46%, 60%  { opacity: .15; }
  61%, 100% { opacity: 1; }
}
.tk-e-stopblink .tk-copy { animation: tk-wordblink 2.6s ease-in-out infinite; }
@keyframes tk-wordblink {
  0%, 30%   { opacity: 1; text-shadow: 0 0 14px rgba(255, 255, 255, .55); }
  45%, 55%  { opacity: .25; text-shadow: none; }
  70%, 100% { opacity: 1; text-shadow: 0 0 14px rgba(255, 255, 255, .55); }
}

/* --- эффекты полосы --- */
.tk-e-glow { animation: tk-glow 2.8s ease-in-out infinite; }
@keyframes tk-glow {
  0%, 100% { box-shadow: inset 0 0 12px rgba(120, 190, 255, .25), 0 0 0 rgba(120, 190, 255, 0); }
  50%      { box-shadow: inset 0 0 26px rgba(120, 190, 255, .55), 0 6px 22px rgba(70, 150, 255, .45); }
}
.tk-e-neon .tk-copy {
  color: #eaf6ff;
  animation: tk-neon 3.2s ease-in-out infinite;
}
@keyframes tk-neon {
  0%, 100% { text-shadow: 0 0 6px #7cc4ff, 0 0 14px #4aa3ff, 0 0 26px #2c7be5; }
  50%      { text-shadow: 0 0 4px #b8e2ff, 0 0 10px #7cc4ff, 0 0 18px #4aa3ff; }
}
.tk-e-shimmer {
  background: linear-gradient(100deg, #123055 0%, #2c5282 30%, #7cc4ff 50%, #2c5282 70%, #123055 100%);
  background-size: 300% 100%;
  animation: tk-shimmer-bg 6s linear infinite;
}
@keyframes tk-shimmer-bg {
  from { background-position: 0% 50%; }
  to   { background-position: 300% 50%; }
}
.tk-e-glass {
  background: rgba(28, 52, 92, .55);
  -webkit-backdrop-filter: blur(9px) saturate(140%);
  backdrop-filter: blur(9px) saturate(140%);
  border-bottom: 1px solid rgba(255, 255, 255, .18);
}
.tk-e-grain::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: .22;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/></filter><rect width='120' height='120' filter='url(%23n)' opacity='.5'/></svg>");
  animation: tk-grain 1.2s steps(3, end) infinite;
}
@keyframes tk-grain {
  0%   { transform: translate(0, 0); }
  33%  { transform: translate(-3%, 2%); }
  66%  { transform: translate(2%, -3%); }
  100% { transform: translate(0, 0); }
}
.tk-e-line::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 3px;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0), #8fd0ff, rgba(255, 255, 255, 0));
  animation: tk-line 2.4s ease-in-out infinite;
}
@keyframes tk-line {
  0%, 100% { opacity: .35; transform: scaleX(.6); }
  50%      { opacity: 1; transform: scaleX(1); }
}
.tk-e-pulse { animation: tk-pulse 2s ease-in-out infinite; }
@keyframes tk-pulse {
  0%, 100% { transform: scale(1); filter: brightness(1); }
  50%      { transform: scale(1.012); filter: brightness(1.25); }
}

/* --- липкий верх: «кто вошёл» и «Тип ТТ» (перенесены в полосу) --- */
.tk-user {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 14px;
  border-top: 1px solid rgba(255, 255, 255, .14);
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
  font-weight: 400;
}
.tk-user-text { flex: 1 1 auto; min-width: 0; display: flex; align-items: baseline; gap: 8px; }
.tk-user-name {
  font-weight: 700;
  font-size: 13.5px;
  letter-spacing: 0;
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.tk-user-login { font-size: 11.5px; color: #b8cbe6; white-space: nowrap; }
.tk-user-logout {
  flex: 0 0 auto !important;
  white-space: nowrap !important;
  width: auto !important;
  min-height: 30px !important;
  padding: 5px 12px !important;
  font-size: 12.5px !important;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, .45);
  background: rgba(10, 24, 46, .6);
  color: #fff;
}
.tk-user-logout:hover { background: rgba(20, 44, 80, .9); }

#lcTtKindBar.tk-kind {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 6px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  margin: 0 !important;
  padding: 7px 14px;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
}
#lcTtKindBar.tk-kind::-webkit-scrollbar { display: none; }
#lcTtKindBar.tk-kind > span[style] { flex: 0 0 auto; font-weight: 700; color: #eaf1fb !important; font-size: 12.5px; }
/* Пилюли только сжимаем в размер: цвет активной пилюли (синий) задаёт сама страница —
   перекрашивать нельзя, иначе теряется понятная подсветка выбранного типа ТТ. */
#lcTtKindBar.tk-kind .lc-tt-kind-pill {
  flex: 0 0 auto !important;
  padding: 4px 12px !important;
  font-size: 12px !important;
}
#lcTtKindBar.tk-kind #lcTtKindNote { flex: 0 0 auto; color: #c9d9ee !important; font-size: 11.5px; }

/* Старая отдельная карточка с ФИО скрывается (содержимое перенесено в полосу). */
.lc-header-card[data-tk-moved] { display: none !important; }

/* вкладки кабинета липнут ровно под липкой полосой */
body:has(.tk-bar:not([hidden])) .lc-tabs,
body:has(.tk-bar:not([hidden])) .lc-modes {
  top: var(--tk-fixed-h, 0px);
  z-index: 3900;
}

/* --- кнопки админа на полосе --- */
.tk-tools { flex: 0 0 auto; display: flex; align-items: center; gap: 6px; z-index: 3; padding-right: 6px; }
.tk-tools[hidden] { display: none !important; }
.tk-btn-icon {
  border: 1px solid rgba(255, 255, 255, .45);
  background: rgba(10, 24, 46, .72);
  color: #fff;
  border-radius: 9px;
  padding: 3px 9px;
  font-size: 14px;
  line-height: 1.5;
  cursor: pointer;
  font-family: inherit;
}
.tk-btn-icon:hover { background: rgba(20, 44, 80, .95); }
.tk-key { opacity: .55; }
.tk-key:hover { opacity: 1; }

/* --- окна (правка и вход админа) --- */
.tk-modal {
  position: fixed;
  inset: 0;
  z-index: 100000;
  background: rgba(6, 14, 28, .62);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}
.tk-modal[hidden] { display: none !important; }
.tk-modal-card {
  width: min(560px, 100%);
  max-height: 92vh;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  background: #fff;
  color: #16233a;
  border-radius: 14px;
  padding: 16px 16px 14px;
  box-shadow: 0 22px 60px rgba(4, 12, 26, .45);
  font: 14px/1.45 system-ui, -apple-system, "Segoe UI", sans-serif;
}
.tk-modal-card h3 { margin: 0 0 4px; font-size: 18px; }
.tk-modal-card .tk-hint { color: #5b6b85; font-size: 12.5px; margin: 0 0 12px; }
.tk-row { margin-bottom: 11px; }
.tk-row > label { display: block; font-weight: 600; margin-bottom: 4px; }
.tk-lbl-inline { display: inline !important; margin: 0 !important; font-weight: 600; }
.tk-row input[type=text], .tk-row input[type=number] {
  width: 100%; box-sizing: border-box; padding: 9px 11px;
  border: 1px solid #c7d2e3; border-radius: 9px; font: inherit; background: #fff; color: inherit;
}
.tk-select {
  width: 100%; box-sizing: border-box; padding: 9px 11px;
  border: 1px solid #c7d2e3; border-radius: 9px; font: inherit; background: #fff; color: inherit;
}
.tk-sec {
  margin: 14px 0 6px;
  padding-top: 12px;
  border-top: 1px dashed #d9e1ee;
  font-weight: 700;
  font-size: 13px;
  color: #33445f;
}
.tk-check { display: flex; align-items: center; gap: 8px; }
.tk-check input { width: 18px; height: 18px; }
.tk-effects { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.tk-eff {
  display: flex; align-items: center; gap: 7px;
  border: 1px solid #c7d2e3; border-radius: 10px; padding: 8px 9px;
  cursor: pointer; background: #f7f9fd; font-size: 13px;
}
.tk-eff input { margin: 0; width: 16px; height: 16px; }
.tk-eff.sel { border-color: #2c5282; background: #eaf2ff; box-shadow: 0 0 0 2px rgba(44, 82, 130, .12); }
.tk-actions { display: flex; gap: 8px; justify-content: flex-end; align-items: center; margin-top: 12px; }
.tk-btn { border: 0; border-radius: 10px; padding: 10px 15px; font: inherit; font-weight: 600; cursor: pointer; }
.tk-btn.primary { background: #2c5282; color: #fff; }
.tk-btn.ghost { background: #e8edf6; color: #22314c; }
.tk-saved { color: #1d7a45; font-size: 12.5px; margin-right: auto; }
.tk-msg { color: #b03030; font-size: 13px; min-height: 18px; }

@media (prefers-reduced-motion: reduce) {
  .tk-track, .tk-copy, .tk-ch, .tk-bar { animation: none !important; }
  .tk-track { transform: none !important; width: 100%; justify-content: center; }
  .tk-copy.hidden-dup { display: none; }
}

/* --- телефон: узкая полоса, крупные кнопки, окно правок как нижний лист --- */
@media (max-width: 640px) {
  .tk-bar { font-size: 13.5px; }
  .tk-top { padding: 9px 0; padding-top: calc(9px + env(safe-area-inset-top, 0px)); }
  .tk-unit { padding-right: 44px; }
  .tk-viewport { padding-right: 42px; }
  .tk-btn-icon { min-width: 38px; min-height: 34px; font-size: 15px; }
  .tk-user { padding: 6px 12px; }
  .tk-user-name { font-size: 13px; }
  .tk-user-login { font-size: 11px; }
  #lcTtKindBar.tk-kind { padding: 6px 12px; }
  .tk-modal { align-items: flex-end; padding: 0; }
  .tk-modal-card {
    width: 100%;
    max-height: 90vh;
    border-radius: 16px 16px 0 0;
    padding: 16px 14px calc(16px + env(safe-area-inset-bottom, 0px));
    font-size: 15px;
  }
  .tk-effects { grid-template-columns: 1fr; }
  .tk-eff { padding: 12px 11px; font-size: 14.5px; }
  .tk-row input[type=text], .tk-row input[type=number], .tk-select { padding: 12px; font-size: 16px; }
  .tk-btn { padding: 13px 16px; font-size: 15px; }
  .tk-actions { flex-wrap: wrap; }
}
@media (max-width: 380px) {
  .tk-bar { font-size: 12.5px; }
}

/* --- телефон/планшет: ряды вкладок уезжают вбок, полоса складывается ---
   Класс `tk-collapsed` на body ставит движок (ticker.js, только при ширине ≤ 820 px).
   Уезжают и строки ВНУТРИ полосы («кто вошёл» и «Тип ТТ»), и ряды вкладок `.lc-tabs`,
   `.lc-modes` — как просил заказчик: «убирались при прокрутке вниз, появлялись вверх».
   Насовсем ряды не прячутся: слева остаётся язычок `.tk-tabs-handle`, иначе «Руководители»
   и «Курьеры» не достать — на этом попалась первая версия.

   Вид кнопок НЕ трогаем: они остаются крупными и в несколько строк, как было (заказчик
   отдельно просил вернуть именно такой вид — однострочная прокрутка вбок не подошла).

   Место в разметке у рядов не трогаем: они sticky В ПОТОКЕ, и если убрать их высоту,
   документ станет короче на высоту ряда и страница прыгнет вверх.

   Высоту строк ВНУТРИ полосы движок ведёт сам, точным значением в px (inline max-height):
   переход `max-height: none -> 0` браузер не анимирует, он «щёлкает» — от этого и была
   дёрганность. Поэтому в CSS высоты нет, только плавные transform/opacity. */
/* Язычок «Вкладки» живёт только на телефоне — его правила внутри медиазапроса ниже. */
.tk-tabs-handle { display: none; }

@media (max-width: 820px) {
  .lc-tabs,
  .lc-modes {
    /* 1) Было `backdrop-filter: blur(8px)` — размытие фона под липкими рядами браузер
          пересчитывает КАЖДЫЙ кадр прокрутки. На телефоне это самая дорогая операция,
          и именно она читается как «всё дёргается» при быстром листании. Фон под рядами
          и так почти белый, поэтому меняем на плотный — вид почти не меняется.
       2) `will-change` + нулевой 3D-сдвиг поднимают ряды на отдельный слой: уезжание
          идёт силами композитора, без перерисовки содержимого под ними. */
    background: #fff !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    will-change: transform, opacity;
    transform: translateZ(0);
    transition: transform .3s cubic-bezier(.22, .61, .36, 1),
                opacity .3s ease,
                top .3s cubic-bezier(.22, .61, .36, 1);
  }
  /* Уехали вбок (при прокрутке вниз). Высоту не трогаем — см. комментарий выше. */
  body.tk-collapsed .lc-tabs,
  body.tk-collapsed .lc-modes {
    transform: translateX(-105%);
    opacity: 0;
    pointer-events: none;
  }
  /* Ряд режимов («ТТ / По службам / Курьеры / Руководители») липнет ПОД рядом вкладок:
     у обоих был один и тот же top, и они накрывали друг друга — второй ряд было не нажать. */
  body:has(.tk-bar:not([hidden])) .lc-modes {
    top: calc(var(--tk-fixed-h, 0px) + var(--tk-tabs-h, 54px));
  }

  /* Язычок «Вкладки». Когда ряды уехали вбок, это ЕДИНСТВЕННЫЙ способ вернуть их одним
     тапом: иначе «Курьеры»/«Руководители» не достать, пока не потянешь вверх — именно
     на это жаловался заказчик. Виден только в свёрнутом виде. */
  .tk-tabs-handle {
    position: fixed;
    left: 0;
    top: calc(var(--tk-fixed-h, 0px) + 6px);
    z-index: 3990;
    display: flex;
    align-items: center;
    gap: 7px;
    border: 0;
    border-radius: 0 999px 999px 0;
    padding: 9px 14px 9px 11px;
    background: rgba(37, 99, 235, .96);
    color: #fff;
    font: 700 12.5px/1 system-ui, -apple-system, "Segoe UI", sans-serif;
    box-shadow: 0 8px 20px rgba(6, 14, 28, .35);
    transform: translateX(-110%);
    opacity: 0;
    pointer-events: none;
    transition: transform .34s cubic-bezier(.22, .61, .36, 1),
                opacity .28s ease,
                top .34s ease;
  }
  .tk-tabs-handle[hidden] { display: none !important; }
  body.tk-collapsed .tk-tabs-handle,
  body.tk-info-folded .tk-tabs-handle {
    transform: none;
    opacity: 1;
    pointer-events: auto;
  }

  .tk-user,
  #lcTtKindBar.tk-kind {
    box-sizing: border-box;      /* max-height тогда включает и отступы (но не сжимает
                                    ниже них — отступы обнуляются отдельно, см. ниже) */
    min-height: 0;               /* страховка: у flex-элементов min-height: auto не должен
                                    мешать max-height сворачивать строку до нуля */
    transition: transform .34s cubic-bezier(.22, .61, .36, 1),
                opacity .34s ease,
                max-height .34s cubic-bezier(.22, .61, .36, 1),
                padding-top .34s ease,
                padding-bottom .34s ease,
                border-top-width .34s ease;
  }
  .tk-user { overflow: hidden; }
  #lcTtKindBar.tk-kind { overflow-y: hidden; }   /* пилюли листаются вбок, высота сворачивается */

  /* Блок «кто вошёл» + «Тип ТТ» уезжает и при прокрутке вниз (tk-collapsed), и когда он
     свёрнут по умолчанию (tk-info-folded): на телефоне он спрятан сразу, место дорогое,
     открывается язычком. Ряды вкладок при этом остаются на месте. */
  body.tk-collapsed .tk-user,
  body.tk-collapsed #lcTtKindBar.tk-kind,
  body.tk-info-folded .tk-user,
  body.tk-info-folded #lcTtKindBar.tk-kind {
    transform: translateX(-105%);
    opacity: 0;
    pointer-events: none;
    /* ВАЖНО: max-height: 0 не сжимает блок ниже его отступов и рамки — это «пол» высоты.
       Без обнуления строка «кто вошёл» оставляла 13 px (padding 6+6 и border 1), и полоса
       была выше, чем нужно. Проверено замером в браузере: uBox=border-box, uMax=0px,
       а offsetHeight всё равно 13. */
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    border-top-width: 0 !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  body.tk-collapsed .tk-user,
  body.tk-collapsed #lcTtKindBar.tk-kind,
  body.tk-info-folded .tk-user,
  body.tk-info-folded #lcTtKindBar.tk-kind {
    transition: none !important;
  }
}