/* Critical CSS to prevent Flash of Unstyled Content (FOUC) */

/* Hide content until styles are loaded, but with a more reliable mechanism */
.js .no-fouc {
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out;
}

/* Show content when styles are loaded */
.js.fonts-loaded .no-fouc {
    opacity: 1;
    visibility: visible;
}

/* Ensure admin areas become visible even if class changes don't apply */
.admin-sidebar,
.main-content {
    opacity: 1 !important;
    visibility: visible !important;
    transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out;
}

/* Basic structural CSS to ensure content doesn't jump during render */
body {
    margin: 0;
    padding: 0;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

.navbar {
    background-color: #fff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    height: 72px;
    position: sticky;
    top: 0;
    z-index: 1000;
}

.container-xl {
    width: 100%;
    padding-right: 15px;
    padding-left: 15px;
    margin-right: auto;
    margin-left: auto;
}

@media (min-width: 1200px) {
    .container-xl {
        max-width: 1140px;
    }
}

.navbar-brand {
    font-weight: bold;
    font-size: 1.5rem;
    color: #4d6baa;
    text-decoration: none;
}

.card {
    background-color: #fff;
    border-radius: 4px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    margin-bottom: 1rem;
}

/* Admin specific critical styles */
.admin-sidebar {
    background-color: #233142;
    color: #fff;
    opacity: 1 !important;
    visibility: visible !important;
}

.main-content {
    background-color: #f5f7fb;
    opacity: 1 !important;
    visibility: visible !important;
}