/* Import Inter for a clean look, though we will prioritize System Fonts */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap');

:root {
    --text-primary: #ffffff;
    --text-secondary: rgba(255, 255, 255, 0.7);
    --apple-green: #32d74b; /* macOS Green */
    --glass-border: rgba(255, 255, 255, 0.15);
    --glass-highlight: rgba(255, 255, 255, 0.1);
    --glass-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.3);
}

/* --- Global Background (The "Liquid") --- */
body {
    /* Rich Mesh Gradient - Mimics macOS Wallpaper */
    background: 
        radial-gradient(at 0% 0%, hsla(253,16%,7%,1) 0, transparent 50%), 
        radial-gradient(at 50% 0%, hsla(225,39%,30%,1) 0, transparent 50%), 
        radial-gradient(at 100% 0%, hsla(339,49%,30%,1) 0, transparent 50%);
    background-color: #000; /* Fallback */
    background-attachment: fixed;
    background-size: cover;
    
    /* Apple Typography Stack */
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Inter", Roboto, Helvetica, Arial, sans-serif !important;
    color: var(--text-primary) !important;
    -webkit-font-smoothing: antialiased;
}

.container {
    max-width: 1000px !important;
    padding-top: 50px;
}

/* --- Reset the Default Containers --- */
.shadow-box, .card {
    background-color: transparent !important;
    box-shadow: none !important;
    border: none !important;
}

.monitor-list {
    padding: 0 !important;
    background: transparent !important;
}

/* --- The Glass Card Effect (Shared Class) --- */
/* This logic applies to the banner and the items */
.overall-status, .item, .btn {
    background: rgba(255, 255, 255, 0.03) !important; /* Very subtle fill */
    backdrop-filter: blur(25px) saturate(180%) !important; /* The "Apple" Frost */
    -webkit-backdrop-filter: blur(25px) saturate(180%);
    border: 1px solid var(--glass-border) !important;
    /* Subtle inner white glow at top to simulate light */
    box-shadow: inset 0 1px 0 0 rgba(255, 255, 255, 0.1), 
                var(--glass-shadow) !important;
    border-radius: 18px !important; /* Larger Apple-style radius */
}

/* --- Top Buttons --- */
.btn {
    color: var(--text-primary) !important;
    font-weight: 500;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    transition: all 0.3s ease;
}

.btn:hover {
    background: rgba(255, 255, 255, 0.15) !important;
    transform: scale(1.02);
}

/* --- "All Systems Operational" Banner --- */
.overall-status {
    /* Slight green tint for the status box */
    background: rgba(50, 215, 75, 0.1) !important;
    color: var(--apple-green) !important;
    border: 1px solid rgba(50, 215, 75, 0.3) !important;
    padding: 25px !important;
    margin-bottom: 50px !important;
    font-weight: 600;
    font-size: 1.2rem;
    text-shadow: 0 0 20px rgba(50, 215, 75, 0.4);
}

/* --- Group Headers --- */
.group-title {
    color: var(--text-secondary) !important;
    font-size: 1rem !important;
    font-weight: 600;
    margin-bottom: 15px !important;
    margin-top: 40px !important;
    padding-left: 10px;
    border: none !important;
    opacity: 0.9;
    text-shadow: 0 2px 4px rgba(0,0,0,0.5);
}

/* --- Service Items (The Cards) --- */
.item {
    margin-bottom: 15px;
    padding: 18px 25px !important;
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.item-inner {
    margin: 0 !important;
    padding: 0 !important;
}

/* Hover effect: Lifts and brightens the glass */
.item:hover {
    transform: translateY(-5px) scale(1.01);
    background: rgba(255, 255, 255, 0.08) !important;
    border-color: rgba(255, 255, 255, 0.3) !important;
    box-shadow: 0 20px 40px rgba(0,0,0,0.4) !important;
}

/* Service Name */
.item .info {
    font-weight: 500;
    font-size: 1.1rem;
    letter-spacing: -0.02em; /* Tight Apple kerning */
}

/* 100% Badge - Pill Shape */
.badge {
    border-radius: 50px !important; /* Pill shape */
    padding: 6px 12px !important;
    font-weight: 600;
    font-size: 0.75rem;
    backdrop-filter: none !important; /* Optimization */
}

.badge-success {
    background-color: var(--apple-green) !important;
    color: #000 !important; /* Black text on neon green matches iOS */
    box-shadow: 0 0 10px rgba(50, 215, 75, 0.4);
}

/* --- Uptime Bars --- */
.uptime-bar {
    height: 30px !important;
    margin-top: 5px;
}

/* Use Apple Green for bars */
.uptime-bar rect[fill="#28a745"], .uptime-bar rect[fill="#5cd65c"] {
    fill: var(--apple-green) !important;
}

/* --- Footer --- */
footer {
    margin-top: 60px !important;
    color: var(--text-secondary);
    opacity: 0.6;
    font-size: 0.8rem;
}

/* --- Scrollbar (Invisible/Glassy) --- */
::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { 
    background: rgba(255,255,255,0.2); 
    border-radius: 10px; 
}
::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.4); }