/**
 * Backend Table Styles
 * Zentrale CSS-Datei für alle Backend-Tabellen mit Sticky Header
 */

/* ==========================================================================
   Table Responsive Wrapper - kein iframe-like Scrolling
   ========================================================================== */
.table-responsive-wrapper {
    overflow: visible;
}

.table-responsive-wrapper table {
    width: 100%;
}

/* ==========================================================================
   Sticky Header - bleibt beim Scrollen der Seite oben
   Überschreibt custom.min.css Selektoren mit höherer Spezifität
   ========================================================================== */
thead.sticky-header,
.table-card table thead,
.table-card-sticky table thead,
#films-table-header {
    position: sticky !important;
    top: 70px !important; /* Abstand für die vertikale Navbar (fixed Layout) */
    z-index: 100 !important;
    background: #fff !important;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1) !important;
}

/* Dark Mode Unterstützung */
[data-bs-theme="dark"] thead.sticky-header,
[data-bs-theme="dark"] .table-card table thead,
[data-bs-theme="dark"] .table-card-sticky table thead,
[data-bs-theme="dark"] #films-table-header {
    background: #212529 !important;
    box-shadow: 0 2px 4px rgba(0,0,0,0.3) !important;
}

/* ==========================================================================
   Scrollable Layout Position - Topbar scrollt mit, daher top: 0
   ========================================================================== */
[data-layout-position="scrollable"] thead.sticky-header,
[data-layout-position="scrollable"] .table-card table thead,
[data-layout-position="scrollable"] .table-card-sticky table thead,
[data-layout-position="scrollable"] #films-table-header,
html[data-layout-position="scrollable"] thead.sticky-header,
html[data-layout-position="scrollable"] .table-card table thead,
html[data-layout-position="scrollable"] .table-card-sticky table thead,
html[data-layout-position="scrollable"] #films-table-header {
    top: 0 !important;
}

/* ==========================================================================
   Sticky Card Header (z.B. Film-Karten in Lawyer-Listen)
   Verhalten: bleibt sticky, bis der nächste Header ihn „wegschiebt".
   ========================================================================== */
.sticky-card-header {
    position: sticky !important;
    top: 70px !important;
    z-index: 101 !important;
    background: #fff !important;
    box-shadow: 0 2px 4px rgba(0,0,0,0.08) !important;
}

/* Dark Mode Unterstützung */
[data-bs-theme="dark"] .sticky-card-header {
    background: #212529 !important;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2) !important;
}

/* Scrollable Layout - Sticky Card Header */
[data-layout-position="scrollable"] .sticky-card-header,
html[data-layout-position="scrollable"] .sticky-card-header {
    top: 0 !important;
}

/* Sticky Tab Navigation - höherer z-index als normale sticky-card-header */
.sticky-tab-header {
    position: sticky !important;
    top: 70px !important;
    z-index: 110 !important;
    background: #fff !important;
    box-shadow: 0 2px 4px rgba(0,0,0,0.08) !important;
}

/* Dark Mode Unterstützung */
[data-bs-theme="dark"] .sticky-tab-header {
    background: #212529 !important;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2) !important;
}

/* Scrollable Layout - Sticky Tab Header */
[data-layout-position="scrollable"] .sticky-tab-header,
html[data-layout-position="scrollable"] .sticky-tab-header {
    top: 0 !important;
}

/* Card darf Sticky nicht abschneiden */
.film-sticky-card {
    overflow: visible;
}

/* Sticky Table Header unterhalb eines Sticky Card Headers
   Verwendet wenn Card-Header UND Table-Header beide sticky sein sollen */
thead.sticky-header-below-card {
    position: sticky !important;
    top: 130px !important; /* 70px Navbar + ~60px Card-Header */
    z-index: 99 !important; /* Unter dem Card-Header (101) */
    background: #fff !important;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1) !important;
}

/* Dark Mode Unterstützung */
[data-bs-theme="dark"] thead.sticky-header-below-card {
    background: #212529 !important;
    box-shadow: 0 2px 4px rgba(0,0,0,0.3) !important;
}

/* Scrollable Layout - Sticky Header Below Card */
[data-layout-position="scrollable"] thead.sticky-header-below-card,
html[data-layout-position="scrollable"] thead.sticky-header-below-card {
    top: 60px !important; /* Nur Card-Header Höhe, da Navbar mitscrollt */
}

thead.sticky-header-below-card th {
    background: #f3f6f9 !important;
    border-bottom: 2px solid #dee2e6 !important;
}

/* Dark Mode Unterstützung */
[data-bs-theme="dark"] thead.sticky-header-below-card th {
    background: #2c3035 !important;
    border-bottom: 2px solid #343a40 !important;
    color: #e9ecef !important;
}

thead.sticky-header th,
.table-card table thead th,
.table-card-sticky table thead th,
#films-table-header th {
    background: #f3f6f9 !important;
    border-bottom: 2px solid #dee2e6 !important;
}

/* Dark Mode Unterstützung */
[data-bs-theme="dark"] thead.sticky-header th,
[data-bs-theme="dark"] .table-card table thead th,
[data-bs-theme="dark"] .table-card-sticky table thead th,
[data-bs-theme="dark"] #films-table-header th {
    background: #2c3035 !important;
    border-bottom: 2px solid #343a40 !important;
    color: #e9ecef !important;
}

/* ==========================================================================
   Horizontales Layout - Navbar ist höher (nur bei fixed Position)
   horizontal navbar height: ~116px (70px topbar + 46px menu)
   ========================================================================== */
[data-layout="horizontal"]:not([data-layout-position="scrollable"]) thead.sticky-header,
[data-layout="horizontal"]:not([data-layout-position="scrollable"]) .table-card table thead,
[data-layout="horizontal"]:not([data-layout-position="scrollable"]) .table-card-sticky table thead,
[data-layout="horizontal"]:not([data-layout-position="scrollable"]) #films-table-header,
html[data-layout="horizontal"]:not([data-layout-position="scrollable"]) thead.sticky-header,
html[data-layout="horizontal"]:not([data-layout-position="scrollable"]) .table-card table thead,
html[data-layout="horizontal"]:not([data-layout-position="scrollable"]) .table-card-sticky table thead,
html[data-layout="horizontal"]:not([data-layout-position="scrollable"]) #films-table-header {
    top: 116px !important; /* Höherer Abstand für horizontale Navbar (70px topbar + 46px menu) */
}

[data-layout="horizontal"]:not([data-layout-position="scrollable"]) .sticky-card-header,
html[data-layout="horizontal"]:not([data-layout-position="scrollable"]) .sticky-card-header {
    top: 116px !important;
}

[data-layout="horizontal"]:not([data-layout-position="scrollable"]) .sticky-tab-header,
html[data-layout="horizontal"]:not([data-layout-position="scrollable"]) .sticky-tab-header {
    top: 116px !important;
}

[data-layout="horizontal"]:not([data-layout-position="scrollable"]) thead.sticky-header-below-card,
html[data-layout="horizontal"]:not([data-layout-position="scrollable"]) thead.sticky-header-below-card {
    top: 176px !important; /* 116px Navbar + ~60px Card-Header */
}

/* Horizontales Layout mit scrollable Position - top: 0 */
[data-layout="horizontal"][data-layout-position="scrollable"] thead.sticky-header,
[data-layout="horizontal"][data-layout-position="scrollable"] .table-card table thead,
[data-layout="horizontal"][data-layout-position="scrollable"] .table-card-sticky table thead,
[data-layout="horizontal"][data-layout-position="scrollable"] #films-table-header,
html[data-layout="horizontal"][data-layout-position="scrollable"] thead.sticky-header,
html[data-layout="horizontal"][data-layout-position="scrollable"] .table-card table thead,
html[data-layout="horizontal"][data-layout-position="scrollable"] .table-card-sticky table thead,
html[data-layout="horizontal"][data-layout-position="scrollable"] #films-table-header {
    top: 0 !important;
}

[data-layout="horizontal"][data-layout-position="scrollable"] .sticky-card-header,
html[data-layout="horizontal"][data-layout-position="scrollable"] .sticky-card-header {
    top: 0 !important;
}

[data-layout="horizontal"][data-layout-position="scrollable"] .sticky-tab-header,
html[data-layout="horizontal"][data-layout-position="scrollable"] .sticky-tab-header {
    top: 0 !important;
}

[data-layout="horizontal"][data-layout-position="scrollable"] thead.sticky-header-below-card,
html[data-layout="horizontal"][data-layout-position="scrollable"] thead.sticky-header-below-card {
    top: 60px !important; /* Nur Card-Header Höhe */
}

/* ==========================================================================
   Responsive Anpassungen für kleine Screens
   ========================================================================== */
@media (max-width: 768px) {
    /* Fixed Layout auf mobilen Geräten */
    thead.sticky-header,
    .table-card table thead,
    .table-card-sticky table thead,
    #films-table-header {
        top: 60px !important; /* Kleinerer Abstand auf mobilen Geräten */
    }

    .sticky-card-header {
        top: 60px !important;
    }

    .sticky-tab-header {
        top: 60px !important;
    }

    thead.sticky-header-below-card {
        top: 120px !important; /* 60px Navbar + ~60px Card-Header */
    }
    
    /* Scrollable Layout auf mobilen Geräten - top: 0 */
    [data-layout-position="scrollable"] thead.sticky-header,
    [data-layout-position="scrollable"] .table-card table thead,
    [data-layout-position="scrollable"] .table-card-sticky table thead,
    [data-layout-position="scrollable"] #films-table-header,
    [data-layout-position="scrollable"] .sticky-card-header,
    [data-layout-position="scrollable"] .sticky-tab-header {
        top: 0 !important;
    }
    
    [data-layout-position="scrollable"] thead.sticky-header-below-card {
        top: 60px !important;
    }
    
    /* Horizontales Scrollen nur wenn nötig */
    .table-responsive-wrapper {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
}

/* ==========================================================================
   Spaltenverschiebung Notification
   ========================================================================== */
div.save-notification {
    position: fixed !important;
    bottom: 20px !important;
    right: 20px !important;
    left: auto !important;
    top: auto !important;
    width: auto !important;
    height: auto !important;
    background: #198754 !important;
    color: white !important;
    padding: 12px 20px !important;
    border-radius: 8px !important;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15) !important;
    z-index: 9999 !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    animation: slideIn 0.3s ease !important;
}

div.save-notification.hiding {
    animation: slideOut 0.3s ease forwards !important;
}

@keyframes slideIn {
    from {
        transform: translateX(100%);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

@keyframes slideOut {
    from {
        transform: translateX(0);
        opacity: 1;
    }
    to {
        transform: translateX(100%);
        opacity: 0;
    }
}

/* ==========================================================================
   Column Reset Button
   ========================================================================== */
button.column-reset-btn {
    position: fixed !important;
    bottom: 20px !important;
    left: 20px !important;
    right: auto !important;
    top: auto !important;
    width: auto !important;
    z-index: 9998 !important;
}

/* ==========================================================================
   Sortable Drag & Drop Styles
   ========================================================================== */
.sortable-ghost {
    opacity: 0.4;
    background: #e3f2fd;
}

.sortable-drag {
    background: #fff;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}