/* Pinned rows use same markup as normal menu: ul.scrollable > li > a.side-menu__link */

.side-menu__link--hidden-source {
    display: none !important;
    pointer-events: none !important;
    visibility: hidden !important;
}

.side-menu__source-li--empty {
    display: none !important;
}

/* Pinable + pinned rows */
.side-menu__link--pinable,
.side-menu__link--pinned-item {
    position: relative;
}

.side-menu__link--pinable .side-menu__link__icon,
.side-menu__link--pinned-item .side-menu__link__icon {
    flex-shrink: 0;
}

.side-menu__link--pinable .side-menu__link__title,
.side-menu__link--pinned-item .side-menu__link__title {
    flex: 1 1 auto;
    min-width: 0;
}

.side-menu__link--pinable:hover .side-menu__link__title,
.side-menu__link--pinned-item:hover .side-menu__link__title {
    padding-right: 1.85rem;
}

/* Pin / unpin button — hidden until row hover */
.side-menu .side-menu__link--pinable > .side-menu__pin-btn,
.side-menu .side-menu__link--pinned-item > .side-menu__pin-btn {
    --pin-icon-color: #2a3220;
    position: absolute;
    right: 0.45rem;
    top: 50%;
    transform: translateY(-50%);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.85rem;
    height: 1.85rem;
    border-radius: 9999px;
    border: 1px solid rgba(255, 255, 255, 0.92);
    background: #ffffff;
    color: var(--pin-icon-color) !important;
    opacity: 0;
    visibility: hidden;
    cursor: pointer;
    transition: opacity 0.15s ease, visibility 0.15s ease, background 0.15s ease, border-color 0.15s ease, color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
    z-index: 3;
    pointer-events: none;
    box-shadow: 0 1px 6px rgba(0, 0, 0, 0.38);
}

.side-menu .side-menu__pin-icon,
.side-menu .side-menu__pin-btn svg {
    width: 0.95rem;
    height: 0.95rem;
    display: block;
    flex-shrink: 0;
}

.side-menu .side-menu__pin-btn svg,
.side-menu .side-menu__pin-btn svg path {
    stroke: currentColor !important;
    fill: none !important;
}

.side-menu .side-menu__link--pinable:hover > .side-menu__pin-btn:not(.side-menu__pin-btn--unpin) {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.side-menu .side-menu__link--pinned-item:hover > .side-menu__pin-btn--unpin,
.side-menu .side-menu__link--pinned-item > .side-menu__pin-btn--unpin:hover {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
}

.side-menu .side-menu__link--pinable:hover > .side-menu__pin-btn,
.side-menu .side-menu__link--pinned-item:hover > .side-menu__pin-btn--unpin,
.side-menu .side-menu__pin-btn:hover {
    --pin-icon-color: #141a10;
    transform: translateY(-50%) scale(1.08);
    background: #ffffff !important;
    border-color: #ffffff !important;
    color: var(--pin-icon-color) !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.45);
}

.side-menu .side-menu__link--pinned-item:hover > .side-menu__pin-btn--unpin,
.side-menu .side-menu__link--pinned-item > .side-menu__pin-btn--unpin:hover {
    --pin-icon-color: #6b5200;
    background: #fff9e6 !important;
    border-color: var(--color-primary, #d4a017) !important;
    color: var(--pin-icon-color) !important;
}

/* Collapsed sidebar */
@media (min-width: 80rem) {
    .side-menu.side-menu--collapsed:not(.side-menu--on-hover) .side-menu__pin-btn {
        display: none !important;
        opacity: 0 !important;
        visibility: hidden !important;
        pointer-events: none !important;
    }

    .side-menu.side-menu--collapsed:not(.side-menu--on-hover) .side-menu__link--pinned-item:hover > .side-menu__pin-btn--unpin {
        display: inline-flex !important;
        opacity: 1 !important;
        visibility: visible !important;
        pointer-events: auto !important;
    }
}

@media (min-width: 80rem) {
    .side-menu.side-menu--collapsed.side-menu--on-hover .side-menu__link--pinable:hover > .side-menu__pin-btn,
    .side-menu.side-menu--collapsed.side-menu--on-hover .side-menu__link--pinned-item:hover > .side-menu__pin-btn--unpin {
        display: inline-flex !important;
        opacity: 1 !important;
        visibility: visible !important;
        pointer-events: auto !important;
    }
}