/* ============================================= */
/* ==       Payout Comparison Chart Styles      == */
/* ============================================= */

.payout-chart-container {
    overflow-x: auto; /* Ensures table is scrollable on small screens */
}

.payout-chart {
    width: 100%;
    border-collapse: collapse; /* Creates clean, single borders */
    margin-top: 1.5rem;
    font-size: 0.95rem;
}

.payout-chart thead {
    background-color: rgba(0, 0, 0, 0.3); /* Darker background for the header */
}

.payout-chart th {
    padding: 12px 15px;
    font-weight: bold;
    text-align: left;
    color: var(--light-text);
    border-bottom: 2px solid var(--accent-green); /* Accent color border */
}

.payout-chart td {
    padding: 10px 15px;
    border-bottom: 1px solid var(--medium-green-bg); /* Subtle row separator */
}

/* Zebra-striping for better readability */
.payout-chart tbody tr:nth-child(even) {
    background-color: rgba(0, 0, 0, 0.2);
}

/* Highlight row on hover */
.payout-chart tbody tr:hover {
    background-color: var(--medium-green-bg);
}

/* Color-coding the 'Difference' column for emphasis */
.payout-chart td:last-child {
    color: var(--error-red);
    font-weight: bold;
}