/*
Sidenav Styling
*/
@import "variables.css";

.t3m-grid {
    display: grid;
    transition: grid-template-columns 0.3s var(--timeline-animate);
    position: relative;
    overflow: hidden;

    /* Button */
    .toggle-panel {
        position: absolute;
        top: 0;
        right: 0;
        z-index: 1100;
        border: none;
        border-radius: 0;
        background: var(--dark-gray);
        color: #fff;
        font-size: 1.4rem;
        line-height: 1;
        cursor: pointer;
        width: var(--sidebar-padding);
        height: 100%;
        transition: background .2s var(--timeline-animate);

        &:focus {
            outline: 0;
        }
    }
    .toggle-panel:hover {
        background: var(--highlight);
    }

    div#classificationTopic {
        background-image: none;
    }

    /* Content Element */
    .results {
        padding: 0;
        min-height: 75vh;
        max-width: 100vw;
        padding-left: var(--panel-w);
        transition: padding-left 0.35s var(--timeline-animate);

        em {
            background-color: var(--highlight);
            color: var(--cultured);
            padding: 0 0.25rem;
        }

        /* Toolbar mir View Change, Count, Sorting, Img Filter */
        #sidenav-toolbar {
            padding: 0.5rem 3rem;
            background-color: var(--beige);

            > div {
                gap: 10px
            }

            .found_block .found_wrap, .found_wrap {
                display: initial;
                .badge {
                    font-size: 100%;
                    padding: 0;
                }
            }

            .joListandtable.nav {
                flex-wrap: nowrap;
            }

            .imageSwitch {
                align-items: center;
            }
            .image_only_label {

                background-image: url(/typo3conf/ext/jo_content/Resources/Public/Images/sprite_portal_black.svg);
                background-position: -647px -14px;
                background-size: 1270px;
                font-size: 0;
                height: 40px;
                width: 40px;
                &.opacity {
                    opacity: 0.25;
                }
            }
        }

        .found_block .found_wrap, .found_wrap {
            display: initial;



            .badge {
                font-size: 100%;
                padding: 0;
            }
        }

        /* Content mit Items */
        /* Grid view Container */
        .grid_inner_wrap {
            padding: 3rem
        }


        .grid-link {
            background-color: var(--beige);

            &:hover {
                background-color: var(--search-tile-hover);
            }
        }

        /* List view Container */
        .joListNotableContainer {
            padding: 0 3rem 3rem 3rem

        }

        @media (max-width: 992px) {
            #sidenav-toolbar {
                padding: 0.5rem 1rem;
            }

            .search_mask_outer_wrap {
                padding: 1rem 1rem 1rem;
            }

            .grid_inner_wrap {
                padding: 1rem
            }
        }

    }

    .t3m_controls {
        gap: 10px;
    }

    /* Filter, Suchfeld und Timelime über dem Content Grid */

    .search_mask_outer_wrap {
        align-items: revert;

        &:not(:has(.sidenav-search-params .active)) {
            justify-content: center;

            .sidenav-search-params {
                display: none;
            }
        }
    }

    .sidenav-search-params {

        h3 {
            color: var(--charcoal);
            font-size: 16px;
            margin: 0 0 1rem;
        }

        .joFacettedSearch {
            /*white-space: nowrap;*/
            color: var(--charcoal);
            padding: 0;

            span {
                color: var(--charcoal);
                font-size: 16px;
            }

            .img_wrap + span {
                &:first-of-type {
                    display: none;
                }
            }

            .joFacetteItem {
                font-size: 16px;
            }

            .joAndOrSwitch {
                .slider {
                    background-color: var(--highlight);
                }
                span {
                    color: var(--white);
                }
            }


        }

    }

    .joSearchControl {
        display: flex;
        flex-wrap: wrap;
        justify-content: flex-start;
        gap: 10px;

        .img_wrap {

            margin-right: 0;
            transform: scale(0.75);


            .joSprite {
                cursor: help;
                background-image: url(/typo3conf/ext/jo_content/Resources/Public/Images/sprite_portal_black.svg);
            }
        }

    }

    .joFacettedSearch {
        position: relative;
        border: 0;

        a .img-container {
            background-color: var(--highlight);
        }
    }

    /* Linie nur, wenn rechts direkt ein weiteres Element in derselben Zeile steht */
    .joFacettedSearch:has(+ .joFacettedSearch)::after {
        content: "";
        position: absolute;
        right: -5px; /* halber gap */
        top: 0;
        bottom: 0;
        width: 1px;
        background: #ccc;
    }

    .search_mask_outer_wrap {
        background-color: var(--cultured);
        padding: 3rem 3rem 1rem;
    }

    /* Timeline / Slider */

    .joPageTimeline {
        padding: 1rem 0 0;

        .joTimelineHeader {
            display: flex;
            margin-bottom: 0;
            justify-content: space-between;
            align-items: center;
            transition-delay: 0.3s;
            transition: transform 0.6s var(--timeline-animate);

            &.collapsed {
                margin-bottom: 1rem;
            }

            .toggle-btn {
                cursor: pointer;
                background: none;
                border: none;
                font-weight: bold;
                transition: transform 0.3s;
                font-size: 1.6rem;

                &:focus {
                    outline: 0;
                }

                span {
                    margin-right: 5px;
                    display: inline-block;
                    transform: rotate(180deg);
                    transition: transform 0.3s var(--timeline-animate);
                }
            }
            .toggle-btn.collapsed span{
                transform: rotate(0deg);
            }
        }

        .joTimelineBody {
            .chart_wrap {
                opacity: 1;
                max-height: 120px;
                overflow: hidden;
                transition: max-height 0.6s var(--timeline-animate), opacity 0.6s var(--timeline-animate);

                &.collapsed {
                    opacity: 0;
                    max-height: 0; /* genug, um Slider + Jahreszahlen sichtbar zu halten */
                }
            }

            .joObjekteTimeline {
                min-height: 3px;
                max-height: 3px;
            }

            .joNoTime {
                margin: 1rem 0;
            }

            .joSameYears {
                margin: 10px 0 10px;
            }

            .joStartSlider, .joEndSlider {
                background-color: var(--charcoal);
                border-color: var(--gray);

                &.active {
                    background-color: var(--highlight);
                    border-color: var(--charcoal);
                }
            }




            .joPageTimelineScale {

                .joObjekteTimelineStartJahr, .joObjekteTimelineEndJahr {
                    span {
                        font-size: 1.2rem;
                        font-weight: 600;
                    }
                }

                .joBgSlider, .joBgSliderFocus {
                    top: 1px;
                    height: 2px;
                    transition: max-height 0.6s var(--timeline-animate);
                }

                .joBgSliderFocus {
                    background-color: var(--highlight);
                    z-index: 11;
                }

                &.collapsed {
                    .joBgSlider, .joBgSliderFocus {
                        top: 1px;
                        height: 5px;
                    }
                }

                .time_wrap {
                    margin-top: 0.75rem;
                }

                div.joSlideableYearContainer .ecke, div.joSlideableYearContainer .content {
                    background-color: var(--charcoal);
                }
            }


        }

    }

    /* Sidenav */

    /* Panel */
    .sidepanelview {
        position: fixed;
        top: var(--header-h, 0px);
        left: 0;
        width: var(--panel-w, 380px);
        max-width: 100vw;
        height: calc(100vh - var(--header-h) - var(--footer-visible-h));
        overflow: hidden;
        background-color: var(--cultured);
        box-shadow: 2px 0 10px rgba(0,0,0,.1);
        transform: translateX(0);
        transition: transform 0.35s var(--timeline-animate);
        z-index: 100000;
        scroll-behavior: smooth;
        padding-bottom: 3rem;

        &:after {
            content: "";
            display: block;
            height: 2rem;    /* kleiner Bodenabstand */
        }
    }


    .sidepanel {
        width: 100%;
        padding-right: var(--sidebar-padding);
    }

    .filter_wrap {
        flex: 1 1 auto;
        overflow-y: auto;
        overscroll-behavior: contain;
        -webkit-overflow-scrolling: touch;
        padding: 0 var(--gap, 1rem);
        scroll-behavior: smooth;
        margin-top: 1rem;
        height: 100%;
        scroll-padding-bottom: 1rem;


        .controls_wrap {

            background-color: var(--cultured);
        }
    }

    .facettes .tab-pane .button_wrap .add, .facettes .tab-pane .button_wrap .remove {
        line-height: 120%;
    }

    .joControls-container {
        .accordion {
            position: relative;

            h2 {
                position: absolute;
                top: -15px;
                right: 0;
                text-align: right;
                font-size: 2.2rem;
            }

            h3 {
                font-size: 1.6rem;
                margin: 0;
            }
        }

        .card {

            &:has(.facettes-menu.show) {
                .card-header {
                    background-color: var(--beige);
                }
            }

            .card-header {
                position: relative;
                cursor: pointer;

                &:hover {
                    background-color: var(--beige);

                    a {

                    }
                }

                &.show-number {
                    .t01 {
                        display: flex;
                        justify-content: space-between;
                        align-items: center;

                    }
                }

            }

            .card-body.facettes {
                padding: 1rem 0;
                max-width: 100%;

                .tab-pane {
                    padding-bottom: 0;
                    border-bottom: 0;
                }

                .index_wrapper .index_col.index_col.index_col {
                    padding-right: 0;
                    width: 100%;
                }

                .index_wrapper {
                    padding-left: 0;
                    display: flex;
                    flex-direction: column;
                    gap: 6px;

                    .button_wrap {
                        padding: 0;

                        margin-bottom: 0;
                        display: flex;
                        align-items: center;
                    }

                    .index_col > .button_wrap:not(.bucket-container) {
                        min-height: 38px;
                        margin: 3px 0;

                    }


                }

                .bucket-btn {
                    align-items: center;
                }

                .bucket-container {
                    > div {
                        width: 100%;
                    }

                    .card {
                        display: grid;
                        grid-template-columns: 23px 1fr;
                        justify-items: stretch;
                        justify-content: start;
                        gap: 10px 5px;
                        border: 0;
                        padding-top: 0.6rem;

                    }

                    .btn.bucket-toggle {
                        border: 1px solid var(--highlight);
                        color: var(--highlight);
                        border-radius: 0;
                        font-size: 2rem;
                        line-height: 0;
                        min-width: 3rem;
                        aspect-ratio: 1;

                        &:hover, &:active, &:not(.collapsed) {
                            background-color: var(--highlight);
                            color: var(--cultured)
                        }

                        &:focus-visible {
                            outline: solid 4px var(--highlight) !important;
                            outline-offset: 1px;
                        }
                    }
                }

            }

        }

        .joAutocomplete-container .joAutocomplete {
            /* Input  */
            width: 100%;
        }

        .joKreis {
            width: 5px;
            height: 100%;
            background-color: var(--highlight);
            position: absolute;
            right: 0;
            top: 0;
            border-radius: 0;
            z-index: 150;
            border: none;
        }

        .joAlphabetIndex {


            li {
                &.active, &:hover  {
                    a {
                        background-color: var(--highlight);
                    }

                    .joKreis {
                        background-color: var(--cultured);
                    }

                }

                .joKreis {
                    width: 50%;
                    transform: translate(-50%, 0);
                    height: 3px;
                    bottom: 0;
                    top: initial;
                }
            }
        }

        .deletefilter, .showfilter {
            width: 30px;
            aspect-ratio: 1;
            display: flex;
            margin-bottom: 5px;

            a {
                padding: 0;

                .joSprite {
                    width: 30px;
                    transform: scale(0.75);


                }
                #joDeleteIcon .joSprite {
                    background-color: transparent;
                    background-position: -578px -9px;
                }
                &[href="#searchparams"] {
                    background-color: var(--dark-gray);

                    .joSprite {
                        background-position: -912px -105px;
                    }
                }


            }

            #joDeleteIcon {
            background-color: var(--highlight);
            }
        }

    }

    .joFacettesContainer:has(.joIndexHeadline) {
        border-top: 1px var(--beige) solid;
    }


    .button_wrap .card {
        background-color: var(--charcoal) !important;
    }

    .button_wrap a {
        width: 100%;
        justify-content: space-between;

        span {
            color: var(--beige);
            background-color: transparent;
            margin-left: 10px;
        }

    }

    .bucket-container {
        display: flex;
        justify-content: space-between;
        width: 100%;
    }

    .bucket-disabled {
        cursor: auto;
        pointer-events: none;
    }

    .button_wrap.bucket-btn {
        .joCheck-container a.bucket-disabled {
            &:after {
                position: absolute;
                content: '';
                display: block;
                background-color: var(--highlight);
                height: 80%;
                width: 80%;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%);
            }
        }
    }

    .noResults_wrap {
        margin-bottom: 10rem;


        #joDeleteIcon {
            background-color: var(--highlight);

             .joSprite {
                background-color: var(--highlight);
            }

            &:hover {
                background-color: var(--charcoal);
                 .joSprite {
                    background-color: var(--charcoal);
                }
            }
        }
    }
    .switch input {
        display: inline-block;
        width: 100%;
        height: 100%;
    }
    .true_or_false {
        display: inline-flex;
    }
    .typo3-messages {
        width: 50%;
    }

}

html .t3m-grid.t3m-grid.t3m-grid.t3m-grid.t3m-grid.t3m-grid.t3m-grid.t3m-grid {
    *:focus-visible {
        outline-color: var(--highlight) !important;
        outline-offset: 1px;
    }
}

.popover-header {
    margin: 0;
}
.popover-body {
    display: none;
}

/* Zustand: geschlossen */
.t3m-grid[data-state="closed"] .sidepanelview {
    transform: translateX(calc(-100% + var(--sidebar-padding)));
}
.t3m-grid[data-state="closed"] .results {
    padding-left:  var(--sidebar-padding);
}

/* Mobile */
@media (max-width: 992px) {
    .t3m-grid .sidepanelview {
        transform: translateX(-100%);
        position: fixed;

    }
    .t3m-grid[data-state="open"] .sidepanelview {
        transform: translateX(0);
    }
    .t3m-grid .results {
        padding-left: var(--sidebar-padding);
    }
    .t3m-grid[data-state="open"]::after {
        content: "";
        position: fixed;
        inset: 0;
        background: rgba(0,0,0,0.4);
        z-index: 900;
    }

    .t3m-grid .toggle-panel {
        background: var(--highlight);
    }
}

/* Override für den Abstand für Content durch den header */
.content_wrap {
    margin-top:  var(--header-h) !important;
}