:root {
  --background: 218 45% 98%;
  --foreground: 226 64% 18%;
  --card: 0 0% 100%;
  --card-foreground: 226 64% 18%;
  --popover: 0 0% 100%;
  --popover-foreground: 226 64% 18%;
  --primary: 226 64% 18%;
  --primary-foreground: 0 0% 100%;
  --secondary: 216 35% 95%;
  --secondary-foreground: 226 64% 18%;
  --muted: 216 28% 95%;
  --muted-foreground: 218 34% 42%;
  --accent: 216 35% 94%;
  --accent-foreground: 226 64% 18%;
  --border: 216 30% 87%;
  --input: 216 30% 87%;
  --ring: 158 72% 36%;
  --radius: 0.75rem;
}

:root.dark {
  --background: 225 52% 7%;
  --foreground: 216 33% 97%;
  --card: 224 45% 10%;
  --card-foreground: 216 33% 97%;
  --popover: 224 45% 10%;
  --popover-foreground: 216 33% 97%;
  --primary: 158 68% 48%;
  --primary-foreground: 225 52% 7%;
  --secondary: 222 33% 16%;
  --secondary-foreground: 216 33% 97%;
  --muted: 222 33% 16%;
  --muted-foreground: 216 18% 68%;
  --accent: 222 33% 16%;
  --accent-foreground: 216 33% 97%;
  --border: 221 30% 21%;
  --input: 221 30% 21%;
  --ring: 158 68% 48%;
}

html {
  color-scheme: light;
  scroll-behavior: smooth;
}

html.dark {
  color-scheme: dark;
}

body {
  background:
    radial-gradient(circle at 50% 0, hsl(214 62% 96%) 0, transparent 38rem),
    hsl(var(--background));
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.dark body {
  background:
    radial-gradient(circle at 50% 0, hsl(222 42% 14%) 0, transparent 38rem),
    hsl(var(--background));
}

header {
  background: hsl(var(--card) / 0.92) !important;
  box-shadow: 0 1px 0 hsl(var(--border) / 0.75);
}

header .container {
  padding-top: 0.875rem;
  padding-bottom: 0.875rem;
}

header .w-12.h-12 {
  display: none;
}

header h1 {
  display: inline-block;
  color: hsl(226 64% 18%);
  font-size: 1.5rem;
  letter-spacing: -0.025em;
  line-height: 2rem;
}

header .flex.items-center.gap-3 > div:last-child {
  display: flex;
  align-items: center;
}

.dark header h1 {
  color: hsl(var(--foreground));
}

header h1 + p {
  display: inline-flex;
  align-items: center;
  margin-left: 1rem;
  color: hsl(var(--foreground));
  font-size: 0 !important;
  line-height: 2rem;
}

header h1 + p::before {
  width: 1px;
  height: 1.75rem;
  margin-right: 1rem;
  background: hsl(var(--border));
  content: "";
}

header h1 + p::after {
  content: "System Status";
  font-size: 1rem !important;
  font-weight: 500;
}

header nav {
  margin-right: 3.25rem;
}

header nav a {
  border: 1px solid hsl(var(--border));
  background: hsl(var(--card));
  padding: 0.625rem 0.875rem !important;
  margin-left: 0.375rem;
  box-shadow: 0 1px 2px hsl(226 64% 18% / 0.04);
}

header nav a::after {
  content: " ↗";
  color: hsl(218 34% 42%);
}

#settings {
  top: 0.875rem !important;
  right: max(1rem, calc((100vw - 80rem) / 2 + 1rem)) !important;
  bottom: auto !important;
  left: auto !important;
}

#settings > div {
  padding: 3px !important;
  border-color: hsl(var(--border));
  background: hsl(var(--card) / 0.96) !important;
  box-shadow: 0 1px 3px hsl(226 64% 18% / 0.08);
}

#settings > div > button:first-child,
#settings > div > .h-5.w-px {
  display: none;
}

#settings > div > button:last-child {
  padding: 0.5rem;
}

#settings > div > button:last-child > svg {
  width: 1.125rem;
  height: 1.125rem;
}

#settings > div > button:last-child > div {
  top: calc(100% + 0.5rem);
  bottom: auto;
}

.dashboard-container > .container {
  padding-top: 3rem;
  padding-bottom: 3.5rem;
}

.dashboard-container > .container > .mb-6 > .flex:first-child {
  align-items: center;
  justify-content: center;
  text-align: center;
}

.dashboard-container > .container > .mb-6 > .flex:first-child > div:first-child {
  flex: initial;
  padding-left: 0;
}

.dashboard-container > .container > .mb-6 > .flex:first-child > div:last-child {
  display: none;
}

.dashboard-container h1.text-4xl {
  color: hsl(226 64% 18%);
  font-size: clamp(2rem, 5vw, 3rem);
  letter-spacing: -0.04em;
}

.dark .dashboard-container h1.text-4xl {
  color: hsl(var(--foreground));
}

.dashboard-container h1.text-4xl + p {
  font-size: 1rem;
}

.dashboard-container > .container > .mb-6 > .flex.flex-col {
  border-color: hsl(var(--border));
  background: hsl(var(--card) / 0.9);
  box-shadow: 0 1px 3px hsl(226 64% 18% / 0.04);
}

#search-input {
  background: hsl(var(--background));
}

.endpoint-group + .endpoint-group {
  padding-top: 0.25rem;
}

.endpoint-group {
  overflow: visible !important;
  border: 0 !important;
  border-radius: 0 !important;
}

.endpoint-group-header {
  padding: 0.875rem 0.375rem !important;
  border: 0 !important;
  background: transparent !important;
}

.endpoint-group-header:hover {
  background: hsl(var(--accent) / 0.65) !important;
  border-radius: var(--radius);
}

.endpoint-group-content {
  padding: 0.375rem 0 0.5rem !important;
}

.endpoint-group-content .grid {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 1rem !important;
}

.endpoint {
  border-color: hsl(var(--border));
  border-radius: 0.75rem !important;
  background: hsl(var(--card));
  box-shadow: 0 1px 3px hsl(226 64% 18% / 0.05);
}

.endpoint:hover {
  border-color: hsl(161 45% 66%);
  box-shadow: 0 10px 26px hsl(226 64% 18% / 0.09);
}

.endpoint-header {
  padding-bottom: 0.5rem !important;
}

.endpoint-group .endpoint-header .text-muted-foreground span:first-child,
.endpoint-group .endpoint-header .text-muted-foreground span:nth-child(2) {
  display: none;
}

.endpoint-header .bg-green-500 {
  font-size: 0;
}

.endpoint-header .bg-green-500::after {
  content: "Operational";
  font-size: 0.75rem;
}

.endpoint-content .space-y-2 > div {
  display: grid;
  grid-template-areas:
    "metric history"
    "times times";
  grid-template-columns: 7.5rem minmax(0, 1fr);
  column-gap: 1rem;
  align-items: end;
}

.endpoint-content .space-y-2 > div > .mb-1 {
  display: block;
  grid-area: metric;
  margin-bottom: 0;
}

.endpoint-content .space-y-2 > div > .mb-1 > div {
  display: none;
}

.endpoint-content .space-y-2 > div > .mb-1 > p {
  color: hsl(153 79% 32%);
  font-size: 0.875rem;
  font-weight: 600;
  line-height: 1.15rem;
}

.endpoint-content .space-y-2 > div > .mb-1 > p::after {
  display: block;
  color: hsl(var(--muted-foreground));
  content: "avg response time";
  font-size: 0.7rem;
  font-weight: 400;
  white-space: nowrap;
}

.endpoint-content .space-y-2 > div > .flex.gap-0\.5 {
  grid-area: history;
}

.endpoint-content .space-y-2 > div > .text-xs.text-muted-foreground {
  grid-area: times;
  margin-top: 0.625rem;
}

footer {
  background: hsl(var(--card) / 0.7);
}

@media (max-width: 767px) {
  header h1 + p {
    display: block;
    margin-left: 0;
    line-height: normal;
    vertical-align: initial;
  }

  header .flex.items-center.gap-3 > div:last-child {
    display: block;
  }

  header h1 + p::before {
    display: none;
  }

  header h1 + p::after {
    font-size: 0.875rem !important;
  }

  #settings {
    top: auto !important;
    right: auto !important;
    bottom: 1rem !important;
    left: 1rem !important;
  }

  #settings > div > button:first-child,
  #settings > div > .h-5.w-px {
    display: flex;
  }

  #settings > div {
    padding: 0.25rem !important;
  }

  #settings > div > button:last-child {
    padding: 0.625rem;
  }

  #settings > div > button:last-child > div {
    top: auto;
    bottom: 100%;
  }

  .dashboard-container > .container {
    padding-top: 2rem;
  }

  .dashboard-container > .container > .mb-6 > .flex:first-child {
    text-align: left;
  }

  .dashboard-container > .container > .mb-6 > .flex:first-child > div:first-child {
    padding-left: 0;
  }

  .endpoint-group-content .grid {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  .endpoint-content .space-y-2 > div {
    grid-template-areas:
      "metric"
      "history"
      "times";
    grid-template-columns: minmax(0, 1fr);
    row-gap: 0.5rem;
  }
}