/* ============================================
   SYNSTREAMS HOMEPAGE — Custom Styles
   Edit freely, it's just CSS!
   ============================================ */

/* ── Base & Background ── */
body {
  background: linear-gradient(135deg, #0f0f1a 0%, #1a1025 50%, #0d1117 100%);
  background-attachment: fixed;
}

/* Subtle animated gradient orbs in background */
body::before {
  content: '';
  position: fixed;
  top: -20%;
  left: -10%;
  width: 600px;
  height: 600px;
  background: radial-gradient(circle, rgba(99, 60, 180, 0.12) 0%, transparent 70%);
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
}

body::after {
  content: '';
  position: fixed;
  bottom: -20%;
  right: -10%;
  width: 500px;
  height: 500px;
  background: radial-gradient(circle, rgba(30, 100, 200, 0.1) 0%, transparent 70%);
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
}

/* ── Cards ── */
#myTab .service-card,
.service-card {
  background: rgba(255, 255, 255, 0.04) !important;
  border: 1px solid rgba(255, 255, 255, 0.07) !important;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-radius: 14px !important;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease !important;
}

.service-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(139, 92, 246, 0.2) !important;
  border-color: rgba(139, 92, 246, 0.3) !important;
}

/* ── Section Headers ── */
h2.text-theme-800 {
  font-size: 0.7rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.15em !important;
  text-transform: uppercase !important;
  color: rgba(139, 92, 246, 0.7) !important;
  padding-bottom: 4px;
  border-bottom: 1px solid rgba(139, 92, 246, 0.2);
  margin-bottom: 12px;
}

/* ── Service Name Text ── */
.service-name {
  font-weight: 600 !important;
  font-size: 0.95rem !important;
}

/* ── Description Text ── */
.service-description {
  font-size: 0.78rem !important;
  opacity: 0.55 !important;
}

/* ── Widget Stats (the little number blocks) ── */
.widget-value {
  font-variant-numeric: tabular-nums;
}

/* ── Top Info Bar (resources, clock, search) ── */
#information-widgets {
  background: rgba(255, 255, 255, 0.03);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  backdrop-filter: blur(10px);
  padding: 8px 0;
}

/* ── Search Bar ── */
#search-field {
  background: rgba(255, 255, 255, 0.06) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  border-radius: 10px !important;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

#search-field:focus {
  border-color: rgba(139, 92, 246, 0.5) !important;
  box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.15) !important;
  outline: none !important;
}

/* ── Bookmark Cards ── */
.bookmark-card {
  background: rgba(255, 255, 255, 0.03) !important;
  border: 1px solid rgba(255, 255, 255, 0.06) !important;
  border-radius: 10px !important;
  transition: background 0.2s ease;
}

.bookmark-card:hover {
  background: rgba(255, 255, 255, 0.07) !important;
}

/* ── Status dot colors — make them pop ── */
.status-dot-green {
  box-shadow: 0 0 6px rgba(74, 222, 128, 0.6);
}

.status-dot-red {
  box-shadow: 0 0 6px rgba(248, 113, 113, 0.6);
}

/* ── Scrollbar ── */
::-webkit-scrollbar {
  width: 6px;
}
::-webkit-scrollbar-track {
  background: transparent;
}
::-webkit-scrollbar-thumb {
  background: rgba(139, 92, 246, 0.3);
  border-radius: 3px;
}
::-webkit-scrollbar-thumb:hover {
  background: rgba(139, 92, 246, 0.5);
}

/* ── Media — slightly more prominent ── */
[data-group="Media"] .service-card {
  border-color: rgba(139, 92, 246, 0.15) !important;
}

/* ── Downloads — blue accent ── */
[data-group="Downloads"] .service-card {
  border-color: rgba(59, 130, 246, 0.12) !important;
}

/* ── Management — green accent, slightly de-emphasized ── */
[data-group="Management"] .service-card {
  border-color: rgba(16, 185, 129, 0.1) !important;
  opacity: 0.9;
}
[data-group="Management"] .service-card:hover {
  opacity: 1;
}

/* ── Status — amber accent ── */
[data-group="Status"] .service-card {
  border-color: rgba(251, 191, 36, 0.1) !important;
}

/* ── Infrastructure — de-emphasized, admin-only ── */
[data-group="Infrastructure"] .service-card {
  opacity: 0.82;
}
[data-group="Infrastructure"] .service-card:hover {
  opacity: 1;
}

/* ── Getting Started — neutral, info cards ── */
[data-group="Getting Started"] .service-card {
  border-color: rgba(255, 255, 255, 0.05) !important;
  opacity: 0.88;
}
[data-group="Getting Started"] .service-card:hover {
  opacity: 1;
}