/* Grid Layout */
.dashboard-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 20px;
}

/* Card Base */
.dashboard-card {
    aspect-ratio: 1 / 1;
    /* Always square */
    border-radius: 20px;
    padding: 24px;
    display: flex;
    color: #ffffff !important;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
}

/* Content Layout */
.card-content {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    /* Push bottom box down */
    width: 100%;
}

/* Force All Text White */
.dashboard-card h1,
.dashboard-card h5,
.dashboard-card h6,
.dashboard-card small {
    color: #ffffff !important;
}

/* Title */
.dashboard-card h6 {
    font-weight: 500;
    font-size: 15px;
    opacity: 0.9;
}

/* Big Number */
.dashboard-card h1 {
    font-size: 48px;
    font-weight: 700;
    margin-top: 8px;
}

/* Sub Box */
.sub-box {
    background: rgba(255, 255, 255, 0.18);
    padding: 16px;
    border-radius: 14px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    min-height: 85px;
    /* Keeps visual balance */
}

.sub-box h5 {
    font-weight: 600;
    margin-bottom: 4px;
}

/* Empty Box for cards without detail */
.empty-box {
    background: rgba(255, 255, 255, 0.08);
}

/* Gradients */
.gradient-blue {
    background: linear-gradient(135deg, #6a85f1, #4cc3d9);
}

.gradient-green {
    background: linear-gradient(135deg, #5fbf88, #4cae73);
}

.gradient-orange {
    background: linear-gradient(135deg, #f7b267, #f79d65);
}

.gradient-red {
    background: linear-gradient(135deg, #d65a7f, #c44569);
}