/* Staking Rewards Calculator Styles */

/* Sortable table headers */
.sortable {
    cursor: pointer;
    user-select: none;
    transition: background-color 0.2s ease;
}

.sortable:hover {
    background-color: rgba(var(--bs-primary-rgb), 0.1);
}

.sortable.active-sort {
    background-color: rgba(var(--bs-primary-rgb), 0.15);
}

.sort-icon {
    font-size: 0.75rem;
    margin-left: 4px;
    opacity: 0.7;
}

/* Spin animation for refresh button */
@keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

.spin {
    animation: spin 1s linear infinite;
}

/* Table styling */
#resultsTable {
    font-size: 0.9rem;
}

#resultsTable thead th {
    font-weight: 600;
    white-space: nowrap;
    vertical-align: middle;
    border-bottom-width: 2px;
}

#resultsTable tbody td {
    vertical-align: middle;
}

#resultsTable tbody tr:hover {
    background-color: rgba(var(--bs-primary-rgb), 0.05);
}

/* Badge styling */
#resultsTable .badge {
    font-weight: 500;
    font-size: 0.8rem;
}

/* Dark mode adjustments */
[data-bs-theme="dark"] .sortable:hover {
    background-color: rgba(168, 85, 247, 0.15);
}

[data-bs-theme="dark"] .sortable.active-sort {
    background-color: rgba(168, 85, 247, 0.2);
}

[data-bs-theme="dark"] #resultsTable tbody tr:hover {
    background-color: rgba(168, 85, 247, 0.1);
}

[data-bs-theme="dark"] #resultsTable thead th {
    background-color: rgba(30, 34, 42, 0.8);
    border-color: rgba(255, 255, 255, 0.1);
}

[data-bs-theme="dark"] .table-light {
    --bs-table-bg: rgba(30, 34, 42, 0.8);
    --bs-table-color: var(--bs-body-color);
}

/* Responsive table improvements */
@media (max-width: 768px) {
    #resultsTable {
        font-size: 0.8rem;
    }

    #resultsTable thead th,
    #resultsTable tbody td {
        padding: 0.5rem 0.4rem;
    }

    .sort-icon {
        font-size: 0.65rem;
    }
}

/* Number formatting in table cells */
#resultsTable td span {
    font-variant-numeric: tabular-nums;
}

/* Loading state */
#loadingIndicator {
    min-height: 150px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}