/* ═══ СПІЛЬНІ КОМПОНЕНТИ ІНТЕРФЕЙСУ — НА КОЖНІЙ СТОРІНЦІ ══════════════════
 *
 * ЧОМУ ОКРЕМИЙ ФАЙЛ, А НЕ portal.css. `portal.css` підключений лише в 12 із
 * 25 шаблонів — це стилі «звичайної сторінки порталу», і сторінки з власною
 * версткою (Дашборд, картка клієнта, канбан, Журнали, «Усі записи») його не
 * беруть. Три класи, покладені туди 03.08.2026, через це мовчки не діяли:
 * повний екран не вмикався в ЖОДНОМУ з трьох розділів, які його мали,
 * а `.fired` не фарбував нікого поза FIN і РАД.
 *
 * Спіймано браузерною перевіркою: клас на елементі був, `position` лишався
 * `static`. Урок той самий, що з `portal-heat.js`: спільний механізм мусить
 * бути ПІДКЛЮЧЕНИЙ там, де вживається, і це треба перевіряти фактом.
 *
 * Сюди кладемо лише те, що справді наскрізне. Розділові стилі — у своїх
 * файлах.
 */

/* ── ⓘ КНОПКА-ПІДКАЗКА ───────────────────────────────────────────────────────
   Маленьке коло з «i». Пояснення живе в попапі, а не абзацом на сторінці:
   текст, який потрібен раз на місяць, не має щодня займати смугу над даними.
   Рушій попапа — portal-filters.js (`data-pop-for`), окремого не заводимо. */
.hint-btn{display:inline-flex;align-items:center;justify-content:center;
  width:16px;height:16px;flex:none;padding:0;line-height:0;cursor:pointer;
  vertical-align:-2px;margin-left:5px;
  border:1px solid var(--line);border-radius:50%;background:var(--paper);color:var(--muted)}
.hint-btn:hover,.hint-btn[aria-expanded="true"]{border-color:var(--gold);
  color:var(--oxblood);background:var(--cream)}
.hint-btn:focus-visible{outline:none;border-color:var(--gold);box-shadow:var(--focus-ring)}

/* ── ЗВІЛЬНЕНИЙ ПРАЦІВНИК: ОДИН КЛАС НА ВСЮ ПЛАТФОРМУ ───────────────────────
   Ознака — `ref_staff.status_sotrudnyka = 'нет'`. Ставиться там, де показане
   ІМ'Я: картка клієнта, Журнали, РАД, ЛМ, FIN, когорта ріелторів, Усі записи,
   довідники. Фарбувати в кожному розділі окремо означало б мати вісім різних
   червоних через півроку.

   Колір сам по собі нічого не пояснює, тому клас іде РАЗОМ із `title`
   («звільнений»). Без підказки людина бачить червоне й гадає, що це помилка. */
.fired{color:var(--fired-fg)}
/* На темній шапці (сортування, групові заголовки) червоний на бордовому не
   читається — там ознака не потрібна взагалі, тож клас нейтралізуємо. */
thead .fired{color:inherit}

/* ── ЗВІЛЬНЕНІ У СВІТЛОФОРНІЙ ТЕПЛОКАРТІ ───────────────────────────────────
   Заміряно: `--fired-fg` (#CC0000) на найтемнішій ЧЕРВОНІЙ заливці світлофора
   дає 2.85:1 — нижче порога WCAG AA 4.5:1. І річ не лише в контрасті: червоне
   ім'я на червоній клітинці читається як одне повідомлення, хоча повідомлень
   два («людина звільнена» і «показник поганий»), і вони ніяк не пов'язані.

   Тому у світлофорному режимі ознака переходить із КОЛЬОРУ на НАКРЕСЛЕННЯ:
   ім'я лишається кольором тексту, а звільнення показує тонке закреслення.
   Обрано закреслення, а не бейдж: бейдж додає слово в кожен рядок таблиці на
   тисячу рядків, а закреслення нічого не займає і вже вживається на платформі
   в тому самому значенні — так позначені рядки, яких більше немає в джерелі
   (`tr.gone` у довідниках). Один жест — одне значення.

   `title="звільнений"` лишається на місці в обох режимах: накреслення, як і
   колір, саме по собі нічого не пояснює. */
:root.theat-light .fired{
  color:inherit;
  text-decoration:line-through;
  text-decoration-thickness:1px;
  text-decoration-color:var(--fired-fg);
  text-underline-offset:0;
}

/* ── ПОВНОЕКРАННИЙ РЕЖИМ (portal-fs.js) ─────────────────────────────────────
   Fixed-шар на весь в'юпорт. `display:flex` + `min-height:0` на вмісті — щоб
   таблиця всередині отримала СВОЮ прокрутку, а не розтягнула шар: інакше
   липка шапка приклеюється до вікна, а не до контейнера, і зникає під шапкою
   сайту. */
/* ПОДВІЙНИЙ КЛАС — не примха, а вага селектора. Розділові стилі підключаються
   ПІСЛЯ спільних, і однокласовий `.pt-fs` програвав однокласовим `.card` та
   `.coh` у `dash.css` за порядком джерела: фон лишався прозорим
   (`--surface`), а `margin-top:16px` зсував шар на 16px від верху — крізь
   overlay просвічувалась шапка сайту.

   Стара реалізація Дашборда мала `.coh.fs` (дві ланки) і тому вигравала; при
   переїзді на спільний клас я цю вагу втратив.

   ТРИ ЛАНКИ, а не дві: у Дашборді є ще `.tabpanel > .card` — теж дві ланки, і
   на рівній вазі виграє той, хто пізніше в каскаді, тобто знову розділ. Він
   ставив `margin-top:16px`, і повноекранний шар з'їжджав на 16px від верху —
   у щілину було видно шапку сайту.

   Три ланки — некрасиво, але детерміновано: `!important` тут гірший (він
   відібрав би в розділів право взагалі щось міняти), а перенесення
   `portal-ui.css` у кінець <head> зробило б спільні стилі сильнішими за
   розділові СКРІЗЬ, а не лише в оверлеї. */
.pt-fs.pt-fs.pt-fs{
  position:fixed;inset:0;z-index:200;
  margin:0;border:none;border-radius:0;
  padding:var(--sp-5) var(--wrap-pad-x);
  background:var(--cream);
  display:flex;flex-direction:column;overflow:hidden}
.pt-fs.pt-fs > *{flex:none}
.pt-fs.pt-fs .scroll,.pt-fs.pt-fs .fin-scroll,.pt-fs.pt-fs .mx-scroll{flex:1 1 auto;min-height:0;
  max-height:none;overflow:auto}
body.pt-fs-open{overflow:hidden}
/* Кнопка ⛶ у шапці блоку: у звичайному вигляді «розгорнути», у повному —
   «згорнути». Два значки в одній кнопці, перемикаються станом хоста. */
[data-fs] .i-close{display:none}
.pt-fs [data-fs] .i-expand{display:none}
.pt-fs [data-fs] .i-close{display:inline}