/*
 * ============================================================================
 * 🚀 ARCHITEKTUR & DOKUMENTATION (V2.0 PRO STRUKTUR)
 * ============================================================================
 * HINWEIS FÜR ENTWICKLER:
 * 1. Globale Elemente (Buttons, Inputs, Checkboxen, Spinner) liegen NUR HIER!
 * 2. Keine roten Schatten auf Buttons (box-shadow: none !important).
 * ============================================================================
 */

:root {
    /* === Primärfarben === */
    --bre-primary:       #bd0000;
    --bre-primary-hover: #990000;
    --bre-accent:        #bd0000;
    --bre-accent-hover:  #990000;

    /* === Semantische Farben === */
    --bre-success:       #34c759;
    --bre-success-hover: #2daf4f;
    --bre-info:          #007aff;
    --bre-warning:       #ff9500;
    --bre-danger:        #ff3b30;
    /* Einheitliche Toggle-/Switch-„An"-Farbe — ÜBERALL identisch */
    --bre-toggle-on:     #16a34a;

    /* === Neutrale Farben === */
    --bre-dark:          #1e293b;
    --bre-dark-hover:    #0f172a;
    --bre-gray-btn:      #64748b;
    --bre-gray-btn-hover:#475569;
    --bre-border:        #e2e8f0;
    --bre-gray-bg:       #f8fafc;
    --bre-white:         #ffffff;

    /* === Text / Hintergrund / Akzent-Blau ===
       Fallbacks. --bre-text-main + --bre-bg werden zur Laufzeit aus den
       Plugin-Einstellungen via class-bre-dynamic-css.php überschrieben.
       Früher nur in bre-dashboard.css :root definiert → jetzt zentral. */
    --bre-text-main:     #1e293b;
    --bre-text-muted:    #8e8e93;
    --bre-bg:            #f8fafc;
    --bre-blue:          #007aff;

    /* === Radius-Skala === */
    --bre-radius-btn:    6px;
    --bre-radius-modal:  20px;
}

/* =========================================================================
   GLOBALE BUTTONS (GARANTIERT OHNE SCHATTEN!)
   ========================================================================= */
.bre-btn, 
.bre-btn-save, 
.bre-btn-submit, 
.bre-btn-primary, 
.bre-btn-danger, 
.bre-btn-pdf { 
    display: inline-flex; align-items: center; justify-content: center; gap: 10px; 
    padding: 14px 20px; border-radius: var(--bre-radius-btn); 
    font-weight: 800; font-size: 14px; cursor: pointer; transition: 0.2s ease; 
    border: none !important; text-decoration: none; line-height: 1; 
    width: auto;
    box-shadow: none !important; /* Blockiert Theme-Schatten */
    outline: none !important;
}

.bre-btn-block { width: 100%; }

/* Farb-Varianten */
.bre-btn-dark { background: var(--bre-dark) !important; color: #fff !important; box-shadow: none !important; }
.bre-btn-dark:hover { background: var(--bre-dark-hover) !important; transform: translateY(-1px); }

.bre-btn-primary { background: var(--bre-primary) !important; color: #fff !important; box-shadow: none !important; }
.bre-btn-primary:hover { background: var(--bre-primary-hover) !important; transform: translateY(-1px); }

.bre-btn-secondary { background: var(--bre-gray-btn) !important; color: #fff !important; box-shadow: none !important; }
.bre-btn-secondary:hover { background: var(--bre-gray-btn-hover) !important; transform: translateY(-1px); }

.bre-btn-success { background: var(--bre-success) !important; color: #fff !important; box-shadow: none !important; }
.bre-btn-success:hover { background: var(--bre-success-hover) !important; transform: translateY(-1px); }

/* Wichtige Haupt-Buttons (Speichern & Frontend Submit) */
.bre-btn-save, .bre-btn-submit { 
    background: var(--bre-primary) !important; 
    color: #fff !important; 
    padding: 16px 30px !important; 
    font-size: 16px !important; 
    font-weight: 900 !important; 
    border-radius: 12px !important; 
}
.bre-btn-save:hover, .bre-btn-submit:hover {
    background: var(--bre-primary-hover) !important;
    transform: translateY(-2px) !important;
}

/* =========================================================================
   ZENTRALER SCHLIESSEN-BUTTON — EINE Definition für ALLE Bereiche/Modals.
   Alias-Klassen: .bre-modal-close-corner · .bre-modal-x · .bre-close-btn · .bre-search-close
   !important, damit keine bereichsspezifische CSS dies mehr überschreibt.
   ========================================================================= */
.bre-close-btn, .bre-search-close, .bre-modal-close-corner, .bre-modal-x, .bre-modal-close-small {
    display: inline-flex !important; align-items: center; justify-content: center;
    width: 40px !important; height: 40px !important; padding: 0 !important; line-height: 0 !important;
    background: #f1f5f9 !important; color: #64748b !important;
    border: 1px solid #e5e7eb !important; border-radius: 50% !important; cursor: pointer;
    transition: all 0.15s ease; text-decoration: none; z-index: 100;
}
.bre-close-btn:hover, .bre-search-close:hover, .bre-modal-close-corner:hover, .bre-modal-x:hover, .bre-modal-close-small:hover {
    background: #e2e8f0 !important; color: #1e293b !important; border-color: #cbd5e1 !important;
}
.bre-modal-close-corner { position: absolute !important; top: 16px !important; right: 16px !important; }
.bre-close-btn svg, .bre-search-close svg, .bre-modal-close-corner svg, .bre-modal-x svg, .bre-modal-close-small svg {
    width: 18px !important; height: 18px !important; stroke: currentColor; stroke-width: 2.6;
    fill: none; stroke-linecap: round; stroke-linejoin: round;
}

/* =========================================================================
   GLOBALES MODAL-LAYOUT — EINE Quelle für ALLE Modals (Bereichs-übergreifend)
   Aufbau (wie Referenz "Bikes hinzubuchen"):
       .bre-modal-dialog  (Flex-Spalte, max 92vh, kein Overflow)
         ├─ Header            → erstes Kind, bleibt fix
         ├─ .bre-modal-body   → scrollt (nimmt restliche Höhe)
         └─ Footer            → letztes Kind, bleibt fix
   ========================================================================= */
.bre-modal-dialog {
    display: flex !important;
    flex-direction: column !important;
    max-height: 92vh !important;
    overflow: hidden !important;
}
/* Der scrollbare Mittelteil — JEDES Modal markiert ihn mit .bre-modal-body
   (oder inline flex:1; overflow-y:auto — beides funktioniert). */
.bre-modal-dialog > .bre-modal-body {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    overflow-y: auto !important;
}
/* Einheitliche Scrollbar in allen Modals */
.bre-modal-dialog ::-webkit-scrollbar       { width: 8px; }
.bre-modal-dialog ::-webkit-scrollbar-track { background: transparent; }
.bre-modal-dialog ::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 8px; }
.bre-modal-dialog ::-webkit-scrollbar-thumb:hover { background: #94a3b8; }

/* Fixer Header-Balken (wie Referenz "Bikes hinzubuchen") — für JEDES Modal nutzbar */
.bre-modal-head {
    flex: 0 0 auto !important;
    display: flex !important; align-items: center !important; justify-content: space-between !important;
    gap: 12px !important;
    padding: 16px 22px !important;
    border-bottom: 1px solid var(--bre-border) !important;
    background: #fff !important;
}
.bre-modal-head > h3,
.bre-modal-head .bre-qa-title {
    margin: 0 !important; font-size: 18px !important; font-weight: 900 !important; color: #0f172a !important;
}

/* Walk-in/Buchung-Modal: Header-Balken fix, Body scrollt (Flex-Spalte aus global). */
.bre-modal-qa { padding: 0 !important; }
.bre-modal-qa .bre-modal-body { padding: 16px 22px !important; }
/* Stepper bleibt unter dem Header sichtbar; Button-Gruppe bleibt unten sichtbar */
.bre-modal-qa .bre-stepper-wrap {
    position: sticky !important; top: 0 !important; z-index: 6 !important;
    background: #fff !important; padding: 6px 0 14px !important; margin: 0 !important;
}
.bre-modal-qa .bre-qa-btn-group {
    position: sticky !important; bottom: 0 !important; z-index: 6 !important;
    background: #fff !important; padding: 14px 0 4px !important;
    box-shadow: 0 -6px 12px -4px rgba(0,0,0,0.08) !important;
}

/* =========================================================================
   GLOBALE EINGABEFELDER
   ========================================================================= */
.bre-input { 
    width: 100%; padding: 12px 15px; border-radius: var(--bre-radius-btn); 
    border: 1px solid var(--bre-border); font-size: 14px; font-weight: 600; 
    color: var(--bre-text-main); box-sizing: border-box; outline: none; 
    transition: 0.2s; background: #fff; 
}
.bre-input:focus { border-color: var(--bre-dark); box-shadow: 0 0 0 3px rgba(30,41,59,0.05); }

/* Border-Radius für Buttons & Eingabefelder kommt aus der Variable
   --bre-radius-btn (im Backend unter Einstellungen einstellbar). */

/* KEINE SCHATTEN — plugin-weit für alle Buttons & Eingabefelder. */
.bre-wrap button, .bre-wrap input, .bre-wrap select, .bre-wrap textarea, .bre-wrap a.bre-btn,
.bre-modal button, .bre-modal input, .bre-modal select, .bre-modal textarea, .bre-modal a.bre-btn,
.bre-modal-backdrop button, .bre-modal-backdrop input, .bre-modal-backdrop select, .bre-modal-backdrop textarea, .bre-modal-backdrop a.bre-btn,
[id^="bre-"][id*="modal"] button, [id^="bre-"][id*="modal"] input, [id^="bre-"][id*="modal"] select, [id^="bre-"][id*="modal"] textarea,
[id^="bre-"][id*="wrapper"] button, [id^="bre-"][id*="wrapper"] input, [id^="bre-"][id*="wrapper"] select, [id^="bre-"][id*="wrapper"] textarea,
.bre-btn, .bre-input {
    box-shadow: none !important;
}

/* =========================================================================
   Z-INDEX HIERARCHIE (STRIKT & EXPLIZIT - KEINE WILDCARDS!)
   ========================================================================= */

/* LEVEL 1: Haupt-Hintergründe und Basis-Modals (Warenkorb, Kalender, Manager) */
.bre-modal-backdrop,
#quickActionModal,
#bre-crm-modal-wrapper,
#bre-bm-modal-wrapper,
#bre-hotel-modal-wrapper,
#bre-contracts-modal-wrapper,
#bre-mini-cart-modal,
.bre-bm-wrap .bre-modal {
    z-index: 999990 !important;
}

/* LEVEL 2: Sekundäre Modals (Extras, Kundendaten, Verfügbarkeit) */
#extras_popup,
#customer_data_popup,
#avail-modal {
    z-index: 999995 !important;
}

/* LEVEL 3: Warnungen, Storno, Löschen & Bestätigungen (IMMER IM VORDERGRUND) */
#bre-contact-modal,
#bre-discount-modal,
#bre-signature-modal,
#bre-return-modal,
#bre-delete-modal,
#checklist-modal,
#cart-warning-modal,
#size_conflict_modal,
#call-modal,
#partial-call-modal,
#contract-error-modal,
#bre-bm-global-alert-modal,
#bre-bm-global-confirm-modal,
#bre-bm-force-delete-confirm-modal,
#bre-bm-new-category-modal,
#bre-bm-new-brand-modal,
#bre-bm-new-attribute-modal,
#bre-bm-copy-modal,
#bre-bm-delete-modal,
#bre-bm-sync-modal,
#bre-search-modal,
#bre-global-confirm-modal {
    z-index: 999999 !important;
}

/* LEVEL 4: WordPress Core Mediathek (ABSOLUTES MAXIMUM) */
.media-modal-backdrop { z-index: 2147483646 !important; }
.media-modal { z-index: 2147483647 !important; }


/* ==========================================================================
   GLOBALER FAHRRAD-SPINNER
   ========================================================================== */
.bre-spinner, .bre-spinner::after, .bre-spinner::before {
    border: none !important; border-radius: 0 !important; background-color: transparent !important;
}
.bre-spinner {
    width: 50px !important; height: 50px !important; margin: 20px auto !important;
    background-image: url("data:image/svg+xml,%3Csvg id='Layer_2' viewBox='0 0 70 70' xmlns='http://www.w3.org/2000/svg' fill='%23bd0000'%3E%3Cpath d='m69 57.81-6.85-3.91a1 1 0 0 0 -1 0l-3 1.9-4.69-3.8a1 1 0 0 0 -1.21 0l-4 2.81-4.72-2.74a8.91 8.91 0 0 0 6.84-9.72 8.92 8.92 0 0 0 -9.89-7.84 8.6 8.6 0 0 0 -2.1.51l-2.95-5.82a2.42 2.42 0 0 0 1.2-.32 2.39 2.39 0 0 0 1-1.15l.1.07a1 1 0 0 0 1.4-.18 1 1 0 0 0 -.13-1.43 5 5 0 0 0 -1.62-.83 2.34 2.34 0 0 0 -1.08-.82l-4.22-1.54-2.95-3.69a.51.51 0 0 1 -.1-.38 2.43 2.43 0 0 0 -.25-1.43 4 4 0 0 0 3.22-1.68 3.93 3.93 0 0 0 -.95-5.5 3.86 3.86 0 0 0 -3-.65 3.91 3.91 0 0 0 -2.54 1.62 4 4 0 0 0 -.4 3.71 3 3 0 0 0 -1.75.24c-4.47 2.16-8.47 11.89-7.79 14.41.32 1.23 2.24 3.23 4.13 5l-2.11 3.64a8.8 8.8 0 0 0 -4.49-.65 8.93 8.93 0 0 0 -4.53 15.87q.35.27.72.51l-8.29 4.5a1 1 0 0 0 .5 1.88.94.94 0 0 0 .5-.13l9.57-5.21h.08c.32.1 5.85 1.39 5.85 1.39a1 1 0 0 0 .86-.19l5.84-4.7 5 7a1 1 0 0 0 1 .41l6.8-1.29a1 1 0 0 0 .63-.4l3.25-4.49 7 4.05a1 1 0 0 0 1.07-.05l3.89-2.73 4.63 3.77a1 1 0 0 0 1.17.07l3.09-2 6.27 3.64a1 1 0 1 0 1-1.73zm-31.46-20.11 3.1 6.11a1 1 0 0 0 .89.55 1 1 0 0 0 .45-.11 1 1 0 0 0 .44-1.35l-3.1-6.11a7.33 7.33 0 0 1 1.42-.32 7 7 0 1 1 -3.2 1.23zm-10.37-25.26a2 2 0 0 1 1.26-.81 2.07 2.07 0 0 1 .35 0 1.92 1.92 0 0 1 1.89 1.61 1.94 1.94 0 1 1 -3.5-.77zm-9.63 15.88c.46-2.65 3.46-9.67 6.69-11.23a1 1 0 0 1 .87 0 7 7 0 0 1 1.8 1.14.49.49 0 0 1 .15.42 2.47 2.47 0 0 0 .52 1.91l3.12 3.91a1 1 0 0 0 .43.31l4.45 1.64a.4.4 0 0 1 .06.72.42.42 0 0 1 -.32 0l-5.8-1.77-3.58-4.77a1 1 0 0 0 -1.4-.2 1 1 0 0 0 -.21 1.39l1.19 1.6-2.91 4.75a10.28 10.28 0 0 1 -5.06.18zm10.7 5.47-.2-.26 5.63-.65-5 8.13.49-3.68a4.75 4.75 0 0 0 -.92-3.54zm.37 11.73-3.61.53.06-1.37 2-.31zm-2-13.84-2.14-2.74 2.34-3.82 1.3 1.74a.93.93 0 0 0 .51.36l4.28 1.31 1.16 2.29zm-8.22-1.18c.41 0 .82.07 1.26.07a12.48 12.48 0 0 0 3.22-.42l3.79 4.85a2.79 2.79 0 0 1 .56 2l-.72 5.37-1.37.21v-5.57a1 1 0 0 0 -.38-.78 54 54 0 0 1 -6.36-5.73zm-11.15 16.8a6.93 6.93 0 0 1 6.09-7.67 6.82 6.82 0 0 1 3.24.4l-3.48 6a1 1 0 0 0 .36 1.37 1 1 0 0 0 .5.13 1 1 0 0 0 .86-.49l3.51-6 .11.07a6.94 6.94 0 0 1 -3.52 12.29 7.4 7.4 0 0 1 -1.94 0l-.87-.21a6.94 6.94 0 0 1 -4.86-5.89zm29 8.48-5.84 1.07-5.21-7.29a1 1 0 0 0 -.68-.41 1 1 0 0 0 -.76.21l-1.81 1.45a8.91 8.91 0 0 0 -2.27-11.29l-.34-.25 1.9-3.27c.76.65 1.42 1.2 1.87 1.56v6.21l-.1 2.1a2.08 2.08 0 0 0 2.11 2.13h.3l4.19-.63a1.7 1.7 0 0 0 .78-3l-.93-.72 6.06-9.94 1.12 2.2a8.92 8.92 0 0 0 2.39 16z'/%3E%3C/svg%3E") !important;
    background-size: contain !important; background-repeat: no-repeat !important; background-position: center !important;
    animation: breBikeDrive 1.2s infinite ease-in-out !important;
}

@keyframes breBikeDrive {
    0% { transform: translateX(-20px); opacity: 0; }
    20% { opacity: 1; transform: translateX(-10px) translateY(-2px); }
    80% { opacity: 1; transform: translateX(10px) translateY(2px); }
    100% { transform: translateX(20px); opacity: 0; }
}

/* ==========================================================================
   APPLE iOS STYLE TOGGLE CHECKBOX
   ========================================================================== */
.bre-checkbox-box {
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    margin-bottom: 25px !important;
}

.bre-checkbox-box label {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 16px !important;
    background: #f8fafc !important; 
    border: 1px solid #e2e8f0 !important;
    padding: 16px 20px !important;
    border-radius: 16px !important; 
    cursor: pointer !important;
    margin: 0 !important;
    transition: all 0.3s ease !important;
    width: 100% !important;
    box-sizing: border-box !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.02) !important;
}

.bre-checkbox-box label:hover {
    background: #ffffff !important;
    border-color: #cbd5e1 !important;
    box-shadow: 0 4px 15px rgba(0,0,0,0.06) !important;
    transform: translateY(-1px) !important;
}

.bre-checkbox-box input[type="checkbox"] {
    appearance: none !important;
    -webkit-appearance: none !important;
    outline: none !important;
    margin: 0 !important;
    padding: 0 !important;
    width: 51px !important;
    height: 31px !important;
    min-width: 51px !important;
    border-radius: 31px !important;
    background-color: #e9e9ea !important; 
    cursor: pointer !important;
    position: relative !important;
    transition: background-color 0.3s ease, border-color 0.3s ease !important;
    flex-shrink: 0 !important;
    border: 2px solid transparent !important;
    box-shadow: inset 0 0 0 1px rgba(0,0,0,0.05) !important;
    display: inline-block !important;
}

.bre-checkbox-box input[type="checkbox"]::after {
    content: '' !important;
    position: absolute !important;
    top: 2px !important;
    left: 2px !important;
    width: 23px !important;
    height: 23px !important;
    background-color: #ffffff !important;
    border-radius: 50% !important;
    box-shadow: 0 3px 8px rgba(0,0,0,0.15), 0 3px 1px rgba(0,0,0,0.06) !important; 
    transition: transform 0.3s cubic-bezier(0.2, 0.85, 0.32, 1.2) !important;
}

.bre-checkbox-box input[type="checkbox"]:checked {
    background-color: var(--bre-primary, #bd0000) !important; 
    box-shadow: inset 0 0 0 1px rgba(0,0,0,0.1) !important;
}

.bre-checkbox-box input[type="checkbox"]:checked::after {
    transform: translateX(20px) !important;
}

.bre-checkbox-box label span {
    font-size: 15px !important;
    color: #1c1c1e !important; 
    font-weight: 500 !important;
    line-height: 1.4 !important;
    user-select: none !important;
    margin: 0 !important;
    padding: 0 !important;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif !important;
    display: block !important;
    text-align: left !important;
}

/* ============================================================================
 * EINHEITLICHE TOGGLE-/SWITCH-FARBE — ÜBERALL identisch (eine Quelle: --bre-toggle-on)
 * Gilt für alle bekannten Toggle-Varianten im Plugin.
 * ========================================================================== */
.ci-toggle input:checked + .ci-toggle-track,
input[type=checkbox].bre-v2-tog:checked,
.bre-v2-switch input:checked + .bre-v2-slider,
input[type=checkbox].bre-toggle-switch:checked {
    background: var(--bre-toggle-on, #16a34a) !important;
    accent-color: var(--bre-toggle-on, #16a34a) !important;
}

.bre-checkbox-box label span strong {
    color: #000000 !important;
    font-weight: 800 !important;
}

/* ============================================================================
 * EINHEITLICHES MODAL-SYSTEM
 *  (A) Klassen für neue/migrierte Modals  (B) Normalisierung bestehender Modals.
 *  Slate/Weiß-Look, identisch über das ganze Plugin.
 * ========================================================================== */

/* (A) Kanonische Klassen */
.bre-modal-backdrop-v2 { position:fixed; inset:0; z-index:999999; background:rgba(15,23,42,.6); backdrop-filter:blur(4px); display:flex; align-items:center; justify-content:center; padding:20px; }
.bre-modal { background:#fff; border-radius:16px; width:100%; max-width:560px; max-height:90vh; display:flex; flex-direction:column; overflow:hidden; box-shadow:0 24px 64px rgba(0,0,0,.3); font-family:-apple-system,BlinkMacSystemFont,"Inter","Segoe UI",sans-serif; color:#0f172a; }
.bre-modal.lg { max-width:960px; } .bre-modal.xl { max-width:1200px; }
.bre-modal-head { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:18px 22px; border-bottom:1px solid #e6e8ec; }
.bre-modal-head h2, .bre-modal-head h3 { margin:0; font-size:17px; font-weight:800; color:#0f172a; }
.bre-modal-close { flex:0 0 auto; width:40px; height:40px; border:0; border-radius:50%; background:#f1f5f9; color:#475569; cursor:pointer; display:inline-flex; align-items:center; justify-content:center; transition:.15s; }
.bre-modal-close svg { width:22px; height:22px; }
.bre-modal-close:hover { background:#e2e8f0; color:#0f172a; }
.bre-modal-body { padding:20px 22px; overflow-y:auto; flex:1; }
.bre-modal-foot { display:flex; gap:10px; justify-content:flex-end; padding:14px 22px; border-top:1px solid #e6e8ec; background:#f8fafc; }
.bre-modal-btn { appearance:none; border:1px solid transparent; padding:10px 18px; border-radius:10px; font-family:inherit; font-size:14px; font-weight:700; cursor:pointer; display:inline-flex; align-items:center; gap:7px; transition:.15s; text-decoration:none; }
.bre-modal-btn-primary { background:#1e293b; color:#fff; } .bre-modal-btn-primary:hover { background:#0f172a; }
.bre-modal-btn-ghost { background:#fff; border-color:#e2e8f0; color:#475569; } .bre-modal-btn-ghost:hover { background:#f1f5f9; }
.bre-modal-btn-danger { background:#fff; border-color:#e2e8f0; color:#dc2626; } .bre-modal-btn-danger:hover { background:#fef2f2; border-color:#dc2626; }

/* (B) Normalisierung bestehender Modals — überschreibt Inline-Backdrops (ohne display anzufassen). */
.bre-modal-backdrop,
.bre-modal-backdrop-ed,
#bre-dash-overlay,
#bre-extend-overlay,
#bre-log-modal,
#bre-fleet-modal,
#bre-crm-modal-wrapper,
#bre-contracts-modal-wrapper,
#bre-bk-modal-wrapper,
#bre-bm-modal-wrapper {
    background: rgba(15,23,42,.6) !important;
    -webkit-backdrop-filter: blur(4px) !important;
    backdrop-filter: blur(4px) !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 20px !important;
}
/* Einheitlicher Card-Rahmen (nur Radius + Schatten → bricht keine Layouts). */
.bre-modal-backdrop > div,
#bre-dash-overlay > div,
#bre-extend-overlay > div,
#bre-log-modal > div,
#bre-crm-modal-wrapper > div,
#bre-contracts-modal-wrapper > div,
#bre-bk-modal-wrapper > div,
#bre-bm-modal-wrapper > div {
    border-radius: 16px !important;
    box-shadow: 0 24px 64px rgba(0,0,0,.3) !important;
}

/* =====================================================================
   EINHEITLICHE DELETE-BUTTONS — zentraler SVG-Mülleimer
   Ersetzt überall ✕ / × / eigene Icons durch EIN konsistentes Trash-Icon,
   damit alle Löschen-Buttons identisch aussehen.
   ===================================================================== */
:root {
    --bre-trash-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='3 6 5 6 21 6'/%3E%3Cpath d='M19 6l-1 14a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2L5 6'/%3E%3Cline x1='10' y1='11' x2='10' y2='17'/%3E%3Cline x1='14' y1='11' x2='14' y2='17'/%3E%3Cpath d='M9 6V4a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v2'/%3E%3C/svg%3E") center / contain no-repeat;
}
.bre-trash-btn,
.bre-sm-del, .bre-sm-aadel, .bre-sm-loc-del, .bre-sm-bank-del, .bre-sm-agb-del, .bre-sm-dev-del,
.bre-btn-del-autoadd, .bre-ct-act-del, .crm-row-action-delete, .btn-row-delete,
.bm-list-delete-btn, .delete-btn, .bre-agb-remove, .bre-bank-remove, .bre-loc-remove,
.bre-rule-remove, .bre-promo-remove, .bre-check-remove, .pbe-sonstiges-delete,
.bre-del-device-btn, .bre-bk-del,
.man-remove-bike, .bre-cart-remove-btn, .btn-delete-hotel, .bre-ask-delete-slot {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 32px !important;
    height: 32px !important;
    min-width: 32px !important;
    padding: 0 !important;
    border: 1px solid #fecaca !important;
    border-radius: 8px !important;
    background: #fef2f2 !important;
    color: #dc2626 !important;
    cursor: pointer !important;
    font-size: 0 !important;       /* versteckt ✕/×-Text */
    line-height: 0 !important;
    flex: 0 0 auto !important;
    transition: background .15s, border-color .15s, transform .15s !important;
}
/* eigene Inhalts-Icons (SVG/IMG/span) ausblenden → nur der Mülleimer bleibt */
.bre-trash-btn > *, .bre-sm-del > *, .bre-sm-aadel > *, .bre-sm-bank-del > *,
.bre-sm-agb-del > *, .bre-sm-dev-del > *, .bre-btn-del-autoadd > *,
.bre-ct-act-del > *, .crm-row-action-delete > *, .btn-row-delete > *, .bm-list-delete-btn > *,
.delete-btn > *, .bre-agb-remove > *, .bre-bank-remove > *, .bre-loc-remove > *,
.bre-rule-remove > *, .bre-promo-remove > *, .bre-check-remove > *, .pbe-sonstiges-delete > *,
.bre-del-device-btn > *, .bre-bk-del > *,
.man-remove-bike > *, .bre-cart-remove-btn > *, .btn-delete-hotel > *, .bre-ask-delete-slot > * {
    display: none !important;
}
/* der einheitliche Mülleimer (Mask → folgt der color) */
.bre-trash-btn::before,
.bre-sm-del::before, .bre-sm-aadel::before, .bre-sm-bank-del::before,
.bre-sm-agb-del::before, .bre-sm-dev-del::before, .bre-btn-del-autoadd::before,
.bre-ct-act-del::before, .crm-row-action-delete::before, .btn-row-delete::before, .bm-list-delete-btn::before,
.delete-btn::before, .bre-agb-remove::before, .bre-bank-remove::before, .bre-loc-remove::before,
.bre-rule-remove::before, .bre-promo-remove::before, .bre-check-remove::before, .pbe-sonstiges-delete::before,
.bre-del-device-btn::before, .bre-bk-del::before,
.man-remove-bike::before, .bre-cart-remove-btn::before, .btn-delete-hotel::before, .bre-ask-delete-slot::before {
    content: '' !important;
    display: block !important;
    width: 17px;
    height: 17px;
    background-color: currentColor;
    -webkit-mask: var(--bre-trash-icon);
            mask: var(--bre-trash-icon);
}
.bre-trash-btn:hover,
.bre-sm-del:hover, .bre-sm-aadel:hover, .bre-sm-loc-del:hover, .bre-sm-bank-del:hover,
.bre-sm-agb-del:hover, .bre-sm-dev-del:hover, .bre-btn-del-autoadd:hover,
.bre-ct-act-del:hover, .crm-row-action-delete:hover, .btn-row-delete:hover, .bm-list-delete-btn:hover,
.delete-btn:hover, .bre-agb-remove:hover, .bre-bank-remove:hover, .bre-loc-remove:hover,
.bre-rule-remove:hover, .bre-promo-remove:hover, .bre-check-remove:hover, .pbe-sonstiges-delete:hover,
.bre-del-device-btn:hover, .bre-bk-del:hover,
.man-remove-bike:hover, .bre-cart-remove-btn:hover, .btn-delete-hotel:hover, .bre-ask-delete-slot:hover {
    background: #fee2e2 !important;
    border-color: #fca5a5 !important;
    transform: translateY(-1px);
}
/* =========================================================================
   HELPER-KLASSEN — vereinheitlicht aus wiederholten Inline-Styles (Step 3)
   Werte 1:1 aus dem bisherigen Inline-CSS übernommen (kein optischer Unterschied).
   Genutzt in class-bre-dashboard-view.php und class-bre-settings-modal.php.
   ========================================================================= */
.bre-field-hint  { margin: 3px 0 0; font-size: 12px; color: #64748b; }   /* Feld-Hinweistext */
.bre-loading-ph  { text-align: center; padding: 60px; color: #94a3b8; }  /* AJAX-Ladeplatzhalter */
.bre-sec-heading { margin: 18px 0 8px; }                                 /* Abschnitts-Überschrift Abstand */
.bre-note-muted  { font-size: 11px; color: #94a3b8; margin-top: 10px; }  /* kleine graue Notiz */
.bre-label-soft  { font-weight: 400; color: #64748b; }                   /* leichte Label-Ergänzung */
.bre-w-100       { width: 100%; }
.bre-flex-1      { flex: 1; }