/**
 * Dashboard Page Styles — HRIS Perum Jasa Tirta I
 */
.action-quick-card {
    transition: all 0.2s ease;
}
.action-quick-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 20px rgba(0, 114, 255, 0.12) !important;
}
.quick-icon-box {
    background: linear-gradient(135deg, #1877F2 0%, #0d6efd 100%) !important;
}
.btn-presensi-hero:hover {
    opacity: 0.95;
    transform: translateY(-1px);
}

/* PJT I Aquatic Water Wave Animation */
.water-waves {
    position: absolute !important;
    bottom: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 75px !important;
    min-height: 50px !important;
    max-height: 90px !important;
    margin-bottom: -1px !important;
    z-index: 1 !important;
    pointer-events: none !important;
}
.water-parallax > use {
    animation: move-forever 25s cubic-bezier(.55,.5,.45,.5) infinite !important;
}
.water-parallax > use:nth-child(1) {
    animation-delay: -2s !important;
    animation-duration: 7s !important;
}
.water-parallax > use:nth-child(2) {
    animation-delay: -3s !important;
    animation-duration: 10s !important;
}
.water-parallax > use:nth-child(3) {
    animation-delay: -4s !important;
    animation-duration: 13s !important;
}
.water-parallax > use:nth-child(4) {
    animation-delay: -5s !important;
    animation-duration: 20s !important;
}
@keyframes move-forever {
    0% {
        transform: translate3d(-90px, 0, 0);
    }
    100% {
        transform: translate3d(85px, 0, 0);
    }
}

/* Quick Access Grid Responsive */
.quick-access-grid {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 10px !important;
}
@media (min-width: 992px) {
    .quick-access-grid {
        grid-template-columns: repeat(8, 1fr) !important;
        gap: 12px !important;
    }
}

/* Mobile horizontal sliding cards: 2 columns visible in 1 row */
@media (max-width: 991.98px) {
    .metrics-slider-container {
        display: flex !important;
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        scroll-snap-type: x mandatory !important;
        -webkit-overflow-scrolling: touch !important;
        gap: 12px !important;
        padding-bottom: 6px !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        scrollbar-width: none !important;
    }
    .metrics-slider-container::-webkit-scrollbar {
        display: none !important;
    }
    .metrics-slider-container > .metric-slider-col {
        flex: 0 0 calc(50% - 6px) !important;
        max-width: calc(50% - 6px) !important;
        width: calc(50% - 6px) !important;
        scroll-snap-align: start !important;
        padding: 0 !important;
        margin: 0 !important;
    }
    .metrics-slider-container .card {
        height: 100% !important;
        border-radius: 14px !important;
        padding: 12px !important;
    }
}