/* Sidebar (Content-Level 2) — 1:1 aus ERP mage-components.css (MageSidebar + MageOverlay). */

/* ── MageSidebar (rechts einschiebendes Panel) ── */
.mage-sidebar-overlay {
    display: none; position: fixed; top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0,0,0,0.3); z-index: 9998; opacity: 0; transition: opacity 0.2s;
}
.mage-sidebar-overlay.active { display: block; opacity: 1; }
/* Breite systemweit wie ERP-MageSidebar (Default 72vw), auf grossen Screens gedeckelt.
   Ein-/Ausfahren via transform → breitenunabhängig (kein an die Breite gekoppeltes right:-Xpx). */
.mage-sidebar-panel {
    position: fixed; top: 0; right: 0; height: 100vh;
    width: min(72vw, 900px); max-width: 96vw;
    background: #fff; box-shadow: -4px 0 24px rgba(0,0,0,0.12); z-index: 9999;
    transform: translateX(100%); transition: transform 0.3s ease;
    display: flex; flex-direction: column; overflow: hidden;
}
.mage-sidebar-panel.open { transform: translateX(0); }
.mage-sidebar-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 18px 20px; border-bottom: 1px solid #f0f0f0; flex-shrink: 0;
}
.mage-sidebar-header h4 { margin: 0; font-size: 15px; font-weight: 600; color: #111; }
.mage-sidebar-close {
    background: none; border: none; font-size: 22px; color: #999; cursor: pointer;
    width: 32px; height: 32px; display: flex; align-items: center; justify-content: center;
    border-radius: 2px; transition: all 0.15s; line-height: 1;
}
.mage-sidebar-close:hover { background: #f3f4f6; color: #333; }
.mage-sidebar-save {
    background: var(--o); color: #fff; border: none; border-radius: 2px;
    padding: 6px 16px; font-size: 12px; font-weight: 600; cursor: pointer;
    transition: background 0.15s; white-space: nowrap; line-height: 1;
}
.mage-sidebar-save:hover { background: var(--o-h); }
.mage-sidebar-save:disabled { opacity: 0.5; cursor: default; }
.mage-sidebar-body { flex: 1; overflow-y: auto; padding: 20px; }
.mage-sidebar-loading { text-align: center; padding: 40px; color: #999; font-size: 13px; }

/* Kind randlos über die volle Sidebar-Breite (bricht aus dem 20px-Body-Padding aus).
   Der Sidebar-Body BESITZT das Padding → hier lebt auch das Gegenstück. */
.mage-sidebar-flush { margin-left: -20px; margin-right: -20px; }