/* ==========================================================================
   Theme-E Withdrawal History Styles
   Matches Photo 2 (theme e.anotechsolutions.shop/withdraw_history) pixel-perfectly
   ========================================================================== */

/* 1. Page Root & Navigation Header */
.page-wrapper[data-v-5a0a4930],
.page-wrapper,
.history-wrapper {
    background: #030c26 !important;
    background: radial-gradient(circle at 50% 10%, #081e59 0%, #030c26 80%) !important;
    min-height: 100dvh !important;
    width: 100% !important;
    max-width: 10rem !important;
    margin: 0 auto !important;
    box-sizing: border-box !important;
}

.page-wrapper > header[data-v-5a0a4930],
.page-wrapper > header {
    background: linear-gradient(90deg, #1b53be 0%, #10368d 52%, #05184d 100%) !important;
    border-bottom: 1px solid #ffd66e !important;
    box-shadow: 0 0 24px rgba(255, 217, 104, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.25) !important;
    height: 1.44rem !important;
    position: fixed !important;
    top: 0 !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    width: 100% !important;
    max-width: 10rem !important;
    z-index: 100 !important;
    padding: 0 .4rem !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    box-sizing: border-box !important;
}

@media screen and (max-width: 500px) {
    .page-wrapper > header[data-v-5a0a4930],
    .page-wrapper > header {
        width: 100% !important;
        left: 0 !important;
        transform: none !important;
    }
}

.page-wrapper > header .back,
.page-wrapper > header .head-left .back,
.page-wrapper > header .van-icon,
.page-wrapper > header svg {
    color: #ffd152 !important;
    fill: #ffd152 !important;
    font-size: .56rem !important;
    cursor: pointer !important;
}

.page-wrapper > header .noTitle[data-v-5a0a4930],
.page-wrapper > header .head-title .noTitle,
.page-wrapper > header .title {
    color: #ffffff !important;
    font-size: .45333rem !important;
    font-weight: 700 !important;
    text-align: center !important;
    font-family: 'Inter', 'Poppins', sans-serif !important;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.4) !important;
}

/* 2. Horizontal Tabs Row (1 Day, 7 Days, 30 Days) */
.history-wrapper {
    padding-top: 0 !important;
}

.history-wrapper .header,
.history-wrapper .header[data-v-75348090] {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-around !important;
    background: linear-gradient(180deg, #092569 0%, #061a4c 100%) !important;
    border-bottom: 1px solid rgba(255, 214, 110, 0.18) !important;
    height: 1.2rem !important;
    padding: 0 !important;
    margin: 0 !important;
    box-sizing: border-box !important;
    position: sticky !important;
    top: 1.44rem !important;
    z-index: 40 !important;
}

.history-wrapper .header > div,
.history-wrapper .header > div[data-v-75348090] {
    flex: 1 !important;
    height: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: .37333rem !important;
    font-weight: 500 !important;
    color: #8da4cb !important;
    cursor: pointer !important;
    position: relative !important;
    transition: all 0.2s ease !important;
    text-align: center !important;
    user-select: none !important;
}

.history-wrapper .header > div:hover {
    color: #d6e5ff !important;
}

/* Active Tab ("1 Day" in Photo 2) */
.history-wrapper .header > div.active,
.history-wrapper .header > div.active[data-v-75348090] {
    color: #fbdfa0 !important;
    font-weight: 700 !important;
}

/* Gold active indicator line */
.history-wrapper .header > div.active::after,
.history-wrapper .header > div.active[data-v-75348090]::after {
    content: "" !important;
    position: absolute !important;
    bottom: 0 !important;
    left: 18% !important;
    right: 18% !important;
    height: 3px !important;
    background: #f1ca60 !important;
    background: linear-gradient(90deg, #ffdf85 0%, #f1ca60 50%, #d49a1e 100%) !important;
    border-radius: 3px 3px 0 0 !important;
    box-shadow: 0 0 10px rgba(241, 202, 96, 0.7) !important;
}

/* 3. Info / Date Range & Total Summary Row */
.history-wrapper .info,
.history-wrapper .info[data-v-75348090] {
    display: flex !important;
    flex-direction: row !important;
    justify-content: space-between !important;
    align-items: center !important;
    padding: .32rem .4rem !important;
    color: #fbdfa0 !important;
    font-size: .32rem !important;
    font-weight: 600 !important;
    background: transparent !important;
    box-sizing: border-box !important;
    margin: 0 !important;
}

.history-wrapper .info > div,
.history-wrapper .info .total-amount {
    color: #fbdfa0 !important;
    font-size: .32rem !important;
    font-weight: 600 !important;
    display: flex !important;
    align-items: center !important;
    letter-spacing: 0.2px !important;
}

/* 4. List Container & Cards */
.history-wrapper .list,
.history-wrapper .list[data-v-75348090] {
    padding: .16rem .37333rem 1.6rem .37333rem !important;
    box-sizing: border-box !important;
}

.history-wrapper .list .item,
.history-wrapper .list .item[data-v-75348090] {
    background: #05184d !important;
    background: linear-gradient(135deg, #071f5e 0%, #031442 100%) !important;
    border: 1px solid #ffd66e !important;
    box-shadow: 0 0 16px rgba(255, 210, 96, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.12) !important;
    border-radius: 14px !important;
    margin-bottom: .32rem !important;
    padding: .37333rem .4rem !important;
    color: #edf3ff !important;
    display: flex !important;
    align-items: flex-start !important;
    gap: .26667rem !important;
    box-sizing: border-box !important;
    transition: transform 0.2s ease, box-shadow 0.2s ease !important;
}

.history-wrapper .list .item:hover {
    box-shadow: 0 0 22px rgba(255, 210, 96, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.18) !important;
}

/* Clock Icon */
.history-wrapper .list .item .img,
.history-wrapper .list .item .img[data-v-75348090] {
    width: .64rem !important;
    height: .64rem !important;
    object-fit: contain !important;
    margin-top: .05333rem !important;
    flex-shrink: 0 !important;
}

/* Card Content Body */
.history-wrapper .list .item .item-content,
.history-wrapper .list .item .item-content[data-v-75348090] {
    flex: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: .18667rem !important;
    min-width: 0 !important;
}

/* Row 1: Time and Cash Amount */
.history-wrapper .list .item .flex.flex-between {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
}

.history-wrapper .list .item .time,
.history-wrapper .list .item .time[data-v-75348090] {
    color: #d6e5ff !important;
    font-size: .32rem !important;
    font-weight: 500 !important;
    margin: 0 !important;
}

.history-wrapper .list .item .r1,
.history-wrapper .list .item .r1[data-v-75348090] {
    color: #ffd152 !important;
    font-size: .37333rem !important;
    font-weight: 700 !important;
    margin: 0 !important;
    text-shadow: 0 0 8px rgba(255, 209, 82, 0.3) !important;
}

/* Row 2: Order ID and Copy Icon */
.history-wrapper .list .item .flex.gap-2 {
    display: flex !important;
    align-items: center !important;
    gap: .16rem !important;
    font-size: .32rem !important;
    color: #8da4cb !important;
    margin: 0 !important;
}

.history-wrapper .list .item .flex.gap-2 .flex-items-center {
    margin: 0 !important;
    color: #8da4cb !important;
    font-size: .32rem !important;
    word-break: break-all !important;
}

.history-wrapper .list .item .copyIcon,
.history-wrapper .list .item .copyIcon[data-v-75348090] {
    width: .42667rem !important;
    height: .42667rem !important;
    color: #ffd152 !important;
    fill: #ffd152 !important;
    cursor: pointer !important;
    flex-shrink: 0 !important;
}

/* Row 3: Method and Status */
.history-wrapper .list .item .item-content > div:nth-child(3) {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    font-size: .32rem !important;
    color: #d6e5ff !important;
    margin: 0 !important;
}

.history-wrapper .list .item .item-content > div:nth-child(3) p:first-child {
    margin: 0 !important;
    color: #d6e5ff !important;
    font-size: .32rem !important;
}

.history-wrapper .list .item .r3,
.history-wrapper .list .item .r3[data-v-75348090] {
    font-size: .34667rem !important;
    font-weight: 700 !important;
    margin: 0 !important;
    display: flex !important;
    align-items: center !important;
    gap: .10667rem !important;
    color: #4cd964 !important; /* Completed default */
}

/* Remark / Reason text */
.history-wrapper .list .item .remark-text,
.history-wrapper .list .item .remark-text[data-v-75348090] {
    color: #ff7875 !important;
    font-size: .3rem !important;
    background: rgba(255, 77, 79, 0.1) !important;
    padding: .13333rem .24rem !important;
    border-radius: 6px !important;
    border: 1px solid rgba(255, 77, 79, 0.3) !important;
}

/* Action button (Submit Receipt / Reminders) */
.history-wrapper .list .item .remark-btn,
.history-wrapper .list .item .remark-btn[data-v-75348090] {
    margin-top: .16rem !important;
    width: 100% !important;
    padding: .2rem 0 !important;
    border-radius: 24px !important;
    background: linear-gradient(180deg, #2f86ff 0%, #1a62df 42%, #0a2f8e 100%) !important;
    border: 1px solid #ffe08a !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.24), 0 0 14px rgba(255, 210, 96, 0.3) !important;
    color: #ffffff !important;
    font-size: .34667rem !important;
    font-weight: 600 !important;
    text-align: center !important;
    cursor: pointer !important;
    box-sizing: border-box !important;
}

/* Finished / Loading Text */
.history-wrapper .van-list__finished-text,
.history-wrapper .van-list__loading {
    color: #6d85ad !important;
    font-size: .32rem !important;
    text-align: center !important;
    padding: .4rem 0 !important;
}

/* 5. Empty State / No Data (Matches Photo 2) */
.history-wrapper .no-data,
.no-data {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 3.5rem 0 !important;
    width: 100% !important;
}

.history-wrapper .no-data .data-icon,
.no-data .data-icon {
    width: 3.5rem !important;
    height: auto !important;
    margin-bottom: .4rem !important;
    opacity: 0.85 !important;
}

.history-wrapper .no-data .data-text,
.no-data .data-text {
    color: #8da4cb !important;
    font-size: .4rem !important;
    font-weight: 500 !important;
    margin: 0 !important;
}

/* 6. Compensation / Detail Dialog */
.history-wrapper .dialogCont,
.dialogCont {
    background: #05184d !important;
    color: #edf3ff !important;
    padding: .4rem !important;
    border-radius: 16px !important;
}

.history-wrapper .confirmBtn,
.confirmBtn {
    background: linear-gradient(180deg, #ffd152 0%, #d49a1e 100%) !important;
    color: #000000 !important;
    font-weight: 700 !important;
    border-radius: 20px !important;
    text-align: center !important;
    padding: .26667rem !important;
    margin-top: .4rem !important;
    cursor: pointer !important;
}