/* =========================================
   MAIN DASHBOARD
========================================= */

.ledgerDashboard{
    min-height:100vh;
    background:#f4f5f7;
    padding-bottom:30px;
}

/* =========================================
   TOP BAR
========================================= */

/* =========================================
   HERO HEADER
========================================= */

.ledgerHero{

    background:
    linear-gradient(
        180deg,
        #ff4fc3,
        #d52eb1
    );

    padding:20px 16px 22px;

    border-radius:
    0 0 28px 28px;

    box-shadow:
    0 10px 25px
    rgba(213,46,177,.25);

}

.heroTop{

    display:flex;

    align-items:flex-start;

    gap:14px;

}

.ledgerBackBtn{

    width:44px;
    height:44px;

    border:none;

    border-radius:50%;

    background:#fff;

    color:#222;

    cursor:pointer;

    flex-shrink:0;

    box-shadow:
    0 4px 12px
    rgba(0,0,0,.08);

}

.ledgerBackBtn i{

    color:#222;
    font-size:16px;

}

.heroContent{

    flex:1;

}

.ledgerHeading{

    color:#fff;

    font-size:14px;

    font-weight:600;

    letter-spacing:.5px;

    opacity:.95;

}

.ledgerBalanceAmount{

    margin-top:8px;

    color:#fff;

    font-size:34px;

    font-weight:800;

    line-height:1.1;

}

.ledgerBalanceText{

    color:#fff;

    font-size:13px;

    margin-top:4px;

    opacity:.9;

}

/* =========================================
   SUMMARY CARDS INSIDE HERO
========================================= */

.ledgerStats{

    display:grid;

    grid-template-columns:
    repeat(3,1fr);

    gap:10px;

    margin-top:18px;

}

.ledgerStatCard{

    background:#fff;

    border-radius:16px;

    padding:12px 8px;

    text-align:center;

    box-shadow:
    0 4px 12px
    rgba(0,0,0,.08);

}

.ledgerStatCard small{

    display:block;

    color:#888;

    font-size:10px;

    margin-bottom:6px;

}

.ledgerStatCard h3{

    margin:0;

    font-size:13px;

    font-weight:700;

    color:#222;

    line-height:1.3;

}

.greenText{

    color:#1fa855 !important;

}

.redText{

    color:#e53935 !important;

}

/* =========================================
   FILTER TABS
========================================= */

.ledgerTabs{

    display:flex;

    gap:10px;

    padding:16px;

    margin-bottom:6px;

}

.ledgerTab{

    flex:1;

    height:42px;

    border:none;

    border-radius:12px;

    background:#fff;

    color:#666;

    font-size:13px;

    font-weight:600;

    cursor:pointer;

    box-shadow:
    0 3px 10px
    rgba(0,0,0,.05);

}

.ledgerTab.active{

    background:#ff4fc3;

    color:#fff;

}
/* =========================================
   LIST
========================================= */

.ledgerTransactionList{
    padding:0 16px;
}

/* =========================================
   CARD
========================================= */

.ledgerCard{
    background:#fff;
    border-radius:16px;
    padding:14px;
    margin-bottom:10px;

    display:flex;
    justify-content:space-between;
    align-items:center;

    box-shadow:
    0 3px 10px
    rgba(0,0,0,.05);

    cursor:pointer;

    transition:.2s;
}

.ledgerCard:active{
    transform:scale(.98);
}

.ledgerLeft{
    flex:1;
}

.ledgerTitle{
    font-size:15px;
    font-weight:700;
    color:#222;
}

.ledgerDate{
    margin-top:3px;
    font-size:11px;
    color:#888;
}

.ledgerMiniInfo{
    margin-top:6px;
    font-size:12px;
    color:#666;
}

.ledgerAmount{
    font-size:18px;
    font-weight:800;
    white-space:nowrap;
}

/* =========================================
   SALE CARD
========================================= */

.saleTransaction{
    border-left:
    5px solid #1fa855;
}

.saleAmount{
    color:#1fa855;
}

/* =========================================
   PAYMENT CARD
========================================= */

.paymentTransaction{
    border-left:
    5px solid #e53935;
}

.paymentAmount{
    color:#e53935;
}

/* =========================================
   EMPTY / LOADING
========================================= */

.ledgerLoading,
.ledgerError{
    text-align:center;
    padding:60px 20px;
    font-size:16px;
    color:#666;
}

/* =========================================
   RECEIPT POPUP
========================================= */

.receiptOverlay{
    position:fixed;
    inset:0;
    background:
    rgba(0,0,0,.65);

    display:flex;
    justify-content:center;
    align-items:center;

    padding:20px;

    z-index:999999;
}

.receiptBox{
    width:100%;
    max-width:420px;

    background:#fff;

    border-radius:24px;

    padding:22px;

    position:relative;
}

.receiptClose{
    position:absolute;
    right:10px;
    top:10px;

    width:38px;
    height:38px;

    border:none;
    border-radius:50%;

    background:#f3f3f3;

    cursor:pointer;
}

.receiptBox h2{
    margin:0;
    font-size:22px;
    color:#222;
}

.receiptId{
    margin-top:10px;
    margin-bottom:20px;

    color:#777;
    font-size:13px;
}

.receiptRow{
    display:flex;
    justify-content:space-between;

    margin-bottom:14px;

    font-size:15px;
}

.receiptDate{
    margin-top:15px;

    padding-top:15px;

    border-top:
    1px solid #eee;

    color:#888;
    font-size:13px;
}

/* =========================================
   MOBILE
========================================= */

@media(max-width:480px){

    .ledgerBalanceAmount{
        font-size:28px;
    }

    .ledgerStatCard h3{
        font-size:12px;
    }

    .ledgerAmount{
        font-size:15px;
    }

}
.ledgerBackBtn{
    width:44px;
    height:44px;
    border:none;
    border-radius:50%;
    background:#fff;
    color:#222;
    cursor:pointer;
    flex-shrink:0;
    box-shadow:0 4px 12px rgba(0,0,0,.08);
}

.ledgerBackBtn i{
    font-size:16px;
    color:#222;
}