/* Уведомления в Telegram. Только классы с префиксом раздела (nt-); токены цвета — из app.css. */

/* Слева — подключение и галочки, справа — как выглядит сводка. На узком — друг под другом. */
.nt-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, 380px); gap: 18px;
  align-items: start; }
.nt-col-main, .nt-col-side { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.nt-col-side { position: sticky; top: calc(var(--topbar-h) + 16px); }

.nt .panel__head { align-items: center; }
.nt .panel__head .chip { margin-left: auto; }
.nt-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.nt-actions a.btn { text-decoration: none; }
.nt-steps { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 5px;
  font-size: 13.5px; color: var(--ink-2); }
.nt-steps b { color: var(--ink); font-weight: 600; }
.nt-wait::before { content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 50%;
  background: var(--st-warn); margin-right: 7px; vertical-align: 1px;
  animation: nt-pulse 1.4s ease-in-out infinite; }
@keyframes nt-pulse { 50% { opacity: .25; } }

/* Общие настройки: время сводки и тихие часы — одной строкой, на телефоне — в столбик. */
.nt-common { flex-direction: row; flex-wrap: wrap; gap: 10px 26px; align-items: center; }
.nt-field { display: inline-flex; align-items: center; gap: 8px; font-size: 13.5px; color: var(--ink-2);
  min-width: 0; }
.nt-field .select { width: auto; padding: 6px 10px; font-size: 13.5px; }
.nt-field--check { cursor: pointer; }
.nt-field--check input { width: 16px; height: 16px; flex: none; accent-color: var(--brand); }
.nt-field--check span { line-height: 1.35; }

/* Матрица «группа тревог × кабинет». Первая колонка — подпись и пояснение, дальше
   по колонке на кабинет с галочкой по центру. */
.nt-matrix-wrap { padding-top: 6px; }
.nt-matrix tbody th { white-space: normal; min-width: 180px; padding-right: 14px; }
.nt-matrix .nt-lbl { display: block; font-weight: 550; color: var(--ink); font-size: 13.5px; }
.nt-matrix tbody th .sub { white-space: normal; font-size: 12px; line-height: 1.35; margin-top: 1px; }
.nt-matrix thead th.nt-shopcol { text-align: center; min-width: 96px; font-weight: 600; color: var(--ink-2);
  font-size: 12.5px; }
.nt-matrix thead th .sub { display: block; font-weight: 400; }
.nt-matrix td.nt-cell { text-align: center; width: 1%; }
.nt-matrix--one thead { display: none; }
.nt-matrix--one td.nt-cell { width: 64px; }
.nt-matrix tbody tr.nt-extra th, .nt-matrix tbody tr.nt-extra td { background: var(--surface-2); }
/* Кабинетов больше, чем влезает в телефон, — колонки кабинетов прокручиваются,
   подписи остаются на месте: иначе непонятно, какая это галочка. */
.nt-matrix tbody th, .nt-matrix thead th:first-child { position: sticky; left: 0; z-index: 1;
  background: var(--surface); }
.nt-matrix td.nt-cell { min-width: 64px; }
/* Галочка стоит по центру колонки, число тревог — слева от неё и на выравнивание не влияет. */
.nt-check { position: relative; display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer; padding: 4px; border-radius: var(--r-s); }
.nt-check:hover { background: var(--surface-3); }
.nt-check input { width: 18px; height: 18px; margin: 0; cursor: pointer; accent-color: var(--brand); }
.nt-check input:disabled { cursor: default; }
.nt-now { position: absolute; right: calc(100% + 1px); top: 50%; transform: translateY(-50%);
  min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px; display: inline-grid;
  place-items: center; font-size: 11.5px; font-weight: 600; font-variant-numeric: tabular-nums;
  background: var(--warn-soft); color: var(--warn); }

/* Предпросмотр: пузырь сообщения как в Telegram — только ради узнаваемости, цвета свои. */
.nt-chat { background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r);
  padding: 14px 12px; }
.nt-bubble { background: var(--surface); border: 1px solid var(--line); border-radius: 14px 14px 14px 4px;
  padding: 10px 12px 6px; max-width: 100%; box-shadow: var(--shadow); }
.nt-bubble__text { white-space: pre-wrap; overflow-wrap: anywhere; font-size: 13.5px; line-height: 1.5;
  color: var(--ink); }
.nt-bubble__text b { font-weight: 650; }
.nt-bubble__text i { color: var(--ink-2); }
.nt-bubble__time { text-align: right; font-size: 11px; color: var(--ink-3); margin-top: 2px;
  font-variant-numeric: tabular-nums; }

@media (max-width: 1100px) {
  .nt-grid { grid-template-columns: minmax(0, 1fr); }
  .nt-col-side { position: static; }
}

@media (max-width: 520px) {
  .nt-common { flex-direction: column; align-items: flex-start; }
  .nt-matrix tbody th { min-width: 140px; max-width: 170px; box-shadow: 1px 0 0 var(--line); }
  .nt-matrix thead th.nt-shopcol { min-width: 72px; }
}