.connectivity-banner {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 10001;
    display: none;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 10px 20px;
    font-size: 0.9em;
    font-weight: 600;
}

.connectivity-banner.show {
    display: flex;
}

/* Push sidebar and body content down when banner is visible */
.connectivity-banner.show ~ .side-menu {
    top: 40px;
    height: calc(100vh - 40px);
}

.connectivity-banner.show ~ .mobile-header {
    top: 40px;
}

body.has-banner {
    padding-top: 60px;
}

@media (max-width: 768px) {
    body.has-banner {
        /* JS dynamically sets exact padding-top based on banner height */
    }
}

.connectivity-banner.warning {
    background: #78350f;
    color: #fef3c7;
    border-bottom: 2px solid #f59e0b;
}

.connectivity-banner.success {
    background: #064e3b;
    color: #d1fae5;
    border-bottom: 2px solid #10b981;
}

.connectivity-banner.critical {
    background: #7f1d1d;
    color: #fecaca;
    border-bottom: 2px solid #ef4444;
}

.connectivity-banner.info {
    background: #1e3a5f;
    color: #bfdbfe;
    border-bottom: 2px solid #3b82f6;
}

.connectivity-banner .connectivity-message a {
    color: #ffffff;
    font-weight: 600;
    text-decoration: underline;
}
.connectivity-banner .connectivity-message a:hover {
    text-decoration: none;
}