/*==============================================================
    STYLE.CSS
    Student Performance Analytics Portal

    GLOBAL FOUNDATION
    Part 1 — Reset, Variables, Typography & Base Layout
==============================================================*/


/*==============================================================
    01. ROOT VARIABLES
==============================================================*/

:root {

    /* Primary */

    --primary:
        #312e81;

    --primary-light:
        #4f46e5;

    --primary-lighter:
        #6366f1;

    --primary-soft:
        #eef2ff;


    /* Text */

    --text:
        #0f172a;

    --text-secondary:
        #334155;

    --text-muted:
        #64748b;

    --text-light:
        #94a3b8;


    /* Surfaces */

    --background:
        #f8fafc;

    --surface:
        #ffffff;

    --surface-soft:
        #f1f5f9;


    /* Borders */

    --border:
        #e2e8f0;

    --border-light:
        #f1f5f9;


    /* Status */

    --success:
        #16a34a;

    --warning:
        #f59e0b;

    --danger:
        #dc2626;

    --info:
        #2563eb;


    /* Radius */

    --radius-sm:
        8px;

    --radius-md:
        12px;

    --radius-lg:
        18px;

    --radius-xl:
        24px;


    /* Shadows */

    --shadow-sm:
        0 2px 8px rgba(15, 23, 42, 0.05);

    --shadow-md:
        0 8px 25px rgba(15, 23, 42, 0.07);

    --shadow-lg:
        0 16px 40px rgba(15, 23, 42, 0.10);


    /* Layout */

    --container:
        1200px;

    --header-height:
        74px;


    /* Transition */

    --transition:
        0.25s ease;

}



/* =========================================================
   STICKY HEADER — FIX
   ========================================================= */

html,
body {
    overflow-x: hidden;
}

/* Prevent parent containers from breaking sticky positioning */
main,
.site-header,
.navbar {
    overflow: visible;
}


/*==============================================================
    02. DARK THEME VARIABLES
==============================================================*/

html.dark-theme {

    --text:
        #f8fafc;

    --text-secondary:
        #cbd5e1;

    --text-muted:
        #94a3b8;

    --text-light:
        #64748b;


    --background:
        #0b1120;

    --surface:
        #111827;

    --surface-soft:
        #172033;


    --border:
        #263244;

    --border-light:
        #1e293b;


    --primary-soft:
        rgba(79, 70, 229, 0.14);


    --shadow-sm:
        0 2px 10px rgba(0, 0, 0, 0.15);

    --shadow-md:
        0 8px 28px rgba(0, 0, 0, 0.20);

    --shadow-lg:
        0 18px 45px rgba(0, 0, 0, 0.28);

}


/*==============================================================
    03. UNIVERSAL RESET
==============================================================*/

*,
*::before,
*::after {

    box-sizing:
        border-box;

    margin:
        0;

    padding:
        0;

}


/*==============================================================
    04. HTML
==============================================================*/

html {

    scroll-behavior:
        smooth;

    font-size:
        16px;

}


/*==============================================================
    05. BODY
==============================================================*/

body {

    min-height:
        100vh;

    background:
        var(--background);

    color:
        var(--text);

    font-family:
        "Poppins",
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;

    font-size:
        0.95rem;

    line-height:
        1.6;

    overflow-x:
        hidden;

    transition:
        background-color 0.25s ease,
        color 0.25s ease;

}


/*==============================================================
    06. IMAGES
==============================================================*/

img {

    display:
        block;

    max-width:
        100%;

}


/*==============================================================
    07. BUTTONS & INPUTS
==============================================================*/

button,
input,
textarea,
select {

    font:
        inherit;

}


/*==============================================================
    08. BUTTON
==============================================================*/

button {

    border:
        0;

    cursor:
        pointer;

}


/*==============================================================
    09. LINKS
==============================================================*/

a {

    color:
        inherit;

    text-decoration:
        none;

}


/*==============================================================
    10. LISTS
==============================================================*/

ul,
ol {

    list-style:
        none;

}


/*==============================================================
    11. HEADINGS
==============================================================*/

h1,
h2,
h3,
h4,
h5,
h6 {

    color:
        var(--text);

    font-weight:
        700;

    line-height:
        1.25;

}


/*==============================================================
    12. PARAGRAPHS
==============================================================*/

p {

    color:
        var(--text-secondary);

}


/*==============================================================
    13. MAIN CONTENT
==============================================================*/

main {

    width:
        100%;

    min-height:
        calc(100vh - var(--header-height));

}


/*==============================================================
    14. COMMON CONTAINER
==============================================================*/

.container {

    width:
        min(calc(100% - 48px),
            var(--container));

    margin:
        0 auto;

}


/*==============================================================
    15. COMMON CARD
==============================================================*/

.card {

    background:
        var(--surface);

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

    border-radius:
        var(--radius-lg);

    box-shadow:
        var(--shadow-sm);

    transition:
        background-color var(--transition),
        border-color var(--transition),
        box-shadow var(--transition);

}


/*==============================================================
    16. CARD HOVER
==============================================================*/

.card:hover {

    box-shadow:
        var(--shadow-md);

}


/*==============================================================
    17. FOCUS ACCESSIBILITY
==============================================================*/

:focus-visible {

    outline:
        3px solid rgba(99, 102, 241, 0.35);

    outline-offset:
        3px;

}


/*==============================================================
    18. SELECTION
==============================================================*/

::selection {

    background:
        var(--primary-light);

    color:
        #ffffff;

}


/*==============================================================
    19. SCROLLBAR
==============================================================*/

::-webkit-scrollbar {

    width:
        9px;

}


::-webkit-scrollbar-track {

    background:
        var(--background);

}


::-webkit-scrollbar-thumb {

    background:
        #a5b4fc;

    border-radius:
        20px;

}


::-webkit-scrollbar-thumb:hover {

    background:
        var(--primary-light);

}


/*==============================================================
    20. SKIP LINK
==============================================================*/

.skip-link {

    position:
        fixed;

    top:
        -100px;

    left:
        20px;

    z-index:
        99999;

    padding:
        10px 18px;

    border-radius:
        8px;

    background:
        var(--primary);

    color:
        #ffffff;

    font-weight:
        600;

    transition:
        top 0.2s ease;

}


.skip-link:focus {

    top:
        20px;

}


/*==============================================================
    21. REDUCED MOTION
==============================================================*/

@media (prefers-reduced-motion: reduce) {

    html {

        scroll-behavior:
            auto;

    }

    *,
    *::before,
    *::after {

        transition:
            none !important;

        animation:
            none !important;

    }

}


/*==============================================================
    22. MOBILE CONTAINER
==============================================================*/

@media (max-width: 600px) {

    .container {

        width:
            min(calc(100% - 24px),
                var(--container));

    }

}


/*==============================================================
    END OF PART 1
==============================================================*/















/*==============================================================
    STYLE.CSS
    Student Performance Analytics Portal

    GLOBAL FOUNDATION
    Part 2 — Header, Navigation, Buttons,
             Footer & Global Components
==============================================================*/


/*==============================================================
    01. SITE HEADER
==============================================================*/

.site-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 9999;
    width: 100%;

    background: #312e81;

    border-bottom:
        1px solid rgba(255, 255, 255, 0.10);

    box-shadow:
        0 4px 18px rgba(15, 23, 42, 0.12);
}

body {
    padding-top: var(--header-height);
}


/*==============================================================
    02. NAVBAR
==============================================================*/

.navbar {

    width:
        min(calc(100% - 48px),
            var(--container));

    min-height:
        var(--header-height);

    margin:
        0 auto;

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        24px;

}


/*==============================================================
    03. LOGO
==============================================================*/

.logo {

    flex-shrink:
        0;

    display:
        inline-flex;

    align-items:
        center;

    color:
        #ffffff;

    font-size:
        1.15rem;

    font-weight:
        700;

    letter-spacing:
        -0.02em;

    white-space:
        nowrap;

    transition:
        opacity var(--transition),
        transform var(--transition);

}


.logo:hover {

    opacity:
        0.88;

    transform:
        translateY(-1px);

}


/*==============================================================
    04. NAVIGATION LINKS
==============================================================*/

.nav-links {

    display:
        flex;

    align-items:
        center;

    justify-content:
        flex-end;

    gap:
        4px;

}


/*==============================================================
    05. NAVIGATION LIST ITEM
==============================================================*/

.nav-links li {

    display:
        flex;

    align-items:
        center;

}


/*==============================================================
    06. NAVIGATION ANCHORS
==============================================================*/

.nav-links>li>a {

    position:
        relative;

    display:
        inline-flex;

    align-items:
        center;

    min-height:
        42px;

    padding:
        8px 13px;

    border-radius:
        9px;

    color:
        rgba(255, 255, 255, 0.82);

    font-size:
        0.84rem;

    font-weight:
        500;

    white-space:
        nowrap;

    transition:
        color var(--transition),
        background-color var(--transition);

}


/*==============================================================
    07. NAVIGATION HOVER
==============================================================*/

.nav-links>li>a:hover {

    color:
        #ffffff;

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

}


/*==============================================================
    08. ACTIVE NAVIGATION
==============================================================*/

.nav-links>li>a.active {

    color:
        #ffffff;

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

    font-weight:
        600;

}


/*==============================================================
    09. ACTIVE NAVIGATION INDICATOR
==============================================================*/

.nav-links>li>a.active::after {

    content:
        "";

    position:
        absolute;

    left:
        13px;

    right:
        13px;

    bottom:
        3px;

    height:
        2px;

    border-radius:
        10px;

    background:
        #ffffff;

}


/*==============================================================
    10. THEME BUTTON
==============================================================*/

.theme-btn {

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    min-height:
        40px;

    padding:
        8px 13px;

    border:
        1px solid rgba(255, 255, 255, 0.16);

    border-radius:
        9px;

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

    color:
        #ffffff;

    font-size:
        0.82rem;

    font-weight:
        500;

    white-space:
        nowrap;

    transition:
        background-color var(--transition),
        border-color var(--transition),
        transform var(--transition);

}


.theme-btn:hover {

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

    border-color:
        rgba(255, 255, 255, 0.25);

    transform:
        translateY(-1px);

}


/*==============================================================
    11. NOTIFICATION BUTTON
==============================================================*/

.notification-btn {

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    min-height:
        40px;

    padding:
        8px 13px;

    border:
        1px solid rgba(255, 255, 255, 0.16);

    border-radius:
        9px;

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

    color:
        #ffffff;

    font-size:
        0.82rem;

    font-weight:
        500;

    white-space:
        nowrap;

    transition:
        background-color var(--transition),
        border-color var(--transition),
        transform var(--transition);

}


.notification-btn:hover {

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

    border-color:
        rgba(255, 255, 255, 0.25);

    transform:
        translateY(-1px);

}


/*==============================================================
    12. MENU BUTTON
==============================================================*/

.menu-btn {

    display:
        none;

    align-items:
        center;

    justify-content:
        center;

    width:
        42px;

    height:
        42px;

    flex-shrink:
        0;

    border:
        1px solid rgba(255, 255, 255, 0.18);

    border-radius:
        10px;

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

    color:
        #ffffff;

    font-size:
        1.35rem;

    line-height:
        1;

    transition:
        background-color var(--transition),
        transform var(--transition);

}


.menu-btn:hover {

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

}


.menu-btn:active {

    transform:
        scale(0.96);

}


/*==============================================================
    13. GLOBAL BUTTON
==============================================================*/

.btn {

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    min-height:
        42px;

    padding:
        9px 18px;

    border:
        1px solid transparent;

    border-radius:
        10px;

    background:
        var(--primary);

    color:
        #ffffff;

    font-size:
        0.86rem;

    font-weight:
        600;

    line-height:
        1.2;

    text-align:
        center;

    cursor:
        pointer;

    box-shadow:
        0 4px 12px rgba(49, 46, 129, 0.18);

    transition:
        background-color var(--transition),
        box-shadow var(--transition),
        transform var(--transition);

}


.btn:hover {

    background:
        var(--primary-light);

    box-shadow:
        0 7px 18px rgba(49, 46, 129, 0.24);

    transform:
        translateY(-2px);

}


.btn:active {

    transform:
        translateY(0);

}


/*==============================================================
    14. BUTTON SECONDARY
==============================================================*/

.btn-secondary {

    background:
        var(--surface);

    border-color:
        var(--border);

    color:
        var(--text-secondary);

    box-shadow:
        var(--shadow-sm);

}


.btn-secondary:hover {

    background:
        var(--surface-soft);

    border-color:
        #cbd5e1;

    color:
        var(--text);

}


/*==============================================================
    15. BUTTON SUCCESS
==============================================================*/

.btn-success {

    background:
        var(--success);

    color:
        #ffffff;

    box-shadow:
        0 4px 12px rgba(22, 163, 74, 0.18);

}


.btn-success:hover {

    background:
        #15803d;

}


/*==============================================================
    16. BUTTON DANGER
==============================================================*/

.btn-danger {

    background:
        var(--danger);

    color:
        #ffffff;

    box-shadow:
        0 4px 12px rgba(220, 38, 38, 0.18);

}


.btn-danger:hover {

    background:
        #b91c1c;

}


/*==============================================================
    17. BUTTON SMALL
==============================================================*/

.btn-sm {

    min-height:
        36px;

    padding:
        7px 13px;

    border-radius:
        8px;

    font-size:
        0.78rem;

}


/*==============================================================
    18. BUTTON LARGE
==============================================================*/

.btn-lg {

    min-height:
        48px;

    padding:
        11px 24px;

    border-radius:
        12px;

    font-size:
        0.92rem;

}


/*==============================================================
    19. DISABLED BUTTON
==============================================================*/

button:disabled,
.btn.disabled,
.btn[aria-disabled="true"] {

    opacity:
        0.55;

    cursor:
        not-allowed;

    pointer-events:
        none;

}


/*==============================================================
    20. GLOBAL SECTION
==============================================================*/

section {

    position:
        relative;

}


/*==============================================================
    21. SECTION TITLE UTILITY
==============================================================*/

.section-title {

    color:
        var(--text);

    font-size:
        clamp(1.45rem, 3vw, 2rem);

    font-weight:
        700;

    line-height:
        1.25;

}


/*==============================================================
    22. PAGE LOADER
==============================================================*/

.page-loader {

    position:
        fixed;

    inset:
        0;

    z-index:
        99999;

    display:
        flex;

    flex-direction:
        column;

    align-items:
        center;

    justify-content:
        center;

    gap:
        16px;

    background:
        var(--background);

    color:
        var(--text);

}


.page-loader p {

    color:
        var(--text-muted);

    font-size:
        0.88rem;

    font-weight:
        500;

}


/*==============================================================
    23. LOADER SPINNER
==============================================================*/

.loader-spinner {

    width:
        42px;

    height:
        42px;

    border:
        4px solid var(--border);

    border-top-color:
        var(--primary-light);

    border-radius:
        50%;

    animation:
        portalSpin 0.8s linear infinite;

}


@keyframes portalSpin {

    to {

        transform:
            rotate(360deg);

    }

}


/*==============================================================
    24. FOOTER
==============================================================*/

.site-footer {

    width:
        100%;

    margin-top:
        60px;

    padding:
        34px 24px;

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

    background:
        var(--surface);

    text-align:
        center;

}


/*==============================================================
    25. FOOTER PARAGRAPHS
==============================================================*/

.site-footer p {

    margin:
        4px 0;

    color:
        var(--text-muted);

    font-size:
        0.78rem;

    line-height:
        1.6;

}


/*==============================================================
    26. FOOTER STRONG TEXT
==============================================================*/

.site-footer strong {

    color:
        var(--text-secondary);

    font-weight:
        600;

}


/*==============================================================
    27. FOOTER LINKS
==============================================================*/

.site-footer a {

    color:
        var(--primary-light);

    font-weight:
        500;

    transition:
        color var(--transition);

}


.site-footer a:hover {

    color:
        var(--primary);

    text-decoration:
        underline;

}























/*==============================================================
    28. SCROLL TO TOP
==============================================================*/

#scrollTopBtn {

    position:
        fixed;

    right:
        24px;

    bottom:
        24px;

    z-index:
        900;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    width:
        44px;

    height:
        44px;

    border:
        1px solid rgba(255, 255, 255, 0.12);

    border-radius:
        50%;

    background:
        var(--primary);

    color:
        #ffffff;

    box-shadow:
        0 8px 22px rgba(15, 23, 42, 0.18);

    opacity:
        0;

    visibility:
        hidden;

    transform:
        translateY(12px);

    transition:
        opacity var(--transition),
        visibility var(--transition),
        transform var(--transition),
        background-color var(--transition);

}


#scrollTopBtn.show {

    opacity:
        1;

    visibility:
        visible;

    transform:
        translateY(0);

}


#scrollTopBtn:hover {

    background:
        var(--primary-light);

    transform:
        translateY(-3px);

}


/*==============================================================
    29. GLOBAL FORM ELEMENTS
==============================================================*/

input,
textarea,
select {

    width:
        100%;

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

    border-radius:
        10px;

    background:
        var(--surface);

    color:
        var(--text);

    transition:
        border-color var(--transition),
        box-shadow var(--transition),
        background-color var(--transition);

}


input:focus,
textarea:focus,
select:focus {

    border-color:
        var(--primary-light);

    box-shadow:
        0 0 0 3px rgba(99, 102, 241, 0.12);

    outline:
        none;

}


input::placeholder,
textarea::placeholder {

    color:
        var(--text-light);

}


/*==============================================================
    30. GLOBAL LABEL
==============================================================*/

label {

    display:
        inline-block;

    margin-bottom:
        7px;

    color:
        var(--text-secondary);

    font-size:
        0.82rem;

    font-weight:
        600;

}


/*==============================================================
    31. DARK THEME — HEADER
==============================================================*/

html.dark-theme .site-header {

    background:
        #1e1b4b;

    border-bottom-color:
        rgba(255, 255, 255, 0.08);

}


/*==============================================================
    32. DARK THEME — BUTTON SECONDARY
==============================================================*/

html.dark-theme .btn-secondary {

    background:
        var(--surface);

    border-color:
        var(--border);

    color:
        var(--text-secondary);

}


/*==============================================================
    33. DARK THEME — FOOTER
==============================================================*/

html.dark-theme .site-footer {

    background:
        var(--surface);

    border-top-color:
        var(--border);

}


/*==============================================================
    34. TABLET NAVIGATION
==============================================================*/

@media (max-width: 1050px) {

    .navbar {

        width:
            min(calc(100% - 32px),
                var(--container));

        gap:
            16px;

    }


    .nav-links>li>a {

        padding:
            8px 9px;

        font-size:
            0.78rem;

    }


    .theme-btn,
    .notification-btn {

        padding:
            8px 10px;

        font-size:
            0.76rem;

    }

}


/*==============================================================
    35. MOBILE HEADER
==============================================================*/

@media (max-width: 800px) {

    .site-header {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        z-index: 9999;
    }


    .navbar {

        min-height:
            68px;

    }


    .menu-btn {

        display:
            inline-flex;

    }


    .nav-links {

        position:
            absolute;

        top:
            calc(100% + 1px);

        left:
            12px;

        right:
            12px;

        display:
            none;

        flex-direction:
            column;

        align-items:
            stretch;

        gap:
            5px;

        padding:
            12px;

        border:
            1px solid rgba(255, 255, 255, 0.12);

        border-radius:
            14px;

        background:
            #312e81;

        box-shadow:
            0 18px 35px rgba(15, 23, 42, 0.20);

    }


    .nav-links.active {

        display:
            flex;

    }


    .nav-links li {

        width:
            100%;

    }


    .nav-links>li>a,
    .theme-btn,
    .notification-btn {

        width:
            100%;

        justify-content:
            flex-start;

    }


    .nav-links>li>a.active::after {

        display:
            none;

    }

}


/*==============================================================
    36. SMALL MOBILE
==============================================================*/

@media (max-width: 480px) {

    .navbar {

        width:
            calc(100% - 24px);

    }


    .logo {

        font-size:
            1rem;

    }


    .site-footer {

        padding:
            28px 16px;

    }


    #scrollTopBtn {

        right:
            16px;

        bottom:
            16px;

        width:
            40px;

        height:
            40px;

    }

}


/*==============================================================
    END OF PART 2
==============================================================*/













/*==============================================================
    STYLE.CSS
    Student Performance Analytics Portal

    GLOBAL FOUNDATION
    Part 3 — Forms, Alerts, Badges & Utility Components
==============================================================*/


/*==============================================================
    01. FORM GROUP
==============================================================*/

.form-group {

    display:
        flex;

    flex-direction:
        column;

    gap:
        0;

    margin-bottom:
        18px;

}


/*==============================================================
    02. FORM ROW
==============================================================*/

.form-row {

    display:
        grid;

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

    gap:
        18px;

}


/*==============================================================
    03. FORM INPUT
==============================================================*/

.form-group input,
.form-group textarea,
.form-group select {

    min-height:
        44px;

    padding:
        10px 13px;

}


/*==============================================================
    04. TEXTAREA
==============================================================*/

textarea {

    min-height:
        130px;

    padding:
        12px 13px;

    resize:
        vertical;

}


/*==============================================================
    05. SELECT
==============================================================*/

select {

    min-height:
        44px;

    padding:
        10px 38px 10px 13px;

    cursor:
        pointer;

}


/*==============================================================
    06. CHECKBOX & RADIO
==============================================================*/

input[type="checkbox"],
input[type="radio"] {

    width:
        auto;

    min-height:
        auto;

    accent-color:
        var(--primary-light);

    cursor:
        pointer;

}


/*==============================================================
    07. CHECKBOX LABEL
==============================================================*/

.checkbox-group,
.radio-group {

    display:
        flex;

    align-items:
        center;

    gap:
        9px;

}


.checkbox-group label,
.radio-group label {

    margin:
        0;

    cursor:
        pointer;

    font-weight:
        500;

}


/*==============================================================
    08. FORM HELP TEXT
==============================================================*/

.form-help {

    margin-top:
        6px;

    color:
        var(--text-muted);

    font-size:
        0.76rem;

    line-height:
        1.5;

}


/*==============================================================
    09. FORM ERROR
==============================================================*/

.form-error {

    margin-top:
        6px;

    color:
        var(--danger);

    font-size:
        0.76rem;

    font-weight:
        500;

}


/*==============================================================
    10. FORM SUCCESS
==============================================================*/

.form-success {

    margin-top:
        6px;

    color:
        var(--success);

    font-size:
        0.76rem;

    font-weight:
        500;

}


/*==============================================================
    11. REQUIRED FIELD
==============================================================*/

.required {

    color:
        var(--danger);

}


/*==============================================================
    12. GLOBAL ALERT
==============================================================*/

.alert {

    display:
        flex;

    align-items:
        flex-start;

    gap:
        12px;

    width:
        100%;

    margin-bottom:
        18px;

    padding:
        13px 16px;

    border:
        1px solid transparent;

    border-radius:
        12px;

    font-size:
        0.84rem;

    line-height:
        1.6;

}


/*==============================================================
    13. ALERT INFO
==============================================================*/

.alert-info {

    background:
        #eff6ff;

    border-color:
        #bfdbfe;

    color:
        #1e40af;

}


/*==============================================================
    14. ALERT SUCCESS
==============================================================*/

.alert-success {

    background:
        #f0fdf4;

    border-color:
        #bbf7d0;

    color:
        #166534;

}


/*==============================================================
    15. ALERT WARNING
==============================================================*/

.alert-warning {

    background:
        #fffbeb;

    border-color:
        #fde68a;

    color:
        #92400e;

}


/*==============================================================
    16. ALERT DANGER
==============================================================*/

.alert-danger {

    background:
        #fef2f2;

    border-color:
        #fecaca;

    color:
        #991b1b;

}


/*==============================================================
    17. DARK ALERTS
==============================================================*/

html.dark-theme .alert-info {

    background:
        rgba(37, 99, 235, 0.12);

    border-color:
        rgba(96, 165, 250, 0.25);

    color:
        #93c5fd;

}


html.dark-theme .alert-success {

    background:
        rgba(22, 163, 74, 0.12);

    border-color:
        rgba(74, 222, 128, 0.25);

    color:
        #86efac;

}


html.dark-theme .alert-warning {

    background:
        rgba(245, 158, 11, 0.12);

    border-color:
        rgba(251, 191, 36, 0.25);

    color:
        #fcd34d;

}


html.dark-theme .alert-danger {

    background:
        rgba(220, 38, 38, 0.12);

    border-color:
        rgba(248, 113, 113, 0.25);

    color:
        #fca5a5;

}


/*==============================================================
    18. BADGE
==============================================================*/

.badge {

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    min-height:
        26px;

    padding:
        4px 9px;

    border-radius:
        999px;

    background:
        var(--primary-soft);

    color:
        var(--primary-light);

    font-size:
        0.7rem;

    font-weight:
        600;

    line-height:
        1;

    white-space:
        nowrap;

}


/*==============================================================
    19. SUCCESS BADGE
==============================================================*/

.badge-success {

    background:
        #dcfce7;

    color:
        #166534;

}


/*==============================================================
    20. WARNING BADGE
==============================================================*/

.badge-warning {

    background:
        #fef3c7;

    color:
        #92400e;

}


/*==============================================================
    21. DANGER BADGE
==============================================================*/

.badge-danger {

    background:
        #fee2e2;

    color:
        #991b1b;

}


/*==============================================================
    22. INFO BADGE
==============================================================*/

.badge-info {

    background:
        #dbeafe;

    color:
        #1e40af;

}


/*==============================================================
    23. DARK BADGES
==============================================================*/

html.dark-theme .badge-success {

    background:
        rgba(34, 197, 94, 0.14);

    color:
        #86efac;

}


html.dark-theme .badge-warning {

    background:
        rgba(245, 158, 11, 0.14);

    color:
        #fcd34d;

}


html.dark-theme .badge-danger {

    background:
        rgba(239, 68, 68, 0.14);

    color:
        #fca5a5;

}


html.dark-theme .badge-info {

    background:
        rgba(59, 130, 246, 0.14);

    color:
        #93c5fd;

}


/*==============================================================
    24. DIVIDER
==============================================================*/

.divider {

    width:
        100%;

    height:
        1px;

    margin:
        24px 0;

    background:
        var(--border);

}


/*==============================================================
    25. FLEX UTILITIES
==============================================================*/

.flex {

    display:
        flex;

}


.flex-column {

    display:
        flex;

    flex-direction:
        column;

}


.align-center {

    align-items:
        center;

}


.justify-center {

    justify-content:
        center;

}


.justify-between {

    justify-content:
        space-between;

}


.gap-sm {

    gap:
        8px;

}


.gap-md {

    gap:
        16px;

}


.gap-lg {

    gap:
        24px;

}


/*==============================================================
    26. TEXT UTILITIES
==============================================================*/

.text-center {

    text-align:
        center;

}


.text-left {

    text-align:
        left;

}


.text-right {

    text-align:
        right;

}


.text-muted {

    color:
        var(--text-muted);

}


.text-primary {

    color:
        var(--primary-light);

}


.text-success {

    color:
        var(--success);

}


.text-warning {

    color:
        var(--warning);

}


.text-danger {

    color:
        var(--danger);

}


/*==============================================================
    27. VISIBILITY UTILITIES
==============================================================*/

.hidden {

    display:
        none !important;

}


.invisible {

    visibility:
        hidden;

}


/*==============================================================
    28. WIDTH UTILITIES
==============================================================*/

.w-full {

    width:
        100%;

}


.max-width-sm {

    max-width:
        420px;

}


.max-width-md {

    max-width:
        700px;

}


.max-width-lg {

    max-width:
        1000px;

}


/*==============================================================
    29. SPACING UTILITIES
==============================================================*/

.mt-sm {

    margin-top:
        8px;

}


.mt-md {

    margin-top:
        16px;

}


.mt-lg {

    margin-top:
        24px;

}


.mb-sm {

    margin-bottom:
        8px;

}


.mb-md {

    margin-bottom:
        16px;

}


.mb-lg {

    margin-bottom:
        24px;

}


/*==============================================================
    30. EMPTY STATE
==============================================================*/

.empty-state {

    display:
        flex;

    flex-direction:
        column;

    align-items:
        center;

    justify-content:
        center;

    min-height:
        180px;

    padding:
        30px;

    border:
        1px dashed var(--border);

    border-radius:
        var(--radius-lg);

    background:
        var(--surface-soft);

    text-align:
        center;

}


.empty-state h3 {

    margin-bottom:
        7px;

    font-size:
        1rem;

}


.empty-state p {

    max-width:
        450px;

    color:
        var(--text-muted);

    font-size:
        0.82rem;

}


/*==============================================================
    31. LOADING STATE
==============================================================*/

.loading-state {

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        10px;

    min-height:
        120px;

    color:
        var(--text-muted);

    font-size:
        0.84rem;

}


/*==============================================================
    32. SMALL LOADING SPINNER
==============================================================*/

.loading-spinner {

    width:
        20px;

    height:
        20px;

    border:
        2px solid var(--border);

    border-top-color:
        var(--primary-light);

    border-radius:
        50%;

    animation:
        portalSpin 0.8s linear infinite;

}


/*==============================================================
    33. DATA TABLE BASE
==============================================================*/

.table-wrapper {

    width:
        100%;

    overflow-x:
        auto;

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

    border-radius:
        var(--radius-lg);

    background:
        var(--surface);

}


.table-wrapper table {

    width:
        100%;

    border-collapse:
        collapse;

    min-width:
        650px;

}


.table-wrapper th {

    padding:
        13px 16px;

    background:
        var(--surface-soft);

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

    color:
        var(--text-secondary);

    font-size:
        0.76rem;

    font-weight:
        700;

    text-align:
        left;

    white-space:
        nowrap;

}


.table-wrapper td {

    padding:
        13px 16px;

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

    color:
        var(--text-secondary);

    font-size:
        0.8rem;

}


.table-wrapper tbody tr:last-child td {

    border-bottom:
        0;

}


.table-wrapper tbody tr:hover {

    background:
        var(--surface-soft);

}


/*==============================================================
    34. DARK TABLE
==============================================================*/

html.dark-theme .table-wrapper {

    border-color:
        var(--border);

}


html.dark-theme .table-wrapper th {

    background:
        var(--surface-soft);

}


html.dark-theme .table-wrapper tbody tr:hover {

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

}


/*==============================================================
    35. MOBILE FORM ROW
==============================================================*/

@media (max-width: 700px) {

    .form-row {

        grid-template-columns:
            1fr;

        gap:
            0;

    }

}


/*==============================================================
    36. MOBILE FORM
==============================================================*/

@media (max-width: 480px) {

    .form-group {

        margin-bottom:
            15px;

    }


    .form-group input,
    .form-group textarea,
    .form-group select {

        font-size:
            0.86rem;

    }


    .alert {

        padding:
            11px 13px;

        font-size:
            0.78rem;

    }

}


/*==============================================================
    END OF PART 3
==============================================================*/
















/*==============================================================
    STYLE.CSS
    Student Performance Analytics Portal

    GLOBAL FOUNDATION
    Part 4 — Global Cards, Page Headers,
             Sections & Content Layouts
==============================================================*/


/*==============================================================
    01. GLOBAL PAGE WRAPPER
==============================================================*/

.page-container {

    width:
        min(calc(100% - 48px),
            var(--container));

    margin:
        0 auto;

    padding:
        48px 0 70px;

}


/*==============================================================
    02. PAGE HEADER
==============================================================*/

.page-header {

    width:
        min(100%,
            900px);

    margin:
        0 auto 42px;

    text-align:
        center;

}


/*==============================================================
    03. PAGE HEADER TITLE
==============================================================*/

.page-header h1 {

    margin:
        0;

    color:
        var(--text);

    font-size:
        clamp(2rem, 4vw, 3rem);

    font-weight:
        700;

    line-height:
        1.15;

    letter-spacing:
        -0.035em;

}


/*==============================================================
    04. PAGE HEADER DESCRIPTION
==============================================================*/

.page-header p {

    max-width:
        700px;

    margin:
        14px auto 0;

    color:
        var(--text-muted);

    font-size:
        0.92rem;

    line-height:
        1.75;

}


/*==============================================================
    05. CONTENT SECTION
==============================================================*/

.content-section {

    width:
        min(calc(100% - 48px),
            var(--container));

    margin:
        0 auto 50px;

}


/*==============================================================
    06. SECTION HEADER
==============================================================*/

.section-header {

    display:
        flex;

    align-items:
        flex-end;

    justify-content:
        space-between;

    gap:
        20px;

    margin-bottom:
        22px;

}


/*==============================================================
    07. SECTION HEADER TEXT
==============================================================*/

.section-header-content {

    min-width:
        0;

}


.section-header h2 {

    margin:
        0;

    color:
        var(--text);

    font-size:
        clamp(1.3rem, 2.5vw, 1.7rem);

    font-weight:
        700;

    line-height:
        1.3;

}


.section-header p {

    margin:
        6px 0 0;

    color:
        var(--text-muted);

    font-size:
        0.82rem;

    line-height:
        1.6;

}


/*==============================================================
    08. SECTION HEADER ACTIONS
==============================================================*/

.section-actions {

    display:
        flex;

    align-items:
        center;

    gap:
        8px;

    flex-shrink:
        0;

}


/*==============================================================
    09. GLOBAL CARD
==============================================================*/

.card {

    position:
        relative;

    overflow:
        hidden;

    padding:
        24px;

    background:
        var(--surface);

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

    border-radius:
        var(--radius-lg);

    box-shadow:
        var(--shadow-sm);

    color:
        var(--text);

    transition:
        background-color var(--transition),
        border-color var(--transition),
        box-shadow var(--transition),
        transform var(--transition);

}


/*==============================================================
    10. CARD HOVER
==============================================================*/

.card:hover {

    border-color:
        #d8def0;

    box-shadow:
        var(--shadow-md);

}


html.dark-theme .card:hover {

    border-color:
        #334155;

}


/*==============================================================
    11. CARD HEADER
==============================================================*/

.card-header {

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        16px;

    margin-bottom:
        18px;

}


/*==============================================================
    12. CARD HEADER TITLE
==============================================================*/

.card-header h3 {

    margin:
        0;

    color:
        var(--text);

    font-size:
        1rem;

    font-weight:
        700;

    line-height:
        1.4;

}


/*==============================================================
    13. CARD HEADER DESCRIPTION
==============================================================*/

.card-header p {

    margin:
        4px 0 0;

    color:
        var(--text-muted);

    font-size:
        0.76rem;

}


/*==============================================================
    14. CARD BODY
==============================================================*/

.card-body {

    width:
        100%;

}


/*==============================================================
    15. CARD FOOTER
==============================================================*/

.card-footer {

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        16px;

    margin-top:
        20px;

    padding-top:
        16px;

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

}


/*==============================================================
    16. CARD ICON
==============================================================*/

.card-icon {

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    width:
        46px;

    height:
        46px;

    flex-shrink:
        0;

    border-radius:
        12px;

    background:
        var(--primary-soft);

    color:
        var(--primary-light);

    font-size:
        1.25rem;

}


/*==============================================================
    17. CARD ICON — SUCCESS
==============================================================*/

.card-icon.success {

    background:
        #dcfce7;

    color:
        #15803d;

}


/*==============================================================
    18. CARD ICON — WARNING
==============================================================*/

.card-icon.warning {

    background:
        #fef3c7;

    color:
        #b45309;

}


/*==============================================================
    19. CARD ICON — DANGER
==============================================================*/

.card-icon.danger {

    background:
        #fee2e2;

    color:
        #b91c1c;

}


/*==============================================================
    20. CARD ICON — INFO
==============================================================*/

.card-icon.info {

    background:
        #dbeafe;

    color:
        #1d4ed8;

}


/*==============================================================
    21. DARK CARD ICONS
==============================================================*/

html.dark-theme .card-icon.success {

    background:
        rgba(34, 197, 94, 0.13);

    color:
        #86efac;

}


html.dark-theme .card-icon.warning {

    background:
        rgba(245, 158, 11, 0.13);

    color:
        #fcd34d;

}


html.dark-theme .card-icon.danger {

    background:
        rgba(239, 68, 68, 0.13);

    color:
        #fca5a5;

}


html.dark-theme .card-icon.info {

    background:
        rgba(59, 130, 246, 0.13);

    color:
        #93c5fd;

}


/*==============================================================
    22. CARD GRID
==============================================================*/

.card-grid {

    display:
        grid;

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

    gap:
        20px;

}


/*==============================================================
    23. TWO COLUMN GRID
==============================================================*/

.two-column {

    display:
        grid;

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

    gap:
        20px;

}


/*==============================================================
    24. FOUR COLUMN GRID
==============================================================*/

.four-column {

    display:
        grid;

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

    gap:
        20px;

}


/*==============================================================
    25. AUTO CARD GRID
==============================================================*/

.auto-grid {

    display:
        grid;

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

    gap:
        20px;

}


/*==============================================================
    26. STAT CARD
==============================================================*/

.stat-card {

    display:
        flex;

    flex-direction:
        column;

    justify-content:
        space-between;

    min-height:
        150px;

}


/*==============================================================
    27. STAT CARD TOP
==============================================================*/

.stat-card-top {

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        16px;

}


/*==============================================================
    28. STAT LABEL
==============================================================*/

.stat-label {

    color:
        var(--text-muted);

    font-size:
        0.76rem;

    font-weight:
        600;

}


/*==============================================================
    29. STAT VALUE
==============================================================*/

.stat-value {

    margin-top:
        8px;

    color:
        var(--text);

    font-size:
        clamp(1.7rem,
            4vw,
            2.25rem);

    font-weight:
        700;

    line-height:
        1.1;

    letter-spacing:
        -0.03em;

}


/*==============================================================
    30. STAT FOOTER
==============================================================*/

.stat-footer {

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        12px;

    margin-top:
        18px;

}


/*==============================================================
    31. CONTENT PANEL
==============================================================*/

.content-panel {

    padding:
        28px;

    background:
        var(--surface);

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

    border-radius:
        var(--radius-lg);

    box-shadow:
        var(--shadow-sm);

}


/*==============================================================
    32. FEATURE GRID
==============================================================*/

.feature-grid {

    display:
        grid;

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

    gap:
        20px;

}


/*==============================================================
    33. FEATURE CARD
==============================================================*/

.feature-card {

    padding:
        26px;

    text-align:
        left;

}


.feature-card h3 {

    margin:
        16px 0 8px;

    color:
        var(--text);

    font-size:
        1rem;

    font-weight:
        700;

}


.feature-card p {

    color:
        var(--text-muted);

    font-size:
        0.82rem;

    line-height:
        1.7;

}


/*==============================================================
    34. HORIZONTAL CONTENT
==============================================================*/

.content-row {

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        24px;

}


/*==============================================================
    35. CONTENT ROW TEXT
==============================================================*/

.content-row-text {

    min-width:
        0;

    flex:
        1;

}


/*==============================================================
    36. CONTENT ROW ACTIONS
==============================================================*/

.content-row-actions {

    display:
        flex;

    align-items:
        center;

    gap:
        8px;

    flex-shrink:
        0;

}


/*==============================================================
    37. EMPTY CONTENT SPACE
==============================================================*/

.content-placeholder {

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    min-height:
        220px;

    padding:
        30px;

    border:
        1px dashed var(--border);

    border-radius:
        var(--radius-lg);

    background:
        var(--surface-soft);

    text-align:
        center;

}


/*==============================================================
    38. CONTENT PLACEHOLDER TEXT
==============================================================*/

.content-placeholder p {

    max-width:
        500px;

    color:
        var(--text-muted);

    font-size:
        0.82rem;

}


/*==============================================================
    39. HIGHLIGHT PANEL
==============================================================*/

.highlight-panel {

    position:
        relative;

    overflow:
        hidden;

    padding:
        28px;

    border:
        1px solid rgba(99,
            102,
            241,
            0.18);

    border-radius:
        var(--radius-lg);

    background:
        linear-gradient(135deg,
            var(--primary-soft),
            var(--surface));

}


/*==============================================================
    40. HIGHLIGHT PANEL ACCENT
==============================================================*/

.highlight-panel::before {

    content:
        "";

    position:
        absolute;

    top:
        0;

    left:
        0;

    width:
        4px;

    height:
        100%;

    background:
        linear-gradient(180deg,
            var(--primary),
            var(--primary-light));

}


/*==============================================================
    41. CONTENT LIST
==============================================================*/

.content-list {

    display:
        flex;

    flex-direction:
        column;

    gap:
        0;

}


/*==============================================================
    42. CONTENT LIST ITEM
==============================================================*/

.content-list>li {

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        16px;

    padding:
        14px 0;

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

}


.content-list>li:last-child {

    border-bottom:
        0;

}


/*==============================================================
    43. LIST ITEM TEXT
==============================================================*/

.list-item-content {

    min-width:
        0;

    flex:
        1;

}


.list-item-content h4 {

    margin:
        0;

    color:
        var(--text);

    font-size:
        0.84rem;

    font-weight:
        600;

}


.list-item-content p {

    margin:
        3px 0 0;

    color:
        var(--text-muted);

    font-size:
        0.74rem;

}


/*==============================================================
    44. RESPONSIVE — LARGE TABLET
==============================================================*/

@media (max-width: 1000px) {

    .four-column {

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

    }


    .card-grid,
    .feature-grid {

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

    }

}


/*==============================================================
    45. RESPONSIVE — TABLET
==============================================================*/

@media (max-width: 800px) {

    .page-container {

        width:
            min(calc(100% - 32px),
                var(--container));

        padding-top:
            38px;

    }


    .content-section {

        width:
            min(calc(100% - 32px),
                var(--container));

    }


    .section-header {

        align-items:
            flex-start;

        flex-direction:
            column;

    }


    .section-actions {

        width:
            100%;

    }


    .content-row {

        align-items:
            flex-start;

        flex-direction:
            column;

    }


    .content-row-actions {

        width:
            100%;

    }

}


/*==============================================================
    46. RESPONSIVE — MOBILE
==============================================================*/

@media (max-width: 600px) {

    .page-container {

        width:
            calc(100% - 24px);

        padding:
            32px 0 50px;

    }


    .content-section {

        width:
            calc(100% - 24px);

        margin-bottom:
            38px;

    }


    .page-header {

        margin-bottom:
            32px;

    }


    .page-header h1 {

        font-size:
            1.85rem;

    }


    .page-header p {

        font-size:
            0.82rem;

    }


    .card {

        padding:
            20px;

        border-radius:
            15px;

    }


    .content-panel {

        padding:
            22px 18px;

    }


    .card-grid,
    .two-column,
    .four-column,
    .feature-grid {

        grid-template-columns:
            1fr;

    }


    .auto-grid {

        grid-template-columns:
            1fr;

    }


    .section-header h2 {

        font-size:
            1.3rem;

    }


    .section-actions {

        flex-wrap:
            wrap;

    }

}


/*==============================================================
    47. RESPONSIVE — SMALL MOBILE
==============================================================*/

@media (max-width: 420px) {

    .page-header h1 {

        font-size:
            1.65rem;

    }


    .stat-value {

        font-size:
            1.65rem;

    }


    .card {

        padding:
            18px;

    }


    .feature-card {

        padding:
            20px;

    }


    .highlight-panel {

        padding:
            22px 20px;

    }

}


/*==============================================================
    END OF PART 4
==============================================================*/
























/*==============================================================
    STYLE.CSS
    Student Performance Analytics Portal

    GLOBAL FOUNDATION
    Part 5 — Navigation States, Notifications,
             Overlays, Modals & Accessibility
==============================================================*/


/*==============================================================
    01. SKIP LINK
==============================================================*/

.skip-link {

    position:
        fixed;

    top:
        12px;

    left:
        12px;

    z-index:
        100000;

    padding:
        10px 16px;

    border-radius:
        9px;

    background:
        var(--primary);

    color:
        #ffffff;

    font-size:
        0.82rem;

    font-weight:
        600;

    transform:
        translateY(-150%);

    transition:
        transform var(--transition);

}


.skip-link:focus {

    transform:
        translateY(0);

    outline:
        3px solid rgba(99,
            102,
            241,
            0.35);

    outline-offset:
        2px;

}


/*==============================================================
    02. NAVIGATION FOCUS
==============================================================*/

.nav-links a:focus-visible,
.nav-links button:focus-visible,
.menu-btn:focus-visible {

    outline:
        2px solid rgba(255,
            255,
            255,
            0.85);

    outline-offset:
        2px;

}


/*==============================================================
    03. NOTIFICATION PANEL
==============================================================*/

.notification-panel {

    position:
        fixed;

    top:
        76px;

    right:
        24px;

    z-index:
        1500;

    width:
        min(390px,
            calc(100vw - 32px));

    max-height:
        min(620px,
            calc(100vh - 100px));

    overflow:
        hidden;

    display:
        flex;

    flex-direction:
        column;

    background:
        var(--surface);

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

    border-radius:
        16px;

    box-shadow:
        0 20px 50px rgba(15,
            23,
            42,
            0.20);

    opacity:
        0;

    visibility:
        hidden;

    transform:
        translateY(-10px) scale(0.98);

    transform-origin:
        top right;

    transition:
        opacity 180ms ease,
        visibility 180ms ease,
        transform 180ms ease;

}


/*==============================================================
    04. NOTIFICATION PANEL OPEN
==============================================================*/

.notification-panel.active,
.notification-panel[aria-hidden="false"] {

    opacity:
        1;

    visibility:
        visible;

    transform:
        translateY(0) scale(1);

}


/*==============================================================
    05. NOTIFICATION HEADER
==============================================================*/

.notification-header {

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        14px;

    padding:
        17px 18px;

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

}


.notification-header h3 {

    margin:
        0;

    color:
        var(--text);

    font-size:
        0.98rem;

    font-weight:
        700;

}


/*==============================================================
    06. NOTIFICATION CLOSE BUTTON
==============================================================*/

#closeNotifications {

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    width:
        34px;

    height:
        34px;

    flex-shrink:
        0;

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

    border-radius:
        8px;

    background:
        var(--surface-soft);

    color:
        var(--text-muted);

    cursor:
        pointer;

    transition:
        background-color var(--transition),
        color var(--transition),
        border-color var(--transition);

}


#closeNotifications:hover {

    background:
        var(--danger);

    border-color:
        var(--danger);

    color:
        #ffffff;

}


/*==============================================================
    07. NOTIFICATION SEARCH
==============================================================*/

.notification-search {

    width:
        calc(100% - 28px);

    margin:
        14px;

    min-height:
        40px;

    padding:
        9px 12px;

    font-size:
        0.8rem;

}


/*==============================================================
    08. NOTIFICATION LIST
==============================================================*/

#notificationList {

    min-height:
        80px;

    max-height:
        440px;

    overflow-y:
        auto;

    padding:
        4px 8px 10px;

}


/*==============================================================
    09. NOTIFICATION ITEM
==============================================================*/

.notification-item {

    display:
        flex;

    align-items:
        flex-start;

    gap:
        12px;

    padding:
        13px 10px;

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

    transition:
        background-color var(--transition);

}


.notification-item:last-child {

    border-bottom:
        0;

}


.notification-item:hover {

    background:
        var(--surface-soft);

}


/*==============================================================
    10. NOTIFICATION ICON
==============================================================*/

.notification-icon {

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    width:
        34px;

    height:
        34px;

    flex-shrink:
        0;

    border-radius:
        9px;

    background:
        var(--primary-soft);

    color:
        var(--primary-light);

    font-size:
        0.85rem;

}


/*==============================================================
    11. NOTIFICATION CONTENT
==============================================================*/

.notification-content {

    min-width:
        0;

    flex:
        1;

}


.notification-content h4 {

    margin:
        0 0 3px;

    color:
        var(--text);

    font-size:
        0.79rem;

    font-weight:
        600;

}


.notification-content p {

    margin:
        0;

    color:
        var(--text-muted);

    font-size:
        0.73rem;

    line-height:
        1.55;

}


/*==============================================================
    12. NOTIFICATION TIME
==============================================================*/

.notification-time {

    display:
        block;

    margin-top:
        5px;

    color:
        var(--text-light);

    font-size:
        0.67rem;

}


/*==============================================================
    13. UNREAD NOTIFICATION
==============================================================*/

.notification-item.unread {

    background:
        rgba(99,
            102,
            241,
            0.045);

}


.notification-item.unread::before {

    content:
        "";

    width:
        6px;

    height:
        6px;

    flex-shrink:
        0;

    margin-top:
        6px;

    border-radius:
        50%;

    background:
        var(--primary-light);

}


/*==============================================================
    14. NOTIFICATION EMPTY STATE
==============================================================*/

.notification-empty {

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    min-height:
        130px;

    padding:
        20px;

    color:
        var(--text-muted);

    font-size:
        0.78rem;

    text-align:
        center;

}


/*==============================================================
    15. NOTIFICATION SCROLLBAR
==============================================================*/

#notificationList::-webkit-scrollbar {

    width:
        6px;

}


#notificationList::-webkit-scrollbar-track {

    background:
        transparent;

}


#notificationList::-webkit-scrollbar-thumb {

    border-radius:
        10px;

    background:
        var(--border);

}


/*==============================================================
    16. MODAL OVERLAY
==============================================================*/

.modal-overlay {

    position:
        fixed;

    inset:
        0;

    z-index:
        5000;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    padding:
        24px;

    background:
        rgba(15,
            23,
            42,
            0.58);

    backdrop-filter:
        blur(5px);

    opacity:
        0;

    visibility:
        hidden;

    transition:
        opacity 180ms ease,
        visibility 180ms ease;

}


/*==============================================================
    17. MODAL OVERLAY ACTIVE
==============================================================*/

.modal-overlay.active {

    opacity:
        1;

    visibility:
        visible;

}


/*==============================================================
    18. MODAL
==============================================================*/

.modal {

    width:
        min(560px,
            100%);

    max-height:
        calc(100vh - 48px);

    overflow-y:
        auto;

    padding:
        26px;

    background:
        var(--surface);

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

    border-radius:
        18px;

    box-shadow:
        0 25px 70px rgba(15,
            23,
            42,
            0.28);

    transform:
        translateY(12px) scale(0.98);

    transition:
        transform 180ms ease;

}


.modal-overlay.active .modal {

    transform:
        translateY(0) scale(1);

}


/*==============================================================
    19. MODAL HEADER
==============================================================*/

.modal-header {

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        16px;

    margin-bottom:
        20px;

}


.modal-header h2 {

    margin:
        0;

    color:
        var(--text);

    font-size:
        1.2rem;

    font-weight:
        700;

}


/*==============================================================
    20. MODAL CLOSE
==============================================================*/

.modal-close {

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    width:
        36px;

    height:
        36px;

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

    border-radius:
        9px;

    background:
        var(--surface-soft);

    color:
        var(--text-muted);

    cursor:
        pointer;

}


.modal-close:hover {

    background:
        var(--danger);

    border-color:
        var(--danger);

    color:
        #ffffff;

}


/*==============================================================
    21. MODAL BODY
==============================================================*/

.modal-body {

    color:
        var(--text-secondary);

    font-size:
        0.84rem;

    line-height:
        1.7;

}


/*==============================================================
    22. MODAL FOOTER
==============================================================*/

.modal-footer {

    display:
        flex;

    align-items:
        center;

    justify-content:
        flex-end;

    gap:
        8px;

    margin-top:
        24px;

    padding-top:
        18px;

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

}


/*==============================================================
    23. TOAST CONTAINER
==============================================================*/

.toast-container {

    position:
        fixed;

    right:
        24px;

    bottom:
        24px;

    z-index:
        9000;

    display:
        flex;

    flex-direction:
        column;

    align-items:
        flex-end;

    gap:
        10px;

    width:
        min(380px,
            calc(100vw - 32px));

}


/*==============================================================
    24. TOAST
==============================================================*/

.toast {

    width:
        100%;

    padding:
        13px 16px;

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

    border-radius:
        12px;

    background:
        var(--surface);

    color:
        var(--text);

    box-shadow:
        0 12px 30px rgba(15,
            23,
            42,
            0.15);

    font-size:
        0.8rem;

    line-height:
        1.5;

}


/*==============================================================
    25. TOAST SUCCESS
==============================================================*/

.toast.success {

    border-left:
        4px solid var(--success);

}


/*==============================================================
    26. TOAST WARNING
==============================================================*/

.toast.warning {

    border-left:
        4px solid var(--warning);

}


/*==============================================================
    27. TOAST ERROR
==============================================================*/

.toast.error {

    border-left:
        4px solid var(--danger);

}


/*==============================================================
    28. TOAST INFO
==============================================================*/

.toast.info {

    border-left:
        4px solid var(--info);

}


/*==============================================================
    29. DARK NOTIFICATION PANEL
==============================================================*/

html.dark-theme .notification-panel {

    box-shadow:
        0 20px 50px rgba(0,
            0,
            0,
            0.38);

}


/*==============================================================
    30. DARK MODAL
==============================================================*/

html.dark-theme .modal {

    box-shadow:
        0 25px 70px rgba(0,
            0,
            0,
            0.45);

}


/*==============================================================
    31. REDUCED MOTION
==============================================================*/

@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {

        scroll-behavior:
            auto !important;

        transition-duration:
            0.01ms !important;

        animation-duration:
            0.01ms !important;

        animation-iteration-count:
            1 !important;

    }

}


/*==============================================================
    32. MOBILE NOTIFICATION PANEL
==============================================================*/

@media (max-width: 600px) {

    .notification-panel {

        top:
            70px;

        right:
            12px;

        width:
            calc(100vw - 24px);

        max-height:
            calc(100vh - 88px);

        border-radius:
            14px;

    }


    #notificationList {

        max-height:
            calc(100vh - 200px);

    }


    .modal-overlay {

        padding:
            12px;

    }


    .modal {

        max-height:
            calc(100vh - 24px);

        padding:
            20px;

        border-radius:
            15px;

    }


    .toast-container {

        right:
            12px;

        bottom:
            12px;

        width:
            calc(100vw - 24px);

    }

}


/*==============================================================
    33. SMALL MOBILE
==============================================================*/

@media (max-width: 420px) {

    .notification-panel {

        top:
            68px;

    }


    .notification-header {

        padding:
            14px;

    }


    .notification-search {

        width:
            calc(100% - 24px);

        margin:
            12px;

    }


    .modal-footer {

        flex-direction:
            column-reverse;

        align-items:
            stretch;

    }


    .modal-footer .btn {

        width:
            100%;

    }

}


/*==============================================================
    END OF PART 5
==============================================================*/






















/*==============================================================
    STYLE.CSS
    Student Performance Analytics Portal

    GLOBAL FOUNDATION
    Part 6 — Tables, Data Panels, Charts & Analytics
==============================================================*/


/*==============================================================
    01. DATA SECTION
==============================================================*/

.data-section {

    width:
        100%;

    margin-bottom:
        30px;

}


/*==============================================================
    02. DATA HEADER
==============================================================*/

.data-header {

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        18px;

    margin-bottom:
        18px;

}


/*==============================================================
    03. DATA HEADER TITLE
==============================================================*/

.data-header h2 {

    margin:
        0;

    color:
        var(--text);

    font-size:
        1.25rem;

    font-weight:
        700;

}


/*==============================================================
    04. DATA HEADER DESCRIPTION
==============================================================*/

.data-header p {

    margin:
        4px 0 0;

    color:
        var(--text-muted);

    font-size:
        0.78rem;

    line-height:
        1.5;

}


/*==============================================================
    05. DATA ACTIONS
==============================================================*/

.data-actions {

    display:
        flex;

    align-items:
        center;

    gap:
        8px;

    flex-shrink:
        0;

}


/*==============================================================
    06. DATA TABLE CONTAINER
==============================================================*/

.data-table-container {

    width:
        100%;

    overflow-x:
        auto;

    background:
        var(--surface);

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

    border-radius:
        var(--radius-lg);

    box-shadow:
        var(--shadow-sm);

}


/*==============================================================
    07. DATA TABLE
==============================================================*/

.data-table {

    width:
        100%;

    min-width:
        720px;

    border-collapse:
        collapse;

}


/*==============================================================
    08. TABLE HEADER
==============================================================*/

.data-table thead {

    background:
        var(--surface-soft);

}


.data-table th {

    padding:
        14px 16px;

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

    color:
        var(--text-secondary);

    font-size:
        0.72rem;

    font-weight:
        700;

    letter-spacing:
        0.02em;

    text-align:
        left;

    white-space:
        nowrap;

}


/*==============================================================
    09. TABLE BODY
==============================================================*/

.data-table td {

    padding:
        14px 16px;

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

    color:
        var(--text-secondary);

    font-size:
        0.78rem;

    line-height:
        1.5;

    vertical-align:
        middle;

}


/*==============================================================
    10. LAST TABLE ROW
==============================================================*/

.data-table tbody tr:last-child td {

    border-bottom:
        0;

}


/*==============================================================
    11. TABLE ROW HOVER
==============================================================*/

.data-table tbody tr {

    transition:
        background-color var(--transition);

}


.data-table tbody tr:hover {

    background:
        var(--surface-soft);

}


/*==============================================================
    12. TABLE PRIMARY TEXT
==============================================================*/

.table-primary {

    color:
        var(--text);

    font-weight:
        600;

}


/*==============================================================
    13. TABLE SECONDARY TEXT
==============================================================*/

.table-secondary {

    color:
        var(--text-muted);

    font-size:
        0.72rem;

}


/*==============================================================
    14. TABLE AVATAR
==============================================================*/

.table-avatar {

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    width:
        34px;

    height:
        34px;

    flex-shrink:
        0;

    border-radius:
        50%;

    background:
        var(--primary-soft);

    color:
        var(--primary-light);

    font-size:
        0.72rem;

    font-weight:
        700;

}


/*==============================================================
    15. TABLE USER
==============================================================*/

.table-user {

    display:
        flex;

    align-items:
        center;

    gap:
        10px;

}


.table-user-info {

    min-width:
        0;

}


.table-user-info strong {

    display:
        block;

    overflow:
        hidden;

    color:
        var(--text);

    font-size:
        0.78rem;

    font-weight:
        600;

    text-overflow:
        ellipsis;

    white-space:
        nowrap;

}


.table-user-info span {

    display:
        block;

    margin-top:
        2px;

    color:
        var(--text-muted);

    font-size:
        0.68rem;

}


/*==============================================================
    16. TABLE ACTIONS
==============================================================*/

.table-actions {

    display:
        flex;

    align-items:
        center;

    gap:
        6px;

}


/*==============================================================
    17. TABLE ACTION BUTTON
==============================================================*/

.table-action {

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    width:
        32px;

    height:
        32px;

    padding:
        0;

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

    border-radius:
        8px;

    background:
        var(--surface);

    color:
        var(--text-muted);

    cursor:
        pointer;

    transition:
        background-color var(--transition),
        color var(--transition),
        border-color var(--transition);

}


.table-action:hover {

    background:
        var(--primary-soft);

    border-color:
        rgba(99,
            102,
            241,
            0.25);

    color:
        var(--primary-light);

}


/*==============================================================
    18. ANALYTICS GRID
==============================================================*/

.analytics-grid {

    display:
        grid;

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

    gap:
        20px;

}


/*==============================================================
    19. ANALYTICS CARD
==============================================================*/

.analytics-card {

    position:
        relative;

    min-width:
        0;

    padding:
        22px;

    background:
        var(--surface);

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

    border-radius:
        var(--radius-lg);

    box-shadow:
        var(--shadow-sm);

}


/*==============================================================
    20. ANALYTICS CARD HEADER
==============================================================*/

.analytics-card-header {

    display:
        flex;

    align-items:
        flex-start;

    justify-content:
        space-between;

    gap:
        16px;

    margin-bottom:
        18px;

}


.analytics-card-header h3 {

    margin:
        0;

    color:
        var(--text);

    font-size:
        0.95rem;

    font-weight:
        700;

}


.analytics-card-header p {

    margin:
        4px 0 0;

    color:
        var(--text-muted);

    font-size:
        0.72rem;

}


/*==============================================================
    21. ANALYTICS CARD ACTION
==============================================================*/

.analytics-card-action {

    flex-shrink:
        0;

}


/*==============================================================
    22. CHART CONTAINER
==============================================================*/

.chart-container {

    position:
        relative;

    width:
        100%;

    height:
        300px;

    min-height:
        300px;

}


/*==============================================================
    23. CHART CONTAINER — SMALL
==============================================================*/

.chart-container.small {

    height:
        220px;

    min-height:
        220px;

}


/*==============================================================
    24. CHART CONTAINER — LARGE
==============================================================*/

.chart-container.large {

    height:
        380px;

    min-height:
        380px;

}


/*==============================================================
    25. CANVAS
==============================================================*/

.chart-container canvas {

    display:
        block;

    width:
        100% !important;

    height:
        100% !important;

}


/*==============================================================
    26. IMPORTANT CHART SAFETY
==============================================================*/

/*
    Prevents Chart.js canvases from expanding endlessly.

    The canvas must remain inside a controlled parent.
*/

canvas {

    max-width:
        100%;

}


/*==============================================================
    27. CHART LEGEND
==============================================================*/

.chart-legend {

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    flex-wrap:
        wrap;

    gap:
        12px;

    margin-top:
        14px;

}


/*==============================================================
    28. LEGEND ITEM
==============================================================*/

.legend-item {

    display:
        inline-flex;

    align-items:
        center;

    gap:
        6px;

    color:
        var(--text-muted);

    font-size:
        0.7rem;

}


/*==============================================================
    29. LEGEND DOT
==============================================================*/

.legend-dot {

    width:
        8px;

    height:
        8px;

    border-radius:
        50%;

    background:
        var(--primary-light);

}


/*==============================================================
    30. ANALYTICS SUMMARY
==============================================================*/

.analytics-summary {

    display:
        grid;

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

    gap:
        12px;

    margin-top:
        18px;

}


/*==============================================================
    31. ANALYTICS SUMMARY ITEM
==============================================================*/

.analytics-summary-item {

    padding:
        14px;

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

    border-radius:
        11px;

    background:
        var(--surface-soft);

}


/*==============================================================
    32. ANALYTICS SUMMARY LABEL
==============================================================*/

.analytics-summary-item span {

    display:
        block;

    color:
        var(--text-muted);

    font-size:
        0.68rem;

}


/*==============================================================
    33. ANALYTICS SUMMARY VALUE
==============================================================*/

.analytics-summary-item strong {

    display:
        block;

    margin-top:
        5px;

    color:
        var(--text);

    font-size:
        1rem;

    font-weight:
        700;

}


/*==============================================================
    34. PROGRESS BAR
==============================================================*/

.progress {

    width:
        100%;

    height:
        8px;

    overflow:
        hidden;

    border-radius:
        999px;

    background:
        var(--surface-soft);

}


/*==============================================================
    35. PROGRESS VALUE
==============================================================*/

.progress-bar {

    height:
        100%;

    border-radius:
        inherit;

    background:
        linear-gradient(90deg,
            var(--primary),
            var(--primary-light));

    transition:
        width 400ms ease;

}


/*==============================================================
    36. PROGRESS SUCCESS
==============================================================*/

.progress-bar.success {

    background:
        linear-gradient(90deg,
            #16a34a,
            #4ade80);

}


/*==============================================================
    37. PROGRESS WARNING
==============================================================*/

.progress-bar.warning {

    background:
        linear-gradient(90deg,
            #d97706,
            #fbbf24);

}


/*==============================================================
    38. PROGRESS DANGER
==============================================================*/

.progress-bar.danger {

    background:
        linear-gradient(90deg,
            #dc2626,
            #f87171);

}


/*==============================================================
    39. PROGRESS INFORMATION
==============================================================*/

.progress-info {

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        10px;

    margin-bottom:
        7px;

}


.progress-info span {

    color:
        var(--text-muted);

    font-size:
        0.72rem;

}


.progress-info strong {

    color:
        var(--text);

    font-size:
        0.72rem;

}


/*==============================================================
    40. METRIC ROW
==============================================================*/

.metric-row {

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        16px;

    padding:
        13px 0;

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

}


.metric-row:last-child {

    border-bottom:
        0;

}


.metric-name {

    color:
        var(--text-secondary);

    font-size:
        0.78rem;

}


.metric-value {

    color:
        var(--text);

    font-size:
        0.82rem;

    font-weight:
        700;

}


/*==============================================================
    41. TREND VALUE
==============================================================*/

.trend {

    display:
        inline-flex;

    align-items:
        center;

    gap:
        4px;

    font-size:
        0.7rem;

    font-weight:
        600;

}


.trend-up {

    color:
        var(--success);

}


.trend-down {

    color:
        var(--danger);

}


.trend-neutral {

    color:
        var(--text-muted);

}


/*==============================================================
    42. REPORT CARD
==============================================================*/

.report-card {

    display:
        flex;

    flex-direction:
        column;

    min-height:
        180px;

}


.report-card-header {

    display:
        flex;

    align-items:
        flex-start;

    justify-content:
        space-between;

    gap:
        14px;

}


.report-card h3 {

    margin:
        0;

    color:
        var(--text);

    font-size:
        0.95rem;

}


.report-card p {

    margin:
        6px 0 0;

    color:
        var(--text-muted);

    font-size:
        0.75rem;

    line-height:
        1.6;

}


.report-card-footer {

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        12px;

    margin-top:
        auto;

    padding-top:
        18px;

}


/*==============================================================
    43. ASSIGNMENT ITEM
==============================================================*/

.assignment-item {

    display:
        flex;

    align-items:
        center;

    gap:
        12px;

    padding:
        13px 0;

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

}


.assignment-item:last-child {

    border-bottom:
        0;

}


/*==============================================================
    44. ASSIGNMENT ICON
==============================================================*/

.assignment-icon {

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    width:
        38px;

    height:
        38px;

    flex-shrink:
        0;

    border-radius:
        10px;

    background:
        var(--primary-soft);

    color:
        var(--primary-light);

}


/*==============================================================
    45. ASSIGNMENT CONTENT
==============================================================*/

.assignment-content {

    min-width:
        0;

    flex:
        1;

}


.assignment-content h4 {

    margin:
        0;

    overflow:
        hidden;

    color:
        var(--text);

    font-size:
        0.78rem;

    font-weight:
        600;

    text-overflow:
        ellipsis;

    white-space:
        nowrap;

}


.assignment-content p {

    margin:
        3px 0 0;

    color:
        var(--text-muted);

    font-size:
        0.68rem;

}


/*==============================================================
    46. ASSIGNMENT STATUS
==============================================================*/

.assignment-status {

    flex-shrink:
        0;

}


/*==============================================================
    47. RESPONSIVE ANALYTICS
==============================================================*/

@media (max-width: 900px) {

    .analytics-grid {

        grid-template-columns:
            1fr;

    }


    .chart-container.large {

        height:
            330px;

        min-height:
            330px;

    }

}


/*==============================================================
    48. RESPONSIVE TABLE HEADER
==============================================================*/

@media (max-width: 700px) {

    .data-header {

        align-items:
            flex-start;

        flex-direction:
            column;

    }


    .data-actions {

        width:
            100%;

        flex-wrap:
            wrap;

    }


    .analytics-summary {

        grid-template-columns:
            1fr;

    }


    .chart-container {

        height:
            260px;

        min-height:
            260px;

    }

}


/*==============================================================
    49. MOBILE ANALYTICS
==============================================================*/

@media (max-width: 600px) {

    .analytics-card {

        padding:
            18px;

    }


    .chart-container {

        height:
            240px;

        min-height:
            240px;

    }


    .chart-container.small {

        height:
            200px;

        min-height:
            200px;

    }


    .chart-container.large {

        height:
            280px;

        min-height:
            280px;

    }

}


/*==============================================================
    50. SMALL MOBILE TABLE
==============================================================*/

@media (max-width: 480px) {

    .data-table th,
    .data-table td {

        padding:
            11px 12px;

    }


    .analytics-card-header {

        flex-direction:
            column;

    }


    .assignment-item {

        align-items:
            flex-start;

    }


    .assignment-status {

        align-self:
            center;

    }

}


/*==============================================================
    END OF PART 6
==============================================================*/





















/*==============================================================
    STYLE.CSS
    Student Performance Analytics Portal

    GLOBAL FOUNDATION
    Part 7 — Authentication + Profile Components
==============================================================*/


/*==============================================================
    01. AUTHENTICATION PAGE
==============================================================*/

.auth-page {

    min-height:
        calc(100vh - 70px);

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    padding:
        50px 24px;

}


/*==============================================================
    02. AUTHENTICATION CONTAINER
==============================================================*/

.auth-container {

    width:
        min(100%,
            460px);

    margin:
        0 auto;

}


/*==============================================================
    03. AUTH CARD
==============================================================*/

.auth-card {

    width:
        100%;

    padding:
        34px;

    background:
        var(--surface);

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

    border-radius:
        20px;

    box-shadow:
        var(--shadow-md);

}


/*==============================================================
    04. AUTH HEADER
==============================================================*/

.auth-header {

    margin-bottom:
        28px;

    text-align:
        center;

}


.auth-header h1 {

    margin:
        0;

    color:
        var(--text);

    font-size:
        clamp(1.55rem,
            4vw,
            2rem);

    font-weight:
        700;

    line-height:
        1.25;

}


.auth-header p {

    max-width:
        380px;

    margin:
        9px auto 0;

    color:
        var(--text-muted);

    font-size:
        0.8rem;

    line-height:
        1.65;

}


/*==============================================================
    05. AUTH BRAND
==============================================================*/

.auth-brand {

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        10px;

    margin-bottom:
        20px;

}


.auth-brand-icon {

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    width:
        42px;

    height:
        42px;

    border-radius:
        11px;

    background:
        var(--primary);

    color:
        #ffffff;

    font-size:
        1.1rem;

}


/*==============================================================
    06. AUTH FORM
==============================================================*/

.auth-form {

    display:
        flex;

    flex-direction:
        column;

    gap:
        17px;

}


/*==============================================================
    07. AUTH FIELD
==============================================================*/

.auth-field {

    display:
        flex;

    flex-direction:
        column;

    gap:
        7px;

}


.auth-field label {

    color:
        var(--text-secondary);

    font-size:
        0.76rem;

    font-weight:
        600;

}


/*==============================================================
    08. AUTH FIELD WRAPPER
==============================================================*/

.auth-input-wrapper {

    position:
        relative;

    width:
        100%;

}


.auth-input-wrapper input {

    width:
        100%;

}


/*==============================================================
    09. PASSWORD TOGGLE
==============================================================*/

.password-toggle {

    position:
        absolute;

    top:
        50%;

    right:
        10px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    width:
        34px;

    height:
        34px;

    padding:
        0;

    border:
        0;

    border-radius:
        8px;

    background:
        transparent;

    color:
        var(--text-muted);

    cursor:
        pointer;

    transform:
        translateY(-50%);

    transition:
        background-color var(--transition),
        color var(--transition);

}


.password-toggle:hover {

    background:
        var(--surface-soft);

    color:
        var(--text);

}


/*==============================================================
    10. AUTH OPTIONS
==============================================================*/

.auth-options {

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        12px;

    margin-top:
        -2px;

}


/*==============================================================
    11. REMEMBER ME
==============================================================*/

.remember-me {

    display:
        inline-flex;

    align-items:
        center;

    gap:
        7px;

    color:
        var(--text-muted);

    font-size:
        0.72rem;

    cursor:
        pointer;

}


.remember-me input {

    width:
        15px;

    height:
        15px;

    margin:
        0;

    accent-color:
        var(--primary);

}


/*==============================================================
    12. AUTH LINK
==============================================================*/

.auth-link {

    color:
        var(--primary-light);

    font-size:
        0.73rem;

    font-weight:
        600;

    text-decoration:
        none;

}


.auth-link:hover {

    color:
        var(--primary);

    text-decoration:
        underline;

}


/*==============================================================
    13. AUTH SUBMIT
==============================================================*/

.auth-submit {

    width:
        100%;

    margin-top:
        4px;

}


/*==============================================================
    14. AUTH DIVIDER
==============================================================*/

.auth-divider {

    display:
        flex;

    align-items:
        center;

    gap:
        12px;

    margin:
        22px 0;

    color:
        var(--text-light);

    font-size:
        0.68rem;

}


.auth-divider::before,
.auth-divider::after {

    content:
        "";

    flex:
        1;

    height:
        1px;

    background:
        var(--border);

}


/*==============================================================
    15. AUTH FOOTER
==============================================================*/

.auth-footer {

    margin-top:
        22px;

    padding-top:
        18px;

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

    color:
        var(--text-muted);

    font-size:
        0.73rem;

    text-align:
        center;

}


.auth-footer p {

    margin:
        0;

}


.auth-footer .auth-link {

    margin-left:
        4px;

}


/*==============================================================
    16. AUTH SECURITY NOTE
==============================================================*/

.auth-security-note {

    display:
        flex;

    align-items:
        flex-start;

    gap:
        9px;

    margin-top:
        18px;

    padding:
        12px;

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

    border-radius:
        10px;

    background:
        var(--surface-soft);

    color:
        var(--text-muted);

    font-size:
        0.68rem;

    line-height:
        1.55;

}


/*==============================================================
    17. AUTH ERROR STATE
==============================================================*/

.auth-field.error input,
.auth-field.error select {

    border-color:
        var(--danger);

}


.auth-field.error input:focus,
.auth-field.error select:focus {

    box-shadow:
        0 0 0 3px rgba(239,
            68,
            68,
            0.12);

}


.auth-field-error {

    color:
        var(--danger);

    font-size:
        0.68rem;

}


/*==============================================================
    18. AUTH SUCCESS STATE
==============================================================*/

.auth-field.success input,
.auth-field.success select {

    border-color:
        var(--success);

}


/*==============================================================
    19. AUTH LOADING
==============================================================*/

.auth-submit.loading {

    position:
        relative;

    pointer-events:
        none;

    opacity:
        0.75;

}


.auth-submit.loading::after {

    content:
        "";

    display:
        inline-block;

    width:
        14px;

    height:
        14px;

    margin-left:
        8px;

    vertical-align:
        -2px;

    border:
        2px solid rgba(255,
            255,
            255,
            0.45);

    border-top-color:
        #ffffff;

    border-radius:
        50%;

    animation:
        authSpinner 650ms linear infinite;

}


@keyframes authSpinner {

    to {

        transform:
            rotate(360deg);

    }

}


/*==============================================================
    20. AUTH PAGE SPLIT LAYOUT
==============================================================*/

.auth-layout {

    display:
        grid;

    grid-template-columns:
        minmax(0, 1fr) minmax(380px, 460px);

    align-items:
        stretch;

    width:
        min(1100px,
            100%);

    margin:
        0 auto;

    overflow:
        hidden;

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

    border-radius:
        22px;

    background:
        var(--surface);

    box-shadow:
        var(--shadow-md);

}


/*==============================================================
    21. AUTH INFORMATION PANEL
==============================================================*/

.auth-info {

    display:
        flex;

    flex-direction:
        column;

    justify-content:
        center;

    padding:
        50px;

    background:
        linear-gradient(145deg,
            var(--primary),
            #4338ca);

    color:
        #ffffff;

}


.auth-info h2 {

    margin:
        0 0 14px;

    font-size:
        clamp(1.7rem,
            4vw,
            2.5rem);

    line-height:
        1.2;

}


.auth-info p {

    max-width:
        500px;

    margin:
        0;

    color:
        rgba(255,
            255,
            255,
            0.82);

    font-size:
        0.84rem;

    line-height:
        1.75;

}


/*==============================================================
    22. AUTH FEATURE LIST
==============================================================*/

.auth-feature-list {

    display:
        flex;

    flex-direction:
        column;

    gap:
        12px;

    margin:
        28px 0 0;

    padding:
        0;

    list-style:
        none;

}


.auth-feature-list li {

    display:
        flex;

    align-items:
        center;

    gap:
        10px;

    color:
        rgba(255,
            255,
            255,
            0.9);

    font-size:
        0.76rem;

}


/*==============================================================
    23. REGISTER FORM GRID
==============================================================*/

.register-form-grid {

    display:
        grid;

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

    gap:
        17px;

}


.register-form-grid .full-width {

    grid-column:
        1 / -1;

}


/*==============================================================
    24. PROFILE PAGE
==============================================================*/

.profile-container {

    width:
        min(calc(100% - 48px),
            var(--container));

    margin:
        0 auto;

    padding:
        48px 0 70px;

}


/*==============================================================
    25. PROFILE HEADER
==============================================================*/

.profile-header {

    display:
        flex;

    align-items:
        center;

    gap:
        22px;

    padding:
        28px;

    background:
        var(--surface);

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

    border-radius:
        var(--radius-lg);

    box-shadow:
        var(--shadow-sm);

}


/*==============================================================
    26. PROFILE AVATAR
==============================================================*/

.profile-avatar {

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    width:
        90px;

    height:
        90px;

    flex-shrink:
        0;

    overflow:
        hidden;

    border:
        4px solid var(--primary-soft);

    border-radius:
        50%;

    background:
        var(--primary-soft);

    color:
        var(--primary-light);

    font-size:
        1.8rem;

    font-weight:
        700;

}


.profile-avatar img {

    width:
        100%;

    height:
        100%;

    object-fit:
        cover;

}


/*==============================================================
    27. PROFILE INTRO
==============================================================*/

.profile-intro {

    min-width:
        0;

    flex:
        1;

}


.profile-intro h1 {

    margin:
        0;

    overflow:
        hidden;

    color:
        var(--text);

    font-size:
        clamp(1.35rem,
            3vw,
            1.8rem);

    font-weight:
        700;

    text-overflow:
        ellipsis;

}


.profile-intro p {

    margin:
        5px 0 0;

    color:
        var(--text-muted);

    font-size:
        0.8rem;

}


/*==============================================================
    28. PROFILE STATUS
==============================================================*/

.profile-status {

    display:
        inline-flex;

    align-items:
        center;

    gap:
        6px;

    margin-top:
        10px;

    padding:
        5px 10px;

    border-radius:
        999px;

    background:
        rgba(34,
            197,
            94,
            0.10);

    color:
        var(--success);

    font-size:
        0.68rem;

    font-weight:
        600;

}


.profile-status::before {

    content:
        "";

    width:
        6px;

    height:
        6px;

    border-radius:
        50%;

    background:
        currentColor;

}


/*==============================================================
    29. PROFILE ACTIONS
==============================================================*/

.profile-actions {

    display:
        flex;

    align-items:
        center;

    gap:
        8px;

    flex-shrink:
        0;

}


/*==============================================================
    30. PROFILE GRID
==============================================================*/

.profile-grid {

    display:
        grid;

    grid-template-columns:
        minmax(0,
            2fr) minmax(280px,
            1fr);

    gap:
        20px;

    margin-top:
        20px;

}


/*==============================================================
    31. PROFILE SECTION
==============================================================*/

.profile-section {

    padding:
        24px;

    background:
        var(--surface);

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

    border-radius:
        var(--radius-lg);

    box-shadow:
        var(--shadow-sm);

}


.profile-section h2 {

    margin:
        0 0 20px;

    color:
        var(--text);

    font-size:
        1rem;

    font-weight:
        700;

}


/*==============================================================
    32. PROFILE INFORMATION GRID
==============================================================*/

.profile-info-grid {

    display:
        grid;

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

    gap:
        18px 24px;

}


/*==============================================================
    33. PROFILE INFORMATION ITEM
==============================================================*/

.profile-info-item {

    min-width:
        0;

}


.profile-info-item label {

    display:
        block;

    margin-bottom:
        5px;

    color:
        var(--text-muted);

    font-size:
        0.68rem;

    font-weight:
        600;

}


.profile-info-item span {

    display:
        block;

    overflow:
        hidden;

    color:
        var(--text);

    font-size:
        0.8rem;

    text-overflow:
        ellipsis;

    white-space:
        nowrap;

}


/*==============================================================
    34. PROFILE STATISTICS
==============================================================*/

.profile-stat-grid {

    display:
        grid;

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

    gap:
        12px;

}


.profile-stat {

    padding:
        16px;

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

    border-radius:
        12px;

    background:
        var(--surface-soft);

}


.profile-stat span {

    display:
        block;

    color:
        var(--text-muted);

    font-size:
        0.68rem;

}


.profile-stat strong {

    display:
        block;

    margin-top:
        5px;

    color:
        var(--text);

    font-size:
        1.15rem;

    font-weight:
        700;

}


/*==============================================================
    35. PROFILE EDIT FORM
==============================================================*/

.profile-edit-form {

    display:
        flex;

    flex-direction:
        column;

    gap:
        17px;

}


/*==============================================================
    36. PROFILE FORM ROW
==============================================================*/

.profile-form-row {

    display:
        grid;

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

    gap:
        17px;

}


/*==============================================================
    37. PROFILE FORM ACTIONS
==============================================================*/

.profile-form-actions {

    display:
        flex;

    align-items:
        center;

    justify-content:
        flex-end;

    gap:
        8px;

    padding-top:
        18px;

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

}


/*==============================================================
    38. PROFILE ACTIVITY
==============================================================*/

.profile-activity {

    display:
        flex;

    flex-direction:
        column;

}


.profile-activity-item {

    display:
        flex;

    align-items:
        flex-start;

    gap:
        12px;

    padding:
        13px 0;

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

}


.profile-activity-item:last-child {

    border-bottom:
        0;

}


.profile-activity-dot {

    width:
        8px;

    height:
        8px;

    flex-shrink:
        0;

    margin-top:
        5px;

    border-radius:
        50%;

    background:
        var(--primary-light);

}


.profile-activity-content {

    min-width:
        0;

}


.profile-activity-content strong {

    display:
        block;

    color:
        var(--text);

    font-size:
        0.75rem;

}


.profile-activity-content span {

    display:
        block;

    margin-top:
        3px;

    color:
        var(--text-muted);

    font-size:
        0.68rem;

}


/*==============================================================
    39. RESPONSIVE AUTH
==============================================================*/

@media (max-width: 900px) {

    .auth-layout {

        grid-template-columns:
            1fr;

        max-width:
            520px;

    }


    .auth-info {

        display:
            none;

    }


    .profile-grid {

        grid-template-columns:
            1fr;

    }

}


/*==============================================================
    40. RESPONSIVE PROFILE
==============================================================*/

@media (max-width: 700px) {

    .profile-container {

        width:
            calc(100% - 32px);

        padding:
            36px 0 55px;

    }


    .profile-header {

        align-items:
            flex-start;

        flex-direction:
            column;

        padding:
            22px;

    }


    .profile-actions {

        width:
            100%;

        flex-wrap:
            wrap;

    }


    .profile-info-grid {

        grid-template-columns:
            1fr;

    }


    .profile-form-row {

        grid-template-columns:
            1fr;

    }

}


/*==============================================================
    41. RESPONSIVE REGISTER
==============================================================*/

@media (max-width: 600px) {

    .auth-page {

        min-height:
            auto;

        padding:
            32px 12px 50px;

    }


    .auth-card {

        padding:
            24px 20px;

        border-radius:
            16px;

    }


    .register-form-grid {

        grid-template-columns:
            1fr;

    }


    .register-form-grid .full-width {

        grid-column:
            auto;

    }


    .auth-options {

        align-items:
            flex-start;

        flex-direction:
            column;

    }

}


/*==============================================================
    42. SMALL MOBILE
==============================================================*/

@media (max-width: 420px) {

    .auth-card {

        padding:
            22px 16px;

    }


    .profile-section {

        padding:
            20px;

    }


    .profile-stat-grid {

        grid-template-columns:
            1fr;

    }


    .profile-form-actions {

        align-items:
            stretch;

        flex-direction:
            column-reverse;

    }


    .profile-form-actions .btn {

        width:
            100%;

    }

}


/*==============================================================
    END OF PART 7
==============================================================*/





















/*==============================================================
    STYLE.CSS
    Student Performance Analytics Portal

    GLOBAL FOUNDATION
    Part 8 — Dashboard, Administrator, Teacher & Student
             Shared Components
==============================================================*/


/*==============================================================
    01. DASHBOARD PAGE FOUNDATION
==============================================================*/

.dashboard-page {

    width:
        100%;

}


/*==============================================================
    02. DASHBOARD CONTENT WRAPPER
==============================================================*/

.dashboard-container {

    width:
        min(calc(100% - 48px),
            var(--container));

    margin:
        0 auto;

    padding:
        42px 0 70px;

}


/*==============================================================
    03. DASHBOARD PAGE HEADER
==============================================================*/

.dashboard-header {

    width:
        100%;

    margin:
        0 0 30px;

}


.dashboard-header h1 {

    margin:
        0;

    color:
        var(--text);

    font-size:
        clamp(1.8rem,
            4vw,
            2.55rem);

    font-weight:
        700;

    line-height:
        1.2;

    letter-spacing:
        -0.03em;

}


.dashboard-header p {

    max-width:
        700px;

    margin:
        8px 0 0;

    color:
        var(--text-muted);

    font-size:
        0.82rem;

    line-height:
        1.7;

}


/*==============================================================
    04. DASHBOARD TOOLBAR
==============================================================*/

.dashboard-toolbar {

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        14px;

    margin:
        0 0 28px;

}


/*==============================================================
    05. DASHBOARD SEARCH
==============================================================*/

.dashboard-search {

    width:
        min(100%,
            420px);

}


/*==============================================================
    06. DASHBOARD TOOL ACTIONS
==============================================================*/

.dashboard-toolbar-actions {

    display:
        flex;

    align-items:
        center;

    gap:
        8px;

}


/*==============================================================
    07. DASHBOARD CARD GRID
==============================================================*/

.dashboard-cards {

    display:
        grid;

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

    gap:
        20px;

    width:
        100%;

}


/*==============================================================
    08. DASHBOARD CARD
==============================================================*/

.dashboard-card {

    display:
        flex;

    flex-direction:
        column;

    min-width:
        0;

    min-height:
        250px;

    padding:
        26px;

}


/*==============================================================
    09. DASHBOARD CARD ICON
==============================================================*/

.dashboard-card>h2:first-child {

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    width:
        54px;

    height:
        54px;

    margin:
        0 0 18px;

    border-radius:
        14px;

    background:
        var(--primary-soft);

    font-size:
        1.55rem;

}


/*==============================================================
    10. DASHBOARD CARD TITLE
==============================================================*/

.dashboard-card h3 {

    margin:
        0;

    color:
        var(--text);

    font-size:
        1.05rem;

    font-weight:
        700;

}


/*==============================================================
    11. DASHBOARD CARD DESCRIPTION
==============================================================*/

.dashboard-card p {

    margin:
        9px 0 0;

    color:
        var(--text-muted);

    font-size:
        0.78rem;

    line-height:
        1.7;

}


/*==============================================================
    12. DASHBOARD CARD ACTION
==============================================================*/

.dashboard-card .btn {

    align-self:
        flex-start;

    margin-top:
        auto;

}


/*==============================================================
    13. ROLE BADGE
==============================================================*/

.role-badge {

    display:
        inline-flex;

    align-items:
        center;

    width:
        fit-content;

    padding:
        5px 10px;

    border-radius:
        999px;

    background:
        var(--primary-soft);

    color:
        var(--primary-light);

    font-size:
        0.65rem;

    font-weight:
        700;

}


/*==============================================================
    14. DASHBOARD STAT GRID
==============================================================*/

.dashboard-stat-grid {

    display:
        grid;

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

    gap:
        18px;

    margin-bottom:
        26px;

}


/*==============================================================
    15. DASHBOARD STAT CARD
==============================================================*/

.dashboard-stat-card {

    min-width:
        0;

    padding:
        20px;

    background:
        var(--surface);

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

    border-radius:
        var(--radius-lg);

    box-shadow:
        var(--shadow-sm);

}


/*==============================================================
    16. STAT CARD HEADER
==============================================================*/

.dashboard-stat-header {

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        12px;

}


/*==============================================================
    17. STAT CARD LABEL
==============================================================*/

.dashboard-stat-label {

    color:
        var(--text-muted);

    font-size:
        0.72rem;

    font-weight:
        600;

}


/*==============================================================
    18. STAT CARD VALUE
==============================================================*/

.dashboard-stat-value {

    margin:
        9px 0 0;

    color:
        var(--text);

    font-size:
        clamp(1.45rem,
            3vw,
            2rem);

    font-weight:
        700;

    line-height:
        1.1;

}


/*==============================================================
    19. STAT CARD DESCRIPTION
==============================================================*/

.dashboard-stat-description {

    margin:
        8px 0 0;

    color:
        var(--text-muted);

    font-size:
        0.68rem;

}


/*==============================================================
    20. ROLE DASHBOARD GRID
==============================================================*/

.role-dashboard-grid {

    display:
        grid;

    grid-template-columns:
        minmax(0,
            1.6fr) minmax(300px,
            1fr);

    gap:
        20px;

    margin-bottom:
        24px;

}


/*==============================================================
    21. ROLE DASHBOARD CARD
==============================================================*/

.role-dashboard-card {

    min-width:
        0;

    padding:
        22px;

    background:
        var(--surface);

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

    border-radius:
        var(--radius-lg);

    box-shadow:
        var(--shadow-sm);

}


/*==============================================================
    22. ROLE CARD HEADER
==============================================================*/

.role-card-header {

    display:
        flex;

    align-items:
        flex-start;

    justify-content:
        space-between;

    gap:
        16px;

    margin-bottom:
        18px;

}


.role-card-header h2,
.role-card-header h3 {

    margin:
        0;

    color:
        var(--text);

    font-size:
        1rem;

    font-weight:
        700;

}


.role-card-header p {

    margin:
        4px 0 0;

    color:
        var(--text-muted);

    font-size:
        0.72rem;

}


/*==============================================================
    23. DASHBOARD DATA ROW
==============================================================*/

.dashboard-data-row {

    display:
        flex;

    align-items:
        center;

    gap:
        12px;

    padding:
        13px 0;

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

}


.dashboard-data-row:last-child {

    border-bottom:
        0;

}


/*==============================================================
    24. DATA ROW ICON
==============================================================*/

.dashboard-data-icon {

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    width:
        38px;

    height:
        38px;

    flex-shrink:
        0;

    border-radius:
        10px;

    background:
        var(--primary-soft);

    color:
        var(--primary-light);

}


/*==============================================================
    25. DATA ROW CONTENT
==============================================================*/

.dashboard-data-content {

    min-width:
        0;

    flex:
        1;

}


.dashboard-data-content strong {

    display:
        block;

    overflow:
        hidden;

    color:
        var(--text);

    font-size:
        0.78rem;

    font-weight:
        600;

    text-overflow:
        ellipsis;

    white-space:
        nowrap;

}


.dashboard-data-content span {

    display:
        block;

    margin-top:
        3px;

    color:
        var(--text-muted);

    font-size:
        0.68rem;

}


/*==============================================================
    26. DASHBOARD DATA VALUE
==============================================================*/

.dashboard-data-value {

    flex-shrink:
        0;

    color:
        var(--text);

    font-size:
        0.76rem;

    font-weight:
        700;

}


/*==============================================================
    27. DASHBOARD CHART GRID
==============================================================*/

.dashboard-chart-grid {

    display:
        grid;

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

    gap:
        20px;

    width:
        100%;

}


/*==============================================================
    28. DASHBOARD CHART CARD
==============================================================*/

.dashboard-chart-card {

    position:
        relative;

    min-width:
        0;

    padding:
        22px;

    background:
        var(--surface);

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

    border-radius:
        var(--radius-lg);

    box-shadow:
        var(--shadow-sm);

}


/*==============================================================
    29. DASHBOARD CHART HEADER
==============================================================*/

.dashboard-chart-header {

    display:
        flex;

    align-items:
        flex-start;

    justify-content:
        space-between;

    gap:
        14px;

    margin-bottom:
        18px;

}


.dashboard-chart-header h3 {

    margin:
        0;

    color:
        var(--text);

    font-size:
        0.95rem;

    font-weight:
        700;

}


.dashboard-chart-header p {

    margin:
        4px 0 0;

    color:
        var(--text-muted);

    font-size:
        0.7rem;

}


/*==============================================================
    30. DASHBOARD CHART WRAPPER
==============================================================*/

/*
    IMPORTANT:
    Keep chart dimensions on the wrapper.

    Do not set a fixed height globally on canvas.
    Chart.js should control the actual canvas drawing area.
*/

.dashboard-chart-wrapper {

    position:
        relative;

    width:
        100%;

    height:
        280px;

}


/*==============================================================
    31. DASHBOARD CHART WRAPPER — SMALL
==============================================================*/

.dashboard-chart-wrapper.small {

    height:
        220px;

}


/*==============================================================
    32. DASHBOARD CHART WRAPPER — LARGE
==============================================================*/

.dashboard-chart-wrapper.large {

    height:
        340px;

}


/*==============================================================
    33. CHART CANVAS SAFETY
==============================================================*/

/*
    This rule intentionally does NOT assign a fixed height.

    This prevents the repeated-refresh chart growth problem.
*/

.dashboard-chart-wrapper>canvas {

    display:
        block;

    max-width:
        100%;

}


/*==============================================================
    34. DASHBOARD OVERVIEW
==============================================================*/

.dashboard-overview {

    display:
        grid;

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

    gap:
        18px;

    margin-bottom:
        26px;

}


/*==============================================================
    35. OVERVIEW CARD
==============================================================*/

.overview-card {

    min-width:
        0;

    padding:
        20px;

    background:
        var(--surface);

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

    border-radius:
        var(--radius-lg);

    box-shadow:
        var(--shadow-sm);

}


/*==============================================================
    36. OVERVIEW LABEL
==============================================================*/

.overview-card h3 {

    margin:
        0;

    color:
        var(--text-muted);

    font-size:
        0.72rem;

    font-weight:
        600;

}


/*==============================================================
    37. OVERVIEW VALUE
==============================================================*/

.overview-card h2 {

    margin:
        8px 0 0;

    color:
        var(--text);

    font-size:
        1.8rem;

    font-weight:
        700;

    line-height:
        1.1;

}


/*==============================================================
    38. PERFORMANCE PANEL
==============================================================*/

.performance-panel {

    min-width:
        0;

    padding:
        22px;

    background:
        var(--surface);

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

    border-radius:
        var(--radius-lg);

    box-shadow:
        var(--shadow-sm);

}


/*==============================================================
    39. PERFORMANCE HEADER
==============================================================*/

.performance-header {

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        16px;

    margin-bottom:
        20px;

}


.performance-header h2 {

    margin:
        0;

    color:
        var(--text);

    font-size:
        1rem;

    font-weight:
        700;

}


/*==============================================================
    40. PERFORMANCE ITEM
==============================================================*/

.performance-item {

    margin-bottom:
        18px;

}


.performance-item:last-child {

    margin-bottom:
        0;

}


/*==============================================================
    41. PERFORMANCE ITEM HEADER
==============================================================*/

.performance-item-header {

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        12px;

    margin-bottom:
        7px;

}


.performance-item-header span {

    color:
        var(--text-secondary);

    font-size:
        0.73rem;

}


.performance-item-header strong {

    color:
        var(--text);

    font-size:
        0.73rem;

}


/*==============================================================
    42. RECENT ACTIVITY
==============================================================*/

.recent-activity {

    display:
        flex;

    flex-direction:
        column;

}


/*==============================================================
    43. RECENT ACTIVITY ITEM
==============================================================*/

.recent-activity-item {

    display:
        flex;

    align-items:
        flex-start;

    gap:
        12px;

    padding:
        14px 0;

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

}


.recent-activity-item:last-child {

    border-bottom:
        0;

}


/*==============================================================
    44. ACTIVITY MARKER
==============================================================*/

.activity-marker {

    width:
        9px;

    height:
        9px;

    flex-shrink:
        0;

    margin-top:
        5px;

    border-radius:
        50%;

    background:
        var(--primary-light);

    box-shadow:
        0 0 0 4px var(--primary-soft);

}


/*==============================================================
    45. ACTIVITY CONTENT
==============================================================*/

.activity-content {

    min-width:
        0;

    flex:
        1;

}


.activity-content strong {

    display:
        block;

    color:
        var(--text);

    font-size:
        0.76rem;

    font-weight:
        600;

}


.activity-content span {

    display:
        block;

    margin-top:
        3px;

    color:
        var(--text-muted);

    font-size:
        0.68rem;

    line-height:
        1.5;

}


/*==============================================================
    46. RECENT ASSIGNMENTS
==============================================================*/

.recent-assignments {

    display:
        flex;

    flex-direction:
        column;

}


/*==============================================================
    47. RECENT ASSIGNMENT
==============================================================*/

.recent-assignment {

    display:
        flex;

    align-items:
        center;

    gap:
        12px;

    padding:
        13px 0;

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

}


.recent-assignment:last-child {

    border-bottom:
        0;

}


/*==============================================================
    48. ASSIGNMENT MARKER
==============================================================*/

.assignment-marker {

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    width:
        38px;

    height:
        38px;

    flex-shrink:
        0;

    border-radius:
        10px;

    background:
        var(--primary-soft);

    color:
        var(--primary-light);

}


/*==============================================================
    49. ASSIGNMENT DETAILS
==============================================================*/

.assignment-details {

    min-width:
        0;

    flex:
        1;

}


.assignment-details strong {

    display:
        block;

    overflow:
        hidden;

    color:
        var(--text);

    font-size:
        0.76rem;

    font-weight:
        600;

    text-overflow:
        ellipsis;

    white-space:
        nowrap;

}


.assignment-details span {

    display:
        block;

    margin-top:
        3px;

    color:
        var(--text-muted);

    font-size:
        0.67rem;

}


/*==============================================================
    50. ASSIGNMENT GRADE
==============================================================*/

.assignment-grade {

    flex-shrink:
        0;

    color:
        var(--text);

    font-size:
        0.75rem;

    font-weight:
        700;

}


/*==============================================================
    51. ADMIN DATA GRID
==============================================================*/

.admin-data-grid {

    display:
        grid;

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

    gap:
        18px;

}


/*==============================================================
    52. ADMIN DATA CARD
==============================================================*/

.admin-data-card {

    min-width:
        0;

    padding:
        20px;

    background:
        var(--surface);

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

    border-radius:
        var(--radius-lg);

    box-shadow:
        var(--shadow-sm);

}


/*==============================================================
    53. ADMIN DATA VALUE
==============================================================*/

.admin-data-card strong {

    display:
        block;

    margin-top:
        7px;

    color:
        var(--text);

    font-size:
        1.65rem;

    font-weight:
        700;

}


/*==============================================================
    54. ADMIN DATA LABEL
==============================================================*/

.admin-data-card span {

    color:
        var(--text-muted);

    font-size:
        0.7rem;

}


/*==============================================================
    55. TEACHER CLASS GRID
==============================================================*/

.teacher-class-grid {

    display:
        grid;

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

    gap:
        18px;

}


/*==============================================================
    56. TEACHER CLASS CARD
==============================================================*/

.teacher-class-card {

    min-width:
        0;

    padding:
        20px;

    background:
        var(--surface);

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

    border-radius:
        var(--radius-lg);

    box-shadow:
        var(--shadow-sm);

}


/*==============================================================
    57. TEACHER CLASS TITLE
==============================================================*/

.teacher-class-card h3 {

    margin:
        0;

    overflow:
        hidden;

    color:
        var(--text);

    font-size:
        0.9rem;

    font-weight:
        700;

    text-overflow:
        ellipsis;

    white-space:
        nowrap;

}


/*==============================================================
    58. TEACHER CLASS META
==============================================================*/

.teacher-class-meta {

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        10px;

    margin-top:
        12px;

    color:
        var(--text-muted);

    font-size:
        0.68rem;

}


/*==============================================================
    59. STUDENT PERFORMANCE GRID
==============================================================*/

.student-performance-grid {

    display:
        grid;

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

    gap:
        20px;

}


/*==============================================================
    60. STUDENT PERFORMANCE CARD
==============================================================*/

.student-performance-card {

    min-width:
        0;

    padding:
        22px;

    background:
        var(--surface);

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

    border-radius:
        var(--radius-lg);

    box-shadow:
        var(--shadow-sm);

}


/*==============================================================
    61. GPA DISPLAY
==============================================================*/

.gpa-display {

    display:
        flex;

    align-items:
        baseline;

    gap:
        5px;

}


.gpa-display strong {

    color:
        var(--text);

    font-size:
        2.4rem;

    font-weight:
        700;

    line-height:
        1;

}


.gpa-display span {

    color:
        var(--text-muted);

    font-size:
        0.72rem;

}


/*==============================================================
    62. ATTENDANCE DISPLAY
==============================================================*/

.attendance-display {

    display:
        flex;

    align-items:
        center;

    gap:
        18px;

}


.attendance-value {

    color:
        var(--text);

    font-size:
        2rem;

    font-weight:
        700;

}


/*==============================================================
    63. SEMESTER LIST
==============================================================*/

.semester-list {

    display:
        flex;

    flex-direction:
        column;

}


.semester-item {

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        14px;

    padding:
        13px 0;

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

}


.semester-item:last-child {

    border-bottom:
        0;

}


.semester-item span {

    color:
        var(--text-secondary);

    font-size:
        0.74rem;

}


.semester-item strong {

    color:
        var(--text);

    font-size:
        0.78rem;

}


/*==============================================================
    64. DASHBOARD SECTION SPACING
==============================================================*/

.dashboard-section {

    margin-bottom:
        26px;

}


.dashboard-section:last-child {

    margin-bottom:
        0;

}


/*==============================================================
    65. DASHBOARD SECTION TITLE
==============================================================*/

.dashboard-section-title {

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        16px;

    margin-bottom:
        16px;

}


.dashboard-section-title h2 {

    margin:
        0;

    color:
        var(--text);

    font-size:
        1.05rem;

    font-weight:
        700;

}


/*==============================================================
    66. DASHBOARD SECTION TITLE LINK
==============================================================*/

.dashboard-section-title a {

    color:
        var(--primary-light);

    font-size:
        0.7rem;

    font-weight:
        600;

    text-decoration:
        none;

}


.dashboard-section-title a:hover {

    text-decoration:
        underline;

}


/*==============================================================
    67. RESPONSIVE — LARGE TABLET
==============================================================*/

@media (max-width: 1050px) {

    .dashboard-stat-grid {

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

    }


    .dashboard-cards {

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

    }


    .admin-data-grid {

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

    }


    .teacher-class-grid {

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

    }

}


/*==============================================================
    68. RESPONSIVE — TABLET
==============================================================*/

@media (max-width: 850px) {

    .role-dashboard-grid {

        grid-template-columns:
            1fr;

    }


    .dashboard-chart-grid {

        grid-template-columns:
            1fr;

    }

}


/*==============================================================
    69. RESPONSIVE — MOBILE
==============================================================*/

@media (max-width: 700px) {

    .dashboard-container {

        width:
            calc(100% - 32px);

        padding:
            34px 0 55px;

    }


    .dashboard-toolbar {

        align-items:
            stretch;

        flex-direction:
            column;

    }


    .dashboard-search {

        width:
            100%;

    }


    .dashboard-toolbar-actions {

        width:
            100%;

    }


    .dashboard-cards {

        grid-template-columns:
            1fr;

    }


    .dashboard-stat-grid {

        grid-template-columns:
            1fr;

    }


    .dashboard-overview {

        grid-template-columns:
            1fr;

    }


    .student-performance-grid {

        grid-template-columns:
            1fr;

    }


    .admin-data-grid {

        grid-template-columns:
            1fr;

    }


    .teacher-class-grid {

        grid-template-columns:
            1fr;

    }


    .dashboard-chart-wrapper {

        height:
            250px;

    }


    .dashboard-chart-wrapper.small {

        height:
            210px;

    }


    .dashboard-chart-wrapper.large {

        height:
            290px;

    }

}


/*==============================================================
    70. RESPONSIVE — SMALL MOBILE
==============================================================*/

@media (max-width: 480px) {

    .dashboard-container {

        width:
            calc(100% - 24px);

    }


    .dashboard-header h1 {

        font-size:
            1.7rem;

    }


    .dashboard-card {

        padding:
            21px;

    }


    .dashboard-chart-card,
    .role-dashboard-card,
    .performance-panel,
    .student-performance-card {

        padding:
            18px;

    }


    .dashboard-chart-wrapper {

        height:
            220px;

    }


    .dashboard-chart-wrapper.small {

        height:
            190px;

    }


    .dashboard-chart-wrapper.large {

        height:
            260px;

    }


    .dashboard-section-title {

        align-items:
            flex-start;

        flex-direction:
            column;

    }

}


/*==============================================================
    END OF PART 8
==============================================================*/



















/*==============================================================
    STYLE.CSS
    Student Performance Analytics Portal

    GLOBAL FOUNDATION
    Part 9 — Reports, Filters, Search, Pagination & Data Controls
==============================================================*/


/*==============================================================
    01. REPORT PAGE FOUNDATION
==============================================================*/

.reports-page {
    width: 100%;
}

.reports-container {
    width: min(calc(100% - 48px), var(--container));
    margin: 0 auto;
    padding: 42px 0 70px;
}


/*==============================================================
    02. REPORT PAGE HEADER
==============================================================*/

.reports-header {
    margin-bottom: 28px;
}

.reports-header h1 {
    margin: 0;
    color: var(--text);
    font-size: clamp(1.8rem, 4vw, 2.45rem);
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -0.03em;
}

.reports-header p {
    max-width: 720px;
    margin: 8px 0 0;
    color: var(--text-muted);
    font-size: 0.8rem;
    line-height: 1.7;
}


/*==============================================================
    03. REPORT TOOLBAR
==============================================================*/

.report-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 22px;
    padding: 18px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
}


/*==============================================================
    04. REPORT SEARCH
==============================================================*/

.report-search-wrapper {
    position: relative;
    flex: 1;
    min-width: 220px;
}

.report-search-wrapper input {
    width: 100%;
    padding-left: 42px;
}

.report-search-icon {
    position: absolute;
    top: 50%;
    left: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-muted);
    pointer-events: none;
    transform: translateY(-50%);
}


/*==============================================================
    05. REPORT TOOL ACTIONS
==============================================================*/

.report-toolbar-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}


/*==============================================================
    06. FILTER PANEL
==============================================================*/

.filter-panel {
    margin-bottom: 22px;
    padding: 20px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
}

.filter-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 18px;
}

.filter-panel-header h2,
.filter-panel-header h3 {
    margin: 0;
    color: var(--text);
    font-size: 0.95rem;
    font-weight: 700;
}

.filter-panel-header p {
    margin: 4px 0 0;
    color: var(--text-muted);
    font-size: 0.68rem;
}


/*==============================================================
    07. FILTER GRID
==============================================================*/

.filter-grid {
    display: grid;
    grid-template-columns:
        repeat(4, minmax(0, 1fr));
    gap: 15px;
}

.filter-field {
    min-width: 0;
}

.filter-field label {
    display: block;
    margin-bottom: 7px;
    color: var(--text-secondary);
    font-size: 0.7rem;
    font-weight: 600;
}


/*==============================================================
    08. FILTER ACTIONS
==============================================================*/

.filter-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 18px;
    padding-top: 17px;
    border-top: 1px solid var(--border);
}


/*==============================================================
    09. ACTIVE FILTERS
==============================================================*/

.active-filters {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 7px;
    margin-top: 15px;
}

.active-filters-label {
    color: var(--text-muted);
    font-size: 0.68rem;
    font-weight: 600;
}


/*==============================================================
    10. FILTER CHIP
==============================================================*/

.filter-chip {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    max-width: 220px;
    padding: 5px 9px;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: var(--surface-soft);
    color: var(--text-secondary);
    font-size: 0.65rem;
    font-weight: 600;
}

.filter-chip span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.filter-chip button {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 17px;
    height: 17px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
}

.filter-chip button:hover {
    background: var(--border);
    color: var(--text);
}


/*==============================================================
    11. REPORT SUMMARY
==============================================================*/

.report-summary {
    display: grid;
    grid-template-columns:
        repeat(4, minmax(0, 1fr));
    gap: 16px;
    margin-bottom: 22px;
}

.report-summary-card {
    min-width: 0;
    padding: 18px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
}

.report-summary-card span {
    display: block;
    color: var(--text-muted);
    font-size: 0.68rem;
    font-weight: 600;
}

.report-summary-card strong {
    display: block;
    margin-top: 7px;
    color: var(--text);
    font-size: 1.45rem;
    font-weight: 700;
}


/*==============================================================
    12. REPORT CONTENT CARD
==============================================================*/

.report-content-card {
    min-width: 0;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
}


/*==============================================================
    13. REPORT CONTENT HEADER
==============================================================*/

.report-content-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 20px 22px;
    border-bottom: 1px solid var(--border);
}

.report-content-title {
    min-width: 0;
}

.report-content-title h2,
.report-content-title h3 {
    margin: 0;
    color: var(--text);
    font-size: 0.95rem;
    font-weight: 700;
}

.report-content-title p {
    margin: 4px 0 0;
    color: var(--text-muted);
    font-size: 0.68rem;
}


/*==============================================================
    14. REPORT ACTIONS
==============================================================*/

.report-actions {
    display: flex;
    align-items: center;
    gap: 7px;
    flex-shrink: 0;
}


/*==============================================================
    15. DATA TABLE WRAPPER
==============================================================*/

.data-table-wrapper {
    width: 100%;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
}


/*==============================================================
    16. DATA TABLE
==============================================================*/

.data-table {
    width: 100%;
    min-width: 720px;
    border-collapse: collapse;
    border-spacing: 0;
}

.data-table th,
.data-table td {
    padding: 13px 16px;
    border-bottom: 1px solid var(--border);
    text-align: left;
    vertical-align: middle;
}

.data-table th {
    background: var(--surface-soft);
    color: var(--text-secondary);
    font-size: 0.68rem;
    font-weight: 700;
    white-space: nowrap;
}

.data-table td {
    color: var(--text-secondary);
    font-size: 0.72rem;
}

.data-table tbody tr {
    transition:
        background-color var(--transition);
}

.data-table tbody tr:hover {
    background: var(--surface-soft);
}

.data-table tbody tr:last-child td {
    border-bottom: 0;
}


/*==============================================================
    17. TABLE PRIMARY TEXT
==============================================================*/

.table-primary {
    color: var(--text);
    font-weight: 600;
}

.table-secondary {
    display: block;
    margin-top: 3px;
    color: var(--text-muted);
    font-size: 0.64rem;
}


/*==============================================================
    18. TABLE ACTIONS
==============================================================*/

.table-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 5px;
    white-space: nowrap;
}

.table-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 32px;
    height: 32px;
    padding: 0 8px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--surface);
    color: var(--text-muted);
    cursor: pointer;
    transition:
        background-color var(--transition),
        color var(--transition),
        border-color var(--transition);
}

.table-action:hover {
    background: var(--surface-soft);
    border-color: var(--primary-light);
    color: var(--primary-light);
}


/*==============================================================
    19. TABLE STATUS
==============================================================*/

.table-status {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 9px;
    border-radius: 999px;
    font-size: 0.62rem;
    font-weight: 700;
}

.table-status::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
}

.table-status.success {
    background: rgba(34, 197, 94, 0.1);
    color: var(--success);
}

.table-status.warning {
    background: rgba(245, 158, 11, 0.1);
    color: var(--warning);
}

.table-status.danger {
    background: rgba(239, 68, 68, 0.1);
    color: var(--danger);
}

.table-status.info {
    background: rgba(59, 130, 246, 0.1);
    color: var(--info);
}


/*==============================================================
    20. SORTABLE TABLE HEADERS
==============================================================*/

.sortable {
    cursor: pointer;
    user-select: none;
}

.sortable-content {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.sort-indicator {
    color: var(--text-muted);
    font-size: 0.62rem;
}

.sortable.active {
    color: var(--primary-light);
}


/*==============================================================
    21. EMPTY DATA STATE
==============================================================*/

.data-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 220px;
    padding: 35px 20px;
    text-align: center;
}

.data-empty-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    margin-bottom: 14px;
    border-radius: 14px;
    background: var(--surface-soft);
    color: var(--text-muted);
    font-size: 1.25rem;
}

.data-empty-state h3 {
    margin: 0;
    color: var(--text);
    font-size: 0.9rem;
}

.data-empty-state p {
    max-width: 400px;
    margin: 6px 0 0;
    color: var(--text-muted);
    font-size: 0.7rem;
    line-height: 1.6;
}


/*==============================================================
    22. NO SEARCH RESULTS
==============================================================*/

.no-search-results {
    display: none;
    padding: 30px 20px;
    color: var(--text-muted);
    font-size: 0.72rem;
    text-align: center;
}

.no-search-results.visible {
    display: block;
}


/*==============================================================
    23. PAGINATION
==============================================================*/

.pagination {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 17px 20px;
    border-top: 1px solid var(--border);
}

.pagination-info {
    color: var(--text-muted);
    font-size: 0.67rem;
}

.pagination-controls {
    display: flex;
    align-items: center;
    gap: 5px;
}

.pagination-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 32px;
    height: 32px;
    padding: 0 8px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--surface);
    color: var(--text-secondary);
    font-size: 0.68rem;
    font-weight: 600;
    cursor: pointer;
    transition:
        background-color var(--transition),
        color var(--transition),
        border-color var(--transition);
}

.pagination-btn:hover:not(:disabled) {
    background: var(--surface-soft);
    border-color: var(--primary-light);
    color: var(--primary-light);
}

.pagination-btn.active {
    background: var(--primary);
    border-color: var(--primary);
    color: #ffffff;
}

.pagination-btn:disabled {
    cursor: not-allowed;
    opacity: 0.45;
}


/*==============================================================
    24. PAGINATION ELLIPSIS
==============================================================*/

.pagination-ellipsis {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 28px;
    height: 32px;
    color: var(--text-muted);
    font-size: 0.7rem;
}


/*==============================================================
    25. PAGE SIZE CONTROL
==============================================================*/

.page-size-control {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.page-size-control label {
    color: var(--text-muted);
    font-size: 0.67rem;
}

.page-size-control select {
    width: auto;
    min-width: 72px;
    padding: 7px 28px 7px 9px;
    font-size: 0.68rem;
}


/*==============================================================
    26. REPORT EXPORT BAR
==============================================================*/

.report-export-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin-top: 20px;
    padding: 16px 18px;
    background: var(--surface-soft);
    border: 1px solid var(--border);
    border-radius: 12px;
}

.report-export-info {
    min-width: 0;
}

.report-export-info strong {
    display: block;
    color: var(--text);
    font-size: 0.73rem;
}

.report-export-info span {
    display: block;
    margin-top: 3px;
    color: var(--text-muted);
    font-size: 0.65rem;
}

.report-export-actions {
    display: flex;
    align-items: center;
    gap: 7px;
    flex-shrink: 0;
}


/*==============================================================
    27. DATA CONTROL GROUP
==============================================================*/

.data-control-group {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.data-control-group>label {
    color: var(--text-muted);
    font-size: 0.68rem;
    font-weight: 600;
}


/*==============================================================
    28. VIEW TOGGLE
==============================================================*/

.view-toggle {
    display: inline-flex;
    align-items: center;
    padding: 3px;
    border: 1px solid var(--border);
    border-radius: 9px;
    background: var(--surface-soft);
}

.view-toggle button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 34px;
    height: 30px;
    padding: 0 8px;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: var(--text-muted);
    font-size: 0.68rem;
    cursor: pointer;
}

.view-toggle button:hover {
    color: var(--text);
}

.view-toggle button.active {
    background: var(--surface);
    color: var(--primary-light);
    box-shadow: var(--shadow-sm);
}


/*==============================================================
    29. REPORT DATE RANGE
==============================================================*/

.date-range {
    display: grid;
    grid-template-columns:
        repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.date-range-field {
    min-width: 0;
}

.date-range-field label {
    display: block;
    margin-bottom: 6px;
    color: var(--text-muted);
    font-size: 0.65rem;
    font-weight: 600;
}


/*==============================================================
    30. REPORT METRIC
==============================================================*/

.report-metric {
    display: flex;
    align-items: center;
    gap: 10px;
}

.report-metric-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    flex-shrink: 0;
    border-radius: 10px;
    background: var(--primary-soft);
    color: var(--primary-light);
}

.report-metric-content {
    min-width: 0;
}

.report-metric-content span {
    display: block;
    color: var(--text-muted);
    font-size: 0.65rem;
}

.report-metric-content strong {
    display: block;
    margin-top: 3px;
    color: var(--text);
    font-size: 0.9rem;
}


/*==============================================================
    31. DATA LOADING STATE
==============================================================*/

.data-loading {
    position: relative;
    min-height: 180px;
    pointer-events: none;
}

.data-loading::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 25px;
    height: 25px;
    border: 2px solid var(--border);
    border-top-color: var(--primary);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    animation: dataLoadingSpin 700ms linear infinite;
}

@keyframes dataLoadingSpin {
    to {
        transform:
            translate(-50%, -50%) rotate(360deg);
    }
}


/*==============================================================
    32. DATA REFRESH INDICATOR
==============================================================*/

.data-refreshing {
    position: relative;
}

.data-refreshing::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 2px;
    border-radius: 999px;
    background:
        linear-gradient(90deg,
            transparent,
            var(--primary),
            transparent);
    background-size: 200% 100%;
    animation: refreshProgress 1.2s linear infinite;
}

@keyframes refreshProgress {
    from {
        background-position: 200% 0;
    }

    to {
        background-position: -200% 0;
    }
}


/*==============================================================
    33. BULK ACTION BAR
==============================================================*/

.bulk-action-bar {
    display: none;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 14px;
    padding: 11px 14px;
    background: var(--primary-soft);
    border: 1px solid var(--border);
    border-radius: 10px;
}

.bulk-action-bar.visible {
    display: flex;
}

.bulk-action-info {
    color: var(--text-secondary);
    font-size: 0.68rem;
    font-weight: 600;
}

.bulk-action-buttons {
    display: flex;
    align-items: center;
    gap: 6px;
}


/*==============================================================
    34. TABLE CHECKBOX
==============================================================*/

.table-checkbox {
    width: 15px;
    height: 15px;
    margin: 0;
    accent-color: var(--primary);
    cursor: pointer;
}


/*==============================================================
    35. REPORT CARD GRID
==============================================================*/

.report-card-grid {
    display: grid;
    grid-template-columns:
        repeat(2, minmax(0, 1fr));
    gap: 20px;
}

.report-card {
    min-width: 0;
    padding: 22px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
}


/*==============================================================
    36. REPORT CARD HEADER
==============================================================*/

.report-card-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 18px;
}

.report-card-header h2,
.report-card-header h3 {
    margin: 0;
    color: var(--text);
    font-size: 0.95rem;
    font-weight: 700;
}

.report-card-header p {
    margin: 4px 0 0;
    color: var(--text-muted);
    font-size: 0.68rem;
}


/*==============================================================
    37. REPORT CHART CONTAINER
==============================================================*/

.report-chart-wrapper {
    position: relative;
    width: 100%;
    height: 280px;
}


/*
    Same chart-safety principle used in Part 8.

    Do NOT force a global canvas height.
*/

.report-chart-wrapper>canvas {
    display: block;
    max-width: 100%;
}


/*==============================================================
    38. REPORT LEGEND
==============================================================*/

.report-legend {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 14px;
}

.report-legend-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--text-muted);
    font-size: 0.65rem;
}

.report-legend-marker {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--primary);
}


/*==============================================================
    39. RESPONSIVE — TABLET
==============================================================*/

@media (max-width: 1000px) {

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

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

}


/*==============================================================
    40. RESPONSIVE — SMALL TABLET
==============================================================*/

@media (max-width: 800px) {

    .report-toolbar {
        align-items: stretch;
        flex-direction: column;
    }

    .report-search-wrapper {
        width: 100%;
    }

    .report-toolbar-actions {
        width: 100%;
        justify-content: flex-start;
        flex-wrap: wrap;
    }

    .report-card-grid {
        grid-template-columns:
            1fr;
    }

}


/*==============================================================
    41. RESPONSIVE — MOBILE
==============================================================*/

@media (max-width: 650px) {

    .reports-container {
        width: calc(100% - 32px);
        padding: 34px 0 55px;
    }

    .filter-grid {
        grid-template-columns:
            1fr;
    }

    .report-summary {
        grid-template-columns:
            1fr;
    }

    .filter-panel {
        padding: 17px;
    }

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

    .filter-actions {
        justify-content: stretch;
        flex-direction: column;
    }

    .filter-actions .btn {
        width: 100%;
    }

    .report-content-header {
        align-items: flex-start;
        flex-direction: column;
        padding: 17px;
    }

    .report-actions {
        width: 100%;
        flex-wrap: wrap;
    }

    .report-export-bar {
        align-items: flex-start;
        flex-direction: column;
    }

    .report-export-actions {
        width: 100%;
        flex-wrap: wrap;
    }

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

    .pagination-controls {
        width: 100%;
        overflow-x: auto;
        padding-bottom: 2px;
    }

    .bulk-action-bar {
        align-items: flex-start;
        flex-direction: column;
    }

    .bulk-action-buttons {
        width: 100%;
        flex-wrap: wrap;
    }

    .date-range {
        grid-template-columns:
            1fr;
    }

}


/*==============================================================
    42. RESPONSIVE — SMALL MOBILE
==============================================================*/

@media (max-width: 450px) {

    .reports-container {
        width: calc(100% - 24px);
    }

    .report-chart-wrapper {
        height: 230px;
    }

    .report-card {
        padding: 18px;
    }

    .report-export-actions .btn {
        flex: 1;
    }

}


/*==============================================================
    END OF PART 9
==============================================================*/
























/*==============================================================
    STYLE.CSS
    Student Performance Analytics Portal

    FINAL FOUNDATION
    Part 10 — Final Responsive Polish & Cleanup
==============================================================*/


/*==============================================================
    01. GLOBAL RESPONSIVE SAFETY
==============================================================*/

html {
    overflow-x: hidden;
}

body {
    min-width: 320px;
    overflow-x: hidden;
}


/*==============================================================
    02. MEDIA SAFETY
==============================================================*/

img,
svg,
video {
    max-width: 100%;
}

img {
    height: auto;
}

iframe {
    max-width: 100%;
    border: 0;
}


/*==============================================================
    03. TEXT OVERFLOW PROTECTION
==============================================================*/

h1,
h2,
h3,
h4,
h5,
h6,
p,
a,
span,
td,
th {
    overflow-wrap: anywhere;
}


/*==============================================================
    04. BUTTON SAFETY
==============================================================*/

button,
.btn,
input[type="button"],
input[type="submit"],
input[type="reset"] {
    max-width: 100%;
}


/*==============================================================
    05. FOCUS ACCESSIBILITY
==============================================================*/

:where(a,
    button,
    input,
    select,
    textarea):focus-visible {

    outline:
        3px solid rgba(99,
            102,
            241,
            0.32);

    outline-offset:
        2px;

}


/*==============================================================
    06. DISABLED ELEMENTS
==============================================================*/

button:disabled,
input:disabled,
select:disabled,
textarea:disabled,
.btn:disabled {

    cursor:
        not-allowed;

    opacity:
        0.55;

}


/*==============================================================
    07. FORM ELEMENT CONSISTENCY
==============================================================*/

input,
select,
textarea,
button {

    font:
        inherit;

}


/*==============================================================
    08. TEXTAREA SAFETY
==============================================================*/

textarea {

    min-height:
        120px;

    resize:
        vertical;

}


/*==============================================================
    09. LONG SELECT OPTIONS
==============================================================*/

select {

    max-width:
        100%;

}


/*==============================================================
    10. GLOBAL CONTAINER PROTECTION
==============================================================*/

.container,
.page-container,
.main-container {

    width:
        min(calc(100% - 48px),
            var(--container));

    margin-left:
        auto;

    margin-right:
        auto;

}


/*==============================================================
    11. GLOBAL SECTION SPACING
==============================================================*/

section {

    min-width:
        0;

}


/*==============================================================
    12. GRID CHILD PROTECTION
==============================================================*/

[class*="grid"]>*,
.dashboard-cards>*,
.dashboard-stat-grid>*,
.dashboard-chart-grid>*,
.dashboard-overview>*,
.profile-grid>*,
.student-performance-grid>*,
.report-card-grid>* {

    min-width:
        0;

}


/*==============================================================
    13. FLEX CHILD PROTECTION
==============================================================*/

[class*="toolbar"]>*,
[class*="header"]>*,
.profile-header>*,
.report-content-header>* {

    min-width:
        0;

}


/*==============================================================
    14. SAFE TABLE OVERFLOW
==============================================================*/

table {

    max-width:
        100%;

}

.table-responsive,
.table-wrapper,
.data-table-wrapper {

    width:
        100%;

    overflow-x:
        auto;

    overflow-y:
        hidden;

}


/*==============================================================
    15. SAFE CHART OVERFLOW
==============================================================*/

.dashboard-chart-wrapper,
.report-chart-wrapper {

    min-width:
        0;

    max-width:
        100%;

    overflow:
        hidden;

}


/*
    IMPORTANT:

    Never force canvas height globally.

    Chart.js remains responsible for canvas rendering.
*/

.dashboard-chart-wrapper canvas,
.report-chart-wrapper canvas {

    display:
        block;

    max-width:
        100%;

}


/*==============================================================
    16. MOBILE NAVIGATION SAFETY
==============================================================*/

@media (max-width: 900px) {

    .navbar {

        width:
            100%;

    }


    .nav-links {

        max-width:
            100vw;

    }

}


/*==============================================================
    17. TABLET GLOBAL POLISH
==============================================================*/

@media (max-width: 850px) {

    .container,
    .page-container,
    .main-container {

        width:
            calc(100% - 40px);

    }


    .site-footer {

        padding-left:
            20px;

        padding-right:
            20px;

    }

}


/*==============================================================
    18. MOBILE GLOBAL LAYOUT
==============================================================*/

@media (max-width: 700px) {

    .container,
    .page-container,
    .main-container {

        width:
            calc(100% - 32px);

    }


    main {

        width:
            100%;

    }


    section {

        max-width:
            100%;

    }


    .dashboard-toolbar,
    .report-toolbar {

        width:
            100%;

    }


    .profile-header,
    .report-content-header {

        width:
            100%;

    }

}


/*==============================================================
    19. MOBILE TYPOGRAPHY
==============================================================*/

@media (max-width: 600px) {

    body {

        font-size:
            14px;

    }


    h1 {

        font-size:
            clamp(1.65rem,
                8vw,
                2.15rem);

    }


    h2 {

        font-size:
            clamp(1.25rem,
                6vw,
                1.65rem);

    }


    h3 {

        font-size:
            1rem;

    }


    p {

        line-height:
            1.65;

    }

}


/*==============================================================
    20. SMALL MOBILE
==============================================================*/

@media (max-width: 480px) {

    .container,
    .page-container,
    .main-container {

        width:
            calc(100% - 24px);

    }


    .dashboard-container,
    .reports-container,
    .profile-container {

        width:
            calc(100% - 24px);

    }


    .site-footer {

        padding:
            28px 12px;

    }


    .site-footer p {

        font-size:
            0.65rem;

    }

}


/*==============================================================
    21. EXTRA SMALL MOBILE
==============================================================*/

@media (max-width: 360px) {

    .container,
    .page-container,
    .main-container,
    .dashboard-container,
    .reports-container,
    .profile-container {

        width:
            calc(100% - 20px);

    }


    .btn {

        max-width:
            100%;

        white-space:
            normal;

    }


    .auth-card {

        padding-left:
            14px;

        padding-right:
            14px;

    }

}


/*==============================================================
    22. TOUCH DEVICE IMPROVEMENTS
==============================================================*/

@media (hover: none) and (pointer: coarse) {

    button,
    .btn,
    .nav-links a,
    .theme-btn,
    .notification-btn,
    .table-action,
    .pagination-btn {

        min-height:
            38px;

    }


    .table-action {

        min-width:
            38px;

    }


    .pagination-btn {

        min-width:
            38px;

    }

}


/*==============================================================
    23. NOTIFICATION PANEL SAFETY
==============================================================*/

.notification-panel {

    max-width:
        min(420px,
            calc(100vw - 24px));

}


@media (max-width: 480px) {

    .notification-panel {

        right:
            12px;

        left:
            12px;

        width:
            auto;

        max-width:
            none;

    }

}


/*==============================================================
    24. MODAL SAFETY
==============================================================*/

.modal,
.modal-overlay {

    max-width:
        100vw;

}


.modal-content {

    width:
        min(calc(100% - 32px),
            620px);

    max-height:
        calc(100vh - 40px);

    overflow-y:
        auto;

}


@media (max-width: 480px) {

    .modal-content {

        width:
            calc(100% - 20px);

        max-height:
            calc(100vh - 24px);

    }

}


/*==============================================================
    25. SEARCH INPUT SAFETY
==============================================================*/

.dashboard-search,
.report-search-wrapper input,
.notification-search {

    min-width:
        0;

    max-width:
        100%;

}


/*==============================================================
    26. HORIZONTAL ACTION GROUPS
==============================================================*/

.dashboard-toolbar-actions,
.report-toolbar-actions,
.report-actions,
.report-export-actions,
.bulk-action-buttons {

    max-width:
        100%;

}


@media (max-width: 600px) {

    .dashboard-toolbar-actions,
    .report-toolbar-actions,
    .report-actions,
    .report-export-actions,
    .bulk-action-buttons {

        flex-wrap:
            wrap;

    }

}


/*==============================================================
    27. CARD CONTENT SAFETY
==============================================================*/

.card,
.dashboard-card,
.dashboard-stat-card,
.dashboard-chart-card,
.role-dashboard-card,
.profile-section,
.student-performance-card,
.report-card,
.report-content-card,
.report-summary-card,
.admin-data-card,
.teacher-class-card {

    min-width:
        0;

    overflow:
        hidden;

}


/*==============================================================
    28. CARD LINKS
==============================================================*/

.card a,
.dashboard-card a,
.report-card a {

    overflow-wrap:
        anywhere;

}


/*==============================================================
    29. EMPTY STATE RESPONSIVENESS
==============================================================*/

.data-empty-state {

    width:
        100%;

    min-width:
        0;

}


@media (max-width: 480px) {

    .data-empty-state {

        min-height:
            180px;

        padding:
            28px 14px;

    }

}


/*==============================================================
    30. PRINT OPTIMIZATION
==============================================================*/

@media print {

    *,
    *::before,
    *::after {

        color:
            #000000 !important;

        background:
            transparent !important;

        box-shadow:
            none !important;

        text-shadow:
            none !important;

    }


    body {

        min-width:
            0;

        overflow:
            visible;

    }


    .site-header,
    .navbar,
    .menu-btn,
    .theme-btn,
    .notification-btn,
    .notification-panel,
    .site-footer,
    .dashboard-toolbar,
    .report-toolbar,
    .filter-panel,
    .report-actions,
    .report-export-bar,
    .pagination,
    .profile-actions {

        display:
            none !important;

    }


    main {

        width:
            100%;

    }


    .container,
    .page-container,
    .main-container,
    .dashboard-container,
    .reports-container,
    .profile-container {

        width:
            100%;

        max-width:
            none;

        padding:
            0;

    }


    .card,
    .dashboard-card,
    .dashboard-stat-card,
    .dashboard-chart-card,
    .role-dashboard-card,
    .profile-section,
    .student-performance-card,
    .report-card,
    .report-content-card {

        break-inside:
            avoid;

        border:
            1px solid #cccccc;

    }


    .data-table-wrapper {

        overflow:
            visible;

    }


    .data-table {

        min-width:
            0;

    }

}


/*==============================================================
    31. REDUCED MOTION ACCESSIBILITY
==============================================================*/

@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {

        scroll-behavior:
            auto !important;

        animation-duration:
            0.01ms !important;

        animation-iteration-count:
            1 !important;

        transition-duration:
            0.01ms !important;

    }

}


/*==============================================================
    32. DARK THEME SURFACE CONSISTENCY
==============================================================*/

.dark-theme .card,
.dark-theme .dashboard-card,
.dark-theme .dashboard-stat-card,
.dark-theme .dashboard-chart-card,
.dark-theme .role-dashboard-card,
.dark-theme .profile-section,
.dark-theme .student-performance-card,
.dark-theme .report-card,
.dark-theme .report-content-card,
.dark-theme .report-summary-card,
.dark-theme .admin-data-card,
.dark-theme .teacher-class-card,
.dark-theme .filter-panel,
.dark-theme .report-toolbar {

    color:
        var(--text);

}


/*==============================================================
    33. DARK THEME TABLE POLISH
==============================================================*/

.dark-theme .data-table th {

    background:
        var(--surface-soft);

}


.dark-theme .data-table tbody tr:hover {

    background:
        var(--surface-soft);

}


/*==============================================================
    34. FINAL GLOBAL SELECTION
==============================================================*/

::selection {

    background:
        rgba(99,
            102,
            241,
            0.25);

    color:
        var(--text);

}


/*==============================================================
    35. FINAL SCROLLBAR POLISH
==============================================================*/

* {

    scrollbar-width:
        thin;

    scrollbar-color:
        var(--border) transparent;

}


/*==============================================================
    36. FINAL CSS SAFETY
==============================================================*/

.hidden {
    display:
        none !important;
}

.is-hidden {
    display:
        none !important;
}

.is-visible {
    display:
        block !important;
}


/*==============================================================
    37. FINAL RESPONSIVE FOOTER
==============================================================*/

@media (max-width: 600px) {

    .site-footer {

        text-align:
            center;

    }


    .site-footer p {

        margin-left:
            auto;

        margin-right:
            auto;

        line-height:
            1.6;

    }

}


/*==============================================================
    38. FINAL PART
==============================================================*/

/*
    Student Performance Analytics Portal
    style.css

    PART 10 COMPLETE

    Global CSS foundation:
    01 — Foundation
    02 — Header / Navbar / Buttons / Footer
    03 — Forms / Utilities
    04 — Cards / Sections / Layouts
    05 — Notifications / Modals / Accessibility
    06 — Tables / Charts / Analytics
    07 — Authentication / Profile
    08 — Dashboard / Admin / Teacher / Student
    09 — Reports / Filters / Search / Pagination
    10 — Responsive Polish / Cleanup

    CSS FOUNDATION COMPLETE.
*/













/* =========================================================
   GLOBAL FOOTER — MATCH HEADER BACKGROUND
   ========================================================= */

.site-footer {
    background: #312e81;
    color: #ffffff;
}

/* Footer links */
.site-footer a {
    color: #ffffff;
}

/* Footer headings */
.site-footer h3,
.site-footer h4 {
    color: #ffffff;
}

/* Footer description */
.site-footer .footer-description {
    color: rgba(255, 255, 255, 0.85);
}

/* Footer links hover */
.site-footer .footer-links a:hover {
    color: #ffffff;
}

/* Footer bottom */
.site-footer .footer-bottom {
    background: #312e81;
    color: #ffffff;
}

/* Copyright and developer text */
.site-footer .footer-copyright,
.site-footer .footer-developer {
    color: rgba(255, 255, 255, 0.85);
}

/* System status */
.site-footer .footer-status {
    color: #ffffff;
}

.site-footer .status-indicator {
    background: #22c55e;
}





/* =========================================================
   FINAL HEADER + FOOTER CONSISTENCY
   ========================================================= */

.site-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 9999;
    width: 100%;
    background: #312e81;
}

html.dark-theme .site-header {
    background: #312e81;
}

.site-footer,
html.dark-theme .site-footer {
    background: #312e81;
    color: #ffffff;
}

.site-footer .footer-bottom {
    background: #312e81;
    color: #ffffff;
}

body {
    padding-top: var(--header-height);
}