/* ==========================================
   Login Page [index.php]
   ========================================== */
   body.login {
    background: linear-gradient(270deg, #4f46e5, #818cf8, #6366f1);
    background-size: 400% 400%;
    animation: gradientAnimation 10s ease infinite;
}

@keyframes gradientAnimation {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

/* ==========================================
   Table Container and Structure [dashboard.php]
   ========================================== */
.table-container {
    overflow-x: auto;
    font-size: 0.85rem;
}

table {
    border: #eee 1px solid;
    font-size: 0.8rem;
}

thead {
    text-transform: : capitalize;
}

td {
    white-space: nowrap;           /* Prevent text wrapping */
    overflow: hidden;              /* Hide overflow text */
    text-overflow: ellipsis;       /* Ellipsis for overflowing text */
    max-width: 150px;              /* Set reasonable max-width for columns */
}

#verkopenTable_filter {
    margin-bottom: 1rem;
}

#verkopenTable_info, #verkopenTable_paginate {
    margin-top: 1rem;
}

.dataTables_wrapper .dataTables_paginate {
    padding: 1rem 0; /* Add some padding */
}

.dataTables_wrapper .dataTables_paginate .paginate_button {
    @apply bg-gray-200 text-gray-600 border border-gray-300 rounded-md px-2 py-1 mx-1 text-sm; /* Tailwind styles */
}

.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
    @apply bg-gray-300; /* Slightly darker on hover */
}

.dataTables_wrapper .dataTables_paginate .paginate_button.current {
    @apply bg-gray-600 text-white; /* Active button style */
}

/* Unified DataTables Styling */
.dataTables_wrapper .dataTables_length,
.dataTables_wrapper .dataTables_filter,
.dataTables_wrapper .dataTables_info,
.dataTables_wrapper .dataTables_paginate {
    padding: 1rem;
    color: #4B5563; /* text-gray-600 */
}

.dataTables_wrapper .dataTables_length select {
    @apply border border-gray-300 rounded-md px-2 py-1 mx-1 text-sm bg-transparent;
}

.dataTables_wrapper .dataTables_filter input {
    @apply border border-gray-300 rounded-md px-2 py-1 ml-2 text-sm bg-transparent;
}

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

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

.dataTables_wrapper .dataTables_paginate .paginate_button.disabled {
    @apply opacity-50 cursor-not-allowed;
}

/* Remove white background from DataTables elements */
.dataTables_wrapper .dataTables_length,
.dataTables_wrapper .dataTables_filter,
.dataTables_wrapper .dataTables_info,
.dataTables_wrapper .dataTables_paginate {
    background-color: transparent;
}

/* Add consistent table styling */
table.dataTable {
    @apply border-gray-200 shadow-sm;
}

table.dataTable thead th {
    @apply bg-gray-50 text-gray-600 text-sm font-medium;
}

table.dataTable tbody tr {
    @apply hover:bg-gray-50;
}

table.dataTable tbody td {
    @apply text-gray-600 text-sm;
}

#projectTable_filter {
    padding: 0;
    margin-bottom: 1.5em;
}

/* Base Input Field Styling */
input,
select,
textarea {
    @apply mt-1 block w-full rounded-md border-gray-300 shadow-sm text-gray-900 sm:text-sm;
    padding: 0.625rem 0.875rem !important;
    background-color: rgb(248 249 250) !important;
    box-shadow: inset 0 1px 2px 0 rgb(0 0 0 / 0.03) !important;
    transition: all 0.2s ease;
}

/* Update hover state selector as well */
input:hover,
select:hover,
textarea:hover {
    background-color: rgb(250 251 252) !important;
}

/* Update focus state selector */
input:focus,
select:focus,
textarea:focus {
    @apply ring-2 ring-orange-100 border-orange-300;
    background-color: white !important;
    box-shadow: none !important;
}

/* Textarea Specific */
textarea {
    min-height: 100px;
    resize: vertical;
}

/* Select2 Styling */
.select2-container--default .select2-selection--single {
    height: 45px !important;
    background-color: rgb(248 249 250) !important;
    border-color: rgb(209 213 219) !important;
    border-radius: 0.375rem !important;
    font-size: 0.875rem !important;
    box-shadow: inset 0 1px 2px 0 rgb(0 0 0 / 0.03) !important;
    padding: 0.625rem 0.875rem !important;
}

/* Select2 Focus State */
.select2-container--default.select2-container--focus .select2-selection--single {
    @apply ring-2 ring-orange-100 border-orange-300;
    background-color: white !important;
    box-shadow: none !important;
}

/* Select2 Dropdown */
.select2-container--default .select2-dropdown {
    border-color: rgb(209 213 219);
    border-radius: 0.375rem;
    box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
}

/* Select2 Search Field */
.select2-container--default .select2-search--dropdown .select2-search__field {
    border-color: rgb(209 213 219);
    border-radius: 0.375rem;
    padding: 0.5rem;
}

/* Select2 Options */
.select2-container--default .select2-results__option {
    padding: 0.5rem 0.875rem;
}

/* Select2 Selected Option */
.select2-container--default .select2-results__option--selected {
    background-color: rgb(249 250 251);
}

/* Select2 Highlighted Option */
.select2-container--default .select2-results__option--highlighted.select2-results__option--selectable {
    background-color: rgb(249 115 22);
}

/* Required Field Indicator */
.required-indicator {
    color: #ef4444;
    margin-left: 0.25rem;
}

/* Required Field Indicator when field is filled */
.required-indicator.filled {
    color: #22c55e;
}

.status-toggle {
    cursor: pointer;
    transition: all 0.2s ease;
}

/* Override DataTables default background behavior */
table.dataTable tbody tr,
table.dataTable.stripe tbody tr.odd,
table.dataTable.display tbody tr.odd {
    background-color: transparent !important;
}

/* Keep existing status color rules */
table.dataTable tbody tr.bg-red-100 { background-color: rgb(254 226 226) !important; }
table.dataTable tbody tr.bg-blue-100 { background-color: rgb(219 234 254) !important; }
table.dataTable tbody tr.bg-green-100 { background-color: rgb(220 252 231) !important; }
table.dataTable tbody tr.bg-yellow-100 { background-color: rgb(254 249 195) !important; }

/* Maintain hover effects */
table.dataTable tbody tr.bg-red-100:hover { background-color: rgb(254 226 226 / 0.8) !important; }
table.dataTable tbody tr.bg-blue-100:hover { background-color: rgb(219 234 254 / 0.8) !important; }
table.dataTable tbody tr.bg-green-100:hover { background-color: rgb(220 252 231 / 0.8) !important; }
table.dataTable tbody tr.bg-yellow-100:hover { background-color: rgb(254 249 195 / 0.8) !important; }