/* === Глобальные переменные =============================================== */
:root {
  /* Отступ от верхнего края для фиксированного поповера уведомлений.
     Будем обновлять из JS по фактической высоте header. */
  --header-offset: 0px;
}

/* === Header: финальная раскладка и компактность =========================== */

#app-header,
#app-header * {
  box-sizing: border-box;
  font-family: inherit !important;
}

#app-header.app-header {
  position: sticky;
  top: 0;
  z-index: calc(var(--flt-z, 6000) + 20) !important;
  width: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
  background: linear-gradient(135deg, var(--peach-1) 0%, var(--peach-2) 100%);
  border-bottom: 1px solid var(--peach-border);
  backdrop-filter: saturate(1.05) blur(4px);
}
.dark-theme #app-header.app-header {
  background: linear-gradient(135deg,#1e1e2c 0%, #1a1a28 100%);
  border-bottom-color: #3e3e58;
}

/* ВНУТРЕННЯЯ СЕТКА: logo | spacer | right (на всю ширину страницы) */
#app-header .header-inner {
  max-width: none !important;   /* убираем ограничение контейнера */
  width: 100% !important;
  margin: 0 auto !important;
  padding: 4px 12px !important; /* компактнее вертикальный размер */
  display: grid !important;
  grid-template-columns: auto 1fr auto !important;
  align-items: center !important;
  gap: 12px !important;
}

/* Поповер, пока скрыт, полностью инертен */
[data-notify-popover][hidden]{
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

/* ЛОГО ЛЕВЫЙ КРАЙ */
#app-header .logo {
  margin: 0 !important;
  padding: 0 !important;
  line-height: 1.1 !important;
  font-weight: 800 !important;
  justify-self: start !important;
}
#app-header .logo a {
  display: inline-block !important;
  text-decoration: none !important;
  color: inherit !important;  /* сохраняем «красивое оформление» из main.css */
  padding: 2px 0 !important;
}

/* ПРОМЕЖУТОК — занимает всю середину */
#app-header .header-spacer {
  min-width: 0 !important;
}

/* ПРАВАЯ ЧАСТЬ СТРОГО У ПРАВОГО КРАЯ */
#app-header .header-right {
  justify-self: end !important;
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
}

/* КОМПАКТНЫЕ КНОПКИ/АВАТАР (не увеличивают высоту шапки) */
#app-header .header-avatar {
  width: 28px !important;
  height: 28px !important;
  border-radius: 999px !important;
  object-fit: cover !important;
  border: 1px solid #e5e7eb !important;
  background: #f3f4f6 !important;
}
.dark-theme #app-header .header-avatar { border-color:#3e3e58 !important; background:#2a2a3c !important; }

#app-header .user-trigger,
#app-header .icon-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  min-height: 30px !important;
  height: 30px !important;
  padding: 4px 8px !important;
  border-radius: 10px !important;
  border: 1px solid #e5e7eb !important;
  background: #f9fafb !important;
  font-weight: 700 !important;
  cursor: pointer !important;
  line-height: 1 !important;
}
#app-header .icon-btn { min-width: 30px !important; }
#app-header .user-trigger:hover,
#app-header .icon-btn:hover { background:#eef2ff !important; }
.dark-theme #app-header .user-trigger,
.dark-theme #app-header .icon-btn { border-color:#555 !important; background:#3a3a55 !important; color:#e5e7eb !important; }
.dark-theme #app-header .user-trigger:hover,
.dark-theme #app-header .icon-btn:hover { background:#343454 !important; }

/* ДРОПДАУН ПОЛЬЗОВАТЕЛЯ */
#app-header .user-menu { position: relative !important; }
#app-header .user-menu .dropdown {
  position: absolute !important;
  right: 0; top: calc(100% + 8px) !important;
  min-width: 200px !important;
  background: var(--peach-1) !important; color: var(--peach-ink) !important;
  border: 1px solid var(--peach-border) !important;
  box-shadow: 0 12px 28px rgba(0,0,0,.18) !important;
  padding: 8px !important;
  display: none !important;
  border-radius: 12px !important;
}
#app-header .user-menu .dropdown.active { display: block !important; }
.dark-theme #app-header .user-menu .dropdown {
  background:#2a2a3c !important; color:#e5e7eb !important; border-color:#444 !important;
  box-shadow: 0 16px 36px rgba(0,0,0,.45) !important;
}
#app-header .user-menu .dropdown .button,
#app-header .user-menu .dropdown a.button,
#app-header .user-menu .dropdown button {
  display:block !important; width:100% !important; text-align:left !important; margin:4px 0 !important;
}

/* НОТИФИКАЦИИ (правый край, поверх) */
#app-header .notify-area { position: relative !important; z-index: 1004 !important; }
#app-header .notify-badge {
  position: absolute !important; top: -4px !important; right: -4px !important;
  min-width: 16px !important; height: 16px !important; padding: 0 4px !important;
  border-radius: 999px !important;
  background: #ef4444 !important; color: #fff !important;
  font-size: 11px !important; font-weight: 800 !important;
  display: inline-flex !important; align-items: center !important; justify-content: center !important;
  border: 2px solid #fff !important;
}
.dark-theme #app-header .notify-badge { border-color: #1f1f2e !important; }

/* ФИКСИРОВАННЫЙ ПОПОВЕР УВЕДОМЛЕНИЙ У ПРАВОГО КРАЯ */
#app-header .notify-popover {
  position: fixed !important;
  right: 8px !important;
  top: calc(var(--header-offset) + 8px) !important;
  width: min(92vw, 420px) !important;
  max-height: min(72vh, 520px) !important;
  overflow: auto !important;

  background: var(--peach-1) !important; color: var(--peach-ink) !important;
  border: 1px solid var(--peach-border) !important;
  box-shadow: 0 12px 28px rgba(0,0,0,.18) !important;
  z-index: 1006 !important;
  padding: 10px !important;
  border-radius: 12px !important;
}
.dark-theme #app-header .notify-popover {
  background:#2a2a3c !important; color:#e5e7eb !important; border-color:#444 !important;
  box-shadow: 0 16px 36px rgba(0,0,0,.45) !important;
}

/* Шапка поповера + действия списком */
#app-header .notify-popover .notify-head {
  display: flex !important;
  justify-content: space-between !important;
  align-items: flex-start !important;
  gap: 10px !important;
  margin-bottom: 8px !important;
}
#app-header .notify-popover .notify-title {
  font-weight: 800 !important;
  font-size: 1.05rem !important;
}
#app-header .notify-popover .notify-actions {
  display: flex !important;
  flex-direction: column !important;    /* кнопки вертикальным списком */
  align-items: stretch !important;
  gap: 6px !important;
}
#app-header .notify-popover .notify-actions .button,
#app-header .notify-popover .notify-actions a.button {
  width: 100% !important;
}

/* Список уведомлений: колоночный, с рамками элементов */
#app-header .notify-popover .notify-list {
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
}
#app-header .notify-popover .notify-list .empty{
  padding: 14px !important;
  border: 1px dashed var(--peach-border) !important;
  border-radius: 10px !important;
  text-align: center !important;
  color: #6b7280 !important;
  background: #fafafa !important;
}
.dark-theme #app-header .notify-popover .notify-list .empty{
  border-color:#555 !important; background:#2a2a3c !important; color:#9aa1b2 !important;
}

/* Отдельный элемент уведомления — в рамке */
#app-header .notify-popover .notify-item{
  border: 1px solid #e5e7eb !important;
  border-radius: 10px !important;
  padding: 10px !important;
  background: #fff !important;
}
.dark-theme #app-header .notify-popover .notify-item{
  border-color:#444 !important; background:#2a2a3c !important;
}
#app-header .notify-popover .notify-item.unread{
  border-color:#c7d2fe !important; background:#eef2ff !important;
}
.dark-theme #app-header .notify-popover .notify-item.unread{
  border-color:#3b82f6 !important; background:#1f2438 !important;
}
#app-header .notify-popover .notify-item .notify-text{
  font-weight: 700 !important;
  text-decoration: none !important;
  color: inherit !important;
  display: block !important;
}
#app-header .notify-popover .notify-item .notify-time{
  font-size: .86rem !important;
  color:#6b7280 !important;
  margin-top: 2px !important;
}
.dark-theme #app-header .notify-popover .notify-item .notify-time{ color:#9aa1b2 !important; }

/* Гарантированно прячем hidden */
#app-header [hidden] { display: none !important; }

/* === Констрастность кнопки имени пользователя на светлой теме ============================ */
html:not(.dark-theme) #app-header .user-trigger {
  background: #f3f6ff !important;        /* лёгкий голубой оттенок → видна на фоне хедера */
  border-color: #cfd8ff !important;       /* контрастнее граница */
  box-shadow: inset 0 1px 0 rgba(17,24,39,.04) !important;
}

html:not(.dark-theme) #app-header .user-trigger:hover {
  background: #e8efff !important;
  border-color: #bfd0ff !important;
}

/* Доступность: чёткий фокус для кликабельных элементов хедера */
#app-header .user-trigger:focus-visible,
#app-header .icon-btn:focus-visible {
  outline: 2px solid #2563eb !important;
  outline-offset: 2px !important;
}

/* === Fix: читаемый текст на кнопке пользователя в светлой теме ============ */
/* Жёстко задаём тёмный цвет текста для кнопки-юзера и колокольчика */
html:not(.dark-theme) #app-header .user-trigger,
html:not(.dark-theme) #app-header .user-trigger *,
html:not(.dark-theme) #app-header .icon-btn,
html:not(.dark-theme) #app-header .icon-btn * {
  color: #111827 !important;   /* тёмный текст в светлой теме */
  fill: currentColor !important;
}

/* На всякий случай, если где-то .user-trigger случайно дали класс .button */
html:not(.dark-theme) #app-header .user-trigger.button {
  color: #111827 !important;
}

/* Ховер остаётся светлее, текст — всё равно тёмный */
html:not(.dark-theme) #app-header .user-trigger:hover,
html:not(.dark-theme) #app-header .icon-btn:hover {
  background: #eef2ff !important;
  color: #111827 !important;
}

/* гарантируем кликабельность */
#app-header .notify-btn,
#app-header .notify-popover { pointer-events: auto !important; }