.card,
.stat-card,
.heatmap-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border-radius: var(--rounded-xl);
    border: 2px solid transparent;
    transition: all var(--transition-fast);
}

.card {
    position: relative;
    container-type: inline-size;
    gap: var(--gap-md);
    padding: var(--spacing-6);
    background: var(--surface);
    box-shadow: var(--shadow-sm);
    transition: all var(--transition-normal);
    overflow: hidden;
    text-decoration: none;
    width: 100%;

    &:hover:not(.card-disabled) {
        transform: translateY(-4px);
        box-shadow: var(--shadow-lg);
        border-color: rgba(var(--primary-rgb), var(--opacity-20));
    }

    &:active:not(.card-disabled) {
        transform: translateY(0);
    }

    &.primary {
        background: 
            var(--gradient-primary) padding-box,
            var(--gradient-primary) border-box;
        border-color: transparent;
        color: var(--white);

        &:hover {
            box-shadow: 0 10px 15px -3px var(--primary-shadow), 0 4px 6px -4px var(--primary-shadow);
            border-color: rgba(var(--white-rgb), var(--opacity-80));
        }

        .card-icon {
            background: rgba(var(--white-rgb), var(--opacity-20));
            color: var(--white);
        }

        .card-title {
            color: var(--white);
        }

        .card-description {
            color: rgba(var(--white-rgb), var(--opacity-90));
        }

        .card-arrow {
            color: rgba(var(--white-rgb), var(--opacity-60));
        }

        &:hover .card-arrow {
            color: var(--white);
            transform: translateX(4px);
        }
    }
}

.card-disabled {
    opacity: var(--opacity-60);
    cursor: not-allowed;
}

.card-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 60cqw;
    height: 60cqw;
    background: rgba(var(--primary-rgb), var(--opacity-10));
    color: var(--primary);
    border-radius: var(--rounded-lg);

    i {
        font-size: 40cqw;
    }
}

.card-title {
    font-size: var(--text-lg);
    font-weight: var(--font-semibold);
    color: var(--text-primary);
    text-align: center;
}

.card-description {
    font-size: var(--text-sm);
    color: var(--text-secondary);
    text-align: center;
    line-height: var(--leading-snug);
}

.card-arrow {
    position: absolute;
    bottom: var(--spacing-4);
    right: var(--spacing-4);
    font-size: var(--text-lg);
    color: var(--text-muted);
    transition: all var(--transition-fast);

    .card:hover:not(.card-disabled) & {
        color: var(--primary);
        transform: translateX(4px);
    }
}

.card-badge {
    position: absolute;
    top: var(--spacing-3);
    right: var(--spacing-3);
    padding: var(--spacing-1) var(--spacing-2);
    background-color: var(--primary);
    color: var(--white);
    font-size: var(--text-xs);
    font-weight: var(--font-semibold);
    border-radius: var(--rounded-full);
}

.section-card {
    display: flex;
    flex-direction: column;
    gap: var(--gap-lg);
    background: var(--surface);
    border-radius: var(--rounded-xl);
    padding: var(--spacing-6);
    box-shadow: var(--shadow-md);

    &:empty {
        display: none;
    }
}

.section-title {
    display: flex;
    align-items: center;
    gap: var(--gap-md);

    i {
        font-size: var(--text-2xl);
        color: var(--primary);
    }

    h2 {
        font-size: var(--text-xl);
        font-weight: var(--font-bold);
        color: var(--text-primary);
    }

    .section-title-meta {
        margin-left: auto;
        font-size: var(--text-sm);
        font-weight: var(--font-medium);
        color: var(--text-muted);
    }

    .section-title-meta:empty {
        display: none;
    }
}

.stat-card {
    text-align: center;
    padding: var(--spacing-4);
    background: var(--surface-alt);
    min-width: 0;

    &.minimal {
        background: transparent;
        border: none;

        .stat-card-value {
            font-size: var(--text-3xl);
        }
    }

    &.highlight {
        background: rgba(var(--primary-rgb), var(--opacity-10));
        border-color: var(--primary);
    }

    &.success {
        background: var(--green-100);
        border-color: var(--green-800);

        .stat-card-value {
            color: var(--green-800);
        }
    }

    &.error {
        background: var(--red-100);
        border-color: var(--red-600);

        .stat-card-value {
            color: var(--red-600);
        }
    }
}

.stat-card-value {
    font-size: var(--text-2xl);
    font-weight: var(--font-bold);
    color: var(--primary);

    &.loading {
        animation: stat-pulse 1.2s ease-in-out infinite;
    }
}

@keyframes stat-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.3; }
}

.stat-card-label {
    font-size: var(--text-sm);
    font-weight: var(--font-medium);
    color: var(--text-secondary);
    padding-top: var(--spacing-2);
    overflow-wrap: break-word;
    word-break: break-word;
    max-width: 100%;
}

.stat-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--spacing-3);
    width: 100%;
}

.heatmap-card {
    text-align: center;
    padding: var(--spacing-4);
    aspect-ratio: 1;
    min-height: var(--spacing-20);
    color: var(--white);
    text-shadow: 0 1px 3px rgba(var(--black-rgb), var(--opacity-40));
    border: none;
    background: var(--heatmap-gradient);
    background-size: 10000% 100%;
    background-position: calc(var(--pos, 0.5) * 100%) 0;

    &.empty {
        background: var(--border-color);
        color: var(--text-muted);
        text-shadow: none;
    }

    &.inactive {
        visibility: hidden;
        background: none;
    }
}

.heatmap-card-value {
    font-size: var(--text-xl);
    font-weight: var(--font-bold);
    color: inherit;
}

.heatmap-card-label {
    font-size: var(--text-xs);
    font-weight: var(--font-medium);
    color: inherit;
    opacity: var(--opacity-80);
    padding-top: var(--spacing-1);
}

@media (max-width: 639px) {
    .stat-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: var(--spacing-2);
    }

    .card {
        flex-direction: row;
        justify-content: flex-start;
        padding: var(--spacing-4);
        gap: var(--spacing-4);
    }

    .card-icon {
        width: var(--spacing-12);
        height: var(--spacing-12);
        flex-shrink: 0;

        i {
            font-size: var(--text-xl);
        }
    }

    .card-content {
        flex: 1;
    }

    .card-title,
    .card-description {
        text-align: left;
    }

    .card-arrow {
        position: static;
        flex-shrink: 0;
    }
}

@media (min-width: 1080px) {
    .stat-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

@media (min-width: 1920px) {
    .stat-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}

@media (min-width: 2560px) {
    .stat-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}

@media (min-width: 3840px) {
    .stat-grid { grid-template-columns: repeat(7, minmax(0, 1fr)); }
}