/* Sophitech Dashboard - COMPACT & BEAUTIFUL */

body {
  background:
    radial-gradient(ellipse at 20% 0%, rgba(88, 28, 135, 0.15) 0%, transparent 50%),
    radial-gradient(ellipse at 80% 100%, rgba(15, 23, 42, 0.3) 0%, transparent 50%),
    radial-gradient(ellipse at 50% 50%, rgba(30, 10, 60, 0.2) 0%, transparent 70%),
    linear-gradient(180deg, #030014 0%, #0a0118 50%, #050010 100%) !important;
  background-attachment: fixed !important;
}

* { color: #e0e0e0 !important; }
h1, h2, h3, h4, h5, h6 { color: #fff !important; font-weight: 600 !important; }

/* === SECTION CONTAINERS (glass effect) === */
.services-group,
section,
div[class*="services"] > div,
main > div > div > div {
  background: rgba(15, 10, 25, 0.5) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  border: 1px solid rgba(100, 70, 150, 0.2) !important;
  border-radius: 10px !important;
  padding: 10px !important;
  margin-bottom: 8px !important;
}

/* === INDIVIDUAL CARDS (compact, hoverable) === */
.service-card,
.service,
div[class*="service"],
ul[class*="grid"] > li > div {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 6px 4px !important;
  border-radius: 6px !important;
  margin: 0 !important;
}

/* Hover on cards */
.service-card:hover,
.service:hover,
ul[class*="grid"] > li > div:hover {
  background: rgba(255, 255, 255, 0.05) !important;
}

/* === STATUS DOT - inline with title === */
button[class*="View container"] {
  position: relative !important;
  margin-left: auto !important;
}

[class*="bg-green"], [class*="bg-emerald"] {
  box-shadow: 0 0 6px rgba(34, 197, 94, 0.6) !important;
}

/* === COMPACT HORIZONTAL GRID === */
ul[class*="grid"] {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)) !important;
  gap: 4px !important;
}

/* === COMPACT STATS (CPU/MEM/RX/TX) === */
ul[class*="grid"] > li > div > div:last-child {
  font-size: 10px !important;
  opacity: 0.8 !important;
}

ul[class*="grid"] > li > div > div:last-child > div {
  padding: 2px 4px !important;
}

/* Service title smaller */
ul[class*="grid"] > li > div > div:first-child a,
ul[class*="grid"] > li > div > div:first-child span {
  font-size: 12px !important;
}

/* Description smaller */
ul[class*="grid"] > li > div p {
  font-size: 10px !important;
  opacity: 0.6 !important;
  margin: 0 !important;
}

/* === SECTION HEADERS === */
button[aria-expanded] {
  background: transparent !important;
  padding: 2px 0 6px 0 !important;
}

button[aria-expanded] h2 {
  font-size: 11px !important;
  text-transform: uppercase !important;
  letter-spacing: 1.5px !important;
  opacity: 0.6 !important;
  font-weight: 500 !important;
}

/* === COLLAPSED SECTIONS === */
button[aria-expanded="false"] {
  background: rgba(20, 15, 30, 0.4) !important;
  border-radius: 8px !important;
  padding: 12px !important;
  border: 1px solid rgba(60, 50, 90, 0.3) !important;
}

/* === WIDGETS === */
.widget {
  background: rgba(10, 8, 18, 0.5) !important;
  border-radius: 6px !important;
  padding: 8px !important;
  margin-top: 8px !important;
  border: none !important;
}

/* === HEADER === */
header, nav {
  background: rgba(16, 12, 24, 0.8) !important;
  backdrop-filter: blur(8px) !important;
  border-bottom: 1px solid rgba(60, 50, 90, 0.3) !important;
}

/* === SEARCH === */
input {
  background: rgba(20, 15, 30, 0.6) !important;
  border: 1px solid rgba(60, 50, 90, 0.4) !important;
  color: #fff !important;
  border-radius: 6px !important;
}

/* === SCROLLBAR === */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: #0a0612; }
::-webkit-scrollbar-thumb { background: rgba(60, 50, 90, 0.5); border-radius: 3px; }

/* === BOOKMARKS === */
.bookmark, a[href*="github"], a[href*="docker"] {
  background: transparent !important;
  border: none !important;
}

/* === RESET === */
.bg-theme-100, .bg-theme-200, .bg-theme-300 {
  background: transparent !important;
}