/* Elite Dashboard Earning Tiles Freelancer */
/**
* Elite Wallet & Earning Dashboard UI
* Handles: Earning Tiles, Payout Methods, Modals, and Stats Cards
*/
/* 1. EARNING TILES (Top Row) */
.wr-earninginvoices {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)) !important;
    gap: 20px !important;
    margin-bottom: 30px !important;
}

.wr-earningcostvtwo {
    margin: 0 !important;
    width: 100% !important;
}

.wr-earningcost__item {
    background: #fff !important;
    border: 1px solid #f1f5f9 !important;
    border-radius: 16px !important;
    padding: 25px !important;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05) !important;
    transition: transform 0.3s ease, box-shadow 0.3s ease !important;
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    height: 100%;
}

.wr-earningcost__item:hover {
    transform: translateY(-5px) !important;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1) !important;
}

.wr-earningcost__item i {
    width: 50px !important;
    height: 50px !important;
    background: #f8fafc !important;
    border-radius: 12px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 24px !important;
    color: #3863a0 !important;
    margin-bottom: 15px !important;
}

.wr-earningcost__item h4 {
    font-size: 14px !important;
    color: #64748b !important;
    margin-bottom: 8px !important;
    font-weight: 500 !important;
}

.wr-earningcost__item span {
    font-size: 24px !important;
    font-weight: 700 !important;
    color: #1e293b !important;
    margin-bottom: 15px !important;
    display: block;
}

.wr-earningcost__item a {
    font-size: 13px !important;
    font-weight: 600 !important;
    color: #3863a0 !important;
    text-decoration: none !important;
    margin-top: auto;
    display: inline-flex;
    align-items: center;
}



/* Mobile Responsive Adjustments */
@media (max-width: 767px) {
    .wr-earninginvoices {
        grid-template-columns: 1fr !important;
    }
    
    .wr-freelancer-counter-list {
        grid-template-columns: 1fr 1fr !important;
    }

    .wr-table {
        display: block !important;
        overflow-x: auto !important;
        white-space: nowrap !important;
    }

    .wr-dhb-mainheading {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 15px !important;
    }
}

/* Specific fix for "No data" image */
.wr-submitreview img {
    max-width: 200px !important;
    opacity: 0.6 !important;
}



/* project and task tiles */
/**
* Elite Dashboard UI: Project & Task Tiles Extension
* Applies the premium look to wr-freelancer-counter-list
*/
/* 1. GRID CONTAINER FOR PROJECT/TASK TILES */
.wr-freelancer-counter-list {
    display: grid !important;
    /* Forces 3 columns on desktop, adapts based on container width */
    grid-template-columns: repeat(2, 1fr) !important; 
    gap: 20px !important;
    padding: 0 !important;
    margin: 0 0 30px 0 !important;
    list-style: none !important;
}

/* 2. INDIVIDUAL TILE (li) STYLE */
.wr-freelancer-counter-list li {
    width: 100% !important;
    margin: 0 !important;
    max-width: 100% !important;
}

.wr-freelancer-counter-list li .wr-counter-content {
    background: #fff !important;
    border: 1px solid #f1f5f9 !important;
    border-radius: 16px !important;
    padding: 25px !important;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05) !important;
    transition: transform 0.3s ease, box-shadow 0.3s ease !important;
    height: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    position: relative !important;
    overflow: hidden !important;
}

.wr-freelancer-counter-list li .wr-counter-content:hover {
    transform: translateY(-5px) !important;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1) !important;
}

/* 3. ICON & BUTTON LAYOUT (Top section of tile) */
.wr-counter-icon-button {
    display: flex !important;
    justify-content: space-between !important;
    align-items: flex-start !important;
    margin-bottom: 20px !important;
    z-index: 2;
}

/* Styling the specific colored icon boxes */
.wr-icon-green i, .wr-icon-yellow i, .wr-icon-red i, .wr-icon-purple i, .wr-icon-orange i {
    width: 45px !important;
    height: 45px !important;
    border-radius: 12px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 20px !important;
}

/* Matching Elite Colors */
.wr-icon-green i { background: #ecfdf5 !important; color: #10b981 !important; }
.wr-icon-yellow i { background: #fffbeb !important; color: #f59e0b !important; }
.wr-icon-red i { background: #fef2f2 !important; color: #ef4444 !important; }
.wr-icon-purple i { background: #f5f3ff !important; color: #8b5cf6 !important; }
.wr-icon-orange i { background: #fff7ed !important; color: #f97316 !important; }

/* 4. VIEW BUTTON STYLE */
.wr-counter-button-active {
    font-size: 12px !important;
    font-weight: 600 !important;
    background: #f8fafc !important;
    color: #3863a0 !important;
    padding: 6px 12px !important;
    border-radius: 8px !important;
    text-decoration: none !important;
    border: 1px solid #e2e8f0 !important;
    transition: all 0.2s ease !important;
}

.wr-freelancer-counter-list li:hover a {
    background: #3863a0 !important;
    color: #fff !important;
    border: #3863a0 !important;
}

/* 5. TEXT & VALUE STYLING */
.wr-counter-value {
    font-size: 28px !important;
    font-weight: 700 !important;
    color: #1e293b !important;
    margin: 0 0 5px 0 !important;
    z-index: 2;
}

.wr-counter-content strong {
    font-size: 14px !important;
    font-weight: 500 !important;
    color: #64748b !important;
    text-transform: capitalize !important;
    z-index: 2;
}

/* 6. WATERMARK ICON (The faint icon in the background) */
.wr-icon-watermark {
    position: absolute !important;
    right: -10px !important;
    bottom: -10px !important;
    font-size: 60px !important;
    color: rgba(0, 0, 0, 0.03) !important;
    transform: rotate(-15px);
    z-index: 1;
}

/* 7. RESPONSIVE BREAKPOINTS */
@media (max-width: 1200px) {
    .wr-freelancer-counter-list {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

@media (max-width: 991px) {
    /* Sidebar is usually col-4, so we force stack here */
    .wr-earning .row .col-lg-8 {
        width: 100% !important;
        max-width: 100% !important;
        flex: 0 0 100% !important;
    }
}

@media (max-width: 767px) {
    .wr-freelancer-counter-list {
        grid-template-columns: 1fr 1fr !important;
        gap: 15px !important;
    }
}

@media (max-width: 480px) {
    .wr-freelancer-counter-list {
        grid-template-columns: 1fr !important;
    }
    
    div.wr-asideholder.wr-asideholdertwo {
        margin-top: 30px !important;
    }
    
}

div.wr-asideholder.wr-asideholdertwo {
    margin-top: 8px !important;
}