/* App Layout */
html,
body{
    height:100%;
    margin:0;
    overflow:hidden;
}

.app{
    display:flex;
    height:100vh;
}

/* Sidebar */
.sidebar{
    width:260px;
    height:100vh;
    position:fixed;
    top:0;
    left:0;
    background:#fff;
    border-right:1px solid #e5e5e5;
    overflow-y:auto;
    overflow-x:hidden;
    z-index:1000;
}

/* Main Area */
.main-content{
    margin-left:260px;
    width:calc(100% - 260px);
    height:100vh;
    display:flex;
    flex-direction:column;
}

/* Navbar */
.navbar{
    height:70px;
    flex-shrink:0;
    background:#fff;
    border-bottom:1px solid #eee;
    padding:0 22px;
    display:flex;
    align-items:center;
}

/* Page Content */
.content{
    flex:1;
    overflow-y:auto;
    overflow-x:hidden;
    padding:20px;
    background:#f8f9fc;
}

.sidebar-backdrop{display:none}

@media (max-width: 991.98px){
    .sidebar{transform:translateX(-100%);transition:transform .2s ease;box-shadow:0 0 30px rgba(15,23,42,.16)}
    body.sidebar-open .sidebar{transform:translateX(0)}
    .main-content{margin-left:0;width:100%}
    .sidebar-backdrop{position:fixed;inset:0;background:rgba(15,23,42,.42);z-index:999;border:0;padding:0}
    body.sidebar-open .sidebar-backdrop{display:block}
    .content{padding:16px}
}