/* ==========================================
   TABLE STYLES
   ========================================== */

.table { 
    color: #e0e0e0 !important; 
    border-color: #222 !important; 
    --bs-table-bg: transparent; 
}

thead th { 
    color: #31a651 !important; 
    background-color: #1a1a1a !important; 
    border-bottom: 2px solid #31a651 !important; 
    font-size: 0.9rem; 
}

.table tbody td { 
    background-color: transparent !important; 
    color: #e0e0e0 !important; 
    border-bottom: 1px solid #222 !important; 
    vertical-align: middle; 
}

.table tbody td.phone-number { 
    color: #31a651 !important; 
}

.table-hover tbody tr:hover td { 
    background-color: #1a1a1a !important; 
    color: #ffffff !important; 
}

.font-monospace.text-success { 
    color: #31a651 !important; 
}

/* DataTables wrapper */
#db-panel .card { 
    background-color: #151515; 
    border: 1px solid #222; 
    border-radius: 12px; 
    overflow: hidden;
    display: flex;
    flex-direction: column;
    height: 100%;
    flex: 1;
}

#db-panel .card .d-flex.align-items-center.justify-content-between,
#db-panel .card #customSearch {
    flex-shrink: 0;
}

#db-panel .card .dataTables_wrapper {
    flex: 1;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

#db-panel .card .dataTables_scroll {
    flex: 1;
    overflow-y: auto;
    min-height: 0;
}

#db-panel .card .dataTables_scrollBody {
    max-height: none !important;
}

#db-panel .card .dataTables_info,
#db-panel .card .dataTables_paginate {
    flex-shrink: 0;
    margin-top: 10px;
    padding-bottom: 10px;
}

/* Pagination */
.pagination .page-link { 
    background-color: #1a1a1a; 
    border-color: #333; 
    color: #31a651; 
}

.pagination .page-item.active .page-link { 
    background-color: #31a651; 
    border-color: #31a651; 
    color: #0a0a0a !important; 
}

#participantsTable_info { 
    color: #888 !important; 
}

#participantsTable thead th { 
    text-align: left !important; 
}

/* Row selection */
tbody tr.selected { 
    background-color: #1a3a1a !important; 
}

tbody tr.selected:hover { 
    background-color: #1f4620 !important; 
}

tbody tr { 
    cursor: pointer; 
}

table.table.dataTable > tbody > tr.selected > * {
    box-shadow: inset 0 0 0 9999px #1f4620 !important;
}

.table-success { 
    background-color: #1a3a1a !important; 
}

.table-success td { 
    background-color: #1a3a1a !important; 
    color: #31a651 !important; 
}

.table-danger { 
    background-color: #3a1a1a !important; 
}

.table-danger td { 
    background-color: #3a1a1a !important; 
    color: #dc3545 !important; 
}

/* Selected rows styling */
tbody tr.selected { 
    background-color: #1a3a1a !important; 
}

tbody tr.selected td { 
    background-color: #1a3a1a !important; 
    color: #31a651 !important; 
}

tbody tr.selected:hover { 
    background-color: #1f4620 !important; 
}

tbody tr.selected:hover td { 
    background-color: #1f4620 !important; 
}
/* Retry button animation */
.retry-icon {
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.2rem;
    height: 1.2rem;
    color: #ff6b6b;
    transition: color 0.2s ease;
    background-color: transparent;
}

.retry-icon:hover {
    color: #ff8888;
}

.retry-icon svg {
    width: 100%;
    height: 100%;
    transition: transform 0.2s ease;
}

.retry-icon.spinning svg {
    animation: spin-retry 1s linear infinite;
}

@keyframes spin-retry {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}