/* =============================================
   🌌 COSMIC GLASS — Stunning Homepage Theme
   Designed for gethomepage v1.13.2+
   ============================================= */

/* === FONTS === */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap');

/* === ROOT VARIABLES === */
:root {
  --glass-bg: rgba(255, 255, 255, 0.04);
  --glass-border: rgba(255, 255, 255, 0.08);
  --glass-shadow: rgba(0, 0, 0, 0.3);
  --neon-primary: #a855f7;
  --neon-secondary: #06b6d4;
  --neon-accent: #f43f5e;
  --text-primary: #e2e8f0;
  --text-secondary: #94a3b8;
  --card-radius: 24px;
}

/* === ANIMATED COSMIC BACKGROUND === */
body {
  background: #0a0a1a !important;
  font-family: 'Inter', sans-serif;
}

body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -2;
  background:
    radial-gradient(ellipse 80% 50% at 20% 20%, rgba(168, 85, 247, 0.12), transparent),
    radial-gradient(ellipse 60% 50% at 80% 80%, rgba(6, 182, 212, 0.12), transparent),
    radial-gradient(ellipse 50% 60% at 50% 50%, rgba(244, 63, 94, 0.06), transparent),
    radial-gradient(ellipse 100% 100% at 50% 50%, #0a0a1a, #06061a);
  animation: cosmicShift 20s ease-in-out infinite alternate;
}

@keyframes cosmicShift {
  0% {
    background:
      radial-gradient(ellipse 80% 50% at 20% 20%, rgba(168, 85, 247, 0.12), transparent),
      radial-gradient(ellipse 60% 50% at 80% 80%, rgba(6, 182, 212, 0.12), transparent),
      radial-gradient(ellipse 50% 60% at 50% 50%, rgba(244, 63, 94, 0.06), transparent),
      radial-gradient(ellipse 100% 100% at 50% 50%, #0a0a1a, #06061a);
  }
  50% {
    background:
      radial-gradient(ellipse 70% 60% at 80% 30%, rgba(6, 182, 212, 0.14), transparent),
      radial-gradient(ellipse 60% 50% at 20% 70%, rgba(168, 85, 247, 0.14), transparent),
      radial-gradient(ellipse 50% 50% at 50% 40%, rgba(244, 63, 94, 0.08), transparent),
      radial-gradient(ellipse 100% 100% at 50% 50%, #08081e, #05051a);
  }
  100% {
    background:
      radial-gradient(ellipse 80% 50% at 40% 80%, rgba(244, 63, 94, 0.10), transparent),
      radial-gradient(ellipse 50% 60% at 70% 30%, rgba(168, 85, 247, 0.15), transparent),
      radial-gradient(ellipse 60% 50% at 50% 60%, rgba(6, 182, 212, 0.10), transparent),
      radial-gradient(ellipse 100% 100% at 50% 50%, #0a0a1a, #06061a);
  }
}

/* Floating orbs */
body::after {
  content: '';
  position: fixed;
  width: 600px;
  height: 600px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(168, 85, 247, 0.08) 0%, transparent 70%);
  top: -200px;
  right: -200px;
  z-index: -1;
  animation: orbFloat 15s ease-in-out infinite;
}

@keyframes orbFloat {
  0%, 100% { transform: translate(0, 0) scale(1); }
  33% { transform: translate(-100px, 100px) scale(1.1); }
  66% { transform: translate(50px, -50px) scale(0.9); }
}

/* === SCROLLBAR === */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: rgba(255, 255, 255, 0.02); }
::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, var(--neon-primary), var(--neon-secondary));
  border-radius: 99px;
}

/* === PAGE CONTAINER === */
#page_container {
  background: transparent !important;
}

/* === HEADER / TOP BAR === */
.header, .top {
  background: var(--glass-bg) !important;
  backdrop-filter: blur(20px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(20px) saturate(180%) !important;
  border: 1px solid var(--glass-border) !important;
  border-radius: var(--card-radius) !important;
  box-shadow:
    0 8px 32px rgba(0, 0, 0, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.05) !important;
  margin: 12px 16px !important;
  padding: 12px 24px !important;
}

/* === TAB BAR === */
#myTab, [role="tablist"] {
  background: rgba(255, 255, 255, 0.03) !important;
  backdrop-filter: blur(16px) !important;
  border: 1px solid rgba(255, 255, 255, 0.06) !important;
  border-radius: 20px !important;
  padding: 6px !important;
}

#myTab button, [role="tab"] {
  border-radius: 16px !important;
  padding: 8px 20px !important;
  font-weight: 500 !important;
  font-size: 0.9rem !important;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
  color: var(--text-secondary) !important;
}

#myTab button:hover, [role="tab"]:hover {
  background: rgba(255, 255, 255, 0.05) !important;
  color: var(--text-primary) !important;
}

#myTab button[aria-selected="true"], [role="tab"][aria-selected="true"] {
  background: linear-gradient(135deg, rgba(168, 85, 247, 0.2), rgba(6, 182, 212, 0.2)) !important;
  color: #fff !important;
  box-shadow:
    0 0 20px rgba(168, 85, 247, 0.15),
    inset 0 1px 0 rgba(255, 255, 255, 0.1) !important;
  border: 1px solid rgba(168, 85, 247, 0.3) !important;
}

/* === SERVICE CARDS — GLASSMORPHISM === */
.service-card, .service > div > a, li.bookmark > a {
  background: rgba(255, 255, 255, 0.03) !important;
  backdrop-filter: blur(16px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(16px) saturate(180%) !important;
  border: 1px solid rgba(255, 255, 255, 0.06) !important;
  border-radius: var(--card-radius) !important;
  box-shadow:
    0 4px 24px rgba(0, 0, 0, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.04) !important;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;
  overflow: hidden !important;
  position: relative !important;
}

/* Card hover — lift + glow */
.service-card:hover, .service > div > a:hover, li.bookmark > a:hover {
  transform: translateY(-6px) scale(1.02) !important;
  background: rgba(255, 255, 255, 0.06) !important;
  border-color: rgba(168, 85, 247, 0.3) !important;
  box-shadow:
    0 12px 40px rgba(0, 0, 0, 0.4),
    0 0 30px rgba(168, 85, 247, 0.1),
    0 0 60px rgba(6, 182, 212, 0.05),
    inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
}

/* Card shimmer effect on hover */
.service-card::after, .service > div > a::after {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 50%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.03),
    transparent
  );
  transition: left 0.6s ease;
}

.service-card:hover::after, .service > div > a:hover::after {
  left: 150%;
}

/* Card active/click */
.service-card:active, .service > div > a:active {
  transform: translateY(-2px) scale(0.98) !important;
  transition: all 0.1s ease !important;
}

/* === SERVICE ICONS === */
.service-icon, .service img, .bookmark-icon {
  border-radius: 18px !important;
  background: rgba(255, 255, 255, 0.05) !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  transition: all 0.3s ease !important;
}

.service-card:hover .service-icon, .service > div > a:hover img {
  box-shadow:
    0 0 20px rgba(168, 85, 247, 0.2),
    0 4px 12px rgba(0, 0, 0, 0.3) !important;
  border-color: rgba(168, 85, 247, 0.3) !important;
}

/* === SERVICE TEXT === */
.service-name {
  color: var(--text-primary) !important;
  font-weight: 600 !important;
  font-size: 0.95rem !important;
  letter-spacing: 0.01em !important;
}

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

/* === GROUP HEADERS === */
.service-group-name, .bookmark-group-name, h2 {
  font-weight: 700 !important;
  font-size: 1rem !important;
  letter-spacing: 0.05em !important;
  text-transform: uppercase !important;
  background: linear-gradient(135deg, var(--neon-primary), var(--neon-secondary)) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
  padding: 8px 0 !important;
  position: relative !important;
}

.service-group-name::after, .bookmark-group-name::after {
  content: '';
  display: block;
  width: 40px;
  height: 2px;
  background: linear-gradient(90deg, var(--neon-primary), var(--neon-secondary));
  border-radius: 99px;
  margin-top: 6px;
}

/* === WIDGET CONTAINER === */
.widget-container, #widgets-wrap, .widgets {
  background: rgba(255, 255, 255, 0.03) !important;
  backdrop-filter: blur(16px) !important;
  border: 1px solid rgba(255, 255, 255, 0.06) !important;
  border-radius: var(--card-radius) !important;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.2) !important;
  padding: 20px !important;
  margin-bottom: 12px !important;
}

/* === STATUS DOTS === */
.site-monitor-status > .rounded-full,
.service-container-stats .rounded-full,
[class*="docker-status"] {
  box-shadow: 0 0 8px currentColor !important;
  transition: box-shadow 0.3s ease !important;
}

/* === RESOURCE BARS === */
.resource-usage, [class*="resource-usage"] {
  background: rgba(255, 255, 255, 0.06) !important;
  border-radius: 99px !important;
  overflow: hidden !important;
  height: 8px !important;
}

.resource-usage > div, [class*="resource-usage"] > div {
  border-radius: 99px !important;
  background: linear-gradient(90deg, var(--neon-primary), var(--neon-secondary)) !important;
  box-shadow: 0 0 10px rgba(168, 85, 247, 0.3) !important;
  transition: width 1s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

/* === INFORMATION WIDGETS === */
#information-widgets {
  background: rgba(255, 255, 255, 0.03) !important;
  backdrop-filter: blur(16px) !important;
  border: 1px solid rgba(255, 255, 255, 0.06) !important;
  border-radius: var(--card-radius) !important;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.2) !important;
}

/* === SEARCH BAR === */
input[type="search"], input[type="text"], .search-input, #search {
  background: rgba(255, 255, 255, 0.04) !important;
  backdrop-filter: blur(12px) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 16px !important;
  color: var(--text-primary) !important;
  padding: 10px 20px !important;
  transition: all 0.3s ease !important;
}

input[type="search"]:focus, input[type="text"]:focus {
  border-color: var(--neon-primary) !important;
  box-shadow: 0 0 20px rgba(168, 85, 247, 0.15) !important;
  outline: none !important;
}

/* === FOOTER === */
#footer, footer {
  color: var(--text-secondary) !important;
  opacity: 0.5 !important;
}

/* === BUTTONS === */
button {
  transition: all 0.3s ease !important;
}

button:hover {
  color: var(--neon-primary) !important;
}

/* === TOOLTIP === */
[role="tooltip"], .tooltip {
  background: rgba(20, 20, 40, 0.95) !important;
  backdrop-filter: blur(20px) !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  border-radius: 14px !important;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5) !important;
}

/* === SMOOTH PAGE TRANSITIONS === */
#body, #page_container, .service-card, .service, .widget-container {
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

/* === RESPONSIVE — MOBILE === */
@media (max-width: 768px) {
  .header, .top {
    margin: 8px !important;
    padding: 10px 16px !important;
    border-radius: 18px !important;
  }

  .service-card, .service > div > a {
    border-radius: 18px !important;
  }

  .service-card:hover {
    transform: translateY(-3px) scale(1.01) !important;
  }
}

/* === ANIMATED BORDER GLOW FOR SPECIAL CARDS === */
@keyframes borderGlow {
  0%, 100% { border-color: rgba(168, 85, 247, 0.2); }
  50% { border-color: rgba(6, 182, 212, 0.4); }
}

.service-card:nth-child(3n) {
  animation: borderGlow 4s ease-in-out infinite;
}

/* === DOCKER STATUS COLORS === */
[class*="docker-status-healthy"],
[class*="docker-status-running"] {
  background: rgba(34, 197, 94, 0.2) !important;
  color: #4ade80 !important;
  border: 1px solid rgba(74, 222, 128, 0.3) !important;
  box-shadow: 0 0 12px rgba(74, 222, 128, 0.15) !important;
}

[class*="docker-status-exited"],
[class*="docker-status-dead"] {
  background: rgba(239, 68, 68, 0.2) !important;
  color: #f87171 !important;
  border: 1px solid rgba(248, 113, 113, 0.3) !important;
  box-shadow: 0 0 12px rgba(248, 113, 113, 0.15) !important;
}

/* === GREETING / CLOCK WIDGET === */
#greeting, .greeting {
  font-size: 1.5rem !important;
  font-weight: 700 !important;
  background: linear-gradient(135deg, #c084fc, #67e8f9) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
}

/* === ROUNDED CORNERS EVERYWHERE === */
.rounded-md, .rounded, .rounded-lg, .rounded-xl {
  border-radius: var(--card-radius) !important;
}

/* === LAYOUT GRID REFINEMENT === */
ul[class*="grid"] {
  gap: 14px !important;
}