/* Бенчмаркінг — порівняння функціоналу Beauty CRM з конкурентами.
   Матриця: рядки — елементи функціоналу (група → складові), колонки — системи.

   Головна складність тут не таблиця, а її ширина: систем може бути 6+, і на
   телефоні матриця не поміщається ні за яких умов. Тому прокрутка горизонтальна
   всередині власного контейнера, а перша колонка липка — інакше, догорнувши до
   правого краю, людина не розуміє, у якому рядку вона знаходиться. */

.bm-wrap{ display:flex; flex-direction:column; gap:14px; min-width:0 }

/* Текст лише для зчитувача екрана: у клітинці значок, але озвучити треба слово. */
.bm-tbl .sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

/* ---------- легенда ---------- */

/* Панель над таблицею: легенда згортається, бо потрібна раз, а місце займала
   завжди; поруч перемикач описів. */
.bm-bar{ display:flex; flex-wrap:wrap; gap:8px 14px; align-items:center }
.bm-legtoggle{
  display:inline-flex; align-items:center; gap:5px;
  background:none; border:1px solid var(--rule); border-radius:8px;
  padding:4px 9px; font:inherit; font-size:12px; color:var(--ink-2); cursor:pointer;
}
.bm-legtoggle:hover{ border-color:var(--rule-2); color:var(--ink) }
.bm-legtoggle[aria-expanded="true"]{ background:var(--surface); border-color:var(--rule-2) }
.bm-switch{
  display:inline-flex; align-items:center; gap:6px; cursor:pointer;
  font-size:12px; color:var(--ink-2); user-select:none;
}
.bm-switch input{ accent-color:var(--accent); width:14px; height:14px; cursor:pointer }

.bm-legend{
  display:flex; flex-wrap:wrap; gap:6px 14px; align-items:center;
  padding:8px 12px; border:1px solid var(--rule); border-radius:10px;
  background:var(--surface); font-size:12px; color:var(--ink-2);
}
.bm-legend b{ font-weight:600; color:var(--ink); margin-right:2px }
.bm-legend-i{ display:inline-flex; align-items:center; gap:6px; white-space:nowrap }

/* ---------- позначки ---------- */

/* Значення в клітинці. Кольором відділяємо тільки «є» і «немає»: решта —
   приглушені, бо «немає даних» не має кричати. */
.bm-v{
  display:inline-flex; align-items:center; justify-content:center;
  width:20px; height:20px; border-radius:6px; font-size:11.5px; font-weight:700;
  border:1px solid transparent; line-height:1;
}
.bm-v-yes{     background:var(--accent-soft); color:var(--accent-ink); border-color:color-mix(in srgb,var(--accent) 26%,transparent) }
.bm-v-partial{ background:var(--nice-s);      color:var(--nice);       border-color:color-mix(in srgb,var(--nice) 26%,transparent) }
.bm-v-no{      background:var(--danger-soft); color:var(--danger);     border-color:color-mix(in srgb,var(--danger) 24%,transparent) }
.bm-v-planned{ background:var(--t3s);         color:var(--t3);         border-color:color-mix(in srgb,var(--t3) 26%,transparent) }
.bm-v-unknown{ background:var(--surface-2);   color:var(--ink-3);      border-color:var(--rule) }

/* Крапка-маркер, що в клітинці є примітка або джерело. Ставимо в кут,
   щоб не роз'їжджалась сітка. */
.bm-cell{ text-align:center; padding:0 5px }
/* Крапка «є примітка» висить на самій кнопці, а не в куті клітинки: у куті
   вона зорово прилипала до сусідньої колонки і читалась як чужа. */
.bm-cell button{
  position:relative;
  background:none; border:0; padding:1px; cursor:default; font:inherit;
  border-radius:7px; display:inline-flex; vertical-align:middle;
}
.bm-cell.has-note button::after{
  content:""; position:absolute; top:1px; right:1px;
  width:4px; height:4px; border-radius:50%; background:var(--t2);
  box-shadow:0 0 0 1.5px var(--surface);
}
.bm-tbl tbody tr.bm-grouprow .bm-cell.has-note button::after,
.bm-cell.bm-ours.has-note button::after{ box-shadow:0 0 0 1.5px var(--surface-3) }
.bm-can-edit .bm-cell button{ cursor:pointer }
.bm-can-edit .bm-cell button:hover .bm-v{ filter:brightness(.96); transform:translateY(-1px) }
.bm-cell button:focus-visible{ outline:2px solid var(--accent); outline-offset:2px }
.bm-v{ transition:transform .12s ease, filter .12s ease }

/* ---------- таблиця ---------- */

/* ПРИЧИНА, чому шапка не липла, хоча position:sticky на ній стояв:
   `overflow-x:auto` разом з `overflow-y:visible` НЕ дає «скрол лише вбік».
   За специфікацією visible поруч із auto обчислюється в auto — тобто цей
   контейнер ставав вертикальним скролером, і шапка липла до ЙОГО верху,
   якого не видно, замість верху екрана. Перевірено: overflowY у браузері
   рахувався саме як auto.

   Лікуємо в причині: `overflow:clip` по вертикалі не створює контейнер
   прокрутки, тому sticky знову рахується від вікна. `clip` підтримують
   усі поточні браузери; це саме той випадок, для якого його й додали. */
/* ПРИЧИНА, чому шапка не липла, хоча position:sticky на ній стояв.
   Контейнер мав `overflow-x:auto` + `overflow-y:visible`. За специфікацією
   visible поруч із auto обчислюється в auto, тобто контейнер ставав ще й
   ВЕРТИКАЛЬНИМ скролером. Липка шапка чіплялась до його верху — а він
   їде разом зі сторінкою, тож візуально шапка просто зникала. Заміна на
   `clip` не рятує: він так само обрізає по вертикалі (перевірено — шапка
   лишалась за межами екрана).

   Робоче рішення: контейнер робимо липким САМ, висотою з екран. Тоді
   горизонтальний скрол лишається на ньому (перша колонка липне вбік),
   а по вертикалі він нічого не обрізає — тому `thead th{top:0}`
   рахується від верху екрана і шапка тримається на місці.

   max-height + overflow-y:auto дає таблиці власний вертикальний скрол
   усередині екрана: саме те, що потрібно для довгої таблиці на 134 позиції.
   Шапка при цьому липне до верху самого контейнера, який стоїть на місці. */
.bm-scroll{
  overflow:auto;
  max-height:calc(100vh - 128px);
  overscroll-behavior:contain;
  border:1px solid var(--rule); border-radius:14px; background:var(--surface);
  box-shadow:var(--lift);
}
.bm-tbl{ border-collapse:separate; border-spacing:0; width:100%; min-width:560px; font-size:13px }
/* Колонки систем ділять залишок ширини порівну, а перша забирає решту:
   без цього після стиснення шапки таблиця збиралась у лівий край. */
.bm-tbl thead th[data-col]{ width:96px }
.bm-tbl th,.bm-tbl td{ border-bottom:1px solid var(--rule) }
/* Компактний рядок — головна вимога Кирила: у попередній версії один
   заголовок на 3-4 слова займав ~100px, і на екран влазило 5 позицій зі 134.
   Висоту задаємо рядку явно, щоб її не роздували елементи керування. */
.bm-tbl tbody tr{ height:30px }
.bm-tbl tbody tr.bm-grouprow{ height:32px }
.bm-tbl tbody tr:last-child td{ border-bottom:0 }

/* Шапка липне до верху при вертикальній прокрутці сторінки. */
.bm-tbl thead th{
  position:sticky; top:0; z-index:3;
  background:var(--surface-2); color:var(--ink);
  font-weight:600; font-size:12.5px; text-align:center;
  padding:5px 8px; border-bottom:1px solid var(--rule-2);
  white-space:nowrap;
}
.bm-tbl thead th.bm-th-item{ text-align:left; padding-left:12px }

/* Перша колонка липне до лівого краю — головний орієнтир при прокрутці. */
.bm-tbl .bm-c-item{
  position:sticky; left:0; z-index:2; background:var(--surface);
  min-width:250px; max-width:380px; padding:0 10px 0 12px;
  border-right:1px solid var(--rule);
}
.bm-tbl thead .bm-c-item{ z-index:4; background:var(--surface-2) }
.bm-tbl tbody tr.bm-grouprow .bm-c-item{ background:var(--surface-3) }

/* Рядок-група: великий елемент функціоналу. */
.bm-grouprow td{ background:var(--surface-3) }
/* Заголовок групи і олівець мусять лишатись в одному рядку: на вузькому
   екрані олівець зривався на другий рядок і роздував групу. */
.bm-grouprow .bm-c-item{ white-space:nowrap }
.bm-gtitle{
  display:inline-flex; align-items:center; gap:6px;
  max-width:calc(100% - 26px); min-width:0;
  background:none; border:0; padding:0; font:inherit; cursor:pointer;
  color:var(--ink); font-weight:650; text-align:left; font-size:13.5px;
}
.bm-gtitle .bm-caret{ flex:0 0 auto; transition:transform .15s ease; color:var(--ink-3) }
.bm-grouprow.is-folded .bm-caret{ transform:rotate(-90deg) }
.bm-gcount{
  font-size:11px; font-weight:600; color:var(--ink-3);
  background:var(--surface-2); border:1px solid var(--rule);
  border-radius:20px; padding:1px 7px; flex:0 0 auto;
}
/* Зведення по групі: скільки «є» з-поміж складових у цієї системи. */
.bm-gsum{ font-size:11.5px; font-weight:600; color:var(--ink-3); font-variant-numeric:tabular-nums }

/* Рядок-складова. */
.bm-itemrow .bm-c-item{ padding-left:26px }
/* Назва в один рядок з трикрапкою: перенос на другий рядок подвоював висоту
   таблиці заради кількох довгих назв. Повний текст лишається в title і в
   панелі клітинки, тож інформація не втрачається. */
/* Ручка, назва і стрілки — в одну лінію. Раніше .bm-iname був display:block,
   і кожен елемент ставав окремим рядком: звідси висота ~64px замість 30.
   Вирівнюємо всередині рядка, а не через display:flex на самій td —
   у липкої клітинки flex ламає sticky. */
.bm-itemrow .bm-c-item{ white-space:nowrap }
.bm-itemrow .bm-c-item > *{ vertical-align:middle }
/* max-width лишає місце під олівець ЗАВЖДИ, навіть коли він прозорий:
   інакше поява олівця на наведенні штовхала б назву вбік. */
.bm-iname{
  color:var(--ink-2); display:inline-block; white-space:nowrap;
  overflow:hidden; text-overflow:ellipsis;
  max-width:calc(100% - 26px); vertical-align:middle;
}
.bm-gname{
  display:inline-block; overflow:hidden; text-overflow:ellipsis;
  white-space:nowrap; max-width:100%;
}
/* Опис більше НЕ показується в кожному рядку — він з'їдав другий рядок тексту
   в кожній позиції. Вмикається перемикачем «описи» у шапці розділу. */
.bm-inote{ display:none }
/* З увімкненими описами назва й опис стають двома рядками — тому тут рядок
   свідомо вищий. Це вибір користувача, а не постійна ціна. */
/* З описами назва й опис — два рядки, тому ставимо їх у власний блок із
   щільним line-height. Без цього ручка й стрілки знову розповзались на
   окремі рядки і давали ~63px замість 44. */
.bm-show-notes .bm-itemrow .bm-c-item{ line-height:1.25; padding-top:2px; padding-bottom:2px }
.bm-show-notes .bm-iname{ line-height:1.3 }
/* опис теж лишає місце під олівець.
   Кирило 16.09: «описи хай переносяться на наступну строку при відображенні,
   а не обрізаються». Тому тут НЕ можна ні nowrap, ні text-overflow: довгий
   опис переноситься і показується цілком. Ширину все одно обмежуємо —
   інакше на широкому екрані опис тягнувся б через півтаблиці одним рядком. */
.bm-show-notes .bm-inote{
  display:block; font-size:10.5px; color:var(--ink-3); line-height:1.3;
  white-space:normal; overflow:visible; overflow-wrap:break-word;
  max-width:min(520px, calc(100% - 26px)); margin-top:1px;
}
/* Висота рядка тепер ЗА ЗМІСТОМ, а не фіксована: опис на два-три рядки
   інакше вилазив би за межі клітинки. */
.bm-show-notes .bm-tbl tbody tr.bm-itemrow{ height:auto }
/* Клітинка з назвою перестає бути однорядковою саме тут — в інших режимах
   nowrap лишається, щоб назви не ламались посеред слова. */
.bm-show-notes .bm-itemrow .bm-c-item{ white-space:normal }
/* Позначки по системах тримаються ВЕРХУ рядка, навпроти назви пункту:
   при різній висоті рядків центрування розʼїхалось би відносно назви. */
.bm-show-notes .bm-itemrow .bm-cell{ vertical-align:top; padding-top:6px }
.bm-show-notes .bm-itemrow .bm-c-item{ vertical-align:top }
/* Олівець тримається верхнього рядка, поруч із назвою. */
.bm-show-notes .bm-pen{ vertical-align:top; margin-top:1px }

/* Наша колонка виділена — це еталон, з яким порівнюють. */
.bm-tbl th.bm-ours,.bm-tbl td.bm-ours{
  background:color-mix(in srgb,var(--accent-soft) 55%,var(--surface));
}
.bm-tbl thead th.bm-ours{ background:color-mix(in srgb,var(--accent-soft) 92%,var(--surface-2)); color:var(--accent-ink) }
.bm-tbl tbody tr.bm-grouprow td.bm-ours{ background:color-mix(in srgb,var(--accent-soft) 70%,var(--surface-3)) }

/* Шапка в один поверх. Слово «КОНКУРЕНТ» під кожною назвою прибрано: воно
   не несло інформації, бо наша колонка й так виділена кольором. Лишилось
   «наша» тільки під нею. */
.bm-syshead{ display:inline-flex; align-items:center; gap:4px; min-width:74px; justify-content:center }
.bm-sysname{ font-weight:650 }
.bm-syskind{ display:none; font-size:10px; font-weight:500; letter-spacing:.03em }
.bm-ours .bm-syskind{
  display:inline; color:var(--accent-ink); opacity:.75; text-transform:lowercase;
}

/* Кнопка «складова» під групою — видима лише адміну. */
.bm-addrow td{ padding:0 }
.bm-addbtn{
  display:inline-flex; align-items:center; gap:6px; margin:2px 0 6px 32px;
  background:none; border:1px dashed var(--rule-2); border-radius:8px;
  padding:4px 10px; font:inherit; font-size:12px; color:var(--ink-3); cursor:pointer;
}
.bm-addbtn:hover{ color:var(--accent-ink); border-color:var(--accent); background:var(--accent-soft) }

/* ---------- наведення і режим правки ----------
   При наведенні з'являється РІВНО один елемент — олівець. Місце під нього
   зарезервоване завжди (ширина стала, змінюється лише прозорість), тому
   назва не зсувається вбік у момент наведення. */

.bm-pen{
  display:inline-flex; align-items:center; justify-content:center;
  width:18px; height:18px; padding:0; margin-left:4px; flex:0 0 auto;
  background:none; border:0; border-radius:4px; color:var(--ink-3);
  cursor:pointer; vertical-align:middle;
  opacity:0; transition:opacity .12s ease;
}
/* Група дій рядка: правка, вище, нижче, видалення.

   Ширина СТАЛА і місце зарезервоване завжди — саме тим, що кнопки лежать у
   розмітці постійно, а міняється лише opacity. Це та сама схема, якою 13.09
   полагодили сіпання назви від ручки перетягування: якщо елемент зʼявляється
   в потоці на ховері, він виштовхує сусідів. Заміряно зсув назви до і після
   наведення: 0px. */
.bm-rowops{
  display:inline-flex; align-items:center; gap:1px;
  margin-left:4px; flex:0 0 auto; vertical-align:middle;
}
.bm-rowops .bm-pen{ margin-left:0 }
/* Розпірка на місці схованої стрілки (під пошуком) — щоб ширина групи не
   змінювалась і назва стояла на тій самій вертикалі. */
.bm-pen-gap{ display:inline-block; width:18px; height:18px; flex:0 0 auto }
.bm-grouprow:hover .bm-pen,
.bm-itemrow:hover .bm-pen,
.bm-tbl thead th:hover .bm-pen,
.bm-pen:focus-visible{ opacity:1 }
/* Видалення червоніє лише під курсором: у спокої воно таке саме тихе, як
   решта, щоб не тягнути око до руйнівної дії. */
.bm-pen-del:hover{ color:var(--must); background:var(--must-s) }
.bm-pen:hover{ color:var(--accent-ink); background:var(--accent-soft) }
.bm-pen:focus-visible{ outline:2px solid var(--accent); outline-offset:1px }

/* Режим правки: поле вводу на місці назви плюс керування порядком. */
.bm-edit{ display:inline-flex; align-items:center; gap:5px; width:100%; min-width:0 }
.bm-edit-in{
  flex:1 1 auto; min-width:60px;
  border:1px solid var(--accent); border-radius:6px;
  background:var(--surface); color:var(--ink);
  font:inherit; font-size:13px; padding:3px 7px; line-height:1.3;
}
.bm-edit-in:focus{ outline:2px solid var(--accent); outline-offset:-1px }
.bm-edit-ops{ display:inline-flex; align-items:center; gap:1px; flex:0 0 auto }

.bm-move,.bm-edit-del,.bm-edit-ok{
  display:inline-flex; align-items:center; justify-content:center;
  width:22px; height:22px; padding:0; border:1px solid transparent;
  background:none; color:var(--ink-3); border-radius:5px; cursor:pointer;
  flex:0 0 auto;
}
.bm-move:hover:not(:disabled){ color:var(--accent-ink); background:var(--accent-soft); border-color:var(--accent) }
.bm-move:disabled{ visibility:hidden; pointer-events:none }
.bm-edit-del:hover{ color:var(--danger); background:var(--danger-soft); border-color:var(--danger) }
.bm-edit-ok{ color:var(--accent-ink); background:var(--accent-soft); border-color:color-mix(in srgb,var(--accent) 35%,transparent) }
.bm-edit-ok:hover{ background:var(--accent); color:var(--accent-on) }
.bm-move:focus-visible,.bm-edit-del:focus-visible,.bm-edit-ok:focus-visible{
  outline:2px solid var(--accent); outline-offset:1px;
}

/* Рядок у правці трохи вищий — це нормально, він один за раз. */
.bm-tbl tbody tr.is-editing{ height:38px }
.bm-tbl tbody tr.is-editing > td{ background:var(--accent-soft) }
.bm-tbl tbody tr.is-editing .bm-c-item{ background:var(--accent-soft) }
.bm-tbl th.is-editing{ background:var(--accent-soft) }
.bm-edit-col{ gap:3px }
.bm-edit-col .bm-edit-in{ min-width:54px; font-size:12px; padding:2px 5px }

/* Без наведення (телефон) олівець видимий постійно — інакше до правки не
   дістатись. Керування порядком там теж лише в режимі правки. */
@media (hover:none){
  .bm-pen{ opacity:1; width:24px; height:24px }
  .bm-tbl tbody tr{ height:34px }
  .bm-tbl tbody tr.bm-grouprow{ height:36px }
  .bm-tbl tbody tr.is-editing{ height:42px }
}

.bm-empty{ padding:34px 18px; text-align:center; color:var(--ink-3); font-size:13.5px }

/* ---------- панель клітинки ---------- */

/* Примітка до позначки відкривається окремою панеллю, а не тултипом: у ній
   живе і джерело, і текст, і це треба вміти скопіювати. */
.bm-pop{
  position:fixed; z-index:60; width:min(340px,calc(100vw - 24px));
  background:var(--surface); border:1px solid var(--rule-2); border-radius:14px;
  box-shadow:var(--lift-2); padding:13px 14px; font-size:13px;
}
.bm-pop h4{ margin:0 0 3px; font-size:13.5px; font-weight:650; color:var(--ink) }
.bm-pop .bm-popsys{ font-size:11.5px; color:var(--ink-3); margin:0 0 10px }
.bm-pop label{ display:block; font-size:11.5px; font-weight:600; color:var(--ink-2); margin:9px 0 4px }
.bm-pop textarea,.bm-pop input[type=text]{
  width:100%; border:1px solid var(--rule-2); border-radius:9px; background:var(--surface-3);
  color:var(--ink); font:inherit; font-size:12.5px; padding:7px 9px; resize:vertical;
}
.bm-pop textarea{ min-height:62px }
.bm-pop textarea:focus,.bm-pop input:focus{ outline:2px solid var(--accent); outline-offset:-1px; border-color:transparent }
.bm-popvals{ display:flex; flex-wrap:wrap; gap:6px }
.bm-popval{
  display:inline-flex; align-items:center; gap:6px; cursor:pointer;
  border:1px solid var(--rule); border-radius:9px; padding:5px 9px 5px 7px;
  background:var(--surface-3); font-size:12px; color:var(--ink-2);
}
.bm-popval:hover{ border-color:var(--rule-2) }
.bm-popval.is-on{ border-color:var(--accent); background:var(--accent-soft); color:var(--accent-ink); font-weight:600 }
.bm-popfoot{ display:flex; gap:8px; justify-content:flex-end; margin-top:12px }
.bm-popsrc{ font-size:11.5px; color:var(--ink-3); margin-top:8px; overflow-wrap:anywhere }
.bm-popsrc a{ color:var(--t2) }
.bm-popnote{ margin:0; white-space:pre-wrap; color:var(--ink-2); font-size:12.5px }
.bm-popnone{ color:var(--ink-3); font-style:italic; font-size:12.5px; margin:0 }

/* ---------- легенда покриття ---------- */

.bm-cover{
  display:flex; flex-wrap:wrap; gap:10px; font-size:12px; color:var(--ink-3);
  padding:2px 2px 0;
}
.bm-cover b{ color:var(--ink-2); font-weight:600 }

@media (max-width:760px){
  .bm-tbl .bm-c-item{ min-width:210px; max-width:250px }
  .bm-legend{ font-size:12px; gap:6px 12px }
  .bm-itemrow .bm-c-item{ padding-left:24px }
  .bm-addbtn{ margin-left:24px }
  /* На телефоні наведення немає: олівець видимий постійно й під палець.
     Керування порядком — так само лише після тапу по олівцю. */
  .bm-pen{ opacity:1; width:26px; height:26px; margin-left:2px }
  .bm-move,.bm-edit-del,.bm-edit-ok{ width:26px; height:26px }
  .bm-tbl tbody tr{ height:36px }
  .bm-tbl tbody tr.bm-grouprow{ height:38px }
  .bm-tbl tbody tr.is-editing{ height:44px }
  .bm-edit-in{ font-size:12.5px }
  /* З описами рядок на телефоні теж росте за змістом: фіксовані 36px
     зрізали б другий і третій рядок опису. Ширину тримає .bm-c-item
     (max-width:250px вище), тому таблиця вбік не розпирається. */
  .bm-show-notes .bm-tbl tbody tr.bm-itemrow{ height:auto }
  .bm-show-notes .bm-inote{ max-width:100% }
}

/* ---------- підказка з описом (описи вимкнені) ----------
   Лежить у <body>, а не в рядку таблиці: .bm-scroll має overflow-x:auto і
   обрізав би її своїм краєм. Звідси position:fixed і координати з JS.
   Ширина обмежена, текст переноситься — довгий опис не розтягує підказку
   в один нескінченний рядок. */
.bm-tip{
  position:fixed; left:-9999px; top:-9999px; z-index:2600;
  max-width:min(340px, calc(100vw - 16px));
  padding:8px 10px; border-radius:8px;
  background:var(--ink-1, #1f2937); color:#fff;
  font-size:12px; line-height:1.4; font-weight:400;
  white-space:normal; overflow-wrap:anywhere;
  box-shadow:0 6px 20px rgba(15,23,42,.28);
  opacity:0; visibility:hidden; transition:opacity .12s ease;
  pointer-events:none;   /* підказка не перехоплює курсор і не залипає */
}
.bm-tip.on{ opacity:1; visibility:visible }
/* Назва з описом підказує курсором, що на неї є що подивитись. */
.bm-iname[data-tip]{ cursor:help }
@media (max-width:480px){
  .bm-tip{ max-width:calc(100vw - 16px); font-size:12.5px }
}