/* =========================================================
   GLOBAL
   ========================================================= */

:root {
  --glass-bg: rgba(20, 32, 48, 0.62);
  --glass-bg-hover: rgba(35, 52, 72, 0.72);
  --glass-border: rgba(150, 190, 220, 0.12);
  --glass-highlight: rgba(255, 255, 255, 0.06);
  --text-primary: rgba(255, 255, 255, 0.92);
  --text-secondary: rgba(210, 220, 230, 0.62);
}


/* =========================================================
   PAGE
   ========================================================= */

body {
  background: #07121c !important;
}

#page_wrapper {
  background: transparent !important;
}

#inner_wrapper {
  background: transparent !important;
}


/* =========================================================
   MAIN CONTAINER
   ========================================================= */

.container {
  max-width: 1500px !important;
  padding-left: 1.5rem !important;
  padding-right: 1.5rem !important;
}

/* =========================================================
   BACKGROUND
   ========================================================= */

#background {
  filter: none !important;
}


/* =========================================================
   GLASS CARDS
   ========================================================= */

.service-container {
  background: var(--glass-bg) !important;

  border: 1px solid var(--glass-border) !important;

  border-radius: 8px !important;

  box-shadow:
    inset 0 1px 0 var(--glass-highlight),
    0 8px 30px rgba(0, 0, 0, 0.18) !important;

  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;

  transition:
    background 150ms ease,
    transform 150ms ease,
    border-color 150ms ease;
}

/* Transparent Grafana cards */
.service-card:has(iframe[src*="grafana.coreanas.tech"]) {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}



/* Transparent Grafana cards */
.service-card:has(iframe[src*="grafana.coreanas.tech"]) {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}

/* Remove the extra Homepage card padding */
.service-card:has(iframe[src*="grafana.coreanas.tech"]) > div {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}


/* =========================================================
   SERVICE ICON
   ========================================================= */

.service-icon {
  width: 38px !important;
  height: 38px !important;
}


/* =========================================================
   SERVICE TITLE
   ========================================================= */

.service-title {
  color: var(--text-primary) !important;
}

.service-description {
  color: var(--text-secondary) !important;
}


/* =========================================================
   WIDGET METRICS
   ========================================================= */

.service-container .text-2xl,
.service-container .text-xl {
  color: rgba(255, 255, 255, 0.85) !important;
}

.service-container .text-xs {
  color: rgba(210, 220, 230, 0.55) !important;
}


/* =========================================================
   STATUS DOT
   ========================================================= */

.service-container .status-dot {
  opacity: 0.8;
}


/* =========================================================
   REMOVE DEFAULT SECTION VISUALS
   ========================================================= */

h2 {
  margin-top: 0 !important;
}


/* =========================================================
   SPACING
   ========================================================= */

#information-widgets {
  margin-bottom: 0.6rem !important;
}

.group {
  margin-bottom: 0.6rem !important;
}


/* =========================================================
   TOP INFO WIDGETS
   ========================================================= */

#information-widgets > div {
  gap: 6px !important;
}

#information-widgets .information-widget {
  background: rgba(25, 40, 58, 0.65) !important;

  border: 1px solid rgba(150, 190, 220, 0.10) !important;

  border-radius: 7px !important;

  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
}


/* =========================================================
   FOOTER
   ========================================================= */

#footer {
  padding: 1rem !important;
  opacity: 0.35;
}


/* =========================================================
   SCROLLBAR
   ========================================================= */

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

::-webkit-scrollbar-track {
  background: transparent;
}

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

::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.22);
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 768px) {
  .container {
    padding-left: 0.75rem !important;
    padding-right: 0.75rem !important;
  }

  .service-container {
    border-radius: 6px !important;
  }
}