/* serverstatus.css — admin-only server status button + panel in the topbar.
 *
 * Deliberately built on the notification tray's shapes so the two read as
 * siblings: same panel chrome, same opaque background (see the note there
 * about backdrop-filter never actually blurring inside the topbar stack).
 */

.mn-srv {
  --mn-srv-green: #16a34a;
  --mn-srv-amber: #f0a726;
  --mn-srv-red: #d92d20;
  --mn-srv-width: 300px;
  position: relative;
  display: inline-flex;
}
/* The button is admin-only and serverstatus.js sets [hidden] on this wrapper.
   This rule is what actually hides it — the `display` above is an author
   declaration and beats the UA stylesheet's [hidden] rule on its own. */
.mn-srv[hidden] {
  display: none;
}
body[data-mode="dark"] .mn-srv {
  /* Lifted so they hold up against the dark bar. */
  --mn-srv-green: #34d17c;
  --mn-srv-amber: #ffb937;
  --mn-srv-red: #ff5a4d;
}

/* ---- Button + status dot ---- */
.mn-srv-toggle {
  position: relative;
}

/* Bottom-right corner, mirroring the unread bubble's top-right placement. */
.mn-srv-dot {
  position: absolute;
  right: 1px;
  bottom: 1px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--mn-srv-green);
  /* Ring in the bar's own background so the dot reads as separate from the
     server glyph rather than merging into it. */
  box-shadow: 0 0 0 2px var(--topbar-bg);
  pointer-events: none;
}
.mn-srv-dot[data-status="warn"] { background: var(--mn-srv-amber); }
.mn-srv-dot[data-status="bad"]  { background: var(--mn-srv-red); }

/* ---- Panel ---- */
.mn-srv-panel {
  position: absolute;
  right: 0;
  top: 100%;
  z-index: 20;
  width: min(var(--mn-srv-width), calc(100vw - 2rem));
  display: flex;
  flex-direction: column;
  max-height: calc(100vh - var(--topbar-h) - 1rem);
  margin-top: 0.35rem;
  border-radius: var(--radius-panel);
  border: 1px solid var(--panel-border);
  /* Opaque, for the same reason the tray is: the tint painted over an opaque
     base keeps the palette without letting page text bleed through. */
  background-color: var(--color-surface);
  background-image: linear-gradient(var(--topbar-bg), var(--topbar-bg));
  box-shadow: 0 18px 32px rgba(0, 0, 0, 0.25);
  overflow: hidden;
}
.mn-srv-panel.hidden {
  display: none !important;
}

.mn-srv-head {
  flex: 0 0 auto;
  padding: 0.55rem 0.75rem;
  border-bottom: 1px solid var(--border-color);
  font-family: var(--font-ui);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  opacity: 0.75;
}

/* ---- Areas ---- */
.mn-srv-list {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  margin: 0;
  padding: 0;
  list-style: none;
}

.mn-srv-item {
  display: grid;
  grid-template-columns: 10px 1fr;   /* dot | name + detail */
  align-items: start;
  gap: 0.55rem;
  padding: 0.55rem 0.75rem;
  font-family: var(--font-body);
}
.mn-srv-item + .mn-srv-item {
  border-top: 1px solid var(--divider);
}

.mn-srv-item-dot {
  width: 8px;
  height: 8px;
  margin-top: 0.35rem;
  border-radius: 50%;
  background: var(--mn-srv-green);
}
.mn-srv-item-dot[data-status="warn"] { background: var(--mn-srv-amber); }
.mn-srv-item-dot[data-status="bad"]  { background: var(--mn-srv-red); }

.mn-srv-body {
  min-width: 0;
}
.mn-srv-name {
  display: block;
  font-size: 0.86rem;
  line-height: 1.3;
}
.mn-srv-detail {
  display: block;
  margin-top: 0.1rem;
  font-family: var(--font-ui);
  font-size: 0.72rem;
  line-height: 1.35;
  opacity: 0.65;
  overflow-wrap: anywhere;
}

/* ---- Footer ---- */
.mn-srv-foot {
  flex: 0 0 auto;
  padding: 0.4rem;
  border-top: 1px solid var(--border-color);
}
/* Opt-in for amber/red alerts. Sits above the dashboard link because it is a
   setting, not a destination. */
.mn-srv-alerts {
  display: block;
  width: 100%;
  margin-bottom: 0.35rem;
  padding: 0.45rem 0.6rem;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-panel);
  background: transparent;
  color: inherit;
  font-family: var(--font-ui);
  font-size: 0.74rem;
  cursor: pointer;
  transition: background-color 0.2s ease, box-shadow 0.2s ease;
}
.mn-srv-alerts:hover,
.mn-srv-alerts:focus-visible {
  background: var(--hover-bg);
  outline: none;
  box-shadow: 0 0 0 1px var(--border-color);
}
.mn-srv-alerts[disabled] {
  opacity: 0.45;
  cursor: default;
}
/* On — marked in amber, the lower of the two levels it watches for. */
.mn-srv-alerts.is-on {
  border-color: color-mix(in srgb, var(--mn-srv-amber) 55%, transparent);
}

.mn-srv-note {
  margin: 0 0 0.35rem;
  padding: 0 0.2rem;
  font-family: var(--font-body);
  font-size: 0.7rem;
  line-height: 1.35;
  opacity: 0.65;
}
.mn-srv-note[hidden] {
  display: none;
}

.mn-srv-dash {
  display: block;
  width: 100%;
  padding: 0.45rem 0.6rem;
  border: 1px solid var(--border-color);
  border-radius: var(--radius-panel);
  background: transparent;
  color: inherit;
  text-decoration: none;
  text-align: center;
  font-family: var(--font-ui);
  font-size: 0.74rem;
  transition: background-color 0.2s ease, box-shadow 0.2s ease;
}
.mn-srv-dash:hover,
.mn-srv-dash:focus-visible {
  background: var(--hover-bg);
  outline: none;
  box-shadow: 0 0 0 1px var(--border-color);
}

@media (max-width: 640px) {
  .mn-srv {
    --mn-srv-width: 280px;
    /* Drop out of the positioning chain so the panel anchors to .topbar-right
       (which is itself absolutely positioned) instead of to this button. The
       button sits further left than the bell, so anchoring to it pushed the
       panel past the left edge of a narrow screen — `100vw - 2rem` only caps
       the width correctly for something flush with the right edge. */
    position: static;
  }
}