@import "basis-styling.css";

#main-container {
  gap: 4vh;
  justify-content: flex-start;
  overflow-x: auto;
}

main {
  padding-left: 20%;
  padding-right: 20%;
  border-radius: 20px;
  box-shadow: none;
  padding-bottom: 5%;
  mask-image: none;
  -webkit-mask-image: none;
}

#courses-outer-container,
#sets-outer-container {
  display: flex;
  flex-direction: column;
  gap: 1vh;
  height: fit-content;
  width: 100%;
}

#courses-inner-container {
  background: #e0e0e030;
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 30px;
  box-shadow: 8px 8px 16px #bebebe, -8px -8px 16px #d1e0ec;

  padding: 3%;
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

#container-header {
  width: 100%;
  height: 3vh;
  font-size: 2vh;
  color: #2a3a42;
}

#recent-outer-container {
  height: calc(100% - 5vh);
  width: 100%;
  display: flex;
  flex-direction: row;
}

#recent-column-1,
#recent-column-2 {
  height: 100%;
  width: 100%;
  border-right: 1px solid #2a3a42;
  padding: 2%;
  display: flex;
  flex-direction: column;
  gap: 2vh;
}
#recent-column-2 {
  border: none;
}

.recent-item {
  width: 100%;
  height: 5vh;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 2vh;
  padding: 2vh;
  border-radius: 30px;
  border: 1px solid rgba(255, 255, 255, 0);
  transition: background 0.3s ease, box-shadow 0.3s ease,
    backdrop-filter 0.3s ease;
}

.recent-item:hover {
  background: #ffffff30;
  box-shadow: 8px 8px 16px #bebebe, -8px -8px 16px #ffffff64;
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  border: 1px solid rgba(255, 255, 255, 0.3);
}

.image-recent-container {
  height: 6vh;
  width: 6vh;
  border-radius: 100px;
  overflow: hidden;
  padding: 1.5vh;
}
#sets-inner-container {
  border: 2px dashed #2a3a423d;
  border-radius: 35px;
  height: 25vh;
  width: 100%;
  padding: 2% 2%;
  display: flex;
  overflow-x: scroll;
  gap: 5vh;
  /* Remove justify-content: center */
  flex-wrap: nowrap;
}
.a-main-titels {
  align-items: center;
  color: #2a3a42;
  display: flex;
  font-family: "atrament";
  font-size: 2vh;
  justify-content: flex-start;
  text-decoration: none;
  transition: transform 1s ease, padding-left 1s ease;
  width: fit-content;
}

.a-main-titels:hover {
  padding-left: 2px;
  transform: scale(1.05);
}

.a-main-titels img {
  padding-bottom: 4px;
  width: 3vh;
}

.a-main-titels span {
  align-items: center;
  display: inline-flex;
  height: 3vh;
  justify-content: center;
  text-align: center;
}

footer {
  height: 0;
}

#hoofdtitel {
  color: #2a3a42;
  font-size: 3.5vh;
  font-weight: bolder;
  padding: 5%;
  width: 100%;
  font-family: "atrament";
}

.overview-outer-container {
  padding: 5%;
  padding-bottom: 0;
  position: relative;
}

.nav-overview {
  color: #2a3a42;
  display: flex;
  gap: 5vh;
  list-style: none;
  margin: 0;
  padding-bottom: 1.5vh;
}

.nav-item-overview {
  color: #2a3a42;
  cursor: pointer;
  font-size: 1.8vh;
  font-weight: 200;
  text-align: center;
  transition: color 0.3s ease, transform 0.3s ease;
  width: 10vh;
}

.nav-item-overview:hover {
  color: #76cea0;
  transform: scale(1.05);
}

.nav-item-overview.active {
  color: #2a3a42;
  font-weight: 600;
}

#underline-container {
  background-color: #a7bac3;
  border-radius: 50px;
  height: 3px;
  width: 100%;
}

#underline {
  background-color: #2a3a42;
  border-radius: 50px;
  height: 3px;
  position: absolute;
  transition: margin-left 0.3s ease-in-out;
  width: 10vh;
}

#option-outer-container {
  display: flex;
  justify-content: center;
  padding: 3% 5%;
  width: 100%;
}

.outer-container,
#studysets-outer-container,
#maps-outer-container,
#vakken-outer-container,
#verwijderd-outer-container {
  display: none;
  flex-direction: column;
  height: 50vh;
  width: 100%;
  animation: 1s fadeIn;
}

#studysets-outer-container {
  display: flex;
  transition: 1s ease;
}

.fade-in-active {
  animation: fadeIn 0.5s ease-in-out;
}

[style*="display: none"] {
  animation: none;
}

#filter-container {
  width: 100%;
}

#opties-studysets {
  appearance: none;
  background-color: transparent;
  background-image: url("data:image/svg+xml;utf8,<svg fill='%232a3a42' height='12' viewBox='0 0 24 24' width='12' xmlns='http://www.w3.org/2000/svg'><path d='M7 10l5 5 5-5z'/></svg>");
  background-position: right 0.8em center;
  background-repeat: no-repeat;
  background-size: 1em;
  border: 2px solid #2a3a42;
  border-radius: 15px;
  color: #2a3a42;
  cursor: pointer;
  font-family: "atrament", sans-serif;
  font-size: 2vh;
  height: 4.5vh;
  padding: 0 2em 0 1em;
  text-align: center;
  transition: background-color 0.3s ease, border-color 0.3s ease;
  width: 18%;
}

#opties-studysets:hover {
  background-color: rgba(42, 58, 66, 0.15);
}

#opties-studysets option {
  background-color: #ffffff;
  color: #2a3a42;
  font-family: "atrament", sans-serif;
  font-size: 2vh;
}

select::-ms-expand {
  display: none;
}

.studyset-container,
#vakken-container {
  display: grid;
  gap: 3vh;
  grid-template-columns: repeat(3, 1fr);
  padding-top: 5%;
  width: 100%;
  padding-bottom: 5vh;
}

#vakken-container {
  grid-template-columns: repeat(5, 1fr);
}

.studyset-item,
.vakken-item {
  align-items: flex-start;
  background: #e0e0e030;
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 30px;
  box-shadow: 8px 8px 16px #bebebe, -8px -8px 16px #ebfbff74;
  display: flex;
  flex-direction: column;
  gap: 2vh;
  height: 20vh;
  justify-content: center;
  padding: 0 5%;
  transition: transform 0.5s ease-in-out;
  width: 100%;
  overflow: hidden;
}

.vakken-item {
  align-items: center;
  cursor: pointer;
  justify-content: flex-start;
  padding-top: 10%;
}

.studyset-item:hover,
.vakken-item:hover {
  transform: scale(1.03);
  transform-origin: center; /* Schaling vanuit het centrum om verspringen te verminderen */
}

.datum {
  border-radius: 30px;
  font-size: 1.5vh;
  height: 1.5vh;
  opacity: 0.5;
  display: flex;
  align-items: center;
  width: 100%;
}

.delete {
  height: 2vh;
  cursor: pointer;
  pointer-events: auto;
}

.upper-data {
  width: 100%;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
}

.studyset-data {
  align-items: flex-start;
  display: flex;
  flex-direction: column;
  padding-top: 1vh;
  max-width: 70%; /* Beperk breedte om invloed van lange titels te voorkomen */
  width: 100%;
  height: 100%;
  gap: 0.2vh;
}

.studyset-inner-item {
  align-items: center;
  display: flex;
  flex-direction: row;
  gap: 3vh;
  height: 50%;
  justify-content: flex-start;
}

.outer-container-img {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: white;
  border-radius: 50%;
  overflow: hidden;
  width: 8vh;
  height: 8vh;
  filter: drop-shadow(7px 7px 4px #00000016);
  flex-shrink: 0;
  padding: 2vh;
}

.outer-container-img img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.maker {
  font-size: 1.5vh;
  opacity: 0.5;
}

.titel {
  color: #2a3a42;
  font-size: 2vh;
  font-weight: bold;
  text-overflow: ellipsis; /* Toon '...' bij te lange titels */
}

.line {
  background-color: #3d5561;
  border-radius: 100px;
  height: 1px;
  opacity: 0.5;
  width: 100%;
}

.maps-container {
  margin-top: 2vh;
  padding: 1rem 0;
  width: 100%;
}

.map-item {
  align-items: center;
  background-color: #afe8cf;
  border-bottom: 6px solid #94c8b142;
  border-radius: 1.5rem;
  color: inherit;
  display: flex;
  gap: 1vh;
  justify-content: flex-start;
  padding: 1rem 3%;
  text-decoration: none;
  transition: background-color 0.2s ease, transform 0.5s ease-in-out;

  background: #e0e0e030;
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 30px;
  box-shadow: 8px 8px 16px #bebebe, -8px -8px 16px #ffffff74;
}

.map-item:hover {
  transform: scale(1.005);
}

.map-inner-item {
  align-items: center;
  display: flex;
  gap: 1rem;
  width: 100%;
}

.map-inner-item img {
  height: 2.2vh;
  object-fit: contain;
}

.map-data {
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 100%;
}

.map-naam {
  color: #2a3a42;
  font-size: 1.25rem;
  font-weight: 100;
}

.vakken-item-outer-img {
  align-items: center;
  background-color: white;
  border-radius: 200px;
  display: flex;
  height: 10vh;
  justify-content: center;
  padding: 5%;
  width: 10vh;
  filter: drop-shadow(7px 7px 4px #00000016);
}

.vakken-item img {
  width: 70%;
}

.verwijderd-container {
  height: 100%;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.course-item-outer {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2vh;
  padding: 0;

  width: 20vh;
  height: 20vh;

  background: #ffffff30;
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 30px;

  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);

  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1), 8px 8px 16px #bebebe,
    -8px -8px 16px #ebfbff74;

  transition: transform 0.5s ease-in-out;
  overflow: hidden;
}

.course-item-outer:hover {
  transform: scale(1.05);
  transition: transform 0.5s ease-in-out;
}

.course-item-img {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 10vh;
  height: 10vh;
  padding: 5%;

  background-color: white;
  border-radius: 50%;
  filter: drop-shadow(7px 7px 4px #00000016);
}

.course-item-img img {
  width: 75%;
}
.course-item-span {
  font-weight: 800;
  width: 60%;
  text-align: center;
  height: 3vh;
}

.course-item-empty {
  display: grid;
  place-items: center; /* eenvoudiger dan flex voor centreren */
  width: 100%;
  height: 100%;
  font-size: 1.5vh;
  text-align: center;
}

#container-overview-files {
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: space-around;
}

#vak-titel {
  width: 100%;
  text-align: center;
}

.set-item-empty {
  height: 24vh;
  display: flex;
  justify-content: center;
  font-size: 1.5vh;
  align-items: center;
}
.studyset-item-empty {
  display: flex;
  justify-content: center;
  font-size: 1.5vh;
  align-items: center;
  height: 12vh;
}

@media screen and (max-width: 768px) {
  main {
    padding: 2.5%;
    padding-top: 5%;
    width: 96%;
    box-shadow: none;
    padding-bottom: 5%;
    mask-image: none;
    -webkit-mask-image: none;
  }

  .a-main-titels {
    padding-left: 5%;
  }
  #recent-outer-container {
    flex-direction: column;
    box-shadow: none;
  }

  #container-header {
    height: 5vh;
    padding: 1vh;
  }
  #courses-inner-container {
    padding: 5%;
    border: 1px solid #2a3a4215;
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.2);
  }
  #recent-column-1 {
    border: none;
    padding: 0; /* correcte reset */
  }

  .recent-item {
    padding: 0;
    width: 100%;
    border-bottom: 2px solid #2a3a4215;
    border-radius: 0;
    height: 5vh;
    align-items: center;
  }

  .recent-item:hover {
    background: transparent;
    box-shadow: none;
    border: none;
  }

  .setinfo-container {
    font-size: 2vh;
  }

  .recent-column-2:nth-child(6) {
    border-bottom: none;
  }

  .image-recent-container img {
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 3vh;
  }

  #sets-inner-container {
    padding: 2vh;
    align-items: center;
    border: 2px solid #2a3a4215;
    overflow-x: auto;
    position: relative; /* nodig voor pseudo-elementen */
    scroll-behavior: smooth;
  }

  #container-overview-studysets {
    overflow: hidden;
  }
  .studyset-container {
    display: grid;
    grid-template-columns: repeat(1, 1fr);
  }

  #vakken-container {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
  }

  #opties-studysets {
    width: fit-content;
  }
  .nav-overview {
    overflow: hidden;
  }

  #underline-container {
    overflow: hidden;
  }

  #underline {
    overflow: hidden;
  }
  .nav-item-nav-item-overview {
    width: fit-content;
    justify-content: center;
    text-align: center;
  }

  .map-item {
    padding-left: 3vh;
  }
}