/* Reset Bootstrap table vars just for tt-table */
.tt-table {
    border-collapse: collapse;
    border-spacing: 0;
    --bs-table-bg: transparent;
    --bs-table-striped-bg: transparent;
    --bs-table-hover-bg: transparent;
    --bs-table-border-color: #e5e7eb;
    background-color: #f9fafb;
    border-radius: 0.5rem;
    overflow: hidden;
    border-color: #e5e7eb;
    width:100%!important;
}

    /* >>> IMPORTANT: unify all cell layout <<< */
    .tt-table th,
    .tt-table td {
        padding: 0.5rem 0.75rem;
        vertical-align: middle !important;
        background-color: transparent !important; /* we color rows/thead */
        border-color: #e5e7eb !important;
    }

    /* ===== HEADER: gradient on thead, transparent cells ===== */

    /* Apply gradient once on the header row container */
    .tt-table thead {
        background: linear-gradient( 90deg, #047857, /* green */
        #0f766e, /* teal */
        #0ea5e9 /* blue */
        );
    }

        /* Let the gradient show through the cells */
        .tt-table thead th {
            background: transparent !important;
            color: #ecfdf5 !important;
            border-color: rgba(15, 118, 110, 0.45) !important;
            font-size: 0.85rem;
            text-transform: uppercase;
            letter-spacing: 0.06em;
            font-weight: 600;
            padding-top: 0.55rem;
            padding-bottom: 0.55rem;
        }

    /* ===== BODY CELLS / BORDERS ===== */

    .tt-table tbody td,
    .tt-table tbody th {
        border-color: #e5e7eb !important;
        font-size: 0.9rem;
        vertical-align: middle;
        background-color: transparent !important; /* important: rows will carry bg */
    }

    /* ===== ZEBRA STRIPES: applied to rows, not cells ===== */

    .tt-table tbody tr:nth-child(odd) {
        background-color: #ecfdf5; /* light mint */
    }

    .tt-table tbody tr:nth-child(even) {
        background-color: #e0f2fe; /* light blue */
    }

    /* ===== HOVER: gradient on row, cells transparent ===== */

    .tt-table.table-hover > tbody > tr {
        transition: background-color 0.15s ease, box-shadow 0.15s ease;
    }

        .tt-table.table-hover > tbody > tr:hover {
            background: radial-gradient( circle at left, #bbf7d0 0%, #dbeafe 40%, #f9fafb 100% );
            box-shadow: inset 4px 0 0 rgba(16, 185, 129, 0.85);
        }

            /* columns stay transparent so the row bg is visible */
            .tt-table.table-hover > tbody > tr:hover > * {
                background-color: transparent !important;
            }

    /* ===== ACTION COLUMN ===== */

    .tt-table td:last-child {
        white-space: nowrap;
    }

    /* ===== BUTTONS INSIDE TABLES (same as before) ===== */

    .tt-table .btn.btn-warning {
        border-radius: 0.35rem;
        border: none;
        background: linear-gradient(135deg, #0ea5e9, #6366f1);
        color: #f9fafb;
        font-size: 0.9rem;
        padding: 0.25rem 1.2rem;
        box-shadow: 0 3px 8px rgba(37, 99, 235, 0.45);
        display:flex;
        align-content:center;
        align-items:center;
        text-align:center;
    }

        .tt-table .btn.btn-warning:hover {
            background: linear-gradient(135deg, #2563eb, #4338ca);
        }

    .tt-table .btn-warning i, .tt-table .btn-danger i {
        font-size: 1.3rem;
    }

    .tt-table .btn.btn-danger {
        border-radius: 0.35rem;
        font-size: 0.9rem;
        padding: 0.25rem 1.2rem;
        background: linear-gradient(135deg, #dc2626, #f97316);
        border: none;
        box-shadow: 0 3px 8px rgba(127, 29, 29, 0.45);
        display: flex;
        align-content: center;
        align-items: center;
        text-align: center;
    }

        .tt-table .btn.btn-danger:hover {
            background: linear-gradient(135deg, #b91c1c, #ea580c);
        }

        .tt-table td{
            height:100%!important;
            align-content:center;
            align-items:center;
        }

            .tt-table td:last-child .btn {
                vertical-align: middle;
                line-height: 3;
            }



/* Scope to DataTables wrapper so we don't affect other paginations */
.dataTables_wrapper .dataTables_paginate {
    margin-top: 0.75rem;
    display: flex;
    justify-content: flex-end;
}

    /* UL itself */
    .dataTables_wrapper .dataTables_paginate .pagination {
        margin-bottom: 0;
        gap: 0.25rem;
    }

    /* Base pagination buttons */
    .dataTables_wrapper .dataTables_paginate .paginate_button.page-item .page-link {
        border-radius: 0.4rem;
        border: 1px solid #d1d5db;
        background-color: #f9fafb;
        color: #374151;
        font-size: 0.85rem;
        padding: 0.25rem 0.6rem;
        min-width: 2rem;
        text-align: center;
        box-shadow: 0 2px 5px rgba(15, 23, 42, 0.15);
        transition: background-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease, transform 0.1s ease;
    }

        /* Hover */
        .dataTables_wrapper .dataTables_paginate .paginate_button.page-item .page-link:hover {
            background: linear-gradient(135deg, #ecfdf5, #e0f2fe);
            color: #065f46;
            border-color: #a7f3d0;
            box-shadow: 0 3px 8px rgba(15, 23, 42, 0.25);
            transform: translateY(-1px);
        }

    /* Active page */
    .dataTables_wrapper .dataTables_paginate .paginate_button.page-item.active .page-link {
        background: linear-gradient(135deg, #059669, #0f766e);
        border-color: #0f766e;
        color: #ecfdf5;
        box-shadow: 0 4px 10px rgba(5, 150, 105, 0.6);
    }

    /* Disabled (Prev/Next at edges) */
    .dataTables_wrapper .dataTables_paginate .paginate_button.page-item.disabled .page-link {
        background-color: #f3f4f6;
        color: #9ca3af;
        border-color: #e5e7eb;
        box-shadow: none;
        cursor: default;
    }

    /* Remove default focus outline & use a softer one */
    .dataTables_wrapper .dataTables_paginate .paginate_button.page-item .page-link:focus {
        box-shadow: 0 0 0 2px rgba(45, 212, 191, 0.5);
        outline: none;
    }

    /* Reset DataTables default hover/active background around the buttons */
    .dataTables_wrapper .dataTables_paginate .paginate_button,
    .dataTables_wrapper .dataTables_paginate .paginate_button:hover,
    .dataTables_wrapper .dataTables_paginate .paginate_button:active,
    .dataTables_wrapper .dataTables_paginate .paginate_button:focus {
        background: transparent !important;
        border: none !important;
        box-shadow: none !important;
    }

        /* If you're using Bootstrap integration (li.page-item.paginate_button) */
        .dataTables_wrapper .dataTables_paginate .paginate_button.page-item,
        .dataTables_wrapper .dataTables_paginate .paginate_button.page-item:hover,
        .dataTables_wrapper .dataTables_paginate .paginate_button.page-item:active,
        .dataTables_wrapper .dataTables_paginate .paginate_button.page-item:focus {
            background: transparent !important;
            border: none !important;
            box-shadow: none !important;
        }

.dataTables_filter{
    margin-bottom:5px;
}