/* Custom CSS to reduce top bar height and sidebar width */

/* ========== Reduce Sidebar Width ========== */
/* Change sidebar width from 250px to 200px */
:root {
    --vz-vertical-menu-width: 200px !important;
}

/* ========== Reduce Top Bar Height ========== */

/* Reduce navbar header height from 70px to 50px */
.navbar-header {
    height: 50px !important;
}

/* Reduce header item height from 70px to 50px */
.header-item {
    height: 50px !important;
}

/* Reduce logo line-height from 70px to 50px */
.logo {
    line-height: 50px !important;
}

/* Adjust page content padding-top to match new topbar height */
.page-content {
    padding-top: calc(50px + 1.5rem) !important;
}

/* Adjust app-content margin-top */
.app-content .content {
    margin-top: 50px !important;
}

/* Adjust navbar-menu padding for small sidebar */
:is([data-layout=vertical],[data-layout=semibox])[data-sidebar-size=sm] .navbar-menu {
    padding-top: 50px !important;
}

/* Adjust navbar-menu top position for detached layout */
:is([data-layout=vertical],[data-layout=semibox])[data-layout-style=detached] .navbar-menu {
    top: calc(50px + 1.5rem) !important;
}

/* Adjust horizontal layout navbar-menu margin-top */
[data-layout=horizontal] .navbar-menu {
    margin-top: 50px !important;
}

/* Adjust horizontal layout page-content margin-top */
@media (min-width:1024.1px) {
    [data-layout=horizontal] .page-content {
        margin-top: 50px !important;
    }
}

/* Adjust twocolumn layout navbar-nav height */
[data-layout=twocolumn] .app-menu .navbar-nav {
    height: calc(100vh - 50px) !important;
}

/* Adjust semibox layout page-content padding */
@media (min-width:1440px) {
    [data-layout=semibox] .page-content {
        padding-top: calc(50px + 1.5rem * 2) !important;
    }
}