/* Дрібні класи ядра замість `style: '…'` у модулях (docs/15-design.md §6).
   Модуль лише ставить клас; відступи — кроками токенів, кольори — токенами.
   Файл підключено останнім: клас тут перемагає загальні правила тієї ж ваги. */

.app-host { display: flex; flex-direction: column; min-height: 100%; }

/* Відступи */
.m0    { margin: 0; }
.m     { margin: var(--gap); }
.mt-sm { margin-top: var(--gap-sm); }
.mt    { margin-top: var(--gap); }
.mt-lg { margin-top: var(--gap-lg); }
.mb-xs { margin-bottom: 6px; }
.mb-sm { margin-bottom: var(--gap-sm); }
.mb    { margin-bottom: var(--gap); }
.my-sm { margin-top: var(--gap-sm); margin-bottom: var(--gap-sm); }
.my    { margin-top: var(--gap); margin-bottom: var(--gap); }
.ml-xs { margin-left: 6px; }
.pad   { padding: var(--gap); }
.pad-b { padding: 0 var(--gap) var(--gap); }
.spacer { height: var(--gap); }
/* Відсунути праворуч у рядку-flex (стан шлюзу в заголовку панелі). */
.push  { margin-left: auto; }

/* Текст */
.muted { color: var(--muted); }
.faint { color: var(--dim); }
.xs    { font-size: 11.5px; }
/* Довгий рядок без пробілів (сирий User-Agent) переноситься будь-де. */
.break { overflow-wrap: anywhere; }
.ctr   { text-align: center; }
/* Тихий підпис поруч із дією (ім'я файлу, пояснення до кнопки). */
.note  { font-size: 13px; color: var(--muted); }
.note .ico { width: 16px; height: 16px; flex: none; }
/* Підпис над групою в аркуші: «Offene Meldungen», «Sensoren». */
.sec   { margin: var(--gap) 0 6px; font-size: 13px; color: var(--muted); }
/* Порожній розділ одним рядком: «Keine offenen Meldungen». */
.none  { margin: 0; font-size: 14px; color: var(--dim); }
.empty.tight { padding: 18px; }

/* Рядок фільтрів над списком на всю ширину сторінки. */
.row.toolbar { padding: var(--gap) var(--gap) 0; max-width: 980px; margin: 0 auto; }
/* Рядок-заголовок модуля в таблиці дозволів. */
td.grp-row { color: var(--muted); font-size: 12.5px; background: var(--raised); }
/* Поле для порогів у таблиці: нижче за звичайне. */
input.inp-sm { min-height: 34px; }
/* Графік показників на всю ширину аркуша. */
.chart-wide { display: block; width: 100%; height: 180px; }
/* Точка стану в легенді — кольором стану. */
.dot.ok   { color: var(--ok); }
.dot.warn { color: var(--warn); }
.dot.crit { color: var(--crit); }
.dot.off  { color: var(--off); }

/* Вхід */
.login { min-height: 100%; display: grid; place-items: center; padding: 24px; }
.login-box { width: 100%; max-width: 340px; }
.login-box .mark { margin-bottom: 22px; }
.login-box h1 { margin: 0 0 4px; font-size: 25px; font-weight: 600; letter-spacing: -.02em; }
.login-box .lead { margin: 0 0 26px; }
.login-box .err { margin: var(--gap) 0 0; min-height: 20px; font-size: 14px; }
.login-foot { margin-top: var(--gap-lg); display: flex; justify-content: center; }

/* Телефон чи широкий екран: два вигляди одного вмісту (напр. таблиця й
   перелік учасників). Межа та сама, що в phone.css. */
@media (max-width: 760px) { .wide-only { display: none !important; } }
@media (min-width: 761px) { .phone-only { display: none !important; } }