:root {
    --bg-color: #0f172a;
    --card-bg: #1e293b;
    --card-border: #334155;
    --text-primary: #f8fafc;
    --text-secondary: #94a3b8;
    --text-muted: #64748b;
    --accent-color: #3b82f6;
    --success: #10b981;
    --warning: #f59e0b;
    --danger: #ef4444;
    --font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    --glow-color: rgba(59, 130, 246, 0.5);
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: var(--font-family);
    background-color: var(--bg-color);
    color: var(--text-primary);
    line-height: 1.5;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 20px;
    background-image: radial-gradient(circle at top center, #1e293b 0%, #0f172a 100%);
    font-size: 14px;
}

.container {
    width: 100%;
    max-width: 700px; /* Reduced width */
    position: relative;
    z-index: 1;
}

/* Navbar (Glassmorphism Pill) */
.navbar {
    position: sticky;
    top: 20px;
    z-index: 100;
    background: rgba(30, 41, 59, 0.6);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 100px;
    padding: 8px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 30px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
}

.brand {
    display: flex;
    align-items: center;
    gap: 12px;
}

.brand img {
    height: 32px; /* Smaller logo */
    filter: drop-shadow(0 0 5px rgba(255, 255, 255, 0.2));
}

.brand .subtitle {
    display: none; /* Hide subtitle in navbar to save space */
}

.header-actions .btn {
    background-color: rgba(59, 130, 246, 0.1);
    border: 1px solid rgba(59, 130, 246, 0.2);
    color: var(--accent-color);
    padding: 6px 14px;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 500;
    text-decoration: none;
    transition: all 0.3s ease;
}

.header-actions .btn:hover {
    background-color: var(--accent-color);
    color: white;
    box-shadow: 0 0 10px var(--glow-color);
}

/* Global Status Banner */
.status-banner {
    background: rgba(16, 185, 129, 0.1);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(16, 185, 129, 0.2);
    border-radius: 16px; /* Slightly rounded, not full pill for main banner to differentiate */
    padding: 16px 24px;
    margin-bottom: 30px;
    display: flex;
    align-items: center;
    gap: 16px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}

/* User asked for pill shape for banner too previously, but now navbar is pill. 
   Let's keep banner pill-ish but maybe less prominent or just smaller. 
   Actually user asked for "bar en glassmophisme en forme de pilule" for the banner before.
   Now "navbar ne haut en galssmophism en forme de pilule".
   I will make the banner a bit more compact.
*/
.status-banner {
    border-radius: 50px;
    padding: 12px 24px;
}

.status-icon-large {
    background-color: var(--success);
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 15px rgba(16, 185, 129, 0.4);
    flex-shrink: 0;
}

.status-icon-large svg {
    width: 20px;
    height: 20px;
    fill: white;
}

.banner-content h2 {
    font-size: 1.1rem;
    font-weight: 600;
    color: white;
    margin-bottom: 2px;
}

.banner-content p {
    color: var(--text-secondary);
    font-size: 0.85rem;
    margin: 0;
}

/* Service Groups */
.service-group {
    margin-bottom: 24px;
}

.group-title {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--text-muted);
    margin-bottom: 10px;
    font-weight: 700;
    padding-left: 10px;
}

.service-card {
    background-color: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: 12px;
    padding: 16px 20px;
    margin-bottom: 12px;
    transition: all 0.3s ease;
}

.service-card:hover {
    border-color: var(--text-secondary);
    transform: translateY(-1px);
}

.service-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
}

.service-name {
    font-size: 1rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 10px;
    color: white;
}

.service-tag {
    font-size: 0.65rem;
    padding: 2px 8px;
    border-radius: 12px;
    background-color: rgba(59, 130, 246, 0.1);
    color: var(--accent-color);
    border: 1px solid rgba(59, 130, 246, 0.2);
    font-weight: 600;
    text-transform: uppercase;
}

.service-status {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--success);
    background-color: rgba(16, 185, 129, 0.1);
    padding: 4px 10px;
    border-radius: 12px;
    border: 1px solid rgba(16, 185, 129, 0.2);
}

.pulse-dot {
    width: 8px;
    height: 8px;
    background-color: var(--success);
    border-radius: 50%;
    box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.7);
    animation: pulse-green 2s infinite;
}

@keyframes pulse-green {
    0% {
        transform: scale(0.95);
        box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.7);
    }
    70% {
        transform: scale(1);
        box-shadow: 0 0 0 6px rgba(16, 185, 129, 0);
    }
    100% {
        transform: scale(0.95);
        box-shadow: 0 0 0 0 rgba(16, 185, 129, 0);
    }
}

/* Metrics Grid */
.metrics-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1px;
    background-color: var(--card-border);
    border-radius: 8px;
    overflow: hidden;
    margin-top: 12px;
}

.metric-item {
    background-color: rgba(15, 23, 42, 0.5);
    padding: 10px 16px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.metric-label {
    font-size: 0.8rem;
    color: var(--text-secondary);
}

.metric-value {
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--text-primary);
    font-variant-numeric: tabular-nums;
}

/* Uptime Bar */
.uptime-history {
    margin-top: 16px;
}

.uptime-label {
    display: flex;
    justify-content: space-between;
    font-size: 0.7rem;
    color: var(--text-muted);
    margin-bottom: 6px;
    font-weight: 500;
}

.uptime-bars {
    display: flex;
    gap: 2px;
    height: 24px;
}

.bar {
    flex: 1;
    background-color: var(--success);
    border-radius: 2px;
    opacity: 0.6;
    transition: all 0.2s ease;
    cursor: pointer;
    position: relative;
}

.bar:hover {
    opacity: 1;
    transform: scaleY(1.2);
    box-shadow: 0 0 10px rgba(16, 185, 129, 0.5);
    z-index: 10;
}

/* Tooltip for bars */
.bar::before {
    content: attr(title);
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%) translateY(-10px);
    background-color: #0f172a;
    color: white;
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 0.7rem;
    white-space: nowrap;
    opacity: 0;
    visibility: hidden;
    transition: all 0.2s;
    border: 1px solid var(--card-border);
    pointer-events: none;
    box-shadow: 0 4px 6px rgba(0,0,0,0.3);
}

.bar:hover::before {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(-5px);
}

/* Footer */
footer {
    margin-top: 40px;
    border-top: 1px solid var(--card-border);
    padding-top: 20px;
    width: 100%;
    text-align: center;
    color: var(--text-muted);
    font-size: 0.8rem;
}

.footer-links {
    display: flex;
    justify-content: center;
    gap: 20px;
    margin-bottom: 10px;
}

.footer-links a {
    color: var(--text-secondary);
    text-decoration: none;
    transition: color 0.2s;
    font-weight: 500;
}

.footer-links a:hover {
    color: var(--accent-color);
}

@media (max-width: 640px) {
    .navbar {
        padding: 8px 16px;
    }
    
    .status-banner {
        flex-direction: column;
        text-align: center;
        padding: 16px;
        border-radius: 20px;
    }
    
    .service-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }
    
    .service-status {
        width: 100%;
        justify-content: center;
    }
}