/* ════════════════════════════════════════════════
   RIGHT PANEL  –  Fixierte Listen-Leiste rechts
   ════════════════════════════════════════════════ */

#right-panel {
    position: fixed;
    right: 0;
    top: 50px;
    bottom: 0;
    width: 300px;
    background: rgba(18, 18, 32, 0.97);
    border-left: 1px solid #383858;
    z-index: 150;
    display: flex;
    flex-direction: column;
    transform: translateX(100%);
    transition: transform 0.22s ease;
    backdrop-filter: blur(10px);
}

#right-panel.rp-open {
    transform: translateX(0);
}

/* Tab-Leiste + Panel komplett verstecken (Tabs nicht mehr am Rand sichtbar) */
#right-panel.rp-tabs-hidden {
    transform: translateX(calc(100% + 30px));
}

/* Revive-Button: erscheint wenn Tab-Leiste ganz versteckt ist */
#rp-tabs-revive {
    position: fixed;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 14px;
    height: 44px;
    background: rgba(18, 18, 32, 0.97);
    border: 1px solid #383858;
    border-right: none;
    border-radius: 6px 0 0 6px;
    display: none;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 151;
    color: #555;
    font-size: 9px;
    transition: color 0.15s, background 0.15s;
}
#rp-tabs-revive:hover { color: #aaa; background: rgba(40,40,60,0.5); }

/* Sektions-Tabs, die immer sichtbar links aus dem Panel ragen */
#rp-tabs {
    position: absolute;
    left: -30px;
    top: 0;
    bottom: 0;
    width: 30px;
    display: flex;
    flex-direction: column;
    background: rgba(18, 18, 32, 0.97);
    border: 1px solid #383858;
    border-right: none;
    border-radius: 6px 0 0 6px;
    z-index: 151;
    backdrop-filter: blur(10px);
    overflow: hidden;
}

#rp-tabs-close {
    flex-shrink: 0;
    height: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #555;
    cursor: pointer;
    border-bottom: 1px solid #272740;
    font-size: 10px;
    transition: color 0.15s, background 0.15s;
}
#rp-tabs-close:hover { color: #aaa; background: rgba(40,40,60,0.5); }

.rp-tab {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    writing-mode: vertical-rl;
    font-size: 10px;
    color: #777;
    cursor: pointer;
    user-select: none;
    border-bottom: 1px solid #272740;
    transition: color 0.15s, background 0.15s;
    letter-spacing: 0.5px;
    overflow: hidden;
    min-height: 28px;
}
.rp-tab:last-child { border-bottom: none; }
.rp-tab:hover { color: #fff; background: rgba(40,40,60,0.5); }
.rp-tab.rp-tab-active { color: #00ff88; background: rgba(0,80,50,0.18); }

/* Drag & Drop Feedback */
.rp-drag-over { box-shadow: 0 -2px 0 0 #4488ff inset !important; }
.rp-grp-drag-over { background: rgba(80,110,220,0.35) !important; outline: 1px solid #4488ff; }

/* Focus-Flash (F+Klick Sprung) */
.rp-focus-flash { animation: rp-flash 0.9s ease-out; }
@keyframes rp-flash {
    0%, 20% { box-shadow: 0 0 0 2px #00ff88; }
    100%     { box-shadow: none; }
}

/* Quality-Panel im Right-Panel */
#right-panel #quality-panel {
    position: static !important;
    width: 100% !important;
    display: block !important;
    background: transparent !important;
    box-shadow: none !important;
    border: none !important;
    padding: 0 !important;
}

/* Resize-Handle links */
#right-panel-resize {
    position: absolute;
    left: -4px;
    top: 0; bottom: 0;
    width: 8px;
    cursor: ew-resize;
    z-index: 152;
    border-radius: 4px;
    transition: background 0.15s;
}
#right-panel-resize:hover,
#right-panel-resize.dragging { background: rgba(120,100,220,0.35); }

/* Scroll-Container für die Sektionen */
#right-panel-scroll {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-width: thin;
    scrollbar-color: #333 transparent;
}

/* ── Sektion ─────────────────────────────────── */

.rp-section {
    border-bottom: 1px solid #272740;
}

.rp-section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 10px;
    background: #20203a;
    cursor: pointer;
    user-select: none;
    font-size: 12px;
    font-weight: 600;
    color: #bbb;
    gap: 6px;
}
.rp-section-header:hover { background: #2a2a46; }

.rp-header-right {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}

.rp-hdr-btn {
    background: none;
    border: 1px solid #444;
    border-radius: 3px;
    padding: 1px 5px;
    font-size: 11px;
    cursor: pointer;
    color: #4ade80;
}
.rp-hdr-btn:hover { border-color: #666; }

.rp-arrow {
    font-size: 9px;
    color: #555;
    transition: transform 0.18s;
    display: inline-block;
    flex-shrink: 0;
}
.rp-section.rp-collapsed .rp-arrow { transform: rotate(-90deg); }

.rp-section-body { display: block; }
.rp-section.rp-collapsed .rp-section-body { display: none; }

/* ── Panel-Overrides (wenn in right-panel) ───── */

#right-panel #measurement-panel,
#right-panel #file-panel,
#right-panel #draw-panel,
#right-panel #screenshot-panel,
#right-panel #coord-panel {
    position: static !important;
    width: 100% !important;
    max-height: none !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    border: none !important;
    z-index: auto !important;
    display: flex !important;
    flex-direction: column !important;
}

#right-panel #measurement-panel-header,
#right-panel #file-panel-header,
#right-panel #draw-panel-header,
#right-panel #screenshot-panel-header,
#right-panel #coord-panel-header {
    display: none !important; /* Durch rp-section-header ersetzt */
}

#right-panel #measurement-list,
#right-panel #file-list,
#right-panel #draw-list,
#right-panel #screenshot-list,
#right-panel #coord-list {
    overflow-y: auto;
}

/* Messpunkt-Größe Sektion */
#marker-size-panel .rp-section-body {
    padding: 10px 12px;
}
#marker-size-panel input[type="range"] { width: 100%; margin: 4px 0; }