@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700;800&display=swap");

:root {
  --x-card: rgba(15, 23, 42, 0.64);
  --x-card-hover: rgba(20, 31, 48, 0.78);
  --x-border: rgba(255, 255, 255, 0.16);
  --x-text: #ffffff;
  --x-muted: #d1d5db;
  --x-soft: #e5e7eb;
}

/* Global font */
* {
  font-family: "Poppins", sans-serif !important;
}

/* Background with readability overlay */
body {
  background:
    linear-gradient(180deg, rgba(2, 6, 23, 0.42), rgba(2, 6, 23, 0.82)),
    url("/images/background.jpg") center center / cover fixed no-repeat !important;
  color: var(--x-text) !important;
}

/* Main dashboard width */
main {
  max-width: 1380px !important;
  margin: 0 auto !important;
  padding-top: 10px !important;
}

/* Keep Homepage default header behavior */
header,
nav,
header *,
nav * {
  box-shadow: none !important;
}

/* Header widgets */
header > div,
nav > div {
  background: rgba(15, 23, 42, 0.42) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  backdrop-filter: blur(10px) saturate(120%) !important;
}

/* Category labels */
h2 {
  font-family: "Poppins", sans-serif !important;
  font-size: 1.35rem !important;
  font-weight: 800 !important;
  letter-spacing: -0.02em !important;
  margin-top: 24px !important;
  margin-bottom: 10px !important;
  color: #ffffff !important;
  text-shadow:
    0 2px 6px rgba(0, 0, 0, 0.65),
    0 0 18px rgba(0, 0, 0, 0.45) !important;
}

/* Hide category icons */
h2 svg,
h2 img {
  display: none !important;
}

/* Compact service cards */
main div[class*="bg-theme-"],
main li[class*="bg-theme-"],
main a[class*="bg-theme-"] {
  min-height: 46px !important;
  max-height: 52px !important;
  padding-top: 6px !important;
  padding-bottom: 6px !important;
  background: var(--x-card) !important;
  border: 1px solid var(--x-border) !important;
  border-radius: 10px !important;
  box-shadow: none !important;
  backdrop-filter: blur(12px) saturate(125%) !important;
  transition: all 0.18s ease !important;
}

/* Service card hover */
main div[class*="bg-theme-"]:hover,
main li[class*="bg-theme-"]:hover,
main a[class*="bg-theme-"]:hover {
  background: var(--x-card-hover) !important;
  border-color: rgba(56, 189, 248, 0.45) !important;
  transform: translateY(-1px) !important;
}

/* Service icons */
main div[class*="bg-theme-"] img,
main li[class*="bg-theme-"] img,
main a[class*="bg-theme-"] img {
  width: 26px !important;
  height: 26px !important;
  filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.28)) !important;
}

/* Service names and main text */
main div[class*="bg-theme-"] span,
main li[class*="bg-theme-"] span,
main a[class*="bg-theme-"] span,
main div[class*="bg-theme-"] div,
main li[class*="bg-theme-"] div,
main a[class*="bg-theme-"] div {
  color: var(--x-text) !important;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.55) !important;
}

/* Service title sizing */
main div[class*="bg-theme-"] span,
main li[class*="bg-theme-"] span,
main a[class*="bg-theme-"] span {
  font-size: 0.86rem !important;
  font-weight: 500 !important;
}

/* Descriptions */
[class*="description"],
p {
  color: var(--x-muted) !important;
  font-size: 0.76rem !important;
  font-weight: 400 !important;
  line-height: 1.15 !important;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.55) !important;
}

/* Header/date/weather text */
header *,
nav * {
  color: #ffffff !important;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.55) !important;
}

/* Status dots */
[class*="status"] {
  filter: drop-shadow(0 0 6px rgba(16, 185, 129, 0.55)) !important;
}