/* 1. De achtergrond van de hele pagina */
body {
    background: radial-gradient(circle at top right, #1a202c, #0f172a) !important;
    background-attachment: fixed !important;
}

/* 2. De kaarten (Services) modern maken */
.relative.flex.flex-col.group {
    background: rgba(255, 255, 255, 0.03) !important;
    backdrop-filter: blur(8px) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 1rem !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06) !important;
}

/* Hover effect voor alle kaarten */
.relative.flex.flex-col.group:hover {
    transform: translateY(-5px) scale(1.01);
    background: rgba(255, 255, 255, 0.07) !important;
    border-color: rgba(255, 255, 255, 0.2) !important;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.2) !important;
}

/* 3. Specifieke accenten per type (optioneel) */
/* Proxmox krijgt een subtiele groene gloed onderaan */
div[data-service="Proxmox VE"] {
    border-bottom: 3px solid #16A085 !important;
}

/* Media krijgt een blauwe gloed */
div[data-service="Sonarr"], div[data-service="Radarr"] {
    border-bottom: 3px solid #3498DB !important;
}

/* 4. Titels van groepen (Proxmox, Media) */
h2.group-title {
    font-size: 1.25rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.05em;
    color: rgba(255, 255, 255, 0.9) !important;
    margin-bottom: 1.5rem !important;
}

/* 5. Zoekbalk styling */
#search-input {
    background: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    backdrop-filter: blur(4px);
}