:root{
  /* ЛЕСНИ НАСТРОЙКИ НА ШИРИНИ (твоята конфигурация) */
  --row1-taskno: 56px;   /* № карта = job номерът от INEXTIA (5 цифри) */
  --row1-machine: 230px; /* Компонент: име (до 2 реда) + български превод + № */
  --row1-date: 92px;    /* Дата/час — ограничителят е ДАТАТА: 89px при 14px шрифт (етикетът иска само 79px) */
  --row1-prio: 120px;   /* по най-дългата плочка „Нормален“ = 115px (мерено НА МЯСТО, 17.07) */
  --row1-status: 136px; /* по „Отхвърлена“ = 132px — най-дългата, макар още да няма такава задача */
  --row1-by: 152px;     /* Създал — по най-дългото име (147px) */

  /* светла тема */
  --bg:#f6f7f9; --card:#ffffff; --text:#111; --muted:#667085; --edge:#e5e7eb;
  --green:#0a7a45; --green-ink:#064b2a; --pill:#eef7f1;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg);color:var(--text);font-family:system-ui,Segoe UI,Roboto,sans-serif}
a{color:inherit}

.topbar{position:sticky;top:0;z-index:10;background:var(--green);display:flex;justify-content:space-between;gap:12px;align-items:center;padding:10px 14px;color:#fff}
.brand{font-weight:600;font-size:24px;cursor:pointer;position:relative;line-height:1.2}
.brand .user-info{font-size:24px;font-weight:600}
.brand .user-info > div:first-child{font-size:24px;font-weight:600}
.controls{display:flex;gap:8px;align-items:center}
.controls input,.controls select{padding:8px 10px;border-radius:8px;border:1px solid #0d5834;min-width:180px}
.controls button{background:#fff;color:var(--green-ink);border:none;border-radius:8px;padding:8px 12px;cursor:pointer}
.controls button:hover{background:#f0f5f1}

/* USER DROPDOWN MENU */
.user-menu-wrapper {
  position: relative;
  line-height: 1.3;
}

.user-info {
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 6px;
  transition: background-color 0.2s;
}

.user-info:hover {
  background-color: rgba(255, 255, 255, 0.1);
}

.user-dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  margin-top: 8px;
  background: white;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  min-width: 200px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-10px);
  transition: all 0.2s ease;
  z-index: 1000;
  overflow: hidden;
}

.user-dropdown.show {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.dropdown-item {
  padding: 12px 16px;
  color: #111;
  cursor: pointer;
  transition: background-color 0.15s;
  font-size: 14px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.dropdown-item:hover {
  background-color: #f3f4f6;
}

.dropdown-item:first-child {
  border-top-left-radius: 8px;
  border-top-right-radius: 8px;
}

.dropdown-item:last-child {
  border-bottom-left-radius: 8px;
  border-bottom-right-radius: 8px;
}

.dropdown-divider {
  height: 1px;
  background-color: #e5e7eb;
  margin: 4px 0;
}

.container{max-width:none;width:100%;margin:16px 0;padding:0 12px}
.health{margin:10px 0;color:var(--muted);font-size:14px}
.banner{margin:10px 0;padding:10px 12px;border:1px dashed #eab308;background:#fefce8;color:#713f12;border-radius:10px}
.hidden{display:none}

/* Карти — една колона, пълен ред */
.cards{display:flex;flex-direction:column;gap:15px}

/* Карта */
.card{
  width:100%;
  background:var(--card);
  border:1px solid var(--edge);
  border-radius:14px;
  box-shadow:0 3px 8px rgba(0,0,0,.10), 0 1px 2px rgba(0,0,0,.06);
  overflow:hidden;
}
.card .body{padding:12px 12px 12px 8px}

/* Пилчета */
.pill{display:inline-block;padding:2px 8px;border-radius:999px;background:var(--pill);border:1px solid var(--edge);font-size:12px}

/* Ред 1 — № | Машина (fixed) | Заглавие (flex:1) | другите компактни */
.card .row1{display:flex;flex-wrap:nowrap;gap:8px;align-items:stretch;width:100%}  /* 12px→8px: въздухът отива в заглавието */
.card .row1 .kv{display:flex;flex-direction:column;min-width:0}
.kv .label{font-size:12px;color:var(--muted);text-align:center}
.kv .value{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-align:center}

/* № карта */
.kv.no{flex:0 0 var(--row1-taskno)}

/* Машина: име + № на 2 реда (фиксирана ширина) */
.kv.machine{flex:0 0 140px}
.kv.machine .value{display:flex;flex-direction:column;align-items:center}
.kv.machine .mach-name{font-weight:700;line-height:1.2}
.kv.machine .mach-num{font-size:12px;color:var(--muted);line-height:1.1}

/* Заглавие – динамично: взема остатъка */
.kv.title{flex:1 1 auto;min-width:0}

/* Компактни плочки */
.kv.prio   {flex:0 0 var(--row1-prio)}
.kv.status {flex:0 0 var(--row1-status)}
.kv.assignedBy{flex:0 0 var(--row1-by)}
.kv.date   {flex:0 0 var(--row1-date)}
.kv .date{font-weight:600;display:block;font-size:14px}  /* 16px→14px: 3-те дати пестят 42px за заглавието */
.kv .time{font-size:12px;color:var(--muted);display:block}

/* Ред 2 — три кутии */
.row2{display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px;margin-top:12px}
.box{border:1px solid var(--edge);border-radius:10px;background:#fafafa;padding:10px;display:flex;flex-direction:column;gap:6px;text-align:center;box-shadow:0 2px 5px rgba(0,0,0,.07)}
.box .k{font-size:12px;color:var(--muted)}
.box .v{font-size:14px}

/* Отзивчивост */
@media (max-width:1280px){
  /* На тесен екран редът и без това се скролва хоризонтално — държим същите
     измерени минимуми, вместо стойности, при които етикетите се режат. */
  .kv.assignedBy{flex:0 0 var(--row1-by)}
  .kv.prio{flex:0 0 var(--row1-prio)}
  .kv.status{flex:0 0 var(--row1-status)}
  .kv.date{flex:0 0 var(--row1-date)}
}
@media (max-width:960px){
  .row2{grid-template-columns:1fr}
}

/* ---- МОДАЛИ (красиви, с размазан бекграунд) ---- */
dialog::backdrop{
  background: rgba(17,17,17,.35);
  -webkit-backdrop-filter: blur(6px) saturate(120%);
  backdrop-filter: blur(6px) saturate(120%);
}
.modal{
  width:min(900px,96vw);
  background:#fff;
  color:#111;
  border:1px solid var(--edge);
  border-radius:16px;
  padding:18px;
  display:flex;flex-direction:column;gap:14px;
  box-shadow:
    0 10px 20px rgba(0,0,0,.08),
    0 6px 6px rgba(0,0,0,.06);
}
.modal h3{margin:0 0 6px 0}
.modal .actions{display:flex;justify-content:flex-end;gap:10px}
.modal .actions button{
  padding:10px 14px;border-radius:10px;border:1px solid var(--edge);background:#fff;cursor:pointer
}
.modal .actions button:hover{background:#f3f4f6}

.form-grid{display:grid;gap:12px;grid-template-columns:repeat(2,1fr)}
.form-grid .span-2{grid-column:1 / -1}
.form-grid label{display:flex;flex-direction:column;gap:6px;font-size:14px}
.form-grid input,.form-grid select,.form-grid textarea{
  padding:10px;border:1px solid var(--edge);border-radius:10px;background:#fff;color:#111;
  /* textarea/input НЕ наследяват шрифта по подразбиране — оттам „чуждият“ вид на полето */
  font:inherit;width:100%;box-sizing:border-box
}
.form-grid textarea{resize:vertical;min-height:76px;line-height:1.45}

/* Multi-select dropdown */
.multi-select-wrapper {
  position: relative;
  width: 100%;
}

.multi-select-display {
  border: 1px solid var(--edge);
  border-radius: 8px;
  padding: 10px;
  background: white;
  cursor: pointer;
  min-height: 42px;
  display: flex;
  align-items: center;
}

.multi-select-display:hover {
  border-color: var(--green);
}

.multi-select-dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: white;
  border: 1px solid var(--edge);
  border-radius: 8px;
  margin-top: 4px;
  max-height: 170px;
  overflow-y: auto;
  display: none;
  z-index: 1000;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

.multi-select-dropdown.open {
  display: block;
}

.executor-option {
  padding: 10px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
}

.executor-option:hover {
  background: #f5f5f5;
}

.executor-option input[type="checkbox"] {
  width: 18px;
  height: 18px;
  cursor: pointer;
}

.executor-label {
  cursor: pointer;
  flex: 1;
}

/* 2025-09-08 tweaks */
.kv.no {
  margin-left: 0;
  padding-left: 0;
}

.kv.no .label {
  text-align: center;
  display: block;
  width: 100%;
}

.kv.no .value {
  text-align: center;
  width: auto;
  min-width: auto;
  max-width: 100%;
  display: block;
  margin: 0;
  padding-left: 0;
}

.row1 .kv.no {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;  /* ← това е ключът за ляво подравняване */
}

.row1 .kv.machine .value{
  align-items: center;
}
.row1 .kv.machine .value .mach-name,
.row1 .kv.machine .value .mach-num{
  text-align: center;
  width: 100%;
}

.kv.date .value .time:empty{ display: none; }

.row1 .kv.no{
  display: grid;
  justify-items: center;
  align-content: center;
  text-align: center;
}
.row1 .kv.no .label{
  margin: 0;
}
.row1 .kv.no .value{
  /* Беше width:3ch — заковано на 3 знака от времето, когато тук стоеше MLog № (напр. 113).
     Сега показваме job номера от INEXTIA (5 цифри, напр. 31933) и 3ch го режеше на „3…“. */
  width: 100%;
  min-width: 0;
  max-width: 100%;
  text-align: center;
  margin: 0 auto;
  display: block;
}

dialog,
dialog[open],
#settingsDlg,
#createDlg{
  border: none !important;
  outline: none !important;
  background: transparent;
  padding: 0;
}
dialog:focus,
dialog:focus-visible,
#settingsDlg:focus,
#createDlg:focus{ outline: none !important; }

#settingsDlg::backdrop,
#createDlg::backdrop{
  background: rgba(0,0,0,.45);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
}

#settingsDlg > *,
#createDlg > *{
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 20px 60px rgba(0,0,0,.20);
  border: 1px solid rgba(0,0,0,.06);
}

#search{
  width: clamp(220px, 26vw, 420px);
  max-width: 100%;
}
#priorityFilter{
  margin-left: 8px;
  height: 36px;
  padding: 4px 10px;
  border-radius: 10px;
  border: 1px solid rgba(0,0,0,.12);
  background: #fff;
}

#logoutBtn{
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  color: #fff !important;
  font-weight: 500;
  cursor: pointer;
}
#logoutBtn:hover{ text-decoration: underline; }

.kv.prio .value .pill,
.kv.status .value .pill{
  font-weight: 700;
  font-size: 0.95rem;
  line-height: 1.2;
  padding: 4px 12px;
}

.pill{ border:1px solid transparent; border-radius:999px; }

.pill.prio.prio-low{
  background: #4CAF50;
  color: #ffffff;
  border-color: #4CAF50;
}
.pill.prio.prio-normal, .pill.prio.prio-medium{
  background: #FFC107;
  color: #ffffff;
  border-color: #FFC107;
}
.pill.prio.prio-high{
  background: #FF9800;
  color: #ffffff;
  border-color: #FF9800;
}
.pill.prio.prio-critical{
  background: #F44336;
  color: #ffffff;
  border-color: #F44336;
}
.pill.prio.prio-urgent{
  background: #EF4444;
  color: #ffffff;
  border-color: #EF4444;
}





.pill.status.status-created {
  background: #0284c7;
  color: #ffffff;
  border-color: #0284c7;
}
.pill.status.status-assigned{
  background:#e8a33d; color:#fff; border-color:#e8a33d;   /* съгласувано с кехлибарената карта */
}
.pill.status.status-started, .pill.status.status-in_progress{
  background:#4a90d9; color:#fff; border-color:#4a90d9;
}
.pill.status.status-done, .pill.status.status-completed{
  background: #00A34A;
  color: #ffffff;
  border-color: #00A34A;
}
.pill.status.status-rejected {
  background: #dc2626;
  color: #ffffff;
  border-color: #dc2626;
}

/* НОВ - за преназначени задачи */
.pill.status.status-superseded {
  background-color: #9ca3af;
  color: white;
}

/* Специален стил за цялата картичка на преназначена задача */
.pill.status.card.superseded {
  opacity: 0.8;
  border-left: 4px solid #9ca3af;
  background-color: #f9fafb;
}

/* ============================================ */
/* SPINNER ANIMATION - САМО ЗА БУТОНИТЕ        */
/* ============================================ */

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

.btn-spinner {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  justify-content: center;
}

.btn-spinner svg {
  animation: spin 1s linear infinite;
}

/* Бутон за преназначаване */
.reassign-btn {
  background: #059669;
  color: white;
  border: none;
  padding: 6px 12px;
  border-radius: 6px;
  font-size: 13px;
  cursor: pointer;
  font-weight: 600;
  transition: background 0.2s;
}

.reassign-btn:hover {
  background: #047857;
}

.reassign-btn:active {
  background: #065f46;
  transform: scale(0.98);
}

/* Footer */
.footer {
	color: #0a7a45;
	text-align: center;
	padding: 10px 0;
	font-size: 13px;
	margin-top: 40px;
}

/* ==== 2.0 port additions ==== */
.pager{display:flex;gap:12px;align-items:center;justify-content:center;margin:16px 0;color:var(--muted);font-size:14px}
.pager button{padding:8px 14px;border-radius:10px;border:1px solid var(--edge);background:#fff;cursor:pointer}
.pager button:disabled{opacity:.5;cursor:default}
.card{cursor:pointer;transition:box-shadow .15s, transform .15s}
.card:hover{box-shadow:0 6px 16px rgba(0,0,0,.14); transform:translateY(-1px)}
.card:hover{box-shadow:0 3px 10px rgba(0,0,0,.10)}

/* машинен избор в "Нова задача" */
.multi-select-wrapper .picked,.picked{font-size:12px;color:var(--green-ink);margin-top:4px}
.machine-option{padding:8px 10px;cursor:pointer;border-bottom:1px solid #f0f0f0}
.machine-option:hover{background:#f5f5f5}
#c_machine_dropdown{max-height:220px}

/* детайлен модал */
#detailModal{width:min(760px,96vw)}
.detail-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px 18px;margin-bottom:12px;font-size:14px}
.detail-desc{border:1px solid var(--edge);border-radius:10px;background:#fafafa;padding:10px;margin-bottom:12px;font-size:14px}
.events{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:8px;max-height:320px;overflow:auto}
.events li{border:1px solid var(--edge);border-radius:10px;padding:8px 10px;background:#fff}
.events .ev-type{font-weight:700;color:var(--green-ink)}
.events .ev-meta{font-size:12px;color:var(--muted);margin-left:8px}
.events .ev-note{margin-top:4px;font-size:13px}
.act-btn{padding:10px 14px;border-radius:10px;border:1px solid var(--green);background:var(--green);color:#fff;cursor:pointer;font-weight:600}
.act-btn:hover{background:var(--green-ink)}
#detailModal h4{margin:8px 0 6px 0}

/* ==== Задание К: verify badges, voltage, reject, assign диалог ==== */
.pill.verify{font-weight:700;font-size:.8rem;padding:2px 8px}
.pill.verify-qr{background:#00A34A;color:#fff;border-color:#00A34A}
.pill.verify-manual{background:#FFC107;color:#7a5b00;border-color:#FFC107}

/* отхвърлена задача */
.pill.status.status-rejected{background:#dc2626;color:#fff;border-color:#dc2626}
/* Статусът се чете от самата карта: БЛЕД фон (контекст) + наситена лява ивица (периферно око).
   Схемата на Ненко, 18.07.2026: зелено=приключена · синьо=в ход · оранжево=назначена · червено=отхвърлена. */
.card.st-completed{background:#e2f2e7;border:1px solid #2f9e63;border-left:5px solid #2f9e63}
.card.st-started  {background:#e0edfa;border:1px solid #3d84d1;border-left:5px solid #3d84d1}
.card.st-assigned {background:#faedd4;border:1px solid #dd9427;border-left:5px solid #dd9427}
.card.st-rejected {background:#f9e3e3;border:1px solid #dc2626;border-left:5px solid #dc2626}

/* Вътрешните кутии носят същия цвят, само по-блед (искане на Ненко, 18.07) —
   между фона на картата и бялото, за да остане текстът четим. */
.card.st-completed .box{background:#f1f8f3;border-color:#cfe6d8}
.card.st-started   .box{background:#eef5fc;border-color:#cadef2}
.card.st-assigned  .box{background:#fcf5e6;border-color:#ecd9b5}
.card.st-rejected  .box{background:#fcf0f0;border-color:#eec8c8}
.box-rejected{background:#fee2e2!important;border-color:#fca5a5!important}
.box-rejected .k{color:#991b1b;font-weight:600}
.box-rejected .v{color:#7f1d1d}
.detail-rejected{background:#fee2e2;border-color:#fca5a5;color:#7f1d1d}
.act-btn-danger{background:#dc2626!important;border-color:#dc2626!important}
.act-btn-danger:hover{background:#991b1b!important}

/* диалог за назначаване */
.assign-list{max-height:280px;overflow:auto;border:1px solid var(--edge);border-radius:10px;padding:6px;margin-bottom:6px}
.assign-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:8px 10px;border-bottom:1px solid #f0f0f0}
.assign-row:last-child{border-bottom:none}
.assign-row:hover{background:#f7f7f7}
.assign-pick{display:flex;align-items:center;gap:8px;cursor:pointer;flex:1}
.assign-pick .pos{color:#666;font-size:12px}
.assign-primary{display:flex;align-items:center;gap:6px;cursor:pointer;color:#7f1d1d;font-size:13px;font-weight:600;white-space:nowrap}
.hint{color:var(--muted);font-size:13px;margin:-4px 0 8px}

/* ==== Задание У: "Отговорен" (select) + "Помощници" (custom multi-select) във формата ==== */
.ms-wrap{position:relative;width:100%}
.ms-display{
  padding:10px;border:1px solid var(--edge);border-radius:10px;background:#fff;color:#111;
  cursor:pointer;min-height:42px;display:flex;align-items:center;justify-content:space-between;gap:8px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:14px;
}
.ms-display::after{content:"▾";color:var(--muted);flex:0 0 auto}
.ms-display:hover{border-color:var(--green)}
.ms-display:focus{outline:none;border-color:var(--green)}
.ms-display.ms-placeholder{color:#8a8a8a}
.ms-dropdown{
  position:absolute;top:100%;left:0;right:0;z-index:1000;display:none;
  background:#fff;border:1px solid var(--edge);border-radius:10px;margin-top:4px;
  max-height:220px;overflow-y:auto;box-shadow:0 4px 12px rgba(0,0,0,.15);
}
.ms-dropdown.open{display:block}
/* Редът е label ВЪТРЕ в .form-grid, а там глобалното правило е flex-direction:column —
   затова изрично налагаме хоризонтален ред (чекбокс отпред, текст след него). */
.form-grid .ms-option,
.ms-option{
  display:flex;
  flex-direction:row;
  align-items:center;
  justify-content:flex-start;
  gap:10px;
  padding:9px 10px;
  margin:0;
  cursor:pointer;
  font-size:14px;
  line-height:1.3;
  text-align:left;
  flex-wrap:nowrap;                 /* елементите не се пренасят */
  border-bottom:1px solid #f2f2f2;
}
.ms-option:last-child{border-bottom:none}
.ms-option:hover{background:#f5f7f6}          /* hover на целия ред */
.ms-option:has(input:checked){background:#eef7f1}
.ms-option input[type="checkbox"]{
  width:17px;height:17px;flex:0 0 auto;margin:0;cursor:pointer;
}
.ms-option .ms-name{                           /* дългите имена се режат, не се пренасят */
  flex:1 1 auto;min-width:0;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.ms-option .pos{color:var(--muted);font-size:12px}
.ms-empty{padding:10px;color:#999;font-size:13px}

/* ==== Задание Ф: badge за задачи, импортирани от INEXTIA ==== */
.src-badge{
  display:inline-block;margin-top:3px;padding:1px 6px;border-radius:6px;
  background:#0284c7;color:#fff;font-size:9px;font-weight:700;letter-spacing:.4px;line-height:1.5;
}
.src-badge.inline{margin:0 0 0 8px;font-size:11px;vertical-align:middle;padding:2px 8px}

/* ==== Задание Х: дървовиден избор на машина ==== */
.machine-row{display:flex;flex-direction:row;align-items:center;gap:8px;width:100%}
.tree-btn{
  flex:0 0 auto;padding:10px 12px;border:1px solid var(--edge);border-radius:10px;background:#fff;
  color:var(--green-ink);cursor:pointer;font-size:13px;font-weight:600;white-space:nowrap;
}
.tree-btn:hover{border-color:var(--green);background:#f2f8f4}

.tree-modal{width:min(760px,96vw)}
.tree-search{
  width:100%;padding:10px 12px;border:1px solid var(--edge);border-radius:10px;font-size:14px;margin-bottom:8px;
}
.tree-search:focus{outline:none;border-color:var(--green)}
.tree-picked{
  font-size:13px;color:var(--green-ink);background:#f2f8f4;border:1px solid #d6e9dd;
  border-radius:8px;padding:8px 10px;margin-bottom:8px;
}
.tree-box{
  border:1px solid var(--edge);border-radius:10px;background:#fff;
  height:min(52vh,420px);overflow:auto;font-size:14px;
}
.tree-row{
  display:flex;align-items:center;gap:8px;padding:5px 8px;cursor:pointer;white-space:nowrap;
  border-bottom:1px solid #f6f6f6;
}
.tree-row:hover{background:#f5f7f6}
.tree-row.sel{background:#e6f4ec;box-shadow:inset 3px 0 0 var(--green)}
.tree-row.hit .tn{font-weight:600}
.tree-row .tw{flex:0 0 14px;color:var(--muted);font-size:11px;text-align:center;user-select:none}
.tree-row .tn{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis}
.tree-row .tno{flex:0 0 auto;color:var(--muted);font-size:12px}
.tree-row mark{background:#ffe9a8;color:inherit;padding:0 1px;border-radius:2px}
.tree-empty{padding:16px;color:#999;text-align:center}

/* Поправка: `.modal .actions button` (бял фон) биеше `.act-btn` по специфичност,
   а color:#fff оставаше → зелените бутони бяха БЕЛИ ВЪРХУ БЯЛО (невидими). */
.modal .actions button.act-btn{
  background:var(--green);border-color:var(--green);color:#fff;font-weight:600;
}
.modal .actions button.act-btn:hover{background:var(--green-ink)}
.modal .actions button.act-btn:disabled{background:#c8d6cd;border-color:#c8d6cd;cursor:default}

/* ==== Задание Я: избор на компонент (дървото е единствен път) ==== */
.comp-pick-btn{
  width:100%;padding:12px;border:1px dashed var(--green);border-radius:10px;background:#f2f8f4;
  color:var(--green-ink);cursor:pointer;font-size:15px;font-weight:600;text-align:center;
}
.comp-pick-btn:hover{background:#e6f4ec;border-style:solid}
.comp-picked{
  margin-top:8px;padding:10px 12px;border:1px solid var(--edge);border-radius:10px;background:#fff;
  font-size:14px;color:#8a8a8a;
}
.comp-picked.has-pick{color:#111;border-color:#d6e9dd;background:#fbfffc}
.comp-picked .comp-path{margin-top:4px;font-size:12px;color:var(--muted)}

/* Задание АА: полето "Помощници" е DIV, не <label> — за да не праща синтетичен click
   към първия чекбокс (което чупеше отварянето и избираше първия помощник сам). Стилът е като на етикетите. */
.form-grid .ms-field{display:flex;flex-direction:column;gap:6px;font-size:14px}

/* --- избор на изпълнител: профили в MLog + ресурси от INEXTIA (Задание с ресурсите) --- */
.ms-search{width:100%;padding:8px 10px;border:1px solid #ddd;border-radius:6px;font-size:14px;margin-bottom:6px}
.ms-group{position:sticky;top:0;background:#f1f5f2;color:#0a7a45;font-size:11px;font-weight:700;
          text-transform:uppercase;letter-spacing:.03em;padding:5px 8px;margin:4px 0 2px;border-radius:4px}
.no-acc{display:inline-block;font-size:10px;background:#fff3cd;color:#8a6100;border:1px solid #ffe08a;
        border-radius:9px;padding:0 6px;margin-left:4px;vertical-align:middle;white-space:nowrap}
.ms-empty{padding:10px;color:#999;font-size:13px}

/* Свободният текст пази новите редове: описанията идват от INEXTIA/техниците на няколко
   реда (напр. „В Ферментация“ + „Импортирана от INEXTIA…“), а HTML иначе ги слепва в един. */
.txt{white-space:pre-wrap;word-break:break-word}

/* № без номер от INEXTIA = задачата още не е синхронизирана (индикатор, не грешка). */
.kv.no .no-sync{color:var(--muted);font-weight:400}

/* ==== Ред 1: компонентът и заглавието си делят мястото (17.07.2026) ====
   Беше: .kv.machine с фиксирани 140px → дългите имена се режеха („Electrical equipeme…“),
   докато заглавието държеше 567px празни.
   Сега: имената тип „English (Български)“ се разделят на два реда (само 10% от 861 компонента,
   но точно те са най-дългите: 78/69/61 знака → най-дългата част пада на 40). Останалите се
   пренасят естествено, до 2 реда. Заглавието отстъпва мястото и също се пренася. */
.kv.machine{flex:0 0 var(--row1-machine)}
.row1 .kv.machine .value .mach-name,
.row1 .kv.machine .value .mach-bg{
  text-align:center; width:100%;
  white-space:normal; word-break:break-word;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.row1 .kv.machine .value .mach-name{font-size:13.5px; line-height:1.25}   /* оригиналът наследяваше 16px */
.row1 .kv.machine .value .mach-bg{font-size:12px; font-weight:400; color:var(--muted); line-height:1.2}
.row1 .kv.machine .value .mach-num{font-size:11.5px; line-height:1.15}

.kv.title{flex:1 1 220px; min-width:0}
.row1 .kv.title .value{
  white-space:normal;        /* пренася се, вместо да се реже с „…“ */
  overflow:visible; text-overflow:clip;
  line-height:1.3; word-break:break-word;
  font-size:13.5px; font-weight:700;   /* като името на компонента (18.07.2026) */
}



/* Тъмна тема НЯМА нарочно: пробвана на 18.07.2026, Ненко я махна — трудна за ориентиране.
   Не я връщай без изрично искане. */
/* „Отговорен“ */
.who-primary{color:#7f1d1d; margin-bottom:4px}

/* ==== Видим фокус за клавиатура (18.07.2026) ==== */
button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible,
.ms-display:focus-visible, [tabindex]:focus-visible{
  outline: 2px solid var(--green); outline-offset: 2px;
}

/* ==== Телефон: горният ред на картата се пренарежда вместо да се сплесква (18.07.2026) ==== */
@media (max-width:760px){
  .card .row1{flex-wrap:wrap; row-gap:6px}
  .kv.title{flex:1 1 100%; order:-1}          /* заглавието най-отгоре, на цял ред */
  .kv.machine{flex:1 1 46%}
  .kv.no,.kv.prio,.kv.status,.kv.assignedBy,.kv.date{flex:1 1 auto}
}

/* ==== История на компонент (сервизна книга) — 18.07.2026 ==== */
.kv.machine{cursor:pointer}
.kv.machine:hover .mach-name{text-decoration:underline}
.history-modal{width:min(720px,92vw)}
.hist-stats{display:flex;gap:14px;flex-wrap:wrap;margin:6px 0 10px;font-size:13px;color:var(--muted)}
.hist-stats b{color:var(--text)}
.hist-list{max-height:56vh;overflow-y:auto;border:1px solid var(--edge);border-radius:10px}
.hist-row{display:flex;gap:10px;align-items:flex-start;padding:9px 12px;border-bottom:1px solid var(--edge);font-size:13.5px}
.hist-row:last-child{border-bottom:none}
.hist-row .no{flex:0 0 56px;font-weight:600;font-family:ui-monospace,monospace}
.hist-row .mid{flex:1 1 auto;min-width:0}
.hist-row .who{color:var(--muted);font-size:12.5px;margin-top:2px}
.hist-row .when{flex:0 0 78px;text-align:right;color:var(--muted);font-size:12.5px;font-family:ui-monospace,monospace}
.hist-avaria{display:inline-block;font-size:10px;background:#fee2e2;color:#991b1b;border:1px solid #fca5a5;border-radius:8px;padding:0 6px;margin-left:6px;vertical-align:middle}


/* Снимки към задача */
.att-grid{display:flex;flex-wrap:wrap;gap:8px;margin:6px 0}
.att-item{position:relative;width:92px;height:92px;border:1px solid #e5e7eb;border-radius:8px;overflow:hidden;background:#f4f5f2}
.att-item img{width:100%;height:100%;object-fit:cover;display:block;cursor:zoom-in}
.att-del{position:absolute;top:3px;right:3px;width:22px;height:22px;border:none;border-radius:50%;
  background:rgba(0,0,0,.55);color:#fff;font-size:13px;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center}
.att-del:hover{background:#d64232}
.att-empty{color:#667085;font-size:13px}
.att-add{display:inline-block;margin-top:4px;padding:6px 12px;border:1px dashed #b7c0a8;border-radius:8px;
  color:#005424;font-size:13px;cursor:pointer;background:#f6f9f2}
.att-add:hover{background:#eef4e6}

.att-pick{display:flex;flex-direction:column;gap:6px;font-size:13px;color:#3a4a3e}
#ac_preview:empty,#c_preview:empty{display:none}

/* Присъединили се помощници (карти за започване/завършване) */
.join-list{max-height:170px;overflow:auto;border:1px solid #e5e7eb;border-radius:8px;background:#fff}
.join-list label{display:flex;align-items:center;gap:9px;padding:7px 10px;border-bottom:1px solid #f1f4ef;font-size:14px;cursor:pointer}
.join-list label:last-child{border-bottom:none}
.join-list label:hover{background:#f6f9f2}
.join-list input{width:17px;height:17px;flex-shrink:0}
.join-list .sub{color:#8a9490;font-size:12px;margin-left:auto}
.join-list .none{padding:10px;color:#667085;font-size:13px}

/* ==== Избор „задача за моя екип" / „заявка към друг отдел" (30.07.2026) ====
   Показва се само на инженер, ограничен до един отдел. */
.kind-opts{display:flex;gap:10px;flex-wrap:wrap;margin:0 0 10px}
.kind-opts label{
  flex:1 1 220px;display:flex;align-items:flex-start;gap:9px;cursor:pointer;
  border:2px solid var(--edge);border-radius:10px;padding:10px 12px;background:#fff;font-size:14px
}
.kind-opts label:has(input:checked){border-color:var(--green);background:#f2f8f4}
.kind-opts input{width:18px;height:18px;margin-top:1px;flex:0 0 auto}
.kind-opts span{display:flex;flex-direction:column;gap:2px}
.kind-opts i{font-style:normal;font-size:12px;color:var(--muted)}
/* Значка „заявка" в списъка със задачи */
.badge-request{display:inline-block;background:#1c6ba8;color:#fff;border-radius:10px;
  font-size:12px;font-weight:700;padding:1px 8px;margin-left:6px;vertical-align:middle}

/* ==== Преглед на снимка в страницата (07.08.2026) ====
   Досега снимките се отваряха в нов раздел — излишно разсейване на телефон и на стенен екран. */
.img-dlg{
  border:none;background:transparent;padding:0;max-width:96vw;max-height:96vh;overflow:visible
}
.img-dlg::backdrop{background:rgba(0,0,0,.82)}
.img-dlg img{
  display:block;max-width:96vw;max-height:92vh;width:auto;height:auto;
  border-radius:10px;box-shadow:0 12px 40px rgba(0,0,0,.5);background:#000
}
.img-close{
  position:absolute;top:-6px;right:-6px;z-index:2;
  width:38px;height:38px;border-radius:50%;border:2px solid #fff;
  background:#111;color:#fff;font-size:17px;line-height:1;cursor:pointer;
  display:grid;place-items:center;box-shadow:0 2px 8px rgba(0,0,0,.5)
}
.img-close:hover{background:#333}
.att-item a{cursor:zoom-in}

/* ============================================ */
/* ИНДИКАТОР „чака сървъра"                     */
/* Показва се при всяка променяща заявка, за да */
/* не изглежда замръзнало между натискането на  */
/* бутона и отговора на сървъра.                */
/* ============================================ */
#busyDlg{
  border:none;
  background:transparent;
  padding:0;
  overflow:visible;
}
#busyDlg::backdrop{
  background:rgba(17,17,17,.45);
  -webkit-backdrop-filter:blur(3px);
  backdrop-filter:blur(3px);
}
.busy-box{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:14px;
  padding:26px 34px;
  background:#fff;
  border-radius:14px;
  box-shadow:0 10px 30px rgba(0,0,0,.25);
}
.busy-ring{
  width:38px;
  height:38px;
  border-radius:50%;
  border:4px solid var(--pill);
  border-top-color:var(--green);
  animation:spin .8s linear infinite;   /* @keyframes spin вече е дефиниран по-горе */
}
.busy-text{
  font-size:15px;
  color:var(--green-ink);
  font-weight:600;
  white-space:nowrap;
}
/* Уважава системната настройка „по-малко движение" — без въртене, само пулс */
@media (prefers-reduced-motion:reduce){
  .busy-ring{ animation:none; opacity:.6; }
}

/* ============================================ */
/* ГРАФИК НА СМЕНИТЕ — изскачащ прозорец        */
/* Същите класове и вид като в board.html и в   */
/* админ панела — трите изгледа са умишлено     */
/* еднакви.                                     */
/* ============================================ */
/* ---- График на смените (само за четене) ---- */
#shDlg{border:none;border-radius:14px;padding:0;margin:auto;box-sizing:border-box;
       width:min(1500px,95vw);max-width:95vw;max-height:92vh;box-shadow:0 20px 60px rgba(0,0,0,.35)}
#shDlg::backdrop{background:rgba(0,0,0,.45)}
.sh-box{padding:20px 22px;background:#fff;display:flex;flex-direction:column;gap:10px;
        width:100%;max-height:92vh;box-sizing:border-box}
.sh-top{display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap}
.sh-top h2{font-size:18px;color:var(--green)}
.sh-nav{display:flex;align-items:center;gap:8px}
.sh-nav button{background:var(--green);color:#fff;border:none;border-radius:8px;width:30px;height:30px;
               font-size:17px;line-height:1;cursor:pointer}
.sh-nav #shTitle{min-width:150px;text-align:center;font-weight:700;font-size:15px}
.sh-duty{font-size:13px;color:var(--muted)}
.sh-wrap{overflow:auto;border:1px solid var(--edge);border-radius:10px;max-width:100%;min-height:0}
.sh-table{border-collapse:collapse;width:auto;font-size:12px}
.sh-table th,.sh-table td{border:1px solid #eceff1;padding:0;text-align:center}
.sh-table thead th{background:#f8f9fa;padding:3px 0;line-height:1.1;min-width:36px;position:sticky;top:0;z-index:3}
.sh-d{display:block;font-weight:700;color:#343a40}
.sh-w{display:block;font-size:10px;color:#adb5bd}
.sh-we{background:#fdf2f2}
.sh-table thead th.sh-we{background:#fbe9e9}
.sh-today{box-shadow:inset 2px 0 0 var(--green),inset -2px 0 0 var(--green)}
.sh-table thead th.sh-today{background:#e3f3ea}
.sh-nm{text-align:left!important;padding:3px 8px!important;white-space:nowrap;position:sticky;left:0;z-index:2;
       background:#fff;border-right:2px solid var(--edge)!important;font-size:12.5px;font-weight:600}
.sh-table thead .sh-nm{background:#f8f9fa;z-index:4}
.sh-grp td{background:#eef2f7;text-align:left!important;padding:4px 8px!important;font-weight:800;
           color:#334e68;position:sticky;left:0}
.sh-sum{padding:0 6px!important;color:var(--muted);font-size:11px;background:#fafbfc;white-space:nowrap;
        position:sticky;right:0;z-index:2;border-left:2px solid var(--edge)!important}
.sh-c{display:block;min-width:36px;height:24px;line-height:24px;font-size:11px;font-weight:700;
      color:#343a40;text-align:center}
.sh1{background:#fff3cd;color:#7a5b00}
.sh2{background:#d1e7dd;color:#0a5236}
.sh3{background:#cfe2ff;color:#0a3d78}
.sh8{background:#e9d5ff;color:#4c1d95}
.sh-o{background:#eafaf1;color:#0a5236;box-shadow:inset 0 0 0 1.5px #12805c}
.sh-b{background:#fdecec;color:#8f1d1d;box-shadow:inset 0 0 0 1.5px #c0392b}
.sh-k{background:#eef0f3;color:#3d4753;box-shadow:inset 0 0 0 1.5px #5a6b7d}
.sh-n{background:#f2f3f5;color:#9aa3ab}
.sh-xh{background:#ffe0c2;color:#8a4b08}   /* извънредни часове */
.sh-nh{background:#dbe7fe;color:#1e3a8a}   /* недостиг на часове */
.sh-plus{border-bottom:3px solid #f97316}
.sh-minus{border-bottom:3px solid #2563eb}
.sh-esum{color:#8a4b08;margin-left:3px}
.sh-esum.sh-eneg{color:#1e3a8a}
.sh-acnt{font-size:10px;margin-left:3px;padding:0 3px;border-radius:3px;display:inline-block;font-weight:700}
.sh-foot{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;flex-wrap:wrap}
.sh-foot #shClose{background:var(--green);color:#fff;border:none;border-radius:8px;padding:8px 18px;
                  font-size:13px;font-weight:700;font-family:inherit;cursor:pointer;flex-shrink:0;margin-left:auto}
.sh-leg{display:flex;flex-wrap:wrap;align-items:center;gap:4px 10px;font-size:11.5px;color:var(--muted);flex:1 1 320px}
.sh-leg .sh-c{display:inline-flex;align-items:center;justify-content:center;
              min-width:22px;height:20px;line-height:1;border-radius:4px;
              margin-right:4px;padding:0 5px;font-style:normal;vertical-align:middle}