/* ════════════════════════════════════════════════════════════════════
   Модалка подтверждения выхода.

   Один и тот же блок лежал инлайном в семи страницах: index, /search,
   /ticket, /users, /profile, /knowledge-base, /important-notes. Шесть
   копий совпадали побайтово, седьмая (/important-notes) — с точностью
   до пустых строк между правилами. Правила перенесены без изменений:
   те же цвета, размеры, z-index, тени и подложка.

   Тёмная тема живёт отдельно, в css/dark-theme.css: там селекторы вида
   html[data-theme="dark"] .logout-modal-* — они специфичнее здешних и
   перекрывают их независимо от порядка подключения.

   На /ticket этими же классами оформлены ещё две модалки —
   #reopenApprovalModal и #cancelApprovalModal, — и у них есть своя
   фиолетовая кнопка .logout-modal-btn.confirm-indigo. Она осталась
   инлайном в ticket.html: к выходу из аккаунта отношения не имеет.

   Подключать только на страницах, где модалка выхода есть:
     <link rel="stylesheet" href="css/logout-modal.css?v=1">
   ════════════════════════════════════════════════════════════════════ */

.logout-modal-overlay{
  position:fixed;
  inset:0;
  background:rgba(15,23,42,.45);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  display:none;
  z-index:12000;
}
.logout-modal-overlay.show{
  display:block;
}
.logout-modal-box{
  position:fixed;
  left:50%;
  top:50%;
  transform:translate(-50%, -50%);
  width:min(420px, calc(100vw - 32px));
  background:#fff;
  border:1px solid #e5e7eb;
  border-radius:12px;
  box-shadow:0 12px 28px rgba(2,8,23,.24);
  padding:18px;
  font-family:"Segoe UI",Arial,system-ui,sans-serif;
}
.logout-modal-title{
  margin:0;
  font-size:18px;
  font-weight:700;
  color:#111827;
}
.logout-modal-text{
  margin:10px 0 16px;
  font-size:14px;
  color:#4b5563;
  line-height:1.45;
}
.logout-modal-actions{
  display:flex;
  justify-content:flex-end;
  gap:10px;
}
.logout-modal-btn{
  min-width:90px;
  padding:8px 14px;
  border-radius:8px;
  border:1px solid #d1d5db;
  background:#fff;
  color:#374151;
  font-size:14px;
  font-weight:600;
  cursor:pointer;
  box-shadow:0 2px 6px rgba(2,8,23,.10);
  transition:all .18s;
}
.logout-modal-btn:hover{
  border-color:#9ca3af;
  box-shadow:0 4px 10px rgba(2,8,23,.14);
}
.logout-modal-btn.confirm{
  background:#ef4444;
  border-color:#ef4444;
  color:#fff;
  box-shadow:0 6px 14px rgba(239,68,68,.35);
}
.logout-modal-btn.confirm:hover{
  background:#dc2626;
  border-color:#dc2626;
  box-shadow:0 8px 18px rgba(220,38,38,.42);
}
.logout-modal-btn:focus-visible{ outline:2px solid #818cf8; outline-offset:2px; }

/* ── Модалка выхода (.logout-sys) ───────────────────────────────────────────
   Оформлена как системные модалки (фильтры, массовые действия на /index:
   css/filters-modal.css .filters-content, css/bulk-actions.css): та же рамка,
   заголовок 19px и крестик. Слева от заголовка — красная плитка с иконкой
   выхода, ниже — спокойный блок «что произойдёт». Модификатор только у модалки
   выхода: остальные модалки на классах .logout-modal-* (заметки, тикет)
   остаются прежними. Страницам без своей модалки её создаёт
   js/ui/logout-modal.js. Тёмная тема — в css/dark-theme.css. */
.logout-modal-box.logout-sys{
  width:min(440px, calc(100vw - 32px));
  /* Шрифт — как у системных модалок (css/filters-modal.css .filters-content)
     и окон страницы («Включить обучение» и др.). Раньше здесь стоял Inter, а
     где он не загружен — Arial: окна выглядели чужими рядом с остальными.
     Arial когда-то спасал от «прыгающего» при наведении текста, но настоящая
     причина была в дробном подъёме кнопки — она исправлена (--lift-1,
     js/ui/ui-scale.js). */
  font-family:"Segoe UI",Arial,system-ui,sans-serif;
  /* Отступы с запасом: на плотных окнах (удаление с переносом) текст стоял
     впритык. */
  padding:24px 24px 22px;
  border-radius:16px;
  background:linear-gradient(180deg,#ffffff 0%,#fafbff 100%);
  border:1px solid rgba(165,180,252,.40);
  box-shadow:0 24px 48px rgba(15,23,42,.22), 0 8px 18px rgba(99,102,241,.10), inset 0 1px 0 rgba(255,255,255,.9);
}
.logout-sys-head{ display:flex; align-items:flex-start; gap:12px; }
.logout-sys-icon{
  flex:0 0 42px;
  height:42px;
  border-radius:12px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:linear-gradient(180deg,#fff5f5 0%,#fee2e2 100%);
  border:1px solid #fecaca;
  color:#dc2626;
  box-shadow:0 4px 10px rgba(220,38,38,.10);
}
.logout-sys-titles{ flex:1; min-width:0; padding-top:1px; }
.logout-sys .logout-modal-title{ font-size:19px; letter-spacing:-.2px; color:#0f172a; }
.logout-sys-sub{ margin:5px 0 0; font-size:13px; line-height:1.45; color:#64748b; }
/* крестик — как .filters-close системных модалок */
.logout-sys-close{
  flex:0 0 auto;
  width:32px;
  height:32px;
  padding:0;
  border:none;
  background:transparent;
  border-radius:6px;
  display:flex;
  align-items:center;
  justify-content:center;
  color:#6b7280;
  cursor:pointer;
  transition:background .2s ease, color .2s ease;
}
.logout-sys-close:hover{ background:#f3f4f6; color:#374151; }
.logout-sys-close:focus-visible{ outline:2px solid #818cf8; outline-offset:2px; }
.logout-sys-info{
  margin:20px 0 24px;
  padding:14px 16px;
  border-radius:12px;
  background:#f8fafc;
  border:1px solid #e2e8f0;
  display:grid;
  gap:12px;
}
.logout-sys-row{ display:flex; gap:10px; align-items:center; font-size:13px; line-height:1.45; color:#334155; }
.logout-sys-row i{
  flex:0 0 22px;
  height:22px;
  border-radius:7px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:#eef2ff;
  color:#4338ca;
  /* Segoe UI садит строчные ниже середины строки: без сдвига плитка стояла
     на 0,8px выше середины текста (замер), со сдвигом — 0,2px. */
  transform:translateY(1px);
}
/* Кнопки — как в окне «Изменить статус» (css/bulk-actions.css):
   «Остаться» — .bulk-modal-cancel, «Выйти» — .bulk-modal-submit.danger, тот же
   подъём на целую точку экрана. Только внутри .logout-sys: остальные модалки
   сохраняют прежние кнопки выше.
   Высота 40px, надпись — по центру flex-ом, строка 13px и снизу 1px: до
   строки ровно (40 − 1 − 13) / 2 = 13px, целое — округлять браузеру нечего.
   При 2px выходило 12,5, и надпись в зависимости от масштаба уходила на
   точку выше центра. Окно ставится на целые пиксели (js/ui/ui-scale.js →
   snapModal): иначе надпись «гуляла» от высоты окна браузера. Замер «Отмена»
   по 64 сочетаниям масштаба (67–150%), высоты окна и экрана 1920/2560:
   надпись не выше центра больше чем на 0,6 точки. */
.logout-sys .logout-modal-btn{
  min-width:96px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:40px;
  padding:0 16px 1px;
  line-height:1;
  border:1px solid #dbe5f0;
  background:#fff;
  border-radius:10px;
  color:#374151;
  font-family:inherit;
  font-size:13px;
  font-weight:600;
  box-shadow:0 1px 2px rgba(15,23,42,.05);
  transition:background .18s ease, border-color .18s ease, color .18s ease, box-shadow .18s ease, transform .18s ease;
}
.logout-sys .logout-modal-btn:hover{
  background:var(--brand-primary-tint, #eef2ff);
  border-color:var(--brand-primary-soft, #e0e7ff);
  color:var(--brand-primary-dark, #2a44d8);
  /* Подъём ровно на целое число точек экрана (--lift-1, js/ui/ui-scale.js):
     при дробном подъёме (zoom 0.92 × масштаб Windows 125% = 1,15 точки) фон
     и текст округлялись по-разному, и надпись уезжала отдельно от кнопки. */
  transform:translateY(var(--lift-1,-1px));
}
.logout-sys .logout-modal-btn:active{ transform:translateY(0); }
.logout-sys .logout-modal-btn.confirm{
  padding:0 18px 1px;
  min-width:120px;
  border:none;
  background:linear-gradient(180deg, #f87171 0%, #dc2626 100%);
  color:#fff;
  box-shadow:0 2px 6px rgba(220,38,38,.18), 0 4px 12px rgba(220,38,38,.10);
  transition:background .22s ease, box-shadow .22s ease, transform .22s ease;
}
.logout-sys .logout-modal-btn.confirm:hover{
  background:linear-gradient(180deg, #ef4444 0%, #dc2626 100%);
  color:#fff;
  box-shadow:0 4px 10px rgba(220,38,38,.26), 0 6px 18px rgba(220,38,38,.16);
  transform:translateY(var(--lift-1,-1px));
}
.logout-sys .logout-modal-btn.confirm:active{
  background:linear-gradient(180deg, #dc2626 0%, #b91c1c 100%);
  transform:translateY(0);
  box-shadow:inset 0 1px 2px rgba(80,10,10,.20), 0 1px 3px rgba(220,38,38,.15);
}

/* Индиго-вариант для не разрушительных подтверждений (/ticket:
   «Возобновить согласование?»): плитка и основная кнопка — индиго, как
   «Понятно» и основные кнопки системы. Остальное — как у .logout-sys. */
.logout-sys-icon.indigo{
  background:linear-gradient(180deg,#f5f7ff 0%,#e0e7ff 100%);
  border-color:#c7d2fe;
  color:#4f46e5;
  box-shadow:0 4px 10px rgba(99,102,241,.10);
}
.logout-sys .logout-modal-btn.confirm.indigo{
  background:linear-gradient(180deg, #6366f1 0%, #4f46e5 100%);
  box-shadow:0 2px 6px rgba(99,102,241,.18), 0 4px 12px rgba(99,102,241,.10);
}
.logout-sys .logout-modal-btn.confirm.indigo:hover{
  background:linear-gradient(180deg, #7274f4 0%, #4f46e5 100%);
  box-shadow:0 4px 10px rgba(99,102,241,.26), 0 6px 18px rgba(99,102,241,.16);
}
.logout-sys .logout-modal-btn.confirm.indigo:active{
  background:linear-gradient(180deg, #4f46e5 0%, #4338ca 100%);
  box-shadow:inset 0 1px 2px rgba(20,16,80,.20), 0 1px 3px rgba(99,102,241,.15);
}