.dash-cards-container,
.dash-cards-container * {
    /* hide scrollbars */
    scrollbar-width: none;
    /* Firefox */

}

.dashboard-cards-group {
    margin-bottom: 2rem;
    padding: 1.5rem 1rem;
    border-radius: 1.2rem;
    background: #fff;
    box-shadow: 0 2px 16px 0 rgba(0, 0, 0, 0.04);
}

.dashboard-cards-group.payments {
    background: #f8fafc;
}

.dashboard-cards-group.people {
    background: #f5f7fa;
}

.dashboard-cards-group.pending {
    background: #fffbe7;
    border: 1px solid #ffe066;
}

.dashboard-cards-row {
    display: flex;
    gap: 1.2rem;
    overflow-x: auto;
    padding-bottom: 0.5rem;
    /* scrollbar-width: thin; */
}

/* 
.dashboard-cards-row::-webkit-scrollbar {
    height: 6px;
}

.dashboard-cards-row::-webkit-scrollbar-thumb {
    background: #e0e0e0;
    border-radius: 3px;
} */

.dashboard-card {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    background: #fff;
    border-radius: .5rem;
    box-shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.06);
    padding: 1.2rem 1rem;
    margin-bottom: 0;
    transition: box-shadow 0.2s, transform 0.2s;
    cursor: pointer;
    min-width: 0;
    border: none;
    text-decoration: none;
}

.dashboard-card:hover,
.dashboard-card:focus {
    box-shadow: 0 4px 24px 0 rgba(0, 0, 0, 0.10);
    transform: translateY(-2px) scale(1.03);
    text-decoration: none;
}

.dashboard-card .card-icon {
    font-size: 2.2rem;
    margin-bottom: 0.7rem;
    border-radius: 50%;
    padding: 0.7rem;
    width: 4rem;
    height: 4rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #e9f5fb;
    box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.04);
}

.user-dashboard-wrapper .bg-success:not(.bg-dark-shade) .card-icon,
.user-dashboard-wrapper .bg-success:not(.bg-dark-shade) {
    background: #e6f4ea !important;
    color: #198754 !important;
}

.user-dashboard-wrapper .bg-info:not(.bg-dark-shade) .card-icon,
.user-dashboard-wrapper .bg-info:not(.bg-dark-shade) {
    background: #e7f3fa !important;
    color: #0dcaf0 !important;
}

.user-dashboard-wrapper .bg-primary:not(.bg-dark-shade) .card-icon,
.user-dashboard-wrapper .bg-primary:not(.bg-dark-shade) {
    background: #e7eafe !important;
    color: #0d6efd !important;
}

.user-dashboard-wrapper .bg-danger:not(.bg-dark-shade) .card-icon,
.user-dashboard-wrapper .bg-danger:not(.bg-dark-shade) {
    background: #fdeaea !important;
    color: #dc3545 !important;
}

.user-dashboard-wrapper .bg-warning:not(.bg-dark-shade) .card-icon,
.user-dashboard-wrapper .bg-warning:not(.bg-dark-shade) {
    background: #fffbe7 !important;
    color: #ffc107 !important;
}

.user-dashboard-wrapper .bg-secondary:not(.bg-dark-shade) .card-icon,
.user-dashboard-wrapper .bg-secondary:not(.bg-dark-shade) {
    background: #f3f4f6 !important;
    color: #6c757d !important;
}

.user-dashboard-wrapper .bg-quaternary:not(.bg-dark-shade) .card-icon,
.user-dashboard-wrapper .bg-quaternary:not(.bg-dark-shade) {
    background: #f3e8fd !important;
    color: #7c3aed !important;
}

.user-dashboard-wrapper .bg-tertiary:not(.bg-dark-shade) .card-icon,
.user-dashboard-wrapper .bg-tertiary:not(.bg-dark-shade) {
    background: #e0f2fe !important;
    color: #0ea5e9 !important;
}

.user-dashboard-wrapper .bg-green:not(.bg-dark-shade) .card-icon,
.user-dashboard-wrapper .bg-green:not(.bg-dark-shade) {
    background: #e6f4ea !important;
    color: #198754 !important;
}

.bg-low-light {
    background: #f7f4f4 !important;
    /* color: #6c757d !important; */
}

.dashboard-card .card-title {
    font-size: 1.1rem;
    font-weight: 600;
    margin-bottom: 0.2rem;
    color: #222;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.dashboard-card .card-value {
    font-size: 1.5rem;
    font-weight: 700;
    color: #1a1a1a;
    margin-bottom: 0.2rem;
}

.dashboard-card .card-small {
    font-size: 0.95rem;
    color: #888;
    margin-bottom: 0.2rem;
}

.dashboard-card .card-extra {
    font-size: 0.85rem;
    color: #aaa;
    margin-top: 0.2rem;
}

.rotate-115 {
    transform: rotate(115deg);
}

.rotate--50 {
    transform: rotate(-50deg);
}

/* Responsive: Horizontal scroll and minimalism on mobile */
@media (max-width: 900px) {
    .dashboard-cards-row {
        gap: 0.7rem;
    }

    .dashboard-card {
        min-width: 180px;
        flex-basis: 180px;
    }
}

@media (max-width: 600px) {
    .dashboard-cards-row {
        gap: 0.5rem;
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        padding-bottom: 0.5rem;
    }

    .dashboard-card {
        min-width: 44vw !important;
        max-width: 48vw !important;
        flex-basis: 44vw !important;
        padding: 0.7rem 0.5rem;
        font-size: 0.97rem;
    }

    .dashboard-cards-row .dashboard-card:last-child {
        margin-right: 0 !important;
    }

    .dashboard-card .card-icon {
        width: 2.1rem;
        height: 2.1rem;
        font-size: 1.1rem;
        padding: 0.3rem;
        margin-bottom: 0.3rem;
    }

    .dashboard-card .card-title,
    .dashboard-card .card-small,
    .dashboard-card .card-extra {
        font-size: 0.97rem;
    }

    .dashboard-card .card-small,
    .dashboard-card .card-extra {
        display: none !important;
    }

    .dashboard-cards-group {
        padding: 1rem 0.2rem;
    }

    /* Utility classes for custom widths */
    .card-width-3 .dashboard-card {
        min-width: 32vw !important;
        max-width: 35vw !important;
        flex-basis: 32vw !important;
    }

    .card-width-4 .dashboard-card {
        min-width: 24vw !important;
        max-width: 27vw !important;
        flex-basis: 24vw !important;
    }
}

@media (max-width: 600px) {
    .dashboard-cards-group.pending {
        margin-top: 1.5rem;
    }
}

@media (max-width: 991.98px) {
    .sticky-top {
        position: static !important;
    }

    .dashboard-card {
        height: auto;
    }
}

@media (max-width: 767.98px) {
    .dashboard-card {
        height: auto;
    }
}


@media (max-width: 600px) {
    .dashboard-card {
        background: #fff;
        /* fallback for cards without bg_color */
    }

    /* Make icon background transparent on mobile for contrast */
    .dashboard-card .card-icon {
        background: transparent !important;
        box-shadow: none !important;
    }
}