/* ===================================================================
   GRUNDLEGENDE STYLES (ursprünglich)
   =================================================================== */
header {
    background-image:
            linear-gradient(to right,
            white 0%,
            #7eb795 50%,
            transparent 50%),
            url('../images/janssen_header.jpg');
    background-size: 100% 100%, cover;
    background-position: left center, right center;
    background-repeat: no-repeat;
}
/* Überschreibe den Bootstrap-Standard-Hintergrund*/
.navbar.sticky-top {
    background-color: transparent !important;
    background-image:
            linear-gradient(to right,
            #e8f3e9 0%,
            #d4e9d6 1%,
            #96c198 8%,
            #96c198 35%,
            rgba(150, 193, 152, 0.6) 45%,
            rgba(150, 193, 152, 0) 55%),
            url('../images/janssen_header.jpg') !important;
    background-size: 100% 100%, cover !important;
    background-position: left center, right center !important;
    background-repeat: no-repeat !important;
}

.navbar {
    background-color: #96c198;
}

.nav-link {
    color: #ffff;
}

.nav-link.active {
    color: #e1e377;
}

.navbar-brand {
    color: #ffff;
}

.table-active {
    background-color: #e3b0be;
}

.btn {
    border-color: #96c198;
    background-color: #96c198;
}

.btn:hover {
    border-color: #96c198;
    background-color: #e3b0be;
}

.hidden-table {
    display: none;
}

.btn:disabled {
    border-color: #e3b0be;
    background-color: #96c198;
}

.container-fluid {
    margin-top: 10px;
}

.square {
    width: 120px;
    height: 120px;
    padding: 5px;
    background-color: #e1e377;
    border: 1px solid black;
    text-align: center;
    margin: 2px;
    cursor: pointer;
}
th {
    white-space: nowrap;
}
/* Tisch-Container */
.tisch-gruppe {
    margin-bottom: 30px !important;
}

.platz-col {
    padding: 0 0;
    margin-bottom: 0;
}

.upper-text {
    font-weight: bold;
    font-size: 18px;
    margin-bottom: 2px;
    text-align: center;
}

.lower-text {
    font-size: 18px;
    text-align: center;
    word-wrap: break-word;
    max-width: 120px;
    line-height: 1.1;
}

/* Responsive Anpassungen */
@media (max-width: 768px) {
    .square {
        width: 60px;
        height: 60px;
    }

    .upper-text {
        font-size: 10px;
    }

    .lower-text {
        font-size: 8px;
        max-width: 50px;
    }
}

@media (max-width: 576px) {
    .platz-col {
        padding: 0 1px;
    }

    .square {
        width: 50px;
        height: 50px;
    }
}

/* ===================================================================
   DATATABLES GRUNDLEGENDE STYLES
   =================================================================== */

.dataTables_wrapper .dataTables_top {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 15px;
}

.dataTables_wrapper .dataTables_length,
.dataTables_wrapper .dt-buttons {
    margin: 0;
    display: inline-flex;
    align-items: center;
}

.dataTables_wrapper .dataTables_length select {
    min-width: 90px !important;
    width: auto !important;
    padding: 6px 30px 6px 10px !important;
    margin: 0 8px 0 5px;
    vertical-align: middle;
    border: 1px solid #ccc;
    border-radius: 4px;
    background-color: white;
}

.dataTables_wrapper .dt-buttons .btn {
    margin-bottom: 0;
    padding: 6px 12px;
    height: auto;
    vertical-align: middle;
}

/* ===================================================================
   DATATABLES SELECT - Grüne Markierung (#96c198)
   =================================================================== */

/* Maximale Spezifität für alle möglichen Selektoren */
table.dataTable tbody tr.selected,
table.dataTable tbody tr.selected td,
table.dataTable tbody tr.selected th,
table.table tbody tr.selected,
table.table tbody tr.selected td,
table.table tbody tr.selected th,
.table tbody tr.selected,
.table tbody tr.selected td,
.table tbody tr.selected th,
#productTable tbody tr.selected,
#productTable tbody tr.selected td,
#productTable tbody tr.selected th,
#workerTable tbody tr.selected,
#workerTable tbody tr.selected td,
#workerTable tbody tr.selected th,
.dataTables_wrapper table tbody tr.selected,
.dataTables_wrapper table tbody tr.selected td,
.dataTables_wrapper table tbody tr.selected th {
    white-space: nowrap;
    background-color: #96c198 !important;
    background: #96c198 !important;
    color: #ffffff !important;
    border-color: #7da87f !important;
}

/* Hover-Zustand überschreiben */
table.dataTable tbody tr.selected:hover,
table.dataTable tbody tr.selected:hover td,
table.dataTable tbody tr.selected:hover th,
table.table tbody tr.selected:hover,
table.table tbody tr.selected:hover td,
table.table tbody tr.selected:hover th,
.table tbody tr.selected:hover,
.table tbody tr.selected:hover td,
.table tbody tr.selected:hover th,
#productTable tbody tr.selected:hover,
#productTable tbody tr.selected:hover td,
#productTable tbody tr.selected:hover th,
#workerTable tbody tr.selected:hover,
#workerTable tbody tr.selected:hover td,
#workerTable tbody tr.selected:hover th {
    white-space: nowrap;
    background-color: #7da87f !important;
    background: #7da87f !important;
    color: #ffffff !important;
    border-color: #6b9c6e !important;
}

/* Bootstrap Table spezifische Überschreibungen */
.table-striped > tbody > tr.selected:nth-of-type(odd) > td,
.table-striped > tbody > tr.selected:nth-of-type(even) > td,
.table-striped > tbody > tr.selected:nth-of-type(odd) > th,
.table-striped > tbody > tr.selected:nth-of-type(even) > th,
.table-striped tbody tr.selected:nth-of-type(odd),
.table-striped tbody tr.selected:nth-of-type(even) {
    background-color: #96c198 !important;
    color: #ffffff !important;
}

.table-hover > tbody > tr.selected:hover > td,
.table-hover > tbody > tr.selected:hover > th,
.table-hover tbody tr.selected:hover {
    background-color: #7da87f !important;
    color: #ffffff !important;
}

/* DataTables spezifische CSS-Klassen */
.dataTables_scrollBody table.dataTable tbody tr.selected,
.dataTables_scrollBody table.dataTable tbody tr.selected td,
.dataTables_scrollBody table.dataTable tbody tr.selected th {
    white-space: nowrap;
    background-color: #96c198 !important;
    color: #ffffff !important;
}

/* CSS-Custom-Properties Override für DataTables */
:root {
    --dt-row-selected: #96c198 !important;
    --dt-row-selected-text: #ffffff !important;
    --dt-row-selected-link: #ffffff !important;
}

table.dataTable tbody tr.selected {
    background-color: var(--dt-row-selected, #96c198) !important;
    color: var(--dt-row-selected-text, #ffffff) !important;
}

/* ===================================================================
   SPEZIFISCHE KOMPONENTEN-STYLES (ohne globale Überschreibung)
   =================================================================== */

/* Bootstrap Primary Button Override (spezifisch) */
.btn-primary {
    --bs-btn-color: #fff !important;
    --bs-btn-bg: #96c198 !important;
    --bs-btn-border-color: #96c198 !important;
    --bs-btn-hover-color: #fff !important;
    --bs-btn-hover-bg: #7da87f !important;
    --bs-btn-hover-border-color: #7da87f !important;
    --bs-btn-focus-shadow-rgb: 150, 193, 152 !important;
    --bs-btn-active-color: #fff !important;
    --bs-btn-active-bg: #6b9c6e !important;
    --bs-btn-active-border-color: #6b9c6e !important;
    --bs-btn-disabled-color: #fff !important;
    --bs-btn-disabled-bg: #96c198 !important;
    --bs-btn-disabled-border-color: #96c198 !important;
}

/* DataTables Pagination */
.dataTables_wrapper .dataTables_paginate .paginate_button,
.pagination .page-link {
    color: #96c198 !important;
    border-color: #96c198 !important;
    background-color: transparent !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button:hover,
.pagination .page-link:hover {
    color: #ffffff !important;
    background-color: #96c198 !important;
    border-color: #96c198 !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button.current,
.dataTables_wrapper .dataTables_paginate .paginate_button.current:hover,
.pagination .page-item.active .page-link {
    color: #ffffff !important;
    background-color: #96c198 !important;
    border-color: #96c198 !important;
    box-shadow: 0 0 0 0.2rem rgba(150, 193, 152, 0.25) !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button.disabled,
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled:hover,
.pagination .page-item.disabled .page-link {
    color: #6c757d !important;
    background-color: #fff !important;
    border-color: #dee2e6 !important;
}

/* Form Controls Focus */
select:focus,
.form-select:focus,
.form-control:focus,
input:focus,
textarea:focus {
    border-color: #96c198 !important;
    box-shadow: 0 0 0 0.2rem rgba(150, 193, 152, 0.25) !important;
    outline: 0 !important;
}

.dataTables_wrapper .dataTables_length select:focus {
    border-color: #96c198 !important;
    box-shadow: 0 0 0 0.2rem rgba(150, 193, 152, 0.25) !important;
}

.dataTables_wrapper .dataTables_filter input:focus {
    border-color: #96c198 !important;
    box-shadow: 0 0 0 0.2rem rgba(150, 193, 152, 0.25) !important;
}

/* Bootstrap Components */
.modal-header {
    border-bottom-color: #96c198 !important;
}

.btn-close:focus {
    box-shadow: 0 0 0 0.2rem rgba(150, 193, 152, 0.25) !important;
}

.progress-bar {
    background-color: #96c198 !important;
}

.badge.bg-primary {
    background-color: #96c198 !important;
}

.alert-primary {
    --bs-alert-color: #3d4e3e !important;
    --bs-alert-bg: #e8f5e8 !important;
    --bs-alert-border-color: #7da87f !important;
}

/* Dropdown */
.dropdown-item:hover,
.dropdown-item:focus {
    background-color: #e8f5e8 !important;
    color: #3d4e3e !important;
}

.dropdown-item.active,
.dropdown-item:active {
    background-color: #96c198 !important;
    color: #ffffff !important;
}

/* DataTables Sorting Icons */
table.dataTable thead .sorting:after,
table.dataTable thead .sorting_asc:after,
table.dataTable thead .sorting_desc:after {
    color: #96c198 !important;
}

table.dataTable thead th.sorting:hover:after,
table.dataTable thead th.sorting_asc:hover:after,
table.dataTable thead th.sorting_desc:hover:after {
    color: #7da87f !important;
}

/* Scrollbars
::-webkit-scrollbar-thumb {
    background-color: #96c198 !important;
    border-radius: 6px;
}*/

::-webkit-scrollbar-thumb:hover {
    background-color: #7da87f !important;
}

::-webkit-scrollbar-track {
    background-color: #f8f9fa !important;
}

/* Checkboxes */
.form-check-input:checked {
    background-color: #96c198 !important;
    border-color: #96c198 !important;
}

.form-check-input:focus {
    border-color: #96c198 !important;
    box-shadow: 0 0 0 0.2rem rgba(150, 193, 152, 0.25) !important;
}

.form-check-input[type="radio"]:checked {
    background-color: #96c198 !important;
    border-color: #96c198 !important;
}

/* Tooltips */
.tooltip-inner {
    background-color: #96c198 !important;
}

.bs-tooltip-top .tooltip-arrow::before,
.bs-tooltip-auto[data-popper-placement^="top"] .tooltip-arrow::before {
    border-top-color: #96c198 !important;
}

.bs-tooltip-bottom .tooltip-arrow::before,
.bs-tooltip-auto[data-popper-placement^="bottom"] .tooltip-arrow::before {
    border-bottom-color: #96c198 !important;
}

.bs-tooltip-start .tooltip-arrow::before,
.bs-tooltip-auto[data-popper-placement^="left"] .tooltip-arrow::before {
    border-left-color: #96c198 !important;
}

.bs-tooltip-end .tooltip-arrow::before,
.bs-tooltip-auto[data-popper-placement^="right"] .tooltip-arrow::before {
    border-right-color: #96c198 !important;
}

/* Spinner */
.spinner-border.text-primary {
    color: #96c198 !important;
}

.spinner-grow.text-primary {
    color: #96c198 !important;
}

/* Utility Classes*/
.text-primary {
    color: #96c198 !important;
}

.bg-primary {
    background-color: #96c198 !important;
}

.border-primary {
    border-color: #96c198 !important;
}

/* Focus Outline */
*:focus {
    outline-color: #96c198 !important;
}

/* Text Selection */
::selection {
    background-color: rgba(150, 193, 152, 0.3) !important;
    color: #3d4e3e !important;
}

::-moz-selection {
    background-color: rgba(150, 193, 152, 0.3) !important;
    color: #3d4e3e !important;
}

/* DataTables Info Text */
.dataTables_wrapper .dataTables_info {
    color: #495057 !important;
}
/* ===== BOOTSTRAP PRIMARY COLORS OVERRIDE ===== */
:root {
    --bs-primary: #96c198 !important;
    --bs-primary-rgb: 150, 193, 152 !important;
    --bs-primary-text-emphasis: #3d4e3e !important;
    --bs-primary-bg-subtle: #e8f5e8 !important;
    --bs-primary-border-subtle: #7da87f !important;
}

/* ===================================================================
   COMBOBOX/SELECT DROPDOWN INHALT - Grüne Markierung
   =================================================================== */

/* Select Options - Standard Browser */
select option:hover,
select option:focus,
select option:checked {
    background-color: #96c198 !important;
    color: #ffffff !important;
}

/* Spezifisch für Bootstrap Select */
.form-select option:hover,
.form-select option:focus,
.form-select option:checked {
    background-color: #96c198 !important;
    color: #ffffff !important;
}

/* PayLevel Select spezifisch */
#payLevelSelect option:hover,
#payLevelSelect option:focus,
#payLevelSelect option:checked {
    background-color: #96c198 !important;
    color: #ffffff !important;
}

/* DataTables Length Select */
.dataTables_wrapper .dataTables_length select option:hover,
.dataTables_wrapper .dataTables_length select option:focus,
.dataTables_wrapper .dataTables_length select option:checked {
    background-color: #96c198 !important;
    color: #ffffff !important;
}

/* Für moderne Browser - CSS Custom Properties */
select {
    --bs-form-select-bg-img: none;
}

select:focus {
    --bs-form-select-focus-border-color: #96c198;
    --bs-form-select-focus-box-shadow: 0 0 0 0.2rem rgba(150, 193, 152, 0.25);
}

/* Alternative für Browser die Option-Styling unterstützen */
select option {
    background-color: #ffffff;
    color: #212529;
}

select option:hover {
    background-color: #96c198 !important;
    color: #ffffff !important;
}

select option:focus {
    background-color: #96c198 !important;
    color: #ffffff !important;
}

select option:checked {
    background-color: #96c198 !important;
    color: #ffffff !important;
}

/* Webkit/Chrome spezifische Styles */
select option:checked {
    background: #96c198 linear-gradient(0deg, #96c198 0%, #96c198 100%);
    color: #ffffff;
}

/* Firefox spezifische Styles */
@-moz-document url-prefix() {
    select option:hover {
        background-color: #96c198 !important;
        color: #ffffff !important;
    }

    select option:checked {
        background-color: #96c198 !important;
        color: #ffffff !important;
    }
}

/* Edge/IE spezifische Styles */
@supports (-ms-ime-align: auto) {
    select option:hover {
        background-color: #96c198 !important;
        color: #ffffff !important;
    }
}

/* Maximale Kompatibilität - alle Select-Elemente */
select[id*="payLevel"] option:hover,
select[id*="payLevel"] option:focus,
select[id*="payLevel"] option:checked,
select[class*="form"] option:hover,
select[class*="form"] option:focus,
select[class*="form"] option:checked {
    background-color: #96c198 !important;
    background: #96c198 !important;
    color: #ffffff !important;
}

/* Dropdown-Listen (falls verwendet) */
.dropdown-menu .dropdown-item:hover,
.dropdown-menu .dropdown-item:focus {
    background-color: #96c198 !important;
    color: #ffffff !important;
}

.dropdown-menu .dropdown-item.active,
.dropdown-menu .dropdown-item:active {
    background-color: #96c198 !important;
    color: #ffffff !important;
}

/* Bootstrap Dropdown Override */
.dropdown-item:hover,
.dropdown-item:focus {
    background-color: #96c198 !important;
    color: #ffffff !important;
}

.dropdown-item.active,
.dropdown-item:active {
    background-color: #96c198 !important;
    color: #ffffff !important;
}

/* Horizontal scrollbar - nur Tabellen Container */
.scrollable-table-container {
    overflow-x: auto;      /* Nur horizontales Scrolling */
    overflow-y: visible;   /* Kein vertikales Scrolling */
    width: 100%;
    height: auto;          /* Nicht 100% - passt sich dem Inhalt an */
}

/* DataTables Wrapper - Breite 100% */
.dataTables_wrapper {
    width: 100% !important;
    height: auto;
}

/* Tabelle selbst */
.dataTables_wrapper table {
    width: 100%;
    margin-bottom: 0;
}

/* Optional: Scrollbar-Styling für modernen Look */
.scrollable-table-container::-webkit-scrollbar {
    height: 8px;
}

.scrollable-table-container::-webkit-scrollbar-track {
    background: #f1f1f1;
}

.scrollable-table-container::-webkit-scrollbar-thumb {
    background: #888;
    border-radius: 4px;
}

.scrollable-table-container::-webkit-scrollbar-thumb:hover {
    background: #555;
}

table.dataTable {
    width: 100% !important;
}
th span {
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
}

th {
    font-weight: 600;
}
.toast-notification {
    min-width: 300px;
    max-width: 500px;
    padding: 16px;
    margin-bottom: 10px;
    border-radius: 4px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
    animation: slideIn 0.3s ease-out;
}

.toast-notification.error {
    background-color: #f8d7da;
    border: 1px solid #f5c6cb;
    color: #721c24;
}

.toast-notification.success {
    background-color: #d4edda;
    border: 1px solid #c3e6cb;
    color: #155724;
}

.toast-notification.warning {
    background-color: #fff3cd;
    border: 1px solid #ffeaa7;
    color: #856404;
}

.toast-notification .toast-close {
    float: right;
    cursor: pointer;
    font-weight: bold;
    font-size: 18px;
}

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

@keyframes slideOut {
    to {
        transform: translateX(400px);
        opacity: 0;
    }
}

#salaryTable tfoot {
    background-color: #e9ecef;
    font-weight: bold;
}

#salaryTable tfoot th {
    border-top: 2px solid #dee2e6;
    padding: 12px 8px;
}
/* =========================================
   BACKES-DIGITAL: WEEKLY DATEPICKER THEME
   Farbe: #96c198
   ========================================= */

/* 1. HOVER-EFFEKT (Gesteuert durch JS Klasse 'week-hover-js') */
/* Das garantiert, dass es auch funktioniert, wenn man über leere Zellen fährt */
.weekly-datepicker-theme tbody tr.week-hover-js td {
    background-color: rgba(150, 193, 152, 0.4) !important; /* #96c198 @ 40% */
    border-radius: 0 !important;
    cursor: pointer;
    transition: background-color 0.1s ease;
}

/* Runde Ecken beim Hover */
.weekly-datepicker-theme tbody tr.week-hover-js td:first-child {
    border-top-left-radius: 4px !important;
    border-bottom-left-radius: 4px !important;
}
.weekly-datepicker-theme tbody tr.week-hover-js td:last-child {
    border-top-right-radius: 4px !important;
    border-bottom-right-radius: 4px !important;
}

/* 2. AKTIVE WOCHE (Ausgewählt) */
.weekly-datepicker-theme tbody td.selected-week,
.weekly-datepicker-theme tbody td.active,
.weekly-datepicker-theme tbody td.active:hover {
    background-color: #96c198 !important; /* IHR FARBCODE */
    color: #ffffff !important;
    border-radius: 0 !important;
    text-shadow: none;
    font-weight: 600;
}

/* Runde Ecken für aktive Woche */
.weekly-datepicker-theme tbody td.selected-week:first-of-type {
    border-top-left-radius: 4px !important;
    border-bottom-left-radius: 4px !important;
}
.weekly-datepicker-theme tbody td.selected-week:last-of-type {
    border-top-right-radius: 4px !important;
    border-bottom-right-radius: 4px !important;
}

/* 3. CLEANUP */
/* Einzel-Hover deaktivieren, damit es wie ein Block wirkt */
.weekly-datepicker-theme tbody td.day:hover {
    background-color: transparent !important;
}