/* =====================================================
   1. RESET & BASE
===================================================== */

*{
margin:0;
padding:0;
box-sizing:border-box;
}

body{
font-family:'Segoe UI', Arial, sans-serif;
background:linear-gradient(135deg,#eef2ff,#f8fafc);
color:#1f2937;
}


/* =====================================================
   2. LAYOUT
===================================================== */

.content{

    min-height:100vh;

    margin-top:80px;
    margin-left:260px;

    padding:0 20px 30px;

    max-width:1400px;
}



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

.summaryRow{

    display:grid;

    grid-template-columns:
    repeat(auto-fit,minmax(150px,1fr));

    gap:20px;

    margin-bottom:20px;
    margin-top:80px;

}



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

.cardStat{
margin-bottom:10px;
    border-radius:18px;

    padding:18px 20px;

    color:white;

    position:relative;

    overflow:hidden;

    min-height:95px;

    display:flex;
    flex-direction:column;
    justify-content:center;

    box-shadow:
    0 6px 15px rgba(0,0,0,0.08);

    transition:0.25s;

}


.cardStat:hover{

    transform:translateY(-5px) scale(1.02);

    box-shadow:
    0 10px 25px rgba(0,0,0,0.15);

}


/* glow circle */

.cardStat::after{

    content:"";

    position:absolute;

    right:-40px;
    top:-40px;

    width:80px;
    height:80px;

    background:rgba(255,255,255,0.15);

    border-radius:50%;

}


/* text */

.cardTitle{

    font-size:13px;

    opacity:0.9;

}

.cardNum{

    font-size:36px;

    font-weight:700;

    margin-top:5px;

}



/* ===== COLORS ===== */

.cardStat.blue{

    background:linear-gradient(
    135deg,
    #4f46e5,
    #2563eb
    );

}

.cardStat.orange{

    background:linear-gradient(
    135deg,
    #f59e0b,
    #ea580c
    );

}

.cardStat.gray{

    background:linear-gradient(
    135deg,
    #6b7280,
    #374151
    );

}

.cardStat.green{

    background:linear-gradient(
    135deg,
    #10b981,
    #059669
    );

}



/* ================= SECTION ================= */

.tableSection{



}

.sectionHeader{

    margin-bottom:10px;

}

.sectionTitle{

    font-size:18px;
    font-weight:600;

}

.sectionSub{

    font-size:12px;
    color:#6b7280;
    margin-bottom: 20px;

}

/* ===== WHITE SECTION ===== */

.whiteSection{

background:white;

border-radius:12px;

padding:20px;

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

margin-top:15px;

}


/* header */

.sectionHeader{

margin-bottom:10px;

}


.sectionTitle{

font-size:18px;

font-weight:600;

}


.sectionSub{

font-size:12px;

color:#6b7280;

margin-top:3px;

}


/* table box */

.tableBox{

margin-top:10px;

}


/* ================= BOX ================= */

.box{

    background:white;

    border-radius:14px;

    padding:18px;

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

}



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

table{

    width:100%;
    border-collapse:collapse;

    margin-top:10px;

    font-size:13px;

}

th{

    background:#eef2ff;

    padding:10px;

    text-align:left;

    font-weight:600;

}

td{

    padding:10px;

    border-bottom:1px solid #e5e7eb;

}

tr:hover{

    background:#f9fafb;

}



/* ================= BUTTON ================= */

.btn{

    border:none;

    padding:6px 12px;

    border-radius:8px;

    cursor:pointer;

    font-size:12px;

    transition:0.2s;

}


.btnRed{

    background:linear-gradient(
    135deg,
    #ef4444,
    #dc2626
    );

    color:white;

}

.btnRed:hover{

    transform:scale(1.05);

}



/* ================= BADGE ================= */

.dateRed{

    background:#fee2e2;

    color:#b91c1c;

    padding:3px 8px;

    border-radius:6px;

    font-size:12px;

    font-weight:600;

}



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

@media(max-width:1100px){

.summaryRow{

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

}

}


@media(max-width:700px){

.summaryRow{

    grid-template-columns:1fr;

}

.content{

    margin-left:0;

}

}