/* ==========================================
   TRANSACTIONS
========================================== */

.transactions-header{

display:flex;
justify-content:space-between;
align-items:center;
margin-bottom:35px;

}

.transactions-header h1{

font-size:38px;

}

.transactions-header p{

margin-top:10px;
color:#94a3b8;

}

/* ==========================
SUMMARY
========================== */

.transactions-summary{

display:grid;
grid-template-columns:repeat(4,1fr);
gap:20px;
margin-bottom:30px;

}

.transaction-card{

background:#0f172a;
border:1px solid rgba(255,255,255,.08);
border-radius:20px;
padding:25px;
transition:.3s;

}

.transaction-card:hover{

transform:translateY(-5px);
border-color:#22d3ee;
box-shadow:0 10px 30px rgba(34,211,238,.12);

}

.transaction-card p{

color:#94a3b8;
margin-bottom:10px;

}

.transaction-card h2{

font-size:30px;

}

/* ==========================
TABLE
========================== */

.table-box{

background:#0f172a;
border:1px solid rgba(255,255,255,.08);
border-radius:20px;
overflow:hidden;

}

table{

width:100%;
border-collapse:collapse;

}

thead{

background:#081225;

}

th{

padding:18px;
text-align:left;
font-size:14px;
color:#94a3b8;

}

td{

padding:18px;
border-top:1px solid rgba(255,255,255,.06);

}

tbody tr:hover{

background:#081225;

}

/* ==========================
STATUS
========================== */

.status{

display:inline-block;
padding:6px 14px;
border-radius:30px;
font-size:13px;
font-weight:600;
text-transform:capitalize;

}

.success{

background:#16a34a;
color:#fff;

}

.pending{

background:#eab308;
color:#111827;

}

.failed{

background:#dc2626;
color:#fff;

}

/* ==========================
   RESPONSIVE
========================== */

@media (max-width: 900px) {

    .transactions-summary {
        grid-template-columns: repeat(2, 1fr);
    }

    .table-box {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        border-radius: 16px;
    }

    table {
        min-width: 720px;
    }

    .sidebar {
        transform: translateX(-100%);
        position: fixed;
        top: 0;
        left: 0;
        height: 100vh;
        width: 280px;
        z-index: 1000;
        transition: transform .3s ease;
    }

    .sidebar.show {
        transform: translateX(0);
    }

    .dashboard-content {
        margin-left: 0;
        padding: 90px 20px 30px;
    }

}


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

@media (max-width: 600px) {

    .transactions-header {
        margin-bottom: 25px;
    }

    .transactions-header h1 {
        font-size: 30px;
    }

    .transactions-header p {
        font-size: 14px;
        line-height: 1.5;
    }

    .transactions-summary {
        grid-template-columns: 1fr;
        gap: 14px;
    }

    .transaction-card {
        padding: 20px;
        border-radius: 16px;
    }

    .transaction-card h2 {
        font-size: 26px;
    }

    .wallet-header {
        flex-direction: column;
        align-items: flex-start;
    }

    .wallet-header h1 {
        font-size: 30px;
    }

    .table-box {
        margin-top: 10px;
        overflow-x: auto;
        border-radius: 16px;
    }

    table {
        min-width: 720px;
    }

    th {
        padding: 15px;
        font-size: 13px;
    }

    td {
        padding: 15px;
        font-size: 13px;
    }

    .status {
        padding: 5px 11px;
        font-size: 12px;
    }

    .transaction-reference {
        font-size: 12px;
        font-weight: 600;
        white-space: nowrap;
    }

}