/* Minimal Catppuccin Theme with Background Image */

:root {
  --ctp-base: #1e1e2e;
  --ctp-surface0: #313244;
  --ctp-text: #cdd6f4;
  --ctp-subtext0: #a6adc8;
  --ctp-mauve: #cba6f7;
}

/* Background with the new image */
body {
  background: url('/api/config/background.jpg') center/cover no-repeat fixed;
  color: var(--ctp-text);
}

/* Light overlay for better contrast */
body::before {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.4);
  z-index: -1;
}

/* Container with clean transparency */
main {
  background: transparent;
}

[class*="container"] {
  background: rgba(30, 30, 46, 0.85);
  backdrop-filter: blur(12px);
  border-radius: 12px;
  margin: 16px;
  padding: 20px;
}

/* Clean service cards */
[data-testid="service-card"] {
  background: rgba(49, 50, 68, 0.95);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(203, 166, 247, 0.2);
  border-radius: 8px;
  transition: all 0.2s ease;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
}

[data-testid="service-card"]:hover {
  background: rgba(69, 71, 90, 0.95);
  border-color: var(--ctp-mauve);
  transform: translateY(-2px);
}

/* Group titles */
h2 {
  color: var(--ctp-mauve);
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.7);
}

/* Status colors */
.text-green-500 {
  color: #a6e3a1;
}

.text-red-500 {
  color: #f38ba8;
}

.text-yellow-500 {
  color: #f9e2af;
}

/* Hide API error messages and badges until properly configured */
[data-testid="service-card"] [class*="text-red"],
[data-testid="service-card"] [class*="bg-red"] {
  display: none !important;
}

/* Also hide error containers */
[data-testid="service-card"] div:has(> [class*="text-red"]) {
  display: none !important;
}

/* Style widget type labels better */
[data-testid="service-card"] .text-xs {
  background: rgba(203, 166, 247, 0.15);
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 0.75rem;
  color: var(--ctp-subtext0);
  display: inline-block;
  margin-top: 4px;
}