/* Nexus Design Contract (DESIGN.md) */
html,
body,
#app,
#app > div,
#app .min-h-screen {
  min-height: 100vh;
}

body {
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Light mode tokens (Nexus Light surface hierarchy) */
html:not(.dark) {
  --nexus-light-canvas: #f7f9fb;
  --nexus-light-surface: #ebf1fa;
  --nexus-light-surface-inner: #f2f7fc;
  --nexus-light-surface-hover: #dbe7f6;
  --nexus-light-border: rgba(0, 88, 186, 0.18);
  --nexus-light-border-hover: rgba(0, 88, 186, 0.32);
  --nexus-light-accent: #0058ba;
  --nexus-light-accent-bright: #0188de;
}

/* Light mode canvas & typography */
html:not(.dark),
html:not(.dark) body,
html:not(.dark) #app,
html:not(.dark) #app > div,
html:not(.dark) #app .min-h-screen,
html:not(.dark) main,
html:not(.dark) footer {
  background: var(--nexus-light-canvas);
  color: #0f172a;
}

/* Dark mode canvas & typography (DESIGN.md: Canvas near-black #07090D) */
html.dark,
html.dark body,
html.dark #app,
html.dark #app > div,
html.dark #app .min-h-screen,
html.dark main,
html.dark footer {
  background: #07090d;
  color: #f5f7fa;
}

/* Header styling - flat surface with subtle hairline */
html:not(.dark) header {
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(0, 88, 186, 0.14);
  box-shadow: none;
}

html.dark header {
  background: rgba(7, 9, 13, 0.9);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(138, 180, 255, 0.14);
  box-shadow: none;
}

/* Brand logo box - unconstrained horizontal aspect ratio */
header a > div:first-child,
header .w-12.h-12 {
  width: auto !important;
  height: 32px !important;
  max-width: 180px !important;
  display: flex;
  align-items: center;
  justify-content: flex-start;
}

header img[alt="logo"],
header img[alt="Gatus"],
header img {
  border-radius: 0;
  height: 32px !important;
  width: auto !important;
  max-width: 100% !important;
  object-fit: contain !important;
}

/* Hide redundant Nexus text next to wordmark */
header a > div > h1,
header h1.text-2xl {
  display: none !important;
}

/* Subtitle "System monitoring dashboard" */
header a > div > p.text-muted-foreground {
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: -0.01em;
  text-transform: lowercase;
  margin: 0;
}

header a > div > p.text-muted-foreground::first-letter {
  text-transform: uppercase;
}

/* Headings hierarchy */
h1 {
  font-weight: 600;
  letter-spacing: -0.02em;
}

h2, h3 {
  font-weight: 600;
  letter-spacing: -0.01em;
}

html:not(.dark) h1,
html:not(.dark) h2,
html:not(.dark) h3 {
  color: #0f172a;
}

html.dark h1,
html.dark h2,
html.dark h3 {
  color: #f5f7fa;
}

html:not(.dark) .text-muted-foreground {
  color: #64748b;
}

html.dark .text-muted-foreground {
  color: #68707c;
}

/* Dashboard heading & subheading */
.dashboard-container h1 {
  font-size: 1.75rem;
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1.25;
}

.dashboard-container h1 + p,
.dashboard-container .text-muted-foreground.mt-2 {
  display: none !important;
}

/* Utility navigation buttons (Bot, Docs, News) */
header nav a,
header .md\:hidden a {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  border-radius: 6px;
  font-size: 0.875rem;
  font-weight: 500;
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

html:not(.dark) header nav a,
html:not(.dark) header .md\:hidden a {
  color: #475569;
  border: 1px solid transparent;
}

html:not(.dark) header nav a:hover,
html:not(.dark) header .md\:hidden a:hover {
  color: #003a9e;
  background: rgba(0, 88, 186, 0.07);
  border-color: rgba(0, 88, 186, 0.14);
}

html.dark header nav a,
html.dark header .md\:hidden a {
  color: #a7afbb;
  border: 1px solid transparent;
}

html.dark header nav a:hover,
html.dark header .md\:hidden a:hover {
  color: #f5f7fa;
  background: rgba(138, 180, 255, 0.08);
  border-color: rgba(138, 180, 255, 0.14);
}

/* Neutral line UI icons for navigation actions */
header nav a::before,
header .md\:hidden a::before {
  content: '';
  display: inline-block;
  width: 1rem;
  height: 1rem;
  background-color: currentColor;
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  flex-shrink: 0;
}

header nav a[href*="nexus_hubbot"]::before,
header nav a[href*="bot"]::before,
header .md\:hidden a[href*="nexus_hubbot"]::before,
header .md\:hidden a[href*="bot"]::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 8V4H8'/%3E%3Crect width='16' height='12' x='4' y='8' rx='2'/%3E%3Cpath d='M2 14h2'/%3E%3Cpath d='M20 14h2'/%3E%3Cpath d='M15 13v2'/%3E%3Cpath d='M9 13v2'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 8V4H8'/%3E%3Crect width='16' height='12' x='4' y='8' rx='2'/%3E%3Cpath d='M2 14h2'/%3E%3Cpath d='M20 14h2'/%3E%3Cpath d='M15 13v2'/%3E%3Cpath d='M9 13v2'/%3E%3C/svg%3E");
}

header nav a[href*="docs."]::before,
header nav a[href*="docs"]::before,
header .md\:hidden a[href*="docs."]::before,
header .md\:hidden a[href*="docs"]::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 19.5v-15A2.5 2.5 0 0 1 6.5 2H20v20H6.5a2.5 2.5 0 0 1-2.5-2.5Z'/%3E%3Cpath d='M6 6h10'/%3E%3Cpath d='M6 10h10'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 19.5v-15A2.5 2.5 0 0 1 6.5 2H20v20H6.5a2.5 2.5 0 0 1-2.5-2.5Z'/%3E%3Cpath d='M6 6h10'/%3E%3Cpath d='M6 10h10'/%3E%3C/svg%3E");
}

header nav a[href*="nexushub_news"]::before,
header nav a[href*="news"]::before,
header .md\:hidden a[href*="nexushub_news"]::before,
header .md\:hidden a[href*="news"]::before {
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 22h16a2 2 0 0 0 2-2V4a2 2 0 0 0-2-2H8a2 2 0 0 0-2 2v16a2 2 0 0 1-2 2Zm0 0a2 2 0 0 1-2-2v-9c0-1.1.9-2 2-2h2'/%3E%3Cpath d='M18 14h-8'/%3E%3Cpath d='M15 18h-5'/%3E%3Cpath d='M10 6h8v4h-8V6Z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 22h16a2 2 0 0 0 2-2V4a2 2 0 0 0-2-2H8a2 2 0 0 0-2 2v16a2 2 0 0 1-2 2Zm0 0a2 2 0 0 1-2-2v-9c0-1.1.9-2 2-2h2'/%3E%3Cpath d='M18 14h-8'/%3E%3Cpath d='M15 18h-5'/%3E%3Cpath d='M10 6h8v4h-8V6Z'/%3E%3C/svg%3E");
}

/* ==========================================================================
   Announcements Design (Active & Past)
   ========================================================================== */

/* Active announcements card container */
div:has(> .announcement-header),
.announcement-container {
  border-left-width: 1px !important;
  border-radius: 8px !important;
  box-shadow: none !important;
}

html:not(.dark) div:has(> .announcement-header),
html:not(.dark) .announcement-container {
  background: var(--nexus-light-surface) !important;
  border: 1px solid var(--nexus-light-border) !important;
}

html.dark div:has(> .announcement-header),
html.dark .announcement-container {
  background: #0b132b !important;
  border: 1px solid rgba(138, 180, 255, 0.14) !important;
}

/* Announcement header bar */
.announcement-header {
  border-bottom: 1px solid rgba(138, 180, 255, 0.14) !important;
  transition: background-color 0.15s ease;
}

html:not(.dark) .announcement-header {
  border-bottom: 1px solid var(--nexus-light-border) !important;
}

html:not(.dark) .announcement-header:hover {
  background: var(--nexus-light-surface-hover) !important;
}

html.dark .announcement-header:hover {
  background: rgba(138, 180, 255, 0.05) !important;
}

/* Remove circular timeline node from left gutter */
.announcement-content div.relative > div.absolute.rounded-full {
  display: none !important;
}

/* Remove vertical connecting line */
.announcement-content div.relative > div.absolute.pointer-events-none {
  display: none !important;
}

/* Reset timeline gutter margin */
.announcement-content .ml-7,
.announcement-content [class*="ml-7"] {
  margin-left: 0 !important;
  border-left: none !important;
}

/* Announcement inner item cards */
.announcement-content .rounded-md.border {
  border-radius: 6px !important;
  box-shadow: none !important;
}

html:not(.dark) .announcement-content .rounded-md.border {
  background: var(--nexus-light-surface-inner) !important;
  border: 1px solid var(--nexus-light-border) !important;
}

html.dark .announcement-content .rounded-md.border {
  background: #07111f !important;
  border: 1px solid rgba(138, 180, 255, 0.14) !important;
}

/* Past announcements rows */
.space-y-6 div > .border-l-4,
div[class*="border-l-4"] {
  border-left-width: 1px !important;
  border-radius: 6px !important;
  box-shadow: none !important;
}

html:not(.dark) .space-y-6 div > .border-l-4 {
  background: var(--nexus-light-surface) !important;
  border: 1px solid var(--nexus-light-border) !important;
}

html.dark .space-y-6 div > .border-l-4 {
  background: #0b132b !important;
  border: 1px solid rgba(138, 180, 255, 0.14) !important;
}

/* Endpoint cards - lightweight, restrained elevation, hairline borders */
.endpoint,
[class*="endpoint"],
.suite {
  border-radius: 8px;
  box-shadow: none;
  transform: none !important;
  transition: background-color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}

html:not(.dark) .endpoint,
html:not(.dark) [class*="endpoint"],
html:not(.dark) .suite {
  background: var(--nexus-light-surface);
  border: 1px solid var(--nexus-light-border);
}

html:not(.dark) .endpoint:hover,
html:not(.dark) [class*="endpoint"]:hover,
html:not(.dark) .suite:hover {
  background: var(--nexus-light-surface-hover);
  border-color: var(--nexus-light-border-hover);
  box-shadow: none;
}

html.dark .endpoint,
html.dark [class*="endpoint"],
html.dark .suite {
  background: #0b132b;
  border: 1px solid rgba(138, 180, 255, 0.14);
}

html.dark .endpoint:hover,
html.dark [class*="endpoint"]:hover,
html.dark .suite:hover {
  background: #0b1728;
  border-color: rgba(138, 180, 255, 0.28);
}

/* Endpoint headers and text hierarchy */
.endpoint-header {
  font-weight: 500;
}

/* Search bar and filter controls */
html:not(.dark) input[type="text"],
html:not(.dark) select,
html:not(.dark) [role="combobox"] {
  background: #ffffff;
  border: 1px solid var(--nexus-light-border);
  color: #0f172a;
  border-radius: 6px;
}

html.dark input[type="text"],
html.dark select,
html.dark [role="combobox"] {
  background: #0b132b;
  border: 1px solid rgba(138, 180, 255, 0.14);
  color: #f5f7fa;
  border-radius: 6px;
}

/* Floating settings pill (theme switch & refresh interval) */
#settings {
  transition: transform 0.2s ease;
}

html:not(.dark) #settings > div {
  background: rgba(235, 241, 250, 0.94);
  backdrop-filter: blur(8px);
  border: 1px solid var(--nexus-light-border);
  box-shadow: 0 4px 16px rgba(15, 23, 42, 0.08);
  border-radius: 9999px;
}

html:not(.dark) #settings button {
  color: #475569;
}

html:not(.dark) #settings button:hover {
  color: #0f172a;
  background: rgba(0, 88, 186, 0.08);
}

html.dark #settings > div {
  background: rgba(11, 23, 40, 0.9);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(138, 180, 255, 0.18);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
  border-radius: 9999px;
}

html.dark #settings button {
  color: #a7afbb;
}

html.dark #settings button:hover {
  color: #f5f7fa;
  background: rgba(138, 180, 255, 0.1);
}

/* Accessible focus rings across interactive elements */
html:not(.dark) :is(a, button, input, select, textarea, [role="link"], [role="button"], [tabindex="0"]):focus-visible {
  outline: 2px solid var(--nexus-light-accent);
  outline-offset: 2px;
}

html.dark :is(a, button, input, select, textarea, [role="link"], [role="button"], [tabindex="0"]):focus-visible {
  outline: 2px solid #8ab4ff;
  outline-offset: 2px;
}