/*Write your custom css in this file.*/

/* Enhanced Flip Card Effect - Global Style for Dashboards */
.flip-card {
    background-color: #f8f9fa; 
    color: #1a202c;
    border-radius: 8px;
    padding: 5px 10px;
    display: inline-block;
    position: relative;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    min-width: 60px;
    border-bottom: 3px solid #e2e8f0; 
    transform-origin: top; 
    backface-visibility: hidden;
    margin-bottom: 5px;
}
.flip-card::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    height: 1px;
    background: rgba(0,0,0,0.05);
    box-shadow: 0 1px 0 rgba(255,255,255,0.8);
}

@keyframes unfoldDrop {
    0% { transform: rotateX(-120deg); opacity: 0; }
    30% { opacity: 1; }
    60% { transform: rotateX(20deg); }
    80% { transform: rotateX(-10deg); }
    100% { transform: rotateX(0deg); }
}

.flip-animate {
    animation: unfoldDrop 0.8s cubic-bezier(0.4, 0, 0.2, 1);
    animation-fill-mode: forwards;
}

.dashboard-card {
    transition: transform 0.2s;
}
.dashboard-card:hover {
    transform: translateY(-2px);
}