.region-status-container {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: var(--p1);
}

.capacity-card {
    border-radius: var(--border-radius);
    transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
    box-shadow: 0 0 0 rgba(0,0,0,0);
    width: 8rem;
}

.capacity-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow);
}

/* Content layout */
.capacity-card-content {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: var(--p1);
    padding: var(--p1);
    overflow: hidden;
}


/* Icon styling - small and contained */
.capacity-icon {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
}

.capacity-icon i {
    font-size: 1.5rem;
}

.capacity-icon img {
    width: 1.5rem;
}

.capacity-value-container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    gap: var(--p1);
    width: 100%;
}

/* Name styling */
.capacity-name {
    grid-area: name;
    font-size: 0.65rem;
    font-weight: 600;
    color: rgba(255,255,255,0.9);
    line-height: 1;
    margin-top: 2px;
}

/* Value styling */
.capacity-number {
    width: 100%;
    grid-area: number;
    font-size: 1.1rem;
    font-weight: 700;
    color: white;
    align-self: end;
    line-height: 1;
}

/* Value color states - these will be applied via JS */
.capacity-number.high-value { color: #ffffff; text-shadow: 0 0 5px rgba(255,255,255,0.5); }
.capacity-number.medium-value { color: #ffffff; }
.capacity-number.low-value { color: rgba(255,255,255,0.8); }

/* Card color variations */
.capacity-card.blue {
    background: linear-gradient(135deg, #1e88e5, #1565c0);
}

.capacity-card.orange {
    background: linear-gradient(135deg, #fb8c00, #ef6c00);
}

.capacity-card.green {
    background: linear-gradient(135deg, #43a047, #2e7d32);
}

.capacity-card.teal {
    background: linear-gradient(135deg, #00acc1, #00838f);
}

.capacity-card.purple {
    background: linear-gradient(135deg, #8e24aa, #6a1b9a);
}

.capacity-card.red {
    background: linear-gradient(135deg, #e53935, #c62828);
}

.capacity-card.indigo {
    background: linear-gradient(135deg, #3949ab, #283593);
}

.capacity-card.navy {
    background: linear-gradient(135deg, #1a237e, #0d47a1);
}

/* Animation for updates */
@keyframes pulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.05); }
    100% { transform: scale(1); }
}





/* Resource-specific colors and backgrounds */
/* #resource-deployment_capacity {
    background: linear-gradient(145deg, #ebf7ff, #e1f0fb);
    border-left: 3px solid #3498db;
}
#resource-deployment_capacity .status-icon-container {
    background: linear-gradient(135deg, #3498db, #2980b9);
}

#resource-development_capacity {
    background: linear-gradient(145deg, #fff7eb, #fef5e7);
    border-left: 3px solid #f39c12;
}
#resource-development_capacity .status-icon-container {
    background: linear-gradient(135deg, #f39c12, #e67e22);
}

#resource-individual_finance {
    background: linear-gradient(145deg, #ebfbf2, #e3f8eb);
    border-left: 3px solid #2ecc71;
}
#resource-individual_finance .status-icon-container {
    background: linear-gradient(135deg, #2ecc71, #27ae60);
}

#resource-natural_resources {
    background: linear-gradient(145deg, #e7f9f1, #ddf6ea);
    border-left: 3px solid #27ae60;
}
#resource-natural_resources .status-icon-container {
    background: linear-gradient(135deg, #27ae60, #16a085);
}

#resource-science_capacity {
    background: linear-gradient(145deg, #f5ebfa, #f0e7f5);
    border-left: 3px solid #9b59b6;
}
#resource-science_capacity .status-icon-container {
    background: linear-gradient(135deg, #9b59b6, #8e44ad);
}

#resource-social_capital {
    background: linear-gradient(145deg, #fcebea, #f8e5e4);
    border-left: 3px solid #e74c3c;
}
#resource-social_capital .status-icon-container {
    background: linear-gradient(135deg, #e74c3c, #c0392b);
}

#resource-system_finance {
    background: linear-gradient(145deg, #e8f8f5, #dff5f2);
    border-left: 3px solid #1abc9c;
}
#resource-system_finance .status-icon-container {
    background: linear-gradient(135deg, #1abc9c, #16a085);
}

#resource-testing_capacity {
    background: linear-gradient(145deg, #ebeff1, #e3e7ea);
    border-left: 3px solid #34495e;
}
#resource-testing_capacity .status-icon-container {
    background: linear-gradient(135deg, #34495e, #2c3e50);
} */

/* Value-based coloring */
.status-text.high-value {
    color: #27ae60;
}

.status-text.medium-value {
    color: #f39c12;
}

.status-text.low-value {
    color: #e74c3c;
}

.status-text-updated {
    animation: pulse 0.25s ease-in-out;
}

.status-text-updated {
    animation: pulse 0.3s ease-in-out;
}









/* OLD */
#region-status-card {

}

#region-status-card .card-body {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: var(--p2);
}

.resource-status {
    --scale: 2;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: var(--p1);
    font-size: calc(var(--icon) * var(--scale));
}

.resource-status i.status-icon {
    padding-bottom: calc(4px * var(--scale));
}

.resource-status img.status-icon {
    width: calc(var(--icon) * var(--scale));
}

.resource-status .status-text {
}

.region-resource-popover {
    padding: var(--p2) var(--p2);
    background-color: var(--white);
    border-radius: var(--border-radius);
    box-shadow: var(--shadow);
    border: var(--shadow-border);

    max-width: calc(100vw - 2 * var(--p2));
    z-index: 101;
}

.region-resource-popover h3 {
    margin-bottom: var(--p1);
}