/*
 * SERVERLON - GLOBAL CLIENT LAYOUT FIX
 * Fix fixed sidebar + fixed navbar overlap on every client page.
 * Desktop: sidebar 260px / collapsed 80px.
 * Tablet/mobile: content is full width and sidebar becomes an overlay.
 */
:root{--sl-sidebar:260px;--sl-sidebar-mini:80px;--sl-navbar:73px}
html,body{width:100%;max-width:100%;overflow-x:hidden}
body{min-width:0}
.wrapper{width:100%;min-height:100vh}

/* Fixed top navigation */
.iq-top-navbar{
    position:fixed!important;
    top:0!important;
    right:0!important;
    left:var(--sl-sidebar)!important;
    width:calc(100% - var(--sl-sidebar))!important;
    min-height:var(--sl-navbar);
    box-sizing:border-box;
    z-index:1030!important;
}
body.sidebar-main .iq-top-navbar{
    left:var(--sl-sidebar-mini)!important;
    width:calc(100% - var(--sl-sidebar-mini))!important;
}

/* Main content: always starts below navbar and outside sidebar */
.content-page,
.noti-page{
    box-sizing:border-box!important;
    margin-left:var(--sl-sidebar)!important;
    width:calc(100% - var(--sl-sidebar))!important;
    max-width:none!important;
    padding-top:var(--sl-navbar)!important;
    min-height:calc(100vh - var(--sl-navbar));
    overflow:visible!important;
}
body.sidebar-main .content-page,
body.sidebar-main .noti-page{
    margin-left:var(--sl-sidebar-mini)!important;
    width:calc(100% - var(--sl-sidebar-mini))!important;
}

/* Keep Bootstrap containers from escaping the usable viewport */
.content-page>.container,
.content-page>.container-fluid,
.noti-page>.container,
.noti-page>.container-fluid{
    box-sizing:border-box;
    max-width:100%;
}
.content-page .container-fluid,
.noti-page .container-fluid{padding-left:15px;padding-right:15px}

/* Footer follows the same layout */
.iq-footer{
    box-sizing:border-box!important;
    margin-left:var(--sl-sidebar)!important;
    width:calc(100% - var(--sl-sidebar))!important;
}
body.sidebar-main .iq-footer{
    margin-left:var(--sl-sidebar-mini)!important;
    width:calc(100% - var(--sl-sidebar-mini))!important;
}

/* Prevent cards/rows from creating a horizontal scrollbar */
.content-page .row,.noti-page .row{min-width:0}
.content-page img,.noti-page img{max-width:100%;height:auto}

/* Sidebar remains an overlay on smaller screens, never pushes content sideways */
@media (max-width:1299px){
    .iq-top-navbar,
    body.sidebar-main .iq-top-navbar{
        left:0!important;
        width:100%!important;
    }
    .content-page,
    .noti-page,
    body.sidebar-main .content-page,
    body.sidebar-main .noti-page{
        margin-left:0!important;
        width:100%!important;
        padding-top:var(--sl-navbar)!important;
    }
    .iq-footer,
    body.sidebar-main .iq-footer{
        margin-left:0!important;
        width:100%!important;
    }
}

@media (max-width:991px){
    :root{--sl-navbar:64px}
    .iq-top-navbar{min-height:64px!important;padding:12px 15px!important}
    .content-page,
    .noti-page,
    body.sidebar-main .content-page,
    body.sidebar-main .noti-page{padding-top:64px!important}
}

@media (max-width:575px){
    .content-page .container-fluid,
    .noti-page .container-fluid{padding-left:10px;padding-right:10px}
    .content-page{padding-bottom:20px}
}

/* The Cày Thuê page already has its own visual system; this class only controls layout. */
.cay-content-page{box-sizing:border-box!important;overflow:visible!important}