/* Vision Pro Style - Applied globally and to service cards */

/* Base styles for the page */
body {
    background-color: #1a1a1d;
    /* Dark background */
    color: rgba(235, 235, 245, 0.8);
    /* Slightly off-white text for better readability */
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
    /* System font stack including San Francisco */
}

/* Service Card refinement - Vision Pro Glass Effect */
.service-card {
    position: relative;
    border-radius: 14px;
    padding: 12px;
    transition: transform 0.2s ease, filter 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease;
    border: none !important;

    /* 2 lines for frosted glass, less vibrant */
    background-color: rgba(255, 255, 255, 0.06) !important;
    backdrop-filter: blur(36px) saturate(115%) brightness(1.05) !important;
    -webkit-backdrop-filter: blur(36px) saturate(115%) brightness(1.05) !important;

    /* iOS Glass inner haze blur */
    box-shadow: inset 0 0 32px rgba(255, 255, 255, 0.08) !important;
}

/* Pseudo element for corner-only highlights using a gradient mask */
.service-card::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    padding: 1.5px;
    /* highlight thickness */
    /* Mix of constant static corners and JS spotlight */
    background:
        radial-gradient(circle at top left, rgba(255, 255, 255, 0.4) 0%, transparent 50px),
        radial-gradient(circle at bottom right, rgba(255, 255, 255, 0.15) 0%, transparent 50px),
        radial-gradient(150px circle at var(--mouse-x, -2000px) var(--mouse-y, -2000px), rgba(255, 255, 255, 0.9), transparent 100%);
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    pointer-events: none;
    z-index: 1;
    opacity: 1;
    /* Always 1 to preserve static corners */
}

/* Pseudo element for the Gaussian shadow to bypass sharp edge rendering bugs */
.service-card::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    z-index: -1;
    pointer-events: none;
    box-shadow: 0 4px 12px 0 rgba(0, 0, 0, 0.2) !important;
    transition: box-shadow 0.3s ease;
}

.from-theme-500\/30 {
    --tw-gradient-from: transparent !important;
}

/* Enhanced hover effect without moving (JS handles transform tilt) */
.service-card:hover {
    background-color: rgba(255, 255, 255, 0.08) !important;
    /* Oppervlakte licht (volgt muis zachtjes) */
    background-image: radial-gradient(300px circle at var(--mouse-x, 50%) var(--mouse-y, 50%),
            rgba(255, 255, 255, 0.2),
            transparent 100%) !important;
    /* Extra inner glow op de vaste randen */
    box-shadow: inset 0 0 32px rgba(255, 255, 255, 0.15) !important;
    z-index: 50 !important;
    /* Stay above neighbors during zoom */
}

.service-card:hover::after {
    box-shadow:
        0 16px 32px 0 rgba(0, 0, 0, 0.3),
        /* Zware 3D dropshadow */
        0 0 40px 0 rgba(255, 255, 255, 0.15) !important;
    /* Lichte outer bloom gloed */
}

/* Ensure text inside cards has good contrast */
.service-card .text-neutral-500 {
    color: rgba(255, 255, 255, 1) !important;
}

.service-card .text-neutral-900 {
    color: white !important;
}

.service-card,
.service-card .service-name,
.service-card .service-url {
    color: rgba(235, 235, 245, 0.9) !important;
    /* text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2); */
    /* small shadow for readability on glass */
}

/* Service Group Name Style - Align with Vision Pro Text Styles (using Bold) */
.service-group-name {
    font-weight: 700 !important;
    /* Using 600 for Semi-Bold, often used in visionOS */
    color: rgba(235, 235, 245, 0.95);
    /* Slightly brighter for headers */
    font-size: 1.2em;
    /* Slightly larger group names */
    margin-top: 1rem;
    /* Add space above each service group */
}

/* Status dot alignment for both site monitor and ping */
.site-monitor-status,
.ping-status {
    padding: calc(var(--spacing) * 6.5) !important;
}

.site-monitor-status .rounded-full,
.ping-status .rounded-full {
    width: 0.5rem !important;
    height: 0.5rem !important;
}

/* Add breathing room at the bottom of the page */
#layout-groups {
    padding-bottom: 4rem !important;
}

/* Hide the footer */
#footer {
    display: none !important;
    /* Force hide */
}

/* Page Container Width - keeping existing logic */
.container {
    max-width: 110%;
    /* Default width for smaller screens */
}

/* Apply narrower width only on larger screens */
@media (min-width: 768px) {

    /* Adjust breakpoint if needed */
    .container {
        max-width: 1300px;
    }
}