/*--------------------------------------------------------------
# Card Containers
# Holds either a single card or multiple cards in a row
--------------------------------------------------------------*/
#report-actions .card-container,
#report-actions .cards-container {

    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    gap: 15px;
    margin-bottom: 15px;
}

/*--------------------------------------------------------------
# Card Base Styles
--------------------------------------------------------------*/
#report-actions .card {

    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    border: 1px solid transparent;
    border-radius: 5px;
    box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.3);
    transition: 0.5s;
    padding: 25px 50px;

}

/* Card width depends on container type */
#report-actions .cards-container .card { width: 50%; }
#report-actions .card-container .card { width: 100%; }

/*--------------------------------------------------------------
# Card Left Section (Icon Area)
--------------------------------------------------------------*/
#report-actions .card .left { width: 30%; }

#report-actions .card .left {

    align-items: center;
    align-content: center;
    text-align: left;

}

/* Wrapper for icon alignment */
#report-actions .card .left span {
    
    display: block;
    width: 100%;
    text-align: left;

}

/* Icon styling */
#report-actions .card .left i {

    font-size: 35px;
    color: #fff;
    background-color: rgba(0, 0, 0, .2);
    padding: 15px;
    border-radius: 50%;
    height: 65px;
    width: 65px;
    text-align: center;

}

/*--------------------------------------------------------------
# Card Right Section (Text Area)
--------------------------------------------------------------*/
#report-actions .card .right { width: 70%; }

#report-actions .card .right {

    align-items: center;
    align-content: center;
    text-align: right;

}

/* Redundant but explicit alignment for safety */
#report-actions .card .right { text-align: right; }

/* Main value (number) */
#report-actions .card .right h4 {

    font-size: 40px;
    color: #fff;

}

/* Label text */
#report-actions .card .right span {

    font-size: 20px;
    color: #fff;

}

/*--------------------------------------------------------------
# Green Card Variant
--------------------------------------------------------------*/
#report-actions .green-bg { 
    
    background: linear-gradient(135deg, #259f62, #36c57d, #259f62);
    background-size: 200% 200%;
    transition: background-position 0.5s ease, box-shadow 0.5s ease;

}

#report-actions .green-bg:hover { 
    
    background-position: 100% 0;
    box-shadow: 10px 10px 5px rgba(0, 0, 0, 0.3);

}

/*--------------------------------------------------------------
# Purple Card Variant
--------------------------------------------------------------*/
#report-actions .purple-bg {

    background: linear-gradient(135deg, #7b2ff7, #a44afe, #7b2ff7);
    background-size: 200% 200%;
    transition: background-position 0.5s ease, box-shadow 0.5s ease;

}

#report-actions .purple-bg:hover {

    background-position: 100% 0;
    box-shadow: 10px 10px 5px rgba(0, 0, 0, 0.3);
}

/*--------------------------------------------------------------
# Red Card Variant
--------------------------------------------------------------*/
#report-actions .red-bg {

    background: linear-gradient(135deg, #f73333, #f77d7d, #f73333);
    background-size: 200% 200%;
    transition: background-position 0.5s ease, box-shadow 0.5s ease;

}

#report-actions .red-bg:hover {

    background-position: 100% 0;
    box-shadow: 10px 10px 5px rgba(0, 0, 0, 0.3);
}

/*--------------------------------------------------------------
# Blue Card Variant
--------------------------------------------------------------*/
#report-actions .blue-bg { 
    
    background: linear-gradient(135deg, #0e477f, #115598, #1464b2, #0e477f);
    background-size: 200% 200%;
    transition: background-position 0.5s ease, box-shadow 0.5s ease;

}

#report-actions .blue-bg:hover { 
    
    background-position: 100% 0;
    box-shadow: 10px 10px 5px rgba(0, 0, 0, 0.3);

}