/* Salary Module Styles */

/* DataTables Custom Styling für TailwindCSS */
.dataTables_wrapper {
    font-family: inherit;
}

.dataTables_wrapper .dataTables_length,
.dataTables_wrapper .dataTables_filter,
.dataTables_wrapper .dataTables_info,
.dataTables_wrapper .dataTables_paginate {
    margin: 1rem 0;
}

/* Dropdown-spezifisches Styling */
.dataTables_wrapper .dataTables_length select {
    @apply border border-gray-300 rounded-lg px-3 py-2 text-sm focus:ring-2 focus:ring-red-500 focus:border-red-500 bg-white;
    min-width: 80px;
    height: 38px;
    appearance: none;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m6 8 4 4 4-4'/%3e%3c/svg%3e");
    background-position: right 8px center;
    background-repeat: no-repeat;
    background-size: 16px 16px;
    padding-right: 32px;
}

.dataTables_wrapper .dataTables_length select:focus {
    @apply ring-2 ring-red-500 border-red-500 outline-none;
}

/* Input-spezifisches Styling (ohne Dropdown-Arrow) */
.dataTables_wrapper .dataTables_filter input {
    @apply border border-gray-300 rounded-lg px-3 py-2 text-sm focus:ring-2 focus:ring-red-500 focus:border-red-500 bg-white;
    min-width: 200px;
    height: 38px;
    /* Kein appearance: none und kein background-image für Input-Felder */
}

.dataTables_wrapper .dataTables_filter input:focus {
    @apply ring-2 ring-red-500 border-red-500 outline-none;
}

.dataTables_wrapper .dataTables_paginate .paginate_button {
    @apply px-3 py-2 mx-1 text-sm border border-gray-300 rounded-lg hover:bg-gray-50;
}

.dataTables_wrapper .dataTables_paginate .paginate_button.current {
    @apply bg-red-600 text-white border-red-600 hover:bg-red-700;
}

.dataTables_wrapper .dataTables_paginate .paginate_button.disabled {
    @apply text-gray-400 cursor-not-allowed hover:bg-transparent;
}

/* Salary Table Specific Styles */
#salaryTable thead th {
    @apply bg-gray-50 px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider border-b border-gray-200;
}

#salaryTable tbody td {
    @apply px-6 py-4 whitespace-nowrap text-sm text-gray-900 border-b border-gray-100;
}

#salaryTable tbody tr:hover {
    @apply bg-gray-50;
}

.dataTables_wrapper .dataTables_length label,
.dataTables_wrapper .dataTables_filter label {
    @apply text-sm font-medium text-gray-700 flex items-center gap-2;
}

.dataTables_wrapper .dataTables_length {
    @apply flex items-center gap-2;
}

.dataTables_wrapper .dataTables_filter {
    @apply flex items-center gap-2;
}

.dataTables_wrapper .dataTables_info {
    @apply text-sm text-gray-600;
}

/* Verbesserte Spalten-Ausrichtung */
#salaryTable tbody td:nth-child(3),
#salaryTable tbody td:nth-child(4) {
    @apply font-semibold;
}

#salaryTable tbody td:nth-child(1) {
    @apply font-mono text-xs;
}

/* Spezifische Dropdown-Verbesserungen */
.dataTables_wrapper .dataTables_length select option {
    @apply py-1 px-2;
}

/* Fix für Safari und andere Browser - nur für Select-Elemente */
.dataTables_wrapper .dataTables_length select {
    background-color: white !important;
    border: 1px solid #d1d5db !important;
    border-radius: 0.5rem !important;
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05) !important;
}

/* Spezifische Input-Styling-Fixes */
.dataTables_wrapper .dataTables_filter input {
    background-color: white !important;
    border: 1px solid #d1d5db !important;
    border-radius: 0.5rem !important;
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05) !important;
}

/* Verbesserte Label-Darstellung */
.dataTables_wrapper .dataTables_length label {
    display: flex !important;
    align-items: center !important;
    gap: 0.5rem !important;
    white-space: nowrap !important;
    font-weight: 500 !important;
    color: #374151 !important;
}

/* Zusätzliche Select-Fixes */
.dataTables_wrapper .dataTables_length select:hover {
    border-color: #9ca3af !important;
}

.dataTables_wrapper .dataTables_length select:focus {
    outline: none !important;
    border-color: #ef4444 !important;
    box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.1) !important;
}

/* Zusätzliche Input-Fixes */
.dataTables_wrapper .dataTables_filter input:hover {
    border-color: #9ca3af !important;
}

.dataTables_wrapper .dataTables_filter input:focus {
    outline: none !important;
    border-color: #ef4444 !important;
    box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.1) !important;
}

/* Responsive Verbesserungen */
@media (max-width: 768px) {
    #salaryTable thead th,
    #salaryTable tbody td {
        @apply px-3 py-2 text-xs;
    }

    .dataTables_wrapper .dataTables_length,
    .dataTables_wrapper .dataTables_filter {
        @apply text-center;
    }

    /* Mobile-spezifische DataTable Anpassungen */
    .dataTables_wrapper .dataTables_length,
    .dataTables_wrapper .dataTables_filter {
        margin: 0.5rem 0;
    }

    .dataTables_wrapper .dataTables_paginate .paginate_button {
        @apply px-2 py-1 mx-0.5 text-xs;
    }

    .dataTables_wrapper .dataTables_length select {
        min-width: 60px;
    }
}

/* Dark Mode Support */
:root.dark .dataTables_wrapper .dataTables_length select,
:root.dark .dataTables_wrapper .dataTables_filter input {
    @apply bg-gray-800 border-gray-600 text-gray-200;
}

:root.dark #salaryTable thead th {
    @apply bg-gray-800 text-gray-300 border-gray-700;
}

:root.dark #salaryTable tbody td {
    @apply text-gray-200 border-gray-700;
}

:root.dark #salaryTable tbody tr:hover {
    @apply bg-gray-800;
}

:root.dark .dataTables_wrapper .dataTables_length label,
:root.dark .dataTables_wrapper .dataTables_filter label {
    @apply text-gray-300;
}

:root.dark .dataTables_wrapper .dataTables_info {
    @apply text-gray-400;
}

:root.dark .dataTables_wrapper .dataTables_paginate .paginate_button {
    @apply border-gray-600 text-gray-300 hover:bg-gray-800;
}

/* Salary Table Container */
.salary-table-container {
    @apply relative;
}

.salary-table-container .dataTables_wrapper {
    @apply w-full;
}

.salary-table-container .dataTables_wrapper .dataTables_length,
.salary-table-container .dataTables_wrapper .dataTables_filter {
    @apply mb-4;
}

/* Salary-spezifische Komponenten */
.salary-period-selector {
    @apply bg-white rounded-lg shadow-sm border border-gray-200;
}

.salary-period-button {
    @apply inline-flex items-center justify-center px-4 py-2 border rounded-lg text-sm font-medium transition-colors duration-200;
}

.salary-period-button.active {
    @apply bg-red-600 text-white border-red-600;
}

.salary-period-button.inactive {
    @apply border-gray-300 text-gray-700 hover:bg-gray-50;
}

.salary-stats-card {
    @apply bg-white rounded-lg shadow-sm border border-gray-200 p-6;
}

.salary-amount {
    @apply font-semibold text-green-600;
}

.salary-amount.negative {
    @apply text-red-600;
}

.salary-hours {
    @apply text-center;
}

.salary-overtime {
    @apply text-yellow-600;
}

/* Loading States */
.salary-table-loading {
    @apply opacity-50 pointer-events-none;
}

.salary-table-loading::after {
    content: '';
    @apply absolute inset-0 bg-white bg-opacity-75 flex items-center justify-center;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='10' stroke='currentColor' stroke-width='4' class='opacity-25'%3E%3C/circle%3E%3Cpath fill='currentColor' d='M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z' class='opacity-75'%3E%3C/path%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 2rem;
}

/* Print Styles */
@media print {
    .dataTables_wrapper .dataTables_length,
    .dataTables_wrapper .dataTables_filter,
    .dataTables_wrapper .dataTables_paginate {
        display: none !important;
    }
    
    #salaryTable {
        @apply text-xs;
    }
    
    #salaryTable thead th,
    #salaryTable tbody td {
        @apply px-2 py-1;
    }
}