/* Grid Container */

/* Card Container */
.card {
    background: var(--card-bg) !important;
    border: 1px solid var(--card-border) !important;
    border-radius: 1rem !important;
    border-width: 1px !important;
    border-color: #f3f4f6 !important;
    box-shadow: var(--card-shadow) !important;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;
    overflow: hidden !important;
    position: relative !important;
    /*backdrop-filter: blur(10px) !important;*/
}

/*.card::before {*/
/*    content: '' !important;*/
/*    position: absolute !important;*/
/*    top: 0 !important;*/
/*    left: 0 !important;*/
/*    right: 0 !important;*/
/*    height: 4px !important;*/
/*    background: linear-gradient(135deg, #a9f219 0%, #8bc34a 100%) !important;*/
/*    opacity: 0 !important;*/
/*    transition: opacity 0.3s ease !important;*/
/*}*/

/*.card:hover {*/
    /*box-shadow: var(--card-shadow-hover) !important;*/
/*    border-color: #85e502 !important;*/
/*}*/

.card:hover::before {
    opacity: 1 !important;
}

/* Card Inner */
.card-inner {
    padding: 30px 25px !important;
    position: relative !important;
}

/* Card Title Section */
.card-title-group {
    margin-bottom: 20px !important;
}

.card-title h6.title {
    font-size: 14px !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    margin: 0 !important;
    position: relative !important;
    padding-left: 12px !important;
}

.card-title h6.title::before {
    content: '' !important;
    position: absolute !important;
    left: 0 !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: 4px !important;
    height: 16px !important;
    background: var(--primary) !important;
    border-radius: 2px !important;
}

/* Data Section */
.data {
    display: flex !important;
    flex-direction: column !important;
    gap: 15px !important;
}

.data-group {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
}

 /*Amount/Number */
.amount .dark-mode{
    font-size: 48px !important;
    font-weight: 700 !important;
    color: var(--text-primary) !important;
    line-height: 1 !important;
    background: var(--accent-gradient) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    background-clip: text !important;
    text-shadow: none !important;
    position: relative !important;
}

/* Fallback for browsers that don't support background-clip */
@supports not (-webkit-background-clip: text) {
    .amount {
        color: var(--accent-primary) !important;
    }
}

/* Icon Wrapper */
.preview-icon-wrap {
    width: 60px !important;
    height: 60px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: var(--accent-gradient) !important;
    border-radius: 16px !important;
    position: relative !important;
    transition: all 0.3s ease !important;
}

.preview-icon-wrap::before {
    content: '' !important;
    position: absolute !important;
    inset: 2px !important;
    border-radius: 14px !important;
    z-index: 1 !important;
}

.preview-icon-wrap em.icon {
    font-size: 24px !important;
    color: var(--accent-primary) !important;
    z-index: 2 !important;
    position: relative !important;
    transition: all 0.3s ease !important;
}

.card:hover .preview-icon-wrap {
    transform: rotate(5deg) scale(1.1) !important;
}

.card:hover .preview-icon-wrap em.icon {
    transform: scale(1.1) !important;
}

/* Info Section */
.info {
    padding: 12px 0 !important;
    border-top: 1px solid var(--card-border) !important;
    margin-top: 5px !important;
}

.info .change {
    font-size: 14px !important;
    font-weight: 500 !important;
    padding: 6px 12px !important;
    border-radius: 20px !important;
    display: inline-block !important;
    position: relative !important;
    transition: all 0.3s ease !important;
}

/* Status Colors */
.info .change.text-danger,
.info .change.up.text-danger {
    background: rgba(239, 68, 68, 0.1) !important;
    color: var(--danger-color) !important;
    border: 1px solid rgba(239, 68, 68, 0.2) !important;
}

.info .change.text-success {
    background: rgba(34, 197, 94, 0.1) !important;
    color: var(--success-color) !important;
    border: 1px solid rgba(34, 197, 94, 0.2) !important;
}

.info .change.text-warning {
    background: rgba(245, 158, 11, 0.1) !important;
    color: var(--warning-color) !important;
    border: 1px solid rgba(245, 158, 11, 0.2) !important;
}

.info .change.text-info {
    background: rgba(59, 130, 246, 0.1) !important;
    color: var(--info-color) !important;
    border: 1px solid rgba(59, 130, 246, 0.2) !important;
}

/* Specific Card Customizations */

/* Colis Card */
.col-xxl-3:nth-child(1) .preview-icon-wrap {
    background: linear-gradient(135deg, #3b82f6, #1d4ed8) !important;
}
.col-xxl-3:nth-child(1) .preview-icon-wrap em.icon {
    color: #ffffff !important;
}

/* Bons de livraison Card */
.col-xxl-3:nth-child(2) .preview-icon-wrap {
    background: linear-gradient(135deg, #10b981, #059669) !important;
}
.col-xxl-3:nth-child(2) .preview-icon-wrap em.icon {
    color: #ffffff !important;
}

/* Bon de retour Card */
.col-xxl-3:nth-child(3) .preview-icon-wrap {
    background: linear-gradient(135deg, #f59e0b, #d97706) !important;
}
.col-xxl-3:nth-child(3) .preview-icon-wrap em.icon {
    color: #ffffff !important;
}

/* CRBT Card */
.col-xxl-3:nth-child(4) .preview-icon-wrap {
    background: linear-gradient(135deg, #8b5cf6, #7c3aed) !important;
}
.col-xxl-3:nth-child(4) .preview-icon-wrap em.icon {
    color: #ffffff !important;
}

/* Reclamations Card */
.col-xxl-6:nth-child(5) .preview-icon-wrap {
    background: linear-gradient(135deg, #ef4444, #dc2626) !important;
}
.col-xxl-6:nth-child(5) .preview-icon-wrap em.icon {
    color: #ffffff !important;
}

/* Modification Colis Card */
.col-xxl-6:nth-child(6) .preview-icon-wrap {
    background: linear-gradient(135deg, #06b6d4, #0891b2) !important;
}
.col-xxl-6:nth-child(6) .preview-icon-wrap em.icon {
    color: #ffffff !important;
}

/* Enhanced Visual Effects */
.nk-ecwg {
    position: relative !important;
}

.nk-ecwg::after {
    content: '' !important;
    position: absolute !important;
    top: -2px !important;
    left: -2px !important;
    right: -2px !important;
    bottom: -2px !important;
    background: var(--accent-gradient) !important;
    border-radius: 22px !important;
    z-index: -1 !important;
    opacity: 0 !important;
    transition: opacity 0.3s ease !important;
}

.card:hover .nk-ecwg::after {
    opacity: 0.1 !important;
}

/* Responsive Design */
/*@media (max-width: 1399px) {*/
/*    .col-xxl-3, .col-xxl-6 {*/
/*        margin-bottom: 20px !important;*/
/*    }*/
/*}*/

@media (max-width: 991px) {
    .card-inner {
        padding: 25px 20px !important;
    }
    
    .amount {
        font-size: 40px !important;
    }
    
    .preview-icon-wrap {
        width: 50px !important;
        height: 50px !important;
    }
    
    .preview-icon-wrap em.icon {
        font-size: 20px !important;
    }
}

@media (max-width: 575px) {
    .row.g-gs {

    }
    
    .card-inner {
        padding: 20px 15px !important;
    }
    
    .amount {
        font-size: 36px !important;
    }
    
    .data-group {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 15px !important;
    }
    
    .preview-icon-wrap {
        align-self: flex-end !important;
        margin-top: -10px !important;
    }
}

/* Loading Animation */
/*@keyframes cardSlideIn {*/
/*    from {*/
/*        opacity: 0;*/
/*        transform: translateY(30px);*/
/*    }*/
/*    to {*/
/*        opacity: 1;*/
/*        transform: translateY(0);*/
/*    }*/
/*}*/

/*.card {*/
/*    animation: cardSlideIn 0.6s ease forwards !important;*/
/*}*/

.card:nth-child(1) { animation-delay: 0.1s !important; }
.card:nth-child(2) { animation-delay: 0.2s !important; }
.card:nth-child(3) { animation-delay: 0.3s !important; }
.card:nth-child(4) { animation-delay: 0.4s !important; }
.card:nth-child(5) { animation-delay: 0.5s !important; }
.card:nth-child(6) { animation-delay: 0.6s !important; }

/* Pulse effect for numbers */
@keyframes numberPulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.05); }
}

.card:hover .amount {
    animation: numberPulse 2s ease-in-out infinite !important;
}

/* Glow effect for dark mode */
.dark-mode .card:hover {
    box-shadow: 
        var(--card-shadow-hover),
        0 0 30px rgba(179, 255, 0, 0.1) !important;
}

.dark-mode .preview-icon-wrap {
    box-shadow: 0 4px 15px rgba(179, 255, 0, 0.2) !important;
}

.dark-mode .card:hover .preview-icon-wrap {
    box-shadow: 0 6px 25px rgba(179, 255, 0, 0.3) !important;
}
.daterangepicker .ranges li.active {
    background-color: #85e502 !important;
}
.daterangepicker td.active, .daterangepicker td.active:hover {
    background-color: #85e502 !important;
}