/* UNIDA Gateway Tanzania consistent flag theme */
:root{
    --unida-blue:#083b86;
    --unida-blue2:#0b63ce;
    --unida-teal:#14b5b0;
    --unida-green:#1cad6f;
    --unida-line:#d7ebf5;
}

/* Give every page a safe stacking context */
html{
    min-height:100%;
    background:#f7fbff !important;
}

body{
    min-height:100%;
    position:relative !important;
    background:transparent !important;
    isolation:isolate;
}

/* Actual animated Tanzania flag layer */
body::before{
    content:"" !important;
    position:fixed !important;
    inset:0 !important;
    z-index:-2 !important;
    pointer-events:none !important;
    opacity:.14 !important;
    background:
        linear-gradient(145deg,
            #1eb53a 0 38%,
            #fcd116 38% 42%,
            #000000 42% 58%,
            #fcd116 58% 62%,
            #00a3dd 62% 100%) !important;
    background-size:240% 240% !important;
    animation:unidaTzFlagWaveConsistent 11s ease-in-out infinite !important;
}

/* Clean readability wash */
body::after{
    content:"" !important;
    position:fixed !important;
    inset:0 !important;
    z-index:-1 !important;
    pointer-events:none !important;
    background:
        radial-gradient(circle at 86% 12%, rgba(20,181,176,.20), transparent 30%),
        linear-gradient(135deg, rgba(255,255,255,.93), rgba(240,250,255,.92), rgba(247,255,251,.93)) !important;
}

/* Wave movement */
@keyframes unidaTzFlagWaveConsistent{
    0%{
        background-position:0% 45%;
        transform:scale(1) skewY(0deg);
        filter:saturate(1);
    }
    25%{
        background-position:45% 52%;
        transform:scale(1.018) skewY(-.55deg);
        filter:saturate(1.07);
    }
    50%{
        background-position:100% 56%;
        transform:scale(1.012) skewY(.55deg);
        filter:saturate(1.04);
    }
    75%{
        background-position:45% 50%;
        transform:scale(1.018) skewY(-.45deg);
        filter:saturate(1.07);
    }
    100%{
        background-position:0% 45%;
        transform:scale(1) skewY(0deg);
        filter:saturate(1);
    }
}

/* Make common app containers transparent enough to reveal the theme */
.min-h-screen,
.bg-gray-50,
.bg-gray-100,
.bg-white,
.page,
.page-wrapper,
.wrapper,
.app,
.app-layout,
.main-wrapper,
.content-wrapper,
.page-content,
.main-content,
.auth-page,
.auth-wrapper,
.login-page,
.register-page,
.dashboard-page{
    background:transparent !important;
}

/* Keep white cards professional and readable */
.card,
.panel,
.stat,
.stat-card,
.module,
.quick-card,
hero-card,
.form-card,
.auth-card,
.login-card,
.register-card,
.modal-content,
.dropdown-menu,
table,
.table,
.white-card,
[class*="card"],
[class*="panel"]{
    background-color:rgba(255,255,255,.93) !important;
    border-color:rgba(215,235,245,.95) !important;
    backdrop-filter:blur(2px);
}

/* Sidebars remain strong and readable */
.sidebar,
.side,
nav.sidebar,
aside.sidebar{
    background:linear-gradient(180deg,#083b86,#0c56ad) !important;
}

/* Header/topbar/nav stay clean */
header,
nav,
.navbar,
.topbar,
.demo-topbar{
    position:relative !important;
    z-index:5 !important;
}

/* Unified logo size */
.demo-brand-logo,
.brand-logo,
.logo img,
.navbar-brand img,
.auth-logo img,
.login-logo img,
.register-logo img,
header img[src*="logo"],
header img[src*="unida"],
header img[src*="gateway"]{
    width:42px !important;
    height:42px !important;
    max-width:42px !important;
    max-height:42px !important;
    object-fit:contain !important;
    border-radius:12px !important;
}

/* Final demo auth navbar consistency */
.site-header .brand {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
}

.site-header .brand .demo-brand-logo {
    width: 42px !important;
    height: 42px !important;
    max-width: 42px !important;
    max-height: 42px !important;
    object-fit: contain !important;
}

.site-header .desktop-nav {
    display: flex;
    gap: 18px;
    align-items: center;
    flex-wrap: wrap;
}

.site-header .desktop-nav a {
    font-weight: 800;
    color: #083b86;
}

.site-header .brand-text strong {
    color: #083b86;
}

.site-header .brand-text small {
    color: #0a9b68;
    font-weight: 800;
}