/*
======================================================================
                    COLLEGE MANAGEMENT SYSTEM

                            dashboard.css

    Purpose

        This stylesheet controls the entire dashboard.

    Structure

        1. CSS Reset
        2. CSS Variables
        3. Global Styles
        4. Utility Classes
        5. Layout

    NOTE

        This file is heavily commented on purpose.

        The comments are here to help you understand
        WHY something is written, not just WHAT it does.

======================================================================
*/





/*====================================================================

                            1. CSS RESET

    Browsers apply their own default styles.

    For example,

    Chrome may give headings one margin while
    Firefox gives another.

    A reset removes those differences so every
    browser starts from the same foundation.

====================================================================*/

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

    /* Makes width calculations predictable */
    box-sizing: border-box;

    /* Remove default spacing */
    margin: 0;
    padding: 0;
    line-height: 1.5;
}





/*
    Smooth scrolling gives a nicer experience
    when navigating to sections.

    It won't affect performance noticeably.
*/

html {

    scroll-behavior: smooth;
    
}





/*
    Images should never overflow their containers.

    max-width:100% keeps them responsive.

    display:block removes tiny gaps that browsers
    sometimes leave below images.
*/

img {

    max-width: 100%;
    display: block;

}





/*
    Buttons should inherit the same font
    as the rest of the application.
*/

button {

    font: inherit;
    cursor: pointer;

}





/*
    Links should not have the default blue colour
    or underline.

    We will style them ourselves later.
*/

a {

    text-decoration: none;
    color: inherit;

}





/*
====================================================================

                        2. CSS VARIABLES

    Instead of repeating colours everywhere,
    we define them once.

    Later if you want a dark theme,
    most changes happen here.

====================================================================*/

:root {

    /*--------------------------------------------------------------
                            BRAND COLOURS
    --------------------------------------------------------------*/

    --primary-color: #FCD116;
    --primary-hover: #1d4ed8;

    /*BACKGROUND*/

    --background-color: #f5f7fb;
    --surface-color: #0F5A41;

    /*TEXT*/

    --text-color: #1f2937;
    --secondary-text: #6b7280;

    /*BORDERS*/

    --border-color: #e5e7eb;

    /*STATUS COLOURS Used later for badges,
        notifications and alert*/

    --success-color: #22c55e;
    --warning-color: #f59e0b;
    --bg-contrast: #d0d0d0;
    --danger-color: #ef4444;





    /*--------------------------------------------------------------
                            SHADOWS

        Keeping shadows consistent makes
        the UI feel professional.

    --------------------------------------------------------------*/

    --card-shadow:

        0 2px 8px rgba(0, 0, 0, 0.08);





    /*--------------------------------------------------------------
                        BORDER RADIUS

    --------------------------------------------------------------*/

    --border-radius-small: 8px;

    --border-radius-medium: 12px;

    --border-radius-large: 18px;





    /*--------------------------------------------------------------
                            SPACING

        Instead of random values,
        we use a spacing scale.

    --------------------------------------------------------------*/

    --spacing-small: 8px;

    --spacing-medium: 16px;

    --spacing-large: 24px;

    --spacing-extra-large: 32px;

    --spacing-section: 48px;

}


body {

    font-family: "Inter", sans-serif;

    background: var(--background-color);

    color: var(--text-color);

    line-height: 1.6;

}





/*
    Every heading shares the same
    text colour.

    Individual sizes come later.
*/

h1,
h2,
h3,
h4 {

    color: var(--text-color);

}





/*
    Paragraphs use a softer colour.

    This improves readability because
    headings stand out more.
*/

p {

    color: var(--secondary-text);

}





/*====================================================================

                        4. UTILITY CLASSES

    These are tiny reusable classes.

    They don't belong to a single component.

====================================================================*/





/*
    Hidden elements.

    Used for

    • Modals

    • Loading screen

    • Details page

    JavaScript simply adds or removes
    this class.
*/

.hidden {

    display: none !important;

}





/*====================================================================

                        5. APP LAYOUT

====================================================================*/





/*
    The entire application lives inside
    this container.

    Desktop

        Sidebar | Main

    Mobile

        Main

        Sidebar slides in later.

*/

.app-container {

    display: flex;

    min-height: 100vh;

}





/*
====================================================================

                        SIDEBAR

    Width is fixed.

    The content area automatically
    fills the remaining space.

====================================================================*/

.sidebar {
    width: 100vw;
    max-width: 280px;
    background: var(--surface-color);
    height: 100vh;
    border-right: 1px solid var(--border-color);
    display: flex;
    color: var(--background-color);
    flex-direction: column;
    position: sticky;
    top: 0;
}





/*
    Logo section.

    Sits at the very top of the sidebar.
*/

.sidebar-logo {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--spacing-medium);
    padding: var(--spacing-large);
    border-bottom: 1px solid var(--border-color);
}

.brand-info{
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 1rem;
}

.closeSidebarBtn{
    display: none;
}

.sidebar-logo img {

    width: 52px;

    height: 52px;

    border-radius: 50%;

}





.sidebar-logo h2 {
    color: var(--background-color);
    font-size: 1.2rem;

}





/*
====================================================================

                    SIDEBAR NAVIGATION

====================================================================*/

.sidebar-navigation {

    padding: var(--spacing-medium);

}





.sidebar-navigation ul {

    list-style: none;

}





.sidebar-navigation li {
    margin-bottom: var(--spacing-small);
}





.sidebar-navigation a {

    display: flex;

    align-items: center;

    gap: var(--spacing-medium);

    padding: 14px 16px;

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

    transition: 0.25s;

}





/*
    Hover effect.

    Desktop users receive visual feedback
    when moving the mouse.
*/

.sidebar-navigation a:hover {
    background: rgba(255,255,255,.2);
    
}





/*
    Active navigation item.

    Indicates the page
    currently being viewed.
*/

.sidebar-navigation li.active a {
    background: var(--background-color);
    color: var(--surface-color);
}

/*
====================================================================

                    MAIN CONTENT AREA

====================================================================*/

.main-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
}

/*====================================================================

                            TOP HEADER

    The header always remains at the top of the page.

    Responsibilities

        • Menu button
        • Page title
        • Logged in user

====================================================================*/

.top-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--spacing-large);
    padding: 5px 10px;
    background: var(--surface-color);
    border-bottom: 1px solid var(--border-color);
    position: sticky;
    top: 0;
}


/*
    The menu button will eventually
    open the sidebar on phones.

    It remains hidden on desktop.
*/

.menu-button {

    display: none;

    border: none;

    background: transparent;

    font-size: 1.8rem;

}





/*--------------------------------------------------------------
                    PAGE TITLE
--------------------------------------------------------------*/

.page-heading h3 {

    font-size: 1.5rem;
    color: var(--background-color);
    margin-bottom: 4px;

}





.page-heading p {

    font-size: 0.95rem;

}





/*--------------------------------------------------------------
                    USER PROFILE
--------------------------------------------------------------*/

.user-profile {

    display: flex;

    align-items: center;

    gap: var(--spacing-medium);

}





.user-profile img {

    width: 50px;

    height: 50px;

    object-fit: cover;

    border-radius: 50%;

}





.user-profile h3 {

    font-size: 1rem;

}





.user-profile p {

    font-size: 0.9rem;

}





/*====================================================================

                        MAIN ELEMENT

====================================================================*/

main {

    flex: 1;

    overflow-y: auto;

    padding: 38px;

}





/*====================================================================

                        DASHBOARD VIEW

====================================================================*/

.dashboard-view {

    display: flex;

    flex-direction: column;

    gap: var(--spacing-medium);
    border-bottom: solid 1px var(--border-color);
    padding-bottom: 1rem;

}





/*====================================================================

                        SECTION HEADER

====================================================================*/

.section-header {

    display: flex;

    justify-content: space-between;

    align-items: center;
    gap: var(--spacing-small);
}

.section-header h2 {
    font-size: 1.8rem;
    margin-bottom: 6px;
}





.section-header p {

    font-size: 0.6rem;

}





/*ANNOUNCEMENT FILTERS*/

.announcement-filters {
    display: flex;
    gap: 12px;
    overflow-x: auto;
    padding-bottom: 2rem;
    border-bottom: solid 1px var(--border-color);
}


/*
    Hide the horizontal scrollbar
    while still allowing scrolling.
*/

.announcement-filters::-webkit-scrollbar {
    display: none;
}

.filter-button {

    border: none;
    background: white;
    border: 1px solid var(--border-color);
    border-radius: 999px;
    padding: 10px 18px;
    white-space: nowrap;
    transition: 0.25s;
}


.filter-button:hover {
    background: #eef4ff;
}





.filter-button.active {

    background: var(--primary-hover);

    color: white;

}





/*====================================================================

                    ANNOUNCEMENT GROUP

====================================================================*/

.announcement-group {

    display: flex;

    flex-direction: column;

    gap: var(--spacing-large);

}





.announcement-group-title {
    color: var(--secondary-text);
    font-size: .9rem;
    padding-bottom: 10px;
    border-bottom: 2px solid var(--border-color);
}




.announcement-card {
    background: var(--background-color);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-large);
    padding: 24px;
    box-shadow: var(--card-shadow);
    display: flex;
    flex-direction: column;
    gap: 18px;
    transition:
        transform 0.25s,
        box-shadow 0.25s;
}

.announcement-card:hover {
    transform: translateY(-3px);
    box-shadow:
        0 10px 24px rgba(0,0,0,.12);
}

.announcement-category {
    align-self: flex-start;
    padding: 6px 14px;
    background: var(--background-color);
    color: var(--text-color);
    border-radius: 999px;
    font-size: .85rem;
    font-weight: 600;
}

.announcement-category2 {
    align-self: flex-start;
    padding: 10px 18px;
    background: var(--text-color);
    color: var(--background-color);
    border-radius: 999px;
    font-size: .85rem;
    font-weight: 600;
}

.announcement-title {
    font-size: 1.4rem;
    color: var(--text-color);
    line-height: 1.4;
}


.announcement-preview {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 4;
    overflow: hidden;
    color: var(--secondary-text);
    font-size: .9rem;
    white-space: pre-wrap;
}

/*READ MORE BUTTON*/

.read-more-button {
    align-self: flex-start;
    background: transparent;
    border: none;
    color: var(--success-color);
    font-weight: 600;
    padding: 0;
}





.read-more-button:hover {

    text-decoration: underline;

}





/*====================================================================

                ANNOUNCEMENT FOOTER

====================================================================*/

.announcement-footer {

    display: flex;

    justify-content: space-between;

    align-items: center;

    gap: var(--spacing-large);

    padding-top: 18px;

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

}

/*====================================================================

                    REUSABLE PROFILE COMPONENT

    Instead of styling authors, students,
    lecturers and principals separately,
    we create ONE reusable profile component.

====================================================================*/

.profile-card {

    display: flex;

    align-items: center;

    gap: var(--spacing-medium);

}





.profile-card img {

    width: 52px;

    height: 52px;

    border-radius: 50%;

    object-fit: cover;

}





.profile-information {

    display: flex;

    flex-direction: column;

}





.profile-information h4 {

    font-size: .9rem;
    color: var(--bg-contrast);
    margin-bottom: 2px;

}





.profile-information p {
    font-size: 1rem;
    color: var(--primary-color);
}





/*====================================================================

                    DATE / TIME

====================================================================*/

.announcement-date {

    display: flex;

    flex-direction: column;

    align-items: flex-end;
    color: var(--bg-contrast);
    color: red;
    gap: 4px;

}





.announcement-date small {
    color: var(--bg-contrast);
}





/*====================================================================

                    VIEW ALL BUTTON

====================================================================*/

.view-all-container {
    display: flex;
    justify-content: center;
    padding-top: 1rem;
}



.view-all-button {

    background: var(--text-color);

    color: var(--background-color);

    border: none;

    padding: 14px 28px;

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

    transition: .25s;

}





.view-all-button:hover {

    background: var(--primary-hover);

}





/*====================================================================

                ANNOUNCEMENT DETAILS PAGE

====================================================================*/

.announcement-details-view {
    max-width: 900px;
    margin: 0 auto;
    display: none;
}





.back-button {

    background: transparent;

    border: none;

    color: var(--success-color);

    font-weight: 600;

    margin-bottom: var(--spacing-large);

}





.back-button:hover {

    text-decoration: underline;

}





.details-title {

    font-size: 2.2rem;

    margin-top: 18px;

    margin-bottom: 24px;

}





.details-author {

    margin-bottom: 28px;

}





.details-information {

    display: flex;

    flex-wrap: wrap;

    gap: var(--spacing-large);

    margin-bottom: 40px;

}





.details-information p {

    color: var(--secondary-text);

}





/*====================================================================

                    ANNOUNCEMENT BODY

====================================================================*/

.announcement-body {
    background: var(--surface-color);
    border-radius: var(--border-radius-large);
    padding: 10px;
    border: 1px solid var(--border-color);
    line-height: 1.9;
    color: var(--background-color);
    font-size: .85rem;
    white-space: pre-wrap;
}


.announcement-body p {
    margin-bottom: 20px;
}

.announcement-body p:last-child {
    margin-bottom: 0;
}





/*====================================================================

                    INFORMATION PANELS

====================================================================*/

.announcement-attachments,

.announcement-information {

    margin-top: 40px;

    background: white;

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

    padding: 28px;

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

}





.announcement-attachments h2,

.announcement-information h2 {

    margin-bottom: 18px;

}





/*====================================================================

                    INFORMATION GRID

====================================================================*/

.information-grid {

    display: grid;

    grid-template-columns:

        repeat(auto-fit, minmax(220px,1fr));

    gap: 24px;

}





.information-grid strong {

    display: block;

    margin-bottom: 6px;

}

/*====================================================================

                        MODAL

====================================================================*/

.modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, .45);
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 24px;
    z-index: 1000;
}





.modal {

    background: white;

    width: min(100%, 600px);

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

    overflow: hidden;

    box-shadow: 0 20px 40px rgba(0,0,0,.2);

}





.modal-header {

    display: flex;

    justify-content: space-between;

    align-items: center;

    padding: 20px 24px;

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

}





.close-modal {

    background: transparent;

    border: none;

    font-size: 1.3rem;

}





.modal-body {

    padding: 24px;

}





.modal-footer {

    display: flex;

    justify-content: flex-end;

    gap: 12px;

    padding: 20px 24px;

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

}


.modal-footer button{
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
}
.modal-footer .positive{
    background: var(--success-color);
}


/*====================================================================

                    LOADING OVERLAY

====================================================================*/

.loading-overlay {

    position: fixed;

    inset: 0;

    background: rgba(255,255,255,.9);

    display: flex;

    justify-content: center;

    align-items: center;

    z-index: 2000;

}





.loading-box {

    text-align: center;

}





.loading-spinner {

    width: 60px;

    height: 60px;

    margin: 0 auto 24px;

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

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

    border-radius: 50%;

    animation: spin 1s linear infinite;

}





@keyframes spin {

    to {

        transform: rotate(360deg);

    }

}





/*====================================================================

                    TOAST NOTIFICATIONS

====================================================================*/

.toast-container {

    position: fixed;

    right: 20px;

    bottom: 20px;

    display: flex;

    flex-direction: column;

    gap: 16px;

    z-index: 1500;

}





.toast {

    background: white;

    padding: 16px 20px;

    border-left: 5px solid var(--primary-color);

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

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

    min-width: 280px;

}

/*
====================================================================

                        TABLETS

====================================================================*/

@media (max-width: 768px) {

    /*
        Sidebar is hidden outside the screen.

        JavaScript will slide it in later.
    */

    .sidebar {

        position: fixed;
        max-width: 100vw;
        top: 0;

        left: -100%;

        height: 100vh;

        z-index: 1500;
background: var(--background-color);
        transition: left .3s ease;
color: var(--text-color);
    }


.brand-info{
    display: flex;
    color: #000;
}

.closeSidebarBtn{
    display: block;
}


    /*
        This class will later be added
        by JavaScript.

        It makes the sidebar visible.
    */

    .sidebar.show {

        left: 0;

    }


.sidebar-logo h2{
    color: var(--text-color);
}

.sidebar-navigation li.active a {
    background: var(--surface-color);
    color: var(--background-color);
    font-weight: 600;
}

    /*
        Show menu button.
    */

    .menu-button {
        color: var(--text-color);
        display: block;
    }





    /*
        Reduce page padding.
    */

    .top-header {
        padding: 5px 15px;
        position: sticky;
        top: 0;
        left: 0;
        width: 100%;
        border-bottom: solid 1px var(--bg-contrast);
        z-index: 999;
        background: var(--background-color);
        color: var(--text-color);
    }





    main {
        padding: 10px;

    }





    /*
        Footer becomes vertical.
    */

    .announcement-footer {

        flex-direction: column;

        align-items: flex-start;

    }





    /*
        Date aligns left.

    */

    .announcement-date {

        align-items: flex-start;

    }





    /*
        Information stacks.

    */

    .details-information {

        flex-direction: column;

        gap: 10px;

    }
    
    .announcement-card {
        background: var(--surface-color);
    }
    
    .announcement-title {
         color: var(--background-color);
    }
    
    .announcement-preview{
        color: var(--bg-contrast);
        font-size: 0.75rem;
    }
}





/*
====================================================================

                    LARGE TABLETS / DESKTOP

====================================================================*/

@media (min-width: 1024px) {

    /*
        Keep announcement reading
        comfortable.

        Very wide paragraphs are tiring.

    */

    .dashboard-view {
        max-width: 950px;
    }


    /*
        Slightly larger titles.

    */

    .page-heading h3 {
        color: var(--background-color);
        font-size: 1.5rem;

    }


    .announcement-title {

        font-size: 1.55rem;

    }
}