/* =========================================
   HomeLab Theme
   Dark Glass + Orange Accent
   ========================================= */

:root {
  --homelab-orange: 255, 140, 0;
  --homelab-bg: 14, 14, 14;
  --homelab-card: 20, 20, 20;
}

/* -----------------------------
   Service Cards
   ----------------------------- */

.service-card {
  background: rgba(var(--homelab-card), 0.56) !important;
  border: 1px solid rgba(var(--homelab-orange), 0.10) !important;
  border-radius: 16px !important;

  backdrop-filter: blur(18px) saturate(115%);
  -webkit-backdrop-filter: blur(18px) saturate(115%);

  box-shadow:
    0 10px 30px rgba(0, 0, 0, 0.30),
    inset 0 1px 0 rgba(255, 255, 255, 0.025);

  transition:
    transform 0.20s ease,
    border-color 0.20s ease,
    box-shadow 0.20s ease,
    background-color 0.20s ease;
}

.service-card:hover {
  transform: translateY(-3px);

  background: rgba(var(--homelab-card), 0.68) !important;

  border-color: rgba(var(--homelab-orange), 0.42) !important;

  box-shadow:
    0 14px 36px rgba(0, 0, 0, 0.42),
    0 0 22px rgba(var(--homelab-orange), 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

/* Slight orange glow around icons on hover */
.service-card:hover img {
  filter:
    drop-shadow(0 0 5px rgba(var(--homelab-orange), 0.25));
}

/* -----------------------------
   Group Headings
   ----------------------------- */

h2 {
  font-weight: 600 !important;
  letter-spacing: 0.025em;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.50);
  margin-bottom: 0.75rem !important;
}

h2::after {
  content: "";
  display: block;

  width: 46px;
  height: 2px;

  margin-top: 8px;

  border-radius: 999px;

  background: linear-gradient(
    90deg,
    rgba(var(--homelab-orange), 0.95),
    rgba(var(--homelab-orange), 0.15)
  );

  box-shadow:
    0 0 12px rgba(var(--homelab-orange), 0.20);
}

/* -----------------------------
   Search Bar
   ----------------------------- */

input {
  background: rgba(var(--homelab-bg), 0.58) !important;

  border: 1px solid rgba(255, 255, 255, 0.08) !important;

  border-radius: 14px !important;

  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);

  box-shadow:
    0 8px 24px rgba(0, 0, 0, 0.22);
}

input:focus {
  border-color: rgba(var(--homelab-orange), 0.50) !important;

  box-shadow:
    0 0 0 1px rgba(var(--homelab-orange), 0.18),
    0 0 16px rgba(var(--homelab-orange), 0.07) !important;
}

/* -----------------------------
   Information / Glances Widgets
   ----------------------------- */

.information-widget,
.widget {
  background: rgba(var(--homelab-card), 0.46) !important;

  border: 1px solid rgba(255, 255, 255, 0.045);

  border-radius: 14px;

  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);

  box-shadow:
    0 8px 24px rgba(0, 0, 0, 0.22);
}

/* -----------------------------
   Text
   ----------------------------- */

/* Service title */
.service-card h3 {
  font-weight: 600 !important;
  letter-spacing: 0.01em;
}

/* Descriptions less dominant */
.service-card p {
  opacity: 0.72;
}

/* -----------------------------
   Links
   ----------------------------- */

a {
  transition:
    color 0.15s ease,
    opacity 0.15s ease;
}

a:hover {
  color: rgb(var(--homelab-orange));
}

/* -----------------------------
   Scrollbar
   ----------------------------- */

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

::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.25);
}

::-webkit-scrollbar-thumb {
  background: rgba(var(--homelab-orange), 0.25);
  border-radius: 999px;
}

::-webkit-scrollbar-thumb:hover {
  background: rgba(var(--homelab-orange), 0.45);
}

/* Firefox */
* {
  scrollbar-width: thin;
  scrollbar-color:
    rgba(var(--homelab-orange), 0.35)
    rgba(0, 0, 0, 0.20);
}

/* =========================================
   HomeLab Theme – Fine Tuning
   ========================================= */

/* -----------------------------
   Top information widgets
   ----------------------------- */

#information-widgets {
  padding: 0.25rem 0 0.75rem 0;
}

#information-widgets > div {
  background: rgba(15, 15, 15, 0.50) !important;
  border: 1px solid rgba(var(--homelab-orange), 0.08);
  border-radius: 16px;
  backdrop-filter: blur(18px) saturate(115%);
  -webkit-backdrop-filter: blur(18px) saturate(115%);
  box-shadow:
    0 10px 28px rgba(0, 0, 0, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.025);
}

/* Slightly stronger values in top widgets */
#information-widgets .text-theme-800,
#information-widgets .dark\:text-theme-200 {
  font-weight: 600;
}

/* -----------------------------
   Group spacing
   ----------------------------- */

.services-group {
  margin-bottom: 1.6rem;
}

/* More breathing room between title and cards */
.services-group > div:first-child {
  margin-bottom: 0.45rem;
}

/* -----------------------------
   Service cards – calmer default
   ----------------------------- */

.service-card {
  min-height: 96px;
}

/* Slight visual separation of icon */
.service-card img {
  border-radius: 10px;
}

/* -----------------------------
   Widget values
   ----------------------------- */

.service-card .text-theme-800,
.service-card .dark\:text-theme-200 {
  font-variant-numeric: tabular-nums;
}

/* -----------------------------
   Network / chart styling
   ----------------------------- */

/* Make embedded graphs slightly more visible */
.service-card svg {
  filter:
    drop-shadow(0 0 4px rgba(var(--homelab-orange), 0.08));
}

/* Reduce harsh gridlines where possible */
.service-card svg line {
  opacity: 0.35;
}

/* -----------------------------
   Group headings
   ----------------------------- */

h2 {
  position: relative;
  padding-left: 12px;
}

/* Small orange marker left of heading */
h2::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 3px;
  height: 18px;
  border-radius: 999px;
  transform: translateY(-50%);
  background: rgb(var(--homelab-orange));
  box-shadow:
    0 0 10px rgba(var(--homelab-orange), 0.35);
}

/* Keep underline but make it subtler */
h2::after {
  width: 34px;
  opacity: 0.75;
}

/* -----------------------------
   Better hover hierarchy
   ----------------------------- */

.service-card:hover h3 {
  color: rgb(var(--homelab-orange));
}

.service-card:hover p {
  opacity: 0.86;
}

/* -----------------------------
   Page fade / depth
   ----------------------------- */

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: -1;

  background:
    radial-gradient(
      circle at top center,
      rgba(var(--homelab-orange), 0.035),
      transparent 38%
    ),
    linear-gradient(
      to bottom,
      rgba(0, 0, 0, 0.08),
      rgba(0, 0, 0, 0.26)
    );
}

/* =========================================
   Compact group spacing
   ========================================= */

/* Less space below group heading */
.services-group > div:first-child {
  margin-bottom: 0 !important;
}

/* Pull cards closer to their heading */
.services-group > div:nth-child(2) {
  margin-top: 0 !important;
}

/* Keep some separation between complete groups */
.services-group {
  margin-bottom: 0.8rem !important;
}

/* Heading itself */
h2 {
  margin-bottom: 0.2rem !important;
}

/* =========================================
   HomeLab Progress Bars
   ========================================= */

[id^="progress-"] .homelab-progress {
  width: 100%;
  height: 5px;
  margin-top: 6px;

  overflow: hidden;

  background: rgba(255, 255, 255, 0.08);

  border-radius: 999px;

  box-shadow:
    inset 0 1px 2px rgba(0, 0, 0, 0.45);
}

[id^="progress-"] .homelab-progress-bar {
  height: 100%;

  border-radius: inherit;

  background: linear-gradient(
    90deg,
    rgba(var(--homelab-orange), 0.55),
    rgb(var(--homelab-orange))
  );

  box-shadow:
    0 0 8px rgba(var(--homelab-orange), 0.45);

  transition: width 0.6s ease;
}

/* Overall card slightly more prominent */

#progress-overall {
  border-color: rgba(var(--homelab-orange), 0.28) !important;
}

#progress-overall .homelab-progress {
  height: 8px;
  margin-top: 10px;
}

#progress-overall .homelab-progress-bar {
  box-shadow:
    0 0 12px rgba(var(--homelab-orange), 0.60);
}

/* =========================================
   Progress Details
   ========================================= */

/* Completed values */

.progress-complete-value {
  color: rgb(var(--homelab-orange)) !important;
  font-weight: 600;
}

[id^="progress-"] .homelab-progress-bar.is-complete {
  background: linear-gradient(
    90deg,
    rgba(var(--homelab-orange), 0.75),
    rgb(var(--homelab-orange))
  );

  box-shadow:
    0 0 8px rgba(var(--homelab-orange), 0.50),
    0 0 14px rgba(var(--homelab-orange), 0.20);
}

/* Overall card */

#progress-overall {
  background:
    linear-gradient(
      135deg,
      rgba(var(--homelab-orange), 0.08),
      rgba(var(--homelab-card), 0.58) 38%
    ) !important;

  border-color:
    rgba(var(--homelab-orange), 0.30) !important;
}

/* Main overall percentage */

#progress-overall .overall-progress-value {
  font-size: 1.65rem !important;
  font-weight: 700 !important;
  color: rgb(var(--homelab-orange)) !important;
  letter-spacing: -0.02em;

  text-shadow:
    0 0 14px rgba(var(--homelab-orange), 0.22);
}

/* Bigger overall bar */

#progress-overall .homelab-progress {
  height: 9px;
  margin-top: 10px;

  background:
    rgba(255, 255, 255, 0.07);
}

/* Slight glow along overall bar */

#progress-overall .homelab-progress-bar {
  background: linear-gradient(
    90deg,
    rgba(var(--homelab-orange), 0.55),
    rgb(var(--homelab-orange))
  );

  box-shadow:
    0 0 10px rgba(var(--homelab-orange), 0.45),
    0 0 20px rgba(var(--homelab-orange), 0.12);
}

/* Subtle complete-card highlight */

[id^="progress-"]:has(.progress-complete-value) {
  border-color:
    rgba(var(--homelab-orange), 0.20) !important;
}

/* Smooth progress animation */

.homelab-progress-bar {
  transition:
    width 0.65s ease,
    box-shadow 0.25s ease;
}