/* Base grid/card styles moved to common.css */

/* Individual card colors */
.number-card.color-0-10 {
    border-top-color: #28a745;
}

/* green */
.number-card.color-10-100 {
    border-top-color: #ff4757;
}

/* red */
.number-card.color-100-1000 {
    border-top-color: #1e90ff;
}

/* blue */
.number-card.color-1000-1000000 {
    border-top-color: #ffa502;
}

/* orange */

/* Headings & paragraphs covered by common card selectors */

/* Modal base moved to common.css */

/* ===== Numbers Table in Modal ===== */
.numbers-table {
    width: 100%;
    border-collapse: collapse;
    margin: 15px 0;
    font-size: 1rem;
    text-align: center;
}

.numbers-table th,
.numbers-table td {
    padding: 10px 8px;
    border: 1px solid #ddd;
}

/* Default fallback */
.numbers-table th {
    background-color: #b30059;
    color: white;
}

/* ===== Number Modal Colors ===== */
/* Card 0-10 (green) */
.modal-content.color-0-10 h2,
.modal-content.color-0-10 .numbers-table th {
    background-color: #28a745;
    color: white;
}

.modal-content.color-0-10 .numbers-table tr:nth-child(even) {
    background-color: rgba(40, 167, 69, 0.1);
}

.modal-content.color-0-10 .numbers-table tr:hover {
    background-color: rgba(40, 167, 69, 0.15);
}

.modal-content.color-0-10 {
    border-top-color: #28a745;
}

/* Card 10-100 (red) */
.modal-content.color-10-100 h2,
.modal-content.color-10-100 .numbers-table th {
    background-color: #ff4757;
    color: white;
}

.modal-content.color-10-100 .numbers-table tr:nth-child(even) {
    background-color: rgba(255, 71, 87, 0.1);
}

.modal-content.color-10-100 .numbers-table tr:hover {
    background-color: rgba(255, 71, 87, 0.15);
}

.modal-content.color-10-100 {
    border-top-color: #ff4757;
}

/* Card 100-1000 (blue) */
.modal-content.color-100-1000 h2,
.modal-content.color-100-1000 .numbers-table th {
    background-color: #1e90ff;
    color: white;
}

.modal-content.color-100-1000 .numbers-table tr:nth-child(even) {
    background-color: rgba(30, 144, 255, 0.1);
}

.modal-content.color-100-1000 .numbers-table tr:hover {
    background-color: rgba(30, 144, 255, 0.15);
}

.modal-content.color-100-1000 {
    border-top-color: #1e90ff;
}

/* Card 1000-1000000 (orange) */
.modal-content.color-1000-1000000 h2,
.modal-content.color-1000-1000000 .numbers-table th {
    background-color: #ffa502;
    color: white;
}

.modal-content.color-1000-1000000 .numbers-table tr:nth-child(even) {
    background-color: rgba(255, 165, 2, 0.1);
}

.modal-content.color-1000-1000000 .numbers-table tr:hover {
    background-color: rgba(255, 165, 2, 0.15);
}

.modal-content.color-1000-1000000 {
    border-top-color: #ffa502;
}

/* Modal header default */
.modal-content h2 {
    text-align: center;
    margin-bottom: 20px;
}