/* ── TisOS · редактор шаблона материалов услуги (BOM) — ОДИН файл на обе панели ──
   Волна В2а, 14.08.2026. Подключается и admin.html (карточка услуги), и nurse.html
   (карточка «Шаблоны материалов на услугу»).

   🔴 ФАЙЛ ОДИН НАМЕРЕННО. Волна вынесла редактор из двух копий кода в общий модуль
   (public/js/svc-materials-editor.js); положить его стили в admin.css и nurse.css значило бы
   заменить дубль кода дублем стилей — то есть ту же беду, только тише.

   🔴 СВОИ КЛАССЫ, А НЕ .btn-icon. Кнопка ✕ строки раньше рисовалась общим `.btn-icon`
   (34×34, admin.css:446). Поднять его до нормы 44 нельзя: тем же классом нарисованы 4 кнопки
   в каждой из 620 строк склада В ОБЕИХ панелях, и правка раздула бы весь склад (эти цели
   стоят в реестре KNOWN_SMALL обходчика поимённо). Поэтому у редактора свой .svm-del ровно
   на 44 px — норма выполнена там, где её и требуют, и ничего чужого не сдвинуто. */

.svm-rows { display: flex; flex-direction: column; gap: 6px; }

/* Строка шаблона. ПЕРЕНОС ОБЯЗАТЕЛЕН: до волны строка была флексом БЕЗ переноса, и на 390 px
   имя материала сжималось до 39,7 px [ЗАМЕР 14.08] — прочесть его было нельзя. Имя занимает
   ВСЮ ширину строки, числа и кнопка идут под ним; на широком экране всё помещается рядом. */
.svm-row {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  padding: 6px 8px; border: 1px solid var(--border); border-radius: var(--radius-sm);
  background: var(--card);
}
.svm-name { flex: 1 1 100%; min-width: 0; font-size: 14px; color: var(--text); overflow-wrap: anywhere; }
.svm-qty { flex: 0 0 auto; width: 88px; min-height: 44px; padding: 6px 8px;
  border: 1px solid var(--border); border-radius: var(--radius-sm); font-size: 14px; color: var(--text); background: var(--card); }
.svm-info { flex: 1 1 auto; min-width: 0; font-size: 13px; color: var(--text-muted); }
.svm-sum { flex: 0 0 auto; margin-left: auto; font-size: 13px; white-space: nowrap; font-family: var(--font-head); }
.svm-del {
  flex: 0 0 auto; width: 44px; height: 44px; min-width: 44px; min-height: 44px;
  display: inline-grid; place-items: center; cursor: pointer; font-size: 15px; line-height: 1;
  border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--card); color: var(--text-muted);
  transition: all .15s;
}
.svm-del:hover { color: var(--danger); border-color: var(--danger); background: #FDECEA; }

/* Нулевая ПРАЙСОВАЯ цена — подсветка, а не запрет: перчатки и салфетка законно стоят 0 и в
   цену пациента не входят (48 % живых строк шаблонов). Но ноль часто значит и «цену забыли
   проставить», поэтому строка помечена, а не спрятана. */
.svm-row-zero { background: #FFFBEB; border-color: #FDE68A; }
.svm-zero { flex: 1 1 100%; font-size: 12px; color: #92400E; }

/* Поиск материала вместо плоского списка на 621 опцию. */
.svm-add { margin-top: 10px; }
.svm-input {
  width: 100%; min-height: 44px; padding: 8px 12px; font-size: 14px;
  border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--card); color: var(--text);
}
.svm-input:focus { outline: 2px solid var(--primary); outline-offset: -1px; }
.svm-found { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; max-height: 264px; overflow-y: auto; }
.svm-opt {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 12px;
  width: 100%; min-height: 44px; padding: 8px 12px; text-align: left; cursor: pointer;
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  background: var(--card); color: var(--text); font-size: 14px; transition: all .15s;
}
.svm-opt:hover { border-color: var(--primary); background: var(--card-tint); }
.svm-opt-name { flex: 1 1 60%; min-width: 0; overflow-wrap: anywhere; }
.svm-opt-info { flex: 0 0 auto; font-size: 13px; color: var(--text-muted); }
.svm-opt-in { opacity: .6; }                      /* материал уже в шаблоне */
.svm-hint { font-size: 13px; }
.svm-msg-err { color: var(--danger); }

/* ── ВОЛНА В2б: ПРАЙСОВАЯ ЦЕНА В СТРОКЕ НАБОРА ────────────────────────────────────────────
   Поле цены появляется ТОЛЬКО на экране массового заведения (cfg.priceEdit) — в карточке
   услуги строка осталась прежней. Норма тач-цели 44 — та же, что у количества. */
.svm-price {
  flex: 0 0 auto; width: 104px; min-height: 44px; padding: 6px 8px;
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  font-size: 14px; color: var(--text); background: var(--card);
}
.svm-uses { flex: 0 0 auto; font-size: 12px; color: var(--text-muted); white-space: nowrap; }

/* ══ ВОЛНА В2б: ЭКРАН «НАБОРЫ МАТЕРИАЛОВ НА УСЛУГИ» ══════════════════════════════════════
   Стили экрана лежат В ЭТОМ ЖЕ файле намеренно: он и редактор — одна работа, а разносить их
   по admin.css и nurse.css значило бы вернуть дубль, только стилями (урок волны В2а). */
/* Пункт меню владельца «Наборы материалов»: норма тач-цели 44 при 38 у общего подпункта
   (admin.css:49). Поднимать общий класс нельзя — это вид всего меню и 18 записей реестра
   KNOWN_SMALL обходчика; свой класс держит норму ровно там, где её требуют от новой цели. */
.side-item.svs-nav { min-height: 44px; }

/* 🔴 ДВЕ КОЛОНКИ НА ШИРOКOМ ЭКРАНЕ: слева список услуг, справа набор выбранной.
   Замер волны показал, зачем: при вертикальной укладке (список НАД набором) поле поиска
   материала уезжало ниже сгиба, и заведение одного набора стоило ТРЁХ лишних прокруток —
   [ЗАМЕР 14.08: 14 взаимодействий против 12 у старого пути в карточке услуги]. В две
   колонки прокруток НОЛЬ, и виден одновременно и список, и то, что в набор кладут.
   На узком экране колонки складываются в одну — там прокрутка нормальна и неизбежна. */
.svs-cols { display: grid; gap: 16px; align-items: start; }
@media (min-width: 1000px) {
  .svs-cols { grid-template-columns: minmax(280px, 380px) minmax(0, 1fr); }
  .svs-col-list, .svs-col-edit { min-width: 0; }
}

.svs-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 10px; }
.svs-find {
  flex: 1 1 220px; min-width: 0; min-height: 44px; padding: 8px 12px; font-size: 14px;
  border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--card); color: var(--text);
}
.svs-find:focus { outline: 2px solid var(--primary); outline-offset: -1px; }
.svs-only {
  flex: 0 0 auto; min-height: 44px; padding: 8px 14px; cursor: pointer; font-size: 14px;
  border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--card); color: var(--text);
}
.svs-only-on { border-color: var(--primary); color: var(--primary); background: var(--card-tint); }
.svs-count { flex: 1 1 100%; font-size: 13px; }

/* Список услуг прокручивается ВНУТРИ себя: у клиники их под три сотни, и стена строк во всю
   страницу хоронит и редактор, и кнопку сохранения. */
.svs-list { display: flex; flex-direction: column; gap: 4px; max-height: 340px; overflow-y: auto; }
.svs-row {
  display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px;
  width: 100%; min-height: 44px; padding: 8px 12px; text-align: left; cursor: pointer;
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  background: var(--card); color: var(--text); font-size: 14px; transition: all .15s;
}
.svs-row:hover { border-color: var(--primary); background: var(--card-tint); }
.svs-row-on { border-color: var(--primary); background: var(--card-tint); font-weight: 600; }
.svs-row-name { flex: 1 1 60%; min-width: 0; overflow-wrap: anywhere; }
.svs-row-mark { flex: 0 0 auto; font-size: 12px; }
.svs-mark-yes { color: var(--success, #15803D); }
.svs-mark-no { color: var(--text-muted); }
.svs-row-count { flex: 0 0 auto; font-size: 13px; color: var(--text-muted); min-width: 52px; text-align: right; }
.svs-empty { padding: 12px; font-size: 13px; }

.svs-head-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 14px 0 8px; }
.svs-title { flex: 1 1 220px; min-width: 0; font-size: 15px; overflow-wrap: anywhere; }
.svs-copy {
  flex: 0 0 auto; min-height: 44px; padding: 8px 14px; cursor: pointer; font-size: 14px;
  border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--card); color: var(--text);
}
.svs-copy:hover { border-color: var(--primary); color: var(--primary); }
.svs-copy-box { border: 1px dashed var(--border); border-radius: var(--radius-sm); padding: 10px; margin-bottom: 10px; }
.svs-copy-find {
  width: 100%; min-height: 44px; padding: 8px 12px; font-size: 14px;
  border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--card); color: var(--text);
}
.svs-copy-list { display: flex; flex-direction: column; gap: 4px; margin-top: 8px; max-height: 240px; overflow-y: auto; }
.svs-copy-opt {
  width: 100%; min-height: 44px; padding: 8px 12px; text-align: left; cursor: pointer; font-size: 14px;
  border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--card); color: var(--text);
}
.svs-copy-opt:hover { border-color: var(--primary); background: var(--card-tint); }
.svs-copy-none { font-size: 13px; }

/* ══ ВOЛНА В2в: ВЫГРУЗКА «ЧТO МЫ ЗАВЕЛИ» — ПЕЧАТЬЮ ЭКРАНА ════════════════════════════════
   Бумага делается БРАУЗЕРOМ, а не серверной обёрткой бланков: список наборов — не документ
   пациента, и тащить его в чужой контур (со своими правами и своими капканами) ради одной
   таблицы незачем. Кнопка — норма тач-цели 44, как у соседей по строке инструментов. */
.svs-print {
  flex: 0 0 auto; min-height: 44px; padding: 8px 14px; cursor: pointer; font-size: 14px;
  border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--card); color: var(--text);
}
.svs-print:hover { border-color: var(--primary); color: var(--primary); }
.svs-print[disabled] { opacity: .6; cursor: default; }

/* Готовая бумага живёт в своём корне и на экране не показывается ВOВСЕ: она нужна только
   принтеру. Печатается ТOЛЬКO она — остальная страница (меню, шапка, таблица) скрыта. */
.svs-print-root { display: none; }
@media print {
  body > *:not(.svs-print-root) { display: none !important; }
  .svs-print-root { display: block !important; padding: 0; color: #000; }
  .svs-print-head { font-size: 15px; font-weight: 700; margin-bottom: 10px; }
  /* Услуга не должна разрываться между страницами: набор читают целиком. */
  .svs-print-svc { break-inside: avoid; page-break-inside: avoid; margin-bottom: 10px; border-bottom: 1px solid #999; padding-bottom: 6px; }
  .svs-print-svc-name { font-size: 13px; font-weight: 700; }
  .svs-print-row { font-size: 12px; }
  .svs-print-sum { font-size: 12px; font-weight: 600; margin-top: 2px; }
}