/* ═══════════════════════════════════════════════
   REALTRAC PROTOTYPE — MAP
   Разделы «Карта» и «Карта 2» (views/map.js): боковая панель (носители, объекты, уведомления), карта Leaflet,
   карточка носителя (views/map-card.js), таблица носителей под картой (v2).
   Элементы управления Leaflet приведены к стилю кабинета: квадратные, токены цветов.
   Порядок файла: панель → карта и элементы Leaflet → метки → геометрия → этажи → цвета зон → «Карта 2» →
   карточка носителя → уведомления → значки над метками → мелкие правки поздних задач (в конце файла).
   Токены цветов — в tokens.css; --zone-notice (жёлтая зона) объявлен здесь, им пользуются и другие разделы.
═══════════════════════════════════════════════ */

/* Раздел занимает всё под шапкой (flex в .app); min-height: 0 — иначе карта растягивает страницу вместо прокрутки панели */
.map-layout { flex: 1; min-height: 0; display: flex; position: relative; }

/* ── SIDE PANEL ── */
/* Боковая панель фиксированной ширины с собственной прокруткой; z-index выше карты, чтобы тени и меню были над ней */
.map-panel {
  width: 340px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-3);
  overflow-y: auto;
  background: var(--color-bg);
  border-right: 1px solid var(--color-border);
  z-index: 500;
}
.map-layout.is-panel-collapsed .map-panel { display: none; }
.map-panel .card { flex-shrink: 0; }
/* Списки в карточках панели ограничены по высоте и прокручиваются внутри, чтобы все три карточки помещались */
.panel-list { list-style: none; max-height: 320px; overflow-y: auto; }
.panel-empty { padding: var(--space-4); font-size: var(--text-sm); color: var(--color-text-faint); }

/* Строка носителя (v1): точка статуса, имя и подпись, значок типа; левая полоса — признак выбранного */
.carrier-row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  width: 100%;
  padding: var(--space-2) var(--space-4);
  text-align: left;
  border-left: 3px solid transparent;
}
.carrier-row:hover { background: var(--color-primary-highlight); }
.carrier-row.is-selected { background: var(--color-primary-highlight); border-left-color: var(--color-primary); }
.carrier-row-text { display: flex; flex-direction: column; min-width: 0; flex: 1; line-height: 1.3; }
.carrier-row-name { font-size: var(--text-sm); font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.carrier-row-meta { font-size: var(--text-xs); color: var(--color-text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.carrier-row > svg { width: 16px; height: 16px; flex-shrink: 0; color: var(--color-text-faint); }
.carrier-row .is-alert-icon { color: var(--rt-red); }
.carrier-row.is-offline .carrier-row-name { color: var(--color-text-muted); }

/* Строка дерева объектов; отступ по глубине задаётся data-depth, стрелка раскрытия поворачивается у открытых узлов */
.tree-row {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  width: 100%;
  padding: var(--space-2) var(--space-4);
  font-size: var(--text-sm);
  text-align: left;
}
.tree-row:hover { background: var(--color-primary-highlight); color: var(--color-primary); }
.tree-row > svg { width: 16px; height: 16px; flex-shrink: 0; color: var(--color-text-faint); }
.tree-row .tree-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tree-row[data-depth="1"] { padding-left: calc(var(--space-4) + 20px); }
.tree-row[data-depth="2"] { padding-left: calc(var(--space-4) + 40px); }
.tree-toggle { display: flex; color: var(--color-text-faint); }
.tree-toggle svg { width: 14px; height: 14px; transition: transform var(--transition); }
.tree-toggle.is-open svg { transform: rotate(90deg); }
.tree-toggle.is-leaf { visibility: hidden; }

/* Строка уведомления: цвет левой полосы — уровень (синий — уведомление, красный — опасное, жёлтый — предупреждение) */
.notif-row { display: flex; gap: var(--space-3); padding: var(--space-3) var(--space-4); border-left: 3px solid var(--color-primary); }
.notif-row + .notif-row { border-top: 1px solid var(--color-divider); }
.notif-row.level-DANGER { border-left-color: var(--rt-red); }
.notif-row.level-WARNING { border-left-color: var(--color-warning); }
.notif-row-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; font-size: var(--text-sm); line-height: 1.35; }
.notif-row-meta { font-size: var(--text-xs); color: var(--color-text-muted); }

/* Кнопка «скрыть панель» лежит поверх карты у её левого края и сдвигается вправо, пока панель открыта */
.panel-collapse {
  position: absolute;
  left: var(--space-3);
  top: var(--space-3);
  z-index: 600;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-sm);
}
.map-layout:not(.is-panel-collapsed) .panel-collapse { left: calc(340px + var(--space-3)); }

/* ── MAP ── */
/* isolation: z-index слоёв Leaflet (панели до 700, элементы управления до 1000) остаются внутри карты
   и не перекрывают кнопки и проигрыватель, лежащие поверх неё */
.map-canvas { flex: 1; min-width: 0; position: relative; isolation: isolate; background: var(--color-surface-offset); }
/* Сцена: карта на всю площадь, элементы интерфейса — соседними слоями поверх неё */
.map-stage { flex: 1; min-width: 0; position: relative; }
.map-stage > .map-canvas { position: absolute; inset: 0; }
.map-canvas .leaflet-container { width: 100%; height: 100%; font-family: var(--font-body); background: var(--color-surface-offset); }
/* Тёмная тема: OSM приглушается фильтром, спутник — без изменений */
[data-theme="dark"] .map-canvas .tiles-osm { filter: invert(1) hue-rotate(180deg) brightness(.85) contrast(.9) saturate(.6); }

/* Элементы управления Leaflet в стиле кабинета: без скруглений, 36 px, цвета из токенов; !important — у Leaflet свои стили с высокой специфичностью */
.leaflet-bar, .leaflet-control-layers, .leaflet-popup-content-wrapper, .leaflet-popup-tip, .leaflet-tooltip { border-radius: 0 !important; }
.leaflet-bar { border: 1px solid var(--color-border) !important; box-shadow: var(--shadow-sm) !important; }
.leaflet-bar a, .leaflet-bar a:hover {
  width: 36px !important;
  height: 36px !important;
  line-height: 34px !important;
  background: var(--color-surface);
  color: var(--color-text-muted);
  border-bottom-color: var(--color-divider);
}
.leaflet-bar a:hover { background: var(--color-primary-highlight); color: var(--color-primary); }
.leaflet-control-layers {
  background: var(--color-surface) !important;
  color: var(--color-text) !important;
  border: 1px solid var(--color-border) !important;
  box-shadow: var(--shadow-sm) !important;
  font-size: var(--text-sm);
}
.leaflet-control-layers-toggle { width: 36px !important; height: 36px !important; }
[data-theme="dark"] .leaflet-control-layers-toggle { filter: invert(1); }
.leaflet-control-layers-separator { border-top-color: var(--color-divider) !important; }
.leaflet-control-attribution { background: color-mix(in srgb, var(--color-surface) 80%, transparent) !important; color: var(--color-text-faint) !important; }
.leaflet-control-attribution a { color: var(--color-text-muted) !important; }
.leaflet-popup-content-wrapper, .leaflet-popup-tip { background: var(--color-surface); color: var(--color-text); box-shadow: var(--shadow-md); }
.leaflet-popup-content { margin: 0; font-size: var(--text-sm); line-height: 1.4; min-width: 220px; }
.leaflet-container a.leaflet-popup-close-button { color: var(--color-text-muted); }
.leaflet-tooltip { background: var(--color-surface); color: var(--color-text); border: 1px solid var(--color-border); box-shadow: var(--shadow-sm); font-size: var(--text-xs); }

/* Карточка носителя в popup Leaflet — прежний вариант, сейчас заменён панелью .carrier-card; стили оставлены на случай возврата */
.carrier-pop-head { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-3) var(--space-8) var(--space-3) var(--space-4); border-bottom: 1px solid var(--color-divider); font-weight: 600; }
.carrier-pop dl { display: grid; grid-template-columns: auto 1fr; gap: var(--space-1) var(--space-3); padding: var(--space-3) var(--space-4); }
.carrier-pop dt { color: var(--color-text-muted); font-size: var(--text-xs); align-self: center; }
.carrier-pop dd { font-size: var(--text-sm); }

/* Метка носителя: квадрат с иконкой и «хвостиком» (::after). Цвет по статусу: синий — в сети, серый — не в сети,
   красный с пульсацией — тревога на метке; цвета по зонам — ниже. Обёртка Leaflet (.carrier-marker) без своего фона */
.carrier-marker { background: none; border: 0; }
.carrier-pin {
  position: relative;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-primary);
  color: #fff;
  border: 2px solid var(--color-surface);
  box-shadow: var(--shadow-md);
}
.carrier-pin::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: -8px;
  transform: translateX(-50%);
  border: 6px solid transparent;
  border-bottom: 0;
  border-top-color: var(--color-primary);
}
.carrier-pin svg { width: 15px; height: 15px; }
.carrier-pin.is-offline { background: var(--color-offline); }
.carrier-pin.is-offline::after { border-top-color: var(--color-offline); }
.carrier-pin.is-alarm { background: var(--rt-red); animation: pin-pulse 1.2s infinite; }
.carrier-pin.is-alarm::after { border-top-color: var(--rt-red); }
.carrier-pin.is-selected { outline: 3px solid var(--color-primary-highlight); }
@keyframes pin-pulse { 50% { box-shadow: 0 0 0 8px rgba(208,31,39,.25); } }
@media (prefers-reduced-motion: reduce) { .carrier-pin.is-alarm { animation: none; } }

/* Подпись объекта с числом людей */
/* Постоянная подпись объекта по центру фигуры; число людей — жирным синим */
.object-label { padding: 2px var(--space-2); font-weight: 600; white-space: nowrap; }
.object-label b { margin-left: var(--space-1); color: var(--color-primary); }

/* ── RESPONSIVE: панель — выдвижной слой поверх карты ── */
@media (max-width: 900px) {
  .map-panel {
    position: absolute;
    inset: 0 auto 0 0;
    width: min(340px, 88vw);
    box-shadow: var(--shadow-md);
  }
  .map-layout:not(.is-panel-collapsed) .panel-collapse { left: calc(min(340px, 88vw) + var(--space-3)); }
}

/* ── ГЕОМЕТРИЯ: цвета через классы, чтобы работали токены темы ──
   Предприятие — пунктир без заливки, здание — синяя лёгкая заливка, этаж — только контур;
   зоны: обычная — синяя, опасная — красная, внимания — жёлтая, разрешённая — зелёная */
.geo-facility { stroke: var(--color-text-faint); fill: none; stroke-dasharray: 6 4; }
.geo-object { stroke: var(--color-primary); fill: var(--color-primary); fill-opacity: .05; }
.geo-level { stroke: var(--color-primary); fill: none; stroke-opacity: .4; }
.zone { stroke: var(--color-primary); fill: var(--color-primary); fill-opacity: .14; }
.zone-danger { stroke: var(--rt-red); fill: var(--rt-red); fill-opacity: .16; }
.zone-notice { stroke: var(--color-warning); fill: var(--color-warning); fill-opacity: .18; }
.zone-allowed { stroke: var(--color-success); fill: var(--color-success); fill-opacity: .14; }

/* ── ЭТАЖИ ── */
/* Активный этаж в дереве объектов */
.tree-row.is-active { color: var(--color-primary); font-weight: 600; background: var(--color-primary-highlight); }
.tree-row.is-active > svg { color: var(--color-primary); }

/* Носитель на другом этаже: в списке приглушён, по нажатию этаж переключается */
.carrier-row.is-other-floor { opacity: .6; }

/* Анкеры */
/* Анкеры (стационарные устройства) — маленькие серые точки с обводкой под цвет фона */
.anchor { stroke: var(--color-surface); fill: var(--color-text-muted); fill-opacity: 1; }


/* ── ЦВЕТ МЕТКИ ПО ЗОНЕ ── */
/* Жёлтая зона — свой токен: и заливка зоны, и метка носителя в ней одного цвета */
:root { --zone-notice: #E0A800; }
[data-theme="dark"] { --zone-notice: #FFD54F; }
.zone-notice { stroke: var(--zone-notice); fill: var(--zone-notice); fill-opacity: .2; }
.carrier-pin.is-zone-danger { background: var(--rt-red); }
.carrier-pin.is-zone-danger::after { border-top-color: var(--rt-red); }
.carrier-pin.is-zone-notice { background: var(--zone-notice); color: #1A1D23; }
.carrier-pin.is-zone-notice::after { border-top-color: var(--zone-notice); }
.status-dot.is-zone-danger { background: var(--rt-red); }
.status-dot.is-zone-notice { background: var(--zone-notice); }
/* Пилюли статуса в таблице и карточке: опасное — красным; значок заряда внутри пилюли */
.pill.is-danger { color: var(--color-error); background: var(--color-error-bg); }
.pill svg { width: 13px; height: 13px; }

/* ── КАРТА 2: слева объекты и уведомления на всю высоту, под картой (до боковой панели) — таблица носителей ──
   Сетка 2×2: панель занимает оба ряда первой колонки, карта — верх второй, док с таблицей — низ второй.
   Со скрытой панелью карта и док растягиваются на всю ширину */
.map-layout.is-v2 {
  display: grid;
  grid-template-columns: 340px minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr) auto;
}
.map-layout.is-v2 .map-panel { grid-row: 1 / -1; grid-column: 1; width: auto; }
.map-layout.is-v2 .map-stage { grid-row: 1; grid-column: 2; }
.map-layout.is-v2.is-panel-collapsed .map-stage,
.map-layout.is-v2.is-panel-collapsed .carrier-dock { grid-column: 1 / -1; }
/* Док с таблицей: высота — 38 % окна, но не меньше 220 px; таблица внутри прокручивается, заголовок липкий */
.carrier-dock {
  grid-row: 2;
  grid-column: 2;
  display: flex;
  flex-direction: column;
  height: max(220px, 38vh);
  min-height: 0;
  background: var(--color-surface);
  border-top: 1px solid var(--color-border);
  box-shadow: 0 -2px 8px rgba(0,30,80,.06);
  z-index: 500;
}
/* Шапка дока: заголовок с числом, квадраты зон, фильтр (тянется), статус, шестерёнка, кнопка сворачивания */
.dock-head { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-3); padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--color-divider); }
.dock-head .card-title { flex-shrink: 0; }
.dock-head .count { margin-left: var(--space-1); }
.dock-filter { flex: 1 1 280px; max-width: 560px; }
.dock-table { flex: 1; min-height: 0; overflow: auto; padding: 0 var(--space-4); }
.dock-table .dt-scroll { overflow: visible; }
.dock-table .dt th { position: sticky; top: 0; z-index: 2; }
.dock-table .dt-foot { padding: var(--space-2) 0; }
.dock-table .dt tbody tr.is-clickable { cursor: pointer; }
.dock-table .dt tbody tr.is-active { background: var(--color-primary-highlight); box-shadow: inset 3px 0 0 var(--color-primary); }

/* Узкий экран: панель — выдвижной слой (выше), карта сверху, док — 45 % высоты снизу */
@media (max-width: 900px) {
  .map-layout.is-v2 { grid-template-columns: 1fr; grid-template-rows: minmax(0, 1fr) 45vh; }
  .map-layout.is-v2 .map-stage { grid-column: 1; }
}
/* Таблица под картой — строки в одну линию, компактнее */
.dock-table .dt td { white-space: nowrap; padding-top: 6px; padding-bottom: 6px; }
.dock-table .avatar { width: 28px; height: 28px; }
.dock-table .avatar svg { width: 15px; height: 15px; }

/* Свёрнутый блок носителей: остаётся только строка заголовка, карта растягивается */
.map-layout.is-v2.is-dock-collapsed .carrier-dock { height: auto; }
.map-layout.is-v2.is-dock-collapsed .dock-table { display: none; }
.map-layout.is-v2.is-dock-collapsed .dock-head { border-bottom: 0; }
.dock-toggle { margin-left: auto; }
@media (max-width: 900px) {
  .map-layout.is-v2 .carrier-dock { grid-column: 1; height: 45vh; }
}
/* Карта 2: уведомления растягиваются до низа боковой панели, список прокручивается внутри */
.map-layout.is-v2 #notif-card { flex: 1 1 auto; min-height: 180px; display: flex; flex-direction: column; }
.map-layout.is-v2 #notif-list { flex: 1; min-height: 0; max-height: none; overflow-y: auto; }

/* ── КАРТОЧКА НОСИТЕЛЯ: панель справа поверх карты (views/map-card.js) ──
   Абсолютно позиционирована внутри .map-stage, прокручивается внутри, шапка липкая; на узких экранах — почти во всю ширину */
.carrier-card {
  position: absolute;
  top: var(--space-3);
  right: var(--space-3);
  bottom: var(--space-3);
  z-index: 2;                       /* над картой (.map-canvas — isolation) */
  width: min(360px, calc(100% - 2 * var(--space-3)));
  overflow-y: auto;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-md);
}
.cc-head { display: flex; align-items: flex-start; gap: var(--space-3); padding: var(--space-4); border-bottom: 1px solid var(--color-divider); position: sticky; top: 0; background: var(--color-surface); z-index: 1; }
.cc-title { flex: 1; min-width: 0; }
.cc-title h2 { font-size: var(--text-base); font-weight: 600; line-height: 1.3; }
.cc-title p { font-size: var(--text-xs); color: var(--color-text-muted); }
.cc-status { padding: var(--space-3) var(--space-4) 0; }
.cc-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); padding: var(--space-3) var(--space-4); }
.cc-actions .filter-btn { display: inline-flex; align-items: center; gap: var(--space-1); text-decoration: none; }
.cc-actions .filter-btn svg { width: 14px; height: 14px; }
.cc-trail-opts { display: flex; flex-direction: column; gap: var(--space-2); padding: 0 var(--space-4) var(--space-3); }
.cc-trail-opts .filter-label { font-size: var(--text-xs); font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--color-text-faint); }
/* Секции карточки: заголовок со значком, сетка «термин — значение» (dl) */
.cc-sec { padding: var(--space-3) var(--space-4); border-top: 1px solid var(--color-divider); }
.cc-sec h3 { display: flex; align-items: center; gap: var(--space-2); margin-bottom: var(--space-2); font-size: var(--text-sm); font-weight: 600; }
.cc-sec h3 svg { width: 16px; height: 16px; color: var(--color-primary); }
.cc-sec h3 .count { margin-left: auto; }
.cc-sec dl { display: grid; grid-template-columns: auto 1fr; gap: 4px var(--space-3); font-size: var(--text-sm); }
.cc-sec dt { color: var(--color-text-muted); font-size: var(--text-xs); align-self: center; }
.cc-sec dd { min-width: 0; overflow-wrap: anywhere; }
.cc-id { font-size: var(--text-xs); }
/* Мини-трек за 15 минут: SVG растягивается по ширине карточки; старт — серая точка, конец — синяя с обводкой */
.cc-mini { width: 100%; height: auto; background: var(--color-surface-2); border: 1px solid var(--color-divider); }
.cc-mini-start { fill: var(--color-text-faint); }
.cc-mini-end { fill: var(--color-primary); stroke: var(--color-surface); stroke-width: 2; }
.cc-mini-meta { margin-top: var(--space-1); font-size: var(--text-xs); color: var(--color-text-muted); }
.cc-empty { font-size: var(--text-xs); color: var(--color-text-faint); list-style: none; }
/* Непринятые тревоги носителя в карточке: левая полоса — уровень */
.cc-alerts { list-style: none; display: flex; flex-direction: column; gap: var(--space-1); }
.cc-alert { display: flex; justify-content: space-between; gap: var(--space-2); padding: var(--space-1) var(--space-2); font-size: var(--text-xs); border-left: 3px solid var(--color-primary); background: var(--color-surface-2); }
.cc-alert.level-DANGER { border-left-color: var(--rt-red); }
.cc-alert.level-WARNING { border-left-color: var(--zone-notice); }
.cc-alert-time { color: var(--color-text-muted); white-space: nowrap; }

/* ── Уведомления: уровень, звук, переход к носителю и в историю ──
   Правки поздних задач к .notif-row выше: выравнивание по верху, кликабельные строки, жёлтый — токеном зоны */
.notif-head-actions { display: flex; align-items: center; gap: var(--space-1); }
#notif-sound { width: 30px; height: 30px; }
#notif-sound.is-on { color: var(--color-primary); }
.notif-filter { padding: var(--space-2) var(--space-4); border-bottom: 1px solid var(--color-divider); }
.notif-row { align-items: flex-start; }
.notif-row-text { flex: 1; }
.notif-row.is-clickable { cursor: pointer; }
.notif-row.is-clickable:hover { background: var(--color-primary-highlight); }
.notif-row.level-WARNING { border-left-color: var(--zone-notice); }
.notif-history { width: 30px; height: 30px; flex-shrink: 0; }
/* Пока открыта карточка, элементы управления карты справа (слои, масштаб) — левее неё */
.map-stage.has-card .leaflet-right { right: calc(min(360px, 100% - 24px) + var(--space-3)); }

/* ── Неподтверждённые уведомления носителя — значок над меткой (цвет метки не меняют) ── */
.pin-badge {
  position: absolute; top: -11px; right: -11px;
  min-width: 18px; height: 18px; padding: 0 4px;
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 700; line-height: 1; color: #fff;
  background: var(--color-primary); border: 2px solid var(--color-surface); border-radius: 9px;
  box-shadow: var(--shadow-sm); pointer-events: none;
}
.pin-badge.level-DANGER { background: var(--rt-red); }
.pin-badge.level-WARNING { background: var(--zone-notice); color: #1A1D23; }

/* Подтвердить уведомление (в прототипе — только в этом браузере) */
.notif-confirm { width: 30px; height: 30px; flex-shrink: 0; border: 1px solid var(--color-border); }
.notif-confirm:hover, .notif-confirm:focus-visible { color: #fff; background: var(--color-success); border-color: var(--color-success); }

/* «Карта 2»: сколько сейчас в жёлтой и красной зоне — рядом с числом носителей; место под оба квадрата
   зарезервировано всегда, поэтому фильтр не сдвигается, когда квадраты появляются и исчезают */
.dock-zones { display: inline-flex; gap: var(--space-1); flex-shrink: 0; min-width: calc(2 * 30px + var(--space-1)); margin-left: calc(var(--space-1) - var(--space-3)); }
.dock-zones .count { min-width: 30px; margin-left: 0; }
.dock-zones .count.is-empty { display: none; }   /* видимые прижаты к числу, ширина под оба — в min-width */
.count.is-zone-notice { color: #1A1D23; background: var(--zone-notice); }
.count.is-zone-danger { color: #fff; background: var(--rt-red); }

/* Фильтр уведомлений — значками в одну строку: все / опасные / предупреждения (переопределяет .notif-filter выше);
   у невыбранных кнопок значок окрашен в цвет уровня, у выбранной — белый на синем */
.notif-filter { display: flex; flex-wrap: nowrap; gap: var(--space-1); }
.notif-filter .filter-btn { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 30px; padding: 0; }
.notif-filter .filter-btn svg { width: 16px; height: 16px; }
.notif-filter .filter-btn[data-level="DANGER"]:not(.active) svg { color: var(--rt-red); }
.notif-filter .filter-btn[data-level="WARNING"]:not(.active) svg { color: var(--zone-notice); }

/* Столбец «Тревоги»: непринятые красные и жёлтые — квадратами */
.alert-counts { display: inline-flex; gap: var(--space-1); }
/* Подтверждённые в этом браузере — вернуть в список */
.notif-restore { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); padding: var(--space-3) var(--space-4); font-size: var(--text-xs); color: var(--color-text-muted); border-top: 1px solid var(--color-divider); }

/* Заголовок «Уведомления» — ссылка в раздел «События»: наследует вид заголовка, стрелка проявляется при наведении */
.card-title-link { display: inline-flex; align-items: center; gap: inherit; color: inherit; text-decoration: none; }
.card-title-link:hover { color: var(--color-primary); }
.card-title-link .card-title-arrow { width: 16px; height: 16px; opacity: .5; }
.card-title-link:hover .card-title-arrow { opacity: 1; }