/*
|--------------------------------------------------------------------------
| DIABETES PHILIPPINES
| SECRETARIAT PORTAL
| MASTER CSS
|--------------------------------------------------------------------------
*/


/*
|--------------------------------------------------------------------------
| GLOBAL
|--------------------------------------------------------------------------
*/

body {

    margin: 0;

    background: #f5f7fa;

    color: #263238;

    font-family:
        "Segoe UI",
        Arial,
        sans-serif;

    font-size: 15px;

}


/*
|--------------------------------------------------------------------------
| SIDEBAR
|--------------------------------------------------------------------------
*/

.sidebar {

    position: fixed;

    left: 0;

    top: 0;

    bottom: 0;

    width: 270px;

    background:
        linear-gradient(
            180deg,
            #8f1717 0%,
            #b71c1c 45%,
            #a51c1c 100%
        );

    color: #ffffff;

    z-index: 1000;

    display: flex;

    flex-direction: column;

    transition:
        transform 0.3s ease;

}


/*
|--------------------------------------------------------------------------
| SIDEBAR BRAND
|--------------------------------------------------------------------------
*/

.sidebar-brand {

    height: 82px;

    padding:
        15px 20px;

    display: flex;

    align-items: center;

    gap: 13px;

    border-bottom:
        1px solid
        rgba(
            255,
            255,
            255,
            0.12
        );

}


.sidebar-brand-logo {

    width: 50px;

    height: 50px;

    background: #ffffff;

    border-radius: 11px;

    padding: 5px;

    display: flex;

    align-items: center;

    justify-content: center;

}


.sidebar-brand-logo img {

    width: 100%;

    height: 100%;

    object-fit: contain;

}


.sidebar-brand-text {

    line-height: 1.15;

}


.sidebar-brand-title {

    font-size: 15px;

    font-weight: 800;

}


.sidebar-brand-subtitle {

    font-size: 11px;

    opacity: 0.70;

    margin-top: 4px;

}


/*
|--------------------------------------------------------------------------
| SIDEBAR MENU
|--------------------------------------------------------------------------
*/

.sidebar-menu {

    flex: 1;

    padding:
        20px 12px;

    overflow-y: auto;

}


.menu-section {

    font-size: 11px;

    font-weight: 700;

    letter-spacing: 1px;

    text-transform: uppercase;

    color:
        rgba(
            255,
            255,
            255,
            0.55
        );

    padding:
        13px 13px 8px;

}


/*
|--------------------------------------------------------------------------
| SIDEBAR LINKS
|--------------------------------------------------------------------------
*/

.sidebar-link {

    display: flex;

    align-items: center;

    gap: 14px;

    padding:
        13px 14px;

    margin-bottom: 4px;

    border-radius: 9px;

    color:
        rgba(
            255,
            255,
            255,
            0.82
        );

    text-decoration: none;

    font-size: 14px;

    transition:
        all 0.2s ease;

}


.sidebar-link i {

    width: 20px;

    text-align: center;

    font-size: 16px;

}


.sidebar-link:hover {

    background:
        rgba(
            255,
            255,
            255,
            0.10
        );

    color: #ffffff;

}


.sidebar-link.active {

    background: #ffffff;

    color: #b71c1c;

    font-weight: 700;

    box-shadow:
        0 5px 15px
        rgba(
            0,
            0,
            0,
            0.08
        );

}


/*
|--------------------------------------------------------------------------
| SIDEBAR FOOTER
|--------------------------------------------------------------------------
*/

.sidebar-footer {

    padding: 16px;

    border-top:
        1px solid
        rgba(
            255,
            255,
            255,
            0.10
        );

}


.sidebar-user {

    display: flex;

    align-items: center;

    gap: 11px;

}


.sidebar-user-icon {

    width: 38px;

    height: 38px;

    border-radius: 50%;

    background:
        rgba(
            255,
            255,
            255,
            0.15
        );

    display: flex;

    align-items: center;

    justify-content: center;

}


.sidebar-user-name {

    font-size: 13px;

    font-weight: 700;

}


.sidebar-user-type {

    font-size: 11px;

    opacity: 0.60;

    margin-top: 2px;

}


/*
|--------------------------------------------------------------------------
| MAIN AREA
|--------------------------------------------------------------------------
*/

.main-wrapper {

    margin-left: 270px;

    min-height: 100vh;

}


/*
|--------------------------------------------------------------------------
| TOPBAR
|--------------------------------------------------------------------------
*/

.topbar {

    height: 82px;

    background: #ffffff;

    border-bottom:
        1px solid #e9edf0;

    display: flex;

    align-items: center;

    justify-content: space-between;

    padding:
        0 32px;

    position: sticky;

    top: 0;

    z-index: 900;

}


.topbar-left {

    display: flex;

    align-items: center;

    gap: 16px;

}


.mobile-menu {

    display: none;

    border: 0;

    background: transparent;

    font-size: 22px;

    color: #455a64;

}


.page-title {

    font-size: 21px;

    font-weight: 750;

    margin: 0;

}


.page-date {

    font-size: 12px;

    color: #90a4ae;

    margin-top: 4px;

}


.topbar-right {

    display: flex;

    align-items: center;

    gap: 17px;

}


.notification-button {

    width: 42px;

    height: 42px;

    border: 0;

    border-radius: 10px;

    background: #f5f7f8;

    color: #607d8b;

    font-size: 16px;

}


.topbar-user {

    display: flex;

    align-items: center;

    gap: 11px;

}


.topbar-avatar {

    width: 42px;

    height: 42px;

    border-radius: 50%;

    background: #ffebee;

    color: #c62828;

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 17px;

}


.topbar-user-name {

    font-size: 14px;

    font-weight: 700;

}


.topbar-user-type {

    font-size: 11px;

    color: #90a4ae;

    margin-top: 2px;

}


/*
|--------------------------------------------------------------------------
| CONTENT
|--------------------------------------------------------------------------
*/

.dashboard-content {

    padding: 32px;

}


/*
|--------------------------------------------------------------------------
| RESPONSIVE
|--------------------------------------------------------------------------
*/

@media (max-width: 991px) {

    .sidebar {

        transform:
            translateX(-100%);

    }


    .sidebar.show {

        transform:
            translateX(0);

        box-shadow:
            10px 0 30px
            rgba(
                0,
                0,
                0,
                0.15
            );

    }


    .main-wrapper {

        margin-left: 0;

    }


    .mobile-menu {

        display: block;

    }

}


@media (max-width: 575px) {

    .topbar {

        padding:
            0 15px;

    }


    .dashboard-content {

        padding:
            20px 15px;

    }


    .topbar-user-info {

        display: none;

    }

}