/**
 * WRTIN - DataTables Custom Styles
 * These styles MUST override Bootstrap 4 DataTables buttons
 */

/* ============================================
   DATATABLES WRAPPER FONT
   ============================================ */
div.dataTables_wrapper {
    font-family: 'Montserrat', sans-serif !important;
}

div.dataTables_wrapper div.dataTables_length label,
div.dataTables_wrapper div.dataTables_filter label,
div.dataTables_wrapper div.dataTables_info,
div.dataTables_wrapper div.dataTables_paginate,
div.dataTables_wrapper div.dataTables_processing {
    font-family: 'Montserrat', sans-serif !important;
}

div.dataTables_wrapper table.dataTable,
div.dataTables_wrapper table.dataTable thead th,
div.dataTables_wrapper table.dataTable tbody td {
    font-family: 'Montserrat', sans-serif !important;
    font-size: 14px !important;
}

/* ============================================
   DATATABLES BUTTONS - COLORED EXPORT BUTTONS
   ============================================ */

/* Container */
div.dt-buttons {
    margin-bottom: 10px !important;
    flex-wrap: wrap !important;
    gap: 5px !important;
}

/* All buttons inside dt-buttons */
div.dt-buttons > .dt-button,
div.dt-buttons > button {
    border-radius: 8px !important;
    margin: 2px !important;
    border: none !important;
    box-shadow: none !important;
    font-family: 'Montserrat', sans-serif !important;
}

/* COPY button - GRAY */
div.dt-buttons > .buttons-copy,
div.dt-buttons > .buttons-copy:hover,
div.dt-buttons > button.buttons-copy,
div.dt-buttons > button.buttons-copy:hover,
div.dt-buttons .dt-button.buttons-copy,
div.dt-buttons .dt-button.buttons-copy:hover {
    background-color: #6c757d !important;
    border-color: #6c757d !important;
    color: white !important;
}

/* CSV button - GREEN */
div.dt-buttons > .buttons-csv,
div.dt-buttons > .buttons-csv:hover,
div.dt-buttons > button.buttons-csv,
div.dt-buttons > button.buttons-csv:hover,
div.dt-buttons .dt-button.buttons-csv,
div.dt-buttons .dt-button.buttons-csv:hover {
    background-color: #28a745 !important;
    border-color: #28a745 !important;
    color: white !important;
}

/* EXCEL button - BLUE */
div.dt-buttons > .buttons-excel,
div.dt-buttons > .buttons-excel:hover,
div.dt-buttons > button.buttons-excel,
div.dt-buttons > button.buttons-excel:hover,
div.dt-buttons .dt-button.buttons-excel,
div.dt-buttons .dt-button.buttons-excel:hover {
    background-color: #007bff !important;
    border-color: #007bff !important;
    color: white !important;
}

/* PDF button - RED */
div.dt-buttons > .buttons-pdf,
div.dt-buttons > .buttons-pdf:hover,
div.dt-buttons > button.buttons-pdf,
div.dt-buttons > button.buttons-pdf:hover,
div.dt-buttons .dt-button.buttons-pdf,
div.dt-buttons .dt-button.buttons-pdf:hover {
    background-color: #dc3545 !important;
    border-color: #dc3545 !important;
    color: white !important;
}

/* PRINT button - TEAL/CYAN */
div.dt-buttons > .buttons-print,
div.dt-buttons > .buttons-print:hover,
div.dt-buttons > button.buttons-print,
div.dt-buttons > button.buttons-print:hover,
div.dt-buttons .dt-button.buttons-print,
div.dt-buttons .dt-button.buttons-print:hover {
    background-color: #17a2b8 !important;
    border-color: #17a2b8 !important;
    color: white !important;
}

/* COLUMN VISIBILITY button - GRAY */
div.dt-buttons > .buttons-colvis,
div.dt-buttons > .buttons-colvis:hover,
div.dt-buttons > button.buttons-colvis,
div.dt-buttons > button.buttons-colvis:hover,
div.dt-buttons > .buttons-collection,
div.dt-buttons > .buttons-collection:hover,
div.dt-buttons > button.buttons-collection,
div.dt-buttons > button.buttons-collection:hover {
    background-color: #6c757d !important;
    border-color: #6c757d !important;
    color: white !important;
}

/* ============================================
   DATATABLES TABLE STYLES
   ============================================ */
.dataTables_wrapper {
    padding: 20px 0 !important;
}

.dataTables_wrapper .dataTables_filter input {
    border: 1px solid #e0e0e0 !important;
    border-radius: 4px !important;
    padding: 8px 12px !important;
    margin-left: 8px !important;
}

.dataTables_wrapper .dataTables_length select {
    border: 1px solid #e0e0e0 !important;
    border-radius: 4px !important;
    padding: 6px 10px !important;
    margin: 0 8px !important;
}

table.dataTable thead th {
    font-weight: 600 !important;
    border-bottom: 2px solid #7366ff !important;
}

table.dataTable tbody tr:hover {
    background-color: #f8f9fa !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button {
    padding: 6px 12px !important;
    margin: 0 2px !important;
    border-radius: 4px !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button.current {
    background: linear-gradient(to right, #7366ff, #a85af8) !important;
    color: white !important;
    border: none !important;
}

/* ============================================
   ACTION BUTTONS IN TABLES
   ============================================ */
.table-actions {
    white-space: nowrap !important;
}

.table-actions .btn {
    margin: 0 2px !important;
    padding: 4px 8px !important;
    font-size: 12px !important;
    border-radius: 6px !important;
}

/* ============================================
   STATUS BADGES
   ============================================ */
.status-badge {
    display: inline-block !important;
    padding: 4px 10px !important;
    border-radius: 12px !important;
    font-size: 12px !important;
    font-weight: 500 !important;
}

.status-active {
    background-color: #d4edda !important;
    color: #155724 !important;
}

.status-inactive {
    background-color: #f8d7da !important;
    color: #721c24 !important;
}

.status-pending {
    background-color: #fff3cd !important;
    color: #856404 !important;
}

/* ============================================
   RESPONSIVE TABLE - NO HORIZONTAL SCROLLBAR
   ============================================ */
.card-body {
    overflow-x: hidden;
}
.card-body .table-responsive {
    overflow-x: visible !important;
}
.card-body .table-responsive table.dataTable,
.card-body .table-responsive table.display {
    width: 100% !important;
}

/* ============================================
   PAGINATION - ROUNDED BUTTONS
   ============================================ */
.dataTables_wrapper .dataTables_paginate .paginate_button {
    border-radius: 10px !important;
}

/* ============================================
   COLUMN VISIBILITY DROPDOWN
   ============================================ */
.dt-button-collection {
    background: white !important;
    border: 1px solid #dee2e6 !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15) !important;
}

.dataTables_wrapper .dt-button-collection button,
.dataTables_wrapper .dt-button-collection .dt-button {
    background: white !important;
    color: #000 !important;
    border: none !important;
    padding: 8px 16px !important;
    text-align: left !important;
    width: 100% !important;
    display: block !important;
}

.dataTables_wrapper .dt-button-collection button:hover,
.dataTables_wrapper .dt-button-collection .dt-button:hover {
    background: #e9ecef !important;
    color: #000 !important;
}

/* ============================================
   RESPONSIVE MEDIA QUERIES
   ============================================ */
@media screen and (max-width: 767px) {
    .dataTables_wrapper .dataTables_length,
    .dataTables_wrapper .dataTables_filter {
        text-align: left !important;
        margin-bottom: 10px !important;
    }

    .dataTables_wrapper .dataTables_info,
    .dataTables_wrapper .dataTables_paginate {
        text-align: left !important;
        margin-top: 10px !important;
    }
}