/* Beszel-inspired dark emerald theme for Homepage */

:root {
  --beszel-bg: #0b0f0e;
  --beszel-surface: #121816;
  --beszel-border: rgba(52, 211, 153, 0.12);
  --beszel-accent: #34d399;
  --beszel-muted: #8b9a93;
}

html.dark body,
body {
  background: var(--beszel-bg) !important;
  background-image:
    radial-gradient(ellipse 80% 50% at 50% -20%, rgba(52, 211, 153, 0.08), transparent),
    linear-gradient(180deg, #0b0f0e 0%, #0e1412 100%) !important;
}

/* Cards — thin borders, no heavy glass */
#information-widgets,
.service-group,
.service,
.bookmark-group {
  backdrop-filter: none !important;
}

.service,
.bookmark {
  background: var(--beszel-surface) !important;
  border: 1px solid var(--beszel-border) !important;
  border-radius: 0.5rem !important;
  box-shadow: none !important;
  transition: border-color 0.15s ease, background 0.15s ease;
}

.service:hover,
.bookmark:hover {
  border-color: rgba(52, 211, 153, 0.35) !important;
  background: #15201c !important;
}

/* Headers */
.service-group-name,
.bookmark-group-name {
  color: var(--beszel-accent) !important;
  font-weight: 600 !important;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  font-size: 0.75rem !important;
}

/* Widget metric blocks */
.service-block,
.information-widget {
  border-radius: 0.375rem !important;
}

.service-tag {
  font-variant-numeric: tabular-nums;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.8rem;
}

/* Status dots already set via statusStyle; reinforce accent */
.text-emerald-500,
.text-emerald-400 {
  color: var(--beszel-accent) !important;
}

/* Tabs */
[role="tablist"] button[aria-selected="true"] {
  color: var(--beszel-accent) !important;
  border-color: var(--beszel-accent) !important;
}

/* Soften search / header chrome */
#information-widgets {
  border-bottom: 1px solid var(--beszel-border);
  padding-bottom: 0.75rem;
  margin-bottom: 0.5rem;
}

/* Description muted */
.service-description {
  color: var(--beszel-muted) !important;
}