/*
=== GENERAL SECTION ===
*/

/* Font section */
@font-face {
  font-family: 'Marjoree';
  src: url('/static/fonts/MarjoreeMonoWeb-Regular.woff2') format('woff2');
  font-weight: normal;
  font-style: normal;
}

/* Algemeen: zorg dat de header/navigatie flex-gebaseerd is */
html, body {
    margin: 0;
    padding: 0;
    height: 100%;
    margin: 0;
    /*font-family: 'Helvetica Neue', Arial, sans-serif; */
    font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
    /*font-family: 'Marjoree', 'Helvetica Neue', sans-serif;*/
    color: #333;
    background-color: #fff;
  }
  
body {
  display: flex;
  flex-direction: column;
  padding-top: 140px;
}

header {
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 1000;
    padding: 0.5rem 1rem;
    background-color: #fff; /* of een andere achtergrond */
    display: flex;
    flex-direction: column;
    justify-content: space-between; /* merknaam links, buttons rechts */
    /*border-bottom: 1px solid #ddd;  /* optionele scheidslijn */
  }

  .header-top {
    display: flex;
    justify-content: space-between;
    padding: 0.5rem 1rem;
    border-bottom: 1px solid #ddd;
    overflow: hidden; /* zorgt dat kinderen niet buiten de header vallen */
    white-space: nowrap; /* voorkomt dat tekst breekt */
    width: 100%;
  }
  
  /* Nieuwe container voor flashmeldingen in de header */
  .header-flash {
    height: 46px;
    border-bottom: 1px solid #ddd;
  }
  
  /* Flash messages: breedte 100% binnen de header */
  .flash-messages {
    width: 100%;
    text-align: center;
    height: 46px;
  }
  
  /* Standaard flash styling */
  .flash {
    padding: 0.8rem 1rem;
    height: 1.25em;
    color: #fff;
    /*font-weight: 500;*/
    opacity: 0.8;
    transition: opacity 2s ease-out;
  }
  
  /* Categorie-specifieke kleuren */
  .flash.warning { background-color: #00FFDA; color: #333; }
  .flash.danger, .flash.error { background-color: #FFA8C2; color: #333; }
  .flash.success, .flash.info { background-color: #00CEFF; color: #333; }
  
  /* Klasse om flashmeldingen te vervagen */
  .fade-out {
    opacity: 0;
  }  
  /* Merknaam (H1) linksonderdeel */
  header .brand {
    font-size: 1.4rem;   /* iets grotere tekst */
    color: #00bfff;      /* felblauw - Artistic EntreComp kleur */
    margin: 0;           /* verwijder default spacing van H1 */
  }
  
  .brand a {
    text-decoration: none; /* Geen onderstreping */
    color: inherit; /* Gebruik dezelfde kleur als de ouder (h1) */
    display: inline-block; /* Gedraagt zich als een blok */
  }
  
  .brand a:hover, .brand a:visited {
    color: inherit; /* Zorg ervoor dat hover en visited niet de kleur veranderen */
  }
  
  /* Container voor alle rechter-elementen (Dashboard, Groups, Admin, EN, User) */
  .nav-right {
    display: flex;
    align-items: center;
    overflow-x: auto; /* maakt horizontaal scrollen mogelijk */
    max-width: 100%; /* zorgt ervoor dat de navbar niet buiten de header treedt */
    scrollbar-width: thin; /* optioneel: maakt de scrollbar dunner */
    scrollbar-color: #ccc transparent; /* optioneel: stijlt de scrollbar */
    padding-right: 1em; /* ruimte aan de rechterkant */
    margin-right: 1em;
  }
  
  /* Basisstijl voor elk button-/clickbaar element in de navbar */
  .nav-btn {
    display: inline-flex;
    align-items: center;
    margin-left: 1.5rem; /* ruimte tussen knoppen */
    text-decoration: none;
    font-size: 1rem;
    color: #333;         /* tekstkleur voor normaal */
    border: none;
    background: none;    /* zodat het lijkt op een link / pictogram */
    cursor: pointer;
    border-radius: 4px;  /* ronde hoeken */

  }
  
  /* Optioneel: stijl voor custom scrollbar in Webkit-browsers */
.nav-right::-webkit-scrollbar {
  height: 6px;
}

.nav-right::-webkit-scrollbar-thumb {
  background-color: #ccc;
  border-radius: 3px;
}
  /* Icoon binnen de button iets rechts van de tekst laten staan */
  .nav-btn .fa {
    margin-right: 0.4rem;
    font-size: 1.2rem;   /* evt. icoon groter dan tekst */
  }
  
  /* Hover-kleur: dezelfde kleur als de brand-kleur */
  .nav-btn:hover {
    color: #00bfff;
  }
  
  /* Aangevinkt / bezocht: dezelfde kleur als normaal */
  .nav-btn:visited {
    color: #333;
  }
  
  /* Taalbutton (EN) als 'grijze knop' */
  .lang-toggle {
    border-radius: 4px;
    background-color: #e0e0e0; /* grijze achtergrond */
    padding: 0.4rem 0.8rem;
    transition: background-color 0.2s;
  }
  
  .lang-toggle:hover {
    background-color: #ccc; /* iets donkerder grijs bij hover */
  }
  
  /* Gebruikersnaam als los element (in je screenshot 'Test User') */
  .username {
    margin-left: 1.5rem;
    color: #555;
    font-weight: 500;
  }

  @media (max-width: 800px) {
    header .brand {
      font-size: 0.8rem;
    }

    .nav-text {
      display: none; /* Verberg alleen de tekst */
    }
  
    .nav-btn {
      margin-left: 0px; 
      padding: 0.4rem; /* Maak knoppen compacter */
    }
  
    .nav-btn i {
      font-size: 1.5rem; /* Maak de iconen iets groter voor betere klikbaarheid */
    }
  }

main {
  width: 80%;
  max-width: 1000px;
  margin: 0 auto;
  padding: 1rem;
  flex: 1;
}

/* Footer styling: vergelijkbaar met header, maar bovenaan een border-top */
footer {
  padding: 0.5rem 1rem;
  background-color: #fff;
  display: flex;
  align-items: center;
  justify-content: center; /* of space-between, afhankelijk van je layout */
  border-top: 1px solid #ddd;
}


/*
=== DASHBOARD USER SECTION ===
*/

  /* Globale container voor het dashboard */
.dashboard-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 1rem;
  }
  
  /* Welkomstdeel */
  .dashboard-intro h1 {
    margin: 0;
    font-size: 2rem;
    font-weight: 700;
  }
  
  .dashboard-intro p {
    margin: 0.3rem 0 2rem 0;
    color: #555;
  }
  
  .general-info {
    max-width: 600px;
    line-height: 1.5;
    margin: 0 auto;
  }

  .general-info img {
    width: 75%;
    height: auto;
    display: block;
    margin: 1rem auto;
  }

  .general-info-list {
    margin: 1rem auto;
  }

  .action-buttons {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1rem; /* optioneel, ruimte tussen buttons */
    margin: 2rem 0;  
  }

  /* Cards-sectie - kaarten naast elkaar op groter scherm, gestapeld op mobiel */
  .dashboard-cards {
    display: flex;
    flex-wrap: wrap; /* past zich aan op kleine schermen */
    gap: 1rem;
    margin-bottom: 2rem;
  }
  
  /* Basisstijl voor elke card */
  .dashboard-card {
    background-color: #fafafa;
    border: 1px solid #eee;
    border-radius: 8px;
    flex: 1 1 100px;  /* zorgt dat ze mooi meeschalen */
    padding: 1rem;
    box-sizing: border-box;
  }
  
  /* Header met titel + icoon */
  .card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.5rem;
  }
  
  .card-header h2 {
    font-size: 1.1rem;
    margin: 0;
    color: #333;
  }
  
  .card-header i {
    font-size: 1.4rem;
    color: #999;
  }
  
  /* Content van de card (waarde en subtitel) */
  .card-body {
    margin-top: 0.5rem;
  }
  
  .card-value {
    font-size: 1.8rem;
    font-weight: bold;
    margin: 0;
  }
  
  .card-subtitle {
    font-size: 0.9rem;
    color: #777;
    margin: 0.2rem 0 0 0;
  }
  
  /* Gekleurde varianten voor de drie cards */
  .card-ideas {
    border: 1px solid #ffc0cb;
    background-color: #fff5f8;
  }
  
  .card-ideas .card-value {
    color: #ff6699; /* roze tint */
  }
  
  .card-resources {
    border: 1px solid #88d0ff;
    background-color: #f0fbff;
  }
  
  .card-resources .card-value {
    color: #00aaff;
  }
  
  .card-action {
    border: 1px solid #8af7dd;
    background-color: #e0fff8;
  }
  
  .card-action .card-header i {
    color: #00c8a0;
  }
  
  /* Btn binnen de derde card */
  .new-assessment-btn {
    background-color: #00ffc8; /* mint/groen */
    border: none;
    color: #333;
    padding: 0.6rem 0.8rem;
    border-radius: 4px;
    cursor: pointer;
    font-weight: 500;
    display: inline-flex;
    align-items: center;
  }
  
  .new-assessment-btn:hover {
    background-color: #00e5b0;
  }
  
  .new-assessment-btn .fa {
    margin-right: 0.4rem;
  }
  
  .dashboard-btn {
    background-color: #00bfff; /* felblauw */
    border: none;
    color: #333;
    padding: 0.6rem 0.8rem;
    border-radius: 4px;
    cursor: pointer;
    font-weight: 500;
    display: inline-flex;
    align-items: center;
  }

  .dashboard-btn:hover {
    background-color: #009fd2;
  }
  
  .home-login-btn {
    background-color: #FFA8C2;
    border: none;
    color: #333;
    padding: 0.6rem 0.8rem;
    border-radius: 4px;
    cursor: pointer;
    font-weight: 500;
    display: inline-flex;
    align-items: center;
  }

  .home-login-btn:hover {
    background-color: #ff6c98;
  }
  
  /* Tabel met geschiedenis */
  .assessment-history h2 {
    margin-top: 0;
    margin-bottom: 0.8rem;
    font-size: 1.2rem;
  }
  
  .assessment-table {
    width: 100%;
    border-collapse: collapse;
    background-color: #fff;
  }
  
  .assessment-table thead {
    background-color: #f8f8f8;
  }
  
  .assessment-table th, .assessment-table td {
    text-align: left;
    padding: 0.8rem;
    border-bottom: 1px solid #eee;
    font-size: 0.95rem;
  }
  
  /* Hover op tabelrijen */
  .assessment-table tbody tr:hover {
    background-color: #f3f3f3;
  }
  
  .assessment-table td.score-cell {
    text-align: center;  /* Getallen rechts uitlijnen */
    font-variant-numeric: tabular-nums;  /* Zorg voor gelijke breedte van cijfers */
  }

  /* Knop voor PDF-download */
  .pdf-download {
    border: none;
    background: none;
    color: #00bfff;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    font-weight: 500;
  }
  
  .pdf-download:hover {
    color: #009fd2; /* iets donkerder blauw */
  }
  
  .pdf-download .fa-file-pdf {
    margin-right: 0.4rem;
  }

/*
=== DASHBOARD GROUP SECTION ===
*/

/* Container voor group management */
.group-management-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 1rem;
  }
  
  /* Header-sectie met titel, subtitel en knop */
  .header-section {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 2rem;
  }
  
  .header-section h1 {
    margin: 0;
    font-size: 1.8rem;
  }
  
  .header-section p {
    margin: 0.5rem 0 0 0;  /* subtiel wat ruimte boven */
    color: #777;
  }
  
  /* Knop 'New Group' */
  .new-group-btn {
    background-color: #00bfff; /* Felblauw */
    border: none;
    color: #333;
    padding: 0.6rem 1rem;
    border-radius: 4px;
    cursor: pointer;
    font-weight: 500;
    display: inline-flex;
    align-items: center;
  }

  .new-group-btn:hover {
    /* Donkerder achtergrond of alleen donkerdere tekst */
    background-color: #00ade6; /* net wat dieper blauw */
    color: #f0faff;            /* de tekst kan (bijv.) subtiel wit blijven,
                                  of vervang door een donkerblauwe hex als je wilt */
  }
  
  .new-group-btn .fa {
    margin-right: 0.4rem;
  }

  /* Modal venster */
.modal {
  display: none;
  position: fixed;
  z-index: 1000;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 400px;
  background-color: white;
  box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2);
  padding: 20px;
  border-radius: 8px;
}

.modal-content {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.hidden {
  display: none;
}

.close-modal {
  float: right;
  font-size: 24px;
  cursor: pointer;
}

/* Zoekveld voor gebruikers */
#user-search {
  width: 100%;
  padding: 8px;
  margin-bottom: 10px;
  border: 1px solid #ccc;
  border-radius: 4px;
}

/* Gebruikers dropdown */
#group-manager {
  width: 100%;
  padding: 8px;
  border: 1px solid #ccc;
  border-radius: 4px;
}

.group-form-table {
  width: 100%;
  border-collapse: collapse;
}

.group-form-table td {
  padding: 8px;
  vertical-align: middle;
}

.user-dropdown {
  list-style: none;
  padding-left: 2px;
  margin-top: 0px;
  max-height: 150px;
  overflow-y: auto;
  background: #fff;
  border: 1px solid #ccc;
  border-radius: 4px;
  position: absolute;
  /* width: calc(100% - 20px); */
  z-index: 10;
}

.user-dropdown li {
  padding: 8px;
  cursor: pointer;
  font-size: 0.8em;
  text-align: left;
}

.user-dropdown li:hover {
  background-color: #f2f2f2;
}

.modal-actions {
  display: flex;
  justify-content: space-between;
  margin-top: 10px;
}

 
  /* Modal achtergrond */
.modal-overlay {
  display: none; /* Standaard verborgen */
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
}

/* Modal inhoud */
.modal-content {
  background: white;
  padding: 2rem;
  border-radius: 8px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
  max-width: 400px;
  text-align: center;
}

/* Lijst met gebruikers */
#user-list {
  list-style: none;
  padding: 0;
  max-height: 150px;
  overflow-y: auto;
  border: 1px solid #ddd;
  margin-top: 5px;
}

#user-list li {
  padding: 8px;
  cursor: pointer;
  
}

#user-list li:hover {
  background-color: #f0f0f0;
}

/* Knoppen */
.create-group-btn {
  background-color: #00CEFF;
  color: #333;
}

.close-modal-btn {
  background-color: #FFA8C2;
  color: #333;
}

.create-group-btn:hover {
  background-color: #00ade6; /* net wat dieper blauw */
  color: #333; 
}

.close-modal-btn:hover {
  background-color: #ff6c98;
  color: #333;
}

  /* Grid / flex-weergave van de groep-kaarten */
  .group-cards {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem; /* ruimte tussen kaarten */
  }
  
  /* Basisstijl groep-kaart */
  .group-card {
    background-color: #fff;
    border: 1px solid #eee;
    border-radius: 8px;
    padding: 1rem;
    flex: 1 1 300px; /* past zich aan in een rij, min 300px breed */
    box-sizing: border-box;
  }
  
  /* Naam van de groep */
  .group-card h2 {
    margin: 0 0 1rem 0;
    font-size: 1.2rem;
    font-weight: 600;
  }
  
  /* Lijst met statistieken */
  .group-card ul {
    list-style: none;
    padding: 0;
    margin: 0 0 1rem 0;
    color: #555;
  }
  
  .group-card ul li {
    display: flex;
    justify-content: space-between;
    margin-bottom: 0.3rem;
  }
  
  /* Footer van de kaart met knoppen (Results, Export) */
  .group-card-footer {
    background-color: #f8f8f8;   /* subtiele lichtgrijze balk */
    border-top: 1px solid #eee;  /* scheidingslijntje bovenaan */
    display: grid;
    grid-template-columns: 1fr 1fr 1fr; /* twee gelijke kolommen */
    place-items: center;            /* horizontaal en verticaal centreren */
    padding: 0.5rem;                /* wat extra ruimte */
  }
  
  /* Knoppen in de kaart (hergebruik nav-btn + kleine variatie) */
  .edit-group-btn, .pdf-export-btn, .csv-export-btn, .copy-link-btn {
    border: none;
    background: none;
    color: #00bfff;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
  }
  
  .edit-group-btn .fa,
  .pdf-export-btn .fa,
  .csv-export-btn .fa,
  .copy-link-btn .fa {
    margin-right: 0.4rem;
  }

  .edit-group-btn:visited {
    color: #00bfff;
  }
  
  .group-delete-container {
    display: flex;
    justify-content: center;
    margin-top: 2rem;
}

.delete-group-btn {
    background-color: #FFA8C2;
    color: white;
    border: none;
    padding: 12px 24px;
    font-size: 1rem;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s;
}

.delete-group-btn:hover {
    background-color: #e68fa8;
}

  /* Responsieve weergave voor mobiel/smalle schermen */
  @media (max-width: 600px) {
    .header-section {
      flex-direction: column;
      align-items: flex-start;
    }
    .header-section h1 {
      margin-bottom: 0.5rem;
    }
    .group-cards {
      flex-direction: column;
    }
  }

  .shortlink-container {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    margin-bottom: 1rem;
}

.shortlink-container input {
    flex-grow: 1;
    border: 1px solid #ccc;
    padding: 0.5rem;
    border-radius: 4px;
}

/*
=== DASHBOARD ADMIN SECTION ===
*/


/* Container */
.admin-dashboard-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 1rem;
  }
  
  /* Header / paginatitel */
  .header-section {
    margin-bottom: 2rem;
  }
  
  .header-section h1 {
    margin: 0;
    font-size: 1.8rem;
  }
  
  .header-section p {
    margin: 0.5rem 0 0 0;
    color: #777;
  }
  
  /* Kaarten-sectie (zelfde idee als dashboard-cards) */
  .dashboard-cards {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    margin-bottom: 2rem;
  }
  
  /* Bestaande .dashboard-card en .card-header, .card-body, .card-value, .card-subtitle
     zijn hergebruikt uit eerdere css. We maken enkel nieuwe kleuraanpassingen per kaart. */
  
  /* Card 1 (red/pink) - Users */
  .card-users {
    border: 1px solid #ffc0cb;   /* lichtroze rand */
    background-color: #fff5f8;   /* zachtroze achtergrond */
  }
  .card-users .card-value {
    color: #ff6699;              /* donkerder roze */
  }
  
  /* Card 2 (blue) - Groups */
  .card-groups {
    border: 1px solid #88d0ff;
    background-color: #f0fbff;
  }
  .card-groups .card-value {
    color: #00aaff;
  }
  
  /* Card 3 (green) - Assessments */
  .card-assessments {
    border: 1px solid #8af7dd;
    background-color: #e0fff8;
  }
  .card-assessments .card-value {
    color: #00c8a0;
  }
  
  /* Extra styling voor breakdown-list van rollen (in de card-users) */
  .role-breakdown {
    margin: 0.8rem 0 0 0;
    padding: 0;
    list-style: none;
    color: #777;
  }
  .role-breakdown li {
    margin-bottom: 0.2rem;
  }
  
  /* User Management */
  .user-management {
    margin-top: 2rem;
  }
  .user-management-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1rem;
  }
  
  .user-management-header h2 {
    margin: 0;
    font-size: 1.2rem;
    font-weight: 600;
  }
  
  /* Zorg dat User en Role links staan, Save en Actions gecentreerd */
.user-table th:nth-child(1),
.user-table td:nth-child(1),
.user-table th:nth-child(2),
.user-table td:nth-child(2) {
  text-align: left;
}

.user-table th:nth-child(3),
.user-table td:nth-child(3),
.user-table th:nth-child(4),
.user-table td:nth-child(4) {
  text-align: center;
}

/* Hover voor de rijen hergebruik je al:
.user-table tbody tr:hover { background-color: #f3f3f3; } */

/* Save-knop, lijkt op remove-user-btn maar andere kleur */
.save-user-btn {
  border: none;
  background: none;
  color: #00bfff; /* felblauw, past bij je thema */
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  font-weight: 500;
}
.save-user-btn .fa {
  margin-right: 0.3rem;
}
.save-user-btn:hover {
  color: #009fd2; /* iets donkerder blauw op hover */
}
  
  /* Knop voor nieuw account */
  .new-user-btn {
    background-color: #00bfff;
    color: #fff;
    border: none;
    padding: 0.6rem 0.8rem;
    border-radius: 4px;
    display: inline-flex;
    align-items: center;
    cursor: pointer;
  }
  .new-user-btn .fa {
    margin-right: 0.4rem;
  }
  .new-user-btn:hover {
    background-color: #009fd2;
  }
  
  /* Tabel van gebruikers */
  .user-table {
    width: 100%;
    border-collapse: collapse;
    background-color: #fff;
  }
  .user-table thead {
    background-color: #f8f8f8;
  }
  .user-table th,
  .user-table td {
    border-bottom: 1px solid #eee;
    padding: 0.8rem;
    font-size: 0.95rem;
    vertical-align: top;
  }
  
  /* Gebruikersnaam + e-mail */
  .user-email {
    font-size: 0.9rem;
    color: #777;
  }
  
  /* Hover-achtergrond op tablerow (hergebruik) */
  .user-table tbody tr:hover {
    background-color: #f3f3f3;
  }
  
  /* Dropdown voor rol-selectie */
  .role-dropdown {
    border: 1px solid #ccc;
    border-radius: 4px;
    padding: 0.3rem 0.5rem;
    font-size: 0.9rem;
    color: #333;
    background: #fff;
  }
  .role-dropdown:focus {
    outline: 1px solid #00bfff; /* accentkleur bij focus */
  }
  
  /* Verwijderknop */
  .remove-user-btn {
    border: none;
    background: none;
    color: #ff4d4f; /* rode tint voor delete */
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    font-weight: 500;
  }
  .remove-user-btn .fa {
    margin-right: 0.2rem;
  }
  .remove-user-btn:hover {
    color: #d9363e; /* iets donkerder rood bij hover */
  }
  
  /* Responsief: bij max-width 600px, stacked layout */
  @media (max-width: 600px) {
    .dashboard-cards {
      flex-direction: column;
    }
    .user-management-header {
      flex-direction: column;
      align-items: flex-start;
      gap: 0.5rem;
    }
    .user-table th:nth-child(3),
    .user-table td:nth-child(3) {
      text-align: right; /* Acties rechts */
    }
  }
  
/*
=== LOGIN SECTION ===
*/

/* Container voor login/register-sectie */
.auth-container {
    max-width: 1000px;
    margin: 0 auto;
    padding: 2rem 1rem;
  }
  
  /* Houdt de twee forms naast elkaar op desktop, stacked op mobiel */
  .auth-forms {
    display: flex;
    gap: 2rem;
    flex-wrap: wrap;  /* zodat ze onder elkaar vallen bij small screens */
  }
  
  .login-section,
  .register-section {
    flex: 1 1 400px;  /* min 400px breed, past zich aan tot max 100% */
    border: 1px solid #eee;
    border-radius: 8px;
    padding: 1.5rem;
    box-sizing: border-box;
    background-color: #fff;
  }
  
  /* Titels van login/register */
  .login-section h1,
  .register-section h1 {
    margin: 0 0 1rem;
    font-size: 1.3rem;
    font-weight: 600;
  }
  
  /* Basisstijl voor formulieren */
  .auth-form {
    display: flex;
    flex-direction: column;
  }
  
  /* Labels en inputs */
  .auth-form label {
    font-weight: 500;
    margin: 0.5rem 0 0.2rem 0;
  }
  .auth-form input[type="email"],
  .auth-form input[type="password"],
  .auth-form input[type="text"] {
    border: 1px solid #ccc;
    border-radius: 4px;
    padding: 0.5rem;
    font-size: 1rem;
    margin-bottom: 1rem;
    box-sizing: border-box;
  }
  
  /* Sign In / Register knoppen */
  .auth-btn {
    background-color: #00bfff; /* felblauw */
    border: none;
    color: #fff;
    padding: 0.6rem 0.8rem;
    border-radius: 4px;
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    cursor: pointer;
  }
  
  /* Icon + text spacing */
  .auth-btn .fa {
    margin-right: 0.4rem;
  }
  
  /* Hover */
  .auth-btn:hover {
    background-color: #009fd2;
  }

/*
=== GROUP MANAGEMENT SECTION ===
*/

.shortlink-wrapper {
  display: flex;
  margin-bottom: 0.75rem;
}

.shortlink-wrapper input {
  width: 100%;
  padding: 0.5rem;
  border: 1px solid #ccc;
  border-radius: 4px;
  background-color: #f8f8f8;
  font-weight: bold;
}

.shortlink-buttons {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
}

.shortlink-btn {
  color: #333;
}

.shortlink-btn:hover {
  opacity: 0.8;
}


.export-container {
  display: flex;
  gap: 1rem;
  margin-top: 0.5rem;
  margin-bottom: 1.5rem;
}

.export-excel-btn, .export-csv-btn {
  background-color: #00bfff;
  padding: 0.6rem 1rem;
  border-radius: 4px;
  text-decoration: none;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
}

.export-excel-btn i, .export-csv-btn i {
  margin-right: 0.5rem;
}

.export-excel-btn:hover, .export-csv-btn:hover {
  background-color: #019ed3;
  color: #333;
}


/*
=== ASSESSMENT SECTION ===
*/

/* Container voor de hele pagina */
.assessment-container {
    max-width: 800px;
    margin: 0 auto;
    padding: 2rem 1rem;
  }
  
  /* Kaart 1: vraag + description + rating */
  .assessment-main-block {
    background-color: #fff;
    border: 1px solid #eee;
    border-radius: 8px;
    padding: 1rem;
    margin-bottom: 1rem; /* ruimte tussen kaarten */
  }
  
  /* Vraag */
  .assessment-question {
    margin-bottom: 1rem;
  }
  .question-title {
    margin: 0;
    font-size: 1.2rem;
    font-weight: 600;
  }
  
  /* Description */
  .assessment-description {
    margin-bottom: 1.5rem;
    font-size: 0.95rem;
    color: #555;
  }
  
  /* Rating */
  .assessment-rating {
    /* eventueel geen extra margin, maar kan wel: margin-bottom: 1rem; */
  }
  .rating-options {
    display: flex;
    justify-content: center;
    gap: 1rem;
  }
  .rating-item {
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  .rating-item input[type="radio"] {
    display: none;
  }
  
  /* Als input[type="radio"] is :checked, kleur de bijbehorende <span> blauw */
  .rating-item input[type="radio"]:checked + span {
    background-color: #00bfff; /* blauw */
    color: #fff;
    border-color: #00bfff;
  }
  
  .rating-item span {
    display: inline-block;
    background-color: #f8f8f8;
    padding: 0.6rem 1rem;
    border-radius: 6px;
    border: 1px solid #ddd;
    cursor: pointer;
    transition: background-color 0.2s;
  }
  .rating-item span:hover {
    background-color: #eee;
  }
  
  /* Kaart 2: navigatie + progress */
  .assessment-nav-block {
    background-color: #fff;
    border: 1px solid #eee;
    border-radius: 8px;
    padding: 1rem;
    display: flex;
    flex-direction: column;
    gap: 1rem; /* ruimte tussen nav en progress */
  }
  
  /* Navigatie */
  .assessment-navigation {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.5rem;
  }
  .prev-btn {
    background-color: #00bfff;
    color: #fff;
    border: none;
    cursor: pointer;
    padding: 0.6rem 1rem;
    border-radius: 4px;
  }
  .prev-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
  }

  .prev-btn:hover {
    background-color: #009fd2;
  }
  
  .next-btn {
    background-color: #00bfff;
    color: #fff;
    border: none;
    cursor: pointer;
    padding: 0.6rem 1.2rem;
    border-radius: 4px;
    display: inline-flex;
    align-items: center;
  }
  .next-btn:hover {
    background-color: #009fd2;
  }
  .next-btn i {
    margin-left: 0.4rem;
  }
  
  .next-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
  }
  /* Progress info & bar */
  .assessment-progress {
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  .progress-info {
    font-weight: 500;
    margin-bottom: 0.4rem;
  }
  .progress-bar {
    width: 80%;
    height: 8px;
    background-color: #f2f2f2;
    border-radius: 4px;
    position: relative;
  }
  .progress-fill {
    height: 100%;
    background-color: #00bfff;
    border-radius: 4px;
  }

  .home-action-btn {
    font-weight: bold;
    font-size: 1.5rem;
    color: #000;
    margin: 0.5rem;
    padding: 0.5rem 1rem;
  }

/* assessment completion */
  #email-form {
    margin-top: 20px;
  }

  .email-btn {
    background-color: #00ffc8; /* mint/groen */
    border: none;
    color: #333;
    padding: 0.6rem 0.8rem;
    border-radius: 4px;
    cursor: pointer;
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    margin: 10px 0px;
  }
  
  .email-btn:hover {
    background-color: #00e5b0;
    color: #333;
  }
  
  .email-btn .fa {
    margin-right: 0.4rem;
  }

  .register-btn {
    background-color: #00bfff; /* felblauw */
    border: none;
    color: #333;
    padding: 0.6rem 0.8rem;
    border-radius: 4px;
    cursor: pointer;
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    margin: 10px 0px;
  }

  .register-btn:hover {
    background-color: #009fd2;
    color: #333;
  }
  
  .login-btn {
    background-color: #FFA8C2;
    border: none;
    color: #333;
    padding: 0.6rem 0.8rem;
    border-radius: 4px;
    cursor: pointer;
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    margin: 10px 0px;
  }

  .login-btn:hover {
    background-color: #ff6c98;
    color: #333;
  }

  /* Responsief: 
     Als je op mobiel iets anders wilt (bv. nav en progress in 1 rij), 
     kun je dat hier instellen. 
  */
  @media (max-width: 600px) {
    .progress-bar {
      width: 100%;
    }
  }
  
.options-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 20px;
}

.options-table th, .options-table td {
    border: 1px solid #ddd;
    padding: 10px;
    text-align: left;
}

.options-table th {
    background-color: #f4f4f4;
    font-weight: bold;
}

.options-table tr:nth-child(even) {
    background-color: #f9f9f9;
}

.options-table tr:hover {
    background-color: #f1f1f1;
}