/* 888 CAPITAL — FINAL SLIM APP NAVIGATION */

/* Thin sidebar at ALL window sizes */
.app-sidebar {
    width: 150px !important;
}

.app-sidebar .app-sidebar-content {
    width: 150px !important;
}

/* Seven genuinely equal vertical sections */
.app-sidebar .menu {
    width: 150px !important;
    min-height: 100% !important;
    height: 100% !important;
    display: grid !important;
    grid-template-rows: repeat(7, minmax(0, 1fr)) !important;
    padding: 10px 0 !important;
}

/* Centre one app button inside each section */
.app-sidebar .menu > .menu-item {
    width: 100% !important;
    min-height: 0 !important;
    margin: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.app-sidebar .menu > .menu-item > .menu-link {
    width: calc(100% - 12px);
    min-height: 68px;
    margin: 0 6px;
    padding: 8px 4px;
    border-radius: 9px;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px;
    text-align: center;
    transition: background-color .18s ease;
}

/* Large website-colour icons */
.app-sidebar .menu .menu-icon {
    width: auto !important;
    height: auto !important;
    margin: 0 !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
    color: rgb(60, 210, 165) !important;
}

.app-sidebar .menu .menu-icon i {
    font-size: 30px !important;
    line-height: 1 !important;
    color: rgb(60, 210, 165) !important;
}

/* White names underneath */
.app-sidebar .menu .menu-text {
    width: 100% !important;
    margin: 0 !important;
    color: #ffffff !important;
    font-size: 12px;
    line-height: 1.2;
    font-weight: 500;
    text-align: center;
}

/* Subtle app-style highlighting */
.app-sidebar .menu > .menu-item > .menu-link:hover {
    background: rgba(60, 210, 165, 0.08);
}

.app-sidebar .menu > .menu-item.active > .menu-link {
    background: rgba(60, 210, 165, 0.13);
}

/* Wide Mac layout: page begins immediately after thin sidebar */
@media (min-width: 768px) {
    .app-content {
        margin-left: 150px !important;
    }
}

/* Narrow Mac window / mobile overlay */
@media (max-width: 767.98px) {
    .app-content {
        margin-left: 0 !important;
    }
}

/* 888 UNIVERSAL DESKTOP COLLAPSE V2 */

@media (min-width: 768px) {

    .app .app-sidebar {
        transition: transform .22s ease !important;
    }

    .app .app-content {
        transition: margin-left .22s ease !important;
    }

    .app.app-sidebar-collapsed .app-sidebar {
        width: 150px !important;
        transform: translateX(-150px) !important;
    }

    .app.app-sidebar-collapsed .app-content {
        margin-left: 0 !important;
    }

    .app:not(.app-sidebar-collapsed) .app-sidebar {
        transform: translateX(0) !important;
    }

    .app:not(.app-sidebar-collapsed) .app-content {
        margin-left: 150px !important;
    }
}