/* ETH AI Club panel style for Homepage — mirrors www.ethaiclub.org:
   pure black, hairline square panels, Archivo Black uppercase headings,
   JetBrains Mono labels, one violet accent. Sized up on purpose: this page
   is for the whole team, so it should read at a glance. */
@import url("https://fonts.googleapis.com/css2?family=Archivo:wght@400;500;600&family=Archivo+Black&family=JetBrains+Mono:wght@500;700&display=swap");

:root {
  --club-bg: #000;
  --club-line: #2e2e2e;
  --club-dim: #d8d8d8;
  --club-mute: #b8b8b8;
  --club-violet: #a341e8;
  --club-up: #3ddc84;
  --club-down: #ff5c5c;
}

html,
body,
#page_wrapper,
#page_container {
  background: var(--club-bg) !important;
}
body {
  font-family: "Archivo", system-ui, sans-serif;
  color: #fff;
}
::selection {
  background: var(--club-violet);
  color: #000;
}

/* Header: logo + title in the display face. */
.information-widget-greeting span {
  font-family: "Archivo Black", "Archivo", sans-serif;
  text-transform: uppercase;
  letter-spacing: -0.01em;
  font-size: 2.25rem !important;
  color: #fff !important;
}

/* Section titles, with a violet index bar like the site's panel labels. */
.service-group-name {
  font-family: "Archivo Black", "Archivo", sans-serif !important;
  text-transform: uppercase;
  font-size: 1.6rem !important;
  color: #fff !important;
  border-left: 6px solid var(--club-violet);
  padding-left: 0.6rem;
  margin: 1.25rem 0 0.75rem;
}

/* Cards: square, hairline, no shadow/blur; violet border on hover. */
.service-card {
  border-radius: 0 !important;
  border: 1px solid var(--club-line);
  background: #000 !important;
  box-shadow: none !important;
  padding: 0.9rem 0.75rem !important;
  transition: border-color 150ms ease;
}
.service-card:hover {
  border-color: var(--club-violet);
  background: #070707 !important;
}
.service-title-text {
  border-radius: 0 !important;
}

/* Big, plain text. */
.service-name {
  font-size: 1.3rem !important;
  font-weight: 600;
  color: #fff !important;
  line-height: 1.3;
}
.service-description {
  font-size: 1.05rem !important;
  font-weight: 400 !important;
  color: var(--club-mute) !important;
  margin-top: 0.25rem;
}

/* Icons in the accent colour instead of the theme gradient. */
.service-icon > div {
  background: var(--club-violet) !important;
  width: 36px !important;
  height: 36px !important;
}

/* Every clickable card gets an explicit button, so it's obvious where to
   click and what happens. Default "Log in"; the public site just opens. */
a.service-title-text::after {
  content: "LOG IN \2192";
  align-self: flex-end;
  flex-shrink: 0;
  font-family: "JetBrains Mono", monospace;
  font-weight: 700;
  font-size: 0.95rem;
  letter-spacing: 0.08em;
  color: #000;
  background: var(--club-violet);
  padding: 0.45rem 0.8rem;
  margin: 0 0.25rem 0.25rem 0.5rem;
}
a.service-title-text[href^="https://www.ethaiclub.org"]::after {
  content: "OPEN \2192";
}

/* Status: its own row at the top of the card, in words — "● ONLINE" /
   "● OFFLINE" — instead of Homepage's tiny corner badge. */
.service-title {
  flex-wrap: wrap;
}
.service-tags {
  position: static !important;
  order: -1;
  width: 100%;
  justify-content: flex-start !important;
  margin: 0 0 0.75rem 0.25rem !important;
}
.service-tags:empty {
  display: none;
}
.site-monitor-status {
  border-radius: 0 !important;
  background: transparent !important;
  padding: 0 !important;
}
.site-monitor-status > div {
  font-size: 0 !important; /* hide Homepage's "Up"/"Down"; ::before says it */
}
.site-monitor-status > div::before,
li.service[data-name="AI Agent"] .service-title::before {
  display: inline-block;
  font-family: "JetBrains Mono", monospace;
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  padding: 0.3rem 0.65rem;
  border: 2px solid currentColor;
}
.site-monitor-status > div::before {
  content: "\25CF  OFFLINE";
  color: var(--club-down);
  background: rgba(255, 92, 92, 0.12);
}
.site-monitor-status > div[class*="emerald"]::before {
  content: "\25CF  ONLINE";
  color: var(--club-up);
  background: transparent;
}
/* The agent has no monitor yet; say so in the same slot. */
li.service[data-name="AI Agent"] .service-title::before {
  content: "\25CC  COMING SOON";
  color: var(--club-mute);
  order: -1;
  margin: 0 0 0.75rem 0.25rem;
}
li.service[data-name="AI Agent"] .service-title::after {
  content: "";
  order: -1;
  flex-basis: 100%;
}

/* Server health graphs: taller, violet, readable numbers. */
.service-container.chart {
  height: 120px !important;
}
.recharts-area-area {
  fill: var(--club-violet) !important;
  fill-opacity: 0.35 !important;
}
.recharts-area-curve {
  stroke: var(--club-violet) !important;
  stroke-width: 2px !important;
}
.service-container {
  font-size: 1.05rem !important;
  color: var(--club-dim) !important;
}
.service-container div,
.service-container span {
  font-size: inherit;
}

/* Footer noise off. */
#footer,
#revalidate,
#color,
#theme {
  display: none !important;
}

@media (max-width: 640px) {
  .information-widget-greeting span {
    font-size: 1.5rem !important;
  }
}