/* ========================================
   COMMON DATATABLE STYLES FOR ALL PAGES
   Theme Color: #14B8A6 (Professional Teal)
   ======================================== */

/* ========================================
   1. TABLE TEXT COLORS
   ======================================== */

.data-table-export td {
    color: #374151 !important;
}

/* ========================================
   2. TABLE ROW HOVER EFFECT - COLORS ONLY
   ======================================== */

.data-table-export tbody tr:hover {
    background-color: rgba(20, 184, 166, 0.05) !important;
}

.data-table-export tbody tr:nth-child(even) {
    background-color: #F9FAFB !important;
}

.data-table-export tbody tr:nth-child(even):hover {
    background-color: rgba(20, 184, 166, 0.08) !important;
}

/* ========================================
   3. DATATABLE BUTTONS - THEME COLOR
   ======================================== */

.dt-button {
    background: #14B8A6 !important;
    color: #ffffff !important;
    border: none !important;
}

.dt-button:hover {
    background: #0D9488 !important;
    box-shadow: 0 4px 8px rgba(20, 184, 166, 0.2) !important;
}

.dt-button:active {
    background: #0D9488 !important;
}

/* ========================================
   4. SEARCH BOX - THEME COLOR
   ======================================== */

.dataTables_filter label {
    color: #374151 !important;
}

.dataTables_filter input {
    border: 1.5px solid #D1D5DB !important;
}

.dataTables_filter input:focus {
    border-color: #14B8A6 !important;
    box-shadow: 0 0 0 2px rgba(20, 184, 166, 0.1) !important;
}

/* ========================================
   5. PAGINATION - THEME COLOR
   ======================================== */

.dataTables_paginate .paginate_button {
    border: 1px solid #E5E7EB !important;
    background: #ffffff !important;
    color: #374151 !important;
}

.dataTables_paginate .paginate_button.current {
    background: #14B8A6 !important;
    color: #ffffff !important;
    border-color: #14B8A6 !important;
}

.dataTables_paginate .paginate_button:hover {
    background: #0D9488 !important;
    color: #ffffff !important;
    border-color: #0D9488 !important;
}

/* ========================================
   6. INFO TEXT - COLORS ONLY
   ======================================== */

.dataTables_info {
    color: #6B7280 !important;
}

.dataTables_length label {
    color: #374151 !important;
}

.dataTables_length select {
    border: 1.5px solid #D1D5DB !important;
}

.dataTables_length select:focus {
    border-color: #14B8A6 !important;
    box-shadow: 0 0 0 2px rgba(20, 184, 166, 0.1) !important;
}

/* ========================================
   7. FORM CONTROLS IN TABLE - COLORS ONLY
   ======================================== */

.data-table-export select,
.data-table-export input[type="text"],
.data-table-export input[type="date"],
.data-table-export input[type="number"] {
    border: 1.5px solid #D1D5DB !important;
}

.data-table-export select:focus,
.data-table-export input:focus {
    border-color: #14B8A6 !important;
    box-shadow: 0 0 0 2px rgba(20, 184, 166, 0.1) !important;
}

/* ========================================
   8. ACTION BUTTONS - THEME COLORS
   ======================================== */

.button-success {
    background: #14B8A6 !important;
    color: #ffffff !important;
    border: none !important;
}

.button-success:hover {
    background: #0D9488 !important;
    box-shadow: 0 4px 8px rgba(20, 184, 166, 0.2) !important;
}

.button-danger {
    background: #EF4444 !important;
    color: #ffffff !important;
    border: none !important;
}

.button-danger:hover {
    background: #DC2626 !important;
    box-shadow: 0 4px 8px rgba(239, 68, 68, 0.2) !important;
}

/* ========================================
   9. LOADING STATE - COLORS ONLY
   ======================================== */

.dataTables_processing {
    background: rgba(20, 184, 166, 0.1) !important;
    border: 2px solid #14B8A6 !important;
    color: #14B8A6 !important;
}

/* ========================================
   10. DATATABLE EXPAND/COLLAPSE BUTTON (+/-)
   ======================================== */

/* Plus/Minus Button - Theme Color */
.data-table-export td.details-control {
    background: #14B8A6 !important;
    color: #ffffff !important;
}

.data-table-export td.details-control:hover {
    background: #0D9488 !important;
}

/* Alternative selector for responsive expand button */
.dtr-control {
    background: #14B8A6 !important;
    color: #ffffff !important;
}

.dtr-control:hover {
    background: #0D9488 !important;
}

/* DataTables responsive control - Teal Theme */
table.dataTable.dtr-inline.collapsed>tbody>tr>td.dtr-control:before,
table.dataTable.dtr-inline.collapsed>tbody>tr>th.dtr-control:before {
    background-color: #14B8A6 !important;
    border: 2px solid #14B8A6 !important;
    box-shadow: 0 0 3px rgba(20, 184, 166, 0.3) !important;
    color: #ffffff !important;
}

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-color: #0D9488 !important;
    border: 2px solid #0D9488 !important;
    color: #ffffff !important;
}

/* Additional selectors for sorting column expand buttons */
table.dataTable tbody td.dtr-control:before,
table.dataTable tbody th.dtr-control:before {
    background-color: #14B8A6 !important;
    border: 2px solid #14B8A6 !important;
    color: #ffffff !important;
}

table.dataTable tbody tr.parent td.dtr-control:before,
table.dataTable tbody tr.parent th.dtr-control:before {
    background-color: #0D9488 !important;
    border: 2px solid #0D9488 !important;
    color: #ffffff !important;
}

/* Sorting column specific */
td.sorting_1 .dtr-control:before,
th.sorting_1 .dtr-control:before {
    background-color: #14B8A6 !important;
    border-color: #14B8A6 !important;
}

/* ========================================
   11. OVERRIDE ALL BLUE BUTTONS TO TEAL
   ======================================== */

/* Target all responsive control buttons */
table.dataTable tbody td.control:before,
table.dataTable tbody th.control:before,
table.dataTable.dtr-inline.collapsed tbody td:first-child:before,
table.dataTable.dtr-inline.collapsed tbody th:first-child:before {
    background-color: #14B8A6 !important;
    border: 2px solid #14B8A6 !important;
    color: #ffffff !important;
    box-shadow: 0 0 3px rgba(20, 184, 166, 0.3) !important;
}

/* When expanded (parent row) */
table.dataTable tbody tr.parent td.control:before,
table.dataTable tbody tr.parent th.control:before,
table.dataTable.dtr-inline.collapsed tbody tr.parent td:first-child:before,
table.dataTable.dtr-inline.collapsed tbody tr.parent th:first-child:before {
    background-color: #0D9488 !important;
    border: 2px solid #0D9488 !important;
    color: #ffffff !important;
}

/* Override any default blue colors */
.dtr-control:before {
    background-color: #14B8A6 !important;
    border-color: #14B8A6 !important;
    color: #ffffff !important;
}

/* Responsive button in any state */
table.dataTable.dtr-inline.collapsed>tbody>tr[role="row"]>td:first-child:before,
table.dataTable.dtr-inline.collapsed>tbody>tr[role="row"]>th:first-child:before {
    background-color: #14B8A6 !important;
    border-color: #14B8A6 !important;
    color: #ffffff !important;
}

/* Parent (expanded) state */
table.dataTable.dtr-inline.collapsed>tbody>tr.parent[role="row"]>td:first-child:before,
table.dataTable.dtr-inline.collapsed>tbody>tr.parent[role="row"]>th:first-child:before {
    background-color: #0D9488 !important;
    border-color: #0D9488 !important;
    color: #ffffff !important;
}

/* ========================================
   12. DATATABLE LINKS - TEAL THEME
   ======================================== */

/* All links in DataTable */
.data-table-export a,
.data-table-export a:link,
.data-table-export a:visited {
    color: #14B8A6 !important;
    text-decoration: none !important;
}

.data-table-export a:hover,
.data-table-export a:focus {
    color: #0D9488 !important;
    text-decoration: none !important;
}

.data-table-export a:active {
    color: #0D9488 !important;
}

/* Specific link classes */
.data-table-export .view-link,
.data-table-export .file-link,
.data-table-export .document-link {
    color: #14B8A6 !important;
}

.data-table-export .view-link:hover,
.data-table-export .file-link:hover,
.data-table-export .document-link:hover {
    color: #0D9488 !important;
}

/* Location icons and links */
.data-table-export .location-link,
.data-table-export a[href*="location"],
.data-table-export i.fa-location,
.data-table-export i.fa-map-marker,
.data-table-export i.fa-map-marker-alt {
    color: #14B8A6 !important;
}

.data-table-export .location-link:hover,
.data-table-export a[href*="location"]:hover {
    color: #0D9488 !important;
}

/* Icon links */
.data-table-export a i,
.data-table-export a .fa,
.data-table-export a .fas,
.data-table-export a .far,
.data-table-export a .fab {
    color: inherit !important;
}

/* View File links */
.data-table-export a[href*="View"],
.data-table-export a[href*="view"],
.data-table-export a:contains("View File"),
.data-table-export a:contains("View") {
    color: #14B8A6 !important;
}

/* PDF/Document links */
.data-table-export a[href$=".pdf"],
.data-table-export a[href*="pdf"],
.data-table-export a[href*="document"],
.data-table-export a[href*="file"] {
    color: #14B8A6 !important;
}

/* Override any blue color values in links */
.data-table-export a[style*="color: blue"],
.data-table-export a[style*="color: #007bff"],
.data-table-export a[style*="color: #0d6efd"],
.data-table-export a[style*="color: rgb(0, 123, 255)"] {
    color: #14B8A6 !important;
}

/* DataTables default link colors override */
table.dataTable tbody td a,
table.dataTable tbody th a {
    color: #14B8A6 !important;
}

table.dataTable tbody td a:hover,
table.dataTable tbody th a:hover {
    color: #0D9488 !important;
}

/* ========================================
   13. LOCATION ICONS - TEAL THEME
   ======================================== */

/* Location/Map marker icons */
.data-table-export i.zmdi-pin,
.data-table-export i.fa-map-marker,
.data-table-export i.fa-map-marker-alt,
.data-table-export i.fa-location-dot,
.data-table-export .location-icon {
    color: #14B8A6 !important;
}

/* Location text/links */
.data-table-export .location,
.data-table-export [class*="location"] {
    color: #14B8A6 !important;
}

/* ========================================
   14. OVERRIDE BOOTSTRAP/FRAMEWORK LINK COLORS
   ======================================== */

/* Bootstrap link colors in tables */
.table a,
.table-bordered a,
.table-striped a {
    color: #14B8A6 !important;
}

.table a:hover,
.table-bordered a:hover,
.table-striped a:hover {
    color: #0D9488 !important;
}

/* Text primary/info/link classes */
.data-table-export .text-primary,
.data-table-export .text-info,
.data-table-export .text-link {
    color: #14B8A6 !important;
}

/* Badge/Label links */
.data-table-export .badge a,
.data-table-export .label a {
    color: inherit !important;
}

/* ========================================
   15. DATATABLE HORIZONTAL SCROLLING (CSS-BASED)
   ======================================== */

/* Remove scrolling from box-body wrapper - IMPORTANT! */
.box .box-body {
    overflow: visible !important;
    overflow-x: visible !important;
    width: 100%;
}

/* DataTable wrapper should not scroll - IMPORTANT! */
.dataTables_wrapper {
    width: 100% !important;
    overflow: visible !important;
    overflow-x: visible !important;
}

/* Ensure the processing div doesn't add scrolling */
.dataTables_processing {
    overflow: visible !important;
}

/* The scrollable wrapper ONLY for the table */
.table-scroll-wrapper {
    overflow-x: auto !important;
    overflow-y: visible !important;
    width: 100%;
    -webkit-overflow-scrolling: touch;
    margin-top: 10px;
}

/* Custom teal scrollbar for the table wrapper */
.table-scroll-wrapper::-webkit-scrollbar {
    height: 10px;
}

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

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

.table-scroll-wrapper::-webkit-scrollbar-thumb:hover {
    background: #0D9488;
}

/* Table should display normally */
.data-table-export {
    width: 100% !important;
    table-layout: auto;
    margin-bottom: 0 !important;
}

/* Ensure DataTables doesn't create scroll containers */
.dataTables_wrapper .dataTables_scroll {
    overflow: visible !important;
}

.dataTables_wrapper .dataTables_scrollBody {
    overflow: visible !important;
}

/* ========================================
   16. HIDE ANY DUPLICATE ROWS (BACKUP)
   ======================================== */

/* Hide any duplicate header rows as backup */
.data-table-export thead tr:nth-child(2),
table.dataTable thead tr:nth-child(2),
table.data-table-export thead tr:nth-child(2) {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
    line-height: 0 !important;
    opacity: 0 !important;
}

/* Hide any extra header rows in scrollable tables */
.dataTables_scroll .dataTables_scrollHead table thead tr:nth-child(2) {
    display: none !important;
}

/* Target the sorting icons row specifically */
.data-table-export thead tr.sorting-row,
.data-table-export thead tr[role="row"]:nth-child(2) {
    display: none !important;
}