@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500&family=IBM+Plex+Sans:wght@400;500;600&family=IBM+Plex+Serif:wght@500;600&display=swap');

/* ═══════════════════════════════════════════════════════════════════════════
   Аптечен ERP · корпоративен стил
   Метафора: архивен регистър. Всеки запис има гръбче отляво.
   ═══════════════════════════════════════════════════════════════════════════ */

:root{
  /* ── Основа ─────────────────────────────────────────────────────────────
     Палитрата се задава от администратора и се насища оттук; всичко
     останало стъпва върху тези променливи. */
  --primary:#1D6FC9; --primary-2:#175AA5; --primary-tint:#E8F1FC;
  --accent:#0E9C92;
  --bar-a:#0D2A4A; --bar-b:#12395F; --bar-c:#154470;
  --bar-hi:rgba(255,255,255,.09);
  --bar-line:rgba(255,255,255,.13);
  --bar-text:#EAF2FA;
  --bar-muted:#9DB6CF;

  --bg:#EFF4F9;
  --surface:#FFFFFF;
  --surface-2:#F5F9FD;
  --line:#DBE5F0;
  --line-strong:#C4D5E7;
  --ink:#0F2438;
  --ink-2:#3E566C;
  --ink-3:#5F7488;

  --ok:#0B7D75; --ok-tint:#E3F5F3;
  --warn:#A97A12; --warn-tint:#FBF1DC;
  --danger:#C2453C; --danger-tint:#FBEAE9;
  --teal:#0E9C92; --teal-tint:#E3F5F3;

  --r:14px; --r-sm:9px; --r-lg:18px; --r-xl:22px;
  --shadow-1:0 1px 2px rgba(13,42,74,.05), 0 6px 18px -12px rgba(13,42,74,.28);
  --shadow-2:0 26px 50px -20px rgba(13,42,74,.4), 0 2px 8px -3px rgba(13,42,74,.14);

  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --serif:var(--sans);
  --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;

  --ease:cubic-bezier(.22,1,.36,1);
  --spring:cubic-bezier(.34,1.56,.64,1);
}

*{box-sizing:border-box}

body{
  margin:0;
  font-family:var(--sans);
  font-size:14px;
  background:var(--bg);
  color:var(--ink);
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
}

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

h1,h2,h3{margin:0 0 .35em;font-family:var(--serif);font-weight:600;letter-spacing:-.01em}
h1{font-size:25px;line-height:1.25}
h2{font-size:17px;line-height:1.3}
h3{font-size:15px}

code{font-family:var(--mono);font-size:12.5px;background:var(--surface-2);
  border:1px solid var(--line);padding:1px 6px;border-radius:5px;color:var(--ink-2)}

.mt0{margin-top:0}.mt8{margin-top:8px}.mt16{margin-top:16px}.mt24{margin-top:26px}
.muted{color:var(--ink-2)}
.small{font-size:12.5px}
.right{text-align:right}
.nowrap{white-space:nowrap}
.inline{display:inline-block;vertical-align:middle}
.center{text-align:center}
.num{font-family:var(--mono);font-variant-numeric:tabular-nums;font-size:13px}

/* Надзаглавие - малък етикет над заглавието */
.eyebrow{font-size:10.5px;font-weight:600;letter-spacing:.13em;text-transform:uppercase;
  color:var(--ink-3);margin-bottom:6px}

/* ── Заглавна лента ───────────────────────────────────────────────────── */












.topnav a.on::after{content:"";position:absolute;left:13px;right:13px;bottom:-13px;
  height:2px;background:var(--primary);border-radius:2px}
.topnav .sep{width:1px;height:20px;background:var(--line);margin:0 8px}

/* ── Страница ─────────────────────────────────────────────────────────── */



/* ── Карти ────────────────────────────────────────────────────────────── */
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);
  padding:22px 24px;box-shadow:var(--shadow-1)}
.card+.card{margin-top:16px}
.card-head{display:flex;align-items:flex-start;justify-content:space-between;
  gap:16px;flex-wrap:wrap}

/* Гръбче на записа - подписният елемент */
.record{border-left:3px solid var(--primary)}
.record.is-off{border-left-color:var(--line-strong)}

/* Разделител в карта */
.rule{height:1px;background:var(--line);margin:18px -24px}

/* ── Раздели ──────────────────────────────────────────────────────────── */
.tabs{display:flex;gap:2px;margin-bottom:22px;border-bottom:1px solid var(--line);
  flex-wrap:wrap}
.tabs a{padding:10px 15px;font-size:13.5px;font-weight:500;color:var(--ink-2);
  border-bottom:2px solid transparent;margin-bottom:-1px;
  transition:color .16s var(--ease),border-color .16s var(--ease)}
.tabs a:hover{color:var(--ink);text-decoration:none}
.tabs a.on{color:var(--primary);border-bottom-color:var(--primary);font-weight:600}

/* ── Форми ────────────────────────────────────────────────────────────── */
label{display:block;font-size:12.5px;font-weight:500;color:var(--ink-2);
  margin:15px 0 6px;letter-spacing:.01em}
input,select,textarea{width:100%;border:1px solid var(--line-strong);
  border-radius:var(--r-sm);padding:9px 12px;font-size:14px;font-family:inherit;
  color:var(--ink);background:var(--surface);outline:none;
  transition:border-color .16s var(--ease),box-shadow .16s var(--ease)}
input:hover,select:hover,textarea:hover{border-color:#B9C4CA}
input:focus,select:focus,textarea:focus{border-color:var(--primary);
  box-shadow:0 0 0 3px rgba(29,78,74,.13)}
input::placeholder{color:var(--ink-3)}
select{appearance:none;
  background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%238B98A3' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 11px center;padding-right:34px}
textarea{min-height:90px;resize:vertical}
.hint{font-size:12px;color:var(--ink-3);margin-top:6px;line-height:1.5}
.row{display:flex;gap:14px;flex-wrap:wrap}
.row>*{flex:1;min-width:190px}
form.inline{display:inline-block}
fieldset{border:none;margin:0;padding:0}

/* ── Бутони ───────────────────────────────────────────────────────────── */
/* ── Скритото си остава скрито ──
   Атрибутът „hidden“ значи display:none, но браузърът го дава със слабо
   правило. Всеки клас, който задава свой display - а „.btn“ задава
   inline-flex, - го бие безшумно: копчето стои видимо, макар кодът да го е
   скрил.

   Дотук това се кърпеше поотделно („.day-slots[hidden]“, „.perm-sites[hidden]“
   и още две) - четири симптома на едно липсващо правило. Ето го. */
[hidden]{display:none !important}

/* ═══════════════════════════════════════════════════════════════════════════
   ДОСИЕ НА СЛУЖИТЕЛ · етикет за липсваща поща

   Стоеше в самата страница, но вътре в блок, който се извежда само на част от
   разделите. Резултатът: на „Лични данни“ етикетът имаше рамка и фон, а на
   „Контакти“ - само гол текст, и червената точка при раздела се превръщаше в
   бледо пликче.

   Стиловете важат за всеки раздел, значи мястото им е тук. Правило, което
   живее в един клон на страницата, важи само за този клон.
   ═══════════════════════════════════════════════════════════════════════════ */
.emp-back{margin:-10px 0 16px;font-size:13px}
.emp-back a{color:var(--ink-2,#68757f);text-decoration:none}
.emp-back a:hover{color:var(--primary)}

/* ── Етикетът за липсваща поща ──
   Червено, защото служителят реално няма достъп; пулсиращо, защото иначе се
   слива с останалите редове и се подминава.

   Пулсът е бавен и слаб - не мига, а диша. Бързото мигане не се чете и
   кара човек да го изключи от съзнанието си след третия път. */
.emp-warn{display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  margin:0 0 18px;padding:12px 16px;border-radius:12px;font-size:13.5px;
  color:var(--danger,#c2453c);
  border:1px solid color-mix(in srgb, var(--danger,#c2453c) 32%, transparent);
  background:color-mix(in srgb, var(--danger,#c2453c) 6%, transparent);
  animation:empGlow 2.4s ease-in-out infinite}
.emp-warn span:nth-child(2){flex:1;min-width:200px}
.emp-warn strong{font-weight:700}
.emp-wd{width:9px;height:9px;border-radius:50%;flex:none;
  background:var(--danger,#c2453c);animation:empPulse 2.4s ease-in-out infinite}

@keyframes empGlow{
  0%,100%{box-shadow:0 0 0 0 color-mix(in srgb, var(--danger,#c2453c) 0%, transparent)}
  50%{box-shadow:0 0 0 4px color-mix(in srgb, var(--danger,#c2453c) 12%, transparent)}
}
/* Пулсът пипа само собствения си „transform“ - затова елементите, които го
   ползват, не бива да разчитат на друг „transform“ за позицията си. */
@keyframes empPulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.45;transform:scale(.82)}}

/* ── Кой е изключил движението, има причина ──
   Уважава се и системната настройка на устройството, и личната в „Настройки
   на изгледа“. Общото правило за „no-motion“ е в style.css; тук остава само
   системното, което CSS не може да прочете отвън. */
@media (prefers-reduced-motion: reduce){
  .emp-warn,.emp-wd{animation:none}
}

/* ── Точката на раздела ── */
/* ── Точката при раздела ──
   НЕ е позиционирана абсолютно, а е обикновен елемент, изблъскан вдясно.

   Абсолютният вариант я центрираше с „transform: translateY(-50%)“, а пулсът
   задава „transform: scale()“ - второто ЗАМЕНЯ първото, вместо да се добави
   към него. Резултатът: точката подскачаше надолу с половин височина при всеки
   такт на анимацията.

   Като елемент от реда тя се центрира от самия ред („align-items:center“) и
   няма как да се разсинхронизира. Работи и когато релсата се обърне
   хоризонтално на тесен екран, където „right:12px“ би влязла в съседния надпис. */
.side-rail a .emp-dot{margin-left:auto}
.emp-dot{width:19px;height:19px;border-radius:50%;flex:none;
  display:inline-flex;align-items:center;justify-content:center;
  background:var(--danger,#c2453c);color:#fff;
  animation:empPulse 2.4s ease-in-out infinite}
/* Иконата вътре не носи собствена височина на реда - иначе кръгът се издува. */
.emp-dot svg{display:block}
@media (prefers-reduced-motion: reduce){ .emp-dot{animation:none} }


/* ═══════════════════════════════════════════════════════════════════════════
   ЛИЧНИ НАСТРОЙКИ НА ИЗГЛЕДА

   Класовете идват от „prefs_body_class()“ и стоят на „body“. Всичко тук е
   написано така, че да важи за целия екран, независимо кой модул го рисува -
   настройка, която трябва да се повтаря във всеки модул, се забравя точно в
   новия.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Без движение ──
   Същото, което системната настройка на устройството прави, но избрано тук.
   Цветовете и предупрежденията остават - просто спират да мърдат. */
body.no-motion *,
body.no-motion *::before,
body.no-motion *::after{
  animation-duration:.001ms !important;
  animation-iteration-count:1 !important;
  transition-duration:.001ms !important;
  scroll-behavior:auto !important;
}

/* ── Плътност на таблиците ──
   Множителят е на едно място: таблиците из модулите ползват различни класове,
   но всички минават през „td“ и „th“. */
body.dense table td{padding-top:6px;padding-bottom:6px}
body.dense table th{padding-bottom:6px}
body.dense .card{padding-top:14px;padding-bottom:14px}
body.dense .kv th,body.dense .kv td{padding-top:7px;padding-bottom:7px}

body.roomy table td{padding-top:15px;padding-bottom:15px}
body.roomy table th{padding-bottom:12px}
body.roomy .kv th,body.roomy .kv td{padding-top:15px;padding-bottom:15px}
body.roomy .btn{padding-top:11px;padding-bottom:11px}

/* ── Подчертани връзки ──
   За хора, на които цветът сам по себе си не стига. Изключват се връзките,
   които са копчета или плочки: там подчертаването е шум. */
body.links-underline a:not(.btn):not(.tile):not(.rowlink-main):not(.sp-add){
  text-decoration:underline;
  text-underline-offset:2px;
}

/* ── Повишен контраст ──
   Не сменя цветовете на системата, а само усилва най-бледите: приглушеният
   текст и рамките на полетата. */
body.high-contrast{--ink-2:#3c4a55;--ink-3:#55636e;--line:#b9c4cc}
body.high-contrast .muted{color:#3c4a55}
body.high-contrast input,body.high-contrast select,body.high-contrast textarea{
  border-color:#8d9aa4}
body.high-contrast .hint{color:#4a5761}


.btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;
  border:1px solid transparent;border-radius:var(--r-sm);font-family:inherit;
  font-weight:500;font-size:13.5px;padding:9px 17px;cursor:pointer;
  letter-spacing:.005em;
  transition:background .16s var(--ease),border-color .16s var(--ease),
             box-shadow .16s var(--ease),transform .16s var(--ease),color .16s var(--ease)}
.btn:hover{text-decoration:none}
.btn:active{transform:translateY(0)}
.btn:disabled{opacity:.45;cursor:not-allowed;transform:none;box-shadow:none}
.btn:focus-visible{outline:none;box-shadow:0 0 0 3px rgba(29,78,74,.22)}

.btn-primary{background:var(--primary);color:#fff;box-shadow:var(--shadow-1)}
.btn-primary:hover:not(:disabled){background:var(--primary-2);
  transform:translateY(-1px);box-shadow:var(--shadow-2)}

.btn-ghost{background:var(--surface);color:var(--ink);border-color:var(--line-strong)}
.btn-ghost:hover:not(:disabled){border-color:var(--primary);color:var(--primary);
  background:var(--primary-tint);transform:translateY(-1px)}

.btn-danger{background:var(--danger);color:#fff;box-shadow:var(--shadow-1)}
.btn-danger:hover:not(:disabled){background:#7C2C26;transform:translateY(-1px);
  box-shadow:var(--shadow-2)}
.btn-danger:focus-visible{box-shadow:0 0 0 3px rgba(147,54,47,.24)}

.btn-danger-ghost{background:var(--surface);color:var(--danger);
  border-color:#E0C4C1}
.btn-danger-ghost:hover:not(:disabled){background:var(--danger-tint);
  border-color:var(--danger);transform:translateY(-1px)}

.btn-sm{padding:6px 12px;font-size:12.5px;border-radius:6px}
.btn-block{width:100%}
.btn-group{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.btn svg{flex:none}

/* ── Значки ───────────────────────────────────────────────────────────── */
.badge{display:inline-flex;align-items:center;gap:5px;padding:2px 9px;
  border-radius:20px;font-size:11px;font-weight:500;white-space:nowrap;
  letter-spacing:.02em;border:1px solid transparent}
.badge-green{background:var(--ok-tint);color:var(--ok);border-color:#D3E4DA}
.badge-gray{background:var(--surface-2);color:var(--ink-3);border-color:var(--line)}
.badge-amber{background:var(--warn-tint);color:var(--warn);border-color:#E8DCBE}
.badge-red{background:var(--danger-tint);color:var(--danger);border-color:#E8CFCC}
.badge-teal{background:var(--primary-tint);color:var(--primary);border-color:#CFDFDC}
.dot{width:6px;height:6px;border-radius:50%;background:currentColor;flex:none}

/* ── Таблици ──────────────────────────────────────────────────────────── */
table{width:100%;border-collapse:collapse;font-size:13.5px}
th{text-align:left;font-size:10.5px;font-weight:600;letter-spacing:.11em;
  text-transform:uppercase;color:var(--ink-3);padding:0 12px 10px;
  white-space:nowrap;border-bottom:1px solid var(--line-strong)}
td{padding:13px 12px;border-top:1px solid var(--line);vertical-align:top}
tr:first-child td{border-top:none}
tbody tr,table tr{transition:background .15s var(--ease)}
td:first-child,th:first-child{padding-left:0}
td:last-child,th:last-child{padding-right:0}
table.kv th{width:170px;text-transform:none;letter-spacing:0;font-size:12.5px;
  font-weight:500;color:var(--ink-2);border-bottom:none;padding:13px 12px 13px 0;
  border-top:1px solid var(--line)}
table.kv tr:first-child th{border-top:none}

/* ── Съобщения ────────────────────────────────────────────────────────── */
.alert{border-radius:var(--r-sm);padding:12px 15px;font-size:13.5px;margin:0 0 16px;
  border:1px solid transparent;display:flex;gap:10px;align-items:flex-start;
  animation:rise .26s var(--ease) both}
.alert svg{flex:none;margin-top:1px}
.alert-error{background:var(--danger-tint);color:#76251F;border-color:#E8CFCC}
.alert-ok{background:var(--ok-tint);color:#1F5340;border-color:#D3E4DA}
.alert-info{background:var(--primary-tint);color:var(--primary-2);border-color:#CFDFDC}

/* ── Екрани за вход ───────────────────────────────────────────────────── */
.login-bg{background:var(--bg)}
.login-bg::before{content:"";position:fixed;inset:0;pointer-events:none;
  background:radial-gradient(60% 50% at 50% 0%,rgba(29,78,74,.055),transparent 70%)}
.center-screen{min-height:100vh;display:flex;align-items:center;
  justify-content:center;padding:24px;position:relative}
.auth-card{background:var(--surface);border:1px solid var(--line);border-radius:12px;
  padding:34px 34px 30px;width:100%;max-width:400px;box-shadow:var(--shadow-2);
  animation:rise .34s var(--ease) both}
.auth-head{text-align:center;margin-bottom:22px}
.auth-head .ttl{font-family:var(--serif);font-size:19px;font-weight:600}
.auth-head .sub{font-size:12.5px;color:var(--ink-2);margin-top:3px}
.auth-foot{margin-top:18px;padding-top:16px;border-top:1px solid var(--line);
  text-align:center;font-size:12.5px}

/* ── Долният ред ───────────────────────────────────────────────────────
   Три реда, подредени един под друг и центрирани. Първите два са кратки и
   стоят на един ред, когато има място; предупреждението е винаги отделно -
   то е изречение, не етикет. */
.foot{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;
  gap:4px 14px;text-align:center;line-height:1.6}
.foot .foot-note{flex-basis:100%;max-width:74ch;margin:2px auto 0;
  font-size:11.5px;opacity:.85}
/* ── Долният ред на входа ──
   В потока на страницата, под картите. Разстоянието отгоре е колкото между
   самите карти, за да личи, че е отделен ред, а не залепен за тях.

   Тънката черта е точно колкото да се вижда, че текстът е бележка - по-плътна
   би превърнала футера в трети блок. */
.login-foot{margin:10px auto 0;padding:16px 16px 0;max-width:560px;
  font-size:11.5px;color:var(--ink-3);
  border-top:1px solid color-mix(in srgb, var(--ink-3) 18%, transparent);
  gap:2px 18px}

/* ── Знакът над двата панела ────────────────────────────────────────────
   Стои сам, над избора и извън него. Затова е центриран спрямо цялата обвивка,
   а не спрямо едната карта.

   Файлът НЕ е пипан: показва се в естественото си съотношение и се свива само
   колкото да не излиза извън екрана.

   Няма прозрачност, а фонът на страницата е сив - затова седи върху бяла
   подложка със същото заобляне като картите отдолу. Така изглежда нарочно,
   вместо да лепне бял правоъгълник насред екрана. */
.auth-wrap{width:100%;max-width:840px;display:flex;flex-direction:column;
  align-items:center;gap:20px;padding:8px 0 4px}
/* ── Подложката приляга по логото ──
   Съотношението е 3:1 и се пази: височината идва от самата снимка, а не от
   число, което после се разминава с нея.

   Отстъпът е малък и еднакъв отгоре и отдолу - картата е рамка на знака, а не
   поле, в което той стои някъде горе. */
.viva-top{width:100%;max-width:420px;background:#fff;border-radius:12px;
  padding:10px 18px;box-shadow:var(--shadow-2);line-height:0;
  animation:rise .34s var(--ease) both}
.viva-top img{display:block;width:100%;height:auto}

/* ── Показва се точно ЕДНА от двете ──
   Правилото трябва да е поне толкова точно, колкото „.viva-top img“ отгоре -
   иначе то печели и двете снимки застават една под друга. Точно това се
   случваше: логото горе, а под него празно поле колкото него.

   Затова тук навсякъде е „.viva-top .viva-…“, а не само класът. */
.viva-top .viva-still{display:none}
@media (prefers-reduced-motion: reduce){
  .viva-top .viva-anim{display:none}
  .viva-top .viva-still{display:block}
}
body.no-motion .viva-top .viva-anim{display:none}
body.no-motion .viva-top .viva-still{display:block}

@media (max-width:820px){
  .viva-top{max-width:300px;padding:8px 14px}
}

/* ── Двете половини на екрана за вход ───────────────────────────────────
   Наляво влизането в тази система, надясно - в аптечния софтуер. Хората идват
   за едно от двете и изборът трябва да е един поглед.

   На тесен екран колоните се подреждат една под друга, но входът остава
   ПЪРВИ: той е по-честият, а по-честото не бива да се превърта. */
.auth-split{display:flex;align-items:stretch;gap:20px;flex-wrap:wrap;
  justify-content:center;width:100%;max-width:840px}
.auth-split > *{flex:1 1 340px;max-width:400px}

.auth-side{display:flex}
.auth-side-in{background:var(--surface);border:1px solid var(--line);
  border-radius:12px;padding:34px 30px 28px;width:100%;
  box-shadow:var(--shadow-2);animation:rise .34s var(--ease) both;
  display:flex;flex-direction:column;justify-content:center;text-align:center}
.auth-side-in h2{font-family:var(--serif);font-size:19px;font-weight:600;
  margin:0 0 22px;line-height:1.35;max-width:22ch;margin-left:auto;margin-right:auto}
.auth-side-in p{font-size:13px;color:var(--ink-2);line-height:1.6;margin:0 0 22px;
  max-width:30ch;margin-left:auto;margin-right:auto}
/* Копчето е по-едро от това вляво: то е и целта на тази половина. */
.auth-side-in .side-btn{padding:15px 20px;font-size:15px}

/* ── Зелено, защото води до нещо, което работи ──
   Синьото вляво е входът към новото, което още не е тук. Различният цвят
   казва разликата, без да се чете нищо.

   Тонът е свой, а не общият „успех“: този не съобщава резултат, а посока. */
.auth-side-in .side-go{background:#1f8a5b;color:#fff;border:1px solid #1a7850;
  font-weight:600}
.auth-side-in .side-go:hover{background:#186f49;border-color:#156140;
  transform:translateY(-1px)}
.auth-side-in .side-go:active{transform:translateY(0)}
.auth-side-in .side-note{font-size:11.5px;color:var(--ink-3);margin:12px 0 0}

@media (max-width:820px){
  .auth-split{max-width:400px}
  .auth-side-in{padding:26px 24px 22px}
}

/* ── Картата-анонс ─────────────────────────────────────────────────────
   Различава се от съседната нарочно: пунктирана рамка, по-мек фон и приглушено
   копче. Двете еднакви карти биха изглеждали като два равностойни входа, а
   само едната води някъде днес.

   Пунктирът е разбираем без думи - така се рисува нещо, което още не е
   довършено. */
.auth-soon{border-style:dashed;border-color:color-mix(in srgb, var(--primary) 32%, var(--line));
  background:linear-gradient(180deg,
    color-mix(in srgb, var(--primary) 4%, var(--surface)) 0%, var(--surface) 60%)}
.auth-soon .auth-head{margin-bottom:18px}
.auth-soon .soon-tag{display:inline-block;margin:10px 0 8px;padding:3px 12px;
  border-radius:999px;font-size:10.5px;font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;background:var(--primary);color:#fff}
.auth-soon .ttl{font-size:18px}
.auth-soon .soon-txt{font-size:12.5px;color:var(--ink-2);line-height:1.65;
  margin:8px auto 0;max-width:34ch}
/* Копчето е тихо: то не е поканата на екрана, а вход за онези, които вече
   знаят, че имат достъп. */
.auth-soon .soon-btn{background:var(--surface-2);color:var(--ink-2);
  border:1px solid var(--line);font-weight:600}
.auth-soon .soon-btn:hover{background:var(--primary-tint);color:var(--primary);
  border-color:color-mix(in srgb, var(--primary) 40%, transparent)}

/* ── Постоянно известие на екрана за вход ────────────────────────────── */
.auth-stack{width:100%;max-width:400px;display:flex;flex-direction:column;gap:14px}
.auth-stack .auth-card{max-width:none}

.notice{background:var(--surface);border:1px solid #E4CBC8;border-left:3px solid var(--danger);
  border-radius:12px;padding:18px 20px;display:flex;gap:15px;align-items:flex-start;
  box-shadow:var(--shadow-2);animation:rise .3s var(--ease) both}
.notice-ic{width:38px;height:38px;border-radius:50%;flex:none;
  background:var(--danger-tint);color:var(--danger);
  display:flex;align-items:center;justify-content:center;
  animation:halo 2.6s ease-out infinite}
.notice-title{font-family:var(--serif);font-size:15.5px;font-weight:600;
  color:#76251F;margin-bottom:3px}
.notice p{margin:0;font-size:13px;color:var(--ink-2);line-height:1.55}
.notice p+p{margin-top:7px}
.notice .reason{color:#76251F;font-weight:500}

@keyframes halo{
  0%   {box-shadow:0 0 0 0 rgba(147,54,47,.30)}
  60%  {box-shadow:0 0 0 11px rgba(147,54,47,0)}
  100% {box-shadow:0 0 0 0 rgba(147,54,47,0)}
}

/* ── Плочки на модулите ───────────────────────────────────────────────── */
.tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(288px,1fr));gap:16px}
.tile{display:block;background:var(--surface);border:1px solid var(--line);
  border-left:3px solid var(--primary);border-radius:var(--r);padding:20px 22px;
  color:var(--ink);box-shadow:var(--shadow-1);position:relative;
  transition:box-shadow .2s var(--ease),transform .2s var(--ease),
             border-color .2s var(--ease);
  animation:rise .3s var(--ease) both}
.tile:hover{text-decoration:none;transform:translateY(-2px);box-shadow:var(--shadow-2)}
.tile .ic{width:36px;height:36px;border-radius:8px;background:var(--primary-tint);
  color:var(--primary);display:flex;align-items:center;justify-content:center;
  margin-bottom:14px;transition:background .2s var(--ease)}
.tile:hover .ic{background:var(--primary);color:#fff}
.tile .tt{font-family:var(--serif);font-size:15.5px;font-weight:600;margin-bottom:4px}
.tile .arrow{position:absolute;right:20px;top:22px;color:var(--ink-3);
  transition:transform .2s var(--ease),color .2s var(--ease)}
.tile:hover .arrow{transform:translateX(3px);color:var(--primary)}
.tile-off{border-left-color:var(--line-strong);opacity:.72}
.tile-off .ic{background:var(--surface-2);color:var(--ink-3)}

/* ── Празно състояние ─────────────────────────────────────────────────── */
.empty{text-align:center;padding:46px 24px}
.empty .ic{width:42px;height:42px;border-radius:9px;background:var(--surface-2);
  color:var(--ink-3);display:flex;align-items:center;justify-content:center;
  margin:0 auto 14px;border:1px solid var(--line)}
.empty-title{font-family:var(--serif);font-size:16px;font-weight:600;margin-bottom:5px}

/* ── Разгъващ се панел ────────────────────────────────────────────────── */
details.inline{position:relative}
details summary{list-style:none;user-select:none}
details summary::-webkit-details-marker{display:none}
details .pop{position:absolute;right:0;top:calc(100% + 6px);z-index:20;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r);
  padding:14px;width:290px;box-shadow:var(--shadow-pop);text-align:left;
  animation:rise .18s var(--ease) both}
details .pop label:first-child{margin-top:0}

/* ── Опасна зона ──────────────────────────────────────────────────────── */
.danger-zone{border-color:#E4CBC8;background:linear-gradient(0deg,var(--danger-tint),var(--danger-tint));
  border-left:3px solid var(--danger)}
.danger-zone h2{color:#76251F}

/* Текст само за екранни четци */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* Бутон само с иконка */
.btn-icon{padding:6px 9px}

/* ── Движение ─────────────────────────────────────────────────────────── */
@keyframes rise{from{opacity:0;transform:translateY(7px)}to{opacity:1;transform:none}}
.card{animation:rise .28s var(--ease) both}
.card:nth-of-type(2){animation-delay:.04s}
.card:nth-of-type(3){animation-delay:.08s}
.tile:nth-child(2){animation-delay:.05s}
.tile:nth-child(3){animation-delay:.1s}
.tile:nth-child(4){animation-delay:.15s}
.tile:nth-child(5){animation-delay:.2s}
.tile:nth-child(6){animation-delay:.25s}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none !important;transition-duration:.01ms !important}
  .btn:hover,.tile:hover{transform:none}
  .notice-ic{box-shadow:0 0 0 4px rgba(147,54,47,.14)}
}

/* ── Дребен екран ─────────────────────────────────────────────────────── */
@media (max-width:760px){
  
  
  .topnav a.on::after{bottom:-4px}
  .topnav .sep{display:none}
  
  .card{padding:18px 16px}
  .rule{margin-left:-16px;margin-right:-16px}
  h1{font-size:21px}
  table{font-size:12.5px}
  th,td{padding-left:8px;padding-right:8px}
  
}

@media (max-width:560px){
  /* Таблиците стават списъци, за да не се реже съдържание */
  table.stack thead{display:none}
  table.stack tr{display:block;border-top:1px solid var(--line);padding:12px 0}
  table.stack td{display:flex;justify-content:space-between;gap:14px;
    border:none;padding:4px 0;text-align:right}
  table.stack td::before{content:attr(data-label);color:var(--ink-3);
    font-size:11px;text-transform:uppercase;letter-spacing:.08em;
    text-align:left;flex:none}
}

/* ═══════════════════════════════════════════════════════════════════════════
   ЛЕНТА ЗА ИЗТИЧАЩ АБОНАМЕНТ
   Стои най-горе, над заглавната лента, и не се плъзга с нея.
   ═══════════════════════════════════════════════════════════════════════════ */
.sub-banner{background:#B3261E;color:#fff}
.sub-banner-inner{max-width:1180px;margin:0 auto;padding:10px 22px;
  display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.sub-banner-ic{display:flex;flex:none;opacity:.95}
.sub-banner-txt{font-size:13.5px;line-height:1.45;min-width:0;flex:1}
.sub-banner-txt strong{font-weight:600}
.sub-banner-clock{flex:none;font-variant-numeric:tabular-nums;
  font-size:14px;font-weight:600;letter-spacing:.02em;
  background:rgba(255,255,255,.16);border-radius:6px;padding:5px 12px}
@media (max-width:640px){
  .sub-banner-inner{padding:9px 16px;gap:9px}
  .sub-banner-txt{font-size:12.5px;flex:1 1 100%;order:3}
  .sub-banner-clock{font-size:13px;padding:4px 10px}
}

/* ═══════════════════════════════════════════════════════════════════════════
   СТРАНИЦА С РАЗДЕЛИ В ЛЯВА ЛЕНТА
   ═══════════════════════════════════════════════════════════════════════════ */
.settings-layout{display:grid;grid-template-columns:212px minmax(0,1fr);gap:26px;
  align-items:start}
.side-rail{display:flex;flex-direction:column;gap:2px;position:sticky;top:22px}
.side-rail a{display:flex;align-items:center;gap:10px;
  padding:10px 13px;border-radius:var(--r-sm,8px);
  font-size:13.5px;font-weight:500;color:var(--ink-2);
  border-left:2px solid transparent;
  transition:background .16s ease,color .16s ease,border-color .16s ease}
.side-rail a .ic{display:flex;flex:none;opacity:.7}
.side-rail a:hover{background:rgba(0,0,0,.035);color:var(--ink);text-decoration:none}
.side-rail a.on{background:rgba(0,0,0,.045);color:var(--primary);font-weight:600;
  border-left-color:var(--primary)}
.side-rail a.on .ic{opacity:1}
.side-content .card:first-child{margin-top:0}
@media (max-width:820px){
  .settings-layout{grid-template-columns:1fr;gap:16px}
  .side-rail{position:static;flex-direction:row;flex-wrap:wrap;
    border-bottom:1px solid var(--line);padding-bottom:2px}
  .side-rail a{border-left:none;border-bottom:2px solid transparent;
    border-radius:0;padding:9px 13px}
  .side-rail a.on{background:none;border-bottom-color:var(--primary)}
}

/* ═══════════════════════════════════════════════════════════════════════════
   ПЛОЧКИ НА МОДУЛИТЕ (обхват на абонамента)
   ═══════════════════════════════════════════════════════════════════════════ */
.mod-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));
  gap:10px;margin-top:10px}
.mod-chip{display:flex;align-items:flex-start;gap:11px;
  padding:13px 14px;border:1px solid var(--line);border-radius:var(--r-sm,8px);
  background:#fff;color:var(--ink);transition:border-color .16s ease,box-shadow .16s ease}
a.mod-chip:hover{border-color:var(--primary);text-decoration:none;
  box-shadow:0 2px 10px rgba(0,0,0,.05)}
.mod-chip .ic{display:flex;flex:none;margin-top:1px;color:var(--primary);opacity:.85}
.mod-chip .nm{font-size:13.5px;font-weight:600;line-height:1.35;min-width:0;flex:1}
.mod-chip .dsc{display:block;font-size:12px;font-weight:400;color:var(--ink-2);
  margin-top:3px;line-height:1.4}
.mod-chip .badge{flex:none;align-self:center}
.mod-chip.is-off{background:#FAFAFA;border-style:dashed}
.mod-chip.is-off .ic,.mod-chip.is-off .nm{opacity:.6}
.sub-h{font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:.07em;
  color:var(--ink-2);margin:22px 0 0}
.sub-h:first-of-type{margin-top:16px}

/* ═══════════════════════════════════════════════════════════════════════════
   ЖУРНАЛ И РЕГИСТЪР НА АКТИВНОСТТА
   Дълъг детайл (напр. снимка на изтрит запис) се сгъва, за да не разбива
   таблицата. Разгъва се с щракване.
   ═══════════════════════════════════════════════════════════════════════════ */
.audit-table{table-layout:fixed;width:100%}
.audit-table th,.audit-table td{overflow-wrap:anywhere;word-break:break-word}
.audit-cell{max-width:0}
.audit-url{font-size:11.5px;margin-top:4px;opacity:.75}
.audit-code{font-size:11px;opacity:.6;display:inline-block;margin-top:2px}
details.audit-detail>summary{cursor:pointer;list-style:none;
  color:var(--primary);font-weight:500}
details.audit-detail>summary::-webkit-details-marker{display:none}
details.audit-detail>summary::after{content:" ▾";font-size:10px;opacity:.7}
details.audit-detail[open]>summary::after{content:" ▴"}
details.audit-detail>summary:hover{text-decoration:underline}
.audit-full{margin-top:7px;padding:9px 11px;background:#FAFAFA;
  border:1px solid var(--line);border-radius:6px;
  font-size:12px;line-height:1.5;white-space:pre-wrap;overflow-wrap:anywhere}
table.audit-json{margin-top:7px;width:100%;font-size:12px;
  border:1px solid var(--line);border-radius:6px;overflow:hidden}
table.audit-json th{width:34%;padding:5px 9px;text-align:left;
  background:#FAFAFA;font-weight:500;font-size:11.5px;color:var(--ink-2);
  text-transform:none;letter-spacing:0}
table.audit-json td{padding:5px 9px;overflow-wrap:anywhere}
table.audit-json tr+tr th,table.audit-json tr+tr td{border-top:1px solid var(--line)}
@media (max-width:820px){
  .audit-table{table-layout:auto}
  .audit-cell{max-width:none}
}
.sub-banner-note{display:block;font-size:12px;opacity:.9;margin-top:2px}
@media (max-width:640px){.sub-banner-note{font-size:11.5px}}

/* ── Дневници: ред с отклонение от допустимите граници ────────────────── */
tr.jrn-dev td{background:#FDF1EF}
tr.jrn-dev td:first-child{box-shadow:inset 3px 0 0 #B3261E}

/* ── Избор на средства за обект на почистване ─────────────────────────── */
.agent-pick{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:6px}
.agent-pick label{display:flex;align-items:center;gap:8px;margin:0;
  border:1px solid var(--line);border-radius:var(--r-sm,8px);padding:8px 11px;
  font-size:13px;font-weight:400;color:var(--ink);cursor:pointer}
.agent-pick label:hover{border-color:var(--primary)}
.agent-pick input{width:auto;flex:none}

/* ── Табло на началната страница ───────────────────────────────────────── */
.dash-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:14px}
.dash-card{text-align:center}
.dash-num{font-family:var(--serif);font-size:34px;font-weight:600;line-height:1.1;
  color:var(--primary)}
.dash-lbl{font-size:12.5px;color:var(--ink-2);margin-top:4px}

/* ── Избор на цветова гама ─────────────────────────────────────────────── */
.palette-pick{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:8px;
  margin-top:6px}
.palette-pick label{display:flex;align-items:center;gap:10px;margin:0;cursor:pointer;
  border:1px solid var(--line);border-radius:var(--r-sm);padding:10px 12px;
  font-size:13px;font-weight:400;color:var(--ink);transition:border-color .16s var(--ease)}
.palette-pick label:hover{border-color:var(--line-strong)}
.palette-pick label.on{border-color:var(--primary);background:var(--primary-tint)}
.palette-pick input{width:auto;flex:none;margin:0}
.palette-pick .swatch{width:22px;height:22px;border-radius:50%;flex:none;
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.08)}
.ui-preview{border:1px dashed var(--line-strong);border-radius:var(--r);padding:16px;
  background:var(--surface-2)}

/* ── Работно време ─────────────────────────────────────────────────────── */
.hours-total{text-align:right}
.hours-total .num{font-family:var(--serif);font-size:22px;font-weight:600;
  color:var(--primary);display:block;line-height:1.2}

.day-row{border:1px solid var(--line);border-radius:var(--r-sm);
  padding:12px 14px;margin-bottom:8px;transition:opacity .16s var(--ease)}
.day-row.is-off{opacity:.55}
.day-head{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.day-name{font-weight:600;font-size:13.5px;min-width:96px}
.day-modes{display:flex;gap:4px;flex-wrap:wrap}
.day-modes label{display:inline-flex;align-items:center;margin:0;cursor:pointer;
  border:1px solid var(--line);border-radius:var(--r-sm);padding:5px 11px;
  font-size:12.5px;font-weight:400;color:var(--ink-2);
  transition:border-color .16s var(--ease),color .16s var(--ease)}
.day-modes label:hover{border-color:var(--line-strong);color:var(--ink)}
.day-modes label.on{border-color:var(--primary);background:var(--primary-tint);
  color:var(--primary);font-weight:600}
.day-modes input{position:absolute;opacity:0;width:0;height:0}
.day-sum{margin-left:auto;font-size:13px;color:var(--ink-2);white-space:nowrap;
  min-width:70px;text-align:right}

.day-slots{margin-top:10px;padding-left:110px;display:flex;
  align-items:center;gap:8px;flex-wrap:wrap}
.day-slots[hidden]{display:none}
.slot{display:inline-flex;align-items:center;gap:6px;
  border:1px solid var(--line);border-radius:var(--r-sm);padding:4px 6px 4px 8px}
.slot.bad{border-color:var(--danger);background:var(--danger-tint)}
.slot input[type=time]{width:auto;min-width:104px;border:none;padding:4px 2px;
  font-size:13px;background:transparent}
.slot input[type=time]:focus{outline:1px solid var(--primary);border-radius:3px}
.slot .dash{color:var(--ink-3)}
.slot .slot-del{padding:2px 8px;font-size:15px;line-height:1;color:var(--ink-3)}
.slot .slot-del:hover{color:var(--danger)}

@media (max-width:700px){
  .day-slots{padding-left:0}
  .day-sum{margin-left:0;width:100%;text-align:left}
}

/* ── Ред-връзка в списъка ──────────────────────────────────────────────── */
table.rowlink tbody tr{cursor:pointer;transition:background .14s var(--ease)}
table.rowlink tbody tr:hover{background:var(--primary-tint)}
table.rowlink tbody tr:hover .rowlink-main{color:var(--primary)}
table.rowlink tbody tr:focus{outline:2px solid var(--primary);outline-offset:-2px}
.rowlink-main{font-weight:600;font-size:14px;color:var(--ink)}
.rowlink-main:hover{text-decoration:none}
.btn-icon .btn-txt{margin-left:5px}
tr.is-off{opacity:.55}

/* ── Вертикални подраздели вътре в раздел ──────────────────────────────── */
.sub-layout{display:grid;grid-template-columns:196px minmax(0,1fr);gap:20px;align-items:start}
.sub-rail{display:flex;flex-direction:column;gap:2px;position:sticky;top:22px}
.sub-rail a{display:flex;align-items:center;gap:9px;padding:9px 12px;
  border-radius:var(--r-sm);font-size:13px;font-weight:500;color:var(--ink-2);
  border-left:2px solid transparent;transition:background .16s var(--ease),color .16s var(--ease)}
.sub-rail a .ic{display:flex;flex:none;opacity:.7}
.sub-rail a:hover{background:rgba(0,0,0,.03);color:var(--ink);text-decoration:none}
.sub-rail a.on{background:rgba(0,0,0,.045);color:var(--primary);font-weight:600;
  border-left-color:var(--primary)}
.sub-content .card:first-child{margin-top:0}
@media (max-width:820px){
  .sub-layout{grid-template-columns:1fr;gap:14px}
  .sub-rail{position:static;flex-direction:row;flex-wrap:wrap;
    border-bottom:1px solid var(--line);padding-bottom:2px}
  .sub-rail a{border-left:none;border-bottom:2px solid transparent;border-radius:0}
  .sub-rail a.on{background:none;border-bottom-color:var(--primary)}
}

/* ── Подраздели вътре в раздел (хоризонтални) ──────────────────────────── */
.subtabs{display:flex;gap:4px;flex-wrap:wrap;margin-bottom:18px;
  border-bottom:1px solid var(--line)}
.subtabs a{display:inline-flex;align-items:center;gap:7px;
  padding:9px 14px;font-size:13px;font-weight:500;color:var(--ink-2);
  border-bottom:2px solid transparent;margin-bottom:-1px;
  transition:color .16s var(--ease),border-color .16s var(--ease)}
.subtabs a .ic{display:flex;flex:none;opacity:.7}
.subtabs a:hover{color:var(--ink);text-decoration:none}
.subtabs a.on{color:var(--primary);border-bottom-color:var(--primary);font-weight:600}
.subtabs a.on .ic{opacity:1}
@media (max-width:640px){
  .subtabs a{padding:8px 11px;font-size:12.5px}
  .subtabs a .ic{display:none}
}
.btn-danger-ghost{background:transparent;color:var(--danger);border:1px solid var(--line)}
.btn-danger-ghost:hover{border-color:var(--danger);background:var(--danger-tint)}

/* ── Две колони в раздел ────────────────────────────────────────────────── */
.two-col{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);
  gap:16px;align-items:start}
.two-col .col-side .card:first-child{margin-top:0}
@media (max-width:960px){.two-col{grid-template-columns:1fr}}

/* ── Преглед на изпратено писмо ─────────────────────────────────────────── */
.mail-preview{border:1px solid var(--line);border-radius:var(--r-sm);
  padding:16px;background:#fff;max-height:520px;overflow:auto;font-size:13.5px;
  line-height:1.55}
.mail-preview table{width:100%!important}
.mail-preview img{max-width:100%;height:auto}

/* ── Разгъващ се ред „Действия“ ─────────────────────────────────────────
   Панелът е РЕД В ТАБЛИЦАТА, не изскачащ прозорец. Така не може да бъде
   отрязан от края на страницата и се вижда докрай.
   ───────────────────────────────────────────────────────────────────── */
.act-btn .caret{font-size:10px;opacity:.7;margin-left:3px;display:inline-block;
  transition:transform .18s var(--ease)}
.act-btn.on{border-color:var(--primary);color:var(--primary)}
.act-btn.on .caret{transform:rotate(180deg)}

.act-row>td{background:var(--surface-2);border-top:0;
  box-shadow:inset 3px 0 0 var(--primary);padding:16px 20px}
.act-panel{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);
  gap:20px;align-items:start}

.act-list{display:flex;flex-direction:column;gap:6px}
.act-list form{margin:0}
.act-item{display:flex;align-items:flex-start;gap:11px;width:100%;text-align:left;
  background:#fff;border:1px solid var(--line);border-radius:var(--r-sm);
  padding:11px 13px;font:inherit;font-size:13px;color:var(--ink);cursor:pointer;
  transition:border-color .16s var(--ease),background .16s var(--ease)}
.act-item:hover{border-color:var(--primary);background:var(--primary-tint)}
.act-item svg{flex:none;margin-top:1px;opacity:.75}
.act-item strong{display:block;font-weight:600;line-height:1.35}
.act-item em{display:block;font-style:normal;font-size:12px;color:var(--ink-3);
  margin-top:2px;line-height:1.4}
.act-item.is-self{cursor:default;background:transparent;border-style:dashed}
.act-item.is-self:hover{border-color:var(--line);background:transparent}

.act-form{background:#fff;border:1px solid var(--line);border-radius:var(--r-sm);
  padding:13px 15px}
.act-form label{margin-top:0}
.act-form .hint{font-size:11.5px;line-height:1.45}

@media (max-width:820px){
  .act-panel{grid-template-columns:1fr;gap:14px}
  .act-row>td{padding:14px}
}
.side-rail .rail-num{margin-left:auto;font-size:11.5px;color:var(--ink-3);
  background:rgba(0,0,0,.05);border-radius:20px;padding:1px 8px;font-variant-numeric:tabular-nums}
.side-rail a.on .rail-num{background:rgba(255,255,255,.55);color:var(--primary)}
.act-form.act-danger{border-color:#E6C9C5;background:#FDF6F5}
.act-form.act-danger label{color:var(--danger)}

/* ── Матрица на правата ─────────────────────────────────────────────────── */
.perm-group{border:1px solid var(--line);border-radius:var(--r-sm);
  margin-bottom:12px;overflow:hidden}
.perm-group-head{background:var(--surface-2);padding:9px 14px;font-size:12px;
  font-weight:600;color:var(--ink-2);letter-spacing:.03em;text-transform:uppercase;
  border-bottom:1px solid var(--line)}
.perm-row{display:flex;align-items:center;gap:14px;flex-wrap:wrap;
  padding:10px 14px;border-bottom:1px solid var(--line)}
.perm-row:last-child{border-bottom:0}
.perm-row.is-on{background:var(--primary-tint)}
.perm-check{display:flex;align-items:center;gap:9px;margin:0;cursor:pointer;
  font-size:13.5px;font-weight:500;color:var(--ink);flex:1;min-width:220px}
.perm-check input{width:auto;flex:none;margin:0}
.perm-scope{max-width:210px;margin:0}
.perm-scope:disabled{opacity:.45}
.perm-sites{flex-basis:100%;display:grid;
  grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:6px;
  padding:6px 0 2px 28px}
.perm-sites[hidden]{display:none}
.perm-sites label{display:flex;align-items:center;gap:7px;margin:0;
  font-size:12.5px;font-weight:400;color:var(--ink-2);cursor:pointer}
.perm-sites input{width:auto;flex:none;margin:0}

.perm-modes{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
  gap:8px;margin-top:6px}
.perm-modes label{display:flex;align-items:flex-start;gap:10px;margin:0;cursor:pointer;
  border:1px solid var(--line);border-radius:var(--r-sm);padding:11px 13px;
  font-weight:400;transition:border-color .16s var(--ease),background .16s var(--ease)}
.perm-modes label:hover{border-color:var(--line-strong)}
.perm-modes label.on{border-color:var(--primary);background:var(--primary-tint)}
.perm-modes input{width:auto;flex:none;margin:3px 0 0}
.perm-modes strong{display:block;font-size:13.5px;line-height:1.3}
.perm-modes em{display:block;font-style:normal;font-size:12px;color:var(--ink-3);
  margin-top:3px;line-height:1.4}

.auth-alt{border-top:1px solid var(--line);margin-top:18px;padding-top:16px;text-align:center}
.mt8{margin-top:8px}
.flow-list{margin:14px 0 0;padding-left:22px;font-size:13.5px;line-height:1.7;color:var(--ink-2)}
.flow-list strong{color:var(--ink)}

/* ── Шаблони на писмата ─────────────────────────────────────────────────── */
.tpl-vars{border:1px dashed var(--line-strong);border-radius:var(--r-sm);
  padding:12px 14px;background:var(--surface-2)}
.tpl-var{background:#fff;border:1px solid var(--line);border-radius:5px;
  padding:4px 9px;margin:0 5px 5px 0;font-family:var(--mono);font-size:12px;
  color:var(--primary);cursor:pointer;transition:border-color .15s var(--ease)}
.tpl-var:hover{border-color:var(--primary);background:var(--primary-tint)}

/* ── Самозаписване на служител ───────────────────────────────────────────
   Отделен изглед от входа: по-широк, разделен на смислови блокове,
   с едно нещо на екран.
   ───────────────────────────────────────────────────────────────────── */
.reg-wrap{max-width:460px;margin:0 auto;padding:38px 20px 56px;
  transition:max-width .2s var(--ease)}
.reg-wrap.wide{max-width:660px}

.reg-head{text-align:center;margin-bottom:26px}
.reg-head h1{font-family:var(--serif);font-size:25px;font-weight:600;
  margin:14px 0 6px;letter-spacing:-.01em}
.reg-sub{color:var(--ink-2);font-size:14px;margin:0;line-height:1.5}

.reg-card{background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r);padding:26px 28px;box-shadow:var(--shadow-1)}
.reg-card > label:first-of-type{margin-top:0}

.reg-section{font-size:11.5px;font-weight:600;letter-spacing:.06em;
  text-transform:uppercase;color:var(--ink-3);margin:22px 0 10px;
  padding-bottom:7px;border-bottom:1px solid var(--line)}
.reg-section:first-child{margin-top:0}

.hint-strong{color:var(--ink-2);font-weight:500}

.reg-foot-note{font-size:12px;color:var(--ink-3);text-align:center;
  margin:14px 0 0;line-height:1.5}
.reg-hint{font-size:12.5px;color:var(--ink-3);text-align:center;
  margin:16px auto 0;max-width:44ch;line-height:1.6}
.reg-back{display:flex;justify-content:center;gap:18px;margin-top:22px;font-size:13px}

/* ── Лентата с етапите ── */
.steps{list-style:none;margin:0 0 22px;padding:0;display:grid;
  grid-template-columns:repeat(3,1fr);gap:10px}
.steps li{display:flex;align-items:center;gap:9px;padding:11px 12px;
  background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r-sm);opacity:.6}
.steps li.on{opacity:1;border-color:var(--primary);background:var(--primary-tint)}
.steps li.done{opacity:.9}
.steps .num{flex:none;width:22px;height:22px;border-radius:50%;
  background:var(--line);color:var(--ink-2);display:flex;align-items:center;
  justify-content:center;font-size:11.5px;font-weight:600}
.steps li.on .num,.steps li.done .num{background:var(--primary);color:#fff}
.steps .txt strong{display:block;font-size:12.5px;line-height:1.25;color:var(--ink)}
.steps .txt em{display:block;font-style:normal;font-size:11px;color:var(--ink-3);
  margin-top:2px;line-height:1.3}

/* ── Екранът след подаване ── */
.reg-done{width:56px;height:56px;border-radius:50%;background:var(--ok-tint,#E8F2EC);
  color:var(--ok,#2E6B4F);display:flex;align-items:center;justify-content:center;
  margin:0 auto 16px}
.reg-card h2{font-family:var(--serif);font-size:20px;margin:0 0 8px;text-align:center}
.reg-card > p{color:var(--ink-2);font-size:14px;line-height:1.6;text-align:center;
  margin:0 auto 20px;max-width:46ch}
.reg-next{background:var(--surface-2);border-radius:var(--r-sm);padding:16px 20px;
  margin-bottom:18px}
.reg-next-title{font-size:11.5px;font-weight:600;letter-spacing:.06em;
  text-transform:uppercase;color:var(--ink-3);margin-bottom:10px}
.reg-next ol{margin:0;padding-left:20px;font-size:13.5px;line-height:1.75;
  color:var(--ink-2)}
.reg-next strong{color:var(--ink)}

.auth-alt{border-top:1px solid var(--line);margin-top:18px;padding-top:16px;text-align:center}
.mt8{margin-top:8px}

@media (max-width:560px){
  .reg-wrap,.reg-wrap.wide{padding:24px 16px 40px}
  .reg-card{padding:20px 18px}
  .steps{grid-template-columns:1fr}
  .steps li{padding:9px 12px}
}
input.is-bad{border-color:var(--danger);background:var(--danger-tint)}
.code-input{font-family:var(--mono);font-size:26px;letter-spacing:.42em;text-align:center;
  padding:14px 12px}
.reg-inline-form{text-align:center;margin-top:14px}

/* ── Опашка за постъпване ───────────────────────────────────────────────── */
tr.row-attention td{background:#FEF8EC}
tr.row-attention td:first-child{box-shadow:inset 3px 0 0 var(--warn,#B4741A)}
.stage-line{display:flex;gap:4px;margin-bottom:5px}
.stage-line .dot{width:22px;height:4px;border-radius:2px;background:var(--line)}
.stage-line .dot.done{background:var(--primary)}
.stage-line .dot.now{background:var(--warn,#B4741A)}
.dot-alert{display:inline-block;width:7px;height:7px;border-radius:50%;
  background:var(--danger);margin-left:5px;vertical-align:middle}
.todo-list{margin:0;padding-left:20px;font-size:13.5px;line-height:1.8;color:var(--ink-2)}
.todo-list li::marker{color:var(--warn,#B4741A)}
.steps-wide{grid-template-columns:repeat(4,1fr)}
.other-input{margin-top:8px}
.other-input[hidden]{display:none}

/* ═══════════════════════════════════════════════════════════════════════════
   ЛЕНТА, МЕНЮ И ОБВИВКА
   Тъмна лента с плавен преход, под нея редът с разделите. Цветовете идват
   от палитрата, затова смяната ѝ преоблича и лентата.
   ═══════════════════════════════════════════════════════════════════════════ */
body{background:var(--bg);color:var(--ink);font:14px/1.55 var(--sans);margin:0;
  -webkit-font-smoothing:antialiased}
*{box-sizing:border-box}
a{color:inherit;text-decoration:none}
a:hover{text-decoration:none}
:focus-visible{outline:2px solid var(--primary);outline-offset:2px;border-radius:6px}

.topbar{position:sticky;top:0;z-index:60;
  background:linear-gradient(105deg,var(--bar-a) 0%,var(--bar-b) 62%,var(--bar-c) 100%);
  color:var(--bar-text)}
.topbar::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;
  background:linear-gradient(90deg,transparent,var(--accent),var(--primary),transparent);opacity:.55}
.bar-row{height:60px;display:flex;align-items:center;padding:0 20px;gap:0}

.brand{display:flex;align-items:center;gap:11px;padding-right:16px;flex:none;color:inherit}
.mark{width:30px;height:30px;flex:none;position:relative;border-radius:var(--r-sm);
  background:linear-gradient(140deg,var(--primary) 0%,var(--accent) 100%);
  box-shadow:0 4px 12px -3px rgba(0,0,0,.4);
  transition:transform .4s var(--spring)}
.brand:hover .mark{transform:rotate(-6deg) scale(1.06)}
.mark::before,.mark::after{content:"";position:absolute;background:#fff;border-radius:1.5px}
.mark::before{left:50%;top:7px;bottom:7px;width:3px;transform:translateX(-50%)}
.mark::after{top:50%;left:7px;right:7px;height:3px;transform:translateY(-50%)}
.mark.lg{width:46px;height:46px;border-radius:12px;margin:0 auto 14px}
.mark.lg::before{top:11px;bottom:11px;width:4px}
.mark.lg::after{left:11px;right:11px;height:4px}
.brand .name{font-size:12.5px;font-weight:650;letter-spacing:.13em;text-transform:uppercase;
  white-space:nowrap;color:var(--bar-text)}
.bar-sep{width:1px;align-self:stretch;background:var(--bar-line);margin:14px 0;flex:none}

.ctx{position:relative;flex:none;min-width:0}
.ctx-btn{display:flex;align-items:center;gap:11px;height:42px;padding:0 14px;margin-left:14px;
  border-radius:12px;max-width:340px;border:1px solid transparent}
.ctx-label{min-width:0;text-align:left}
.ctx-eyebrow{display:block;font-size:9px;letter-spacing:.17em;text-transform:uppercase;
  color:var(--bar-muted);line-height:1.5}
.ctx-name{display:block;font-size:14px;font-weight:650;line-height:1.25;white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis;color:var(--bar-text)}
.dot{width:8px;height:8px;border-radius:50%;flex:none;background:var(--accent);position:relative}
.dot.live::after{content:"";position:absolute;inset:-4px;border-radius:50%;
  border:1.5px solid var(--accent);animation:halo 2.6s var(--ease) infinite}
@keyframes halo{0%{transform:scale(.6);opacity:.9}70%{transform:scale(1.5);opacity:0}100%{opacity:0}}

.spacer{flex:1}
.bar-actions{display:flex;align-items:center;gap:3px;flex:none}
.icon-btn{position:relative;width:40px;height:40px;border-radius:12px;display:grid;place-items:center;
  transition:background .22s var(--ease),transform .22s var(--spring)}
.icon-btn:hover{background:var(--bar-hi)}
.icon-btn:active{transform:scale(.93)}
.icon-btn svg{width:18px;height:18px;stroke:var(--bar-text);fill:none;stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round}

.user-wrap{position:relative}
.user-wrap>summary{list-style:none}
.user-wrap>summary::-webkit-details-marker{display:none}
.user-btn{display:flex;align-items:center;gap:10px;height:42px;padding:0 11px 0 6px;
  border-radius:var(--r-xl);margin-left:6px;border:1px solid transparent;cursor:pointer;
  transition:background .22s var(--ease),border-color .22s var(--ease)}
.user-btn:hover,.user-wrap[open] .user-btn{background:var(--bar-hi);border-color:var(--bar-line)}
.avatar{width:30px;height:30px;border-radius:50%;flex:none;display:grid;place-items:center;
  background:linear-gradient(140deg,var(--primary),var(--accent));color:#fff;font-size:11px;
  font-weight:700}
.user-meta{text-align:left;line-height:1.3}
.user-meta b{display:block;font-size:12.5px;font-weight:620;color:var(--bar-text)}
.user-meta span{display:block;font-size:9.5px;letter-spacing:.11em;text-transform:uppercase;
  color:var(--bar-muted)}
.caret{width:8px;height:8px;flex:none;border-right:1.6px solid var(--bar-muted);
  border-bottom:1.6px solid var(--bar-muted);transform:rotate(45deg) translate(-2px,-2px);
  transition:transform .3s var(--spring)}
.user-wrap[open] .caret{transform:rotate(-135deg) translate(-1px,-1px)}

.user-menu{position:absolute;z-index:80;top:calc(100% + 4px);right:0;width:268px;
  background:var(--surface);color:var(--ink);border:1px solid var(--line);border-radius:var(--r-lg);
  box-shadow:var(--shadow-2);padding:6px;transform-origin:top right;
  animation:pop .28s var(--spring) both}
@keyframes pop{from{opacity:0;transform:translateY(-10px) scale(.96)}to{opacity:1;transform:none}}
.user-menu .menu-head{padding:11px 12px 10px;border-bottom:1px solid var(--line);margin-bottom:5px}
.user-menu .menu-head b{display:block;font-size:13.5px}
.user-menu .menu-head span{display:block;font-size:11.5px;color:var(--ink-3);margin-top:2px;
  word-break:break-all}
.user-menu a{display:block;padding:9px 12px;font-size:13.5px;border-radius:var(--r-sm);
  transition:background .18s var(--ease),padding-left .18s var(--ease)}
.user-menu a:hover{background:var(--surface-2);padding-left:16px}
.user-menu .sep{height:1px;background:var(--line);margin:5px 0}
.user-menu .out{color:var(--danger)}

.nav-wrap{padding:0 20px 8px;display:flex;align-items:center;overflow-x:auto;scrollbar-width:none}
.nav-wrap::-webkit-scrollbar{display:none}
/* ── Менюто се плъзга ──
   С осем модула връзките вече не се побират на телефон и страницата излизаше
   встрани - цялата, не само лентата.

   Плъзга се на място, вместо да се пренася на два реда: втори ред отгоре яде
   екран на всяка страница. Лентата на плъзгача е скрита, защото тук тя само
   шуми. */
.nav{display:flex;gap:2px;max-width:100%;overflow-x:auto;
  scrollbar-width:none;-ms-overflow-style:none}
.nav::-webkit-scrollbar{width:0;height:0;display:none}
.nav a{position:relative;display:flex;align-items:center;height:34px;padding:0 15px;
  white-space:nowrap;font-size:13px;color:var(--bar-muted);border-radius:var(--r-sm);
  transition:color .22s var(--ease),background .22s var(--ease)}
.nav a:hover{color:var(--bar-text);background:var(--bar-hi)}

/* ── Чакащи заявки за достъп ──
   Червено кръгче с брой, до самия надпис. Стои в лентата, за да се види от
   всеки екран: иначе самозаписал се човек чака, докато някой случайно отвори
   модула.

   Цветът е свой, а не общото „опасност“: това не е грешка, а нещо, което чака
   човек. */
.nav a .nav-dot{display:inline-flex;align-items:center;justify-content:center;
  min-width:17px;height:17px;padding:0 5px;margin-left:7px;border-radius:999px;
  background:#d64545;color:#fff;font-size:10.5px;font-weight:700;
  font-family:var(--mono);line-height:1;flex:none}
.nav a.is-active{color:#fff;font-weight:650}
.nav a.is-active::after{content:"";position:absolute;left:15px;right:15px;bottom:-6px;height:2.5px;
  border-radius:2px;background:linear-gradient(90deg,var(--accent),var(--primary))}

.wrap{max-width:1180px;margin:0 auto;padding:26px 20px 90px}
.foot{max-width:1180px;margin:0 auto;padding:0 20px 34px;font-size:11.5px;color:var(--ink-3)}

/* ── Лента при гледане от чуждо име ── */
.imp-bar{position:sticky;top:0;z-index:70;display:flex;align-items:center;gap:12px;
  padding:9px 20px;background:linear-gradient(90deg,#8A5B00,#A97A12);color:#fff;font-size:13px}
.imp-dot{width:8px;height:8px;border-radius:50%;background:#FFD98A;flex:none;
  animation:halo2 2s var(--ease) infinite}
@keyframes halo2{0%,100%{opacity:1}50%{opacity:.35}}
.imp-txt{flex:1;min-width:0}
.imp-role{opacity:.8;margin-left:8px}
.imp-real{display:block;font-size:11.5px;opacity:.75;margin-top:1px}
.imp-out{flex:none;background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.3);
  border-radius:20px;padding:5px 13px;font-size:12.5px;font-weight:600;color:#fff}
.imp-out:hover{background:rgba(255,255,255,.26)}

/* ── Служителският изглед се различава на пръв поглед ── */
body.as-staff .topbar::after{opacity:.9;height:2px}

@media (max-width:760px){
  .brand .name,.user-meta{display:none}
  .bar-row{padding:0 12px}
  .nav-wrap{padding:0 12px 8px}
  .ctx-btn{margin-left:8px;max-width:170px}
  .wrap{padding:18px 14px 70px}
}

/* ═══ Компонентите се пренастройват към новия език ═══ */
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);
  padding:20px 22px;box-shadow:var(--shadow-1)}
.card+.card{margin-top:16px}
.btn{height:38px;padding:0 16px;border:1px solid var(--line);background:var(--surface);
  border-radius:var(--r-sm);font-size:13px;font-weight:550;display:inline-flex;
  align-items:center;justify-content:center;gap:7px;cursor:pointer;color:var(--ink);
  transition:transform .2s var(--spring),box-shadow .22s var(--ease),border-color .22s var(--ease)}
.btn:hover{border-color:var(--line-strong);box-shadow:0 5px 14px -6px rgba(13,42,74,.34);
  transform:translateY(-1px);text-decoration:none}
.btn:active{transform:translateY(0) scale(.98)}
.btn-primary{background:linear-gradient(135deg,var(--primary),var(--primary-2));
  border-color:transparent;color:#fff;box-shadow:0 5px 14px -5px rgba(13,42,74,.5)}
.btn-primary:hover{box-shadow:0 9px 20px -6px rgba(13,42,74,.55);border-color:transparent}
.btn-sm{height:32px;padding:0 12px;font-size:12.5px}
.btn-ghost{background:var(--surface)}
.btn:disabled{opacity:.5;cursor:default;transform:none;box-shadow:none}
.btn-danger{background:var(--danger);border-color:transparent;color:#fff}
.btn-danger:hover{background:#A93A32;border-color:transparent}

input,select,textarea{width:100%;font:inherit;font-size:13.5px;color:var(--ink);
  background:var(--surface-2);border:1.5px solid var(--line);border-radius:var(--r-sm);
  padding:9px 12px;transition:border-color .22s var(--ease),box-shadow .22s var(--ease),
  background .22s var(--ease)}
input:focus,select:focus,textarea:focus{outline:none;background:#fff;border-color:var(--primary);
  box-shadow:0 0 0 4px var(--primary-tint)}
input:disabled{opacity:.65}
label{display:block;font-size:12.5px;font-weight:600;color:var(--ink-2);margin:16px 0 6px}

.badge{display:inline-block;padding:3px 10px;border-radius:20px;font-size:11px;font-weight:650}
.badge-green{background:var(--ok-tint);color:var(--ok)}
.badge-teal{background:var(--teal-tint);color:var(--teal)}
.badge-amber{background:var(--warn-tint);color:var(--warn)}
.badge-red{background:var(--danger-tint);color:var(--danger)}
.badge-gray{background:#EEF2F6;color:#6D8299}

table.stack th{font-size:9.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--ink-3);
  font-weight:600;text-align:left;padding:10px 12px;border-bottom:1px solid var(--line)}
table.stack td{padding:12px;border-bottom:1px solid var(--line);vertical-align:top;font-size:13.5px}
table.stack tbody tr:last-child td{border-bottom:0}
tr.group-row td{background:var(--surface-2);font-size:9.5px;letter-spacing:.15em;
  text-transform:uppercase;color:var(--ink-3);font-weight:600;padding:8px 12px}

/* ── Лого на организацията ─────────────────────────────────────────────── */
.mark.has-logo{background:none;box-shadow:none;overflow:hidden;display:grid;place-items:center}
.mark.has-logo::before,.mark.has-logo::after{display:none}
.mark.has-logo img{width:100%;height:100%;object-fit:contain;display:block}
.mark.lg.has-logo img{object-fit:contain}

.logo-box{display:flex;gap:20px;align-items:flex-start;flex-wrap:wrap}
.logo-preview{flex:none;width:120px;height:120px;display:grid;place-items:center;
  border:1px dashed var(--line-strong);border-radius:var(--r);background:var(--surface-2);
  padding:12px}
.logo-preview img{max-width:100%;max-height:100%;object-fit:contain}
.logo-side{flex:1;min-width:240px}

/* ── Лого на организацията ─────────────────────────────────────────────── */
.logo-box{display:flex;gap:20px;align-items:flex-start;flex-wrap:wrap}
.logo-preview{width:96px;height:96px;flex:none;display:grid;place-items:center;
  border:1px dashed var(--line-strong);border-radius:var(--r);background:var(--surface-2);
  padding:10px}
.logo-preview.has{border-style:solid;background:var(--surface)}
.logo-preview img{max-width:100%;max-height:100%;object-fit:contain}
.logo-actions{flex:1;min-width:260px}
.logo-actions form{margin:0}

/* Качено лого заменя буквеното квадратче, без да чупи подредбата. */
.mark.has-logo{background:none!important;box-shadow:none;display:grid;place-items:center;
  overflow:hidden;padding:0}
.mark.has-logo::before,.mark.has-logo::after{display:none}
.mark.has-logo img{width:100%;height:100%;object-fit:contain}
.mark.lg.has-logo{background:none!important}

/* ── Бърз избор на аптека в лентата ────────────────────────────────────── */
/* ── Часовникът в лентата ──
   Тук стоеше изборът на аптека. Той се сменя рядко, а лентата се гледа
   постоянно - и всяко случайно натискане прехвърляше човека в друг обект. */
.ctx-btn.clock{cursor:default}
.ctx-btn.clock .ctx-name{font-variant-numeric:tabular-nums;letter-spacing:.02em}

/* ── Знакът, че системата е жива ──
   Точка с разширяващ се пръстен. Спре ли скриптът, спират и секундите - по-
   честен знак от статична иконка „онлайн“. */
.pulse{position:relative;width:8px;height:8px;flex:none;display:block}
.pulse > i{position:absolute;inset:0;border-radius:50%;background:var(--ok,#3ddc97)}
.pulse::after{content:"";position:absolute;inset:0;border-radius:50%;
  background:var(--ok,#3ddc97);opacity:.55;animation:pulseRing 2s ease-out infinite}
@keyframes pulseRing{
  0%{transform:scale(1);opacity:.55}
  70%{transform:scale(2.6);opacity:0}
  100%{transform:scale(2.6);opacity:0}
}
@media (prefers-reduced-motion: reduce){ .pulse::after{animation:none;opacity:.25} }
body.no-motion .pulse::after{animation:none;opacity:.25}

.doc-sheet{background:#fff;padding:32px 40px;max-width:820px;margin:0 auto;line-height:1.65}
.doc-head{margin-bottom:22px;font-size:13.5px}
.doc-section{font-size:14px;font-weight:700;letter-spacing:.05em;text-align:center;
  margin:26px 0 14px;text-transform:uppercase}
.doc-section span{font-weight:600;letter-spacing:0}
.doc-article{margin:14px 0}
.doc-article h3{font-size:13.5px;font-weight:700;margin:0 0 5px}
.doc-body{font-size:13.5px}
.doc-point{margin:6px 0 6px 18px;font-size:13.5px}
.doc-num{font-weight:700;margin-right:5px}
.doc-text{margin:10px 0;font-size:13.5px}
.doc-foot{margin-top:34px;font-size:13.5px}
.ctr-blank{color:var(--danger);letter-spacing:2px}
.ctr-unknown{background:var(--danger-tint);color:var(--danger);padding:1px 5px;border-radius:4px;
  font-family:var(--mono);font-size:12px}

/* ═══════════════════════════════════════════════════════════════════════════
   КОНСТРУКТОР НА ДОГОВОРИ
   Всичко на една страница: сгъваеми секции, редакция под самия елемент.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Сгъваеми секции ── */
.fold-box{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);
  box-shadow:var(--shadow-1);overflow:hidden}
.fold-head{display:flex;align-items:center;gap:11px;padding:15px 20px;cursor:pointer;
  list-style:none;user-select:none;transition:background .18s var(--ease)}
.fold-head::-webkit-details-marker{display:none}
.fold-head:hover{background:var(--surface-2)}
.fold-ic{flex:none;width:30px;height:30px;border-radius:var(--r-sm);display:grid;place-items:center;
  background:var(--primary-tint);color:var(--primary)}
.fold-ttl{flex:1;font-size:15px;font-weight:650}
.fold-note{font-size:12px;color:var(--ink-3)}
.fold-head::after{content:"";width:8px;height:8px;flex:none;margin-left:4px;
  border-right:1.8px solid var(--ink-3);border-bottom:1.8px solid var(--ink-3);
  transform:rotate(45deg) translate(-2px,-2px);transition:transform .28s var(--spring)}
.fold-box[open] .fold-head::after{transform:rotate(-135deg) translate(-1px,-1px)}
.fold-box[open] .fold-head{border-bottom:1px solid var(--line)}
.fold-body{padding:20px}

.build-bar{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-bottom:16px;
  padding-bottom:14px;border-bottom:1px solid var(--line)}
.build-empty{padding:28px;text-align:center;color:var(--ink-3);font-size:13.5px;
  border:1px dashed var(--line-strong);border-radius:var(--r-sm)}

/* ── Елементите ── */
.bx{margin:8px 0}
.bx-kids{margin-left:22px;padding-left:14px;border-left:2px solid var(--line);min-height:4px}
.bx-row{display:flex;align-items:center;gap:10px;padding:10px 13px;background:var(--surface);
  border:1px solid var(--line);border-radius:var(--r-sm);
  transition:border-color .16s var(--ease),box-shadow .16s var(--ease)}
.bx-row:hover{border-color:var(--line-strong);box-shadow:var(--shadow-1)}
.bx-section>.bx-row{background:var(--primary-tint);border-color:transparent}
.bx-article>.bx-row{border-left:3px solid var(--teal)}
.bx-point>.bx-row{border-left:3px solid var(--warn);background:var(--surface-2)}

.bx-grip{cursor:grab;color:var(--ink-3);font-size:13px;letter-spacing:-2px;user-select:none;flex:none}
.bx-grip:active{cursor:grabbing}
.bx-num{flex:none;font-weight:700;font-size:12.5px;font-variant-numeric:tabular-nums;
  color:var(--ink-2);min-width:62px}
.bx-section>.bx-row .bx-num{color:var(--primary)}
.bx-point>.bx-row .bx-num{min-width:34px;color:var(--warn)}
.bx-title{flex:1;min-width:0;font-size:13.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bx-title.is-empty{color:var(--ink-3);font-style:italic}
.bx-cond{flex:none;font-size:11px;padding:3px 9px;border-radius:20px;
  background:var(--warn-tint);color:var(--warn);font-weight:600;white-space:nowrap}

.bx-acts{display:flex;gap:4px;flex:none}
.bx-b{border:1px solid var(--line);background:var(--surface);border-radius:6px;
  padding:4px 10px;font-size:12px;color:var(--ink-2);cursor:pointer;
  transition:border-color .15s var(--ease),color .15s var(--ease),background .15s var(--ease)}
.bx-b:hover{border-color:var(--primary);color:var(--primary);background:var(--primary-tint)}
.bx-b-add{color:var(--teal);border-color:var(--teal-tint);background:var(--teal-tint);font-weight:600}
.bx-b-add:hover{border-color:var(--teal);color:var(--teal);background:var(--teal-tint)}
.bx-b-del{color:var(--ink-3);padding:4px 9px}
.bx-b-del:hover{border-color:var(--danger);color:var(--danger);background:var(--danger-tint)}

.bx.is-drag>.bx-row{opacity:.35}
.bx.drop-before>.bx-row{box-shadow:0 -3px 0 var(--primary)}
.bx.drop-in>.bx-row{border-color:var(--primary);box-shadow:0 0 0 2px var(--primary-tint)}

.bx-edit{margin:8px 0 10px 22px;padding:16px 18px;background:var(--surface-2);
  border:1px solid var(--line);border-radius:var(--r-sm);
  animation:slideDown .24s var(--ease) both}
@keyframes slideDown{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
.bx-edit label:first-child{margin-top:0}
.save-note{font-size:12.5px;color:var(--ok);align-self:center}

.bx-toast{position:fixed;right:20px;bottom:20px;z-index:200;background:var(--ink);color:#fff;
  padding:10px 16px;border-radius:var(--r-sm);font-size:13px;box-shadow:var(--shadow-2);
  animation:pop .25s var(--spring) both}
.bx-toast.is-bad{background:var(--danger)}

/* ── Променливи ── */
.var-group{margin-top:14px}
.var-group-head{font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);
  font-weight:700;margin-bottom:7px}
.var-list{display:flex;flex-wrap:wrap;gap:5px}
.var-chip{background:var(--surface);border:1px solid var(--line);border-radius:20px;
  padding:5px 11px;font-size:12px;color:var(--ink-2);cursor:pointer;
  transition:border-color .15s var(--ease),background .15s var(--ease)}
.var-chip:hover{border-color:var(--primary);background:var(--primary-tint);color:var(--primary)}
.var-chip.is-req{border-color:var(--line-strong);font-weight:600;color:var(--ink)}

/* ── Редакторът ── */
.q-wrap{border:1.5px solid var(--line);border-radius:var(--r-sm);overflow:hidden;background:#fff}
.q-wrap .ql-toolbar{border:0;border-bottom:1px solid var(--line);background:var(--surface-2)}
.q-wrap .ql-container{border:0;font-family:var(--sans);font-size:14px;min-height:110px}
.q-wrap .ql-editor{min-height:110px}
.q-wrap .ql-editor.ql-blank::before{color:var(--ink-3);font-style:normal}

/* ═══════════════════════════════════════════════════════════════════════════
   ЛЕНТА С РАЗДЕЛИ В „СЛУЖИТЕЛИ“
   Стои на всяка страница от тази част, за да се вижда къде се намираш.
   ═══════════════════════════════════════════════════════════════════════════ */
.hrnav{display:flex;align-items:center;gap:8px;margin:0 0 20px;padding-bottom:2px;
  border-bottom:1px solid var(--line)}
.hrnav-main{display:flex;gap:2px;flex:1;min-width:0;overflow-x:auto;scrollbar-width:none}
.hrnav-main::-webkit-scrollbar{display:none}
.hrnav a{position:relative;display:flex;align-items:center;gap:7px;padding:11px 14px;
  white-space:nowrap;font-size:13.5px;color:var(--ink-3);border-radius:var(--r-sm) var(--r-sm) 0 0;
  transition:color .18s var(--ease),background .18s var(--ease)}
.hrnav a:hover{color:var(--ink);background:var(--surface-2);text-decoration:none}
.hrnav a.on{color:var(--primary);font-weight:650}
.hrnav a.on::after{content:"";position:absolute;left:10px;right:10px;bottom:-1px;height:2.5px;
  border-radius:2px;background:var(--primary)}
.hrnav-badge{min-width:18px;height:18px;padding:0 5px;border-radius:20px;background:#EEF2F6;
  color:#6D8299;font-size:10.5px;font-weight:700;line-height:18px;text-align:center}
.hrnav-badge.is-alert{background:var(--danger);color:#fff}

.hrnav-more{position:relative;flex:none}
.hrnav-more>summary{list-style:none;cursor:pointer;padding:11px 14px;font-size:13.5px;
  color:var(--ink-3);display:flex;align-items:center;gap:7px}
.hrnav-more>summary::-webkit-details-marker{display:none}
.hrnav-more>summary::after{content:"";width:7px;height:7px;border-right:1.6px solid currentColor;
  border-bottom:1.6px solid currentColor;transform:rotate(45deg) translate(-2px,-2px)}
.hrnav-more>summary:hover{color:var(--ink)}
.hrnav-more[open]>summary{color:var(--primary)}
.hrnav-menu{position:absolute;z-index:50;top:100%;right:0;min-width:200px;background:var(--surface);
  border:1px solid var(--line);border-radius:var(--r-sm);box-shadow:var(--shadow-2);padding:5px;
  animation:pop .22s var(--spring) both}
.hrnav-menu a{border-radius:6px;padding:9px 12px}
.hrnav-menu a.on{background:var(--primary-tint)}
.hrnav-menu a.on::after{display:none}
@media (max-width:620px){.hrnav a{padding:10px 11px;font-size:13px}}

/* ── Стойност само за четене ────────────────────────────────────────────────
   Показва се вместо заключено поле. Заключеното поле изглежда като поле -
   човек цъка в него и решава, че системата е счупена. */
.ro{font-size:14px;color:var(--ink);padding:9px 0;line-height:1.5;
  min-height:38px;display:flex;align-items:center}
.ro-empty{color:var(--ink-3)}
.ro-yes{color:var(--ok);font-weight:600}
.ro-no{color:var(--ink-2)}
.kv .ro,td .ro{padding:0;min-height:0}

/* ── Заключено поле изглежда като текст ─────────────────────────────────────
   Едно правило вместо пренаписване на всеки екран: полето, което не може да се
   мени, губи рамката и фона си и се чете като стойност.

   Правилото важи и за бъдещите екрани - там, където някой забрави да отдели
   изгледа за четене, поведението пак ще е вярно.

   Изключение: полета в изскачащ прозорец за потвърждение, където заключената
   стойност е нарочно показана като поле (напр. „обявена сума“) - те носят клас
   „keep-box“. */
input[readonly]:not(.keep-box),
textarea[readonly]:not(.keep-box),
select[disabled]:not(.keep-box){
  border-color:transparent;
  background:transparent;
  padding-left:0;
  padding-right:0;
  color:var(--ink);
  cursor:default;
  box-shadow:none;
  -webkit-appearance:none;
  appearance:none;
}
input[readonly]:not(.keep-box):focus,
textarea[readonly]:not(.keep-box):focus,
select[disabled]:not(.keep-box):focus{
  outline:none;
  border-color:transparent;
  box-shadow:none;
}
/* Календарчето на заключена дата няма какво да прави. */
input[readonly]:not(.keep-box)::-webkit-calendar-picker-indicator{display:none}

/* Отметка, която не може да се мени: показва се, но не подканя. */
input[type="checkbox"][disabled],
input[type="radio"][disabled]{opacity:.55;cursor:default}

/* ── Широки таблици на среден екран ─────────────────────────────────────────
   Под 760 пиксела таблиците минават на редове. Между 760 и 1100 обаче те
   остават таблици, а колоните са повече, отколкото се побират - и цялата
   страница тръгва настрани.

   Плъзгането е ВЪТРЕ в картата, а не на страницата: така лентата, менюто и
   останалите карти си остават на място, а се движи само таблицата. */
/* Долната граница е 561: под нея таблиците стават списъци и плъзгане не им
   трябва. Между 561 и 1180 те си остават таблици с повече колони, отколкото
   се побират - там плъзгането е нужно.

   Първоначално бях сложил 761 по грешка: редовият изглед започва от 560, не
   от 760, и оставаше цяла пролука от двеста пиксела. */
@media (min-width:561px) and (max-width:1180px){
  /* Обхваща и таблици, вложени във формуляр - не само преките деца на картата. */
  .card table:not(.no-scroll){
    display:block;
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
  }
  /* Клетките не бива да се свиват до нечетимост при плъзгане. */
  .card table th, .card table td{ white-space:nowrap }
  .card table td .muted{ white-space:normal }
}


/* ── Подлента и разделител на тесен екран ───────────────────────────────────
   Подлентата с раздели се плъзга настрани вместо да разпъва картата: при пет
   раздела и тесен екран те не се побират, а картата не бива да расте заради
   тях.

   Разделителят получава същата ширина като съдържанието - иначе излиза извън
   картата и я разпъва с няколко пиксела. */
.subnav{ max-width:100%; overflow-x:auto; -webkit-overflow-scrolling:touch;
  scrollbar-width:thin }
.subnav::-webkit-scrollbar{ height:3px }
.subnav::-webkit-scrollbar-thumb{ background:var(--line-strong); border-radius:3px }

/* ── Чертата в картата ──
   „.rule“ нарочно излиза с 24px извън подложката от двете страни, за да мине
   от ръб до ръб на картата. Ограничението „max-width:100%“ я режеше отдясно,
   но не и отляво: тя тръгваше от -24px и свършваше 24px преди десния ръб.

   Отвън изглеждаше като разместена черта - най-видимият дребен дефект в целия
   изглед, защото се повтаря във всяка карта. */
/* ── Връзките не се влачат ──
   Хване ли се връзка и се пусне встрани, браузърът тръгва да я влачи като
   адрес и оставя страницата в непълно състояние. Тук нищо не се постига с
   влачене на връзка, затова то се спира още от стила - скриптът го подсигурява.

   Нарочно влачимото носи „draggable“ и остава недокоснато. */
a:not([draggable="true"]), button, .btn, .chip, .rtag{
  -webkit-user-drag:none; user-drag:none;
}

.card .rule, .record .rule{ max-width:none }

/* ═══ ЛОГОТО НА ВЕРИГАТА ═══
   Стои преди името на системата, на мястото на буквеното квадратче.

   Ограничава се ВИСОЧИНАТА, а ширината се нагажда: обратното реже високите
   лога. „object-fit: contain“ пази пропорцията - разтеглено лого изглежда
   като грешка на системата, не на файла. */
.brand-logo{
  display:flex; align-items:center; flex:none;
  height:34px; max-width:150px;
}
.brand-logo img{
  max-height:30px; max-width:100%; width:auto; height:auto;
  object-fit:contain; display:block;
  transition:transform .18s ease, filter .18s ease;
}
/* Движението е на самата връзка „brand“, а не на знака: така реагира целият
   блок с името, както преди. */
.brand.has-brand:hover .brand-logo img{ transform:scale(1.05); filter:brightness(1.1) }
.brand.has-brand:active .brand-logo img{ transform:scale(.98) }

/* Тесен екран: името отстъпва, знакът остава - той е по-разпознаваем. */
@media (max-width:640px){ .brand-logo{ max-width:110px } }

@media (prefers-reduced-motion: reduce){
  .brand-logo img{ transition:none }
  .brand.has-brand:hover .brand-logo img{ transform:none }
}
body.no-motion .brand-logo img{ transition:none }
body.no-motion .brand.has-brand:hover .brand-logo img{ transform:none }


/* ── Клетките на решетката трябва да могат да се свиват ─────────────────────
   Клетка в grid по подразбиране не става по-тясна от съдържанието си. Широка
   таблица или дълга лента с раздели разпъва цялата колона, а с нея и
   страницата - плъзгането излиза върху целия екран вместо върху таблицата.

   `min-width:0` казва на клетката, че може да е по-тясна; тогава плъзгането
   остава там, където му е мястото. */
.settings-layout > *,
.settings-body{ min-width:0 }


/* ── Редови изглед: нищо не бива да държи ширина ────────────────────────────
   Под 560 таблиците стават списъци. Отделни екрани обаче задават по колонките
   си `white-space:nowrap`, за да не се пренасят числата - а в списък точно
   това ги държи широки и разпъва страницата.

   Тук се отменя, защото в списъчния вид всеки ред е отделен и има място. */
@media (max-width:560px){
  table.stack, table.stack td, table.stack th,
  table.stack tbody, table.stack tfoot, table.stack tr{
    white-space:normal;
    display:revert;
  }
  table.stack{ display:block; width:100% }
  table.stack tbody, table.stack tfoot{ display:block }
  table.stack thead{ display:none }
  table.stack tr{ display:block; border-top:1px solid var(--line); padding:12px 0 }
  table.stack td, table.stack th{
    display:flex; justify-content:space-between; gap:14px;
    border:none; padding:4px 0; text-align:right; word-break:break-word;
  }
  table.stack td::before, table.stack tfoot th:first-child::before{
    content:attr(data-label); color:var(--ink-3);
    font-size:11px; text-transform:uppercase; letter-spacing:.08em;
    text-align:left; flex:none;
  }
  /* Плъзгането по-горе не важи тук - има си редови изглед. */
  .card table:not(.no-scroll){ overflow-x:visible }
}


/* ── Менюто на тесен екран ──────────────────────────────────────────────────
   При шест раздела и телефон връзките не се побират и разпъват цялата
   страница - плъзгането излиза върху всичко.

   Менюто се плъзга само, вътре в лентата. Лентата за плъзгане е скрита:
   на телефон се плъзга с пръст, а тънка черта под менюто изглежда като
   грешка. */
@media (max-width:760px){
  .nav{
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
    max-width:100%;
  }
  .nav::-webkit-scrollbar{ display:none }
  .nav a{ padding:0 12px; flex:none }
}


/* ── Горната лента на телефон ───────────────────────────────────────────────
   Дясната част (окото, тъмното, профилът) не се свива и избутва лентата с
   няколко пиксела. Нищо не бива да излиза извън екрана заради това. */
/* ── Дясната част на лентата на телефон ──
   Името и длъжността не се свиват и избутват лентата извън екрана. На тесен
   екран остава само кръгчето с инициалите - името се вижда в самото меню,
   което така или иначе се отваря с едно докосване. */
@media (max-width:520px){
  .bar-actions{ gap:0; flex:none; min-width:0 }
  .user-btn{ padding:0 4px; gap:4px }
  .user-btn .user-meta,
  .user-btn .caret{ display:none }
  .topbar, .bar-inner{ max-width:100vw }
}

/* ── Най-тесните телефони ──
   Окото, тъмното и профилът заемат общо сто и трийсет пиксела при 375 - с
   лентата и превключвателя това е повече от екрана. Кръгчетата се смаляват;
   докосването остава удобно, защото не са едно до друго. */
@media (max-width:400px){
  .bar-row{ padding:0 10px }
  .icon-btn{ width:32px; height:32px }
  .theme-btn{ width:30px; height:30px }
  .avatar{ width:28px; height:28px; font-size:11px }
  .user-btn{ height:36px; padding:0 2px }
  .ctx-btn{ margin-left:6px; padding:0 8px; max-width:150px }
  /* Името на аптеката се реже вместо да разпъва лентата. */
  .ctx-name{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
}

/* При съвсем малки екрани отпада и надписът „АПТЕКА“ над името. */
@media (max-width:370px){
  .bar-row{ padding:0 8px }
  .ctx-btn{ margin-left:2px; padding:0 6px; max-width:120px }
  .ctx-label{ display:none }
  .bar-sep{ display:none }
}




/* ── Групи бутони на телефон ────────────────────────────────────────────────
   Четири бутона за период не се побират в 390 пиксела. Пренасят се на нов ред
   вместо да разпъват страницата. */
@media (max-width:560px){
  .btn-group{ flex-wrap:wrap }
  /* ── Клетките на реда се свиват ──
     Част от екраните задават `flex:0 0 auto` направо в разметката, за да не
     се разтягат бутоните на широк екран. На телефон обаче точно това ги
     държи по-широки от екрана, затова тук се отменя изрично. */
  .row > div{ min-width:0 !important; flex-shrink:1 !important; flex-basis:auto !important }
  /* Бутонът не бива да е по-широк от мястото си. */
  .btn-group .btn{ max-width:100% }
  /* Редът също се пренася на телефон. */
  .row{ flex-wrap:wrap }
}


/* ── Логото на много тесен екран ────────────────────────────────────────────
   При 360 пиксела името на веригата не оставя място за нищо друго. Остава
   само знакът - името се вижда в заглавието на страницата и в подсказката. */
@media (max-width:400px){
  .brand{ min-width:0; overflow:hidden }
  .brand .name{ display:none }
  .bar-row{ gap:6px; min-width:0 }
}


/* ── Дясната част на лентата ────────────────────────────────────────────────
   Името и длъжността не се свиват и при дълго име избутват лентата извън
   екрана. Дават им се граници: под 1100 пиксела текстът се реже, под 520
   остава само кръгчето с инициалите - името се вижда в самото меню, което се
   отваря с едно докосване. */
@media (max-width:1100px){
  /* Лентата трябва да МОЖЕ да се свие, иначе избутва страницата встрани.
     „min-width:0“ на самата лента го позволява; без него нейният ред пази
     естествената си ширина и излиза извън екрана. */
  .bar-row{ min-width:0 }
  .bar-brand{ min-width:0; overflow:hidden }
  .bar-actions{ min-width:0; flex-shrink:1 }
  /* Обвивката на менюто също: без „min-width:0“ тя пази естествената си
     ширина и избутва лентата, колкото и да се реже текстът вътре. */
  .user-wrap{ min-width:0; flex-shrink:1 }
  .user-btn{ min-width:0 }
  .user-meta{ min-width:0; overflow:hidden }
  .user-meta b, .user-meta span{
    display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
    max-width:min(150px, 18vw);
  }
}
@media (max-width:520px){
  .user-btn .user-meta, .user-btn .caret{ display:none }
  .user-btn{ padding:0 4px }
}


/* ── Ленти с раздели без лента за плъзгане ─────────────────────────────────
   Разделите се плъзгат при нужда, но самата лента за плъзгане не бива да се
   вижда: в горния десен ъгъл излизат две стрелки, които приличат на бутон и
   човек ги натиска.

   Плъзга се с пръст или колело - стрелките не помагат на никого. */
.subnav, .lv-nav, .ph-nav, .hrnav, .nav{
  scrollbar-width:none;
  -ms-overflow-style:none;
}
.subnav::-webkit-scrollbar,
.lv-nav::-webkit-scrollbar,
.ph-nav::-webkit-scrollbar,
.hrnav::-webkit-scrollbar,
.nav::-webkit-scrollbar{ width:0; height:0; display:none }

/* ── Едно право на екрана ──
   Пише се на пет места; изглежда еднакво навсякъде. Вж. „perm_label_html“. */
.perm-l{cursor:help}
.perm-site{display:inline-block;font-size:9.5px;text-transform:uppercase;
  letter-spacing:.04em;padding:2px 7px;border-radius:999px;vertical-align:middle;
  background:var(--surface-2);color:var(--ink-3);white-space:nowrap;margin-left:6px}