/*inspiration: https://s-bonanno.github.io/odin-dashboard/ */
/* universal css */

@font-face {
    font-family: "Source Code Pro", monospace;
    src: url(https://fonts.googleapis.com/css2?family=Source+Code+Pro:ital,wght@0,200..900;1,200..900&display=swap);
}


html, body {
    font-family: 'Source Code Pro';
    margin: 0;
    padding: 0;
}

/* div {
    border: solid 1px black;
} */

ul, li {
    list-style-type: none;
}

.container {
    display: grid;
    grid-template-columns: 1fr 3fr 1fr;
    grid-template-rows: auto 1fr auto;
    background-color: var(--bg-main);
    color: var(--text-primary);
    row-gap: 0;
    column-gap: 30px;
}


:root {
    --bg-main: #F5F5F5;
    --bg-section: #E8ECF1;
    --primary: #256FCC;
    --primary-light: #5B8ED8;
    --accent: #E6A14D;
    --accent-muted: #CC8225;
    --text-primary: #222222;
    --text-secondary: #555555;
}

a:hover {
    color: var(--primary-light);
}

a {
    color: var(--text-primary);
}

/* header styling */

.header {
    display: grid;
    align-items: center;
    border: solid #f5f5f5;
    border-radius: 5px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    padding: 10px ; 
    margin-right: 20px;
}

.top-nav {
    padding-top: 20px;
    grid-column: 2 / 4;
    grid-row: 1;
}
.nav > ul {
    display: flex;
    justify-content: center;
    list-style-type: none;
    gap: 30px;
}

li > a {
    text-decoration: none;
    color: var(--text-primary);
}

li > a:hover {
    text-decoration: none;
    color: var(--primary-light);
}

.nav {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-row-start: 1;
    grid-column-start: 1;

}

.nav form {
    display: grid;
    align-items: center;
}

.pro-pic {
    display: flex;
    justify-content: center;
    gap: 10px;
    align-items: center;
    grid-column-start: 5;
}

.pro-pic img {
    border-radius: 100%;
    width: 50px;
    height: 50px;
    overflow: hidden;
    grid-column: 2/3;
}

.search {
    background-image: url(https://avinashlimbu.github.io/admin-dashboard/images/icons/magnify.svg);
    border-radius: 100%;
    width: 25px;
    height: 25px;
    overflow: hidden;
    grid-column: 2/3;
    background-repeat: none;
    background-position: center;

}

.search-form {
    display: flex;
    border: 1px solid var(--accent);
    border-radius: 5px;
}

.search-input {
    border: none;
    outline: none;
    padding: 5px 10px;
    font-size: 16px;
    background-color: transparent;
}


.notification {
    background-image: url(https://avinashlimbu.github.io/admin-dashboard/images/icons/notification.svg);
    border-radius: 100%;
    width: 25px;
    height: 25px;
    overflow: hidden;
    grid-column: 2/3;
    gap: 20px;
    background-repeat: none;
    background-position: center;

}


/* sidebar styling */


.sidebar {
    display: grid;
    grid-column: 1 / 2;
    grid-row: 1 / 4;
    justify-content: center;
    background-color: var(--bg-section);
    color: var(--text-primary)
}

.sidenav > ul {
    padding: 0;
    display: grid;
    gap: 30px;
}

.sidenav a {
    background-position: left top;
    background-repeat: no-repeat;
    text-decoration: none;
    padding-left: 30px;
}

/* icon images for sidebar*/

#dashboard {
    background-image: url(https://avinashlimbu.github.io/admin-dashboard/images/icons/engine.svg);
}

#home {
    background-image: url(https://avinashlimbu.github.io/admin-dashboard/images/icons/home-account.svg);
}

#profile {
    background-image: url(https://avinashlimbu.github.io/admin-dashboard/images/icons/account.svg);
}

#messages {
    background-image: url(https://avinashlimbu.github.io/admin-dashboard/images/icons/message.svg);
}

#tasks {
    background-image: url(https://avinashlimbu.github.io/admin-dashboard/images/icons/checkbox-marked-circle-auto-outline.svg);    
}

#communities {
    background-image: url(https://avinashlimbu.github.io/admin-dashboard/images/icons/forum.svg);
}

#setting {
    background-image: url(https://avinashlimbu.github.io/admin-dashboard/images/icons/engine.svg);
}

#support {
    background-image: url(https://avinashlimbu.github.io/admin-dashboard/images/icons/face-agent.svg);
}

#privacy {
    background-image: url(https://avinashlimbu.github.io/admin-dashboard/images/icons/privacy.svg);
}

#faq {
    background-image: url(https://avinashlimbu.github.io/admin-dashboard/images/icons/chat-question.svg);
}

.divider {
    border: solid 0.5px;
    border-color: var(--accent-muted);
}

.divider-nav {
    border: solid 1px var(--accent);
    width: 0.01px;
    height: 30px;
    border-radius: 5px;
}

/* Cards Styling */

.article {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    grid-auto-rows: max-content;
    grid-column: 2 / 3;
    grid-row: 2;
    gap: 20px;
}


.cards {
    border: solid whitesmoke;
    border-radius: 5px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    display: grid;
    padding: 20px;
    transition: transform 0.3s ease, box-shadow 0.3s ease; /* Smooth transition */
}

.cards:hover {
    box-shadow: 0 8px 16px rgba(5, 116, 141, 0.2); /* Enhance shadow on hover */

}

.cards > h2 { 
    display: flex;
    color: grey;
    min-height: fit-content;
    align-items: center;
}

.article > .section-title {
    font-size: 22px;
    font-weight: 400px;
    padding-top: 20px;
    grid-column: 1 / -1;
}

.icons-control {
    display: flex;
    gap: 10px;
    justify-content: end;
    padding: 0;
    margin: 0;
}

.card-icon {
    background-position: center;
    background-repeat: no-repeat;
    height: 20px;
    width: 20px;
}

.card-image {
    height: 80px;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    border: none;
    border-radius: 5px;
}

#bimage1{
    background-image: url(https://avinashlimbu.github.io/admin-dashboard/images/icons/b-image1.jpg);
}

#bimage2{
    background-image: url(https://avinashlimbu.github.io/admin-dashboard/images/icons/b-image2.jpg);
}

#bimage3{
    background-image: url(https://avinashlimbu.github.io/admin-dashboard/images/icons/b-image3.jpg);
}

#bimage4{
    background-image: url(https://avinashlimbu.github.io/admin-dashboard/images/icons/b-image4.jpg);
}

/* announcement bar styling */

.news {
    grid-column: 3 / 4;
    grid-row: 2;
}


.announcements {
    display: grid;
    padding: 30px;
    border: solid url(--bg-main);
    border-radius: 5px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    margin-right: 20px;
    gap: 30px;
}

.announcements > h2, 
.announcements > p,
.announcements > a {
    display: flex;
    margin: 0;
    padding: 0;
}
.announcements > h2 {
    height: fit-content;
}

.trending {
    display: grid;
    grid-column-start: 4;
}

.section-title-a {
    font-size: 22px;
    font-weight: 400px;
    display: grid;
    justify-content: flex-start;
    padding-top: 20px;
    grid-area: 1 / 4;
    margin-bottom: 20px;
}

.section-title-b {
    font-size: 22px;
    font-weight: 400px;
    display: grid;
    justify-content: flex-start;
    padding-top: 20px;
    margin-bottom: 20px;
}



/* trending styling */

.profile-pic { 
    background-image: url(https://avinashlimbu.github.io/admin-dashboard/images/icons/b-image4.jpg);
    border-radius: 50%;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    height: 55px;
    overflow: hidden;
    width: 55px;
}

.trending-card { 
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    gap: 10px;
    padding: 20px;
    border: solid url(--bg-main);
    border-radius: 5px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    margin-right: 20px;
    margin-bottom: 10px;
}

.trending-card > p { 
    grid-area: 2 / 1 / 2 / 4;
}

.trending-card > h2 {
    font-size: 20px;
}

.trending-card > a {
    grid-area: 3/ 1 / 3 / 4;
}

/* footer styling */

.footer {
    display: grid;
    grid-area: 3 / 1 / 4 / 4; 
    justify-content: center;
    background-color: #256FCC;
    color: whitesmoke;
    padding-top: 20px;
}

#footer-images {
    display: flex;
    justify-content: center;
    gap: 20px;
}