/* bikeryOS status-page theme — aligns Gatus with styling.md (dark forest / glass / lime).
   Gatus v5 has no custom-css hook, so Caddy serves THIS file as /css/app.css and proxies
   Gatus's real compiled CSS to /css/_base.css (imported first below, so it stays current
   across Gatus upgrades). Our rules follow and override with !important. */
@import url("/css/_base.css");
@import url("https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@400;500;600&family=DM+Sans:wght@300;400;500;600&family=JetBrains+Mono:wght@400;500&display=swap");

:root {
  --forest-abyss: #061812;
  --herbal-lime: #8DC63F;
  --glass-bg: rgba(255, 255, 255, .04);
  --glass-bg-strong: rgba(255, 255, 255, .07);
  --glass-border: rgba(255, 255, 255, .09);
  --text: rgba(247, 249, 248, .97);
  --text-dim: rgba(247, 249, 248, .88);
  --text-faint: rgba(247, 249, 248, .74);
  --danger: #ff6b5e;
  --radius: 10px;
}

/* ── Base: forest abyss + aurora + light text (styling.md §3) ── */
html, body {
  background-color: var(--forest-abyss) !important;
  color: var(--text) !important;
  font-family: 'DM Sans', system-ui, sans-serif !important;
}
body { position: relative; min-height: 100vh; overflow-x: hidden; }
body::before {
  content: ''; position: fixed; inset: 0; z-index: -2; pointer-events: none;
  background:
    radial-gradient(ellipse 80% 50% at 50% 0%, rgba(141, 198, 63, .14), transparent 60%),
    radial-gradient(ellipse 60% 40% at 85% 30%, rgba(47, 107, 79, .3), transparent 60%),
    radial-gradient(ellipse 70% 60% at 10% 70%, rgba(31, 77, 58, .4), transparent 60%),
    linear-gradient(180deg, var(--forest-abyss) 0%, #081e16 50%, var(--forest-abyss) 100%);
}
#global, #results, .container { background: transparent !important; }

/* ── Title + headings ── */
#global h1, .text-4xl, .text-3xl, .xl\:text-5xl, .lg\:text-4xl {
  font-family: 'Cormorant Garamond', Georgia, serif !important;
  color: var(--text) !important; font-weight: 500 !important;
}

/* ── Text: Tailwind light AND dark grays → light ── */
.text-gray-800, .text-black,
.dark\:text-gray-100, .dark\:text-gray-200 { color: var(--text) !important; }
.text-gray-600, .text-gray-500, .dark\:text-gray-300 { color: var(--text-dim) !important; }
.text-gray-400, .status-time-ago { color: var(--text-faint) !important; }
.text-green-600 { color: var(--herbal-lime) !important; }

/* ── Backgrounds (light + dark gray fills) → glass ── */
.bg-gray-100, .bg-gray-200, .bg-white,
.dark\:bg-gray-900, .dark\:bg-gray-800, .dark\:bg-gray-700 {
  background-color: var(--glass-bg) !important;
}

/* ── Cards / panels → glass ── */
.endpoint-group-content {
  background: var(--glass-bg) !important;
  border: 1px solid var(--glass-border) !important;
  border-radius: var(--radius) !important;
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  overflow: hidden;
  box-shadow: 0 4px 16px rgba(0, 0, 0, .25) !important;
}
.endpoint { background: transparent !important; border-color: var(--glass-border) !important; }
.endpoint:hover,
.hover\:bg-gray-100:hover, .hover\:bg-gray-200:hover,
.dark\:hover\:bg-gray-700:hover, .dark\:hover\:bg-gray-600:hover {
  background: var(--glass-bg-strong) !important;
}

/* ── Group header row ── */
.endpoint-group h5 {
  color: var(--text-dim) !important;
  font-family: 'JetBrains Mono', ui-monospace, monospace !important;
  letter-spacing: .02em;
}
.endpoint-group h5:hover { color: var(--herbal-lime) !important; }

/* ── Borders (light + dark) → glass ── */
.border-gray-200, .border-gray-300, .border-gray-400,
.dark\:border-gray-500,
.divide-gray-200 > :not([hidden]) ~ :not([hidden]),
.dark\:divide-gray-600 > :not([hidden]) ~ :not([hidden]) { border-color: var(--glass-border) !important; }

/* ── Status squares: up → lime, down → danger ── */
.status.status-success, .bg-success, .bg-green-700, .bg-green-600 {
  background-color: var(--herbal-lime) !important;
}
.status.status-success { color: #06210f !important; }
.status.status-failure, .bg-red-600, .bg-danger { background-color: var(--danger) !important; }

/* ── Overall "healthy" badge → lime gradient ── */
.bg-gradient-to-r { color: #06210f !important; }
.from-green-600 { --tw-gradient-from: var(--herbal-lime) !important; }
.to-green-700 { --tw-gradient-to: #6ca62f !important; }
.hover\:from-green-700:hover { --tw-gradient-from: #7cb833 !important; }
.hover\:to-green-800:hover { --tw-gradient-to: #5c941f !important; }

/* ── Links, settings, shadows ── */
a { color: var(--herbal-lime) !important; }
#settings, #settings select {
  color: var(--text-dim) !important; background: transparent !important;
  border-color: var(--glass-border) !important;
}
.shadow, .shadow-lg, .xl\:shadow-xl { box-shadow: 0 4px 16px rgba(0, 0, 0, .25) !important; }