/* ==============================================================================
 * HOMEPAGE CUSTOM CSS
 * ==============================================================================
 * Generated by Ansible - Do not edit manually
 * Template: custom.css.j2
 * ============================================================================== */

/* Background customization */
body {
  background-image: url('https://images.unsplash.com/photo-1451187580459-43490279c0fa?w=1920');
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  background-repeat: no-repeat;
}

/* Card styling */
.service-card {
  backdrop-filter: blur(10px);
  background-color: rgba(30, 41, 59, 0.8) !important;
  transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
}

/* Widget styling */
.widget {
  backdrop-filter: blur(8px);
}

/* Hover and Focus effects for accessibility and polish */
.service-card:hover,
.service-card:focus-visible {
  transform: translateY(-2px);
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.3);
}

.service-card a {
  transition: filter 0.2s ease-in-out;
}

.service-card:hover a,
.service-card:focus-visible a {
  filter: brightness(1.1);
}

/* Custom scrollbar */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: rgba(30, 41, 59, 0.5);
  border-radius: 4px;
}

::-webkit-scrollbar-thumb {
  background: rgba(100, 116, 139, 0.8);
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: rgba(148, 163, 184, 0.8);
}

/* Section headers */
.section-header {
  font-weight: 600;
  letter-spacing: 0.05em;
}

/* Service status dot */
.status-dot {
  box-shadow: 0 0 4px currentColor;
}

/* Media queries for responsiveness */
@media (max-width: 768px) {
  .service-card {
    margin: 0.25rem;
  }
}

/* Animation for loading states */
@keyframes pulse {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.5;
  }
}

.loading {
  animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

/* Custom colors matching the homelab theme */
.text-homelab-primary {
  color: #3b82f6;
}

.text-homelab-secondary {
  color: #8b5cf6;
}

.text-homelab-success {
  color: #22c55e;
}

.text-homelab-warning {
  color: #f59e0b;
}

.text-homelab-error {
  color: #ef4444;
}