/* UNISSULA SDG Manager - Sidebar v1.2.4 */
.usm-sdg-sidebar,.usm-sdg-sidebar *,.usm-sdg-sidebar *::before,.usm-sdg-sidebar *::after{box-sizing:border-box}
.usm-sdg-sidebar{display:flex;flex-direction:column;gap:10px;width:100%;max-width:270px}
.usm-sdg-sidebar.is-sticky{position:sticky;top:110px}
.usm-sdg-sidebar-item,.usm-sdg-sidebar-item:visited{--menu-text:#173038;position:relative;display:flex;align-items:center;gap:12px;width:100%;min-height:76px;padding:7px 12px 7px 7px;overflow:hidden;background:#fff;color:var(--menu-text);border:1px solid #e2e8e9;border-radius:14px;text-decoration:none!important;box-shadow:none;transition:background-color .24s ease,border-color .24s ease,color .24s ease,transform .24s ease,box-shadow .24s ease}
.usm-sdg-sidebar-badge{position:absolute;top:6px;left:6px;z-index:3;display:inline-flex;align-items:center;justify-content:center;min-width:21px;height:21px;padding:0 6px;background:var(--sdg-color);color:#fff;border:2px solid #fff;border-radius:999px;font-size:9px;font-weight:700;line-height:1;box-shadow:0 3px 8px rgba(0,0,0,.10);transition:background-color .2s ease,color .2s ease,border-color .2s ease}
.usm-sdg-sidebar-icon{display:flex;align-items:center;justify-content:center;flex:0 0 60px;width:60px;height:60px;overflow:hidden;background:var(--sdg-color);color:#fff;border-radius:9px;font-weight:700}
.usm-sdg-sidebar-icon img{display:block;width:100%;height:100%;object-fit:contain}
.usm-sdg-sidebar-copy{display:block;min-width:0;flex:1;opacity:1;transform:none}
.usm-sdg-sidebar-copy strong,.usm-sdg-sidebar-copy small{display:block}
.usm-sdg-sidebar-copy strong{margin:0;color:inherit;font-size:13px;font-weight:400;line-height:1.35;transition:color .2s ease,font-weight .2s ease}
.usm-sdg-sidebar-copy small{margin-top:4px;color:#75858a;font-size:10px;font-weight:400;line-height:1.35;transition:color .2s ease}
.usm-sdg-sidebar-item:hover,.usm-sdg-sidebar-item:focus-visible,.usm-sdg-sidebar-item.is-active{background:var(--sdg-color);border-color:var(--sdg-color);color:#fff;transform:translateY(-1px);box-shadow:0 9px 20px rgba(17,42,49,.11)}
.usm-sdg-sidebar-item:hover .usm-sdg-sidebar-badge,.usm-sdg-sidebar-item:focus-visible .usm-sdg-sidebar-badge,.usm-sdg-sidebar-item.is-active .usm-sdg-sidebar-badge{background:#fff;color:var(--sdg-color);border-color:rgba(255,255,255,.9)}
.usm-sdg-sidebar-item:hover .usm-sdg-sidebar-copy strong,.usm-sdg-sidebar-item:hover .usm-sdg-sidebar-copy small,.usm-sdg-sidebar-item:focus-visible .usm-sdg-sidebar-copy strong,.usm-sdg-sidebar-item:focus-visible .usm-sdg-sidebar-copy small,.usm-sdg-sidebar-item.is-active .usm-sdg-sidebar-copy strong,.usm-sdg-sidebar-item.is-active .usm-sdg-sidebar-copy small{color:#fff}
.usm-sdg-sidebar-item.is-active .usm-sdg-sidebar-copy strong{font-weight:700}
.usm-sdg-sidebar-item:not(.is-active):hover .usm-sdg-sidebar-copy strong,.usm-sdg-sidebar-item:not(.is-active):focus-visible .usm-sdg-sidebar-copy strong{font-weight:400}
.usm-sdg-sidebar-item.is-active::after{content:"";position:absolute;top:10px;right:0;bottom:10px;width:4px;background:#fff;border-radius:999px 0 0 999px}
.usm-sdg-sidebar-item:focus-visible{outline:3px solid color-mix(in srgb,var(--sdg-color) 40%,#fff);outline-offset:2px}
@media(max-width:900px){.usm-sdg-sidebar,.usm-sdg-sidebar.is-sticky{position:static;max-width:none}.usm-sdg-sidebar-item,.usm-sdg-sidebar-item:visited{min-height:72px}.usm-sdg-sidebar-icon{flex-basis:56px;width:56px;height:56px}.usm-sdg-sidebar-copy strong{font-size:12px}.usm-sdg-sidebar-copy small{font-size:9px}}
@media(max-width:600px){.usm-sdg-sidebar{gap:8px}.usm-sdg-sidebar-item,.usm-sdg-sidebar-item:visited{min-height:68px;padding:6px 10px 6px 6px;border-radius:12px}.usm-sdg-sidebar-icon{flex-basis:52px;width:52px;height:52px;border-radius:8px}.usm-sdg-sidebar-badge{top:5px;left:5px;min-width:19px;height:19px;font-size:8px}.usm-sdg-sidebar-copy strong{font-size:12px}}
@media(prefers-reduced-motion:reduce){.usm-sdg-sidebar-item,.usm-sdg-sidebar-badge{transition:none!important}}

/* Mobile/tablet: compact seperti v1.2.1 dan horizontal scroll */
@media (max-width: 900px) {
    .usm-sdg-sidebar,
    .usm-sdg-sidebar.is-sticky {
        position: static !important;
        display: flex !important;
        flex-direction: row !important;
        gap: 10px !important;

        width: 100% !important;
        max-width: none !important;

        overflow-x: auto !important;
        overflow-y: hidden !important;

        padding: 2px 2px 10px !important;

        scroll-snap-type: x proximity;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: thin;
    }

    .usm-sdg-sidebar-item,
    .usm-sdg-sidebar-item:visited,
    .usm-sdg-sidebar-item:hover,
    .usm-sdg-sidebar-item:focus-visible,
    .usm-sdg-sidebar-item.is-active {
        flex: 0 0 72px !important;

        width: 72px !important;
        min-width: 72px !important;
        max-width: 72px !important;
        min-height: 72px !important;

        padding: 5px !important;
        transform: none !important;

        border-radius: 12px !important;

        scroll-snap-align: start;
    }

    .usm-sdg-sidebar-icon {
        flex: 0 0 60px !important;

        width: 60px !important;
        min-width: 60px !important;
        max-width: 60px !important;
        height: 60px !important;

        border-radius: 8px !important;
    }

    .usm-sdg-sidebar-copy {
        display: none !important;
    }

    .usm-sdg-sidebar-badge {
        top: 5px !important;
        left: 5px !important;

        min-width: 20px !important;
        height: 20px !important;

        padding: 0 5px !important;

        font-size: 9px !important;
    }

    .usm-sdg-sidebar-item.is-active {
        background: var(--sdg-color) !important;
        border-color: var(--sdg-color) !important;

        outline: 2px solid var(--sdg-color);
        outline-offset: 1px;
    }

    .usm-sdg-sidebar-item.is-active::after {
        display: none !important;
    }

    .usm-sdg-sidebar-item.is-active .usm-sdg-sidebar-badge {
        background: #ffffff !important;
        color: var(--sdg-color) !important;
    }

    .usm-sdg-sidebar-item:hover {
        width: 72px !important;
    }
}

@media (max-width: 600px) {
    .usm-sdg-sidebar {
        gap: 8px !important;
        padding-bottom: 8px !important;
    }
}