/* === Палитра кабинета airshadow.site === */
:root {
  --bg-primary: #0A0E1A;
  --bg-surface: #0F172A;
  --bg-card: #111827;
  --text-primary: #F1F5F9;
  --text-muted: #94A3B8;
  --accent: #8B5CF6;
  --accent-hover: #7E22CE;
  --success: #22C55E;
  --warning: #F59E0B;
  --danger: #EF4444;
  --border: #1F2937;
}

/* === Шрифты: цветные emoji флагов кросс-платформенно ===
   Windows Segoe UI Emoji НЕ содержит flag glyphs (региональные индикаторы
   рендерятся как пары букв "DE", "FI" и т.п.). Google Noto Color Emoji
   тоже не всегда срабатывает (формат COLRv1 не поддерживается старыми
   Chromium-ами). Используем Twemoji-Mozilla — COLRv0 шрифт от Mozilla,
   работает в Chrome/Firefox/Edge на всех платформах включая Windows. */
@font-face {
  font-family: 'Twemoji Mozilla';
  src: url('/assets/twemoji-mozilla.ttf') format('truetype');
  font-display: swap;
  /* Регион-индикаторы (флаги стран) + основные emoji. */
  unicode-range: U+1F1E6-1F1FF, U+1F300-1F9FF, U+1F000-1F02F,
                 U+1F0A0-1F0FF, U+1F100-1F1FF, U+1F200-1F2FF,
                 U+2600-27BF, U+2300-23FF, U+2B00-2BFF;
}

/* Twemoji первым в списке — используется ТОЛЬКО для emoji в нашем
   unicode-range; обычный текст рендерится системным шрифтом. */
*, *::before, *::after {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
               "Helvetica Neue", Arial, "Twemoji Mozilla",
               "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji",
               sans-serif !important;
}

/* === Глобальный фон === */
body, html, .min-h-screen, #app {
  background: var(--bg-primary) !important;
  color: var(--text-primary) !important;
}

/* === Хедер === */
header h1, .header h1 {
  color: var(--text-primary) !important;
  font-weight: 700 !important;
}
header img.logo, .header img.logo, header img {
  max-height: 56px !important;
  filter: drop-shadow(0 4px 12px rgba(139, 92, 246, 0.5));
}

/* === Кнопки навигации === */
.button, button.button, a.button, header a {
  background: var(--bg-surface) !important;
  color: var(--text-primary) !important;
  border: 1px solid var(--border) !important;
  border-radius: 10px !important;
  padding: 8px 16px !important;
  font-weight: 500 !important;
  transition: all 0.2s !important;
  text-decoration: none !important;
}
.button:hover, header a:hover {
  background: var(--accent) !important;
  border-color: var(--accent) !important;
  transform: translateY(-1px) !important;
}

/* === Карточки эндпоинтов (новый grid UI v5.35) === */
.endpoint, .endpoint-status, .group-card, [class*="endpoint"] > div {
  background: var(--bg-card) !important;
  border: 1px solid var(--border) !important;
  border-radius: 12px !important;
  transition: border-color 0.2s !important;
}
.endpoint:hover, [class*="endpoint"] > div:hover {
  border-color: var(--accent) !important;
}

/* === Бары статуса === */
.endpoint-status .hourly-status, .status-bar > div,
[class*="status-bar"] > div, .h-8, .square {
  border-radius: 3px !important;
  transition: transform 0.15s !important;
}
[class*="status-bar"] > div:hover {
  transform: scaleY(1.15);
}
.bg-success, .success { background-color: var(--success) !important; }
.bg-warning, .warning { background-color: var(--warning) !important; }
.bg-danger, .bg-error, .danger { background-color: var(--danger) !important; }

/* === Бейджи статуса (Healthy/Unhealthy) === */
.badge, [class*="badge"], .status-badge {
  border-radius: 8px !important;
  font-weight: 600 !important;
}

/* === Ссылки === */
a, a:visited { color: #A78BFA !important; }
a:hover { color: #C4B5FD !important; }

/* === Таймстампы === */
.timestamp, .text-muted, .text-gray, time, [class*="text-muted"] {
  color: var(--text-muted) !important;
}

/* === Скрыть переключатель темы (нижний-левый угол).
   У нас фиксированная dark-тема под бренд кабинета. === */
.theme-toggle, button[aria-label*="theme" i],
button[title*="theme" i], [class*="theme-toggle"],
[class*="theme-switcher"], button[aria-label*="dark" i],
button[aria-label*="light" i],
.fixed.bottom-0 button:nth-child(2),
.fixed.bottom-4.left-4 > div > button:last-child {
  display: none !important;
}

/* === Скрыть "Powered by" === */
.powered-by, footer .powered-by { display: none !important; }

/* === Замена hardcoded EN заголовков на русский ===
   Gatus захардкодил "Health Dashboard" / "Monitor the health..." в JS,
   не настраивается через config. Делаем font-size:0 на оригинале
   (схлопывает текст в 0 высоту) и рендерим свой через ::before. */

/* Главный h1 — НЕ header (там лого), а основной заголовок страницы. */
main h1:not(header h1),
[class*="dashboard"] h1,
.core-container > h1,
.core-container > div > h1 {
  font-size: 0 !important;
  line-height: 0 !important;
  color: transparent !important;
}
main h1:not(header h1)::before,
[class*="dashboard"] h1::before,
.core-container > h1::before,
.core-container > div > h1::before {
  content: "Мониторинг стабильности сервисов";
  display: block;
  font-size: 36px !important;
  line-height: 1.2 !important;
  color: var(--text-primary) !important;
  font-weight: 700 !important;
  letter-spacing: -0.02em !important;
  margin-bottom: 8px;
}

/* Подзаголовок "Monitor the health..." */
main h1:not(header h1) + p,
[class*="dashboard"] h1 + p,
.core-container > h1 + p,
.core-container > div > h1 + p {
  font-size: 0 !important;
  line-height: 0 !important;
  color: transparent !important;
}
main h1:not(header h1) + p::before,
[class*="dashboard"] h1 + p::before,
.core-container > h1 + p::before,
.core-container > div > h1 + p::before {
  content: "Доступность подключений и сервисов в реальном времени";
  display: block;
  font-size: 16px !important;
  line-height: 1.5 !important;
  color: var(--text-muted) !important;
}

/* === Группы по умолчанию РАСКРЫТЫ ===
   Gatus DOM: <div class="endpoint-group ..."> содержит .endpoint-group-header
   (всегда видно) и .endpoint-group-content (скрывается через v-show при
   collapsed). Принудительно показываем контент игнорируя v-show.
   Также скрываем кнопку-стрелку чтобы не дать юзеру свернуть зря. */
.endpoint-group-content,
.endpoint-group .endpoint-group-content,
[class*="endpoint-group"] [class*="content"] {
  display: block !important;
  max-height: none !important;
  height: auto !important;
  overflow: visible !important;
  visibility: visible !important;
  opacity: 1 !important;
}
/* Скрываем collapse-кнопку (стрелочка ▼) в header'е группы */
.endpoint-group-header button,
.endpoint-group-header [role="button"],
.endpoint-group-header svg[class*="arrow"],
.endpoint-group-header svg[class*="chevron"] {
  display: none !important;
}
.endpoint-group-header { cursor: default !important; }