/* cabynet dashboard theme.
 *
 * Pure CSS, no external assets — the dashboard looks identical with the WAN
 * down, and nothing binary lands in git.
 *
 * NOTE ON !important: homepage links custom.css BEFORE its own stylesheet, so
 * a plain `:root { --bg-color }` override loses the specificity tie to the
 * theme rule that comes later. The background-color rules below need the
 * !important to win; rules adding properties homepage never sets
 * (background-image, border-radius) do not.
 */

/* Base canvas: deeper than the stock slate-800 so the wash below reads. */
html,
body {
  background-color: rgb(7 11 22) !important;
}

/* Aurora wash — three soft corner glows over the navy base. `fixed` keeps it
   still while the service list scrolls under it. */
body {
  background-image:
    radial-gradient(1100px 720px at 10% -5%, rgba(56, 189, 248, 0.16), transparent 60%),
    radial-gradient(950px 760px at 92% 10%, rgba(139, 124, 246, 0.15), transparent 62%),
    radial-gradient(1200px 820px at 50% 106%, rgba(45, 212, 191, 0.10), transparent 66%);
  background-attachment: fixed;
  background-repeat: no-repeat;
}

/* Frosted cards. The translucent fill is what lets the wash show through, so
   it has to beat homepage's own background utility class. */
.service-card,
.bookmark a {
  background-color: rgba(255, 255, 255, 0.045) !important;
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 10px;
  backdrop-filter: blur(9px);
  -webkit-backdrop-filter: blur(9px);
  transition: background-color 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}

.service-card:hover,
.bookmark a:hover {
  background-color: rgba(255, 255, 255, 0.075) !important;
  border-color: rgba(125, 211, 252, 0.28);
  transform: translateY(-2px);
}

/* Match the top widget boxes (headerStyle: boxedWidgets) to the cards. */
#information-widgets .widget-container {
  border-radius: 10px;
}

/* Group headings ("Apps", "Infrastructure"): quieter than the card text, with
   a hairline under them. These two classes sit ON the heading element itself —
   the group wrapper's heading is nested inside a collapse button, so a child
   selector on .service-group / .bookmark-group would never match.
   font-size needs !important to beat the Tailwind text-xl utility. */
.service-group-name,
.bookmark-group-name {
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-size: 0.72rem !important;
  opacity: 0.55;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
  padding-bottom: 0.35rem;
  width: 100%;
}

/* Let the status dot glow so up/down reads at a glance. */
.site-monitor-status {
  box-shadow: 0 0 8px currentColor;
}

::-webkit-scrollbar {
  width: 10px;
}

::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.12);
  border-radius: 10px;
}

/* Respect a reduced-motion preference — the only motion here is card hover. */
@media (prefers-reduced-motion: reduce) {
  .service-card,
  .bookmark a {
    transition: none;
  }

  .service-card:hover,
  .bookmark a:hover {
    transform: none;
  }
}