/* ==========================================================================
   OVERLAY – rechte Dock-Sidebar + Panel-Fläche
   ========================================================================== */

/* Rechte Hälfte über dem Stream; blockiert von sich aus keine Klicks */
#ui-overlay{
    position:absolute;
    inset:0;
    z-index: 2000;
    padding: var(--overlay-gap);
    display:grid;
    grid-template-rows: auto minmax(0, 1fr);
    justify-items: end;
    align-content: stretch;
    gap: var(--overlay-gap);
    --panels-available-height: calc(100% - var(--floating-button-size) - var(--floating-button-gap));
    background: none;
    pointer-events:none !important;   /* wichtig: lässt die Maus durch – außer explizit erlaubt */
}

/* --- Obere, horizontale Leiste (ohne Hintergrund) --- */
.topbar{
    position:static;
    display:flex;
    flex-direction:row;
    align-items:center;
    justify-content:flex-end;
    gap: 0.5rem;
    width: auto;
    max-width: min(var(--panel-max-width), 100%);
    padding: 0;
    margin: 0;
    margin-left: auto;
    align-self: end;
    background: none;
    border: none;
    box-shadow: none;
    flex-wrap: wrap;
    row-gap: 0.5rem;

    /* Die Leiste selbst darf klickbar sein */
    pointer-events:auto !important;
}

/* Tab-Buttons: eckig, Icon + Text, klare Ränder und States */
.tab-btn{
    display:flex;
    align-items:center;
    justify-content:center;
    width: auto;
    min-width: clamp(44px, calc(var(--viewport-short) * 0.14), 72px);
    height: clamp(44px, calc(var(--viewport-short) * 0.14), 52px);
    padding-inline: 14px;
    gap: 0.35rem;
    border: 1px solid var(--hairline);
    border-radius: 12px;
    background: var(--surface-strong);
    color: var(--paper);
    cursor:pointer;
    transition: transform .12s ease, background .2s ease, border-color .2s ease, box-shadow .2s ease;
    box-shadow: var(--shadow-sm);
}
.tab-btn:not(.active){
    border-color: var(--hairline);
    box-shadow: var(--shadow-sm);
}
.tab-btn span:not(.i){
    display:inline;
    font-size: 0.85rem;
    font-weight:600;
}
.tab-btn .i{
    font-size: 16px;
    line-height: 1;
    display:block;
}
.tab-btn:hover{
    transform: translateY(-2px);
    border-color: var(--primary);
    background: var(--primary-hover);
    box-shadow: var(--shadow);
    color: var(--paper);
}
.tab-btn.active{
    border-color: var(--primary);
    background: var(--primary);
    box-shadow: 0 12px 28px var(--glow-primary-strong);
    color: var(--paper);
}

/* --- Panel-Fläche unter der Topbar, rechts angedockt und halb so breit --- */
#panels{
    position:relative;
    width: min(var(--panel-max-width), calc(100% - var(--overlay-gap)));
    height: 100%;
    margin-left: auto;
    align-self: stretch;
    pointer-events:none !important;   /* Wrapper selbst fängt nichts ab */
}


/* Sichtbare Panels sind interaktiv */
.panel{
    pointer-events:auto !important;
}

/* Mikro-Animationen für Sections (sanftes Einfahren) */
@keyframes slideIn {
    from { opacity:0; transform: translateY(10px); }
    to   { opacity:1; transform: translateY(0); }
}
.panel:not([hidden]) .panel-content > .section{
    animation: slideIn .35s ease both;
}
.panel:not([hidden]) .panel-content > .section:nth-child(2){ animation-delay: .04s; }
.panel:not([hidden]) .panel-content > .section:nth-child(3){ animation-delay: .08s; }
.panel:not([hidden]) .panel-content > .section:nth-child(4){ animation-delay: .12s; }

/* Floating Fullscreen Button */
#custom-fullscreen-toggle{
    position:absolute;
    right: var(--overlay-gap);
    bottom: var(--overlay-gap);
    width: var(--floating-button-size);
    height: var(--floating-button-size);
    border-radius: 12px;
    border: 1px solid var(--hairline);
    background: var(--surface-strong);
    box-shadow: var(--shadow);
    color: var(--paper);
    display:flex;
    align-items:center;
    justify-content:center;
    gap:0.25rem;
    font-size: 20px;
    cursor: pointer;
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease, background .18s ease;
    pointer-events:auto !important;
}

#custom-fullscreen-toggle:hover{
    transform: translateY(-2px);
    background: var(--primary-hover);
    border-color: var(--primary);
    box-shadow: var(--shadow-sm);
    color: var(--paper);
}

#custom-fullscreen-toggle:active{
    transform: translateY(0);
}

#custom-fullscreen-toggle .icon{
    display:none;
    line-height:1;
}

#custom-fullscreen-toggle[data-state="enter"] .icon.enter,
#custom-fullscreen-toggle[data-state="exit"] .icon.exit{
    display:block;
}

#custom-fullscreen-toggle[data-state="exit"]{
    background: var(--primary);
    color: var(--paper);
    border-color: var(--primary);
    box-shadow: 0 16px 36px var(--glow-primary-strong);
}

#custom-fullscreen-toggle[data-state="exit"]:hover{
    background: var(--primary);
}

@media (max-width: 1120px){
    #ui-overlay{
        justify-items: end;
    }

    .topbar,
    #panels{
        width: min(var(--panel-max-width), 92vw);
    }
}

@media (max-width: 1024px){
    #ui-overlay{
        justify-items: end;
        align-content: stretch;
    }

    .topbar{
        width: min(var(--panel-max-width), calc(100% - var(--overlay-gap)));
        margin-left: auto;
    }

    #panels{
        width: min(var(--panel-max-width), calc(100% - var(--overlay-gap)));
        height: 100%;
        margin-left: auto;
    }
}

@media (max-width: 760px) and (orientation: portrait){
    #ui-overlay{
        justify-items: center;
        padding: clamp(12px, 5vw, 20px);
    }

    .topbar{
        width: 100%;
        justify-content: flex-end;
        gap: 0.5rem;
        margin-left: 0;
    }

    #panels{
        width: 100%;
        height: 100%;
        margin-left: 0;
    }

    #custom-fullscreen-toggle{
        right: clamp(12px, 5vw, 20px);
        bottom: clamp(12px, 5vw, 20px);
    }
}