/* =========================================================
   REPORT LAYOUT
========================================================= */

.reportWrapper{
    background:#f4f7fb;
    min-height:100vh;
    margin-left:240px;
    margin-top:50px;
    padding:28px;
}

.reportContainer{
    max-width:1450px;
    margin:0 auto;

}

.reportPage{
    width:100%;
    font-family:'Inter',sans-serif;
}

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

.reportHeader{
    display:flex;
    justify-content:space-between;
    align-items:flex-start;
    margin-bottom:28px;
}

.backBtn{
    display:inline-flex;
    align-items:center;
    gap:8px;
    padding:11px 16px;
    border-radius:14px;
    background:#ffffff;
    border:1px solid #e5e7eb;
    text-decoration:none;
    font-size:13px;
    font-weight:600;
    color:#111827;
    transition:0.2s ease;
    box-shadow:0 2px 8px rgba(0,0,0,0.03);
}

.backBtn:hover{
    background:#f9fafb;
    transform:translateY(-1px);
}

.reportHeader h2{
    margin:18px 0 0 0;
    font-size:30px;
    font-weight:800;
    color:#111827;
    letter-spacing:-0.5px;
}


/* EVENT HEADER */


.eventTitleWrap{
    display:flex;
    align-items:center;
    gap:14px;
    flex-wrap:wrap;
}

.eventTitleWrap h2{
    margin-top:50px;
    margin-bottom:40px;
    font-size:30px;
    font-weight:800;
    color:#111827;
    letter-spacing:-0.5px;
}

.eventDate{
    display:inline-flex;
    align-items:center;
    gap:6px;
    padding:8px 14px;
    background:#eef2ff;
    color:#4338ca;
    border-radius:999px;
    font-size:13px;
    font-weight:600;
}
/* =========================================================
   STATS GRID
========================================================= */

.statsGrid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:18px;
    margin-bottom:24px;
}

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

.statCard{
    background:#ffffff;
    border:1px solid #edf0f5;
    border-radius:22px;
    padding:18px;
    transition:0.2s ease;
    box-shadow:
    0 2px 10px rgba(15,23,42,0.03),
    0 12px 28px rgba(15,23,42,0.03);
}

.statCard:hover{
    transform:translateY(-2px);
    box-shadow:
    0 6px 16px rgba(15,23,42,0.05),
    0 18px 34px rgba(15,23,42,0.05);
}

.cardTop{
    display:flex;
    justify-content:space-between;
    align-items:flex-start;
    gap:14px;
}

/* =========================================================
   STAT CONTENT
========================================================= */

.statTitle{
    font-size:12px;
    font-weight:600;
    color:#6b7280;
    margin-bottom:8px;
    text-transform:uppercase;
    letter-spacing:0.3px;
}

.statValue{
    font-size:18px;
    font-weight:800;
    color:#111827;
    line-height:1;
    margin-bottom:6px;
}

.statSub{
    font-size:12px;
    color:#9ca3af;
    line-height:1.5;
}

/* =========================================================
   ICONS
========================================================= */

.statIcon{
    width:48px;
    height:48px;
    border-radius:16px;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:18px;
    font-weight:700;
    flex-shrink:0;
}

.statIcon.blue{
    background:#eef2ff;
    color:#4f46e5;
}

.statIcon.green{
    background:#ecfdf5;
    color:#16a34a;
}

.statIcon.orange{
    background:#fff7ed;
    color:#ea580c;
}

.statIcon.gray{
    background:#f3f4f6;
    color:#374151;
}

/* =========================================================
   PROGRESS BAR
========================================================= */

.progress{
    height:6px;
    margin-top:12px;
    background:#edf1f7;
    border-radius:999px;
    overflow:hidden;
}

.progress div{
    height:100%;
    border-radius:999px;
    background:linear-gradient(
        90deg,
        #4f46e5,
        #7c3aed
    );
}

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

.statusBadge{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding:6px 12px;
    border-radius:999px;
    background:#eef2ff;
    color:#4338ca;
    font-size:12px;
    font-weight:700;
    text-transform:capitalize;
    margin-top:4px;
}

.statusText{
    margin-top:10px;
}

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

.contentCard{
  
    background:#ffffff;
    border-radius:28px;
    border:1px solid #edf0f5;
    box-shadow:
    0 2px 10px rgba(15,23,42,0.03),
    0 14px 30px rgba(15,23,42,0.04);
    overflow:hidden;
    margin-top:60px;
}

/* =========================================================
   TAB BAR
========================================================= */

.tabBar{
    display:flex;
    align-items:center;
    gap:10px;
    padding:20px 22px;
    border-bottom:1px solid #eef2f7;
    background:#fbfcfe;
    flex-wrap:wrap;
    
}

.tabBar a{
    text-decoration:none;
    padding:11px 18px;
    border-radius:12px;
    font-size:13px;
    font-weight:600;
    color:#6b7280;
    transition:0.2s ease;
}

.tabBar a:hover{
    background:#eef2ff;
    color:#4338ca;
}

.tabBar a.active{
    background:#4f46e5;
    color:#ffffff;
    box-shadow:0 8px 18px rgba(79,70,229,0.22);
}

/* =========================================================
   CONTENT BODY
========================================================= */

.contentBody{
    padding:24px;
       
}

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

.listCard{
    background:transparent;
    border:none;
    padding:0;
    box-shadow:none;
}

/* =========================================================
   LIST HEADER
========================================================= */

.listHeader{
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-bottom:22px;
}

.listHeader h3,
.listHeader h4{
    margin:0;
    font-size:22px;
    font-weight:700;
    color:#111827;
}

.sub{
    margin-top:4px;
    font-size:13px;
    color:#6b7280;
}

/* =========================================================
   LIST ROW
========================================================= */

.attendanceRow{
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:18px;
    border-radius:18px;
    background:#f8fafc;
    border:1px solid transparent;
    margin-bottom:14px;
    transition:0.2s ease;
}

.attendanceRow:hover{
    background:#ffffff;
    border-color:#e2e8f0;
    transform:translateY(-1px);
    box-shadow:0 4px 12px rgba(15,23,42,0.04);
}

.attendanceRow:last-child{
    margin-bottom:0;
}

/* =========================================================
   LEFT SIDE
========================================================= */

.left{
    display:flex;
    align-items:center;
    gap:14px;
}

/* =========================================================
   AVATAR
========================================================= */

.avatar{
    width:50px;
    height:50px;
    border-radius:16px;
    background:#eef2ff;
    color:#4f46e5;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:18px;
    font-weight:700;
    flex-shrink:0;
}

/* =========================================================
   TEXT
========================================================= */

.name{
    font-size:15px;
    font-weight:700;
    color:#111827;
    margin-bottom:4px;
}

.matric{
    font-size:13px;
    color:#6b7280;
    line-height:1.5;
}

/* =========================================================
   RIGHT SIDE
========================================================= */

.right{
    text-align:right;
}

.time{
    font-size:15px;
    font-weight:700;
    color:#111827;
}

.amount{
    display:inline-block;
    margin-top:6px;
    padding:6px 10px;
    border-radius:10px;
    background:#fef2f2;
    color:#dc2626;
    font-size:12px;
    font-weight:700;
}




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

@media(max-width:1200px){

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

    .reportWrapper{
        padding:22px;
    }

}


/* ================= TABLET ================= */

@media(max-width:768px){

    .reportWrapper{
        margin-left:0;
        margin-top:80px;
        padding:16px;
    }

    .reportHeader{
        flex-direction:column;
        gap:16px;
        margin-bottom:20px;
    }

    .reportHeader h2{
        font-size:24px;
    }

    .eventTitleWrap h2{
        font-size:24px;
        margin-top:20px;
        margin-bottom:12px;
    }

    /* Summary cards 2 per row */

    .statsGrid{
        grid-template-columns:repeat(2,1fr);
        gap:12px;
    }

    .statCard{
        padding:16px;
    }

    .cardTop{
        gap:10px;
    }

    .statIcon{
        width:42px;
        height:42px;
        font-size:16px;
    }

    .statValue{
        font-size:16px;
    }

    /* Tabs stay horizontal */

    .tabBar{
        flex-wrap:nowrap;
        overflow-x:auto;
        gap:8px;

        scrollbar-width:none;
        -ms-overflow-style:none;
    }

    .tabBar::-webkit-scrollbar{
        display:none;
    }

    .tabBar a{
        flex:none;
        white-space:nowrap;
    }

    .contentBody{
        padding:16px;
    }

    .listHeader{
        flex-direction:column;
        align-items:flex-start;
        gap:10px;
    }

    /* Attendance row */

    .attendanceRow{

        display:grid;

        grid-template-columns:1fr auto;

        align-items:center;

        gap:12px;
    }

    .left{
        min-width:0;
    }

    .right{
        text-align:right;
        white-space:nowrap;
    }

}


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

@media(max-width:576px){

    .reportWrapper{
        padding:12px;
    }

    .reportHeader h2{
        font-size:22px;
    }

    .eventTitleWrap h2{
        font-size:22px;
    }

    /* Summary cards remain 2 per row */

    .statsGrid{
        grid-template-columns:repeat(2,1fr);
        gap:10px;
    }

    .statCard{
        padding:14px;
        border-radius:16px;
    }

    .statTitle{
        font-size:11px;
    }

    .statValue{
        font-size:15px;
    }

    .statSub{
        font-size:11px;
    }

    .statIcon{
        width:38px;
        height:38px;
        font-size:14px;
        border-radius:12px;
    }

    .contentCard{
        border-radius:18px;
      
    }

    .tabBar{
        padding:14px;
    }

    .tabBar a{
        padding:10px 14px;
        font-size:12px;
    }

    .contentBody{
        padding:14px;
    }

    .attendanceRow{
        padding:14px;
        border-radius:14px;
    }

    .avatar{
        width:42px;
        height:42px;
        font-size:15px;
    }

    .name{
        font-size:14px;
    }

    .matric{
        font-size:12px;
    }

    .time{
        font-size:13px;
    }

    .amount{
        font-size:11px;
        padding:5px 8px;
    }
}