/* Overrides for Tailwind CSS - DataTables 2.3.4 */

table {
    margin: 0 auto;
    width: 100%;
    clear: both;
    border-collapse: collapse;
}

/* =========================
   DOM Layout Anpassungen
   ========================= */

/* Wrapper Grid Layout */
.dt-container {
    display: grid;
    gap: 1rem;
}

    /* Top Controls - Buttons, Length, Search in einer Zeile */
    .dt-container .dt-buttons,
    .dt-container .dt-length,
    .dt-container .dt-search {
        display: inline-block;
        vertical-align: middle;
    }

    /* Top Row: Buttons links, Length in der Mitte, Search rechts */
    .dt-container .dt-buttons {
        float: left;
    }

    .dt-container .dt-length {
        float: left;
        margin-left: 1rem;
    }

    .dt-container .dt-search {
        float: right;
    }

    /* Bottom Row: Info links, Pagination rechts */
    .dt-container .dt-info {
        float: left;
        padding-top: 0.75em;
    }

    .dt-container .dt-paging {
        float: right;
        padding-top: 0.75em;
    }

    /* Clearfix nach Controls */
    .dt-container::after {
        content: "";
        display: table;
        clear: both;
    }

    /* =========================
   Form Fields
   ========================= */

    /* Length Select Dropdown */
    .dt-container .dt-length select,
    .dt-container .dt-length .dt-input {
        border: 1px solid #aaa;
        border-radius: 3px;
        padding: 5px;
        padding-right: 25px;
        background-color: transparent;
        color: inherit;
        margin-left: 5px;
        margin-right: 5px;
    }

/* Dark Mode - Length Select */
html.dark .dt-container .dt-length select,
html.dark .dt-container .dt-length .dt-input {
    border: 1px solid rgba(255, 255, 255, 0.2);
    background-color: var(--dt-html-background);
    color: white;
}

/* Search Input */
.dt-container .dt-search {
    display: flex;
    align-items: center;
}

    .dt-container .dt-search input,
    .dt-container .dt-search .dt-input {
        color: #4a5568;
        padding-left: 1rem;
        padding-right: 1rem;
        padding-top: 0.5rem;
        padding-bottom: 0.5rem;
        line-height: 1.25;
        border-width: 2px;
        border-radius: 0.25rem;
        border-color: #edf2f7;
        background-color: #edf2f7;
        margin-left: 5px;
    }

/* Dark Mode - Search Input */
html.dark .dt-container .dt-search input,
html.dark .dt-container .dt-search .dt-input {
    border: 1px solid rgba(255, 255, 255, 0.2);
    background-color: var(--dt-html-background);
    color: white;
}

/* Center align filter input on small screens */
@media (max-width: 640px) {
    .dt-container .dt-buttons,
    .dt-container .dt-length,
    .dt-container .dt-search {
        float: none;
        display: block;
        text-align: center;
        margin: 0.5rem 0;
    }

    .dt-container .dt-info,
    .dt-container .dt-paging {
        float: none;
        text-align: center;
    }
}

/* =========================
   Row Hover
   ========================= */

/* Besserer genereller hover-Style */
table.dataTable.hover tbody tr:hover {
    background-color: rgba(243, 244, 246) !important;
    color: rgb(17, 24, 39) !important;
    cursor: pointer;
}

/* Dark Mode */
.dark table.dataTable.hover tbody tr:hover {
    background-color: rgba(55, 65, 81) !important;
    color: rgb(229, 231, 235) !important;
    cursor: pointer;
}

/* =========================
   Pagination Buttons
   ========================= */

.dt-container .dt-paging .dt-paging-button {
    font-weight: 700;
    border-radius: 0.25rem;
    border: 1px solid transparent;
    padding: 0.25rem 0.5rem;
    margin: 0 0.125rem;
    background: transparent;
    color: inherit;
    cursor: pointer;
}

    /* Current Page */
    .dt-container .dt-paging .dt-paging-button.current {
        color: #fff !important;
        box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
        font-weight: 700;
        border-radius: 0.25rem;
        background: #3F83F8 !important;
        border: 1px solid transparent;
    }

    /* Hover */
    .dt-container .dt-paging .dt-paging-button:hover:not(.disabled) {
        color: #fff !important;
        box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
        font-weight: 700;
        border-radius: 0.25rem;
        background: #244b8f !important;
        border: 1px solid transparent;
    }

    /* Disabled */
    .dt-container .dt-paging .dt-paging-button.disabled {
        opacity: 0.5;
        cursor: not-allowed;
    }

/* =========================
   Table Border
   ========================= */

table.dataTable.no-footer {
    border-bottom: 1px solid #e2e8f0;
    margin-top: 0.75em;
    margin-bottom: 0.75em;
}

/* =========================
   Responsive Dropdown
   ========================= */

/* Dropdown Children of Row */
table.dataTable > tbody > tr.child ul.dtr-details {
    display: inline-block;
    list-style-type: none;
    margin: 0;
    padding: 0;
    width: 100%;
}

table.dataTable > tbody > tr.child span.dtr-title {
    display: inline-block;
    min-width: 130px;
    font-weight: bold;
    font-size: 0.8em;
}

table.dataTable > tbody > tr.child span.dtr-data {
    display: inline-block;
}

/* Text wrap in dropdown details */
span.dtr-data {
    display: inline-block;
    white-space: normal;
}

/* =========================
   Control Column (noVis)
   ========================= */

table.dataTable tbody td.noVis,
table.dataTable thead th.noVis,
table.dataTable tfoot th.noVis {
    padding-top: 0px;
    padding-left: 5px;
    padding-right: 5px;
    padding-bottom: 0px;
    max-width: 25px;
    width: 10px;
}

/* =========================
   Dropdown Icons (Responsive Control Column)
   ========================= */



/* ===================================
   LÖSUNG: Custom SVG Icons für Responsive Dropdown
   =================================== */

/* WICHTIG: DataTables 2.x Standard-Icons komplett entfernen */
/*table.dataTable.dtr-inline.collapsed > tbody > tr > td.dtr-control::after,
table.dataTable.dtr-inline.collapsed > tbody > tr > th.dtr-control::after,
table.dataTable.dtr-inline.collapsed > tbody > tr.parent > td.dtr-control::after,
table.dataTable.dtr-inline.collapsed > tbody > tr.parent > th.dtr-control::after {
    display: none !important;
    content: none !important;
}*/

/* Closed Dropdown - Plus Icon */
/*table.dataTable.dtr-inline.collapsed > tbody > tr > td.dtr-control::before,
table.dataTable.dtr-inline.collapsed > tbody > tr > th.dtr-control::before {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='lightgray' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='lucide lucide-chevron-right-square'><rect width='18' height='18' x='3' y='3' rx='2'/><path d='m10 8 4 4-4 4'/></svg>");
    background-repeat: no-repeat;
    background-position: center center;
}*/

/* Opened Dropdown - Minus Icon */
/*table.dataTable.dtr-inline.collapsed > tbody > tr.parent > td.dtr-control::before,
table.dataTable.dtr-inline.collapsed > tbody > tr.parent > th.dtr-control::before {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='lightgray' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' class='lucide lucide-chevron-down-square'><rect width='18' height='18' x='3' y='3' rx='2'/><path d='m16 10-4 4-4-4'/></svg>");
    background-repeat: no-repeat;
    background-position: center center;
}*/

/* =========================
   Sortier-Pfeile in den Spalten (HEADER)
   ========================= */

/* Sortierpfeile bleiben sichtbar, nur für noVis-Spalte ausblenden */
table.dataTable thead th.noVis .dt-column-order {
    display: none !important;
}

/* =========================
   Order Column Colors
   ========================= */

/* Order Column (Odd Row) */
table.dataTable.display > tbody > tr.odd > .sorting_1,
table.dataTable.order-column.stripe > tbody > tr.odd > .sorting_1 {
    box-shadow: inset 0 0 0 9999px rgba(0, 0, 0, 0.054);
}

/* Order Column (Even Row) */
table.dataTable.display > tbody > tr.even > .sorting_1,
table.dataTable.order-column.stripe > tbody > tr.even > .sorting_1 {
    box-shadow: inset 0 0 0 9999px rgba(0, 0, 0, 0.054);
}

/* =========================
   Selected Row
   ========================= */

table.dataTable.display > tbody > tr.selected > *,
table.dataTable.display > tbody > tr.odd.selected > *,
table.dataTable.display > tbody > tr.selected:hover > * {
    box-shadow: inset 0 0 0 9999px #acbad4 !important;
    color: #333;
    background-color: #fff;
}

/* =========================
   DataTables Buttons
   ========================= */

.dt-container .dt-buttons {
    display: inline-flex;
    gap: 0.5rem;
}

.dt-button {
    border-radius: 0.375rem !important;
    padding: 0.5rem 1rem !important;
    border: 1px solid #d1d5db;
    background-color: white;
    color: #374151;
    cursor: pointer;
    font-size: 0.875rem;
    font-weight: 500;
}

    .dt-button:hover {
        background-color: #f3f4f6;
    }

/* Dark Mode - Buttons */
html.dark .dt-button {
    background-color: #374151;
    color: white !important;
    border-color: #4b5563;
}

    html.dark .dt-button:hover {
        background-color: #4b5563;
    }

/* Buttons with dropdown arrow */
.dt-button .dt-button-down-arrow {
    margin-left: 0.25rem;
}

/* =========================
   Fixed Header/Footer
   ========================= */

table.fixedHeader-floating {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

    table.fixedHeader-floating tfoot th,
    table.fixedHeader-floating tfoot td {
        padding-top: 0 !important;
        padding-bottom: 0 !important;
        vertical-align: middle !important;
        background-color: #1f2937 !important;
        color: white !important;
    }

/* =========================
   Info Text Styling
   ========================= */

.dt-container .dt-info {
    font-size: 0.875rem;
    color: #6b7280;
}

html.dark .dt-container .dt-info {
    color: #9ca3af;
}

/* Select Info innerhalb dt-info */
.dt-info .select-info {
    margin-left: 1rem;
}

.dt-info .select-item {
    margin-left: 0.5rem;
    padding: 0.125rem 0.5rem;
    background-color: #e5e7eb;
    border-radius: 0.25rem;
    font-size: 0.75rem;
}

html.dark .dt-info .select-item {
    background-color: #374151;
}

/* Header mit Flexbox - Sortierpfeile immer rechts */
table.dataTable thead th .dt-column-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

table.dataTable thead th .dt-column-title {
    flex: 1;
}

table.dataTable thead th .dt-column-order {
    flex-shrink: 0;
    margin-left: 0.5rem;
}

/* Oder falls du nur oben/unten anpassen willst: */
div.dt-container div.dt-layout-row {
    margin-top: 0;
    margin-bottom: 0;
}

table.dataTable thead th .dt-column-header {
    flex-direction: row !important;
}

table.dataTable thead th .dt-column-order {
    margin-left: 0.5rem;
    margin-right: 0;
}

/* ============================================ */
/* BETRIEBSKONTROLLEN & WARTUNGEN - DATATABLES */
/* ============================================ */

/* ✅ ALLE 4 Frozen Spalten - Background mit höherer Spezifität */
table#bk-datatable tbody tr td.sticky-col,
table#bk-datatable tbody tr td.sticky-col-1,
table#bk-datatable tbody tr td.sticky-col-2,
table#bk-datatable tbody tr td.sticky-col-3,
table#bk-datatable tbody tr td.sticky-col-4,
table#wartung-datatable tbody tr td.sticky-col,
table#wartung-datatable tbody tr td.sticky-col-1,
table#wartung-datatable tbody tr td.sticky-col-2,
table#wartung-datatable tbody tr td.sticky-col-3,
table#wartung-datatable tbody tr td.sticky-col-4 {
    background-color: rgb(249, 250, 251) !important;
    color: rgb(17, 24, 39) !important; /* Dunkler Text im Light Mode */
    white-space: nowrap !important; /* Kein Zeilenumbruch */
    padding: 0.5rem 0.75rem !important; /* Mehr Padding für bessere Lesbarkeit */
}

/* Header alle 4 Spalten */
table#bk-datatable thead tr th.sticky-col,
table#bk-datatable thead tr th.sticky-col-1,
table#bk-datatable thead tr th.sticky-col-2,
table#bk-datatable thead tr th.sticky-col-3,
table#bk-datatable thead tr th.sticky-col-4,
table#wartung-datatable thead tr th.sticky-col,
table#wartung-datatable thead tr th.sticky-col-1,
table#wartung-datatable thead tr th.sticky-col-2,
table#wartung-datatable thead tr th.sticky-col-3,
table#wartung-datatable thead tr th.sticky-col-4 {
    background-color: rgb(249, 250, 251) !important;
    color: rgb(17, 24, 39) !important;
    white-space: nowrap !important;
}

/* Footer alle 4 Spalten */
table#bk-datatable tfoot tr th.sticky-col,
table#bk-datatable tfoot tr th.sticky-col-1,
table#bk-datatable tfoot tr th.sticky-col-2,
table#bk-datatable tfoot tr th.sticky-col-3,
table#bk-datatable tfoot tr th.sticky-col-4,
table#wartung-datatable tfoot tr th.sticky-col,
table#wartung-datatable tfoot tr th.sticky-col-1,
table#wartung-datatable tfoot tr th.sticky-col-2,
table#wartung-datatable tfoot tr th.sticky-col-3,
table#wartung-datatable tfoot tr th.sticky-col-4 {
    background-color: rgb(249, 250, 251) !important;
    color: rgb(17, 24, 39) !important;
    white-space: nowrap !important;
}

/* ==================== DARK MODE ==================== */
/* Dark Mode - Alle 4 Spalten */
.dark table#bk-datatable tbody tr td.sticky-col,
.dark table#bk-datatable tbody tr td.sticky-col-1,
.dark table#bk-datatable tbody tr td.sticky-col-2,
.dark table#bk-datatable tbody tr td.sticky-col-3,
.dark table#bk-datatable tbody tr td.sticky-col-4,
.dark table#wartung-datatable tbody tr td.sticky-col,
.dark table#wartung-datatable tbody tr td.sticky-col-1,
.dark table#wartung-datatable tbody tr td.sticky-col-2,
.dark table#wartung-datatable tbody tr td.sticky-col-3,
.dark table#wartung-datatable tbody tr td.sticky-col-4 {
    background-color: rgb(55, 65, 81) !important; /* gray-700 */
    color: rgb(243, 244, 246) !important; /* Heller Text! */
}

.dark table#bk-datatable thead tr th.sticky-col,
.dark table#bk-datatable thead tr th.sticky-col-1,
.dark table#bk-datatable thead tr th.sticky-col-2,
.dark table#bk-datatable thead tr th.sticky-col-3,
.dark table#bk-datatable thead tr th.sticky-col-4,
.dark table#wartung-datatable thead tr th.sticky-col,
.dark table#wartung-datatable thead tr th.sticky-col-1,
.dark table#wartung-datatable thead tr th.sticky-col-2,
.dark table#wartung-datatable thead tr th.sticky-col-3,
.dark table#wartung-datatable thead tr th.sticky-col-4 {
    background-color: rgb(55, 65, 81) !important;
    color: rgb(243, 244, 246) !important; /* Heller Text! */
}

.dark table#bk-datatable tfoot tr th.sticky-col,
.dark table#bk-datatable tfoot tr th.sticky-col-1,
.dark table#bk-datatable tfoot tr th.sticky-col-2,
.dark table#bk-datatable tfoot tr th.sticky-col-3,
.dark table#bk-datatable tfoot tr th.sticky-col-4,
.dark table#wartung-datatable tfoot tr th.sticky-col,
.dark table#wartung-datatable tfoot tr th.sticky-col-1,
.dark table#wartung-datatable tfoot tr th.sticky-col-2,
.dark table#wartung-datatable tfoot tr th.sticky-col-3,
.dark table#wartung-datatable tfoot tr th.sticky-col-4 {
    background-color: rgb(55, 65, 81) !important;
    color: rgb(243, 244, 246) !important; /* Heller Text! */
}

/* DataTables Stripe Override für alle 4 Spalten */
table#bk-datatable.stripe tbody tr.odd td.sticky-col,
table#bk-datatable.stripe tbody tr.odd td.sticky-col-1,
table#bk-datatable.stripe tbody tr.odd td.sticky-col-2,
table#bk-datatable.stripe tbody tr.odd td.sticky-col-3,
table#bk-datatable.stripe tbody tr.odd td.sticky-col-4,
table#wartung-datatable.stripe tbody tr.odd td.sticky-col,
table#wartung-datatable.stripe tbody tr.odd td.sticky-col-1,
table#wartung-datatable.stripe tbody tr.odd td.sticky-col-2,
table#wartung-datatable.stripe tbody tr.odd td.sticky-col-3,
table#wartung-datatable.stripe tbody tr.odd td.sticky-col-4 {
    background-color: rgb(249, 250, 251) !important;
    color: rgb(17, 24, 39) !important;
}

table#bk-datatable.stripe tbody tr.even td.sticky-col,
table#bk-datatable.stripe tbody tr.even td.sticky-col-1,
table#bk-datatable.stripe tbody tr.even td.sticky-col-2,
table#bk-datatable.stripe tbody tr.even td.sticky-col-3,
table#bk-datatable.stripe tbody tr.even td.sticky-col-4,
table#wartung-datatable.stripe tbody tr.even td.sticky-col,
table#wartung-datatable.stripe tbody tr.even td.sticky-col-1,
table#wartung-datatable.stripe tbody tr.even td.sticky-col-2,
table#wartung-datatable.stripe tbody tr.even td.sticky-col-3,
table#wartung-datatable.stripe tbody tr.even td.sticky-col-4 {
    background-color: rgb(249, 250, 251) !important;
    color: rgb(17, 24, 39) !important;
}

.dark table#bk-datatable.stripe tbody tr.odd td.sticky-col,
.dark table#bk-datatable.stripe tbody tr.odd td.sticky-col-1,
.dark table#bk-datatable.stripe tbody tr.odd td.sticky-col-2,
.dark table#bk-datatable.stripe tbody tr.odd td.sticky-col-3,
.dark table#bk-datatable.stripe tbody tr.odd td.sticky-col-4,
.dark table#wartung-datatable.stripe tbody tr.odd td.sticky-col,
.dark table#wartung-datatable.stripe tbody tr.odd td.sticky-col-1,
.dark table#wartung-datatable.stripe tbody tr.odd td.sticky-col-2,
.dark table#wartung-datatable.stripe tbody tr.odd td.sticky-col-3,
.dark table#wartung-datatable.stripe tbody tr.odd td.sticky-col-4 {
    background-color: rgb(55, 65, 81) !important;
    color: rgb(243, 244, 246) !important;
}

.dark table#bk-datatable.stripe tbody tr.even td.sticky-col,
.dark table#bk-datatable.stripe tbody tr.even td.sticky-col-1,
.dark table#bk-datatable.stripe tbody tr.even td.sticky-col-2,
.dark table#bk-datatable.stripe tbody tr.even td.sticky-col-3,
.dark table#bk-datatable.stripe tbody tr.even td.sticky-col-4,
.dark table#wartung-datatable.stripe tbody tr.even td.sticky-col,
.dark table#wartung-datatable.stripe tbody tr.even td.sticky-col-1,
.dark table#wartung-datatable.stripe tbody tr.even td.sticky-col-2,
.dark table#wartung-datatable.stripe tbody tr.even td.sticky-col-3,
.dark table#wartung-datatable.stripe tbody tr.even td.sticky-col-4 {
    background-color: rgb(55, 65, 81) !important;
    color: rgb(243, 244, 246) !important;
}

#bk-datatable td,
#wartung-datatable td {
    padding: 0.15rem 0.35rem !important;
    white-space: nowrap !important; /* Kein Zeilenumbruch in der gesamten Tabelle */
}

#bk-datatable th,
#wartung-datatable th {
    white-space: nowrap !important; /* Kein Zeilenumbruch in Headers */
}

/* ==================== CONTAINER ==================== */
#table-scroll-wrapper {
    /* max-height entfernt - wird durch Flexbox vom Parent gesteuert */
    overflow: auto;
    position: relative;
    scroll-behavior: smooth;
    height: 100%; /* Nimmt volle Höhe vom flex-1 Parent */
}

/* ==================== STICKY HEADER - IMMER VERTIKAL STICKY ==================== */
#bk-datatable thead,
#wartung-datatable thead {
    position: sticky !important;
    top: 0 !important;
    z-index: 9 !important;
}

    #bk-datatable thead th,
    #wartung-datatable thead th {
        position: sticky !important;
        top: 0 !important;
        z-index: 9 !important;
    }

/* ==================== SCROLLBAR ==================== */
#table-scroll-wrapper::-webkit-scrollbar {
    height: 10px;
    width: 10px;
}

#table-scroll-wrapper::-webkit-scrollbar-track {
    border-radius: 5px;
}

#table-scroll-wrapper::-webkit-scrollbar-thumb {
    border-radius: 5px;
}

/* ==================== RESPONSIVE: AB 1440px (LARGE) ==================== */
@media (min-width: 1440px) {
    /* ✅ STICKY COLUMNS - 4 Spalten ohne feste Breiten */
    /* Die left-Werte werden dynamisch per JavaScript gesetzt */
    
    /* Spalte 1: Straße */
    table#bk-datatable tbody tr td.sticky-col-1,
    table#wartung-datatable tbody tr td.sticky-col-1 {
        position: sticky !important;
        z-index: 8 !important;
    }
    
    table#bk-datatable thead tr th.sticky-col-1,
    table#bk-datatable tfoot tr th.sticky-col-1,
    table#wartung-datatable thead tr th.sticky-col-1,
    table#wartung-datatable tfoot tr th.sticky-col-1 {
        position: sticky !important;
        top: 0 !important;
        z-index: 12 !important;
    }
    
    /* Spalte 2: Nummer */
    table#bk-datatable tbody tr td.sticky-col-2,
    table#wartung-datatable tbody tr td.sticky-col-2 {
        position: sticky !important;
        z-index: 8 !important;
    }
    
    table#bk-datatable thead tr th.sticky-col-2,
    table#bk-datatable tfoot tr th.sticky-col-2,
    table#wartung-datatable thead tr th.sticky-col-2,
    table#wartung-datatable tfoot tr th.sticky-col-2 {
        position: sticky !important;
        top: 0 !important;
        z-index: 12 !important;
    }
    
    /* Spalte 3: PLZ */
    table#bk-datatable tbody tr td.sticky-col-3,
    table#wartung-datatable tbody tr td.sticky-col-3 {
        position: sticky !important;
        z-index: 8 !important;
    }
    
    table#bk-datatable thead tr th.sticky-col-3,
    table#bk-datatable tfoot tr th.sticky-col-3,
    table#wartung-datatable thead tr th.sticky-col-3,
    table#wartung-datatable tfoot tr th.sticky-col-3 {
        position: sticky !important;
        top: 0 !important;
        z-index: 12 !important;
    }
    
    /* Spalte 4: Stadt */
    table#bk-datatable tbody tr td.sticky-col-4,
    table#wartung-datatable tbody tr td.sticky-col-4 {
        position: sticky !important;
        z-index: 8 !important;
    }
    
    table#bk-datatable thead tr th.sticky-col-4,
    table#bk-datatable tfoot tr th.sticky-col-4,
    table#wartung-datatable thead tr th.sticky-col-4,
    table#wartung-datatable tfoot tr th.sticky-col-4 {
        position: sticky !important;
        top: 0 !important;
        z-index: 12 !important;
    }
    
    /* Border zwischen frozen und scrollbaren Spalten */
    table#bk-datatable tbody tr td.sticky-col-4,
    table#bk-datatable thead tr th.sticky-col-4,
    table#bk-datatable tfoot tr th.sticky-col-4,
    table#wartung-datatable tbody tr td.sticky-col-4,
    table#wartung-datatable thead tr th.sticky-col-4,
    table#wartung-datatable tfoot tr th.sticky-col-4 {
        border-right: 2px solid rgb(229, 231, 235) !important;
    }
    
    .dark table#bk-datatable tbody tr td.sticky-col-4,
    .dark table#bk-datatable thead tr th.sticky-col-4,
    .dark table#bk-datatable tfoot tr th.sticky-col-4,
    .dark table#wartung-datatable tbody tr td.sticky-col-4,
    .dark table#wartung-datatable thead tr th.sticky-col-4,
    .dark table#wartung-datatable tfoot tr th.sticky-col-4 {
        border-right: 2px solid rgb(75, 85, 99) !important;
    }
}

/* ==================== RESPONSIVE: UNTER 1440px ==================== */
@media (max-width: 1439px) {
    /* ✅ ALLE 4 Spalten NICHT horizontal sticky - scrollt mit */
    table#bk-datatable tbody tr td.sticky-col,
    table#bk-datatable tbody tr td.sticky-col-1,
    table#bk-datatable tbody tr td.sticky-col-2,
    table#bk-datatable tbody tr td.sticky-col-3,
    table#bk-datatable tbody tr td.sticky-col-4,
    table#bk-datatable thead tr th.sticky-col,
    table#bk-datatable thead tr th.sticky-col-1,
    table#bk-datatable thead tr th.sticky-col-2,
    table#bk-datatable thead tr th.sticky-col-3,
    table#bk-datatable thead tr th.sticky-col-4,
    table#bk-datatable tfoot tr th.sticky-col,
    table#bk-datatable tfoot tr th.sticky-col-1,
    table#bk-datatable tfoot tr th.sticky-col-2,
    table#bk-datatable tfoot tr th.sticky-col-3,
    table#bk-datatable tfoot tr th.sticky-col-4,
    table#wartung-datatable tbody tr td.sticky-col,
    table#wartung-datatable tbody tr td.sticky-col-1,
    table#wartung-datatable tbody tr td.sticky-col-2,
    table#wartung-datatable tbody tr td.sticky-col-3,
    table#wartung-datatable tbody tr td.sticky-col-4,
    table#wartung-datatable thead tr th.sticky-col,
    table#wartung-datatable thead tr th.sticky-col-1,
    table#wartung-datatable thead tr th.sticky-col-2,
    table#wartung-datatable thead tr th.sticky-col-3,
    table#wartung-datatable thead tr th.sticky-col-4,
    table#wartung-datatable tfoot tr th.sticky-col,
    table#wartung-datatable tfoot tr th.sticky-col-1,
    table#wartung-datatable tfoot tr th.sticky-col-2,
    table#wartung-datatable tfoot tr th.sticky-col-3,
    table#wartung-datatable tfoot tr th.sticky-col-4 {
        position: relative !important;
        left: auto !important;
    }
}

/* ==================== PERIODEN-SPALTEN FARBEN (BK) ==================== */
/* WICHTIG: Muss NACH allen anderen Styles kommen! */

/* Light Mode - Header & Footer */
#bk-datatable thead th.periode-col-odd,
#bk-datatable tfoot th.periode-col-odd {
    background-color: rgba(59, 130, 246, 0.08) !important;
}

#bk-datatable thead th.periode-col-even,
#bk-datatable tfoot th.periode-col-even {
    background-color: rgba(156, 163, 175, 0.08) !important;
}

/* Body Zellen - Normal State mit HÖCHSTER Spezifität */
table#bk-datatable tbody tr td.periode-col-odd {
    background-color: rgba(59, 130, 246, 0.06) !important;
}
/*
table#bk-datatable tbody tr td.periode-col-even {
    background-color: rgba(156, 163, 175, 0.06) !important;
}*/

/* Stripe Override - MUSS alle Kombinationen abdecken */
table#bk-datatable.stripe tbody tr.odd td.periode-col-odd,
table#bk-datatable.stripe tbody tr.even td.periode-col-odd,
table#bk-datatable tbody tr.odd td.periode-col-odd,
table#bk-datatable tbody tr.even td.periode-col-odd {
    background-color: rgba(59, 130, 246, 0.06) !important;
}

table#bk-datatable.stripe tbody tr.odd td.periode-col-even,
table#bk-datatable.stripe tbody tr.even td.periode-col-even,
table#bk-datatable tbody tr.odd td.periode-col-even,
table#bk-datatable tbody tr.even td.periode-col-even {
    background-color: rgba(156, 163, 175, 0.06) !important;
}

/* Dark Mode - Header & Footer */
.dark #bk-datatable thead th.periode-col-odd,
.dark #bk-datatable tfoot th.periode-col-odd {
    background-color: rgba(59, 130, 246, 0.15) !important;
}

.dark #bk-datatable thead th.periode-col-even,
.dark #bk-datatable tfoot th.periode-col-even {
    background-color: rgba(75, 85, 99, 0.15) !important;
}

/* Dark Mode - Body Normal */
.dark table#bk-datatable tbody tr td.periode-col-odd {
    background-color: rgba(59, 130, 246, 0.12) !important;
}

.dark table#bk-datatable tbody tr td.periode-col-even {
    background-color: rgba(75, 85, 99, 0.12) !important;
}

/* Dark Mode - Stripe Override */
.dark table#bk-datatable.stripe tbody tr.odd td.periode-col-odd,
.dark table#bk-datatable.stripe tbody tr.even td.periode-col-odd,
.dark table#bk-datatable tbody tr.odd td.periode-col-odd,
.dark table#bk-datatable tbody tr.even td.periode-col-odd {
    background-color: rgba(59, 130, 246, 0.12) !important;
}

.dark table#bk-datatable.stripe tbody tr.odd td.periode-col-even,
.dark table#bk-datatable.stripe tbody tr.even td.periode-col-even,
.dark table#bk-datatable tbody tr.odd td.periode-col-even,
.dark table#bk-datatable tbody tr.even td.periode-col-even {
    background-color: rgba(75, 85, 99, 0.12) !important;
}

/* Order Column Override - damit Sortierspalte die Farben nicht überschreibt */
table#bk-datatable.display > tbody > tr.odd > td.sorting_1.periode-col-odd,
table#bk-datatable.order-column.stripe > tbody > tr.odd > td.sorting_1.periode-col-odd,
table#bk-datatable.display > tbody > tr.even > td.sorting_1.periode-col-odd,
table#bk-datatable.order-column.stripe > tbody > tr.even > td.sorting_1.periode-col-odd {
    box-shadow: none !important;
    background-color: rgba(59, 130, 246, 0.06) !important;
}

table#bk-datatable.display > tbody > tr.odd > td.sorting_1.periode-col-even,
table#bk-datatable.order-column.stripe > tbody > tr.odd > td.sorting_1.periode-col-even,
table#bk-datatable.display > tbody > tr.even > td.sorting_1.periode-col-even,
table#bk-datatable.order-column.stripe > tbody > tr.even > td.sorting_1.periode-col-even {
    box-shadow: none !important;
    background-color: rgba(156, 163, 175, 0.06) !important;
}

/* Dark Mode - Order Column Override */
.dark table#bk-datatable.display > tbody > tr.odd > td.sorting_1.periode-col-odd,
.dark table#bk-datatable.order-column.stripe > tbody > tr.odd > td.sorting_1.periode-col-odd,
.dark table#bk-datatable.display > tbody > tr.even > td.sorting_1.periode-col-odd,
.dark table#bk-datatable.order-column.stripe > tbody > tr.even > td.sorting_1.periode-col-odd {
    box-shadow: none !important;
    background-color: rgba(59, 130, 246, 0.12) !important;
}

/* ==================== MONATS-SPALTEN FARBEN (WARTUNGEN) ==================== */

/* Light Mode - Header & Footer */
#wartung-datatable thead th.monat-col-odd,
#wartung-datatable tfoot th.monat-col-odd {
    background-color: rgba(59, 130, 246, 0.08) !important;
}

#wartung-datatable thead th.monat-col-even,
#wartung-datatable tfoot th.monat-col-even {
    background-color: rgba(156, 163, 175, 0.08) !important;
}

/* Body Zellen - Normal State mit HÖCHSTER Spezifität */
table#wartung-datatable tbody tr td.monat-col-odd {
    background-color: rgba(59, 130, 246, 0.06) !important;
}

/* Stripe Override - MUSS alle Kombinationen abdecken */
table#wartung-datatable.stripe tbody tr.odd td.monat-col-odd,
table#wartung-datatable.stripe tbody tr.even td.monat-col-odd,
table#wartung-datatable tbody tr.odd td.monat-col-odd,
table#wartung-datatable tbody tr.even td.monat-col-odd {
    background-color: rgba(59, 130, 246, 0.06) !important;
}

table#wartung-datatable.stripe tbody tr.odd td.monat-col-even,
table#wartung-datatable.stripe tbody tr.even td.monat-col-even,
table#wartung-datatable tbody tr.odd td.monat-col-even,
table#wartung-datatable tbody tr.even td.monat-col-even {
    background-color: rgba(156, 163, 175, 0.06) !important;
}

/* Dark Mode - Header & Footer */
.dark #wartung-datatable thead th.monat-col-odd,
.dark #wartung-datatable tfoot th.monat-col-odd {
    background-color: rgba(59, 130, 246, 0.15) !important;
}

.dark #wartung-datatable thead th.monat-col-even,
.dark #wartung-datatable tfoot th.monat-col-even {
    background-color: rgba(75, 85, 99, 0.15) !important;
}

/* Dark Mode - Body Normal */
.dark table#wartung-datatable tbody tr td.monat-col-odd {
    background-color: rgba(59, 130, 246, 0.12) !important;
}

.dark table#wartung-datatable tbody tr td.monat-col-even {
    background-color: rgba(75, 85, 99, 0.12) !important;
}

/* Dark Mode - Stripe Override */
.dark table#wartung-datatable.stripe tbody tr.odd td.monat-col-odd,
.dark table#wartung-datatable.stripe tbody tr.even td.monat-col-odd,
.dark table#wartung-datatable tbody tr.odd td.monat-col-odd,
.dark table#wartung-datatable tbody tr.even td.monat-col-odd {
    background-color: rgba(59, 130, 246, 0.12) !important;
}

.dark table#wartung-datatable.stripe tbody tr.odd td.monat-col-even,
.dark table#wartung-datatable.stripe tbody tr.even td.monat-col-even,
.dark table#wartung-datatable tbody tr.odd td.monat-col-even,
.dark table#wartung-datatable tbody tr.even td.monat-col-even {
    background-color: rgba(75, 85, 99, 0.12) !important;
}

/* Order Column Override - damit Sortierspalte die Farben nicht überschreibt */
table#wartung-datatable.display > tbody > tr.odd > td.sorting_1.monat-col-odd,
table#wartung-datatable.order-column.stripe > tbody > tr.odd > td.sorting_1.monat-col-odd,
table#wartung-datatable.display > tbody > tr.even > td.sorting_1.monat-col-odd,
table#wartung-datatable.order-column.stripe > tbody > tr.even > td.sorting_1.monat-col-odd {
    box-shadow: none !important;
    background-color: rgba(59, 130, 246, 0.06) !important;
}

table#wartung-datatable.display > tbody > tr.odd > td.sorting_1.monat-col-even,
table#wartung-datatable.order-column.stripe > tbody > tr.odd > td.sorting_1.monat-col-even,
table#wartung-datatable.display > tbody > tr.even > td.sorting_1.monat-col-even,
table#wartung-datatable.order-column.stripe > tbody > tr.even > td.sorting_1.monat-col-even {
    box-shadow: none !important;
    background-color: rgba(156, 163, 175, 0.06) !important;
}

/* Dark Mode - Order Column Override */
.dark table#wartung-datatable.display > tbody > tr.odd > td.sorting_1.monat-col-odd,
.dark table#wartung-datatable.order-column.stripe > tbody > tr.odd > td.sorting_1.monat-col-odd,
.dark table#wartung-datatable.display > tbody > tr.even > td.sorting_1.monat-col-odd,
.dark table#wartung-datatable.order-column.stripe > tbody > tr.even > td.sorting_1.monat-col-odd {
    box-shadow: none !important;
    background-color: rgba(59, 130, 246, 0.12) !important;
}


/* HOVER CELL CSS */
/* ✅ Generischer Container für Zellen mit Hover-Effekt */
.cell-hover-container {
    position: relative;
}

/* ✅ Verkürzte Anzeige (Standard) */
.cell-truncated {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ✅ Vollständige Anzeige (beim Hover) - Schöner! */
.cell-full {
    display: none;
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%); /* ✨ Vertikal zentriert zur Zelle */
    background: white;
    border: 2px solid #3b82f6; /* ✨ Blauer Rahmen */
    border-radius: 8px;
    padding: 10px 14px;
    box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1); /* ✨ Stärkerer Schatten */
    white-space: normal;
    word-wrap: break-word;
    z-index: 49;
    min-width: 200px;
    max-width: 400px;
    font-weight: 500; /* ✨ Etwas fetter */
    line-height: 1.5;
    opacity: 0; /* ✨ Für Animation */
    transition: opacity 0.15s ease-in-out; /* ✨ Sanfte Einblendung */
}

/* ✅ Dark Mode Support */
.dark .cell-full {
    background: #1e293b;
    border-color: #3b82f6;
    color: #f1f5f9;
}

/* ✅ Hover-Effekt mit Animation */
.cell-hover-container:hover .cell-truncated {
    opacity: 0;
    transition: opacity 0.15s ease-in-out;
}

.cell-hover-container:hover .cell-full {
    display: block;
    opacity: 1; /* ✨ Fade-In Effekt */
}

/* ✨ Optional: Kleiner Pfeil/Pointer */
.cell-full::before {
    content: '';
    position: absolute;
    left: -6px;
    top: 50%;
    transform: translateY(-50%);
    width: 0;
    height: 0;
    border-top: 6px solid transparent;
    border-bottom: 6px solid transparent;
    border-right: 6px solid #3b82f6;
}

.dark .cell-full::before {
    border-right-color: #3b82f6;
}

/* =========================
   RESPONSIVE CONTROL - Hübscher Dropdown Button
   ========================= */

/* Standard DataTables Control Styles überschreiben */
table.dataTable.dtr-inline.collapsed > tbody > tr > td.dtr-control,
table.dataTable.dtr-inline.collapsed > tbody > tr > th.dtr-control,
table.dataTable.dtr-inline.collapsed > tbody > tr > td.dt-control,
table.dataTable.dtr-inline.collapsed > tbody > tr > th.dt-control {
    position: relative;
    padding-left: 30px !important;
    cursor: pointer;
}

/* Basis-Styling für den Button - Geschlossen (Chevron nach rechts) */
table.dataTable.dtr-inline.collapsed > tbody > tr > td.dtr-control::before,
table.dataTable.dtr-inline.collapsed > tbody > tr > th.dtr-control::before,
table.dataTable.dtr-inline.collapsed > tbody > tr > td.dt-control::before,
table.dataTable.dtr-inline.collapsed > tbody > tr > th.dt-control::before {
    content: '' !important;
    position: absolute !important;
    left: 4px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: 20px !important;
    height: 20px !important;
    border-radius: 4px !important;
    background-color: #e5e7eb !important;
    /* Chevron Right */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 18 6-6-6-6'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: 14px 14px !important;
    transition: background-color 0.2s ease !important;
    border: none !important;
    box-shadow: none !important;
}

/* Hover State - Geschlossen */
table.dataTable.dtr-inline.collapsed > tbody > tr:not(.parent):not(.dt-hasChild) > td.dtr-control:hover::before,
table.dataTable.dtr-inline.collapsed > tbody > tr:not(.parent):not(.dt-hasChild) > th.dtr-control:hover::before,
table.dataTable.dtr-inline.collapsed > tbody > tr:not(.parent):not(.dt-hasChild) > td.dt-control:hover::before,
table.dataTable.dtr-inline.collapsed > tbody > tr:not(.parent):not(.dt-hasChild) > th.dt-control:hover::before {
    background-color: #3b82f6 !important;
    /* Chevron Right - Weiß */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 18 6-6-6-6'/%3E%3C/svg%3E") !important;
}

/* Geöffneter Zustand (parent/dt-hasChild row) - Chevron nach unten */
table.dataTable.dtr-inline.collapsed > tbody > tr.parent > td.dtr-control::before,
table.dataTable.dtr-inline.collapsed > tbody > tr.parent > th.dtr-control::before,
table.dataTable.dtr-inline.collapsed > tbody > tr.parent > td.dt-control::before,
table.dataTable.dtr-inline.collapsed > tbody > tr.parent > th.dt-control::before,
table.dataTable.dtr-inline.collapsed > tbody > tr.dt-hasChild > td.dtr-control::before,
table.dataTable.dtr-inline.collapsed > tbody > tr.dt-hasChild > th.dtr-control::before,
table.dataTable.dtr-inline.collapsed > tbody > tr.dt-hasChild > td.dt-control::before,
table.dataTable.dtr-inline.collapsed > tbody > tr.dt-hasChild > th.dt-control::before {
    background-color: #3b82f6 !important;
    /* Chevron Down - Weiß */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") !important;
}

/* Dark Mode - Geschlossen */
.dark table.dataTable.dtr-inline.collapsed > tbody > tr > td.dtr-control::before,
.dark table.dataTable.dtr-inline.collapsed > tbody > tr > th.dtr-control::before,
.dark table.dataTable.dtr-inline.collapsed > tbody > tr > td.dt-control::before,
.dark table.dataTable.dtr-inline.collapsed > tbody > tr > th.dt-control::before {
    background-color: #374151 !important;
    /* Chevron Right - Grau */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%239ca3af' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 18 6-6-6-6'/%3E%3C/svg%3E") !important;
}

/* Dark Mode - Hover Geschlossen */
.dark table.dataTable.dtr-inline.collapsed > tbody > tr:not(.parent):not(.dt-hasChild) > td.dtr-control:hover::before,
.dark table.dataTable.dtr-inline.collapsed > tbody > tr:not(.parent):not(.dt-hasChild) > th.dtr-control:hover::before,
.dark table.dataTable.dtr-inline.collapsed > tbody > tr:not(.parent):not(.dt-hasChild) > td.dt-control:hover::before,
.dark table.dataTable.dtr-inline.collapsed > tbody > tr:not(.parent):not(.dt-hasChild) > th.dt-control:hover::before {
    background-color: #3b82f6 !important;
    /* Chevron Right - Weiß */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 18 6-6-6-6'/%3E%3C/svg%3E") !important;
}

/* Dark Mode - Geöffnet */
.dark table.dataTable.dtr-inline.collapsed > tbody > tr.parent > td.dtr-control::before,
.dark table.dataTable.dtr-inline.collapsed > tbody > tr.parent > th.dtr-control::before,
.dark table.dataTable.dtr-inline.collapsed > tbody > tr.parent > td.dt-control::before,
.dark table.dataTable.dtr-inline.collapsed > tbody > tr.parent > th.dt-control::before,
.dark table.dataTable.dtr-inline.collapsed > tbody > tr.dt-hasChild > td.dtr-control::before,
.dark table.dataTable.dtr-inline.collapsed > tbody > tr.dt-hasChild > th.dtr-control::before,
.dark table.dataTable.dtr-inline.collapsed > tbody > tr.dt-hasChild > td.dt-control::before,
.dark table.dataTable.dtr-inline.collapsed > tbody > tr.dt-hasChild > th.dt-control::before {
    background-color: #3b82f6 !important;
    /* Chevron Down - Weiß */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") !important;
}

/* DataTables Standard-Content komplett entfernen */
table.dataTable.dtr-inline.collapsed > tbody > tr > td.dtr-control::after,
table.dataTable.dtr-inline.collapsed > tbody > tr > th.dtr-control::after,
table.dataTable.dtr-inline.collapsed > tbody > tr > td.dt-control::after,
table.dataTable.dtr-inline.collapsed > tbody > tr > th.dt-control::after {
    display: none !important;
    content: none !important;
}