/* Tanzania waving flag background for demo and dashboards */
html, body {
    min-height: 100%;
}

body {
    position: relative;
    background: transparent !important;
}

body::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -9999;
    pointer-events: none;
    opacity: 0.13;
    background:
        linear-gradient(145deg,
            #1eb53a 0 38%,
            #fcd116 38% 42%,
            #000000 42% 58%,
            #fcd116 58% 62%,
            #00a3dd 62% 100%);
    background-size: 220% 220%;
    animation: tzFlagWaveGlobal 10s ease-in-out infinite;
}

body::after {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -9998;
    pointer-events: none;
    background:
        radial-gradient(circle at 85% 8%, rgba(20,181,176,.18), transparent 26%),
        linear-gradient(135deg, rgba(255,255,255,.94), rgba(239,249,255,.92), rgba(247,255,251,.94));
}

@keyframes tzFlagWaveGlobal {
    0% {
        background-position: 0% 45%;
        transform: scale(1) skewY(0deg);
        filter: saturate(1);
    }
    25% {
        background-position: 45% 52%;
        transform: scale(1.018) skewY(-0.6deg);
        filter: saturate(1.08);
    }
    50% {
        background-position: 100% 55%;
        transform: scale(1.012) skewY(0.6deg);
        filter: saturate(1.04);
    }
    75% {
        background-position: 45% 50%;
        transform: scale(1.018) skewY(-0.5deg);
        filter: saturate(1.08);
    }
    100% {
        background-position: 0% 45%;
        transform: scale(1) skewY(0deg);
        filter: saturate(1);
    }
}

/* Make cards/content readable above the animated flag */
.card,
.panel,
.dashboard-card,
.stat-card,
.sidebar-card,
.main-content,
.content-wrapper,
.page-content,
.table,
.modal-content {
    backdrop-filter: blur(2px);
}

/* Keep sidebars/navs clean */
.sidebar,
.side,
nav,
.navbar,
.topbar,
header {
    position: relative;
    z-index: 2;
}

/* Logo size control */
.demo-brand-logo {
    width: 42px !important;
    height: 42px !important;
    max-width: 42px !important;
    max-height: 42px !important;
    object-fit: contain;
}