/* ================================
   APPLICATION LAYOUT
================================ */

.app-wrapper {
    display: flex;
    min-height: 100vh;
    background: #f4f7fb;
}

/* ================================
   SIDEBAR
================================ */

.sidebar {
    width: 260px;
    min-width: 260px;
    background: #1f2937;
    color: #fff;
    display: flex;
    flex-direction: column;
    transition: all .3s ease;
}

.sidebar-header {
    background: #111827;
}

.sidebar .nav-link {
    color: #cfd8dc;
    padding: 14px 20px;
    font-size: 15px;
    transition: .25s;
    border-left: 4px solid transparent;
}

    .sidebar .nav-link:hover {
        background: #2d3748;
        color: #fff;
    }

    .sidebar .nav-link.active {
        background: #0d6efd;
        color: #fff;
        border-left: 4px solid #20c997;
    }

.sidebar-footer {
    margin-top: auto;
}

/* ================================
   MAIN AREA
================================ */

.main-wrapper {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.page-content {
    flex: 1;
    padding: 25px;
}

/* ================================
   NAVBAR
================================ */

.navbar {
    position: sticky;
    top: 0;
    z-index: 1030;
    min-height: 65px;
}

/* ================================
   FOOTER
================================ */

.footer {
    background: #fff;
    border-top: 1px solid #dee2e6;
}

/* ================================
   SIDEBAR COLLAPSE
================================ */

.sidebar-collapsed .sidebar {
    width: 80px;
    min-width: 80px;
}

    .sidebar-collapsed .sidebar h4,
    .sidebar-collapsed .sidebar small,
    .sidebar-collapsed .sidebar .nav-link {
        text-align: center;
    }

    .sidebar-collapsed .sidebar .nav-link {
        font-size: 0;
    }

        .sidebar-collapsed .sidebar .nav-link i {
            font-size: 20px;
            margin-right: 0 !important;
        }

    .sidebar-collapsed .sidebar .btn {
        font-size: 0;
    }

        .sidebar-collapsed .sidebar .btn i {
            font-size: 20px;
            margin-right: 0 !important;
        }

/* ================================
   MOBILE
================================ */

@media(max-width:992px) {

    .sidebar {
        position: fixed;
        left: -260px;
        top: 0;
        bottom: 0;
        z-index: 1050;
    }

        .sidebar.show {
            left: 0;
        }

    .page-content {
        padding: 15px;
    }
}

/* ================================
   ANIMATION
================================ */

.sidebar,
.main-wrapper {
    transition: all .3s ease;
}