/* Cloud-like curved header with multiple waves */
.cloud-header-svg {
    position: relative !important;
    overflow: visible;
    background: linear-gradient(to top, #6c73aa 10%, #1c1572, #03e8ff1d);
}

    .cloud-header-svg::after {
        content: '';
        display: block;
        position: absolute;
        bottom: -10px;
        left: 0;
        width: 100%;
        height: 15px;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 15' preserveAspectRatio='none'%3E%3Cdefs%3E%3ClinearGradient id='headerGradient' x1='0%25' y1='0%25' x2='0%25' y2='100%25'%3E%3Cstop offset='0%25' style='stop-color:%236c73aa;stop-opacity:1' /%3E%3Cstop offset='100%25' style='stop-color:%23c8cfe8;stop-opacity:0.3' /%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M0,0 L0,10 Q100,0 200,10 T400,10 T600,10 T800,10 T1000,10 T1200,10 L1200,0 Z' fill='url(%23headerGradient)'/%3E%3C/svg%3E");
        background-size: cover;
        background-repeat: no-repeat;
        z-index: -1;
        pointer-events: none;
    }

/* Style the sidebar toggle button to match the RadzenButton hover effect */
.rz-sidebar-toggle {
    position: relative !important;
    border-radius: 4px !important;
    transition: background-color 0.3s ease !important;
}

    .rz-sidebar-toggle::before {
        content: '' !important;
        position: absolute !important;
        top: 50% !important;
        left: 50% !important;
        width: 100% !important;
        height: 100% !important;
        transform: translate(-50%, -50%) !important;
        background-color: transparent !important;
        border-radius: 4px !important;
        transition: background-color 0.3s ease !important;
    }

    .rz-sidebar-toggle:hover::before {
        background-color: rgba(255, 255, 255, 0.01) !important;
    }

    .rz-sidebar-toggle:active::before {
        background-color: rgba(255, 255, 255, 0.05) !important;
    }

/* Ground-like curved footer */
.ground-footer-svg {
    position: relative !important;
    overflow: visible;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: 2em !important;
    background: linear-gradient(to bottom, #c7e5c3 20%, #8f8b86);
}

    .ground-footer-svg::before {
        content: '';
        display: block;
        position: absolute;
        top: -10px;
        left: 0;
        width: 100%;
        height: 10px;
        background: #c7e5c3;
        border-radius: 50% 50% 0 0 / 100% 100% 0 0;
        z-index: 10;
        pointer-events: none;
    }