:root{
    --primary-color: #aee759;    
    --secondary-color: #55ac2d;
    --light-color: #a7f3d0;
    --black: #1e293b;
    --gray: #94a3b8;
    --box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.3);
    --white-outline: drop-shadow(0 0 0 black) drop-shadow(2px 2px 0 white);
}

.gray{
    color: var(--gray);
}

/* 1. Use a more-intuitive box-sizing model */
*, *::before, *::after {
box-sizing: border-box;
font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif ;
transition: all 0.3s ease-in-out;
}

/* 2. Remove default margin */
* {
margin: 0;
}

body {
/* 3. Add accessible line-height */
line-height: 1.5;
/* 4. Improve text rendering */
-webkit-font-smoothing: antialiased;
/* set bg */
background-color: rgba(166, 209, 116, 0.397);
/* overflow hidden */
overflow: hidden;
}

/* 5. Improve media defaults */
img, picture, video, canvas, svg {
display: block;
max-width: 100%;
}

/* 6. Inherit fonts for form controls */
input, button, textarea, select {
font: inherit;
}

/* 7. Avoid text overflows */
p, h1, h2, h3, h4, h5, h6 {
overflow-wrap: break-word;
}

/* 8. Improve line wrapping */
p {
text-wrap: pretty;
}
h1, h2, h3, h4, h5, h6 {
text-wrap: balance;
}

/*
9. Create a root stacking context
*/
#root, #__next {
isolation: isolate;
}

/* container */
#container{
    display: grid;        
    grid-template-columns: auto 3fr 1fr;
    grid-template-rows: auto 2fr 2fr 1fr;
    height: 100vh;
    overflow: hidden;
}

img[src$=".svg"]:not(img[src*="dashboard"]){
    height: 20px;        
    filter: var(--white-outline);
}

/* Navigation Bar */

#sidebar{
    display: grid;
    grid-template-rows: auto 3fr auto;    
    align-items: center;
    padding: 15px;        
    z-index: 9999;
}


#title-sidebar img{
    height: 60px;
    filter: var(--white-outline);
}

a, #title-sidebar > h1{
    text-decoration: none;            
    filter: var(--white-outline);
    font-size: 2rem;
    color: black;
}

.text-sidebar{
    color: black;    
    font-size: 1.5rem;    
}

nav ul{
    list-style: none;
    padding: 0;
}

nav ul[id^="lists"] li a{    
    position: relative;
    gap: 30px;    
    padding: 5px;
    font-weight: 650;    
}


nav ul[id^="lists"] a, #title-sidebar{
    display: flex;       
    align-items: center;       
}

/* lists hover effect */

nav ul[id^="lists"] a:hover{
    background-color: rgba(195, 255, 105, 0.068);    
    margin-left: 40px;
}

nav ul[id^="lists"] a::after{      
    content: "";
    position: absolute;
    top: 42px;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: white;
    transform: scaleX(0);  
    transform-origin: left;
}

nav ul[id^="lists"] a:hover::after{
    transform: scaleX(1);  
}

/* Header */
header{            
    box-shadow: var(--box-shadow);
    padding: 15px;
    display: grid;
    row-gap: 15px;
    background-color: white;
}

#search, #nav-header{
    display: grid;
    grid-column: 1 / -1;
    grid-template-columns: 1fr 0.5fr; 
    align-items: center;   
}

label[for="search-bar"], #user-menu, #header-profile{
    display: flex;
    /* flex-wrap: wrap; */
    align-items: center;
}

#search-bar{
    width: 80%;
    margin: 0px 15px;
    outline: none;
    border: none;
    background-color: #e9e1e1;
    border-radius: 15px;
    padding: 2.5px 15px;
}

#search-bar:focus{
    background-color: rgba(128, 128, 128, 0.055);    
    border-bottom: 1px solid rgba(0, 0, 0, 0.212);
    border-radius: 0px;
}

img[alt*="search"], img[alt*="notif"]{
    transform: scale(1.5);
}

img[alt*="search"]:hover, img[alt*="notif"]:hover{    
    border-radius: 5px;
    cursor: pointer;
    background-color: rgba(245, 227, 227, 0.116); 
    padding: 2.5px;
}

#user-menu{    
    grid-column: -2 / -1;
    display: grid;
    grid-template-columns: 50px 1fr;
    align-items: center;
}

/* 2nd layer of header */
#nav-profile{
    display: flex;
}

#header-links{
    display: flex;    
}

#header-links li a{
    display: block;
    padding: 5px 25px;
    font-size: 1rem;
}

#header-links li{    
    background-color: var(--primary-color);        
    border-radius: 15px;
    margin: 0px 15px;
}

#header-links li:hover{    
    background-color: var(--secondary-color);
    color: white;
    transform: scale(1.1);
}

#header-links li:hover a{
    color: white;
    filter: none;
}

/* Display Profile Picture */
.display-picture{
    height: 50px;
    width: 50px;  
    margin: 0px 15px;      
}
.display-picture img{
    height: 100%;
    width: 100%;
    object-fit:cover;
    object-position: top;
    border-radius: 100%;
}

/* Widgets */
#widgets{
    padding: 15px;    
    overflow-y: scroll;
}

#widgets h2{
    padding: 10px;
}

#announcement-card, #trending-card{
    font-size: 0.8em;
    background-color: white;
    border-radius: 15px;
    padding: 15px;
    margin-bottom: 20px;
}

.list-announcement{
    padding: 20px;
}

hr{
    width: 89%;
    margin: 0 auto; 
    border: 1px solid #8d8d8da1;   
}

.list-trending{
    display: flex;
    padding: 10px 5px;
}

/* Main */
main{
    padding: 15px 10px ;   
}

#main-card-container{
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px,1fr));
    /* grid-template-rows: repeat(auto-fit, minmax(200px)); */
}

#main-card-icons{
    display: flex;
    justify-content: right;
    padding-top: 30px;
}
.main-card{
    background-color: white;
    padding: 15px;
    margin: 5px;
    border-radius: 15px;
    border-left: 10px solid var(--light-color);
    box-shadow: var(--box-shadow);
}

.main-card p {
    height: 100px;    
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 4;
    padding-right: 50px;
}
#main-card-icons > a > img{    
    height: 30px;
    margin: 5px;
}
#main-card-icons > a:hover, .list-certificate > a:hover > img{
    transform: scale(1.3);
}

/* certificates */
#certificate-card{
    background-color: white;
    padding: 25px 20px;
}

.list-certificate p{
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    text-overflow: ellipsis;
}



/* Sections */
#sidebar{
    background-color: var(--primary-color);
    grid-row: 1 / -1;
    color: black;
}

header{    
    grid-column: 2 / -1;
    z-index: 99;
}

main{
    /* background-color: purple; */
    grid-row: 2 / -1;
    overflow-y: scroll;
}

#widgets{
    /* background-color: orange; */
    grid-column: -2 / -1;
    grid-row: 2 / -1;
}

/* Scroll Bar Design for main */
/* For Webkit browsers */
::-webkit-scrollbar {    
    height: 5px;
    width: 5px; /* Width of the scrollbar */
}

::-webkit-scrollbar-track {
    background: transparent; /* Track background color */
    border-radius: 10px; /* Round the corners */
}

::-webkit-scrollbar-thumb {    
    background: #b9b9b979; /* Thumb color */
    border-radius: 10px; /* Round the corners */
}

::-webkit-scrollbar-thumb:hover {
    background: #888; /* Thumb color on hover */
}

/* For Firefox */
.scrollbar {
    scrollbar-width: thin; /* Make the scrollbar thin */
    scrollbar-color: #888 #f1f1f1; /* Thumb color and track color */
}

/* Toggle Menu */
#toggle-menu{
    position: absolute;
    appearance: none;
}

#toggle-menu:checked ~ * .text-sidebar{
    display: none;    
}


#toggle-menu:checked ~ * a, #toggle-menu:checked ~ * a:hover{
    justify-content: center;
    margin: 0;
} 

#title-sidebar{
    cursor: pointer;
}

#title-sidebar:hover{
    transform: scale(0.9);
    opacity: 0.7;
}

#user-toggle-menu{
    position: absolute;
    appearance: none;
}

#header-profile:hover{
    transform: scale(0.9);
    cursor: pointer;    
    background-color: #94a3b818;    
}

#user-toggle-menu:checked ~ * #nav-header{
    display: none;
}

#user-toggle-menu:checked ~ main{
    grid-row-end: -1;
}

/* Responsive Web */

@media only screen and (max-width: 768px) {
   #nav-header{
    grid-template-columns: 1fr;
    gap: 10px;
   }

   #nav-profile{
        justify-content: center;
   }

   #header-links{
        justify-content: center;
   }

   main{
        grid-column: 2 / -1;
        grid-row: 2 / 4;
   }

   #widgets{
        grid-column: 2 / -1;
        grid-row: 4 / -1;
        display: flex;
        flex-direction: column;
        gap: 15px;
        background-color: #9e9e9e2a;
        box-shadow: var(--box-shadow) inset;        
   }

   #widgets h2{
        font-size: 1rem;
   }

   #widgets h3{
    font-size: 1rem;
   }

   #widgets p{
    font-size: 0.8rem;
   }

   #user-toggle-menu:checked ~ #widgets{
    display: none;
   }
}

@media only screen and (max-width: 560px) {
    #user-menu h3{
        display: none;
    }

    #nav-header{
        display: none;
    }
    
    main{
        grid-row-end: -1;
    }

    #widgets{
        display: none;
    }

    #user-toggle-menu:checked ~ * #nav-header{
        display: grid;
    }
    
    #user-toggle-menu:checked ~ main{
        grid-row-end: -2;
    }

    #user-toggle-menu:checked ~ #widgets{
        display: block;
       }
    

}

@media only screen and (max-width: 470px) {
    header, #header-links li > a{
        font-size: 0.8rem;
    }
    #header-links{
        flex-wrap: wrap;        
    }

    #header-links li{
        margin: 5px;
    }

}

@media only screen and (max-width: 400px) {
    #header-links{
        flex-wrap: wrap;        
    }

    #header-links li{
        margin: 5px;
    }

    #user-menu h3{
        display: block;
    }

    #search{
        grid-template-rows: auto auto;
        gap: 5px;
    }

    label[for="search-bar"]{
        grid-row: 2 / -1;
        grid-column: 1 / -1;
    }

    #user-menu{
        grid-column: 1 / -1;
    }


}

@media only screen and (max-width: 400px) {
    #header-profile{
     justify-content: center;
    }
    #user-menu h3{
        display: block;
        font-size: 0.8rem;
    }
}