/* ================================================================
   DataTable Button Group Unified Styling
   ================================================================
   Anforderungen:
   - Spalten-Button (erster): nur linke Ecken abgerundet (1rem)
   - Action-Buttons (mitte): keine abgerundeten Ecken, 1px Abstand
   - Dropdown-Button (letzter): nur rechte Ecken abgerundet (1rem)
   - Alle Buttons erscheinen als eine visuelle Einheit
   - Tabellenaktionen (Refresh/Neu) folgen demselben Design
   ================================================================ */

/* =========================
   Generelle btn-group Overrides
   ========================= */

/* Entferne Hintergrundfarben und Rundungen von ALLEN btn-group Containern */
.btn-group {
    background: transparent !important;
    border-radius: 0 !important;
    border: none !important;
}

/* =========================
   Shared Button Group Styling für BEIDE Gruppen
   ========================= */

/* Basis-Styling für alle Buttons in btn-groups - Override Bootstrap und app-btn-primary */
.btn-group > .btn.app-btn-primary,
.btn-group > .btn,
.dataTables_wrapper .dt-buttons > .btn.app-btn-primary,
.dataTables_wrapper .dt-buttons > .btn,
.dataTables_wrapper .dt-buttons > .dt-button,
.dataTables_wrapper .dt-buttons > button:not(.dropdown-item),
.dataTables_wrapper .dt-buttons > div > .btn,
.dataTables_wrapper .dt-buttons > div > .dt-button,
.dataTables_wrapper .dt-buttons > div > button:not(.dropdown-item),
.dataTables_wrapper .dt-buttons > .btn-group > .btn,
.dataTables_wrapper .dt-buttons > .btn-group > button:not(.dropdown-item),
.dataTables_wrapper .dt-action-buttons-placeholder .btn,
.dataTables_wrapper .dt-action-buttons-placeholder button,
.dataTables_wrapper .dt-action-buttons-placeholder .btn-group > .btn,
.dataTables_wrapper .dt-action-buttons-placeholder .btn-group > button {
    /* Reset border-radius from app-btn-primary */
    border-radius: 0 !important;
    margin: 0 !important;
    /* Subtle gradient design */
    background: linear-gradient(135deg, var(--app-primary-color) 0%, #c82333 100%) !important;
    border: 1px solid var(--app-primary-color) !important;
    color: white !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1) !important;
    transition: all 0.2s ease !important;
}

/* =========================
   Tabellenaktionen Button Group (Links)
   ========================= */

/* Tabellenaktionen Container */
div.btn-group[aria-label="Tabellenaktionen"],
.dataTables_wrapper .dt-action-buttons-placeholder .btn-group[aria-label="Tabellenaktionen"] {
    display: inline-flex !important;
    gap: 1px !important; /* 1px Abstand zwischen den Buttons */
}

/* Erster Button in Tabellenaktionen - linke Ecken abgerundet */
div.btn-group[aria-label="Tabellenaktionen"] > .btn:first-child,
.dataTables_wrapper .dt-action-buttons-placeholder .btn-group[aria-label="Tabellenaktionen"] > .btn:first-child {
    border-top-left-radius: 1rem !important;
    border-bottom-left-radius: 1rem !important;
    border-top-right-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
}

/* Letzter Button in Tabellenaktionen - rechte Ecken abgerundet */
div.btn-group[aria-label="Tabellenaktionen"] > .btn:last-child,
.dataTables_wrapper .dt-action-buttons-placeholder .btn-group[aria-label="Tabellenaktionen"] > .btn:last-child {
    border-top-right-radius: 1rem !important;
    border-bottom-right-radius: 1rem !important;
    border-top-left-radius: 0 !important;
    border-bottom-left-radius: 0 !important;
}

/* Wenn nur ein Button in Tabellenaktionen - alle Ecken abgerundet */
div.btn-group[aria-label="Tabellenaktionen"] > .btn:only-child,
.dataTables_wrapper .dt-action-buttons-placeholder .btn-group[aria-label="Tabellenaktionen"] > .btn:only-child {
    border-radius: 1rem !important;
}

/* Buttons innerhalb der Tabellenaktionen - 1px margin-left für Abstand */
div.btn-group[aria-label="Tabellenaktionen"] > .btn:not(:first-child),
.dataTables_wrapper .dt-action-buttons-placeholder .btn-group[aria-label="Tabellenaktionen"] > .btn:not(:first-child) {
    margin-left: 1px !important;
    margin-right: 0.5rem !important;
}

/* =========================
   DataTable Button Container Styling
   ========================= */

/* Haupt-Button-Container */
.dataTables_wrapper .dt-buttons {
    display: inline-flex !important;
    align-items: center !important;
    gap: 1px !important; /* 1px Abstand zwischen den Button-Gruppen */
    background: transparent !important;
}

/* =========================
   Erstes Element (Spalten-Button)
   ========================= */

/* Erster Button wenn es MEHRERE gibt */
.dataTables_wrapper .dt-buttons > :first-child:not(:only-child) .btn:first-child,
.dataTables_wrapper .dt-buttons > :first-child:not(:only-child).btn,
.dataTables_wrapper .dt-buttons > :first-child:not(:only-child) .dt-button:first-child,
.dataTables_wrapper .dt-buttons > :first-child:not(:only-child).dt-button,
.dataTables_wrapper .dt-buttons > :first-child:not(:only-child) button:first-child {
    border-top-left-radius: 1rem !important;
    border-bottom-left-radius: 1rem !important;
    border-top-right-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
}

/* Wenn nur EIN Button vorhanden ist - alle Ecken abgerundet - HÖCHSTE PRIORITÄT */
.dataTables_wrapper .dt-buttons > :only-child .btn:first-child,
.dataTables_wrapper .dt-buttons > :only-child.btn,
.dataTables_wrapper .dt-buttons > :only-child .dt-button:first-child,
.dataTables_wrapper .dt-buttons > :only-child.dt-button,
.dataTables_wrapper .dt-buttons > :only-child button:first-child {
    border-top-left-radius: 1rem !important;
    border-bottom-left-radius: 1rem !important;
    border-top-right-radius: 1rem !important;
    border-bottom-right-radius: 1rem !important;
}

/* =========================
   Mittlere Elemente (Action-Buttons)
   ========================= */

/* Action-Buttons Placeholder */
.dataTables_wrapper .dt-action-buttons-placeholder {
    display: inline-flex !important;
    background: transparent !important;
    margin: 0 !important;
}

/* Action Button Gruppe innerhalb des Placeholders */
.dataTables_wrapper .dt-action-buttons-placeholder .btn-group {
    display: inline-flex !important;
    gap: 0 !important;
    background: transparent !important;
}

/* Tabellenaktionen btn-group wenn sie in dt-action-buttons-placeholder verschoben wurde */
.dataTables_wrapper .dt-action-buttons-placeholder .btn-group[aria-label="Tabellenaktionen"] {
    display: inline-flex !important;
    gap: 0 !important;
}

/* Verbinde Buttons innerhalb derselben Gruppe (kein Abstand) - AUSSER Tabellenaktionen */
.btn-group:not([aria-label="Tabellenaktionen"]) .btn + .btn,
.dataTables_wrapper .dt-buttons .btn-group .btn + .btn {
    margin-left: -1px !important;
}

/* =========================
   Letztes Element (Dropdown-Button)
   ========================= */

/* Nur wenn es NICHT das einzige Element ist */
.dataTables_wrapper .dt-buttons > :last-child:not(:only-child) .btn:last-child,
.dataTables_wrapper .dt-buttons > :last-child:not(:only-child).btn,
.dataTables_wrapper .dt-buttons > :last-child:not(:only-child) .dt-button:last-child,
.dataTables_wrapper .dt-buttons > :last-child:not(:only-child).dt-button,
.dataTables_wrapper .dt-buttons > :last-child:not(:only-child) button:last-child,
.dataTables_wrapper .dt-buttons > .dropdown:last-child:not(:only-child) .dropdown-toggle,
.dataTables_wrapper .dt-buttons > .btn-group:last-child:not(:only-child) .dropdown-toggle {
    border-top-right-radius: 1rem !important;
    border-bottom-right-radius: 1rem !important;
    border-top-left-radius: 0 !important;
    border-bottom-left-radius: 0 !important;
}

/* =========================
   Hover/Focus/Active States für ALLE Button Groups
   ========================= */

/* Hover für alle Button-Groups */
.btn-group > .btn:hover,
.btn-group > .btn.app-btn-primary:hover,
div.btn-group[aria-label="Tabellenaktionen"] > .btn:hover,
.dataTables_wrapper .dt-buttons > .btn:hover,
.dataTables_wrapper .dt-buttons > .dt-button:hover,
.dataTables_wrapper .dt-buttons > button:not(.dropdown-item):hover,
.dataTables_wrapper .dt-buttons > div > .btn:hover,
.dataTables_wrapper .dt-buttons > div > button:not(.dropdown-item):hover,
.dataTables_wrapper .dt-buttons > .btn-group > .btn:hover,
.dataTables_wrapper .dt-action-buttons-placeholder .btn:hover,
.dataTables_wrapper .dt-action-buttons-placeholder .btn-group > .btn:hover {
    z-index: 2 !important;
    position: relative !important;
    background: linear-gradient(135deg, #e74c3c 0%, #d62c3a 100%) !important;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15) !important;
    transform: translateY(-1px) !important;
}

/* Focus für alle Button-Groups */
.btn-group > .btn:focus,
.btn-group > .btn.app-btn-primary:focus,
div.btn-group[aria-label="Tabellenaktionen"] > .btn:focus,
.dataTables_wrapper .dt-buttons > .btn:focus,
.dataTables_wrapper .dt-buttons > .dt-button:focus,
.dataTables_wrapper .dt-buttons > button:not(.dropdown-item):focus,
.dataTables_wrapper .dt-buttons > div > .btn:focus,
.dataTables_wrapper .dt-buttons > div > button:not(.dropdown-item):focus,
.dataTables_wrapper .dt-buttons > .btn-group > .btn:focus,
.dataTables_wrapper .dt-buttons .dt-action-buttons-placeholder .btn:focus {
    z-index: 2 !important;
    position: relative !important;
    box-shadow: 0 0 0 0.2rem rgba(231, 76, 60, 0.25) !important;
}

/* Active für alle Button-Groups */
.btn-group > .btn:active,
.btn-group > .btn.app-btn-primary:active,
.btn-group > .btn.active,
.btn-group > .btn.app-btn-primary.active,
div.btn-group[aria-label="Tabellenaktionen"] > .btn:active,
div.btn-group[aria-label="Tabellenaktionen"] > .btn.active,
.dataTables_wrapper .dt-buttons > .btn:active,
.dataTables_wrapper .dt-buttons > .dt-button:active,
.dataTables_wrapper .dt-buttons > button:not(.dropdown-item):active,
.dataTables_wrapper .dt-buttons > div > .btn:active,
.dataTables_wrapper .dt-buttons > div > button:not(.dropdown-item):active,
.dataTables_wrapper .dt-buttons > .btn-group > .btn:active,
.dataTables_wrapper .dt-buttons .dt-action-buttons-placeholder .btn:active,
.dataTables_wrapper .dt-buttons > .btn.active,
.dataTables_wrapper .dt-buttons > .dt-button.active,
.dataTables_wrapper .dt-buttons > button:not(.dropdown-item).active,
.dataTables_wrapper .dt-buttons > div > .btn.active,
.dataTables_wrapper .dt-buttons > .btn-group > .btn.active,
.dataTables_wrapper .dt-buttons .dt-action-buttons-placeholder .btn.active {
    background: linear-gradient(135deg, #c82333 0%, #a02028 100%) !important;
    border-color: var(--app-primary-color) !important;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.2) !important;
    transform: translateY(0) !important;
}

/* =========================
   Spacing Overrides
   ========================= */

/* Entferne unerwünschte Margin-Klassen */
.dataTables_wrapper .dt-buttons .me-1,
.dataTables_wrapper .dt-buttons .me-2,
.dataTables_wrapper .dt-buttons .ms-1,
.dataTables_wrapper .dt-buttons .ms-2 {
    margin-left: 0 !important;
    margin-right: 0 !important;
}

/* Override für alle direkten Kinder */
.dataTables_wrapper .dt-buttons > * {
    margin-left: 0 !important;
    margin-right: 0 !important;
}

/* =========================
   Icon Button Enhancements
   ========================= */

/* Icon-only buttons (Refresh, etc.) */
.btn-group > .btn > i.bi:only-child,
.dataTables_wrapper .dt-buttons .btn > i.bi:only-child,
.dataTables_wrapper .dt-action-buttons-placeholder .btn > i.bi:only-child {
    font-size: 1.1rem !important;
    line-height: 1 !important;
}

/* Text + Icon buttons */
.btn-group > .btn > i.bi + span,
.btn-group > .btn > i.bi ~ span,
.dataTables_wrapper .dt-buttons .btn > i.bi + span,
.dataTables_wrapper .dt-buttons .btn > i.bi ~ span {
    margin-left: 0.25rem !important;
}

/* Button padding adjustments for icon-only buttons */
.btn-group > .btn:has(> i.bi:only-child),
.dataTables_wrapper .dt-buttons .btn:has(> i.bi:only-child),
.dataTables_wrapper .dt-action-buttons-placeholder .btn:has(> i.bi:only-child) {
    padding: 0.375rem 0.75rem !important;
}

/* =========================
   Dropdown Menu Styling
   ========================= */

/* Stelle sicher, dass Dropdown-Menüs NICHT von Button-Group-Styles betroffen sind */
.dropdown-menu.dt-button-collection,
.dt-button-collection {
    /* Bootstrap Standard Dropdown Styling */
    background-color: var(--bs-dropdown-bg) !important;
    border: 1px solid var(--bs-dropdown-border-color, rgba(0,0,0,.15)) !important;
    border-radius: var(--bs-dropdown-border-radius, 0.375rem) !important;
    padding: var(--bs-dropdown-padding-y, 0.5rem) var(--bs-dropdown-padding-x, 0) !important;
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15) !important;
}

/* Dropdown Items - explizit auf Bootstrap-Standard zurücksetzen */
.dropdown-menu .dropdown-item,
.dropdown-menu.dt-button-collection .dt-button,
.dt-button-collection .dt-button,
.dt-button-collection button {
    /* Reset ALLE Button-Styles */
    background-color: transparent !important;
    background-image: none !important;
    border: none !important;
    border-radius: 0 !important;
    color: var(--bs-dropdown-link-color, #212529) !important;
    display: block !important;
    width: 100% !important;
    padding: var(--bs-dropdown-item-padding-y, 0.25rem) var(--bs-dropdown-item-padding-x, 1rem) !important;
    margin: 0 !important;
    font-weight: 400 !important;
    text-align: inherit !important;
    text-decoration: none !important;
    white-space: nowrap !important;
    filter: none !important;
    transition: color .15s ease-in-out, background-color .15s ease-in-out !important;
}

/* Dropdown Item Hover */
.dropdown-menu .dropdown-item:hover,
.dropdown-menu.dt-button-collection .dt-button:hover,
.dt-button-collection .dt-button:hover,
.dt-button-collection button:hover {
    background-color: var(--bs-dropdown-link-hover-bg, #f8f9fa) !important;
    color: var(--bs-dropdown-link-hover-color, #212529) !important;
    text-decoration: none !important;
    filter: none !important;
}

/* Dropdown Item Active */
.dropdown-menu .dropdown-item:active,
.dropdown-menu .dropdown-item.active,
.dropdown-menu.dt-button-collection .dt-button:active,
.dropdown-menu.dt-button-collection .dt-button.active,
.dt-button-collection .dt-button:active,
.dt-button-collection .dt-button.active,
.dt-button-collection button:active,
.dt-button-collection button.active {
    background-color: var(--bs-dropdown-link-active-bg, #e9ecef) !important;
    color: var(--bs-dropdown-link-active-color, #212529) !important;
    filter: none !important;
}

/* Spezial-Styling für ColVis aktive Spalten */
.dt-button-collection .dt-button.buttons-columnVisibility.active {
    background-color: var(--bs-dropdown-link-active-bg, #e9ecef) !important;
    font-weight: 600 !important;
}