/* Apple-inspired dark glass dashboard */

#page_wrapper {
  background: #09090b !important;
}

#inner_wrapper {
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text",
    "Helvetica Neue", Helvetica, Arial, sans-serif !important;
  font-size: 16px !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden !important;
  overflow-y: auto !important;
}

#page_wrapper .container {
  max-width: 920px !important;
  padding-top: 2.5rem !important;
  padding-bottom: 3rem !important;
  overflow: visible !important;
}

/* Dark overlay — keeps background image very subtle */
#page_wrapper::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background: #09090b;
  opacity: 0.88;
}

#page_wrapper::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(ellipse 70% 45% at 50% -5%, rgba(80, 80, 90, 0.12), transparent),
    radial-gradient(ellipse 50% 35% at 100% 100%, rgba(60, 60, 70, 0.08), transparent);
}

/* Prevent hover animations / borders getting clipped */
#services,
.services-group,
.services-list,
.services-list li,
.services-list li.service,
.service-card,
.service-card > div {
  overflow: visible !important;
}

#services {
  gap: 2.25rem !important;
  padding: 0.5rem 0.25rem 1rem !important;
  overflow: visible !important;
}

.services-list {
  gap: 0.85rem !important;
  padding: 0.35rem !important;
  overflow: visible !important;
}

.services-list li.service {
  padding: 0.35rem !important;
}

/* Date / time widget */
#information-widgets {
  border: none !important;
  margin-bottom: 1rem !important;
  padding-bottom: 0 !important;
  justify-content: center !important;
}

.information-widget-datetime {
  text-align: center !important;
  width: 100% !important;
}

.information-widget-datetime .value {
  font-weight: 300 !important;
  font-size: 1.75rem !important;
  letter-spacing: -0.02em !important;
}

/* Section headers */
.service-group-name {
  font-size: 0.8125rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  color: rgba(255, 255, 255, 0.5) !important;
  margin-bottom: 0.85rem !important;
}

.services-group > button {
  margin-bottom: 0.35rem !important;
}

.services-group > button svg {
  opacity: 0 !important;
}

/* Frosted glass tiles */
.service-card {
  background: rgba(255, 255, 255, 0.06) !important;
  backdrop-filter: blur(20px) saturate(140%) !important;
  -webkit-backdrop-filter: blur(20px) saturate(140%) !important;
  border: 1px solid rgba(255, 255, 255, 0.11) !important;
  border-radius: 18px !important;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.05) inset,
    0 6px 24px rgba(0, 0, 0, 0.35) !important;
  overflow: visible !important;
  transition:
    transform 0.22s cubic-bezier(0.25, 0.46, 0.45, 0.94),
    background 0.22s ease,
    box-shadow 0.22s ease,
    border-color 0.22s ease !important;
}

.service-card:hover {
  transform: translateY(-4px) !important;
  background: rgba(255, 255, 255, 0.1) !important;
  border-color: rgba(255, 255, 255, 0.18) !important;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.08) inset,
    0 14px 40px rgba(0, 0, 0, 0.45) !important;
}

.service-name {
  font-weight: 500 !important;
  font-size: 1.0625rem !important;
  letter-spacing: -0.01em !important;
}

.service-description {
  font-size: 0.875rem !important;
  opacity: 0.6 !important;
  font-weight: 400 !important;
}

.service-card img,
.service-card svg {
  filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.25));
  transform: scale(1.08);
}

#footer #version {
  display: none !important;
}

#revalidate {
  opacity: 0.35 !important;
  transition: opacity 0.2s ease !important;
}

#revalidate:hover {
  opacity: 0.8 !important;
}

#inner_wrapper::-webkit-scrollbar {
  width: 6px;
}

#inner_wrapper::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.15);
  border-radius: 999px;
}