/* Токените и шрифтовете живеят в theme.css, зареден преди този файл. Тук са компонентите. */

* {
  box-sizing: border-box;
}

html,
body {
  min-height: 100%;
}

html {
  /* Основата на дизайн B. В листа няма rem-ове, така че това число мести само Bootstrap —
     модалният прозорец и бутоните в него — и ги сваля до плътността на останалото. */
  font-size: 13px;
}

body {
  margin: 0;
  color: var(--sr-text);
  background: var(--sr-bg);
  font-family: var(--sr-font);
  font-size: 13px;
  line-height: 1.45;
}

a {
  color: var(--sr-link);
}

a:hover {
  color: var(--sr-link-hover);
}

.sr-app {
  min-height: 100vh;
}

/* ---- Лентата отляво ----------------------------------------------------------------- */

.sr-sidebar {
  position: fixed;
  inset: 0 auto 0 0;
  width: var(--sr-sidebar-width);
  background: var(--sr-sidebar);
  color: var(--sr-sidebar-text);
  display: flex;
  flex-direction: column;
  z-index: 5;
  /* Лентата е закачена за екрана, значи не се превърта със страницата: при нисък прозорец
     (лаптоп на 1366×768) последните точки от менюто и „Изход" оставаха НЕДОСТИЖИМИ — нищо
     не ги показваше и нищо не ги скролваше. Расте с всяка нова точка в менюто; „Планиране"
     я преля. Хванато от смоук теста за вход/изход, 30.08. */
  overflow-y: auto;
}

.sr-brand {
  display: flex;
  align-items: center;
  gap: 9px;
  height: var(--sr-topbar-height);
  flex: 0 0 var(--sr-topbar-height);
  padding: 0 14px;
  border-bottom: 1px solid var(--sr-sidebar-border);
}

.sr-brand-mark {
  width: 22px;
  height: 22px;
  flex: 0 0 22px;
  border-radius: var(--sr-radius);
  background: var(--sr-orange-ink);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 700;
}

.sr-logo {
  color: var(--sr-sidebar-text-strong);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
}

.sr-nav {
  display: flex;
  flex-direction: column;
  padding: 8px 0;
}

/* Заглавието на групата („Работа", „Данни", „Управление") — не е връзка и не се посочва. */
.sr-nav-group {
  padding: 8px 14px 5px;
  color: var(--sr-sidebar-text-weak);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.sr-nav-group + .sr-nav-group,
.sr-nav-link + .sr-nav-group {
  padding-top: 14px;
}

.sr-nav-link {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: var(--sr-sidebar-row);
  padding: 0 14px;
  color: var(--sr-sidebar-text);
  text-decoration: none;
  font-weight: 500;
}

.sr-nav-link:hover,
.sr-nav-link:focus {
  color: var(--sr-sidebar-text-strong);
  background: #1d2229;
}

.sr-nav-link.active {
  color: var(--sr-sidebar-text-strong);
  font-weight: 600;
  background: var(--sr-sidebar-active);
  /* Оранжевата резка отляво носи „ти си тук" сама — цветът на текста повтаря, не замества:
     при нисък контраст на чужд монитор една от двете винаги остава видима. */
  box-shadow: inset 2px 0 0 var(--sr-orange);
}

.sr-nav-link.active .sr-nav-icon {
  color: var(--sr-orange);
}

/* Иконите в лентата са линейни, не запълнени: на 16px запълнената икона се слива в петно.
   Общите щрихови настройки стоят тук, за да не се повтарят по петнайсет пъти в разметката —
   всеки <svg class="sr-nav-icon"> носи само пътищата си. */
.sr-nav-icon {
  width: 16px;
  height: 16px;
  flex: 0 0 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.sr-nav-link > span:not(.sr-nav-count) {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Броят на задачите по обхвата на потребителя. Мълчи, когато е нула — нула чакащи задачи
   не е новина, а празният ред пази лентата спокойна. */
.sr-nav-count {
  margin-left: auto;
  padding-left: 6px;
  color: var(--sr-sidebar-text-weak);
  font-size: 11px;
}

.sr-nav-link.active .sr-nav-count {
  color: var(--sr-orange);
}

/* ---- Потребителят, долу в лентата --------------------------------------------------- */

.sr-user-panel {
  margin-top: auto;
  padding: 0 0 10px;
  border-top: 1px solid var(--sr-sidebar-border);
}

.sr-user-row {
  display: flex;
  align-items: center;
  gap: 9px;
  height: 44px;
  padding: 0 14px;
}

.sr-user-avatar {
  width: 24px;
  height: 24px;
  flex: 0 0 24px;
  border-radius: var(--sr-radius);
  background: var(--sr-sidebar-avatar);
  color: var(--sr-sidebar-text-strong);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: 600;
}

.sr-user-name {
  min-width: 0;
  color: #c3cbd4;
  font-size: 12px;
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Името е входът към личната страница „Аз" — единственото място, откъдето човек стига до
   собствените си настройки. Подчертава се при посочване, за да личи, че е връзка. */
.sr-user-name-link {
  text-decoration: none;
}

.sr-user-name-link:hover,
.sr-user-name-link:focus-visible {
  color: #fff;
  text-decoration: underline;
}

.sr-me-channel + .sr-me-channel {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid #e6e6e6;
}

.sr-admin-hint {
  display: block;
  color: #666;
  font-size: 12px;
  margin-top: 2px;
}

/* Имейлът, ролята, складът и печатът на билда: дребни, но не скрити. Имейлът е и единственият
   начин да се види КОЙ е влязъл, когато две имена си приличат. */
.sr-user-email,
.sr-user-meta {
  padding: 0 14px;
  color: var(--sr-sidebar-text);
  font-size: 11px;
  line-height: 1.5;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sr-build-stamp {
  color: var(--sr-sidebar-text-weak);
}

.sr-language-form {
  padding: 8px 14px 0;
}

.sr-language-form label {
  display: block;
  margin: 0;
}

.sr-language-form span {
  display: none;
}

.sr-language-form select {
  width: 100%;
  height: 26px;
  border: 1px solid #343b44;
  border-radius: var(--sr-radius);
  background: #1f242b;
  color: var(--sr-sidebar-text-strong);
  padding: 0 6px;
  font-family: inherit;
  font-size: 11px;
}

/* Формата е flex-детето на реда, значи изтласкването надясно е нейно, не на бутона в нея. */
.sr-user-row form {
  margin-left: auto;
  display: flex;
}

.sr-logout-button {
  width: 20px;
  height: 20px;
  flex: 0 0 20px;
  border: 0;
  padding: 0;
  color: var(--sr-sidebar-text);
  background: transparent;
  cursor: pointer;
}

.sr-logout-button:hover,
.sr-logout-button:focus-visible {
  color: var(--sr-orange);
}

.sr-logout-button svg {
  width: 20px;
  height: 20px;
  display: block;
}

/* ---- Работната площ ----------------------------------------------------------------- */

.sr-main {
  min-height: 100vh;
  margin-left: var(--sr-sidebar-width);
}

/* Горният ред казва къде си, дава търсачката и носи главното действие вдясно. Лепне за
   горния край: при дълъг списък заглавието и „Нова задача" не бива да отплуват нагоре. */
.sr-topbar {
  position: sticky;
  top: 0;
  z-index: 4;
  height: var(--sr-topbar-height);
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 0 16px;
  background: var(--sr-panel);
  border-bottom: 1px solid var(--sr-border);
}

.sr-topbar-title {
  margin: 0;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.2;
  white-space: nowrap;
}

.sr-topbar-count {
  color: var(--sr-text-secondary);
  font-size: 12px;
}

/* Всичко, което страницата слага вдясно (бутони за действие), се притиска надясно оттук —
   страницата не описва позиция, само съдържание. */
/* Пренасят се: на телефон „Създай липсващи акаунти" и „Добави нов потребител" искат 380
   точки в екран от 305 и вторият излизаше извън него. */
.sr-topbar-actions {
  margin-left: auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.sr-content {
  padding: 12px 16px 24px;
}

/* Списък без странична преса: горният ред, редът с чиповете и таблицата се допират и
   заемат цялата ширина. Страницата, която е списък, слага .sr-list на <main>. */
.sr-list {
  padding: 0;
}

/* ---- Търсачката в горния ред -------------------------------------------------------- */

.sr-topbar-search {
  position: relative;
  flex: 1;
  max-width: 420px;
  display: flex;
}

.sr-topbar-search .sr-input {
  width: 100%;
  padding-left: 29px;
  background: var(--sr-panel-alt);
}

.sr-topbar-search svg {
  position: absolute;
  left: 9px;
  top: 50%;
  transform: translateY(-50%);
  width: 15px;
  height: 15px;
  fill: none;
  stroke: var(--sr-text-weak);
  stroke-width: 2;
  stroke-linecap: round;
  pointer-events: none;
}

/* ---- Редът с филтрите --------------------------------------------------------------- */

/* Включеният филтър е чип: вижда се какво е стеснено и се маха с един клик. Стойностите
   пътуват през query string, както винаги — чипът е представяне, не нов механизъм. */
.sr-filterbar {
  position: sticky;
  top: var(--sr-topbar-height);
  z-index: 3;
  min-height: var(--sr-filterbar-height);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  padding: 6px 16px;
  background: var(--sr-panel);
  border-bottom: 1px solid var(--sr-border);
}

.sr-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 26px;
  padding: 0 9px;
  border: 0;
  border-radius: 13px;
  background: var(--sr-chip-bg);
  color: var(--sr-text);
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
}

/* Типът носи оранжевото: това е филтърът, който се сменя най-често, и той трябва да се
   намира на екрана без да се чете. */
.sr-chip.type {
  background: var(--sr-orange-tint);
  color: var(--sr-orange-dark);
}

.sr-chip-remove {
  display: inline-flex;
  align-items: center;
  color: inherit;
  opacity: 0.65;
  text-decoration: none;
}

.sr-chip-remove:hover,
.sr-chip-remove:focus-visible {
  color: inherit;
  opacity: 1;
}

.sr-chip-remove svg {
  width: 12px;
  height: 12px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.6;
  stroke-linecap: round;
}

/* „+ Филтър" е <summary> на <details> — отваря избора без нито ред JavaScript, значи
   работи и когато скриптът закъснее (виж какво струваше това на SR-95.3). */
.sr-filter-menu {
  position: relative;
}

.sr-chip-add {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 26px;
  padding: 0 9px;
  border: 1px dashed #ccd3d9;
  border-radius: 13px;
  color: var(--sr-text-secondary);
  font-size: 12px;
  list-style: none;
  cursor: pointer;
}

.sr-chip-add::-webkit-details-marker {
  display: none;
}

.sr-chip-add:hover {
  border-color: var(--sr-orange);
  color: var(--sr-orange-dark);
}

.sr-chip-add svg {
  width: 12px;
  height: 12px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.4;
  stroke-linecap: round;
}

.sr-filter-menu[open] .sr-chip-add {
  border-style: solid;
  border-color: var(--sr-orange);
  background: var(--sr-orange-tint);
  color: var(--sr-orange-dark);
}

/* Панелът с филтри е широк 300 точки; на телефон екранът е 305 и той излизаше вдясно от
   мястото, на което се отваря. Ширината му се ограничава от екрана. */
.sr-filter-panel {
  position: absolute;
  z-index: 6;
  top: calc(100% + 6px);
  left: 0;
  min-width: min(300px, calc(100vw - 24px));
  max-width: calc(100vw - 24px);
  display: grid;
  gap: 10px;
  padding: 12px;
  background: var(--sr-panel);
  border: 1px solid var(--sr-border);
  border-radius: var(--sr-radius);
  box-shadow: 0 6px 20px rgba(28, 33, 40, 0.14);
}

.sr-filter-panel label {
  display: grid;
  gap: 4px;
  margin: 0;
  color: var(--sr-text-secondary);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.sr-filter-panel .sr-select,
.sr-filter-panel .sr-input {
  width: 100%;
}

/* Списък с отметки в панела (SR-129: типовете оборудване, няколко наведнъж). Заглавието е като
   на другите полета; самият списък се превърта, защото типовете са петдесет. */
.sr-filter-panel .sr-check-list {
  margin: 0;
  padding: 0;
  border: 0;
  min-width: 0;
}

.sr-filter-panel .sr-check-list legend {
  padding: 0;
  margin-bottom: 4px;
  color: var(--sr-text-secondary);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.sr-filter-panel .sr-check-list-body {
  display: grid;
  gap: 2px;
  max-height: 220px;
  overflow-y: auto;
  padding: 4px 6px;
  border: 1px solid var(--sr-border);
  border-radius: var(--sr-radius);
  background: var(--sr-panel-alt);
}

.sr-filter-panel .sr-check-list-body .sr-check {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 24px;
  margin: 0;
  color: var(--sr-text);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
}

/* „Подредено по …" стои вдясно на реда: казва по какво е подреден списъкът, без да
   заема място, докато не потрябва. */
.sr-sort-note {
  margin-left: auto;
  color: var(--sr-text-secondary);
  font-size: 12px;
  white-space: nowrap;
}

.sr-sort-note strong {
  color: var(--sr-text);
  font-weight: 600;
}

/* ---- Таблицата като панел ------------------------------------------------------------ */

.sr-list-panel {
  background: var(--sr-panel);
  border-bottom: 1px solid var(--sr-border);
  overflow-x: auto;
}

/* Ивайло, 07.10.2026: при един-два реда менюто с действията (⋮ → Отдаване, Прибиране, Сервиз…)
   се режеше в долния ръб на панела — overflow-x: auto прави и вертикалното отрязване, а
   панелът е висок колкото редовете си. Докато има отворено меню, панелът получава място
   отдолу, за да го побере; долният ред с броя слиза под него и се връща при затваряне.
   Нарочно не overflow: visible — при тесен екран панелът е превъртян хоризонтално до ⋮ и
   смяната на overflow би върнала превъртането в началото, скривайки току-що отвореното меню. */
.sr-list-panel:has(.sr-action-menu[open]) {
  padding-bottom: 200px;
}

/* „Без оборудване", „—": казват нещо, но не са данни — четат се по-слабо от тях. */
.sr-cell-empty {
  color: var(--sr-text-weak);
}

.sr-list-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: var(--sr-footer-height);
  padding: 0 16px;
  background: var(--sr-panel-alt);
  border-bottom: 1px solid var(--sr-border);
  color: var(--sr-text-secondary);
  font-size: 12px;
}

/* ---- ЕРП: фасетите отляво ------------------------------------------------------------- */

/* Сортовете се виждат с броевете си, вместо да се търсят в падащо меню. Числото до всеки
   ред е ЦЕНАТА на този избор — колко машини остават — и се смята при останалите филтри,
   но не при собствения, за да не е изборът еднопосочен. */
.sr-erp-layout {
  display: flex;
  align-items: stretch;
  min-height: 0;
}

.sr-facets {
  position: sticky;
  top: calc(var(--sr-topbar-height) + var(--sr-filterbar-height));
  align-self: flex-start;
  width: 210px;
  flex: 0 0 210px;
  max-height: calc(100vh - var(--sr-topbar-height) - var(--sr-filterbar-height));
  overflow-y: auto;
  padding: 14px 12px;
  background: var(--sr-panel);
  border-right: 1px solid var(--sr-border);
}

.sr-erp-main {
  flex: 1;
  min-width: 0;
}

.sr-facet-group + .sr-facet-group {
  margin-top: 18px;
}

.sr-facet-title {
  margin-bottom: 8px;
  color: var(--sr-text-secondary);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.sr-facet {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 27px;
  padding: 0 8px;
  border-radius: var(--sr-radius);
  color: #3d454e;
  text-decoration: none;
  font-size: 13px;
}

.sr-facet:hover {
  background: var(--sr-panel-alt);
  color: var(--sr-text);
}

.sr-facet.active {
  background: var(--sr-selected);
  color: var(--sr-text);
  font-weight: 600;
}

.sr-facet-label {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sr-facet-count {
  margin-left: auto;
  padding-left: 6px;
  color: var(--sr-text-weak);
  font-size: 11px;
}

.sr-facet.active .sr-facet-count {
  color: var(--sr-text-secondary);
}

.sr-facet-more > summary {
  height: 27px;
  display: flex;
  align-items: center;
  padding: 0 8px;
  color: var(--sr-text-secondary);
  font-size: 12px;
  cursor: pointer;
}

/* Трите полета на ЕРП стоят на самия ред с филтрите: те са главният инструмент на екрана,
   а не нещо, което се вади при нужда. */
.sr-erp-search-field {
  flex: 1;
  min-width: 120px;
  max-width: 240px;
}

/* Групата е ПЪРВИЯТ филтър на реда (Силвия, 18.09: „по-удобно ще е да вкараме групата
   оборудване горе, преди номенклатурен и инвентарен номер, защото в долната част на менюто не
   се вижда"). Етикетите ѝ са дълги — „12 Вишки (работна височина)" — затова ѝ се дава малко
   повече място, отколкото на полетата за търсене. */
.sr-erp-type-filter {
  max-width: 280px;
}

.sr-pager {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

/* ---- Тип и статус в реда -------------------------------------------------------------- */

/* Типът е точка, не бадж: четири цветни правоъгълника на ред превръщат списъка в светофар,
   а окото трябва да чете машината, не цветовете. */
.sr-type {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}

.sr-type-dot {
  width: 7px;
  height: 7px;
  flex: 0 0 7px;
  border-radius: 2px;
  background: var(--sr-text-weak);
}

.sr-type-dot.dispatch { background: var(--sr-type-dispatch); }
.sr-type-dot.retrieve { background: var(--sr-type-retrieve); }
.sr-type-dot.transfer { background: var(--sr-type-transfer); }
.sr-type-dot.switch { background: var(--sr-type-switch); }
.sr-type-dot.repair { background: var(--sr-type-repair); }
.sr-type-dot.inspection { background: var(--sr-type-inspection); }

.sr-toolbar {
  display: grid;
  gap: 22px;
  margin-bottom: 16px;
}

.sr-erp-toolbar {
  gap: 0;
  margin-bottom: 12px;
}

.sr-erp-top-row {
  display: grid;
  grid-template-columns: 255px minmax(220px, 1fr) minmax(220px, 1fr);
  gap: 30px;
  align-items: stretch;
  margin-bottom: 14px;
}

.sr-erp-collection-select {
  width: 255px;
}

.sr-erp-toolbar .sr-search-row {
  margin-bottom: 0;
}

.sr-search-row {
  display: flex;
  gap: 14px;
  align-items: stretch;
}

.sr-search {
  flex: 1;
  display: flex;
}

.sr-search-icon {
  width: 41px;
  border: 1px solid #ced4da;
  border-right: 0;
  background: #f4f7f9;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
}

.sr-search-icon svg {
  width: 22px;
  height: 22px;
}

.sr-input,
.sr-select {
  height: var(--sr-control-height);
  border: 1px solid var(--sr-border);
  border-radius: var(--sr-radius);
  background: var(--sr-panel);
  color: var(--sr-text);
  padding: 0 10px;
  min-width: 0;
  font-family: inherit;
  font-size: 13px;
}

/* Подсказката в полето е текст и се чете като текст. Оставена на браузъра, тя е около
   4.36:1 — под прага. „Търсене…" и „Номенклатурен и инвентарен номер" са единственото, което
   казва за какво служи полето, преди да си написал нещо. opacity: 1 е за Firefox, който сам
   избледнява подсказките. (Намерено от одита, след като почна да мери и текста в полетата —
   ревю на Codex, 05.09.) */
.sr-input::placeholder,
.sr-select::placeholder,
textarea::placeholder {
  color: var(--sr-text-secondary);
  opacity: 1;
}

/* Полетата носят пръстена на :focus, не само на :focus-visible. Причината е конкретна:
   при input[type=datetime-local] Chrome държи фокуса в собствените си вътрешни части и
   :focus-visible не се пали за самото поле — одитът го хвана като „без видим фокус" (05.09).
   Пръстен около поле, в което пишеш, е полезен и когато си кликнал с мишка. */
.sr-input:focus,
.sr-select:focus-visible {
  outline: 2px solid var(--sr-orange);
  outline-offset: -1px;
}

.sr-input {
  width: 100%;
}

.sr-select {
  appearance: none;
  background-image:
    linear-gradient(45deg, transparent 50%, #9aa1a8 50%),
    linear-gradient(135deg, #9aa1a8 50%, transparent 50%);
  background-position:
    calc(100% - 14px) 50%,
    calc(100% - 9px) 50%;
  background-repeat: no-repeat;
  background-size: 5px 5px;
  padding-right: 30px;
}

.sr-clearable-select {
  position: relative;
  min-width: 0;
}

.sr-clearable-select .sr-select {
  width: 100%;
  padding-right: 52px;
}

.sr-select-clear {
  position: absolute;
  right: 27px;
  top: 50%;
  transform: translateY(-50%);
  border: 0;
  background: transparent;
  padding: 0;
  color: var(--sr-text-weak);
  cursor: pointer;
  font-size: 18px;
  font-weight: 700;
  line-height: 1;
  text-decoration: none;
  font-family: inherit;
}

.sr-select-clear:hover,
.sr-select-clear:focus {
  color: #747b82;
}

.sr-filter-row {
  display: grid;
  gap: 12px;
}

.sr-filter-row.two {
  grid-template-columns: 1fr 1fr;
}

.sr-filter-row.three {
  grid-template-columns: 1fr 1fr 1fr;
}

.sr-filter-row.four {
  grid-template-columns: 1fr 1fr 1fr 1fr;
}

.sr-filter-row.five {
  grid-template-columns: repeat(5, 1fr);
}

.sr-photo-thumb-link {
  display: inline-block;
  margin-bottom: 4px;
}

.sr-photo-thumb {
  display: block;
  width: 96px;
  height: 96px;
  object-fit: cover;
  border-radius: 8px;
  border: 1px solid #d8dce2;
}

.sr-filter-row.archive {
  grid-template-columns: 160px 160px minmax(0, 1fr) minmax(0, 1fr);
  gap: 30px;
}

.sr-settings-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 12px;
}

.sr-settings-link,
.sr-settings-panel {
  display: grid;
  gap: 10px;
  padding: 14px;
  border: 1px solid #d8dce2;
  border-radius: 8px;
  background: #ffffff;
}

.sr-settings-link {
  color: inherit;
  text-decoration: none;
  font-weight: 700;
}

.sr-settings-link:hover,
.sr-settings-link:focus {
  border-color: #8da2b5;
  color: inherit;
}

.sr-date-filter {
  position: relative;
  margin: 0;
}

.sr-date-filter span {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: #6c757d;
  pointer-events: none;
}

.sr-date-filter.empty:not(:focus-within) input {
  color: transparent;
}

.sr-date-filter:not(.empty) span,
.sr-date-filter.empty:focus-within span {
  display: none;
}

.sr-date-filter input {
  width: 100%;
}

/* Оранжевото е за ЕДНО действие на екран. Всичко останало е вторично — иначе марката
   се превръща в шум и окото спира да я намира. */
.sr-button {
  min-height: var(--sr-control-height);
  border: 1px solid var(--sr-orange-ink);
  border-radius: var(--sr-radius);
  background: var(--sr-orange-ink);
  color: #fff;
  padding: 0 13px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
}

.sr-button:hover {
  background: #b53f0c;
  border-color: #b53f0c;
  color: #fff;
}

.sr-button.secondary {
  border-color: var(--sr-border);
  background: var(--sr-panel);
  color: var(--sr-text);
}

.sr-button.secondary:hover {
  background: var(--sr-panel-alt);
  border-color: #ccd3d9;
  color: var(--sr-text);
}

.sr-button.danger {
  border-color: #b42344;
  background: #b42344;
}

.sr-button.danger:hover {
  background: #971c39;
  border-color: #971c39;
}

.sr-button-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
}

.sr-button-link:hover,
.sr-button-link:focus {
  color: #fff;
}

.sr-inline-icon {
  width: 18px;
  height: 18px;
  vertical-align: middle;
}

.sr-count {
  margin: 0 0 16px;
  font-size: 13px;
}

.sr-list-footer .sr-count {
  margin: 0;
  font-size: 12px;
}

/* „Задачи по машина 12552-38" — казва ЗАЩО списъкът е стеснен, когато стесняването е дошло
   отвън (от детайла на машина), а не от чип на този екран. */
.sr-filter-context {
  margin: 0;
  color: var(--sr-text-secondary);
  font-size: 12px;
}

/* Дизайн B: без зебра и без решетка. Редовете се разделят от една слаба линия — окото
   следва реда без чужда помощ, а решетката просто добавя 60 линии на екран. */
.sr-table {
  width: 100%;
  background: var(--sr-panel);
  border-collapse: collapse;
  table-layout: fixed;
  font-size: 13px;
}

.sr-table th,
.sr-table td {
  border: 0;
  border-bottom: 1px solid var(--sr-border-weak);
  vertical-align: middle;
  text-align: left;
  padding: 8px 12px;
}

.sr-table th {
  height: var(--sr-head-height);
  padding-top: 0;
  padding-bottom: 0;
  background: var(--sr-panel-alt);
  border-bottom: 1px solid var(--sr-border);
  color: var(--sr-text-secondary);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.sr-th-controls {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-left: 8px;
  font-size: 11px;
  font-weight: 500;
  text-transform: none;
  letter-spacing: 0;
  vertical-align: middle;
}

.sr-th-icon-button {
  width: 16px;
  height: 16px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--sr-border);
  border-radius: 3px;
  background: var(--sr-panel);
  color: var(--sr-text-secondary);
  text-decoration: none;
  vertical-align: middle;
}

.sr-th-icon-button.active {
  border-color: var(--sr-orange);
  background: var(--sr-orange-tint);
  color: var(--sr-orange-dark);
}

.sr-th-icon-button .sr-inline-icon {
  width: 12px;
  height: 12px;
}



.sr-th-day-toggle {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--sr-text-secondary);
  text-decoration: none;
  font-weight: 500;
}

.sr-th-checkbox {
  width: 12px;
  height: 12px;
  border: 1px solid var(--sr-border);
  border-radius: 2px;
  background: var(--sr-panel);
}

.sr-th-day-toggle.active .sr-th-checkbox {
  border-color: var(--sr-orange);
  background: var(--sr-orange);
  box-shadow: inset 0 0 0 2px #fff;
}

.sr-table tbody tr.highlight {
  background: var(--sr-highlight);
}

.sr-erp-table .sr-erp-col-nomenclature {
  width: 150px;
}

/* Ивайло, 07.10.2026: инвентарният номер е своя колона до номенклатурния. */
.sr-erp-table .sr-erp-col-inventory {
  width: 130px;
}

.sr-erp-table {
  table-layout: auto;
}

.sr-erp-table .sr-erp-col-name {
  width: 34%;
}

.sr-erp-table .sr-erp-col-info {
  width: auto;
}

.sr-erp-table .sr-erp-col-actions {
  width: 1%;
}

/* Петата колона е „Действия" — след като инвентарният номер стана своя колона (07.10.2026). */
.sr-erp-table th:nth-child(5),
.sr-erp-table td:nth-child(5) {
  padding-left: 8px;
  padding-right: 8px;
  text-align: center;
  white-space: nowrap;
}

.sr-pagination {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 14px;
}

.sr-pagination .sr-count {
  margin: 0;
}

.sr-task-table th,
.sr-task-table td {
  padding: 6px 12px;
  line-height: 1.35;
}

/* 42px е ПОД, не таван: задача с три машини расте, вместо да ги скрие зад многоточие.
   Машината е предметът на реда — скъсяването ѝ прави списъка по-подреден и по-безполезен. */
.sr-task-table tbody td,
.sr-archive-table tbody td {
  height: var(--sr-row-height);
}

.sr-task-table .sr-table-link {
  font-weight: 400;
}

.sr-task-table strong {
  font-weight: 400;
}

.sr-task-table .sr-cell-muted {
  color: var(--sr-text-secondary);
  font-size: 12px;
}

.sr-task-table .sr-equipment-cell + .sr-equipment-cell {
  margin-top: 8px;
}

/* Ширините на колоните. При table-layout: fixed колоните иначе се делят поравно и машината —
   най-дългият и най-важен текст на реда — получава същите 200px като „Тип". Числата дават
   мястото там, където се чете, а не там, където е останало.
   Задава се на заглавния ред: fixed чете ширините от първия ред. */
/* Датата е моноширинна и затова по-широка от вида си: „11.08.2026 17:20" иска 145px, за да
   стои на един ред. Пренесена на два реда, тя сама вдига всеки ред в списъка. */
.sr-task-table .sr-mono,
.sr-archive-table .sr-mono {
  font-size: 12px;
}

.sr-transport-table th:nth-child(1) { width: 145px; }
.sr-transport-table th:nth-child(2) { width: 108px; }
.sr-transport-table th:nth-child(4) { width: 230px; }
.sr-transport-table th:nth-child(5) { width: 190px; }
.sr-transport-table th:nth-child(6) { width: 150px; }

.sr-service-table th:nth-child(1) { width: 145px; }
.sr-service-table th:nth-child(3) { width: 230px; }
.sr-service-table th:nth-child(4) { width: 165px; }
.sr-service-table th:nth-child(5) { width: 190px; }
.sr-service-table th:nth-child(6) { width: 150px; }

.sr-archive-table th:nth-child(1) { width: 110px; }
.sr-archive-table th:nth-child(2) { width: 108px; }
.sr-archive-table th:nth-child(4) { width: 140px; }
.sr-archive-table th:nth-child(5) { width: 140px; }
.sr-archive-table th:nth-child(6) { width: 210px; }
.sr-archive-table th:nth-child(7) { width: 170px; }
.sr-archive-table th:nth-child(8) { width: 140px; }

/* Менюто с действия е една икона — колоната му не бива да е една пета от таблицата. */
.sr-users-table th:nth-child(2) { width: 250px; }
.sr-users-table th:nth-child(3) { width: 190px; }
.sr-users-table th:nth-child(4) { width: 230px; }
.sr-users-table th:nth-child(5) { width: 74px; }

.sr-task-table tbody tr:hover td,
.sr-archive-table tbody tr:hover td {
  background-color: var(--sr-panel-alt);
  cursor: pointer;
}

/* Редът под мишката и редът с фокус се държат еднакво — клавиатурата не бива да е
   второкласен начин да минеш през списък. */
.sr-clickable-row:focus-visible td {
  background-color: var(--sr-selected);
  outline: 2px solid var(--sr-orange);
  outline-offset: -2px;
}

/* ---- SR-89: приоритетът боядисва реда в „Сервизни задачи в склад" -----------
   Само двата края се виждат: „Среден" и „Висок" са ежедневието и цвят по тях не
   отсява нищо. Правилото кой ред получава кой клас е в TaskPriorityPolicy, не тук.

   Ивайло, 31.08: и списъкът „на обект" носи приоритета, но там сигналът е ЛЕНТА отляво, не фон
   — целият списък е ежедневие и боядисан фон на всеки ред не отсява нищо. Затова редът носи
   класа на приоритета си и в двата списъка, а какво рисува той, зависи от кой списък е това. */
/* SR-136: боядисаният ред сменя ТОКЕНА, не всяко правило поотделно — така и утрешният дребен
   текст в тези редове се ражда четим. Важи и за жълтото при задържане, и за кадъра на мигането:
   те са по-тъмни от розовото, а не по-светли. */
.sr-task-table--workshop tbody tr.prio-low td,
.sr-task-table--workshop tbody tr.prio-highest td,
.sr-plan-task.prio-low,
.sr-plan-task.prio-highest {
  --sr-text-secondary: var(--sr-text-on-priority-tint);
  --sr-text-weak: var(--sr-text-on-priority-tint);
}

.sr-task-table--workshop tbody tr.prio-low td {
  background-color: #e7f6ec;
}

.sr-task-table--workshop tbody tr.prio-highest td {
  background-color: #fdd9df;
  animation: sr-prio-blink 1.2s ease-in-out infinite;
}

/* Лентата на телефона, пренесена на реда. Цветовете са същите — една задача не бива да
   изглежда различно на двата екрана. Зеленото е по-тъмното: светлото е на „Отдаване". */
.sr-task-table--onsite tbody tr[class*="prio-"] td:first-child {
  border-left: 4px solid transparent;
}

.sr-task-table--onsite tbody tr.prio-low td:first-child { border-left-color: #1d7a49; }
.sr-task-table--onsite tbody tr.prio-normal td:first-child { border-left-color: #f7c948; }
.sr-task-table--onsite tbody tr.prio-high td:first-child { border-left-color: #e85d75; }
.sr-task-table--onsite tbody tr.prio-highest td:first-child { border-left-color: #8c1330; }

@keyframes sr-prio-blink {
  50% { background-color: #f7a8b6; }
}

/* Ивайло, 28.08: „при настройка на устройството „намалено движение" — без мигане, но пак
   ярко червено". Мигането е и риск за светлочувствителните, затова спира при заявено
   намалено движение, а цветът остава наситен. */
@media (prefers-reduced-motion: reduce) {
  .sr-task-table--workshop tbody tr.prio-highest td {
    animation: none;
    background-color: #f7a8b6;
  }
}

/* Задържането над реда си остава жълто — иначе не се вижда кой ред сочи мишката. */
.sr-task-table--workshop tbody tr.prio-low:hover td,
.sr-task-table--workshop tbody tr.prio-highest:hover td {
  background-color: #ffe082;
  animation: none;
}

.sr-priority-cell {
  white-space: nowrap;
}

.sr-priority-badge {
  display: inline-block;
  margin-top: 4px;
  padding: 1px 8px;
  border-radius: 10px;
  font-size: 12px;
  background: #eef1f4;
  color: #56646f;
}

.sr-priority-badge.prio-low {
  background: #cfead9;
  color: #1c5c37;
}

/* Средните два вече също се появяват (списъкът „на обект" ги показва) — със същите цветове
   като на телефона, за да не изглежда една задача различно на двата екрана. */
.sr-priority-badge.prio-normal {
  background: #fff6e6;
  color: #96631a;
}

.sr-priority-badge.prio-high {
  background: #ffe8ee;
  color: #b42344;
}

.sr-priority-badge.prio-highest {
  background: #f7a8b6;
  color: #7d1226;
  font-weight: 600;
}

.sr-task-modal .modal-dialog {
  max-width: min(1200px, calc(100vw - 32px));
}

.sr-task-modal .modal-body {
  height: min(78vh, 860px);
  padding: 0;
}

.sr-task-modal-frame {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
  background: var(--sr-bg);
}

.sr-embedded {
  display: block;
  min-height: 100vh;
  background: var(--sr-bg);
}

.sr-embedded-content {
  padding: 18px;
}

/* В кадъра отстъпът е на работната площ — секциите на задачата не слагат втори върху него. */
.sr-embedded .sr-task-header,
.sr-embedded .sr-task-body,
.sr-embedded .sr-task-extras,
.sr-embedded .sr-filterbar {
  padding-left: 0;
  padding-right: 0;
}

.sr-embedded .sr-task-header {
  padding-top: 0;
}

/* SR-95: горната лента „Назад" се крие в pop-up-а по КЛАС, не по позиция — с :first-child
   тя се показваше или не според това дали над нея стои съобщение. */
.sr-embedded .sr-page-actions-top {
  display: none;
}

.sr-table-action {
  width: 22px;
  min-height: 24px;
  border: 0;
  background: transparent;
  color: var(--sr-orange);
  font-size: 18px;
}

/* Силвия, 30.09: машината се избира В ПИКЪРА — „няма проверка" трябва да личи, докато
   се избира, а не да се открива после. Същото червено като на другите опасни действия. */
.sr-cell-warn {
  color: #b42344;
  font-weight: 600;
}

.sr-cell-muted {
  display: block;
  margin-top: 2px;
  color: var(--sr-text-secondary);
  font-size: 12px;
  line-height: 1.35;
}

.sr-alert {
  border: 1px solid #e8c15c;
  background: #fff4cf;
  color: #382b0d;
  padding: 10px 12px;
  margin-bottom: 14px;
  font-weight: 700;
}

/* Отворен транспорт по машината на ремонта (Миро, 07.10.2026): бележка с връзки, не отказ. */
.sr-alert.sr-open-transport a {
  display: inline-block;
  margin-left: 8px;
  color: inherit;
  text-decoration: underline;
}

/* Отказът трябва да изглежда като отказ, а не като жълтата лента „готово" (SR-91). */
.sr-alert-error {
  border-color: #d05070;
  background: #fdd9df;
  color: #7d1226;
}

/* SR-91: корекцията на час стои свита в реда — историята се чете, не се редактира постоянно. */
.sr-history-correct summary {
  cursor: pointer;
  color: #1d6fa5;
  font-size: 12px;
}

.sr-history-correct .sr-inline-form {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  margin-top: 6px;
}

/* „Детайли" носи цялото изречение („Редактирана - Клиент, Адрес"), а другите три колони —
   дата, статус и име. При равни четвъртини детайлът се чупеше на пет реда, докато трите
   съседни стояха полупразни (находка на Миро, 05.09). */
.sr-history-table th:nth-child(1) { width: 190px; }
.sr-history-table th:nth-child(2) { width: 165px; }
.sr-history-table th:nth-child(3) { width: 185px; }

.sr-history-table td:nth-child(4) {
  white-space: normal;
  overflow-wrap: anywhere;
}

/* Същата схема като в приложението (Миро, 06.09): текущото състояние е удебелено; събитие
   (снимка, „отдадена без проверка") е тих ред — сиво, по-дребно, със заглавието на събитието
   в колоната на статуса и отстъп с линия отляво, за да се чете като „под" статуса си. */
.sr-history-table tr.current td:nth-child(2) {
  font-weight: 700;
}

.sr-history-table tr.event td {
  color: var(--sr-text-secondary);
  font-size: 12px;
  background: var(--sr-panel-alt);
}

.sr-history-table tr.event td:nth-child(2) {
  box-shadow: inset 3px 0 0 var(--sr-border);
  padding-left: 20px;
}

.sr-table-link {
  color: #1d2833;
  font-weight: 700;
  text-decoration: none;
}

.sr-table-link:hover,
.sr-table-link:focus {
  color: var(--sr-orange);
}

.sr-muted-row {
  color: var(--sr-text-secondary);
}

.sr-status-pill {
  display: inline-flex;
  align-items: center;
  height: 22px;
  margin-left: 8px;
  padding: 0 8px;
  border-radius: var(--sr-radius);
  background: var(--sr-chip-bg);
  color: #53606b;
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
}

.sr-status-pill.muted {
  background: #e6e8ea;
}

/* Статусът на задачата стои сам в клетката си — синьото го отделя от сивите етикети
   („неактивен", „да"), които винаги следват друг текст. */
.sr-status-pill.state {
  margin-left: 0;
  background: var(--sr-pill-bg);
  color: var(--sr-pill-text);
}

.sr-row-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.sr-row-actions form {
  margin: 0;
}

.sr-icon-action {
  width: 28px;
  height: 28px;
  border: 1px solid #d5dbe0;
  background: #fff;
  color: #f15a24;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  line-height: 1;
  text-decoration: none;
}

.sr-icon-action svg {
  width: 18px;
  height: 18px;
}

.sr-icon-action.danger {
  color: #b63030;
}

.sr-action-menu {
  position: relative;
  display: inline-block;
}

.sr-action-menu summary {
  width: 28px;
  height: 28px;
  border: 1px solid #d5dbe0;
  background: #fff;
  color: #f15a24;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  list-style: none;
}

.sr-action-menu summary::-webkit-details-marker {
  display: none;
}

.sr-action-menu summary svg {
  width: 18px;
  height: 18px;
}

.sr-action-menu-list {
  position: absolute;
  z-index: 20;
  right: 0;
  top: 32px;
  min-width: 150px;
  border: 1px solid #d5dbe0;
  background: #fff;
  box-shadow: 0 6px 16px rgba(25, 29, 33, 0.16);
}

.sr-action-menu-list a {
  display: block;
  padding: 8px 12px;
  color: #1f252b;
  text-decoration: none;
  font-size: 14px;
  line-height: 1.2;
  white-space: nowrap;
}

.sr-action-menu-list form {
  margin: 0;
}

.sr-action-menu-list button {
  width: 100%;
  border: 0;
  background: transparent;
  display: block;
  padding: 8px 12px;
  color: #1f252b;
  text-align: left;
  font-size: 14px;
  line-height: 1.2;
  white-space: nowrap;
}

.sr-action-menu-list a:hover,
.sr-action-menu-list a:focus,
.sr-action-menu-list button:hover,
.sr-action-menu-list button:focus {
  background: #f4f7f9;
  color: #f15a24;
}

.sr-action-menu-list button.danger {
  color: #b63030;
}

.sr-action-menu.inline .sr-action-menu-list {
  left: 0;
  right: auto;
}

.sr-users-toolbar {
  gap: 12px;
}

.sr-users-table {
  font-size: 12px;
}

.sr-users-table th,
.sr-users-table td {
  padding: 6px 9px;
  line-height: 1.25;
}

.sr-users-table th:nth-child(5),
.sr-users-table td:nth-child(5) {
  width: 56px;
  text-align: center;
}

.sr-users-table .sr-table-link {
  font-weight: 600;
}

.sr-users-table .sr-status-pill {
  margin-left: 6px;
  padding: 1px 5px;
  font-size: 10px;
}

.sr-users-table .sr-muted-row {
  background: #fff2ec;
}

.sr-user-action-menu summary {
  width: 18px;
  height: 24px;
  border: 0;
  background: transparent;
  color: #f15a24;
}

.sr-user-action-menu summary svg {
  width: 16px;
  height: 16px;
}

/* ---- Страницата на задачата (подредбата от вариант A, в дрехите на B) ---------------- */

/* Задачата се ПРЕДСТАВЯ, преди да се редактира: кой е клиентът, какво е състоянието, кога и
   къде. Досега екранът започваше с бутон „Назад" и падащо меню „Склад" — коя е задачата
   разбираше, като прочетеш формата. */
.sr-task-header {
  padding: 14px 16px 0;
}

.sr-breadcrumb {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 6px;
  color: var(--sr-text-secondary);
  font-size: 12px;
}

.sr-breadcrumb a {
  color: var(--sr-text-secondary);
  text-decoration: none;
}

.sr-breadcrumb a:hover {
  color: var(--sr-link);
  text-decoration: underline;
}

.sr-task-title-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}

.sr-task-title {
  margin: 0;
  font-size: 20px;
  font-weight: 600;
  line-height: 1.2;
}

/* „Отказ" и „Запази" горе вдясно: записът е основното действие на екрана. Изтриването НЕ е
   тук — то слиза в опасната зона долу. */
/* Бутоните се пренасят: на телефон четирите действия по машината („Отдаване, Трансфер,
   Сервиз, Проверка") не се събират на един ред и последният излизаше извън екрана. */
.sr-task-actions {
  margin-left: auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.sr-task-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 14px;
  margin-top: 7px;
  color: var(--sr-text-secondary);
  font-size: 12px;
}

.sr-task-meta strong {
  color: var(--sr-text);
  font-weight: 500;
}

/* ---- Стълбицата ---------------------------------------------------------------------- */

/* Къде е задачата и какво следва. Показване, не управление: статусът се сменя по същия път
   както досега. Стъпките са РЕАЛНИТЕ за тази задача — транспортната няма междинни
   (spec/transport-tasks.md §3), сервизната ги взима от RepairSites. */
.sr-ladder {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  margin: 12px 0 0;
  padding: 0;
  list-style: none;
}

.sr-ladder-item {
  display: inline-flex;
  align-items: center;
}

.sr-ladder-item + .sr-ladder-item::before {
  content: "→";
  margin: 0 6px;
  color: #ccd3d9;
  font-size: 12px;
}

.sr-ladder-step {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 28px;
  padding: 0 11px 0 8px;
  border: 1px solid var(--sr-border);
  border-radius: 14px;
  background: var(--sr-panel);
  color: var(--sr-text-secondary);
  font-size: 12px;
}

.sr-ladder-step .sr-ladder-num {
  width: 17px;
  height: 17px;
  flex: 0 0 17px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--sr-chip-bg);
  color: var(--sr-text-secondary);
  font-family: var(--sr-font-mono);
  font-size: 10px;
  font-weight: 600;
}

.sr-ladder-step.done {
  border-color: #cfe3d6;
  background: #f2f9f5;
  color: #2c6a48;
}

.sr-ladder-step.done .sr-ladder-num {
  background: #37b26c;
  color: #fff;
}

.sr-ladder-step.current {
  border-color: var(--sr-orange);
  background: var(--sr-orange-tint);
  color: var(--sr-orange-dark);
  font-weight: 600;
}

.sr-ladder-step.current .sr-ladder-num {
  background: var(--sr-orange);
  color: #fff;
}

/* ---- Двете колони -------------------------------------------------------------------- */

/* Отляво това, по което се работи; отдясно това, което се сменя рядко, но трябва да се вижда. */
.sr-task-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 380px;
  align-items: start;
  gap: 14px;
  padding: 14px 16px 24px;
  max-width: none;
}

/* minmax(0, 1fr), не подразбиращата се пътека: тя се оразмерява по СЪДЪРЖАНИЕТО и на телефон
   заемаше 542px в контейнер от 375 — таблиците на приключената задача („Инфо", „Размер") се
   режеха и не можеха да се стигнат, защото .sr-main крие излишното вместо да го превърта
   (Силвия, 07.09, през линка от писмото „отдадена без проверка"). */
.sr-task-col {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 14px;
  min-width: 0;
}

/* Историята, констативният протокол и чеклистът носят СВОИ форми (корекция на час SR-91,
   повторно изпращане SR-86). Вложени форми в HTML няма, затова те стоят след формата на
   задачата — но в същата решетка и в същата колона, за да продължат лявата колона, вместо
   да изглеждат като друга страница. */
.sr-task-extras {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 380px;
  align-items: start;
  gap: 14px;
  padding: 0 16px 24px;
}

.sr-task-extras > * {
  grid-column: 1;
  min-width: 0;
}

.sr-task-body:has(+ .sr-task-extras) {
  padding-bottom: 14px;
}

@media (max-width: 1180px) {
  .sr-task-extras {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 1180px) {
  .sr-task-body {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ---- Смислова група ------------------------------------------------------------------ */

/* Групи вместо две колони еднакви полета. Група без нито едно видимо поле за този тип задача
   изобщо не се рисува — TaskFieldVisibilityPolicy решава кое се вижда, не този лист. */
.sr-group {
  background: var(--sr-panel);
  border: 1px solid var(--sr-border);
  border-radius: var(--sr-radius);
}

.sr-group-title {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 10px;
  min-height: 36px;
  margin: 0;
  padding: 5px 14px;
  border-bottom: 1px solid var(--sr-border-weak);
  color: var(--sr-text);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

/* Действието на групата се притиска надясно, но при тесен панел се пренася на свой ред —
   иначе то смачква заглавието и „АКТИВНИ ЗАДАЧИ" се чупи на две. Бутонът не е заглавие,
   затова не носи и главните му букви. */
.sr-group-title .sr-group-action {
  margin-left: auto;
  display: inline-flex;
  flex-wrap: wrap;
  gap: 8px;
  letter-spacing: 0;
  text-transform: none;
}

.sr-group-body {
  padding: 12px 14px;
}

.sr-group-body > :last-child {
  margin-bottom: 0;
}

/* Таблица вътре в група опира в стените ѝ — рамка в рамка не казва нищо. Ако все пак не се
   събере (тесен телефон, дълга колона), таблицата се превърта в своята рамка: отрязано
   съдържание, до което не се стига, е загубено съдържание. */
.sr-group-body.flush {
  padding: 0;
  overflow-x: auto;
}

/* ---- Празните състояния -------------------------------------------------------------- */

/* Празното състояние КАЗВА нещо. Досега тук стоеше таблица със заглавия и нищо под тях —
   човек не може да различи „няма" от „не се зареди". */
.sr-empty {
  padding: 14px;
  color: var(--sr-text-secondary);
  font-size: 12px;
  line-height: 1.5;
}

.sr-empty strong {
  display: block;
  margin-bottom: 3px;
  color: var(--sr-text);
  font-size: 13px;
  font-weight: 600;
}

/* ---- Опасната зона ------------------------------------------------------------------- */

/* Опасното стои само, долу, и си казва името — не плътно до „Запази". */
.sr-danger-zone {
  border-color: #f0cdd6;
}

.sr-danger-zone .sr-group-title {
  border-bottom-color: #f8e3e8;
  color: #b42344;
}

/* Обяснението вътре в тялото на групата вече е с отстъп от нея — не си добавя втори. */
.sr-group-body > .sr-empty {
  padding: 0 0 10px;
}

.sr-page-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin: 0 0 16px;
}

.sr-page-actions form {
  margin: 0;
}

.sr-task-action-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.sr-task-action-buttons .sr-button {
  min-height: 34px;
  font-size: 14px;
}

.sr-detail-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  border-top: 1px solid var(--sr-border-weak);
}

.sr-detail-grid div {
  min-height: 52px;
  padding: 8px 14px;
  border-bottom: 1px solid var(--sr-border-weak);
}

/* В дясната колона (380px) двойките етикет/стойност вървят една под друга — четири в редица
   там значат четири срязани думи. */
.sr-detail-grid--stacked {
  grid-template-columns: minmax(0, 1fr);
}

.sr-detail-grid span,
.sr-field > span:first-child,
.sr-check-field span {
  display: block;
  color: var(--sr-text-secondary);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.03em;
  margin-bottom: 4px;
}

.sr-detail-grid strong {
  display: block;
  color: var(--sr-text);
  font-size: 13px;
}

.sr-form {
  max-width: 1040px;
}

.sr-form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(200px, 1fr));
  gap: 12px;
  margin-bottom: 14px;
}

/* Групите в дясната колона са тесни (380px) — там полетата вървят едно под друго. */
.sr-form-grid.one {
  grid-template-columns: minmax(0, 1fr);
}

.sr-inline-form {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) auto;
  gap: 8px;
  align-items: center;
}

.sr-settings-form {
  max-width: none;
  margin-bottom: 18px;
}

.sr-settings-form-row {
  display: grid;
  gap: 10px;
  align-items: end;
}

.sr-settings-form-row.notification {
  grid-template-columns: minmax(120px, 170px) minmax(220px, 1fr) minmax(220px, 1fr) auto auto;
}

.sr-settings-form-row.document-type {
  grid-template-columns: minmax(120px, 160px) minmax(220px, 1fr) minmax(220px, 1fr) minmax(90px, 110px) auto auto;
}

.sr-settings-check {
  min-height: 38px;
  padding-top: 0;
}

.sr-settings-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 38px;
}

.sr-field {
  display: grid;
  gap: 4px;
}

.sr-field .sr-input,
.sr-field .sr-select {
  width: 100%;
}

.sr-field-inline {
  display: flex;
  align-items: center;
  gap: 8px;
}

.sr-field-inline .sr-input {
  flex: 1;
}

.sr-field-inline .sr-button {
  white-space: nowrap;
}

.sr-field [data-valmsg-for],
.sr-field .field-validation-error {
  color: #b42344;
  font-size: 12px;
}

.field-validation-valid {
  display: none;
}

.sr-check-field {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 38px;
  padding-top: 20px;
}

.sr-check-field span {
  margin: 0;
}

.sr-section-title {
  margin: 18px 0 8px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.sr-subsection-title {
  margin: 14px 0 8px;
  font-size: 13px;
  font-weight: 600;
}

.sr-equipment-archive-actions {
  margin-bottom: 8px;
}

.sr-document-actions {
  display: grid;
  gap: 18px;
  margin-top: 14px;
}

.sr-tree-config-list {
  display: grid;
  gap: 8px;
}

.sr-tree-config-row {
  display: grid;
  grid-template-columns: 34px minmax(110px, auto) minmax(180px, 1fr) minmax(180px, 1fr) auto auto auto;
  gap: 8px;
  align-items: center;
  max-width: 1180px;
  padding: 8px;
  border: 1px solid var(--sr-grid);
  background: #fff;
}

.sr-tree-config-row.active {
  border-color: #9fb8ca;
  background: #f7fafc;
}

.sr-tree-config-row.create {
  margin-bottom: 10px;
}

.sr-tree-config-row .sr-validation-summary,
.sr-tree-config-errors {
  grid-column: 1 / -1;
}

.sr-tree-config-errors {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  color: #b63030;
  font-size: 12px;
}

.sr-tree-code,
.sr-tree-version {
  color: #5d6872;
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}

.sr-inline-check {
  display: flex;
  align-items: center;
  gap: 6px;
  color: #5d6872;
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}

.sr-icon-button {
  display: inline-grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border: 1px solid #cbd5dd;
  border-radius: 6px;
  background: #fff;
  color: #2f6684;
  cursor: pointer;
  text-decoration: none;
}

.sr-icon-button:hover,
.sr-icon-button:focus {
  background: #eef5f8;
  color: #214c64;
}

.sr-icon-button.danger {
  color: #a33a3a;
}

.sr-icon-button.passive {
  cursor: default;
  color: #5d6872;
}

.sr-icon-button.danger:hover,
.sr-icon-button.danger:focus {
  background: #fff1f1;
  color: #822b2b;
}

.sr-icon-button svg {
  width: 18px;
  height: 18px;
}

.sr-problem-node-form {
  margin-bottom: 14px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--sr-grid);
}

.sr-problem-node-heading {
  display: grid;
  gap: 2px;
  margin-bottom: 10px;
}

.sr-problem-node-heading strong {
  font-size: 15px;
}

.sr-problem-node-heading span {
  color: #5d6872;
  font-size: 13px;
}

.sr-problem-flags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  margin-bottom: 12px;
}

.sr-problem-editor {
  display: grid;
  grid-template-columns: minmax(300px, 420px) minmax(420px, 1fr);
  gap: 22px;
  align-items: start;
}

.sr-problem-editor.compact {
  grid-template-columns: minmax(320px, 520px) minmax(360px, 640px);
}

.sr-problem-tree-panel,
.sr-problem-editor-section {
  border: 1px solid var(--sr-grid);
  background: #fff;
}

.sr-problem-tree-panel {
  position: sticky;
  top: 16px;
  max-height: calc(100vh - 40px);
  overflow: auto;
}

.sr-problem-tree-actions {
  padding: 12px;
  border-bottom: 1px solid var(--sr-grid);
}

.sr-problem-tree-list {
  display: grid;
}

.sr-problem-tree-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
  min-height: 44px;
  padding: 5px 8px;
  border-bottom: 1px solid #eef1f4;
}

.sr-problem-tree-row.depth-1 { padding-left: 28px; }
.sr-problem-tree-row.depth-2 { padding-left: 48px; }
.sr-problem-tree-row.depth-3 { padding-left: 68px; }
.sr-problem-tree-row.depth-4 { padding-left: 88px; }
.sr-problem-tree-row.depth-5 { padding-left: 108px; }

.sr-problem-tree-link {
  display: grid;
  gap: 2px;
  min-width: 0;
  padding: 7px 9px;
  border-radius: 6px;
  color: #1f252b;
  text-decoration: none;
}

.sr-problem-tree-link.active {
  background: #e8f0f6;
  color: #17364a;
}

.sr-problem-tree-link.muted {
  opacity: .58;
}

.sr-problem-tree-name,
.sr-problem-tree-meta {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sr-problem-tree-name {
  font-size: 14px;
  font-weight: 700;
}

.sr-problem-tree-meta {
  /* SR-130: страницата влезе в машинния одит и #6b7480 върху белия панел даваше 4.24:1
     при праг 4.5 — същият вторичен цвят, който минава навсякъде другаде. */
  color: var(--sr-text-secondary);
  font-size: 12px;
}

.sr-problem-node-actions {
  display: flex;
  gap: 5px;
  align-items: center;
}

.sr-problem-node-actions form {
  margin: 0;
}

.sr-problem-editor-forms {
  display: grid;
  gap: 18px;
}

.sr-problem-editor-forms.compact {
  gap: 0;
}

.sr-problem-editor-section {
  padding: 14px;
}

.sr-form-grid.compact {
  grid-template-columns: repeat(2, minmax(180px, 1fr));
}

.sr-problem-selected-path {
  display: grid;
  gap: 3px;
  margin-bottom: 12px;
  padding: 10px 12px;
  background: #f6f8fa;
  border: 1px solid #e4e8ed;
}

.sr-problem-selected-path span {
  color: #5d6872;
  font-size: 12px;
  font-weight: 700;
}

.sr-problem-selected-path strong {
  font-size: 14px;
  overflow-wrap: anywhere;
}

.sr-roles-table th:nth-child(1),
.sr-roles-table td:nth-child(1) {
  width: 190px;
}

.sr-roles-table th:nth-child(2),
.sr-roles-table td:nth-child(2),
.sr-roles-table th:nth-child(3),
.sr-roles-table td:nth-child(3),
.sr-roles-table th:nth-child(6),
.sr-roles-table td:nth-child(6) {
  width: 120px;
}

.sr-permission-table th,
.sr-permission-table td {
  font-size: 14px;
  padding: 9px 10px;
}

.sr-permission-table thead tr:first-child th {
  text-align: center;
}

.sr-permission-table thead tr:first-child th:first-child {
  text-align: left;
}

.sr-role-users-table th:nth-child(4),
.sr-role-users-table td:nth-child(4) {
  width: 130px;
}

.sr-admin-page {
  /* Фаза 4 на редизайна: страниците за настройки минават на токените и шрифта на B, без
     ново подреждане — клиентът не е гледал тези екрани. Имената остават sr-admin-*, за да
     не се пренаписват четиристотин реда правила; стойностите вече са на B, включително
     акцентът: тюркоазеното беше собствена марка на един ъгъл от продукта. */
  --sr-admin-bg: var(--sr-bg);
  --sr-admin-surface: var(--sr-panel);
  --sr-admin-surface-soft: var(--sr-panel-alt);
  --sr-admin-line: var(--sr-border);
  --sr-admin-line-strong: #ccd3d9;
  --sr-admin-text: var(--sr-text);
  --sr-admin-muted: var(--sr-text-secondary);
  --sr-admin-accent: var(--sr-orange-ink);
  --sr-admin-accent-dark: #b53f0c;
  --sr-admin-danger: #b42344;
  display: grid;
  gap: 18px;
  align-content: start;
  min-height: calc(100vh - 64px);
  margin: -12px -16px -24px;
  padding: 16px 16px 32px;
  background: var(--sr-admin-bg);
  color: var(--sr-admin-text);
}

.sr-admin-header,
.sr-admin-panel-header,
.sr-admin-members-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.sr-admin-header {
  margin-bottom: 2px;
}

.sr-admin-header h1 {
  margin: 0;
  color: var(--sr-admin-text);
  font-size: 20px;
  font-weight: 700;
  line-height: 1.18;
}

.sr-admin-kicker {
  margin-bottom: 7px;
  color: var(--sr-admin-muted);
  font-size: 13px;
}

.sr-admin-breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 7px;
  margin-bottom: 8px;
  color: var(--sr-admin-muted);
  font-size: 13px;
  font-weight: 700;
}

.sr-admin-breadcrumb a {
  color: var(--sr-admin-accent-dark);
  text-decoration: none;
}

.sr-admin-breadcrumb a:hover,
.sr-admin-breadcrumb a:focus {
  text-decoration: underline;
}

.sr-admin-page-description {
  max-width: 760px;
  margin: 8px 0 0;
  color: var(--sr-admin-muted);
  font-size: 13px;
  line-height: 1.5;
}

.sr-admin-panel,
.sr-admin-tile {
  border: 1px solid var(--sr-admin-line);
  border-radius: var(--sr-radius);
  background: var(--sr-admin-surface);
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}

.sr-admin-panel-header {
  min-height: 58px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--sr-admin-line);
}

.sr-admin-panel-header h2,
.sr-admin-members-header h3 {
  margin: 0;
  color: var(--sr-admin-text);
  font-weight: 700;
  line-height: 1.25;
}

.sr-admin-panel-header h2 {
  font-size: 13px;
}

.sr-admin-members-header h3 {
  font-size: 13px;
}

.sr-admin-panel-body {
  padding: 16px;
}

.sr-admin-tile-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 360px));
  gap: 12px;
  align-items: start;
}

.sr-admin-tile {
  display: grid;
  gap: 10px;
  min-height: 92px;
  padding: 14px;
  color: var(--sr-admin-text);
  text-decoration: none;
}

.sr-admin-tile:hover,
.sr-admin-tile:focus {
  border-color: #a6d5ce;
  color: var(--sr-admin-text);
}

.sr-admin-tile-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.sr-admin-tile-icon {
  display: grid;
  place-items: center;
  width: 32px;
  height: var(--sr-control-height);
  border-radius: var(--sr-radius);
  background: #e9f5f3;
  color: var(--sr-admin-accent-dark);
  font-weight: 700;
}

.sr-admin-tile-title {
  font-size: 13px;
  font-weight: 700;
}

.sr-admin-metric-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  gap: 12px;
}

.sr-admin-metric {
  display: grid;
  gap: 6px;
  min-height: 112px;
  padding: 14px;
  border: 1px solid var(--sr-admin-line);
  border-radius: var(--sr-radius);
  background: #fff;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}

.sr-admin-metric span {
  color: var(--sr-admin-muted);
  font-size: 12px;
  font-weight: 700;
}

.sr-admin-metric strong {
  color: var(--sr-admin-text);
  font-family: var(--sr-font-mono);
  font-feature-settings: "tnum";
  font-size: 20px;
  line-height: 1.1;
}

.sr-admin-metric small {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  color: var(--sr-admin-muted);
  font-size: 12px;
}

/* Числата не са действия. С акцента цялото табло светна в оранжево и марката спря да
   означава каквото и да е. Числото се чете като число: Mono, с равни цифри. */
.sr-admin-metric small span {
  color: var(--sr-admin-text);
  font-family: var(--sr-font-mono);
  font-feature-settings: "tnum";
}

.sr-admin-dashboard-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

/* Пак minmax(0, 1fr): „1fr" не слиза под съдържанието си, затова таблото на телефон изнасяше
   панелите на 731px в екран от 375 и .sr-main режеше останалото. Панелът трябва да може да се
   свие, за да проработи собственото превъртане на таблицата в него. */
.sr-admin-dashboard-grid.wide {
  grid-template-columns: minmax(0, 1fr);
}

.sr-admin-panel {
  min-width: 0;
}

.sr-admin-count-list {
  display: grid;
  border: 1px solid var(--sr-admin-line);
  border-radius: var(--sr-radius);
  overflow: hidden;
  background: #fff;
}

.sr-admin-count-list > div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 42px;
  padding: 9px 12px;
  border-bottom: 1px solid var(--sr-admin-line);
}

.sr-admin-count-list > div:nth-child(even) {
  background: #f8fafc;
}

.sr-admin-count-list > div:last-child {
  border-bottom: 0;
}

.sr-admin-count-list span {
  color: var(--sr-admin-text);
  overflow-wrap: anywhere;
}

.sr-admin-count-list strong {
  color: var(--sr-admin-text);
  font-family: var(--sr-font-mono);
  font-feature-settings: "tnum";
  font-size: 13px;
}

.sr-admin-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: var(--sr-control-height);
  padding: 0 13px;
  border: 1px solid transparent;
  border-radius: var(--sr-radius);
  background: var(--sr-admin-accent);
  color: #fff;
  /* Бутонът и полето не наследяват шрифта на страницата — трябва да им се каже. Без това
     половината настройки се изписваха с браузърския Arial до IBM Plex на останалото. */
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
}

.sr-admin-button:hover,
.sr-admin-button:focus {
  background: var(--sr-admin-accent-dark);
  color: #fff;
}

.sr-admin-button.secondary {
  border-color: var(--sr-admin-line-strong);
  background: #fff;
  color: var(--sr-admin-text);
}

.sr-admin-button.secondary:hover,
.sr-admin-button.secondary:focus {
  border-color: var(--sr-admin-accent);
  background: #f1faf8;
  color: var(--sr-admin-accent-dark);
}

.sr-admin-button.danger {
  border-color: #f0c4c0;
  background: #fff6f5;
  color: var(--sr-admin-danger);
}

.sr-admin-button.danger:hover,
.sr-admin-button.danger:focus {
  border-color: var(--sr-admin-danger);
  background: #ffe8e5;
  color: var(--sr-admin-danger);
}

.sr-admin-form {
  margin: 0;
}

.sr-admin-filter-row {
  display: grid;
  gap: 10px;
  align-items: end;
}

.sr-admin-filter-row.two {
  grid-template-columns: minmax(260px, 420px) auto;
}

.sr-admin-filter-row.three {
  grid-template-columns: minmax(260px, 1fr) minmax(220px, 320px) auto;
}

.sr-admin-form-row {
  display: grid;
  gap: 10px;
  align-items: end;
}

.sr-admin-form-row.notification {
  grid-template-columns: minmax(120px, 170px) minmax(220px, 1fr) minmax(220px, 1fr) auto auto;
}

.sr-admin-form-row.document-type {
  grid-template-columns: minmax(120px, 160px) minmax(220px, 1fr) minmax(220px, 1fr) minmax(90px, 110px) auto auto;
}

.sr-admin-form-row.problem-tree {
  grid-template-columns: minmax(110px, 150px) minmax(170px, 1fr) minmax(170px, 1fr) minmax(150px, 200px) minmax(170px, 240px) minmax(140px, 180px) minmax(140px, 180px) auto auto;
}

.sr-admin-form-row.photo-group {
  grid-template-columns: minmax(110px, 150px) minmax(180px, 1fr) minmax(180px, 1fr) minmax(160px, 210px) minmax(180px, 260px) minmax(150px, 190px) minmax(150px, 190px) auto auto;
}

.sr-admin-form-row.photo-requirement {
  grid-template-columns: minmax(190px, 1fr) minmax(190px, 1fr) minmax(220px, 1.2fr) minmax(90px, 110px) auto auto auto;
}

.sr-admin-form-row.checklist-template {
  grid-template-columns: minmax(110px, 150px) minmax(180px, 1fr) minmax(180px, 1fr) minmax(160px, 210px) minmax(180px, 260px) minmax(150px, 190px) minmax(150px, 190px) auto auto auto;
}

.sr-admin-form-row.checklist-item {
  grid-template-columns: minmax(220px, 1.4fr) minmax(220px, 1.4fr) minmax(200px, 1fr) minmax(90px, 110px) auto auto auto;
}

.sr-admin-form-row.upload-document {
  grid-template-columns: minmax(220px, 320px) minmax(260px, 1fr) auto;
}

.sr-admin-field {
  display: grid;
  gap: 5px;
  min-width: 0;
}

.sr-admin-field span:first-child {
  color: var(--sr-admin-muted);
  font-size: 12px;
  font-weight: 700;
}

.sr-admin-field.compact span:first-child {
  display: none;
}

.sr-admin-field [data-valmsg-for],
.sr-admin-field .field-validation-error {
  color: var(--sr-admin-danger);
  font-size: 12px;
}

.sr-admin-page .sr-input,
.sr-admin-page .sr-select,
.sr-admin-page textarea {
  width: 100%;
  height: var(--sr-control-height);
  border: 1px solid var(--sr-admin-line-strong);
  border-radius: var(--sr-radius);
  background: var(--sr-panel);
  color: var(--sr-admin-text);
  font-family: inherit;
  font-size: 13px;
}

.sr-admin-page textarea {
  height: auto;
  padding: 8px 10px;
  line-height: 1.45;
}

.sr-admin-check {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: var(--sr-control-height);
  padding: 0 10px;
  border: 1px solid var(--sr-admin-line);
  border-radius: var(--sr-radius);
  background: var(--sr-admin-surface-soft);
  color: var(--sr-admin-text);
  font-weight: 700;
  white-space: nowrap;
}

.sr-admin-check input {
  width: 16px;
  height: 16px;
  accent-color: var(--sr-admin-accent);
}

.sr-admin-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: var(--sr-control-height);
}

.sr-admin-status {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  min-height: 25px;
  padding: 3px 8px;
  border-radius: 999px;
  background: #eef1f4;
  color: var(--sr-admin-muted);
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}

/* „Активен" е СЪСТОЯНИЕ, не действие: остава зелено. С акцента то стана оранжево и всеки
   ред от настройките започна да прилича на бутон. */
.sr-admin-status.active {
  background: #f2f9f5;
  color: #2c6a48;
}

.sr-admin-status.inactive {
  background: #eef1f4;
  color: var(--sr-admin-muted);
}

.sr-admin-status.warning {
  background: #fff6e5;
  color: #9a5b00;
}

.sr-admin-list {
  display: grid;
  border: 1px solid var(--sr-admin-line);
  border-radius: var(--sr-radius);
  overflow: hidden;
  background: #fff;
}

.sr-admin-list-row {
  display: grid;
  gap: 12px;
  align-items: center;
  min-height: 54px;
  margin: 0;
  padding: 10px 12px;
  border: 0;
  border-bottom: 1px solid var(--sr-admin-line);
  background: #fff;
}

.sr-admin-list-row:last-child {
  border-bottom: 0;
}

.sr-admin-list-row:nth-child(odd):not(.header) {
  background: #f8fafc;
}

.sr-admin-list-row.header {
  min-height: 42px;
  background: var(--sr-admin-surface-soft);
  color: var(--sr-admin-muted);
  font-size: 12px;
  font-weight: 700;
}

.sr-admin-list-row.active {
  background: #f1faf8;
}

.sr-admin-list.document-type .sr-admin-list-row {
  grid-template-columns: 150px minmax(210px, 1fr) minmax(210px, 1fr) 110px 120px 180px;
}

.sr-admin-list.problem-tree .sr-admin-list-row {
  grid-template-columns: 140px minmax(170px, 1fr) minmax(170px, 1fr) minmax(140px, 180px) minmax(170px, 1fr) minmax(130px, 170px) minmax(130px, 170px) 100px 105px 110px;
}

.sr-admin-list.photo-group .sr-admin-list-row {
  grid-template-columns: 140px minmax(190px, 1fr) minmax(130px, 170px) minmax(190px, 1fr) minmax(130px, 170px) 110px 110px;
}

.sr-admin-list.photo-group a.sr-admin-list-row {
  color: inherit;
  text-decoration: none;
}

.sr-admin-list.photo-requirement .sr-admin-list-row {
  grid-template-columns: minmax(190px, 1fr) minmax(190px, 1fr) minmax(220px, 1.2fr) 90px 140px 120px 190px;
}

.sr-admin-list.checklist-template .sr-admin-list-row {
  grid-template-columns: 140px minmax(190px, 1fr) minmax(130px, 170px) minmax(190px, 1fr) minmax(130px, 170px) 110px 110px;
}

.sr-admin-list.checklist-template a.sr-admin-list-row {
  color: inherit;
  text-decoration: none;
}

.sr-admin-list.checklist-item .sr-admin-list-row {
  grid-template-columns: minmax(220px, 1.4fr) minmax(220px, 1.4fr) minmax(200px, 1fr) 90px 150px 120px 190px;
}

.sr-admin-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  border: 1px solid var(--sr-admin-line);
  border-radius: var(--sr-radius);
  overflow: hidden;
  background: #fff;
}

.sr-admin-table th,
.sr-admin-table td {
  padding: 10px 12px;
  border-bottom: 1px solid var(--sr-admin-line);
  vertical-align: top;
  text-align: left;
}

.sr-admin-table th {
  background: var(--sr-admin-surface-soft);
  color: var(--sr-admin-muted);
  font-size: 12px;
  font-weight: 700;
}

.sr-admin-table tbody tr:last-child td {
  border-bottom: 0;
}

.sr-admin-table tbody tr:nth-child(even) {
  background: #f8fafc;
}

.sr-admin-table tbody tr:hover {
  background: #f1faf8;
}

.sr-admin-table.documents th:nth-child(1),
.sr-admin-table.documents td:nth-child(1) {
  width: 170px;
}

.sr-admin-table.documents th:nth-child(4),
.sr-admin-table.documents td:nth-child(4),
.sr-admin-table.documents th:nth-child(5),
.sr-admin-table.documents td:nth-child(5) {
  width: 110px;
}

.sr-admin-table.logs th:nth-child(1),
.sr-admin-table.logs td:nth-child(1) {
  width: 165px;
}

.sr-admin-table.logs th:nth-child(2),
.sr-admin-table.logs td:nth-child(2) {
  width: 95px;
}

.sr-admin-table.logs th:nth-child(3),
.sr-admin-table.logs td:nth-child(3) {
  width: 130px;
}

.sr-admin-table.logs th:nth-child(4),
.sr-admin-table.logs td:nth-child(4) {
  width: 240px;
}

.sr-admin-code-link {
  color: var(--sr-admin-text);
  font-weight: 700;
  text-decoration: none;
}

.sr-admin-code-link:hover,
.sr-admin-code-link:focus {
  color: var(--sr-admin-accent-dark);
}

.sr-admin-group-list {
  display: grid;
  gap: 14px;
}

.sr-admin-group-card {
  display: grid;
  gap: 14px;
  padding: 14px;
  border: 1px solid var(--sr-admin-line);
  border-radius: var(--sr-radius);
  background: #fff;
}

.sr-admin-members {
  display: grid;
  gap: 10px;
  padding-top: 12px;
  border-top: 1px solid var(--sr-admin-line);
}

.sr-admin-member-add {
  display: grid;
  grid-template-columns: minmax(260px, 1fr) auto;
  gap: 8px;
  align-items: center;
  margin: 0;
}

.sr-admin-member-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.sr-admin-member-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 34px;
  margin: 0;
  padding: 6px 8px 6px 10px;
  border: 1px solid var(--sr-admin-line);
  border-radius: 999px;
  background: var(--sr-admin-surface-soft);
}

.sr-admin-member-chip span {
  display: grid;
  gap: 1px;
}

.sr-admin-member-chip strong {
  font-size: 13px;
  line-height: 1.2;
}

.sr-admin-member-chip small {
  color: var(--sr-admin-muted);
  font-size: 11px;
  line-height: 1.2;
}

.sr-admin-member-chip button {
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  border: 0;
  border-radius: 999px;
  background: #e6ebf0;
  color: var(--sr-admin-muted);
  line-height: 1;
}

.sr-admin-empty {
  margin: 0;
  color: var(--sr-admin-muted);
}

.sr-admin-count {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--sr-admin-muted);
  font-size: 13px;
  font-weight: 700;
}

.sr-admin-pagination {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 14px;
}

.sr-admin-summary-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.sr-admin-summary-grid > div {
  min-height: 82px;
  padding: 14px;
  border: 1px solid var(--sr-admin-line);
  border-radius: var(--sr-radius);
  background: #fff;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}

.sr-admin-summary-grid span {
  display: block;
  margin-bottom: 6px;
  color: var(--sr-admin-muted);
  font-size: 12px;
  font-weight: 700;
}

.sr-admin-summary-grid strong {
  display: block;
  color: var(--sr-admin-text);
  font-size: 13px;
  overflow-wrap: anywhere;
}

.sr-admin-row-form {
  margin: 0;
}

.sr-admin-log-level {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 3px 8px;
  border-radius: 999px;
  background: #eef1f4;
  color: var(--sr-admin-muted);
  font-size: 12px;
  font-weight: 700;
}

.sr-admin-log-level.warning {
  background: #fff6dd;
  color: #7a5310;
}

.sr-admin-log-level.danger {
  background: #fff1f0;
  color: var(--sr-admin-danger);
}

.sr-admin-exception {
  margin-top: 8px;
}

.sr-admin-exception summary {
  color: var(--sr-admin-accent-dark);
  font-weight: 700;
}

.sr-admin-exception pre {
  max-height: 320px;
  margin: 8px 0 0;
  padding: 10px;
  overflow: auto;
  border: 1px solid var(--sr-admin-line);
  border-radius: var(--sr-radius);
  background: #f8fafc;
  color: #354252;
  font-size: 12px;
  white-space: pre-wrap;
  word-break: break-word;
}

.sr-admin-page .sr-problem-editor.compact {
  grid-template-columns: minmax(320px, 520px) minmax(360px, 640px);
  gap: 16px;
}

.sr-admin-page .sr-problem-tree-panel,
.sr-admin-page .sr-problem-editor-section {
  border: 1px solid var(--sr-admin-line);
  border-radius: var(--sr-radius);
  background: #fff;
}

.sr-admin-page .sr-problem-tree-actions {
  padding: 12px;
  border-bottom: 1px solid var(--sr-admin-line);
}

.sr-admin-page .sr-problem-tree-row {
  padding: 7px 8px;
  border-bottom: 1px solid var(--sr-admin-line);
}

.sr-admin-page .sr-problem-tree-row.depth-1 { padding-left: 28px; }
.sr-admin-page .sr-problem-tree-row.depth-2 { padding-left: 48px; }
.sr-admin-page .sr-problem-tree-row.depth-3 { padding-left: 68px; }
.sr-admin-page .sr-problem-tree-row.depth-4 { padding-left: 88px; }
.sr-admin-page .sr-problem-tree-row.depth-5 { padding-left: 108px; }

.sr-admin-page .sr-problem-tree-link {
  border-radius: var(--sr-radius);
}

.sr-admin-page .sr-problem-tree-link.active {
  background: #e9f5f3;
  color: var(--sr-admin-accent-dark);
}

.sr-admin-page .sr-problem-editor-section {
  padding: 14px;
  align-self: start;
  background: var(--sr-admin-surface-soft);
}

@media (max-width: 1100px) {
  .sr-detail-grid {
    grid-template-columns: repeat(2, minmax(160px, 1fr));
  }

  .sr-problem-editor {
    grid-template-columns: 1fr;
  }

  .sr-tree-config-row {
    grid-template-columns: 34px 1fr;
  }

  .sr-problem-tree-panel {
    position: static;
    max-height: none;
  }
}

@media (max-width: 680px) {
  .sr-detail-grid,
  .sr-form-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 900px) {
  :root {
    --sr-sidebar-width: 220px;
  }

  .sr-filter-row.two,
  .sr-filter-row.three,
  .sr-filter-row.four,
  .sr-filter-row.five,
  .sr-filter-row.archive {
    grid-template-columns: 1fr;
  }

  .sr-search-row {
    flex-direction: column;
  }
}

@media (max-width: 1180px) {
  .sr-settings-form-row.notification,
  .sr-settings-form-row.document-type {
    grid-template-columns: repeat(2, minmax(180px, 1fr));
  }

  .sr-settings-actions {
    align-self: end;
  }

  .sr-admin-form-row.notification,
  .sr-admin-form-row.document-type,
  .sr-admin-form-row.problem-tree,
  .sr-admin-form-row.photo-group,
  .sr-admin-form-row.photo-requirement,
  .sr-admin-form-row.checklist-template,
  .sr-admin-form-row.checklist-item,
  .sr-admin-form-row.upload-document,
  .sr-admin-filter-row.two,
  .sr-admin-filter-row.three,
  .sr-admin-list.document-type .sr-admin-list-row,
  .sr-admin-list.problem-tree .sr-admin-list-row,
  .sr-admin-list.photo-group .sr-admin-list-row,
  .sr-admin-list.photo-requirement .sr-admin-list-row,
  .sr-admin-list.checklist-template .sr-admin-list-row,
  .sr-admin-list.checklist-item .sr-admin-list-row,
  .sr-admin-page .sr-problem-editor.compact {
    grid-template-columns: 1fr;
  }

  .sr-admin-list-row.header {
    display: none;
  }

  .sr-admin-field.compact span:first-child {
    display: block;
  }

  .sr-admin-member-add {
    grid-template-columns: 1fr;
  }

  .sr-admin-summary-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .sr-admin-dashboard-grid {
    grid-template-columns: 1fr;
  }

  .sr-admin-table {
    display: block;
    overflow-x: auto;
  }
}

@media (max-width: 680px) {
  .sr-settings-form-row.notification,
  .sr-settings-form-row.document-type {
    grid-template-columns: 1fr;
  }

  .sr-admin-page {
    margin: -12px -16px -24px;
    padding: 20px 16px 36px;
  }

  .sr-admin-header,
  .sr-admin-panel-header,
  .sr-admin-members-header {
    display: grid;
  }

  /* Заглавие с действия („Групи снимки": Копирай + Изтрий групата, SR-148): на 320 точки
     двата бутона не се събират до заглавието и стърчаха извън екрана — редът се пренася. */
  .sr-admin-panel-header.with-actions {
    flex-wrap: wrap;
  }

  .sr-admin-panel-header.with-actions form {
    margin-left: 0;
  }

  .sr-admin-tile-grid {
    grid-template-columns: 1fr;
  }

  .sr-admin-metric-grid {
    grid-template-columns: 1fr;
  }

  .sr-admin-summary-grid {
    grid-template-columns: 1fr;
  }
}

/* „Известия — правила": матрицата, която нотификаторът изпълнява, показана на клиента. */
.sr-notif-rules td,
.sr-notif-rules th { text-align: center; }
.sr-notif-rules td:first-child,
.sr-notif-rules th:first-child,
.sr-notif-rules td:last-child,
.sr-notif-rules th:last-child { text-align: left; }
.sr-notif-yes { color: #2e7d32; font-weight: 700; }
.sr-notif-no { color: #9aa5ad; }

.sr-notif-legend {
  margin: 16px 0 8px;
  padding-left: 20px;
  display: grid;
  gap: 6px;
  color: #4a555e;
  font-size: 13px;
}

.sr-admin-intro {
  max-width: 70ch;
  color: #4a555e;
}
.sr-notif-rules td.sr-notif-note { color: #6a7680; font-size: 13px; }

/* Констативен протокол за щета — десктоп секция (SR-86) */

.sr-damage-description {
    margin: 8px 0 12px;
    white-space: pre-wrap;
    word-break: break-word;
}

.sr-damage-photos {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 12px;
}

/* Бял фон нарочно: подписът е PNG с бели пиксели и на тъмна тема прозрачният вариант би
   изглеждал като липсващ образ. */
.sr-damage-signature {
    display: block;
    max-width: 420px;
    width: 100%;
    margin: 4px 0 12px;
    border: 1px solid var(--sr-border, #d0d5dd);
    border-radius: var(--sr-radius);
    background: #ffffff;
}

/* Суровата SMTP реч — вижда я само админ. */
.sr-damage-error {
    color: #b42318;
    word-break: break-word;
}

.sr-inline-form {
    display: inline;
}

/* Попълнен чеклист — десктоп секция (Силвия, 03.09). Цветовете на оценките са същите като на
   телефона, за да не изглежда една и съща проверка различно на двата екрана. */

.sr-checklist-capture {
    margin-bottom: 16px;
}

.sr-checklist-head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 4px 12px;
    margin: 8px 0 6px;
}

.sr-checklist-table td {
    vertical-align: top;
    white-space: normal;
    word-break: break-word;
}

/* Името на точката и бележката носят съдържанието; оценката е етикет и не заслужава колона
   на половин екран. Бележката е причината секцията да съществува — тя получава мястото. */
.sr-checklist-table th:nth-child(1),
.sr-checklist-table td:nth-child(1) {
    width: 42%;
}

/* .sr-table е table-layout: fixed — процентите тук са задължителни, а не подсказка. */
.sr-checklist-table th:nth-child(2),
.sr-checklist-table td:nth-child(2) {
    width: 16%;
}

.sr-checklist-table th:nth-child(3),
.sr-checklist-table td:nth-child(3) {
    width: 42%;
}

/* Снимките на реда (Миро, 06.10.2026) — под бележката, по-малки от галерията на задачата. */
.sr-checklist-photos {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 6px;
}

.sr-checklist-photo {
    width: 72px;
    height: 72px;
}

.sr-rating-badge {
    display: inline-block;
    padding: 1px 8px;
    border-radius: 10px;
    font-size: 12px;
    white-space: nowrap;
    background: #eef1f4;
    color: #56646f;
}

.sr-rating-badge.rating-good {
    background: #cfead9;
    color: #1c5c37;
}

.sr-rating-badge.rating-attention {
    background: #fff6e6;
    color: #96631a;
}

.sr-rating-badge.rating-critical {
    background: #ffe8ee;
    color: #b42344;
    font-weight: 600;
}

/* ---- SR-90: планиране на механиците ---------------------------------------
   Две колони: задачи и механици. Механикът не изчезва, когато е сложен на задача —
   може да носи няколко за деня. */
.sr-planning-grid {
  display: grid;
  grid-template-columns: minmax(0, 3fr) minmax(240px, 1fr);
  gap: 20px;
  align-items: start;
}

@media (max-width: 900px) {
  .sr-planning-grid { grid-template-columns: 1fr; }
}

.sr-planning-column {
  min-width: 0;
}

/* Ивайло, 31.08: „може ли списъкът с механици да се скролва отделно от цялата страница". При
   стотина задачи механиците оставаха далеч горе и влаченето ставаше невъзможно. Колоната се
   залепва за екрана и си превърта своето; заглавието и търсачката остават на място, за да не
   се търси човек с превъртане нагоре. На тесен екран колоните са една под друга — там залепване
   няма смисъл и се изключва. */
@media (min-width: 901px) {
  .sr-planning-column.mechanics {
    position: sticky;
    top: 12px;
    max-height: calc(100vh - 24px);
    display: flex;
    flex-direction: column;
  }

  .sr-planning-column.mechanics .sr-plan-mechanic:first-of-type {
    margin-top: 0;
  }

  .sr-planning-mechanics-scroll {
    overflow-y: auto;
    min-height: 0;
    padding-right: 4px;
  }
}

.sr-plan-task {
  display: block;
  border: 1px solid var(--sr-border);
  border-left: 5px solid #f7c948;
  border-radius: 4px;
  background: #fff;
  padding: 10px 12px;
  margin-bottom: 8px;
}

/* Складовият ремонт е със синя лента навсякъде (Ивайло, 24.08) — и тук. */
.sr-plan-task.workshop { border-left-color: #2d9cdb; }

/* Приоритетът боядисва фона (SR-89); лентата остава на вида задача. */
.sr-plan-task.prio-low { background: #e7f6ec; }
.sr-plan-task.prio-highest { background: #fdd9df; }

.sr-plan-task.drop-target {
  outline: 2px dashed #0c8ed8;
  outline-offset: 2px;
}

.sr-plan-task-top {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font-size: 12px;
}

.sr-plan-due { font-weight: 700; }

.sr-plan-machine { font-weight: 700; margin: 2px 0; }

.sr-plan-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 6px;
}

.sr-plan-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 2px 8px;
  border-radius: 12px;
  background: #eef1f4;
  font-size: 12px;
}

/* Кой е основният трябва да се вижда от пръв поглед — това е искането на клиента. */
.sr-plan-chip.primary {
  background: #ffe082;
  font-weight: 700;
}

.sr-plan-role { color: #56646f; }

.sr-plan-chip button {
  border: 0;
  background: transparent;
  cursor: pointer;
  font-size: 13px;
  line-height: 1;
  padding: 0 2px;
}

.sr-plan-mechanic {
  display: block;
  border: 1px solid var(--sr-border);
  border-radius: 4px;
  background: #fff;
  padding: 8px 10px;
  margin-bottom: 6px;
  cursor: grab;
}

.sr-plan-mechanic > * { display: block; }

.sr-plan-mechanic.picked {
  outline: 2px solid #0c8ed8;
  outline-offset: 1px;
}

.sr-plan-mechanic:focus-visible {
  outline: 2px solid #0c8ed8;
  outline-offset: 1px;
}

.sr-planning-column .plan-search {
  margin-bottom: 8px;
}

.sr-planning-column .plan-hidden-note {
  margin: -4px 0 8px;
}

/* SR-95: скритият пръв submit бутон, който прави „Създай" подразбиращо се действие при Enter.
   Не се ползва display:none — скрит по този начин бутонът не се брои за submit по подразбиране. */
.sr-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Роли на потребител: набор, не една (виж UserProfileRole). Отметките стоят в колона, за да се
   чете кой какъв е с един поглед. */
.sr-role-picker {
  border: 1px solid #d6dbe1;
  border-radius: 6px;
  padding: 8px 10px;
}

.sr-role-picker legend {
  padding: 0 4px;
  font-size: 12px;
  color: #5a6570;
}

.sr-role-option {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 2px 0;
}

.sr-role-option input {
  width: auto;
  margin: 0;
}

/* Задание 0905: „Без проверка" — предупреждение, не състояние. Оранжевото на типа (чипът),
   не червеното: нищо не е спряно, само се казва. */
.sr-status-pill.warn {
  background: var(--sr-orange-tint);
  color: var(--sr-orange-dark);
}

/* Отметка във филтъра, до падащите менюта — същият ред, същата височина. */
.sr-filter-panel .sr-check {
  display: flex;
  align-items: center;
  gap: 6px;
  align-self: end;
  min-height: var(--sr-control-height);
}

/* ---- „Работни дни": календарът под таблицата (06.09) --------------------------------- */
/* Девет месеца по три в ред — изглед върху таблицата отгоре, не втори списък. Клетката е
   линк: работен ден → формата с попълнена дата, почивен ден → редът му; уикендът е текст.
   Почивният ден е бяло върху оранжево мастило (не върху тон — 4.2:1 не минава одита). */
.sr-holiday-calendar {
  display: grid;
  gap: 12px;
  max-width: 1040px;
}

.sr-holiday-calendar-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.sr-holiday-calendar-header h2 {
  margin: 0;
  font-size: 15px;
  font-weight: 700;
}

.sr-holiday-calendar-nav {
  display: flex;
  gap: 6px;
}

.sr-holiday-calendar-nav .sr-button {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
}

.sr-holiday-calendar-legend {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 14px;
  margin: 0;
  color: var(--sr-text-secondary);
  font-size: 12px;
}

.sr-cal-legend-swatch {
  width: 22px;
  min-height: 22px;
  margin-right: -8px;
  font-size: 11px;
}

.sr-holiday-months {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.sr-cal-month {
  padding: 10px 12px 12px;
  border: 1px solid var(--sr-admin-line);
  border-radius: var(--sr-radius);
  background: var(--sr-admin-surface);
}

.sr-cal-month h3 {
  margin: 0 0 8px;
  font-size: 13px;
  font-weight: 700;
  text-transform: capitalize;
}

.sr-cal-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 3px;
}

.sr-cal-weekday {
  padding-bottom: 2px;
  color: var(--sr-text-secondary);
  font-size: 11px;
  font-weight: 600;
  text-align: center;
  text-transform: lowercase;
}

.sr-cal-day {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 30px;
  border: 1px solid transparent;
  border-radius: var(--sr-radius);
  color: var(--sr-text);
  font-family: var(--sr-font-mono);
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  text-decoration: none;
}

.sr-cal-day.workday:hover {
  border-color: var(--sr-orange);
  background: var(--sr-orange-tint);
}

.sr-cal-day.weekend,
.sr-cal-weekday.weekend {
  color: var(--sr-text-secondary);
}

.sr-cal-day.weekend {
  background: var(--sr-admin-surface-soft);
}

.sr-cal-day.holiday {
  border-color: var(--sr-orange-ink);
  background: var(--sr-orange-ink);
  color: #fff;
  font-weight: 600;
}

.sr-cal-day.holiday:hover {
  background: var(--sr-admin-accent-dark);
  border-color: var(--sr-admin-accent-dark);
}

.sr-cal-day.today {
  box-shadow: inset 0 0 0 2px var(--sr-orange);
}

.sr-cal-day:focus-visible,
.sr-holiday-calendar-nav .sr-button:focus-visible {
  outline: 2px solid var(--sr-orange);
  outline-offset: 1px;
}

/* Клик върху почивен ден в календара води тук — редът се отличава, докато е целта на адреса. */
.sr-table tbody tr:target {
  background: var(--sr-selected);
}

@media (max-width: 1180px) {
  .sr-holiday-months {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 680px) {
  .sr-holiday-months {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ---- Телефон (SR-123, Силвия 07.09) ------------------------------------------------- */

/* Бутонът за менюто съществува само под прага; над него лентата стои отляво както винаги. */
.sr-menu-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
  margin-left: -6px;
  border: 0;
  border-radius: var(--sr-radius);
  background: transparent;
  color: var(--sr-text);
  cursor: pointer;
}

.sr-menu-toggle svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
}

.sr-menu-toggle:hover {
  background: var(--sr-panel-alt);
}

.sr-sidebar-backdrop {
  display: none;
}

/* Под 700 px лентата беше 220 px от 393 и страницата се влачеше настрани (снимките на Силвия).
   Лентата става чекмедже, съдържанието взима цялата ширина, а всичко, което е по-широко от
   екрана — таблици, фасети — се превърта в СВОЯ рамка, не заедно със страницата. */
/* На телефон дългите надписи („Приключени задачи за тази машина" — 318 точки в екран от 305)
   се пренасят вместо да излизат извън екрана. Бутоните остават на един ред, докато има място. */
@media (max-width: 700px) {
  .sr-button {
    max-width: 100%;
    white-space: normal;
    padding-top: 6px;
    padding-bottom: 6px;
  }
}

@media (max-width: 700px) {
  .sr-sidebar {
    width: min(300px, 86vw);
    transform: translateX(-100%);
    transition: transform 0.2s ease;
    box-shadow: 0 0 28px rgba(0, 0, 0, 0.35);
  }

  body.sr-sidebar-open .sr-sidebar {
    transform: none;
  }

  .sr-sidebar-backdrop {
    position: fixed;
    inset: 0;
    z-index: 4;
    background: rgba(17, 24, 39, 0.45);
  }

  body.sr-sidebar-open .sr-sidebar-backdrop {
    display: block;
  }

  body.sr-sidebar-open {
    overflow: hidden;
  }

  .sr-main {
    margin-left: 0;
    min-width: 0;
    /* Предпазен клапан: нищо вътре не бива да разтяга страницата настрани. clip, не hidden —
       hidden би убил лепкавия горен ред. */
    overflow-x: clip;
  }

  .sr-menu-toggle {
    display: inline-flex;
  }

  /* Горният ред се пренася: бутон + заглавие + брой на първия ред, търсачката на цяла
     ширина отдолу, действията вдясно. Височината вече не е константа, затова лепкавите
     ленти под него не могат да разчитат на нея — стават обикновени. */
  .sr-topbar {
    height: auto;
    min-height: var(--sr-topbar-height);
    flex-wrap: wrap;
    gap: 6px 10px;
    padding: 6px 12px;
  }

  .sr-topbar-title {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .sr-topbar-search {
    flex: 1 1 100%;
    max-width: none;
    order: 10;
  }

  .sr-topbar-actions .sr-button {
    white-space: nowrap;
  }

  .sr-filterbar,
  .sr-facets {
    position: static;
    max-height: none;
  }

  .sr-content {
    padding: 12px 12px 24px;
  }

  /* Списъкът пази колоните си четими и се превърта в панела (той вече е overflow-x: auto).
     Твърдите колони на таблицата със задачи са 823 px сами по себе си; под това гъвкавата
     колона „Оборудване" ставаше 0 px и текстът ѝ се пишеше върху съседната. */
  .sr-list-panel .sr-table {
    min-width: 1040px;
  }

  /* Административната страница анулира отстъпа на .sr-content с отрицателен margin — тук
     отстъпът е 12 px, значи и той. Колоната на решетката е minmax(0, …) и децата ѝ са с
     min-width: 0, иначе таблицата отдолу (560 px) разпъва и заглавието, и формата над себе си. */
  .sr-admin-page {
    margin: -12px -12px -24px;
    padding: 14px 12px 28px;
    grid-template-columns: minmax(0, 1fr);
  }

  .sr-admin-page > * {
    min-width: 0;
  }

  /* Таблици извън списъчния панел (Клиенти, Превозни средства, потребители…) стават свой
     превъртащ се блок. */
  .sr-admin-page .sr-table,
  .sr-detail-grid .sr-table {
    display: block;
    overflow-x: auto;
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }

  .sr-admin-page .sr-table thead,
  .sr-admin-page .sr-table tbody,
  .sr-detail-grid .sr-table thead,
  .sr-detail-grid .sr-table tbody {
    display: table;
    width: 100%;
    min-width: 560px;
    table-layout: auto;
  }

  /* ЕРП: фасетите над списъка, не до него. */
  .sr-erp-layout {
    flex-direction: column;
  }

  .sr-facets {
    /* align-self: flex-start в колонен ред значи „свий се по съдържанието" — фасетите ставаха
       498 px и броевете излизаха извън екрана. Разпъват се, а дългата колона се превърта сама,
       за да не избута списъка с машините под три екрана фасети. */
    align-self: stretch;
    width: auto;
    flex: none;
    max-height: 40vh;
    overflow-y: auto;
    border-right: 0;
    border-bottom: 1px solid var(--sr-border);
  }

  .sr-facet-label {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .sr-task-body,
  .sr-task-extras,
  .sr-detail-grid,
  .sr-form-grid,
  .sr-admin-tile-grid,
  .sr-settings-form-row {
    grid-template-columns: minmax(0, 1fr);
  }

  .sr-page-actions-top,
  .sr-admin-header {
    flex-wrap: wrap;
    gap: 8px;
  }

  /* Задачата в pop-up: на телефон прозорецът е целият екран, иначе кадърът е пощенска марка. */
  .sr-task-modal .modal-dialog {
    margin: 0;
    max-width: 100vw;
    height: 100dvh;
  }

  .sr-task-modal .modal-content {
    height: 100dvh;
    border: 0;
    border-radius: 0;
  }

  .sr-task-modal .modal-body {
    height: auto;
    flex: 1 1 auto;
  }
}

/* Панелът с филтри се отваря спрямо своя чип, който стои на 28 точки от левия ръб — при 305
   точки видима ширина последните 19 от панела оставаха извън екрана. На телефон котвата става
   цялата лента с филтри и панелът застава точно в нея, от ръб до ръб (Миро, 07.09: „трябва да
   сме перфектни"). Затова .sr-filterbar тук е relative — редът по-горе го прави static, за да
   го отлепи, и този идва СЛЕД него нарочно. */
@media (max-width: 700px) {
  .sr-filterbar,
  .sr-facets {
    position: relative;
  }

  .sr-filter-menu {
    position: static;
  }

  .sr-filter-panel {
    left: 0;
    right: 0;
    min-width: 0;
    max-width: none;
  }
}

/* SR-130: общият редактор на обхвата (Настройки → Групи снимки / Чеклисти / Въпросници).
   Един ред за типа задача и нивото, отдолу панелът само на избраното ниво. Чиповете са
   същите като филтрите на списъците; номенклатурата носи и името си, защото „12002" само
   по себе си не казва нищо. */
.sr-scope-editor {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: minmax(160px, 220px) minmax(180px, 260px);
  gap: 10px;
  align-items: end;
}

.sr-scope-level {
  grid-column: 1 / -1;
  display: grid;
  gap: 8px;
}

.sr-scope-label,
.sr-scope-hint {
  font-size: 12px;
  color: var(--sr-text-secondary);
}

.sr-scope-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  min-height: 30px;
  padding: 4px 0;
}

.sr-scope-chips .sr-chip {
  height: auto;
  min-height: 26px;
  padding: 3px 9px;
  white-space: normal;
}

.sr-scope-chips .sr-chip.muted {
  opacity: 0.6;
  text-decoration: line-through;
}

.sr-scope-chip-title {
  font-weight: 400;
  color: var(--sr-text-secondary);
}

.sr-scope-empty {
  font-size: 12px;
  color: var(--sr-text-secondary);
}

.sr-scope-group-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 4px 12px;
  max-height: 240px;
  overflow-y: auto;
  padding: 6px 8px;
  border: 1px solid var(--sr-border);
  border-radius: 8px;
}

.sr-scope-group-option {
  font-size: 13px;
}

.sr-scope-search {
  position: relative;
  max-width: 520px;
}

.sr-scope-results {
  position: absolute;
  z-index: 20;
  left: 0;
  right: 0;
  margin: 4px 0 0;
  padding: 4px 0;
  list-style: none;
  max-height: 280px;
  overflow-y: auto;
  background: var(--sr-panel);
  border: 1px solid var(--sr-border);
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}

.sr-scope-result {
  display: flex;
  gap: 10px;
  padding: 6px 12px;
  font-size: 13px;
  cursor: pointer;
}

.sr-scope-result strong {
  min-width: 52px;
}

.sr-scope-result:hover,
.sr-scope-result.active {
  background: var(--sr-orange-tint);
}

.sr-scope-result.muted {
  color: var(--sr-text-secondary);
  cursor: default;
}

.sr-scope-result.taken {
  opacity: 0.5;
}

.sr-scope-paste summary {
  cursor: pointer;
  font-size: 12px;
  color: var(--sr-text-secondary);
}

.sr-scope-paste textarea {
  margin: 6px 0;
  max-width: 520px;
}

.sr-admin-list-row .sr-admin-status.warning {
  color: var(--sr-danger, #b3261e);
}

.sr-admin-list-row .sr-scope-values {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

@media (max-width: 600px) {
  .sr-scope-editor {
    grid-template-columns: 1fr;
  }
}

/* SR-130: формите и списъците на трите настройки с общ обхват. Първият ред е код, имена,
   отметка и бутон; редакторът на обхвата заема целия втори ред. */
.sr-admin-form-row.scoped-config {
  grid-template-columns: minmax(110px, 150px) minmax(180px, 1fr) minmax(180px, 1fr) auto auto;
}

.sr-admin-form-row.scoped-config.checklist {
  grid-template-columns: minmax(110px, 150px) minmax(180px, 1fr) minmax(180px, 1fr) auto auto auto;
}

.sr-admin-list.scoped-config .sr-admin-list-row {
  grid-template-columns: minmax(110px, 150px) minmax(180px, 1fr) minmax(120px, 160px) minmax(120px, 160px) minmax(180px, 1.2fr) minmax(70px, 90px) minmax(80px, 100px);
}

.sr-admin-list.scoped-config.problem-tree .sr-admin-list-row {
  grid-template-columns: minmax(110px, 150px) minmax(180px, 1fr) minmax(120px, 160px) minmax(120px, 160px) minmax(180px, 1.2fr) minmax(70px, 90px) minmax(80px, 100px);
}

.sr-admin-panel-header form {
  margin-left: auto;
}

.sr-admin-list.scoped-config a.sr-admin-list-row {
  color: inherit;
  text-decoration: none;
}

.sr-admin-panel-header.with-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

@media (max-width: 900px) {
  .sr-admin-form-row.scoped-config,
  .sr-admin-form-row.scoped-config.checklist,
  .sr-admin-list.scoped-config .sr-admin-list-row,
  .sr-admin-list.scoped-config.problem-tree .sr-admin-list-row {
    grid-template-columns: 1fr;
  }
}

/* SR-130: трите страници влязоха в машинния одит на дизайна и той намери старите колони с
   фиксирани минимуми при кадрите и точките (снимки: 7 колони ≥ 1140px, точки: 8 колони ≥
   1230px) да стърчат на 1280 и 1440. Под 1600 редовете се пренареждат в колкото колони
   се съберат, с етикет над всяко поле, както вече става на телефон. */
@media (max-width: 1600px) {
  .sr-admin-form-row.photo-requirement,
  .sr-admin-form-row.checklist-item,
  .sr-admin-list.photo-requirement .sr-admin-list-row,
  .sr-admin-list.checklist-item .sr-admin-list-row {
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  }

  .sr-admin-list.photo-requirement .sr-admin-list-row.header,
  .sr-admin-list.checklist-item .sr-admin-list-row.header {
    display: none;
  }

  .sr-admin-list.photo-requirement .sr-admin-field.compact span:first-child,
  .sr-admin-list.checklist-item .sr-admin-field.compact span:first-child {
    display: block;
  }
}

/* И редакторът на възлите на въпросника на 320 точки: двуколонната решетка на формата и
   грид-децата без min-width: 0 избутваха панела с 111px извън екрана. */
@media (max-width: 680px) {
  .sr-admin-page .sr-problem-editor.compact > * ,
  .sr-problem-editor > * {
    min-width: 0;
  }

  .sr-form-grid.compact {
    grid-template-columns: 1fr;
  }
}

/* Отметката „Позволява Неприложимо" е по-дълга от най-тясната колона на пренаредения ред. */
@media (max-width: 1600px) {
  .sr-admin-form-row.checklist-item .sr-admin-check,
  .sr-admin-list.checklist-item .sr-admin-check,
  .sr-admin-form-row.photo-requirement .sr-admin-check,
  .sr-admin-list.photo-requirement .sr-admin-check {
    min-width: 0;
    white-space: normal;
    height: auto;
    padding-block: 6px;
  }
}

/* ---- „Предложи превод" (задание 1002) --------------------------------------------------- */

.sr-translate-link {
  display: block;
  width: calc(100% - 28px);
  margin: 6px 14px 0;
  padding: 0;
  border: 0;
  background: none;
  color: var(--sr-sidebar-text);
  font: inherit;
  font-size: 11px;
  text-align: left;
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
}

.sr-translate-link:hover,
.sr-translate-link:focus-visible {
  color: var(--sr-sidebar-text-strong);
}

.sr-translate-dialog {
  width: min(520px, calc(100vw - 32px));
  max-height: calc(100vh - 32px);
  padding: 0;
  border: 1px solid var(--sr-border, #d0d4d8);
  border-radius: var(--sr-radius);
  color: inherit;
  background: #fff;
}

.sr-translate-dialog::backdrop {
  background: rgba(20, 24, 28, 0.45);
}

.sr-translate-form {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 20px 20px 16px;
}

.sr-translate-form h2 {
  margin: 0;
  font-size: 17px;
}

.sr-translate-intro {
  margin: 0;
  color: var(--sr-muted, #555b62);
  font-size: 13px;
  line-height: 1.45;
}

.sr-translate-form .sr-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.sr-translate-form textarea.sr-input {
  resize: vertical;
  min-height: 72px;
  height: auto;
  padding-top: 8px;
  padding-bottom: 8px;
}

.sr-translate-results {
  margin: -4px 0 0;
  padding: 0;
  list-style: none;
  max-height: 200px;
  overflow-y: auto;
  border: 1px solid var(--sr-border, #d0d4d8);
  border-radius: var(--sr-radius);
}

.sr-translate-results li + li {
  border-top: 1px solid var(--sr-border, #d0d4d8);
}

.sr-translate-result {
  display: block;
  width: 100%;
  padding: 8px 10px;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.sr-translate-result:hover,
.sr-translate-result:focus-visible {
  background: var(--sr-row-hover, #f3f4f6);
}

.sr-translate-empty {
  padding: 8px 10px;
  color: var(--sr-muted, #555b62);
  font-size: 13px;
}

.sr-translate-picked {
  padding: 8px 10px;
  border-left: 3px solid var(--sr-accent, #fe6f2e);
  background: var(--sr-row-hover, #f3f4f6);
  border-radius: var(--sr-radius);
}

.sr-translate-status {
  margin: 0;
  min-height: 1.2em;
  font-size: 13px;
  color: var(--sr-success, #1f7a3a);
}

.sr-translate-status-error {
  color: var(--sr-danger, #b3261e);
}

.sr-translation-suggestions td {
  vertical-align: top;
}

.sr-translation-suggestions .sr-inline-form {
  display: inline-block;
  margin: 0 4px 4px 0;
}

/* Дата и час в 24 часа (05.10): датата се разтяга, часът и минутите са тесни менюта; на тесен
   екран (десктопът от телефон, SR-123) часът и минутите слизат заедно под датата. */
.dt24 {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  min-width: 0;
}

.dt24 > input[type="date"] {
  flex: 1 1 10rem;
  min-width: 0;
}

.dt24 select.dt24-part {
  flex: 0 0 auto;
  width: 4.75rem;
  min-width: 0;
}

.dt24-time {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: 0 0 auto;
}

.dt24-colon {
  font-weight: 600;
}

/* Задължително поле в уеб формите (06.10) — звездичка след надписа, както в приложението. */
.sr-field.sr-required > span:first-child::after {
  content: " *";
  color: var(--sr-danger, #b3261e);
  font-weight: 600;
}

/* Docs/tasks/1010: „Синхронизации" — отказан/висящ/застопорен цикъл е червен, достигнат лимит — жълт. */
.sr-syncs-tabs {
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 14px;
}

.sr-admin-table tr.sr-syncs-bad td {
  background: #fff1f0;
}

.sr-admin-table tr.sr-syncs-warn td {
  background: #fff6dd;
}

.sr-syncs-flag {
  font-size: 12px;
  font-weight: 700;
  color: #7d1226;
}

.sr-syncs-examples-label {
  margin-top: 6px;
  font-size: 12px;
  font-weight: 700;
}

.sr-syncs-examples {
  margin: 2px 0 0;
  padding-left: 18px;
  font-size: 12px;
}

.sr-syncs-note {
  max-width: 520px;
  overflow-wrap: anywhere;
}