/* Reguverse Status -- OpenAI-inspired light theme
 * Fonts align with docmcp Office UI (Fluent / Segoe) + CJK fallbacks.
 */

:root {
  --rv-bg: #f7f7f8;
  --rv-surface: #ffffff;
  --rv-border: #e5e5e5;
  --rv-ink: #0d0d0d;
  --rv-ink-muted: #6e6e80;
  --rv-ink-soft: #8e8ea0;
  --rv-ok-bg: #eaf3de;
  --rv-ok-border: #c3ddaa;
  --rv-ok: #3d7a1c;
  --rv-ok-bar: #10a37f;
  --rv-warn-bar: #eab308;
  --rv-fail-bar: #ef4444;
  --rv-radius: 12px;
  --rv-font: "Segoe UI", "Segoe UI Web (West European)", -apple-system, BlinkMacSystemFont,
    Roboto, "Helvetica Neue", Arial, "PingFang SC", "Hiragino Sans GB",
    "Microsoft YaHei UI", "Microsoft YaHei", "Noto Sans SC", sans-serif;
}

html,
html.dark {
  color-scheme: light !important;
}

html,
html.dark,
body,
body.dark\:bg-gray-900,
#app,
#global {
  background: var(--rv-bg) !important;
  color: var(--rv-ink) !important;
  font-family: var(--rv-font) !important;
}

*,
*::before,
*::after {
  font-family: inherit !important;
}

/* Hide Gatus chrome that fights the product look */
#social,
a[href*="github.com/TwiN/gatus"],
button[aria-label*="theme" i],
button[title*="theme" i],
.theme-toggle {
  display: none !important;
}

/* Hide hostname / URL leakage next to service names (belt + suspenders) */
#app span.rv-hide-host,
#rv-shell span.rv-hide-host {
  display: none !important;
}

/* Page shell */
#global,
.dashboard-container {
  max-width: 920px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding: 28px 20px 64px !important;
  background: transparent !important;
  box-shadow: none !important;
  border: none !important;
}

/* Brand header */
#global > header,
.dashboard-container > header,
header {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  margin-bottom: 28px !important;
  padding: 0 !important;
  border: none !important;
  background: transparent !important;
}

/* Assistant brand mark (ars-logo.png) */
header img,
#global img[src*="ars-logo"],
#app img[src*="ars-logo"],
.logo,
a[href] > img {
  display: inline-block !important;
  height: 36px !important;
  width: auto !important;
  max-width: 48px !important;
  object-fit: contain !important;
  margin-right: 10px !important;
  vertical-align: middle !important;
}

/* Hide default Gatus gear if both appear */
header img[src*="gatus"],
img[src*="apple-touch-icon"],
img[src*="favicon"] {
  display: none !important;
}

header h1,
#global h1,
.header-title {
  display: inline-flex !important;
  align-items: center !important;
  font-size: 22px !important;
  font-weight: 700 !important;
  letter-spacing: -0.02em !important;
  color: var(--rv-ink) !important;
  margin: 0 !important;
}

/* Top links -> pill buttons like OpenAI subscribe */
header a,
.header-buttons a,
#global a.button,
#global .buttons a {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 8px 14px !important;
  border-radius: 999px !important;
  background: #2f2f2f !important;
  color: #fff !important;
  text-decoration: none !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  border: none !important;
  margin-left: 8px !important;
}

header a:hover,
.header-buttons a:hover {
  background: #000 !important;
}

/* Page shell wrapping injected banner + Gatus app */
#rv-shell {
  max-width: 920px;
  margin: 0 auto;
  padding: 28px 20px 64px;
}

#rv-status-banner {
  background: var(--rv-ok-bg);
  border: 1px solid var(--rv-ok-border);
  border-radius: var(--rv-radius);
  padding: 18px 20px;
  margin: 8px 0 20px;
  color: var(--rv-ink);
}

#rv-status-banner .rv-banner-title {
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.01em;
  margin: 0 0 4px;
}

#rv-status-banner .rv-banner-sub {
  font-size: 14px;
  font-weight: 400;
  color: var(--rv-ink-muted);
  margin: 0;
}

/* When banner is injected, tighten Gatus inner padding */
#rv-shell #global,
#rv-shell .dashboard-container {
  max-width: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* Main system status card */
.endpoint-group,
.endpoint,
.dashboard-container .rounded,
.dashboard-container .border {
  background: var(--rv-surface) !important;
  border: 1px solid var(--rv-border) !important;
  border-radius: var(--rv-radius) !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04) !important;
  color: var(--rv-ink) !important;
}

.endpoint-group {
  padding: 8px 4px !important;
  margin-bottom: 16px !important;
  overflow: hidden !important;
}

.endpoint-group-header,
.endpoint-header {
  background: transparent !important;
  border: none !important;
  color: var(--rv-ink) !important;
  padding: 14px 18px !important;
  font-size: 15px !important;
  font-weight: 600 !important;
}

.endpoint-group-content,
.endpoint-content {
  background: transparent !important;
  border-top: 1px solid var(--rv-border) !important;
  color: var(--rv-ink) !important;
  padding: 12px 18px 16px !important;
}

.endpoint {
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  border-bottom: 1px solid var(--rv-border) !important;
  margin: 0 !important;
  padding: 16px 18px !important;
}

.endpoint:last-child {
  border-bottom: none !important;
}

/* Kill monospace / terminal look */
.font-mono,
code,
pre,
.endpoint-group-header,
.endpoint-header,
.endpoint-name,
.endpoint-group-name {
  font-family: var(--rv-font) !important;
  letter-spacing: normal !important;
}

/* Muted secondary text (hostnames, timestamps, uptime) */
.text-gray-400,
.text-gray-500,
.text-gray-600,
.dark\:text-gray-400,
.dark\:text-gray-500,
.endpoint .text-xs,
.endpoint-group .text-xs {
  color: var(--rv-ink-muted) !important;
}

.text-white,
.dark\:text-white,
.text-gray-100,
.text-gray-200 {
  color: var(--rv-ink) !important;
}

/* Borders in dark mode classes */
.border-gray-700,
.dark\:border-gray-700,
.border-gray-800,
.divide-gray-700 > :not([hidden]) ~ :not([hidden]) {
  border-color: var(--rv-border) !important;
}

.bg-gray-800,
.bg-gray-900,
.dark\:bg-gray-800,
.dark\:bg-gray-900,
.bg-gray-700 {
  background-color: var(--rv-surface) !important;
}

/* Uptime bars: solid teal segments, no icon clutter feel */
.endpoint svg,
.endpoint-group-header svg {
  color: var(--rv-ok) !important;
}

/* Result / health squares -> softer pills */
.endpoint [class*="bg-green"],
.endpoint-group [class*="bg-green"],
[class*="bg-emerald"] {
  background-color: var(--rv-ok-bar) !important;
  border-radius: 3px !important;
}

[class*="bg-red"],
[class*="bg-rose"] {
  background-color: var(--rv-fail-bar) !important;
  border-radius: 3px !important;
}

[class*="bg-yellow"],
[class*="bg-amber"],
[class*="bg-orange"] {
  background-color: var(--rv-warn-bar) !important;
  border-radius: 3px !important;
}

/* Empty / unknown slots */
[class*="border-dashed"],
[class*="bg-transparent"] {
  border-color: #d4d4d8 !important;
  background: #f4f4f5 !important;
  border-radius: 3px !important;
}

/* Footer controls */
.dashboard-container button,
#global button {
  font-family: var(--rv-font) !important;
  border-radius: 8px !important;
  border-color: var(--rv-border) !important;
  background: var(--rv-surface) !important;
  color: var(--rv-ink) !important;
}

/* Tooltip */
#tooltip {
  background: var(--rv-surface) !important;
  border: 1px solid var(--rv-border) !important;
  border-radius: 8px !important;
  color: var(--rv-ink) !important;
  font-family: var(--rv-font) !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08) !important;
}

#tooltip code {
  color: var(--rv-ink) !important;
  font-family: var(--rv-font) !important;
}