/* ====================================================================
   PLOTLY MODEBAR STYLING - FINAL VERSION
   ==================================================================== */

/* Container - Transparent, kein Hintergrund */
.modebar-container,
.modebar-container > div {
    position: absolute !important;
    top: 5px !important;
    right: 5px !important;
    z-index: 10;
    background: transparent !important;
}

/* Modebar - Guter Kontrast in beiden Modi */
.modebar,
.plotly .modebar {
    background: rgba(255, 255, 255, 0.98) !important;
    border: 1px solid #d1d5db !important;
    border-radius: 6px !important;
    padding: 4px !important;
    box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.15) !important;
    display: inline-flex !important;
}

.dark .modebar,
.dark .plotly .modebar {
    background: rgba(31, 41, 55, 0.98) !important;
    border: 1px solid #4b5563 !important;
    box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.4) !important;
}

/* Buttons - ✅ Zentriert mit display: flex */
.modebar-btn {
    width: 28px !important;
    height: 28px !important;
    padding: 0 !important; /* ✅ Kein Padding, damit Icon zentriert ist */
    border-radius: 4px !important;
    transition: all 0.2s ease !important;
    background: transparent !important;
    display: flex !important; /* ✅ Flex für perfekte Zentrierung */
    align-items: center !important;
    justify-content: center !important;
}

    .modebar-btn:hover {
        background: #f3f4f6 !important;
    }

.dark .modebar-btn:hover {
    background: #4b5563 !important;
}

.modebar-btn.active {
    background: #dbeafe !important;
}

.dark .modebar-btn.active {
    background: #1e3a8a !important;
}

/* Icons - Dunkle Farbe im Light Mode für gute Sichtbarkeit */
.modebar-btn svg,
.modebar-btn svg path,
.modebar-btn path {
    fill: #1f2937 !important;
    transition: fill 0.2s ease !important;
}

.dark .modebar-btn svg,
.dark .modebar-btn svg path,
.dark .modebar-btn path {
    fill: #d1d5db !important;
}

/* Hover States */
.modebar-btn:hover svg,
.modebar-btn:hover svg path,
.modebar-btn:hover path {
    fill: #111827 !important;
}

.dark .modebar-btn:hover svg,
.dark .modebar-btn:hover svg path,
.dark .modebar-btn:hover path {
    fill: #f9fafb !important;
}

/* Active States */
.modebar-btn.active svg,
.modebar-btn.active svg path,
.modebar-btn.active path {
    fill: #2563eb !important;
}

.dark .modebar-btn.active svg,
.dark .modebar-btn.active svg path,
.dark .modebar-btn.active path {
    fill: #60a5fa !important;
}

/* Groups - ✅ Align Items Center */
.modebar-group {
    display: inline-flex !important;
    align-items: center !important; /* ✅ Vertikale Zentrierung */
    gap: 2px !important;
    padding: 0 4px !important;
    border-right: 1px solid #d1d5db !important;
    background: transparent !important;
}

.dark .modebar-group {
    border-right: 1px solid #4b5563 !important;
}

.modebar-group:first-child {
    padding-left: 0 !important; /* ✅ Kein Padding am Anfang */
}

.modebar-group:last-child {
    border-right: none !important;
    padding-right: 0 !important;
}

/* Dashboard Transitions */
#dashboard-container {
    transition: opacity 300ms ease-in-out;
}

#dashboard-loading {
    transition: opacity 200ms ease-out;
}