/* ============================================================================
   Екип — обща тема „течно стъкло" (тъмна, единствена)
   ----------------------------------------------------------------------------
   Това е ЕДИНСТВЕНИЯТ споделен файл в проекта. Всяка страница го включва ПЪРВИ,
   после има свой малък <style> само за собствената си подредба.

   Правило за производителност (важно, не е препоръка):
   backdrop-filter се слага САМО върху едри повърхности — лентата горе, лентата с
   инструменти, изскачащи панели, диалози, екраните на киоска. НИКОГА върху
   клетки на таблица, картони в колона, чипчета, ленти и редове: те са стотици и
   всеки блур е отделен слой за браузъра. Гъстите повърхности ползват .pane
   (плътен полупрозрачен фон, без блур).

   ----------------------------------------------------------------------------
   ЛЕНТАТА ГОРЕ — този блок се слага ДУМА ПО ДУМА в осемте страници с навигация
   (index, grafik, razpredelenie, prisustvie, roster, shabloni, users, primer).
   Различава се САМО стойността на data-page — по нея се пали активното хапче.
   В login.html и kiosk.html лента НЯМА.

<nav class="nav" data-page="ИМЕТО-НА-СТРАНИЦАТА">
  <div class="nav-in">
    <a class="brand" href="./">
      <img src="assets/logo-white.png" alt="Аптеки Астра" width="30" height="30">
      <span class="wm">ЕКИП</span>
    </a>
    <div class="pills" role="navigation" aria-label="Раздели">
      <a data-nav="index" href="./">Днес</a>
      <a data-nav="grafik" id="lgrafik" href="grafik.html">График</a>
      <a data-nav="razpredelenie" href="razpredelenie.html">Разпределение</a>
      <a data-nav="prisustvie" href="prisustvie.html">Присъствие</a>
      <a data-nav="roster" href="roster.html">Хора</a>
      <a data-nav="shabloni" href="shabloni.html">Шаблони</a>
      <a data-nav="users" href="users.html">Потребители</a>
    </div>
    <div class="nav-r">
      <span id="who" class="uchip"></span>
      <button id="out" type="button">Изход</button>
    </div>
  </div>
</nav>

   ========================================================================== */

:root {
  color-scheme: dark;

  --bg:#0a0e15;
  --text:#e9eef4;
  --muted:#94a2b1;

  --accent:#3fc1c9;
  --accent-2:#4a90d9;
  --accent-soft:rgba(63,193,201,.14);
  --accent-line:rgba(63,193,201,.42);

  --glass:rgba(22,30,42,.58);
  --glass-strong:rgba(22,30,42,.78);
  /* Гъстите повърхности (таблици, колони, картони) — плътно, без блур. */
  --pane:rgba(20,27,38,.66);
  --pane-2:rgba(26,34,47,.72);
  --raise:rgba(255,255,255,.04);

  --border:rgba(255,255,255,.09);
  --edge:rgba(255,255,255,.16);
  --shadow:0 12px 40px rgba(0,0,0,.35);

  --r:16px;
  --r-lg:20px;
  --r-sm:11px;

  --ok:#3ddc97;
  --warn:#e8b23e;
  --danger:#ff6b62;
  /* Стари имена, които страниците още ползват — сочат новите. */
  --red:var(--danger);
  --red-text:var(--danger);
  --amber:var(--warn);
  --amber-text:var(--warn);
  --amber-ink:var(--warn);
  --amber-soft:rgba(232,178,62,.15);
  --red-soft:rgba(255,107,98,.15);
  --ok-soft:rgba(61,220,151,.14);
  --card:var(--pane);

  --tint-weekend:rgba(255,255,255,.045);
  --tint-vac:rgba(61,220,151,.14);
  --tint-sick:rgba(232,178,62,.16);

  /* 8-цветната палитра на смените/ролите — канонични стойности, само тъмни.
     Ползва се от „График", „Шаблони смени" и „Разпределение". */
  --c-green:#4db98a;  --c-green-bg:rgba(46,139,87,.18);
  --c-blue:#6aa7d8;   --c-blue-bg:rgba(44,111,155,.22);
  --c-amber:#d8a53f;  --c-amber-bg:rgba(176,125,30,.18);
  --c-violet:#a89ef2; --c-violet-bg:rgba(122,110,220,.20);
  --c-teal:#4fc0c0;   --c-teal-bg:rgba(58,160,160,.20);
  --c-pink:#e08bb0;   --c-pink-bg:rgba(200,90,140,.18);
  --c-grey:#a8b0bc;   --c-grey-bg:rgba(150,160,175,.16);
  --c-red:#e07a70;    --c-red-bg:rgba(214,69,65,.16);

  --nav-h:56px;
  --ease:cubic-bezier(.2,.9,.25,1);
}

* { box-sizing:border-box; margin:0 }

html { -webkit-text-size-adjust:100% }

body {
  background:var(--bg);
  color:var(--text);
  font:16px/1.5 -apple-system,"Segoe UI",Inter,Roboto,sans-serif;
  min-height:100vh;
}

a { color:var(--accent); text-decoration:none }
a:hover { text-decoration:underline }

.eyebrow {
  font-size:11px; text-transform:uppercase; letter-spacing:.06em; color:var(--muted);
}

/* ---------------------------------------------------------------- живо небе */
.aurora {
  position:fixed; inset:0; z-index:-1; overflow:hidden; pointer-events:none;
  background:
    radial-gradient(120% 90% at 50% -10%, rgba(74,144,217,.10), transparent 60%),
    var(--bg);
}
.aurora i {
  position:absolute; display:block; border-radius:50%;
  filter:blur(90px); opacity:.55; will-change:transform;
}
.aurora i:nth-child(1) {
  width:46vw; height:46vw; min-width:340px; min-height:340px; left:-8vw; top:-10vh;
  background:radial-gradient(circle, rgba(63,193,201,.55), rgba(63,193,201,0) 70%);
  animation:au1 52s var(--ease) infinite alternate;
}
.aurora i:nth-child(2) {
  width:52vw; height:52vw; min-width:380px; min-height:380px; right:-12vw; top:4vh;
  background:radial-gradient(circle, rgba(74,144,217,.50), rgba(74,144,217,0) 70%);
  animation:au2 68s var(--ease) infinite alternate;
  animation-delay:-14s;
}
.aurora i:nth-child(3) {
  width:44vw; height:44vw; min-width:320px; min-height:320px; left:18vw; bottom:-18vh;
  background:radial-gradient(circle, rgba(138,110,226,.38), rgba(138,110,226,0) 70%);
  animation:au3 75s var(--ease) infinite alternate;
  animation-delay:-31s;
}
/* Плах топъл въглен — единственият поклон към червеното на логото. */
.aurora i:nth-child(4) {
  width:34vw; height:34vw; min-width:250px; min-height:250px; right:6vw; bottom:-12vh;
  background:radial-gradient(circle, rgba(214,69,65,.22), rgba(214,69,65,0) 70%);
  animation:au4 45s var(--ease) infinite alternate;
  animation-delay:-7s;
  opacity:.4;
}
@keyframes au1 {
  from { transform:translate3d(0,0,0) scale(1) }
  to   { transform:translate3d(14vw,10vh,0) scale(1.25) }
}
@keyframes au2 {
  from { transform:translate3d(0,0,0) scale(1.1) }
  to   { transform:translate3d(-16vw,16vh,0) scale(.85) }
}
@keyframes au3 {
  from { transform:translate3d(0,0,0) scale(.9) }
  to   { transform:translate3d(18vw,-14vh,0) scale(1.2) }
}
@keyframes au4 {
  from { transform:translate3d(0,0,0) scale(1) }
  to   { transform:translate3d(-10vw,-8vh,0) scale(1.3) }
}
/* Киоскът стои включен по цял ден — там небето е неподвижно. */
.aurora.still i { animation:none !important }

/* ------------------------------------------------------------------- стъкло */
.glass {
  background:var(--glass);
  -webkit-backdrop-filter:blur(18px) saturate(1.4);
  backdrop-filter:blur(18px) saturate(1.4);
  border:1px solid var(--border);
  border-radius:var(--r);
  box-shadow:var(--shadow), inset 0 1px 0 var(--edge);
}
.glass-strong {
  background:var(--glass-strong);
  -webkit-backdrop-filter:blur(22px) saturate(1.5);
  backdrop-filter:blur(22px) saturate(1.5);
  border:1px solid var(--border);
  border-radius:var(--r);
  box-shadow:var(--shadow), inset 0 1px 0 var(--edge);
}
/* Гъста повърхност: същият вид, БЕЗ блур. За таблици, колони, картони, редове. */
.pane {
  background:var(--pane);
  border:1px solid var(--border);
  border-radius:var(--r);
  box-shadow:inset 0 1px 0 var(--edge);
}

/* -------------------------------------------------------------- лентата горе */
.nav {
  position:sticky; top:0; z-index:40;
  background:var(--glass-strong);
  -webkit-backdrop-filter:blur(20px) saturate(1.5);
  backdrop-filter:blur(20px) saturate(1.5);
  border-bottom:1px solid var(--border);
  box-shadow:0 1px 0 var(--edge) inset, 0 8px 28px rgba(0,0,0,.28);
}
.nav-in {
  display:flex; align-items:center; gap:12px;
  /* КОНСТАНТА, не var(--nav-h)! nav.js пише измереното обратно в --nav-h и
     var тук прави порочен кръг: издуе ли се веднъж, лентата остава грамадна. */
  min-height:56px; padding:8px 16px;
  max-width:1600px; margin:0 auto;
}
.nav .brand { display:flex; align-items:center; gap:9px; flex:none; text-decoration:none }
.nav .brand:hover { text-decoration:none }
.nav .brand img { display:block; width:30px; height:30px; object-fit:contain }
.nav .brand .wm {
  font-size:11px; font-weight:700; letter-spacing:.18em;
  text-transform:uppercase; color:var(--muted);
}
.nav .brand:hover .wm { color:var(--text) }

.nav .pills {
  display:flex; align-items:center; gap:6px;
  flex:1 1 auto; min-width:0;
  overflow-x:auto; overflow-y:hidden;
  scrollbar-width:none; -ms-overflow-style:none;
  padding:2px 0;
}
.nav .pills::-webkit-scrollbar { display:none }
.nav .pills a {
  flex:none; white-space:nowrap; display:inline-flex; align-items:center; gap:7px;
  /* По-четливо (искане на Рафи): по-светло от --muted, полу-болд, малко по-едро. */
  font-size:14px; font-weight:600; letter-spacing:.01em;
  color:#c9d4df; text-decoration:none;
  border:1px solid transparent; border-radius:999px; padding:6px 13px;
  transition:color .16s var(--ease), background-color .16s var(--ease),
             border-color .16s var(--ease), transform .16s var(--ease);
}
.nav .pills a svg { width:16px; height:16px; flex:none; stroke:currentColor;
                    fill:none; stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round;
                    opacity:.85 }
.nav .pills a:hover {
  color:var(--text); background:var(--raise);
  border-color:var(--border); text-decoration:none; transform:translateY(-1px);
}
/* Активното хапче — единственото, което се различава между страниците. */
.nav[data-page="index"]         .pills a[data-nav="index"],
.nav[data-page="grafik"]        .pills a[data-nav="grafik"],
.nav[data-page="razpredelenie"] .pills a[data-nav="razpredelenie"],
.nav[data-page="prisustvie"]    .pills a[data-nav="prisustvie"],
.nav[data-page="roster"]        .pills a[data-nav="roster"],
.nav[data-page="shabloni"]      .pills a[data-nav="shabloni"],
.nav[data-page="users"]         .pills a[data-nav="users"] {
  color:var(--accent); background:var(--accent-soft); border-color:var(--accent-line);
  font-weight:600;
}
.nav .nav-r { display:flex; align-items:center; gap:9px; flex:none }
.nav .uchip {
  font-size:12.5px; color:var(--muted);
  border:1px solid var(--border); border-radius:999px;
  padding:4px 11px; background:var(--raise); white-space:nowrap;
  max-width:26vw; overflow:hidden; text-overflow:ellipsis;
}
.nav .uchip:empty { display:none }

/* На телефон логото и потребителят остават на първия ред, а хапчетата слизат на
   свой ред и ползват цялата ширина — иначе им остават 70 пиксела и не се четат. */
@media (max-width:719px) {
  :root { --nav-h:106px }   /* стартова стойност; nav.js я мери на живо */
  .nav-in { flex-wrap:wrap; row-gap:4px; padding:7px 12px 8px }
  .nav .brand { order:1 }
  .nav .nav-r { order:2; margin-left:auto }
  .nav .pills { order:3; flex:1 0 100%; min-width:100% }
  .nav .uchip { max-width:38vw }
}

/* Телефон: лентата се скрива при скрол надолу и се връща при скрол нагоре
   (nav.js слага .hid) — иначе категориите висят вечно и ядат половината екран. */
.nav { transition:transform .28s var(--ease) }
.nav.hid { transform:translateY(-100%) }
thead th { transition:top .28s var(--ease) }

/* Телефон: контролните редове НЕ се трупат надолу — всеки ред се плъзга настрани. */
@media (max-width:719px) {
  .toolbar { row-gap:6px }
  /* !important: страничните стилове се зареждат СЛЕД theme.css и иначе
     връщат wrap — а на телефон редовете трябва да се плъзгат, не да се трупат. */
  .toolbar .grp {
    flex-wrap:nowrap !important; overflow-x:auto; overflow-y:hidden; max-width:100%;
    scrollbar-width:none; -ms-overflow-style:none; padding-bottom:2px;
  }
  .toolbar .grp::-webkit-scrollbar { display:none }
  .toolbar .grp > * { flex:none }
  /* Вложена група в група: вътрешната не скролва сама — води я външната. */
  .toolbar .grp .grp { overflow:visible }
}

/* ---------- ефекти (Рафи, 29.07: „по-ефектно" 1–8) ---------- */

/* Скелетно зареждане: преливащ блясък вместо „Зарежда…". */
.skel-wrap { display:flex; flex-direction:column; gap:10px; padding:6px 0 }
.skel {
  position:relative; overflow:hidden; border-radius:8px;
  background:rgba(255,255,255,.06); min-height:14px;
}
.skel::after {
  content:""; position:absolute; inset:0;
  background:linear-gradient(100deg, transparent 30%, rgba(255,255,255,.09) 50%, transparent 70%);
  transform:translateX(-100%); animation:skel-sweep 1.4s infinite;
}
.skel-line { height:14px }
.skel-card { height:84px; border-radius:var(--r) }
@keyframes skel-sweep { to { transform:translateX(100%) } }
@media (prefers-reduced-motion: reduce) { .skel::after { animation:none } }

/* Прожектор след мишката: fx.js подава --mx/--my на елементите с .spot. */
.spot { position:relative }
.spot::before {
  content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  background:radial-gradient(220px circle at var(--mx,50%) var(--my,50%),
             rgba(120,210,220,.10), transparent 60%);
  opacity:0; transition:opacity .25s var(--ease);
}
.spot:hover::before { opacity:1 }
@media (hover: none) { .spot::before { display:none } }

/* Плавна смяна на изгледи (fx.swapView). */
.view-out { opacity:0; transform:translateY(6px);
            transition:opacity .13s ease-in, transform .13s ease-in }
.view-in { animation:view-in .26s var(--ease) }
@keyframes view-in { from { opacity:0; transform:translateY(8px) } to { opacity:1; transform:none } }
@media (prefers-reduced-motion: reduce) {
  .view-out, .view-in { transition:none; animation:none; opacity:1; transform:none }
}

/* Празно състояние: воден знак с логото + подканващ текст. */
.empty-state {
  display:flex; flex-direction:column; align-items:center; gap:10px;
  padding:44px 20px; color:var(--muted); text-align:center; font-size:14px;
}
.empty-state::before {
  content:""; width:64px; height:64px; opacity:.16;
  background:url('assets/logo-white.png') center/contain no-repeat;
}

/* Пръстен на покритието („Днес"): conic-градиент, --p = процент 0–100,
   --ring = цвят (ок/предупреждение/опасност). Числото стои в центъра. */
.ring {
  --p:100; --ring:var(--ok);
  width:52px; height:52px; border-radius:50%; flex:none;
  background:
    radial-gradient(closest-side, var(--bg) 74%, transparent 75% 100%),
    conic-gradient(var(--ring) calc(var(--p) * 1%), rgba(255,255,255,.09) 0);
  display:flex; align-items:center; justify-content:center;
  font-size:13px; font-weight:700;
}

/* Таблиците скролват СAMИ (вертикално и хоризонтално), а заглавният ред залепва
   за ръба на таблицата (top:0), НЕ за навбара. Крайното лекарство срещу сагата
   „редът Служител увисна по средата": sticky в контейнер с overflow се държи
   различно по браузъри, а top:var(--nav-h) зависеше от мерене. Това — не. */
.wrap, #wrap { max-height:calc(100vh - var(--nav-h) - 150px); min-height:320px; overflow:auto }
.wrap thead th, #wrap thead th { position:sticky; top:0 !important }
@media print { .wrap, #wrap { max-height:none; min-height:0; overflow:visible } }

/* Втора лента: контекстните бутони на страницата, под навигацията. */
.toolbar {
  position:relative;
  display:flex; flex-wrap:wrap; align-items:center; gap:10px;
  padding:10px 13px; margin:14px 0 12px;
  background:var(--glass);
  -webkit-backdrop-filter:blur(18px) saturate(1.4);
  backdrop-filter:blur(18px) saturate(1.4);
  border:1px solid var(--border); border-radius:var(--r);
  box-shadow:var(--shadow), inset 0 1px 0 var(--edge);
}
.toolbar .grp { display:flex; align-items:center; gap:8px; flex-wrap:wrap }
.toolbar .right { margin-left:auto }

/* --------------------------------------------------------------- управление */
button, select, input, textarea {
  font:inherit; font-size:14px; color:var(--text);
  background:var(--raise);
  border:1px solid var(--border); border-radius:var(--r-sm);
  padding:7px 11px;
}
button {
  cursor:pointer;
  transition:border-color .16s var(--ease), background-color .16s var(--ease),
             box-shadow .16s var(--ease), transform .16s var(--ease), color .16s var(--ease);
}
button:hover, select:hover {
  border-color:var(--accent-line); color:var(--text);
}
button:hover {
  transform:translateY(-1px);
  box-shadow:0 6px 18px rgba(63,193,201,.12), inset 0 1px 0 var(--edge);
}
button:active { transform:translateY(0) }
button:focus-visible, select:focus-visible, input:focus-visible, textarea:focus-visible,
a:focus-visible {
  outline:2px solid var(--accent); outline-offset:2px;
}
input:focus, select:focus, textarea:focus {
  outline:none; border-color:var(--accent-line);
  box-shadow:0 0 0 3px var(--accent-soft);
}
button[disabled], select[disabled], input[disabled] { opacity:.45; cursor:default }
button[disabled]:hover {
  border-color:var(--border); transform:none; box-shadow:none;
}
select option { color:var(--text); background:#141b26 }

button.primary {
  /* Тъмен тюркоаз→син градиент, за да е бялото върху него четимо (AA). */
  background:linear-gradient(135deg,#1f6f7c,#2f5d99);
  border-color:rgba(63,193,201,.35); color:#fff; font-weight:600;
}
button.primary:hover {
  border-color:var(--accent);
  box-shadow:0 8px 22px rgba(63,193,201,.22), inset 0 1px 0 var(--edge);
}
button.small { padding:5px 9px; font-size:13px }
button.icon { padding:7px 12px; font-size:15px }
/* Надпис, който е бутон (месецът, денят) — рамка се показва при посочване. */
button.lbl { border-color:transparent; background:transparent; padding:7px 9px }
button.lbl:hover { border-color:var(--accent-line); background:var(--raise) }

/* превключвател на изгледи */
.seg {
  display:inline-flex; border:1px solid var(--border); border-radius:var(--r-sm);
  overflow:hidden; background:var(--raise);
}
.seg button {
  border:none; border-radius:0; padding:7px 14px; background:transparent;
  border-right:1px solid var(--border);
}
.seg button:last-child { border-right:none }
.seg button:hover { background:var(--accent-soft); transform:none; box-shadow:none }
.seg button.on {
  background:var(--accent-soft); color:var(--accent); font-weight:600;
  box-shadow:inset 0 -2px 0 var(--accent);
}
.seg button:disabled { color:var(--muted); cursor:not-allowed; background:transparent }
.seg button:disabled:hover { background:transparent }

/* полета в диалози */
.fld label {
  display:block; font-size:11px; text-transform:uppercase; letter-spacing:.06em;
  color:var(--muted); margin-bottom:4px;
}
.fld input, .fld select { width:100% }

/* диалози (родният <dialog> и ръчните листове) */
dialog {
  border:1px solid var(--border); border-radius:var(--r-lg); color:var(--text);
  background:var(--glass-strong);
  -webkit-backdrop-filter:blur(22px) saturate(1.5);
  backdrop-filter:blur(22px) saturate(1.5);
  box-shadow:var(--shadow), inset 0 1px 0 var(--edge);
  padding:18px; margin:auto;   /* „* { margin:0 }" иначе лепи диалога горе вляво */
}
dialog::backdrop { background:rgba(4,7,12,.62) }

/* съобщение долу */
#toast {
  position:fixed; left:50%; transform:translateX(-50%); bottom:22px; z-index:120;
  background:var(--glass-strong);
  -webkit-backdrop-filter:blur(22px) saturate(1.5);
  backdrop-filter:blur(22px) saturate(1.5);
  border:1px solid var(--border); border-radius:var(--r);
  box-shadow:var(--shadow), inset 0 1px 0 var(--edge);
  padding:11px 17px; font-size:14px; max-width:92vw; display:none;
}
#toast.on { display:block; animation:toastIn .28s var(--ease) }
#toast.bad { border-color:rgba(255,107,98,.55) }
@keyframes toastIn {
  from { opacity:0; transform:translate(-50%,10px) }
  to   { opacity:1; transform:translate(-50%,0) }
}

/* ------------------------------------------------------------------ движение */
.in { animation:riseIn .34s var(--ease) both }
@keyframes riseIn {
  from { opacity:0; transform:translateY(12px) }
  to   { opacity:1; transform:translateY(0) }
}
.d1 { animation-delay:.06s } .d2 { animation-delay:.12s }
.d3 { animation-delay:.18s } .d4 { animation-delay:.24s }
.d5 { animation-delay:.30s } .d6 { animation-delay:.36s }
.d7 { animation-delay:.42s } .d8 { animation-delay:.48s }

/* Лек блясък, който минава по картата при посочване. Само с мишка. */
@media (hover:hover) and (pointer:fine) {
  .shine { position:relative; overflow:hidden }
  .shine::after {
    content:''; position:absolute; inset:0; pointer-events:none;
    background:linear-gradient(105deg, transparent 38%, rgba(255,255,255,.10) 50%, transparent 62%);
    transform:translateX(-120%); transition:transform .65s var(--ease);
  }
  .shine:hover::after { transform:translateX(120%) }
  .lift { transition:transform .18s var(--ease), border-color .18s var(--ease),
                     box-shadow .18s var(--ease) }
  .lift:hover {
    transform:translateY(-2px); border-color:var(--accent-line);
    box-shadow:0 14px 34px rgba(0,0,0,.34), inset 0 1px 0 var(--edge);
  }
}

@media (prefers-reduced-motion: reduce) {
  .aurora i { animation:none !important }
  .in { animation:none !important }
  #toast.on { animation:none !important }
  .shine::after { display:none }
  *, *::before, *::after {
    animation-duration:.001ms !important; animation-iteration-count:1 !important;
    transition-duration:.001ms !important; scroll-behavior:auto !important;
  }
}

/* ------------------------------------------- цветове на смените и на ролите */
/* Един цветен клас за всичко цветно: чипче, легенда, лента в „Ден", клетка. */
.cc-green  { --cc:var(--c-green);  --cc-bg:var(--c-green-bg);  color:var(--cc); background:var(--cc-bg) }
.cc-blue   { --cc:var(--c-blue);   --cc-bg:var(--c-blue-bg);   color:var(--cc); background:var(--cc-bg) }
.cc-amber  { --cc:var(--c-amber);  --cc-bg:var(--c-amber-bg);  color:var(--cc); background:var(--cc-bg) }
.cc-violet { --cc:var(--c-violet); --cc-bg:var(--c-violet-bg); color:var(--cc); background:var(--cc-bg) }
.cc-teal   { --cc:var(--c-teal);   --cc-bg:var(--c-teal-bg);   color:var(--cc); background:var(--cc-bg) }
.cc-pink   { --cc:var(--c-pink);   --cc-bg:var(--c-pink-bg);   color:var(--cc); background:var(--cc-bg) }
.cc-grey   { --cc:var(--c-grey);   --cc-bg:var(--c-grey-bg);   color:var(--cc); background:var(--cc-bg) }
.cc-red    { --cc:var(--c-red);    --cc-bg:var(--c-red-bg);    color:var(--cc); background:var(--cc-bg) }

/* Кръгчетата за избор на цвят — еднакви в „Шаблони смени" и „Разпределение". */
.swz { display:flex; align-items:center; gap:5px }
.swz .sw {
  width:18px; height:18px; flex:none; padding:0; border-radius:50%;
  border:1px solid var(--border); background:transparent;
  font-size:10px; font-weight:700; line-height:1; color:var(--muted);
}
.swz .sw:hover { border-color:var(--accent); transform:none; box-shadow:none }
.swz .sw[aria-pressed="true"] { outline:2px solid var(--text); outline-offset:2px }
.swz .sw[aria-pressed="true"]:focus-visible { outline-color:var(--accent) }
.swz .sw.k-green  { background:var(--c-green);  border-color:transparent }
.swz .sw.k-blue   { background:var(--c-blue);   border-color:transparent }
.swz .sw.k-amber  { background:var(--c-amber);  border-color:transparent }
.swz .sw.k-violet { background:var(--c-violet); border-color:transparent }
.swz .sw.k-teal   { background:var(--c-teal);   border-color:transparent }
.swz .sw.k-pink   { background:var(--c-pink);   border-color:transparent }
.swz .sw.k-grey   { background:var(--c-grey);   border-color:transparent }
.swz .sw.k-red    { background:var(--c-red);    border-color:transparent }

/* --------------------------------------------------------------------- печат */
@media print {
  .nav, .aurora, .toolbar, .noprint, #toast { display:none !important }
  body { background:#fff !important; color:#000 !important }
}