/*
 * A clean, two-column, status-focused dashboard theme with a background image.
 */

:root {
  /* Base Colors */
  --color-background: #121212;
  --color-foreground: #e0e0e0;
  --color-foreground-alt: #b3b3b3;

  /* Status Colors */
  --status-online-color: #28a745;  /* Green */
  --status-offline-color: #dc3545; /* Red */
  --status-neutral-color: #6c757d; /* Grey */

  /* Widget & Card Styling */
  /* We make the background semi-transparent to see the background image */
  --widget-background-color: rgba(30, 30, 30, 0.75);
  --widget-border-radius: 12px;
  --widget-box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);

  /* Font */
  --font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
}

body {
  /* --- Background Image --- */
  /* This pulls a random, high-quality image from Unsplash. You can change the keywords (e.g., abstract, tech, space) */
  background-image: url('https://source.unsplash.com/random/1920x1080?abstract,dark');
  background-size: cover;
  background-position: center;
  background-attachment: fixed; /* This makes the background stay in place while scrolling */
  background-repeat: no-repeat;
}

/* This adds a dark overlay on top of the background image to make text more readable */
body::before {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5); /* Adjust the last value (0.5) to make it darker or lighter */
  z-index: -1;
}

/* --- Main Layout --- */
#services {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
}

/* --- Service Card Styling --- */
.service-widget {
  background-color: var(--widget-background-color);
  border-radius: var(--widget-border-radius);
  box-shadow: var(--widget-box-shadow);
  border-left: 5px solid var(--status-neutral-color);
  transition: transform 0.2s ease, border-color 0.3s ease;
  padding: 1rem 1.5rem;
  backdrop-filter: blur(8px); /* Adds a nice frosted-glass effect */
}

.service-widget:hover {
  transform: translateY(-4px);
}

/* --- Status Indicator Borders --- */
.service-widget[data-status="online"] {
  border-left-color: var(--status-online-color);
}

.service-widget[data-status="offline"] {
  border-left-color: var(--status-offline-color);
}

/* --- Hide the default widget text --- */
.service-widget .status {
  display: none;
}

/* --- Text Styling --- */
.service-widget .name {
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--color-foreground);
}

.service-widget .description {
  font-size: 0.9rem;
  color: var(--color-foreground-alt);
}

/* --- Responsive Layout for Mobile --- */
@media (max-width: 768px) {
  #services {
    grid-template-columns: 1fr;
  }
}