.layout {
    /* Sets the minimum height of the layout to fill the screen */
    min-height: 100%;
    /* Enables flexible box layout for the main layout */
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    /* Sets the direction of the layout content to vertical */
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    /* Positions the layout relative to its container */
    position: relative;
    /* Ensures the layout grows to fill available space */
    -webkit-box-flex: 1;
    -ms-flex-positive: 1;
    flex-grow: 1;
}

    .layout.has-sidebar {
        /* Sets layout direction to horizontal when a sidebar is present */
        -webkit-box-orient: horizontal;
        -webkit-box-direction: normal;
        -ms-flex-direction: row;
        flex-direction: row;
    }

    .layout .header {
        /* Adds smooth transition for width changes */
        -webkit-transition: width, 0.3s;
        transition: width, 0.3s;
        /* Defines the height of the header */
        height: 64px;
        min-height: 64px;
        /* Positions the header relative to its container */
        position: relative;
    }

    .layout .sidebar {
        /* Defines the default width of the sidebar */
        width: 280px;
        min-width: 280px;
        /* Adds smooth transitions for width, left, and right changes */
        -webkit-transition: width, left, right, 0.3s;
        transition: width, left, right, 0.3s;
    }

        .layout .sidebar.collapsed {
            /* Reduces the sidebar width when collapsed */
            width: 80px;
            min-width: 80px;
        }

@media (max-width: 480px) {
    .layout .sidebar.break-point-xs {
        /* Fixes the sidebar for smaller screens */
        position: fixed;
        left: -280px;
        height: 100%;
        top: 0;
        z-index: 100; /* Ensures the sidebar appears above other elements */
    }

        .layout .sidebar.break-point-xs.collapsed {
            /* Adjusts the collapsed sidebar position for smaller screens */
            left: -80px;
        }

        .layout .sidebar.break-point-xs.toggled {
            /* Adjusts toggled sidebar position for visibility */
            left: 0;
        }

            .layout .sidebar.break-point-xs.toggled ~ .overlay {
                /* Displays an overlay when sidebar is toggled */
                display: block;
            }

        .layout .sidebar.break-point-xs ~ .layout .header {
            /* Ensures the header spans the full width of the screen */
            width: 100% !important;
            -webkit-transition: none;
            transition: none;
        }
}

/*@media (max-width: 576px) {
    .layout .sidebar.break-point-sm {*/
        /* Similar to xs but for larger small devices */
        /*position: fixed;
        left: -280px;
        height: 100%;
        top: 0;
        z-index: 100;
    }

        .layout .sidebar.break-point-sm.collapsed {
            left: -80px;
        }

        .layout .sidebar.break-point-sm.toggled {
            left: 0;
        }

            .layout .sidebar.break-point-sm.toggled ~ .overlay {
                display: block;
            }

        .layout .sidebar.break-point-sm ~ .layout .header {
            width: 100% !important;
            -webkit-transition: none;
            transition: none;
        }
}*/

@media (max-width: 768px) {
    .layout .sidebar.break-point-md {
        /* Responsive design for tablets */
        position: fixed;
        left: -280px;
        height: 100%;
        top: 0;
        z-index: 100;
    }

        .layout .sidebar.break-point-md.collapsed {
            left: -80px;
        }

        .layout .sidebar.break-point-md.toggled {
            left: 0;
        }

            .layout .sidebar.break-point-md.toggled ~ .overlay {
                display: block;
            }

        .layout .sidebar.break-point-md ~ .layout .header {
            width: 100% !important;
            -webkit-transition: none;
            transition: none;
        }
}

@media (max-width: 992px) {
    .layout .sidebar.break-point-lg {
        /* Adjustments for larger screens like desktops */
        position: fixed;
        left: -280px;
        height: 100%;
        top: 0;
        z-index: 100;
    }

        .layout .sidebar.break-point-lg.collapsed {
            left: -80px;
        }

        .layout .sidebar.break-point-lg.toggled {
            left: 0;
        }

            .layout .sidebar.break-point-lg.toggled ~ .overlay {
                display: block;
            }

        .layout .sidebar.break-point-lg ~ .layout .header {
            width: 100% !important;
            -webkit-transition: none;
            transition: none;
        }
}

.layout .footer {
    /* Defines the height of the footer */
    height: 64px;
    min-height: 64px;
}

.layout .content {
    /* Makes content grow to fill the remaining space */
    -webkit-box-flex: 1;
    -ms-flex-positive: 1;
    flex-grow: 1;
}

.layout .overlay {
    /* Styles the overlay when the sidebar is toggled */
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-color: rgba(0, 0, 0, 0.3); /* Semi-transparent background */
    z-index: 99;
    display: none; /* Hidden by default */
}

.layout .sidebar-toggler {
    display: none; /* Hides the toggler for larger screens */
}

@media (max-width: 480px) {
    .layout .sidebar-toggler.break-point-xs {
        display: initial; /* Shows the toggler for small screens */
    }
}

/* RTL-specific adjustments */
.layout.rtl {
    direction: rtl; /* Sets right-to-left text direction */
}

    .layout.rtl .sidebar.break-point-xs.collapsed {
        left: auto;
        right: -80px; /* Adjusts collapsed sidebar to the right */
    }