/**
 * Desktop left sidebar hide/show.
 * Scope: viewport >= 769px, and not the mobile/APK or coarse-tablet shell.
 * 390px layout, bottom nav, and the header sub-nav scrollbar fix stay as they are.
 *
 * Hidden state is the html.desktop-sidebar-hidden class (set before first paint).
 * Agenda / Persetujuan stay reachable by expanding the panel. While hidden, the
 * header toggle shows a dot when either badge count is non-zero.
 */

@media (min-width: 769px) {
    body:not(.device-mobile):not(.device-tablet) #main-app.dashboard-container {
        transition: grid-template-columns 160ms ease;
    }

    body:not(.device-mobile):not(.device-tablet) #main-app .app-sidebar {
        transition: min-width 160ms ease, width 160ms ease, padding 160ms ease, opacity 160ms ease, border-color 160ms ease;
    }

    html.desktop-sidebar-hidden body:not(.device-mobile):not(.device-tablet) #main-app.dashboard-container {
        grid-template-columns: 0px minmax(0, 1fr) !important;
    }

    html.desktop-sidebar-hidden body:not(.device-mobile):not(.device-tablet) #main-app .app-sidebar {
        min-width: 0 !important;
        width: 0 !important;
        max-width: 0 !important;
        padding: 0 !important;
        margin: 0 !important;
        border-width: 0 !important;
        gap: 0 !important;
        overflow: hidden !important;
        opacity: 0;
        pointer-events: none;
    }

    body:not(.device-mobile):not(.device-tablet) #main-app .desktop-sidebar-toggle {
        display: inline-flex !important;
        position: relative;
        flex: 0 0 auto;
        align-items: center;
        justify-content: center;
        width: 40px;
        height: 40px;
        min-width: 40px;
        min-height: 40px;
        margin: 0 10px 0 0;
        padding: 0;
        border: 1px solid rgba(255, 255, 255, 0.28);
        border-radius: 8px;
        background: rgba(255, 255, 255, 0.1);
        color: #ffffff;
        box-shadow: none;
        cursor: pointer;
        line-height: 1;
    }

    body:not(.device-mobile):not(.device-tablet) #main-app .desktop-sidebar-toggle:hover {
        background: rgba(255, 255, 255, 0.18);
        color: #ffffff;
    }

    body:not(.device-mobile):not(.device-tablet) #main-app .desktop-sidebar-toggle:focus-visible {
        outline: 3px solid #ffffff;
        outline-offset: 2px;
    }

    body:not(.device-mobile):not(.device-tablet) #main-app .desktop-sidebar-toggle i {
        font-size: 20px;
        color: inherit;
        line-height: 1;
    }

    /* i.ph { display: inline-block } outranks a single class, so pin these. */
    #main-app .desktop-sidebar-toggle .desktop-sidebar-toggle-icon-closed {
        display: none !important;
    }

    html.desktop-sidebar-hidden #main-app .desktop-sidebar-toggle .desktop-sidebar-toggle-icon-open {
        display: none !important;
    }

    html.desktop-sidebar-hidden #main-app .desktop-sidebar-toggle .desktop-sidebar-toggle-icon-closed {
        display: inline-block !important;
    }

    html.desktop-sidebar-hidden body:not(.device-mobile):not(.device-tablet) #main-app .desktop-sidebar-toggle[data-has-badges="true"] .desktop-sidebar-toggle-dot {
        display: block;
        position: absolute;
        top: 6px;
        right: 6px;
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background: #d65045;
        box-shadow: 0 0 0 2px #16324f;
        pointer-events: none;
    }
}

.desktop-sidebar-toggle-dot {
    display: none;
}

body.device-mobile #desktop-sidebar-toggle,
body.device-tablet #desktop-sidebar-toggle {
    display: none !important;
}

@media (max-width: 768px) {
    #desktop-sidebar-toggle {
        display: none !important;
    }
}

@media (min-width: 769px) and (prefers-reduced-motion: reduce) {
    body:not(.device-mobile):not(.device-tablet) #main-app.dashboard-container,
    body:not(.device-mobile):not(.device-tablet) #main-app .app-sidebar {
        transition: none !important;
    }
}