/* PAGE COLOR PLATE */
:root {
    /* Brand */
    --primary: #2C70DF;
    --primary-hover: #1F64D5;

    /* Sidebar */
    --sidebar: #182A49;
    --sidebar-light: #21365A;
    --sidebar-active: #2C70DF;

    /* Background */
    --page-bg: #F6F9FE;
    --card-bg: #FFFFFF;

    /* Text */
    --text-primary: #172B4D;
    --text-secondary: #6B7C93;
    --text-muted: #8A9AB5;

    /* Borders */
    --border: #DCE8F7;

    /* Dashboard Accents */
    --blue: #2C70DF;
    --blue-light: #EAF3FF;

    --green: #20B486;
    --green-light: #E9F9F3;

    --purple: #7357D9;
    --purple-light: #F1EEFF;

    --pink: #E84F9B;
    --pink-light: #FFF0F7;

    /* Status */
    --success: #20B486;
    --danger: #F0444F;

    /* Common */
    --white: #FFFFFF;
}

.dark {
    --page-bg: #0F172A;
    --card-bg: #1E293B;
    --text-primary: #F1F5F9;
    --text-secondary: #94A3B8;
    --text-muted: #64748B;
    --border: #334155;
    --white: #1E293B;

    /* Sidebar thoda aur dark rakha, already dark tha */
    --sidebar: #0B1526;
    --sidebar-light: #16233D;

    --blue-light: rgba(44, 112, 223, 0.15);
    --green-light: rgba(32, 180, 134, 0.15);
    --purple-light: rgba(115, 87, 217, 0.15);
    --pink-light: rgba(232, 79, 155, 0.15);
    --male-light: rgba(44, 112, 223, 0.15);
    --female-light: rgba(232, 79, 155, 0.15);
    --input-bg: #0F172A;
    --input-border: #334155;
}

.headingDate {
    align-items: flex-start;
    gap: .5rem;
    font-size: clamp(.5rem, 2.5vw, .8rem);
}

.headingDate>svg {
    width: 1rem;
    height: 1rem;
}

.heroBox {
    align-items: flex-start;
    flex-grow: 1;
    gap: .5rem;
    padding: 1rem;
    border-radius: .5rem;
}

.totalStuBox {
    background-color: var(--blue-light);
    box-shadow: 0 0 1px var(--blue);
}

.bigClassBox {
    background-color: var(--green-light);
    box-shadow: 0 0 1px var(--green);
}

.totalMaleBox {
    background-color: var(--purple-light);
    box-shadow: 0 0 1px var(--purple);
}

.totalFemaleBox {
    background-color: var(--pink-light);
    box-shadow: 0 0 1px var(--pink);
}

.totalStuIcon {
    background-color: var(--blue);
}

.bigClassIcon {
    background-color: var(--green);
}

.maleIcon {
    background-color: var(--purple);
}

.femaleIcon {
    background-color: var(--pink);
}

.totalNums {
    width: 100%;
    text-decoration: none;
    color: var(--text-primary);
    justify-content: space-between;
}

.totals {
    font-weight: 800;
    font-size: 1.5rem;
}

.greenText {
    color: var(--green);
}

/* GRAPH SECTION */
.graphSection {
    align-items: initial;
}

.studentGender,
.studentByClass {
    gap: 0;
    padding: 1rem;
    background-color: var(--card-bg);
    box-shadow: 0 0 1px var(--border);
}

.byClassHeader {
    padding-bottom: 1rem;
    justify-content: space-between;
}

.iconHeading {
    gap: .5rem;
}

.byClasIcon {
    background-color: var(--blue-light);
    color: var(--blue);
}

#classesDropdown {
    border: 1px solid var(--border);
    padding: .5rem 1rem;
    border-radius: .5rem;
}

/* .chartGraph {
    justify-content: flex-start;
    align-items: flex-end;
    margin-top: 1rem;
} */
/* GENDER DISTRIBUTION CARD */
.studentGender {
    justify-content: flex-start;
    align-items: flex-start;
    gap: 1rem;
}

.chartContainer {
    width: 100%;
    height: 100%;
}

.donutChart {
    position: relative;
    width: clamp(15rem, 15vw, 30rem);
    aspect-ratio: 1;
    border-radius: 100%;
    background: conic-gradient(var(--blue) 0% var(--male-percent, 0%), var(--pink) var(--male-percent, 0%) 100%);
    transition: 0.5s ease;
}

.chartCenter {
    width: 60%;
    aspect-ratio: 1;
    background-color: var(--white);
    border-radius: 100%;
    gap: .5rem;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
}

.totalStu {
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--text-primary);
}

.percentLabel {
    font-weight: 800;
    position: absolute;
    color: var(--white);
    z-index: 2;
}

.malePercent {
    right: .5rem;
}

.femalePercent {
    left: .7rem;
}

.genderNums {
    padding: 1rem;
    gap: 3rem;
}

.gender {
    gap: 1rem;
}

.dot {
    width: 1rem;
    height: 1rem;
    border-radius: 100%;
    background-color: var(--blue);
}

.femaleDot {
    background-color: var(--pink);
}

.totalGender {
    font-weight: 800;
}

.totalStuLabel {
    font-weight: 600;
}

/* bottomSection */
.bottomSection {
    align-items: initial;
}

.recentContainer {
    overflow-x: auto;
    justify-content: flex-start;
    background-color: var(--white);
    gap: 1rem;
}

.recentHeader {
    width: 100%;
    justify-content: space-between;
}

.viewAll {
    text-decoration: none;
    color: var(--purple);
    font-weight: 600;
}

table {
    border-collapse: collapse;
    overflow-x: auto;
    width: 100%;
}

thead tr th:first-child {
    border-top-left-radius: .5rem;
}

thead tr th:last-child {
    border-top-right-radius: .5rem;
}

th {
    background-color: var(--border);
}

th,
td {
    white-space: nowrap;
    border-bottom: 1px solid var(--border);
    padding: .5rem 1rem;
    text-align: start;
}

td.stackRow {
    justify-content: flex-start;
    gap: 1rem;
    /* flex-grow: 1; */
}

.stuProfile {
    width: 2rem;
    border-radius: 100%;
}

.nameRoll {
    align-items: flex-start;
}

.rollNum {
    font-size: .8remm;
}

/* QUICK ACTIONS */
.quickActions {
    background-color: var(--white);
    gap: 1rem
}

.actionItem {
    padding: clamp(.5rem, 5vw, 1rem);
    border-radius: 1rem;
    text-decoration: none;
    width: 100%;
    justify-content: space-between;
    background-color: var(--blue);
}

.addAct {
    color: var(--white);
    background-color: var(--blue);
}

.viewAct {
    background-color: var(--blue-light);
}

.importAct {
    background-color: var(--green-light);
}

.exportAct {
    background-color: var(--purple-light);
}

.itemContent {
    gap: 1rem;
}

.quickIcon {
    color: var(--blue);
    background-color: var(--blue-light);
}