/* ===================================
   Geo Data Deployment Dashboard Styles
   =================================== */

.deployment-container {
    max-width: 1400px;
    margin: 2rem auto;
    padding: 2rem;
}

.deployment-header {
    margin-bottom: 2rem;
}

.deployment-header h2 {
    color: var(--Text-Colors-Black, #232323);
    font-family: var(--font-default);
    font-size: 2rem;
    font-weight: 700;
    margin-bottom: 0.5rem;
}

/* Statistics Cards */
.stat-card {
    height: 100%;
    border-radius: var(--radius-sm-alt, 0.5rem);
    box-shadow: var(--shadow-card, 0px 4px 12px rgba(0, 0, 0, 0.1));
    transition: transform 0.2s ease;
}

.stat-card:hover {
    transform: translateY(-5px);
    box-shadow: 0px 8px 20px rgba(0, 0, 0, 0.15);
}

.stat-card .card-header {
    border-radius: var(--radius-sm-alt, 0.5rem) var(--radius-sm-alt, 0.5rem) 0 0;
    padding: 1rem 1.5rem;
}

.stat-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem 0;
    border-bottom: 1px solid var(--Gray-Gray-Tint-20, #E0E0E0);
}

.stat-row:last-child {
    border-bottom: none;
}

.stat-label {
    font-family: var(--font-default);
    font-weight: 500;
    color: var(--Text-Colors-Dark-Gray, #8E8D8D);
}

.stat-value {
    font-family: var(--font-default);
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--Main-Colors-Main, #2B5631);
}

.stat-value-small {
    font-family: var(--font-default);
    font-size: 0.875rem;
    color: var(--Text-Colors-Dark-Gray, #8E8D8D);
}

/* Action Cards */
.action-card {
    height: 100%;
    border-radius: var(--radius-sm-alt, 0.5rem);
    border: 2px solid var(--Gray-Gray-Tint-20, #E0E0E0);
    transition: all 0.3s ease;
}

.action-card:hover {
    border-color: var(--Main-Colors-Main, #2B5631);
    box-shadow: 0px 8px 20px rgba(43, 86, 49, 0.15);
}

.action-card h4 {
    color: var(--Text-Colors-Black, #232323);
    font-family: var(--font-default);
    font-size: 1.25rem;
    font-weight: 600;
    margin-bottom: 1rem;
}

.action-card p {
    color: var(--Text-Colors-Dark-Gray, #8E8D8D);
    font-family: var(--font-default);
    margin-bottom: 1.5rem;
}

/* Deployment Flow Visualization */
.deployment-flow {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 2rem;
    padding: 2rem;
}

.flow-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    min-width: 150px;
}

.flow-icon {
    font-size: 4rem;
    margin-bottom: 0.5rem;
    animation: pulse 2s infinite;
}

@keyframes pulse {
    0%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.1);
    }
}

.flow-label {
    font-family: var(--font-default);
    font-weight: 600;
    color: var(--Text-Colors-Black, #232323);
    margin-bottom: 0.5rem;
}

.flow-count {
    font-family: var(--font-default);
    font-size: 0.875rem;
    color: var(--Text-Colors-Dark-Gray, #8E8D8D);
}

.flow-arrow {
    font-size: 2rem;
    color: var(--Main-Colors-Main, #2B5631);
    font-weight: 700;
    animation: slide 1.5s infinite;
}

@keyframes slide {
    0%, 100% {
        transform: translateX(0);
    }
    50% {
        transform: translateX(10px);
    }
}

/* Modal Styles */
.modal.show {
    display: block;
    background: rgba(0, 0, 0, 0.5);
}

.modal-content {
    border-radius: var(--radius-sm-alt, 0.5rem);
    box-shadow: 0px 10px 40px rgba(0, 0, 0, 0.3);
}

.modal-header {
    border-bottom: 1px solid var(--Gray-Gray-Tint-20, #E0E0E0);
    padding: 1.5rem;
}

.modal-body {
    padding: 1.5rem;
}

.modal-footer {
    border-top: 1px solid var(--Gray-Gray-Tint-20, #E0E0E0);
    padding: 1rem 1.5rem;
}

/* Progress Indicators */
.progress {
    height: 30px;
    border-radius: var(--radius-sm-alt, 0.25rem);
    background: var(--Gray-Gray-Tint-10, #F5F5F5);
}

.progress-bar {
    background: linear-gradient(90deg, 
        var(--Main-Colors-Main, #2B5631) 0%, 
        #3a7041 100%);
    border-radius: var(--radius-sm-alt, 0.25rem);
    font-weight: 600;
}

/* Responsive Design */
@media (max-width: 768px) {
    .deployment-container {
        padding: 1rem;
    }

    .deployment-flow {
        flex-direction: column;
        gap: 1rem;
    }

    .flow-arrow {
        transform: rotate(90deg);
    }

    @keyframes slide {
        0%, 100% {
            transform: rotate(90deg) translateX(0);
        }
        50% {
            transform: rotate(90deg) translateX(10px);
        }
    }

    .stat-value {
        font-size: 1.5rem;
    }
}