/* modern-datatable.css */

table {
    width: 100% !important;
    border-collapse: separate;
    border-spacing: 0;
    border-radius: var(--tblr-border-radius);
    overflow: hidden;
    margin-bottom: 0 !important;
    /* show a light shadow */
    box-shadow: var(--tblr-box-shadow-sm) !important;
    
}

[data-bs-theme="dark"] table {
    background: var(--tblr-body-bg) !important;

}

[data-bs-theme="dark"] table td.actions-column {
    background: var(--tblr-body-bg) !important;
}


table th:first-child {
    border-top-left-radius: var(--tblr-border-radius);
}

table th:last-child {
    border-top-right-radius: var(--tblr-border-radius);
}

/* Header */
table thead {
    background: linear-gradient(45deg, #eb3480, #f5b47d) !important;
    color: #fff !important;
    position: sticky;
    top: 0;
    z-index: 1;
}

table thead th {
    color: #fff !important;
    background: transparent !important;
    font-weight: bold !important;
    padding: 1rem 16px ! important;
    font-size: 12px ! important;
    letter-spacing: 0.02em;
}

table th {
    padding: 19px 16px;
    background: transparent;
    font-weight: 600;
    font-size: 14px;
    letter-spacing: 0.02em;
}

/* Body rows */
table tbody tr {
    background: #fff;
    transition: background 0.2s ease;

}

table tbody tr:nth-child(even) {
    background: #f9f9f9;
}

table tbody tr:hover {
    background: #f1f5ff;
}

table td {
    padding: 12px 16px;
    font-size: 14px;
    color: #333;
    vertical-align: middle;
}

table tr:last-child td {
    border-bottom: none !important;
}

/* Action buttons cell */
table .actions {
    display: flex;
    gap: 8px;
}

table td.actions-column {
    background: var(--tblr-light-200);
    border-left: 1px solid var(--tblr-border-color);
}

/* Mobile: convert to card blocks */
@media (max-width: 768px) {


    table,
    table thead,
    table tbody,
    table th,
    table td,
    table tr {
        display: block;
    }

    table thead {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(1px, 1px, 1px, 1px);
    }

    table tr {
        margin-bottom: 16px;
        border-radius: 8px;
        overflow: hidden;
    }

    table td,
    table td.text-center,
    table td.text-end,
    table td.text-start {
        padding: 10px 16px;
        position: relative;
        text-align: right !important;
        width: unset !important;
        max-width: 100% !important;
    }

    table td::before {
        content: attr(data-label);
        position: absolute;
        left: 16px;
        font-weight: 600;
        text-transform: uppercase;
        font-size: 11px;
        color: #666;
    }

    table td.actions-column::before {
        content: "";
        position: absolute;
    }

    table td.actions-column {
        padding: 0 !important;
        text-align: center !important;
        display: flex;
        justify-content: center;
        align-items: center;
        opacity: 0.8;
        border: 1px solid var(--tblr-border-color);
        border-radius: 0 0 var(--tblr-border-radius) var(--tblr-border-radius);
    }

    .datatable-header {
        flex-wrap: wrap !important;
        flex-direction: row !important;
        justify-content: space-between !important;
    }

    .datatable-buttons-container {
        /* /fill */
        flex: 1 1 auto;
    }

    .datatable-buttons-container .btn-group {
        /* /fill */
        width: 100%;
    }

    /* datatable-search-input-container */
    .datatable-search-input-container {
        border: none !important;
        border-bottom: 1px solid var(--tblr-gray-100) !important;
        padding-bottom: 0.1rem !important;
    }
}

/* Compact padding for small tables/markdown */
.table-sm> :not(caption)>*>*,
.markdown>table> :not(caption)>*>* {
    padding: 0.25rem 0.65rem;
    font-size: 0.875rem;
}

/* Buttons inside cells */
table td .btn {
    padding: 0.1rem 0.7rem;
    font-size: 0.8rem;
    border-radius: var(--tblr-btn-border-radius) !important;
    text-transform: uppercase;
}

table td .btn:not(.btn-icon) i {
    font-size: var(--tblr-btn-icon-size);
    margin-right: 0.3rem;
}

/* table td .btn:has(> i) {
    padding: 0.1rem 0.7rem 0.1rem 0.3rem;
} */

/* DataTables pagination tweaks */
.dataTables_wrapper .dataTables_paginate .pagination li a {
    padding: 0 0.75rem;
    font-size: 0.8rem !important;
}

.datatable-pagination-wrapper {
    margin-bottom: 2px;
}

.datatable-header {
    padding: 0.1rem .5rem;
    border-radius: var(--tblr-border-radius);
    /* border: 1px solid var(--tblr-primary); */
    /* color: var(--tblr-secondary) !important; */
    font-weight: bolder;
    display: flex;
    /* flexnowrap */
    flex-wrap: nowrap;
    align-items: center;
    /* gap1 */
    gap: 0.5rem;
}



.datatable-header .datatable-search-input-container,
.dataTables_filter,
.dataTables_filter label {
    flex: 1 1 auto;
    display: flex ! important;
    align-items: center;
    width: 100% !important;
}

.datatable-header .datatable-search-input-container .datatable-search-input {
    flex: 1 1 auto;
    width: 100%;
    border: 0 !important;
    height: 2rem !important;
    box-shadow: none !important;

}

.datatable-length-menu-container .datatable-length-menu-input {
    border: 0 !important;
    height: 2rem !important;
    box-shadow: none !important;
    text-align: center !important;
    padding: 0.25rem 0.25rem !important;
    font-weight: bold;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important;
    background: transparent !important;
    color: var(--tblr-gray-700) !important;
    font-size: 0.875rem !important;
    cursor: pointer !important;
}

.datatable-length-menu-container .datatable-length-menu-input:hover {
    background-color: var(--tblr-gray-100) !important;
    color: var(--tblr-gray-800) !important;
}

.datatable-buttons-container .dt-buttons {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 0.5rem;
}

.table-advance-filter {
    /* remove shadows  */
    box-shadow: none !important;
}


.datatable-footer-container {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: space-between;
    padding: 0rem 0.5rem;
    color: var(--tblr-gray-600) ! important;
}

.datatable-info-container .dataTables_info {
    padding: 0 !important;

}

.datatable-filter-input:focus {
    outline: none !important;
    box-shadow: none !important;
    border-color: var(--tblr-border-color) ! important;
}

table.dataTable thead>tr>th.sorting:before,
table.dataTable thead>tr>th.sorting:after,
table.dataTable thead>tr>th.sorting_asc:before,
table.dataTable thead>tr>th.sorting_asc:after,
table.dataTable thead>tr>th.sorting_desc:before,
table.dataTable thead>tr>th.sorting_desc:after,
table.dataTable thead>tr>th.sorting_asc_disabled:before,
table.dataTable thead>tr>th.sorting_asc_disabled:after,
table.dataTable thead>tr>th.sorting_desc_disabled:before,
table.dataTable thead>tr>th.sorting_desc_disabled:after,
table.dataTable thead>tr>td.sorting:before,
table.dataTable thead>tr>td.sorting:after,
table.dataTable thead>tr>td.sorting_asc:before,
table.dataTable thead>tr>td.sorting_asc:after,
table.dataTable thead>tr>td.sorting_desc:before,
table.dataTable thead>tr>td.sorting_desc:after,
table.dataTable thead>tr>td.sorting_asc_disabled:before,
table.dataTable thead>tr>td.sorting_asc_disabled:after,
table.dataTable thead>tr>td.sorting_desc_disabled:before,
table.dataTable thead>tr>td.sorting_desc_disabled:after {
    right: 0 !important;
}