/* ==========================================================================
   PANELS – Glas, Rahmen, Ein-/Ausblend-Verhalten
   ========================================================================== */

/* Panel-Grundlayout */
.panel{
    position:absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: calc(var(--floating-button-size) + var(--floating-button-gap));
    background: var(--surface);           /* halbtransparent, gut lesbar */
    border: 1px solid var(--hairline);
    border-radius: clamp(12px, calc(var(--viewport-short) * 0.025), 18px);
    box-shadow: var(--panel-shadow);
    backdrop-filter: blur(var(--blur));
    overflow:auto;
    will-change: transform, opacity;
    z-index: 1;                            /* reicht, Sidebar-Buttons liegen außerhalb */
}

/* Wenn per [hidden] geschlossen → wirklich aus dem Layout nehmen */
.panel[hidden]{ display:none; }

/* Sichtbar: sanftes Hereinsliden des gesamten Panels */
@keyframes panelIn {
    from { opacity:0; transform: translateX(16px); }
    to   { opacity:1; transform: translateX(0); }
}
.panel:not([hidden]){
    animation: panelIn .28s ease both;
}

/* Header fährt „mit hoch“ (leichtes Lift) */
@keyframes headerLift {
    from { opacity:0; transform: translateY(-8px); }
    to   { opacity:1; transform: translateY(0); }
}
.panel:not([hidden]) .panel-header{
    animation: headerLift .28s ease both;
}

/* Header-Stil */
.panel-header{
    position: relative;
    display:flex;
    flex-direction: column;
    align-items: stretch;
    gap: .5rem;
    padding: clamp(0.5rem, calc(var(--viewport-short) * 0.03), 0.85rem) clamp(0.75rem, calc(var(--viewport-short) * 0.04), 1rem);
    background: var(--surface-strong);
    border-bottom: 1px solid var(--hairline);
    border-top-left-radius: clamp(12px, calc(var(--viewport-short) * 0.025), 18px);
    border-top-right-radius: clamp(12px, calc(var(--viewport-short) * 0.025), 18px);
}
.panel-headline{
    display:flex; align-items:center; justify-content:space-between;
}
.panel-title{
    font-size: 1rem;
    letter-spacing:.01em;
    color: var(--ink);
    flex: 1 1 auto;
    min-width: 0;                     /* wichtig für Ellipsis in Flex-Layouts */
    white-space: nowrap;              /* einzeilig */
    overflow: hidden;                 /* überlaufende Zeichen ausblenden */
    text-overflow: ellipsis;          /* … anzeigen */
}

.panel-actions{ display:flex; gap:.5rem; }
.icon-btn{
    width:28px; height:28px;
    border:1px solid var(--hairline);
    border-radius: 4px;                   /* eckig */
    background: var(--glass-layer);
    color: var(--ink-2);
    cursor:pointer;
    display:grid; place-items:center;
    font-size: 14px;
    line-height: 1;
    transition: transform .12s ease, background .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.icon-btn:hover{
    transform: translateY(-1px);
    border-color: var(--primary);
    background: var(--primary-hover);
    box-shadow: 0 6px 18px var(--outline-contrast);
    color: var(--paper);
}

/* Inhalt */
.panel-content{ padding: clamp(1rem, calc(var(--viewport-short) * 0.04), 1.5rem); }

.panel-content .section + .section{
    margin-top: clamp(0.85rem, calc(var(--viewport-short) * 0.035), 1.35rem);
    border-top: 1px solid var(--glass-layer);
}

/* Interne Tab-Leiste im Panel (Sauna) */
.unit-tabs{
    display:flex;
    gap:.5rem;
    margin: 0;
}
.panel-header .unit-tabs{
    margin-top: .5rem;
}
.unit-tab{
    width:48px;
    height:48px;
    display:flex;
    align-items:center;
    justify-content:center;
    border:1px solid var(--hairline);
    border-radius:4px;
    background: var(--glass-layer);
    color: var(--ink-2);
    cursor:pointer;
    transition: transform .12s ease, background .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.unit-tab:hover{
    transform: translateY(-1px);
    border-color: var(--primary);
    background: var(--primary-hover);
    box-shadow: var(--shadow-sm);
    color: var(--paper);
}
.unit-tab.active{
    border-color: var(--primary);
    background: var(--primary);
    color: var(--paper);
    box-shadow: 0 10px 26px var(--glow-primary-strong);
}
.unit-tab .i{
    font-size: 22px;
    line-height: 1;
    display: block;
}

/* Scrollbars (WebKit) */
.panel::-webkit-scrollbar{ width: 10px; }
.panel::-webkit-scrollbar-track{ background: transparent; }
.panel::-webkit-scrollbar-thumb{
    background: var(--glass-divider);
    border-radius: 999px;
}

/* Preisblock (aus alter Datei beibehalten) */
.cost .row{ justify-content:space-between; color: var(--paper); }
.cost .total{ border-top:1px solid var(--hairline); padding-top:8px; }
.cost .grand{ font-size:20px; margin-top:16px; }
#unit-price-root .price-actions{
    margin-top: 1rem;
    display: flex;
    justify-content: flex-end;
}
#unit-price-root .price-actions .pill{
    padding-inline: 18px;
}