/* ---------------------------------------- */
/* Navigation Allgemein                     */
/* ---------------------------------------- */
header.app-desktop-nav,
header.app-mobile-nav {
    box-shadow: 0 0 8px rgba(0, 0, 0, 0.2);
    z-index: 1020; /* über Inhalt */
}

/* ---------------------------------------- */
/* Mobile Navigation                        */
/* ---------------------------------------- */

/* Icon oben, Text unten                    */
.app-mobile-nav .nav-link {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    padding: .5rem 0rem;
    font-size: .8rem;
    color: var(--tblr-body-color);
    text-align: center;
}

.app-mobile-nav .nav-link .icon {
    width: 24px;
    height: 24px;
}

.app-mobile-nav .nav-item.active .nav-link {
    color: var(--tblr-primary);
}

.app-mobile-nav .nav-item.active {
    border: 0 var(--tblr-border-style) var(--tblr-navbar-active-border-color);
    border-bottom-width: 2px;
}

/* ---------------------------------------- */
/* Mobile Darstellung der Trainings         */
/* ---------------------------------------- */
@media (max-width: 579px) {

    /* Outer row im List-Item: von einer Zeile auf zwei Zeilen umstellen */
    #workoutItems .list-group-item>.d-flex {
        flex-direction: column; 
        align-items: flex-start;
        gap: .5rem;
    }

    /* Die rechte „Kontroll“-Gruppe (ist ebenfalls .d-flex) als zweite Zeile behandeln */
    #workoutItems .list-group-item>.d-flex>.d-flex {
        width: 100%;
        padding-top: .25rem;
        justify-content: flex-start;
        gap: .5rem;
    }
}

/* ---------------------------------------- */
/* Dragable                                 */
/* ---------------------------------------- */

.drag-handle {
    cursor: grab;
    touch-action: none;
    /* Touch auf Handle = Drag, nicht Scroll */
    -webkit-user-select: none;
    user-select: none;
}

.drag-chosen {
    opacity: .4;
}

.drag-ghost {
    opacity: .2;
}