/* Admin Dashboard designed by Vlad Hadyak */

@import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap');               /* Reg */
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@700&display=swap');      /* Bold */

:root {
  --main-font: 'Roboto', sans-serif;
  --main-bg-color: #f8fafc;
  --header-bg-color: #f1f5f9;
  --sidebar-bg-color: #f7ec9d;    
  --card-bg-color: #f1f5f9;
  --font-color: #3c3c3c;
  --min-line-height: 15px;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  padding: 0;
  min-height: 100vh;
  background: repeating-linear-gradient(45deg, var(--main-bg-color),           /* :0 */
                                               var(--main-bg-color) 10px, 
                                               #f1f1f1b0 10px, 
                                               #f1f1f1ac 20px);
  font-family: var(--main-font);
}

.grid-container {
  display: grid;
  grid-template-columns: minmax(250px, 1fr) repeat(5, 1fr);
  grid-template-rows: 250px repeat(5, 1fr);

  /* Lol */
  grid-template-areas: "sidebar header header header header header"
                       "sidebar main-content main-content main-content main-content main-content"
                       "sidebar main-content main-content main-content main-content main-content"
                       "sidebar main-content main-content main-content main-content main-content"
                       "sidebar main-content main-content main-content main-content main-content"
                       "sidebar main-content main-content main-content main-content main-content";
}

.header-container {
  grid-area: header;
  background-color: var(--header-bg-color);

  display: grid;
  grid-template-columns: 2fr 1fr;
  grid-template-rows: 1fr 1fr; 
  place-items: center;
  box-shadow: 0 8px 20px -10px rgba(0, 0, 0, 0.5);
}

.search-container {
  width: 100%;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 5px;
  padding-left: 50px;
}

.search-container input[type="text"] {
  width: 70%;
  height: 35px;
  border-radius: 20px;
  border: 1px solid rgb(168, 166, 166);
  padding: 0 20px 0 20px;
  font-size: 1.1rem;                          
  background-color: #e7ebf0;
}

.search-container input[type="text"]:focus {
  box-shadow: 0 0 2px 1px rgba(107, 49, 184, 0.563);
  border: 1px solid rgba(45, 18, 81, 0.682);    
  outline: none;
}

#search-btn {
  border: none;
  background-color: transparent;
}

/* Search icon */
.material-symbols-outlined {
  background-color: transparent;
  margin-left: -5px;
  cursor: pointer;
  color: rgb(9, 9, 9);

  font-variation-settings:
    'FILL' 0,
    'wght' 900,
    'GRAD' 0,
    'opsz' 48
}

.full-name-handler {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  width: 100%;
  gap: 10px;
  padding: 0 50px 0 0;
}

.full-name-handler .full-name {
  font-size: clamp(1.2rem, 2vw, 1.5rem);
  font-weight: bold;
}

/* Bell notification */
.full-name-handler img {
  width: clamp(20px, 2.5vw, 35px);
  height: clamp(20px, 2.5vw, 35px);
  margin-top: 3px;
}

.full-name-handler .profile-pic,
.username-avi {
  width: clamp(30px, 4vw, 55px);
  height: clamp(30px, 4vw, 55px);
  border: 1px solid black;
  border-radius: 100%;
  background-image: url(img/capy.webp);
  background-repeat: no-repeat;
  background-size: cover;
  margin-left: 20px;
}

.profile-handler {
  gap: 20px;
  display: flex;
  align-items: center;
  width: 100%;
  padding-left: 50px;
  margin-bottom: 30px;
  padding-right: 15px;
}

.profile-handler .profile-pic {
  width: clamp(60px, 6vw, 100px);
  height: clamp(60px, 6vw, 100px);
  border: 1px solid black;
  border-radius: 100%;
  background-image: url(img/capy.webp);
  background-repeat: no-repeat;
  background-size: cover;
}

/* Introduction text */
.self-intro {
  white-space: pre-line;
  line-height: calc(0.8vw + var(--min-line-height));
  font-size: clamp(1rem, 1vw, 1.2rem);
}

/* Name and username */
.self-intro span {
  font-size: clamp(1.4rem, 2vw, 2rem);
  font-weight: bold;
}

.buttons {
  width: 100%;
  margin-bottom: 30px;
  display: flex;
  justify-content: flex-end;
  gap: 30px;
  align-items: center;
  padding: 0 50px 0 0;
}

.buttons > button {
  height: clamp(30px, 3.5vw, 45px);
  width: clamp(70px, 7vw, 120px);
  border-radius: 50px;
  border: none;
  background-color: #ede292;
  border: 1px solid rgba(14, 14, 14, 0.206);
  font-size: clamp(0.8rem, 1vw, 1.2rem);
  color: rgb(8, 8, 8);
  cursor: pointer;
}

.sidebar-container {
  min-height: 100vh;
  grid-area: sidebar;
  background-color: var(--sidebar-bg-color);

  display: grid;
  grid-template-rows: 100px min-content min-content min-content;
  gap: 85px;
  box-shadow: 0 8px 10px -4px rgba(0, 0, 0, 0.5);       
}

.logo-sec {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-left: 53px;
  padding-top: 15px;
}

/* Sidebar icon */
.logo-sec > img {
  width: clamp(45px, 4vw, 60px);          
  height: 60px;
  margin-left: -10px;
}

/* Sidebar title */
.logo-sec  span {
  font-size: clamp(1.5rem, 1.7vw, 2.1rem);
  font-weight: bold;
}

.line {
  justify-self: center;
  border: 1px solid rgba(0, 0, 0, 0.591);
  height: 1px;
  width: 85%;
  margin-top: -70px;
}

.sidebar-container ul > li {
  list-style-type: none;          
  font-weight: 550; 

  font-size: clamp(1.2rem, 1.3vw, 1.6rem);      
  padding-left: 55px;
  width: 50%;
}

ul {
  padding: 0; 
  margin: 0; 
  display: flex;
  flex-direction: column;
  gap: 25px;
}

.sidebar-container > ul:first-of-type {
  margin-top: -100px;
}

/* Sidebar icons */
.sidebar-container ul > li > a > img {
  width: clamp(25px, 2vw, 35px);          
  height: 35px;
}

ul li > a {
  display: flex;
  align-items: center;
  gap: 25px;
}

a {
  color: black;
}

a:visited {
  color: black;
}

a:link {
  color: black;
}

a {
  text-decoration: none;
}

/* Projects + Announcements + Trending */
.main-content-container {
  grid-area: main-content;

  display: grid;
  grid-template-columns: repeat(2, 1fr) max(18%, 200px);
  grid-template-rows: 1fr 1fr;
  grid-template-areas: "project project side"
                       "project project side";
  column-gap: 40px;           
  margin: 0 60px 50px 40px;
  padding-top: 20px;
}

.projects {
  grid-area: project;
}

.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(330px, 1fr));
  grid-auto-rows: minmax(230px, auto);                                /* change height if more content is included */
  gap: 35px;
}

.card {
  border-left: 10px solid rgb(45, 18, 81);
  background-color: var(--card-bg-color);
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  box-shadow: 0px 2px 10px 0px rgba(0, 0, 0, 0.5);
}

.info {
  flex: 2;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 10px 50px 0 25px;                                              /* top/right/btm/left */
  row-gap: 5px;
}

/* Project title */
.title {
  font-size: clamp(1.15rem, 1.5vw, 1.3rem);
  font-weight: 600;
}

/* Project description */
.title + div {
  font-size: clamp(1rem, 1vw, 1.2rem);
  color: var(--font-color);
}

/* Project card icons */
.card .icons {
  flex: 1;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 25px;
  padding-right: 30px;
  padding-top: 10px;
}

/* Dimensions of project icons */
.icons img {
  width: 25px;         
  height: 25px;
}

/* Announcements + Trending */
.side-content {
  grid-area: side;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  row-gap: 20px;
}

.announcement-card {
  background-color: var(--card-bg-color);
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 15px;
  padding-bottom: 15px;
  box-shadow: 0px 1px 5px 0px rgba(0, 0, 0, 0.5);
}

/* Titles (Announcements section) */
.announcement-card > div h3 {
  margin-top: 15px;
  margin-bottom: -13px;
  font-size: 1.1rem;
}

/* Description (Announcements section) */
.announcement-card p {
  font-size: 0.95rem;
  color: var(--font-color);                            
}

.announcement-card > div {
  width: 82%;
  padding: 0 10px 0 10px;
}

.announcement-card > div ~ div {
  border-top: 1px solid rgb(170, 168, 168);              
}

.trending-container {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.trending-card {
  flex: 1;
  background-color: var(--card-bg-color);
  border-radius: 10px;

  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  padding-right: 20px;
  padding-top: 25px;
  padding-bottom: 5px;
  box-shadow: 0px 1px 5px 0px rgba(0, 0, 0, 0.5);
}

.cards,
.announcement-card,
.trending-card {
  margin-top: -5px;
}

.trending-container h2,
.announcement-container h2,
.projects h2 {
  font-size: clamp(1.2rem, 1.5vw, 1.5rem);
}

/* Trending item */
.item {
  display: flex;
  gap: 15px;
}

/* User's Avatar */ 
.username-avi.one {
  background-image: url(img/chick.jpeg);
}

.username-avi.two {
  background-image: url(img/pepe.jpg);
  background-position: 0 -6px;
}

.username-avi.three {
  background-image: url(img/depressed.webp);
  background-position: -8px 0px;
}

.username-avi {
  width: clamp(30px, 4vw, 55px);
  height: clamp(30px, 4vw, 55px);
  flex-shrink: 0;
  margin-top: 2px;
}

.username-1,
.username-2,
.username-3 {
  font-size: clamp(0.8rem, 1vw, 1.06rem);
}

/* Username's comment */
.item > div > span {
  font-size: clamp(0.7rem, 1vw, 0.92rem);
  color: var(--font-color);
}

/* Username + comment text */
.item > div:last-child {
  line-height: clamp(0.8rem, 1vw, 1.35rem);
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding-bottom: 20px;
}

.item div:last-child > span {
  line-height: clamp(0.8rem, 1vw, 1.1rem);
}

/* Hover effects */
.full-name-handler img,
.buttons > button,
.sidebar-container ul > li,
.card {
  transition: transform 0.3s ease-out;
}

.buttons > button:hover {
  background-color: #e7d867;
}

.buttons > button:active,
.sidebar-container ul > li:hover,
.full-name-handler img:active {
  transform: scale(1.2);
}

.sidebar-container ul > li:active {
  transition: transform 0.1s ease-out;   
  transform: scale(1.3);
}

.icons a {
  transition: transform 0.3s ease-out;
}

.icons a:hover {
  transform: scale(1.3);
}

.icons a:active {
  transform: scale(1.7);
}

.card:hover {
  transform: scale(1.06);
  cursor: pointer;
  border-top: 3px solid rgb(45, 18, 81);
  border-bottom: 3px solid rgb(45, 18, 81);
}

/* Mobile Responsiveness */
@media (max-width: 900px) {
  body {
    overflow-x: hidden;
  }

  .line {
    display: none;
  }

  .grid-container {
    grid-template-columns: 1fr;
    grid-template-areas: "header"
                         "sidebar"
                         "main-content";

    display: flex;
    flex-direction: column;
    margin-bottom: 50px;
  }

  .header-container {
    grid-area: header;
    display: grid;
    grid-template-columns: 1fr;                        /* Single column layout for mobile */
    grid-template-rows: auto;
    grid-template-areas: "search full-name"
                         "profile profile"
                         "buttons buttons";
  }

  .sidebar-container {
    min-height: auto;
    grid-area: sidebar;
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr 0.5fr;
    grid-template-areas: "list-1"
                         "list-2";         
    gap: 1px; 
    position: -webkit-sticky;
    position: sticky;
    top: -5px;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    background-color: rgba(236, 241, 197, 0.641);     
    box-shadow: 0 8px 10px -8px rgba(0, 0, 0, 0.5);       
  }

  .sidebar-container > ul:first-of-type{
    grid-area: list-1;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1px;
    padding: 0;
    margin: 0;   
    margin-top: 10px;
    padding-right: 10px;
  }

  .sidebar-container > ul:last-of-type {
    grid-area: list-2;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1px;
    padding: 0;
    margin: 0;
    margin-bottom: -5px;
    padding-right: 10px;
  }

  .sidebar-container ul > li {
    font-size: clamp(0.7rem, 3vw, 0.9rem);
  }

  .logo-sec > span,
  .logo-sec > img {
    display: none;
  }
  
  .main-content-container {
    grid-area: main-content;
    display: grid;
    grid-template-columns: 1fr;                      /* Single column layout for mobile */
    grid-template-rows: auto;
    grid-template-areas: "project"
                         "side";
  }   

  .cards {
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  }

  .projects {
    grid-area: project;
  }

  .side-content {
    grid-area: side;
  }
  
  .full-name-handler .full-name {
    font-size: 1rem;
  }
  
  .full-name-handler .profile-pic {
    width: 20px;
    height: 20px;
    margin-right: -3px;
  }

  .full-name-handler {
    grid-area: full-name;
    margin-top: 20px;
  }

  .full-name-handler img {
    margin-right: -5px;
    margin-top: 3px;
  }
  
  .profile-handler {
    grid-area: profile;
    margin-top: 30px;
  }

  .self-intro span {
    font-size: clamp(1.1rem, 6vw, 1.35rem);
    font-weight: bold;
  }

  .self-intro {
    font-size: 0.8rem;
    line-height: 1.3rem;
  }

  .search-container {
    grid-area: search;
    justify-content: flex-start;
    margin-top: 20px;
  }

  .search-container input[type="text"] {
    height: 25px;
    font-size: 0.8rem;
    padding: 0;
    padding: 0 15px 0 15px;
    touch-action: manipulation;
  }

  .buttons {
    grid-area: buttons;
    display: flex;
    justify-content: flex-start;
    padding-bottom: 50px;
    height: auto;
    margin-bottom: -20px;
    padding-left: 50px;
  }

  .buttons > button {
    background-color: rgba(228, 237, 155, 0.641);
  }

  .announcement-container {
    margin-top: 20px;
  }

  .item > div > span {
    font-size: 0.9rem;
  }
  
  .username-1,
  .username-2,
  .username-3 {
    font-size: 1rem;
  }

  .username-avi {
    width: 40px;
    height: 40px;
  }

  .item > div:last-child {
    line-height: 1.3rem;
  }

  .icons img {
    width: 22px;         
    height: 22px;
  }

  /* Project title */
  .title {
    font-size: clamp(0.9rem, 5vw, 1.1rem);
  }

  /* Project description */
  .title + div {
    font-size: clamp(0.8rem, 4vw, 1rem);
  }
}

/* CSS for touch devices (no hover) */
@media (hover: none) {
  .buttons > button:hover {
    background-color: inherit;
    color: inherit;
  } 
  
  .buttons > button:active,
  .sidebar-container ul > li:hover,
  .full-name-handler img:active {
    background-color: inherit;
    color: inherit;
    transform: none;
  } 
  
  .sidebar-container ul > li:active {
    background-color: inherit;
    color: inherit;
    transform: none;
  } 
  
  .card:hover {
    border-top: inherit;
    border-bottom: inherit;
    transform: none;
  } 

  .icons a:hover {
    background-color: inherit;
    color: inherit;
    transform: none;
  }
}