:root { --bg-deep: #0f172a; }
body {
    background-color: var(--bg-deep);
    background-image: 
        radial-gradient(circle at 15% 50%, rgba(59, 130, 246, 0.08), transparent 25%),
        radial-gradient(circle at 85% 30%, rgba(16, 185, 129, 0.08), transparent 25%);
    font-family: 'Segoe UI', system-ui, sans-serif;
}
.glass-header { background: rgba(15, 23, 42, 0.85); backdrop-filter: blur(16px); border-bottom: 1px solid rgba(255,255,255,0.05); }
.glass-panel { background: rgba(30, 41, 59, 0.7); backdrop-filter: blur(12px); border: 1px solid rgba(255,255,255,0.05); }
.service-card { transition: all 0.3s; }
.service-card:hover { transform: translateY(-4px); box-shadow: 0 12px 20px -8px rgba(0,0,0,0.3); }
@keyframes pulse-ring { 0% { box-shadow: 0 0 0 0 rgba(16,185,129,0.4); } 70% { box-shadow: 0 0 0 6px rgba(16,185,129,0); } 100% { box-shadow: 0 0 0 0 rgba(16,185,129,0); } }
.status-dot { animation: pulse-ring 2s infinite; }
.hidden { display: none !important; }

/* ============================================
   UPTIME BARS - Style OVH/Scaleway
   ============================================ */

/* Container for all day bars */
.uptime-bars-container {
    display: flex;
    align-items: flex-end;
    width: 100%;
    height: 36px;
    gap: 1.5px;
}

/* Individual day bar */
.uptime-day-bar {
    flex: 1;
    height: 100%;
    display: flex;
    flex-direction: column-reverse;
    border-radius: 2px;
    overflow: hidden;
    cursor: pointer;
    transition: transform 0.15s ease, filter 0.15s ease, box-shadow 0.15s ease;
    position: relative;
    min-width: 2px;
}

.uptime-day-bar:hover {
    transform: scaleY(1.3) scaleX(1.5);
    z-index: 10;
    filter: brightness(1.2);
    box-shadow: 0 0 8px rgba(255, 255, 255, 0.15);
    border-radius: 2px;
}

/* Bar segments (colored portions) */
.bar-segment {
    width: 100%;
    min-height: 0;
    transition: height 0.3s ease;
}

.bar-operational { background: #22c55e; }
.bar-degraded { background: #eab308; }
.bar-major { background: #ef4444; }
.bar-maintenance { background: #3b82f6; }
.bar-nodata { background: #475569; }

/* Tooltip for bars */
.bar-tooltip {
    display: none;
    position: absolute;
    background: rgba(15, 23, 42, 0.95);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    padding: 8px 12px;
    pointer-events: none;
    z-index: 9999;
    backdrop-filter: blur(12px);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
    min-width: 130px;
    text-align: center;
}

/* Bar wrapper */
.uptime-bar-wrapper {
    position: relative;
}

/* Scrollbar for history grids */
#uptime-history .overflow-x-auto::-webkit-scrollbar {
    height: 4px;
}
#uptime-history .overflow-x-auto::-webkit-scrollbar-track {
    background: rgba(255,255,255,0.05);
    border-radius: 2px;
}
#uptime-history .overflow-x-auto::-webkit-scrollbar-thumb {
    background: rgba(255,255,255,0.2);
    border-radius: 2px;
}
#uptime-history .overflow-x-auto::-webkit-scrollbar-thumb:hover {
    background: rgba(255,255,255,0.3);
}

/* Tooltip styles for incident timeline */
#hour-tooltip {
    min-width: 150px;
    z-index: 9999;
    pointer-events: none;
}

#hour-tooltip::before {
    content: '';
    position: absolute;
    top: 8px;
    left: -6px;
    border: 6px solid transparent;
    border-right-color: rgba(30, 41, 59, 0.9);
}