/* ==================================================
   SDME DASHBOARD STYLES
   Dashboard Module Only
================================================== */


/* ==================================================
   ROOT VARIABLES
================================================== */

:root {

    --primary-navy:#0B192C;

    --sidebar-navy:#071320;

    --accent-blue:#0066FF;

    --bg-light:#F4F6F9;

    --card-bg:#FFFFFF;

    --text-main:#1E293B;

    --text-muted:#64748B;

    --border-color:#E2E8F0;
    

    /* Border Radius */

    --radius-sm:8px;
    --radius-md:10px;
    --radius-lg:12px;
    --radius-xl:16px;

    /* Spacing */

    --space-xs:4px;
    --space-sm:8px;
    --space-md:12px;
    --space-lg:16px;
    --space-xl:24px;
    --space-2xl:32px;

}







/* ==================================================
   BASE DASHBOARD RESET
================================================== */


* {

    box-sizing:border-box;

}




.dashboard-content {

    padding:10px 20px 24px;

    overflow-y:auto;

    flex-grow:1;

    display:grid;

    grid-template-columns:2fr 1fr;

    gap:24px;

    background:var(--bg-light);

}






.left-column {


    display:flex;

    flex-direction:column;

    gap:24px;


}






.right-column {


    display:flex;

    flex-direction:column;

    gap:24px;


}









/* ==================================================
   DASHBOARD WELCOME HEADER
================================================== */


.dashboard-welcome {

    background:var(--card-bg);

    border:1px solid var(--border-color);

    border-radius:12px;

    padding:24px 24px;

    display:flex;

    justify-content:space-between;

    align-items:center;
}



.welcome-text h1 {

    font-size:24px;

    font-weight:700;

    color:var(--text-main);

    margin-bottom:6px;

}



.welcome-text h1 span {

    color:var(--accent-blue);

}



.welcome-text p {

    font-size:13px;

    color:var(--text-muted);

}





.academic-summary {

    display:flex;

    gap:12px;

}



.academic-box {

    display:flex;

    align-items:center;

    gap:10px;

    padding:10px 14px;

    background:#F8FAFC;

    border:1px solid var(--border-color);

    border-radius:10px;

    min-width:140px;

}



.academic-box i {

    color:var(--accent-blue);

    font-size:16px;

}



.academic-box small {

    display:block;

    color:var(--text-muted);

    font-size:10px;

    text-transform:uppercase;

    font-weight:600;

}



.academic-box strong {

    display:block;

    font-size:13px;

    color:var(--text-main);

    margin-top:2px;

}

/* ==================================================
   METRIC CARDS
================================================== */



.metrics-grid {


    display:grid;

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

    gap:16px;


}






.metric-card {


    background:var(--card-bg);

    border-radius:12px;

    padding:20px;

    border:1px solid var(--border-color);

    display:flex;

    flex-direction:column;

    justify-content:space-between;

    height:130px;


}







.metric-header {


    display:flex;

    justify-content:space-between;

    align-items:flex-start;


}







.metric-value {


    font-size:22px;

    font-weight:700;

    color:var(--text-main);


}







.metric-label {


    margin-top:5px;

    font-size:11px;

    font-weight:600;

    color:var(--text-muted);

    text-transform:uppercase;

    letter-spacing:.5px;


}








.metric-icon {


    width:40px;

    height:40px;

    border-radius:8px;

    display:flex;

    justify-content:center;

    align-items:center;

    color:white;

    font-size:16px;


}







.metric-icon.blue {


    background:#2563EB;


}




.metric-icon.green {


    background:#10B981;


}




.metric-icon.purple {


    background:#8B5CF6;


}




.metric-icon.orange {


    background:#F97316;


}







.metric-footer {


    font-size:12px;

    font-weight:500;

    display:flex;

    justify-content:space-between;

    align-items:center;


}







.blue-text {


    color:#2563EB;


}




.green-text {


    color:#10B981;


}




.purple-text {


    color:#8B5CF6;


}




.orange-text {


    color:#F97316;


}

/* ==================================================
   QUICK ACTIONS
================================================== */


.quick-actions-card {


    background:var(--card-bg);

    border-radius:12px;

    padding:20px;

    border:1px solid var(--border-color);


}







.section-title {


    font-size:15px;

    font-weight:700;

    color:var(--text-main);

    margin-bottom:16px;


}







.actions-grid {


    display:grid;

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

    gap:12px;


}







.action-btn {


    border:none;

    border-radius:10px;

    height:100px;

    color:white;

    cursor:pointer;

    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:center;

    gap:12px;

    transition:.2s;


}






.action-btn:hover {


    opacity:.9;


}







.action-btn i {


    font-size:18px;


}







.action-btn span {


    font-size:11px;

    font-weight:600;

    text-align:center;


}







.btn-green {


    background:#10B981;


}



.btn-blue {


    background:#2563EB;


}



.btn-red {


    background:#EF4444;


}



.btn-purple {


    background:#8B5CF6;


}



.btn-teal {


    background:#0EA5E9;


}



.btn-orange {


    background:#F97316;


}









/* ==================================================
   SYSTEM OVERVIEW + CHART ROW
================================================== */


.middle-row {


    display:grid;

    grid-template-columns:1fr 1fr;

    gap:24px;


}







.info-card {


    background:var(--card-bg);

    border-radius:12px;

    padding:20px;

    border:1px solid var(--border-color);

    display:flex;

    flex-direction:column;

    justify-content:space-between;


}







.overview-list {


    display:flex;

    flex-direction:column;

    gap:16px;


}







.overview-item {


    display:flex;

    justify-content:space-between;

    align-items:center;

    font-size:13px;


}







.overview-item-left {


    display:flex;

    align-items:center;

    gap:12px;

    color:var(--text-muted);


}







.overview-item-left i {


    color:#2563EB;

    font-size:14px;


}







.overview-item span:last-child {


    font-weight:700;

    color:var(--text-main);


}







.card-link {


    color:#2563EB;

    font-size:13px;

    font-weight:600;

    text-decoration:none;

    display:flex;

    align-items:center;

    gap:6px;


}









/* ==================================================
   STUDENTS BY LEVEL DONUT CHART
================================================== */



.chart-container {


    display:flex;

    align-items:center;

    justify-content:space-between;


}







.donut-chart {


    width:120px;

    height:120px;

    border-radius:50%;


    background:conic-gradient(

        #2563EB 0deg 110deg,

        #0EA5E9 110deg 210deg,

        #10B981 210deg 290deg,

        #EF4444 290deg 330deg,

        #8B5CF6 330deg 355deg,

        #F97316 355deg 360deg

    );


    display:flex;

    align-items:center;

    justify-content:center;


}







.donut-hole {


    width:80px;

    height:80px;

    border-radius:50%;

    background:white;

    display:flex;

    flex-direction:column;

    justify-content:center;

    align-items:center;


}







.donut-hole h4 {


    font-size:14px;

    font-weight:700;


}







.donut-hole p {


    font-size:9px;

    color:var(--text-muted);


}







.chart-legend {


    display:flex;

    flex-direction:column;

    gap:8px;


}







.legend-item {


    display:flex;

    justify-content:space-between;

    align-items:center;

    width:140px;

    font-size:11px;


}







.legend-label-wrap {


    display:flex;

    align-items:center;

    gap:6px;

    color:var(--text-muted);


}







.legend-dot {


    width:8px;

    height:8px;

    border-radius:3px;


}







.legend-val {


    font-weight:600;

    color:var(--text-main);


}









/* ==================================================
   RECENT ACTIVITIES
================================================== */


.recent-activities-card {


    background:var(--card-bg);

    border-radius:12px;

    padding:20px;

    border:1px solid var(--border-color);


}







.activities-header {


    display:flex;

    justify-content:space-between;

    align-items:center;

    margin-bottom:16px;


}







.activities-list {


    display:flex;

    flex-direction:column;

    gap:14px;


}







.activity-row {


    display:flex;

    justify-content:space-between;

    align-items:center;

    padding-bottom:12px;

    border-bottom:1px solid var(--border-color);

    font-size:12px;


}







.activity-row:last-child {


    border-bottom:none;


}







.activity-left {


    display:flex;

    align-items:center;

    gap:12px;


}







.activity-icon-wrap {


    width:28px;

    height:28px;

    border-radius:50%;

    background:#EFF6FF;

    color:#2563EB;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:12px;


}







.activity-time {


    color:var(--text-muted);

    font-size:11px;


}

/* ==================================================
   BULK MESSAGING CENTER
================================================== */


.messaging-card {


    background:var(--card-bg);

    border-radius:12px;

    padding:20px;

    border:1px solid var(--border-color);

    display:flex;

    flex-direction:column;

    gap:16px;


}







.messaging-top-title {


    display:flex;

    align-items:center;

    gap:10px;

    font-size:15px;

    font-weight:700;

    color:var(--text-main);


}







.messaging-top-title i {


    color:#2563EB;


}







.messaging-stats {


    display:grid;

    grid-template-columns:1fr 1fr;

    gap:12px;


}







.stat-box {


    background:#F8FAFC;

    border:1px solid var(--border-color);

    padding:12px;

    border-radius:8px;


}







.stat-box span {


    font-size:10px;

    color:var(--text-muted);

    font-weight:600;

    text-transform:uppercase;


}







.stat-box h3 {


    margin-top:4px;

    font-size:18px;

    color:var(--text-main);


}









/* ==================================================
   MESSAGE INFO BANNER
================================================== */


.info-banner {


    background:#EFF6FF;

    border:1px solid #BFDBFE;

    border-radius:8px;

    padding:12px;

    display:flex;

    gap:10px;

    font-size:11px;

    color:#1E40AF;

    line-height:1.5;


}







.info-banner i {


    color:#2563EB;


}









/* ==================================================
   MESSAGE FORM
================================================== */


.form-group {


    display:flex;

    flex-direction:column;

    gap:6px;


}







.form-group label {


    font-size:11px;

    font-weight:600;

    color:var(--text-muted);


}







textarea,

select {


    width:100%;

    border:1px solid var(--border-color);

    border-radius:8px;

    padding:10px;

    font-size:12px;

    color:var(--text-main);

    outline:none;


}







textarea {


    height:90px;

    resize:none;


}







.char-counter {


    text-align:right;

    font-size:10px;

    color:var(--text-muted);


}




/* ==========================================
RECIPIENT SELECTOR
========================================== */

.recipient-title{

    display:block;

    margin-bottom:12px;

    font-size:13px;

    font-weight:700;

    color:var(--text-main);

}



.recipient-options{

    display:grid;

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

    gap:10px;

}



.recipient-option{

    display:flex;

    align-items:center;

    gap:10px;

    padding:10px 12px;

    background:#FFFFFF;

    border:1px solid var(--border-color);

    border-radius:8px;

    cursor:pointer;

    transition:all .18s ease;

    font-size:12px;

    font-weight:600;

    color:var(--text-main);

    min-height:42px;

}



.recipient-option:hover{

    background:#F8FAFC;

    border-color:var(--accent-blue);

}



.recipient-option input{

    width:16px;

    height:16px;

    accent-color:var(--accent-blue);

    cursor:pointer;

}



/* ==========================================
SPECIFIC CLASS PANEL
========================================== */

.class-selector{

    margin-top:16px;

    padding:16px;

    background:#F8FAFC;

    border:1px solid var(--border-color);

    border-radius:10px;

}



.class-selector>label{

    display:block;

    margin-bottom:12px;

    font-size:12px;

    font-weight:700;

    color:var(--text-main);

}



.class-list{

    display:grid;

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

    gap:8px;

}



.class-list label{

    display:flex;

    align-items:center;

    gap:8px;

    padding:9px 10px;

    background:#FFFFFF;

    border:1px solid var(--border-color);

    border-radius:8px;

    cursor:pointer;

    transition:all .18s ease;

    font-size:11px;

    font-weight:600;

    color:var(--text-main);

}



.class-list label:hover{

    background:#EFF6FF;

    border-color:var(--accent-blue);

}



.class-list input{

    width:15px;

    height:15px;

    accent-color:var(--accent-blue);

}



/* ==========================================
HIDDEN
========================================== */

.hidden{

    display:none !important;

}








/* ==================================================
   MESSAGE BUTTONS
================================================== */


.messaging-buttons {


    display:grid;

    grid-template-columns:1fr 1fr;

    gap:12px;


}







.primary-action-btn,

.success-action-btn,

.history-btn {


    border:none;

    border-radius:8px;

    padding:10px;

    font-size:11px;

    font-weight:600;

    cursor:pointer;

    display:flex;

    align-items:center;

    justify-content:center;

    gap:8px;


}







.primary-action-btn {


    background:#1D4ED8;

    color:white;


}







.success-action-btn {


    background:#10B981;

    color:white;


}







.history-btn {


    background:white;

    color:#1D4ED8;

    border:1px solid #BFDBFE;


}









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


@media(max-width:1200px){


    .dashboard-content {


        grid-template-columns:1fr;


    }


    .metrics-grid {


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


    }


}








@media(max-width:900px){


    .dashboard-welcome {


        flex-direction:column;

        align-items:flex-start;

        gap:15px;


    }



    .middle-row {


        grid-template-columns:1fr;


    }



    .actions-grid {


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


    }


}








@media(max-width:600px){


    .dashboard-content {


        padding:16px;


    }



    .metrics-grid {


        grid-template-columns:1fr;


    }



    .actions-grid {


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


    }



    .messaging-buttons {


        grid-template-columns:1fr;


    }


}