/*
    Ontwikkelaar: David Trammer
    Website: https://trws.eu
    Datum: 18-05-2025
    Versie: 1.0 
*/

/* Appmenu onderaan */
.app-menu {
    position: fixed;
    bottom: 0;
    display: flex;
    justify-content: space-around; /* Distribute menu items evenly */
    align-items: center;
    width: 100%; /* Full width */
    background-color: rgb(23, 53, 111); /* Donkerblauwe achtergrondkleur */
    padding: 10px 0;
    margin: 0;
    box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.1); /* Optioneel: Schaduw voor visuele diepte */
    z-index: 1000;
    margin-top: 20px;
}

.app-menu .menu-item {
    flex: 1; /* Maak elk menu-item even groot */
    text-align: center; /* Centreer de iconen */
    text-decoration: none; /* Verwijder onderstreping */
    color: #ffffff; /* Witte kleur voor de iconen */
    font-size: 1.8em; /* Maak de iconen groter */
    padding: 10px 0;
    transition: color 0.3s, transform 0.3s, background-color 0.3s; /* Soepele overgangseffecten */
}

.app-menu .menu-item:hover {
    color: #ffcc00; /* Gele kleur bij hover */
    transform: scale(1.2); /* Vergroot het icoon bij hover */
}

.app-menu .menu-item.active {
    position: relative;
    background-color: #ffffff; /* Witte achtergrond voor actieve pagina */
    color: rgb(23, 53, 111); /* Blauwe kleur voor de iconen op actieve pagina */
    border-radius: 10px; /* Optioneel: Afronde hoeken voor actieve item */
    transform: scale(1.2); /* Vergroot het actieve item met 20% */
    transition: background-color 0.3s, transform 0.3s; /* Soepele overgangseffecten */
}

.app-menu .menu-item.active::after {
    content: ''; /* Verwijder de gele balk als die nog aanwezig is */
}

.app-menu .menu-item.active:hover {
    background-color: #f8f9fa; /* Lichte grijstint bij hover op actieve pagina */
    color: rgb(23, 53, 111); /* Blauwe kleur blijft behouden */
}

.menu-icon {
    width: 40px; /* Pas de grootte van het icoon aan */
    height: 40px;
    display: inline-block;
    vertical-align: middle;
    transition: transform 0.3s; /* Voeg een hover-effect toe */
}

.menu-item:hover .menu-icon {
    transform: scale(1.2); /* Vergroot het icoon bij hover */
}

.logout-button {
    display: block;
    margin: 20px auto;
    padding: 10px 20px;
    font-size: 1em;
    color: #ffffff;
    background-color: #dc3545; /* Red color for logout */
    border: none;
    border-radius: 5px;
    cursor: pointer;
    text-align: center;
}

.logout-button:hover {
    background-color: #c82333; /* Darker red on hover */
}

body.login-page {
    background-color: rgb(23, 53, 111); /* Blauwe achtergrondkleur zoals de login-container */
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh; /* Zorg ervoor dat de body minimaal de hoogte van de viewport inneemt */
}

body.login-page .logo {
    width: calc(100% - 6px); /* Zorg ervoor dat het logo 100% van de breedte inneemt minus 6px (3px marge aan beide kanten) */
    margin: 3px; /* Voeg een marge van 3px toe rondom het logo */
    display: block; /* Zorg ervoor dat het logo als blokelement wordt weergegeven */
    border-radius: 5px; /* Optioneel: Voeg afgeronde hoeken toe voor een mooiere uitstraling */
}

body {
    background-color: #ffffff; /* Standaard witte achtergrond voor andere pagina's */
    display: flex;
    flex-direction: column;
    min-height: 100vh; /* Zorg ervoor dat de body minimaal de hoogte van de viewport inneemt */
    margin: 0;
}

.login-container {
    background-color: rgb(23, 53, 111); /* Blauwe achtergrondkleur zoals de menubalk */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); /* Optioneel: Schaduw voor visuele diepte */
    padding: 20px;
    max-width: 400px;
    text-align: center;
    color: #ffffff; /* Witte tekstkleur voor contrast */
    position: relative; /* Zorg ervoor dat de container correct wordt gepositioneerd */
}

.login-container h2,
.login-container p {
    color: #ffffff; /* Witte tekstkleur voor zichtbaarheid */
}

header {
    position: sticky;
    text-align: center;
    top: 0;
    z-index: 9; /* Net onder de userScore */
    background-color: #ffffff; /* Zorg voor een achtergrondkleur */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* Optioneel: schaduw voor visuele diepte */
}

.logo-container {
    position: absolute; /* Zorg ervoor dat de container vrij kan worden gepositioneerd */
    top: -40px; /* Plaats de cirkel gedeeltelijk buiten het scherm */
    left: -40px; /* Plaats de cirkel gedeeltelijk buiten het scherm */
    background-color: rgb(23, 53, 111); /* Donkerblauwe achtergrondkleur */
    border-radius: 50%; /* Maak de container rond */
    width: 160px; /* Stel de breedte van de cirkel in */
    height: 160px; /* Stel de hoogte van de cirkel in */
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2); /* Optioneel: Schaduw voor visuele diepte */
    z-index: 10; /* Zorg ervoor dat het logo boven andere elementen staat */
}

.logo {
    width: calc(100% - 6px); /* Zorg ervoor dat het logo 100% van de breedte inneemt minus 6px (3px marge aan beide kanten) */
    margin: 3px; /* Voeg een marge van 3px toe rondom het logo */
    display: block; /* Zorg ervoor dat het logo als blokelement wordt weergegeven */
    border-radius: 5px; /* Optioneel: Voeg afgeronde hoeken toe voor een mooiere uitstraling */
    width: 100px;
    margin-bottom: 20px;
}

body:not(.login-page) .logo {
    transform: translate(5px, 20px); /* Verplaats het logo 5px naar rechts en 10px naar beneden */
    display: block; /* Zorg ervoor dat het logo correct wordt weergegeven */
}

h2 {
    color: #333;
    margin-bottom: 10px;
}

p {
    color: #666;
    margin-bottom: 20px;
}

.input-container {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 20px;
}

input {
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 5px;
    font-size: 1em;
}

input:focus {
    border-color: #007bff;
    outline: none;
}

.login-button {
    background-color: white;
    color: goldenrod;
    border: 1px solid gold;
    border-radius: 5px;
    padding: 10px;
    font-size: 1em;
    cursor: pointer;
    transition: background-color 0.3s;
}

.login-button:hover {
    background-color: #0056b3;
}

.separator {
    margin: 20px 0;
    font-size: 0.9em;
    color: #999;
    position: relative;
    text-align: center;
}

.separator span {
    background-color: rgb(23, 53, 111); /* Blauwe achtergrondkleur zoals de login-container */
    padding: 0 10px; /* Voeg padding toe zodat de tekst niet wordt overlapt */
    z-index: 1;
    position: relative;
}

.separator:before {
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    height: 1px;
    background: #ccc;
    z-index: 0;
}

.social-login {
    display: flex;
    justify-content: center;
    gap: 15px;
    margin-bottom: 20px;
}

.social-icon img {
    width: 40px;
    height: 40px;
    transition: transform 0.3s ease;
}

social-icon img:hover {
    transform: scale(1.1); /* Vergroot het logo bij hover */
}

.register-text {
    font-size: 0.9em;
    color: #666;
}

.register-text a {
    color: white;
    text-decoration: none;
}

.register-text a:hover {
    text-decoration: underline;
}

/* Footer styling */
.footer {
    text-align: center;
    font-size: 0.8em;
    margin-top: 20px;
    padding: 10px 0;
    background-color: rgb(23, 53, 111); /* Optioneel: Geef de footer een lichte achtergrondkleur */
    width: 100%; /* Zorg ervoor dat de footer de volledige breedte inneemt */
}
.footer p {
    margin: 0;
    color: gold; /* Grijze tekstkleur voor de footer */
}

/* Dark Mode Stijlen */
body.dark-mode {
    background-color: #121212; /* Donkere achtergrondkleur */
    color: #ffffff; /* Witte tekstkleur */
}

body.dark-mode header,
body.dark-mode .login-container,
body.dark-mode .app-menu 
body{
    background-color: #1e1e1e; /* Donkere achtergrond voor containers */
    color: #ffffff; /* Witte tekstkleur */
}

body.dark-mode .app-menu .menu-item {
    color: #ffffff; /* Witte iconen in de menubalk */
}

body.dark-mode .app-menu .menu-item.active {
    background-color: #333333; /* Donkere tint voor actieve pagina */
    color: #ffffff; /* Witte tekstkleur */
}

body.dark-mode input {
    background-color: #333333; /* Donkere achtergrond voor invoervelden */
    color: #ffffff; /* Witte tekstkleur */
    border: 1px solid #555555; /* Donkere rand */
}

body.dark-mode input:focus {
    border-color: #007bff; /* Blauwe rand bij focus */
}

body.dark-mode .logout-button {
    background-color: #dc3545; /* Rode knop blijft hetzelfde */
    color: #ffffff;
}

body.dark-mode .logout-button:hover {
    background-color: #c82333; /* Donkere rode tint bij hover */
}

body.dark-mode .user-score {
    background-color: #1e1e1e;
    color: #ffcc00;
}

body.dark-mode button {
    background-color: #333333;
    color: #ffffff;
}

body.dark-mode button:hover {
    background-color: #444444;
}

/* Update the logo background in dark mode */
body.dark-mode .logo-container {
    background-color: #1e1e1e; /* Dark background for the logo */
}

/* Update the table in dark mode */
body.dark-mode table {
    background-color: #1e1e1e;
    color: #ffffff;
    border-collapse: collapse;
}

body.dark-mode table th,
body.dark-mode table td {
    border: 1px solid #444444; /* Add borders for table cells */
    padding: 8px;
    text-align: left;
}

body.dark-mode table th {
    background-color: #333333; /* Darker background for table headers */
    color: #ffcc00; /* Gold color for headers */
}

body.dark-mode table tr:nth-child(even) {
    background-color: #2a2a2a; /* Slightly lighter background for even rows */
}

body.dark-mode table tr:nth-child(odd) {
    background-color: #1e1e1e; /* Darker background for odd rows */
}

/* Update Debbie's score highlight in dark mode */
body.dark-mode #debbie-score {
    background-color: #1e1e1e;
    color: #ffcc00; /* Gold color for Debbie's score */
    padding: 10px;
    border-radius: 5px;
    border: 1px solid #444444;
}

/* Dark mode styles for Debbie's highlight section */
body.dark-mode .debbie-highlight {
    background-color: #1e1e1e; /* Dark background */
    color: #ffcc00; /* Gold text color */
    border: 1px solid #444444; /* Subtle border */
    padding: 10px;
    border-radius: 5px;
}

/* Dark mode styles for the scoreboard table */
body.dark-mode table {
    background-color: #1e1e1e; /* Dark background for the table */
    color: #ffffff; /* White text color */
    border-collapse: collapse;
}

body.dark-mode table th {
    background-color: #333333; /* Darker background for table headers */
    color: #ffcc00; /* Gold text color for headers */
    padding: 10px;
    text-align: left;
}

body.dark-mode table td {
    background-color: #1e1e1e; /* Consistent dark background for table cells */
    color: #ffffff; /* White text color for table cells */
    border: 1px solid #444444; /* Subtle border for table cells */
    padding: 8px;
}

body.dark-mode table tr:nth-child(even) {
    background-color: #2a2a2a; /* Slightly lighter background for even rows */
}

body.dark-mode table tr:nth-child(odd) {
    background-color: #1e1e1e; /* Darker background for odd rows */
}

/* Dark mode styles for the floating user score */
body.dark-mode .user-score {
    background-color: #1e1e1e; /* Dark background */
    color: #ffcc00; /* Gold text color */
    border: 1px solid #444444; /* Subtle border */
    padding: 10px;
    border-radius: 5px;
}

/* Hide the desktop-warning by default */
.desktop-warning {
    display: none;
    color: red;
    font-size: 1.2em;
    text-align: center;
    margin: 20px;
}

/* Scoreboard Styles */
.scoreboard-container {
    margin: 20px auto;
    max-width: 800px;
    overflow-x: auto;
}

#scoreboard {
    width: 100%;
    border-collapse: collapse;
    margin: 0 auto;
    background-color: #ffffff;
    color: #17356f;
    text-align: left;
    border-radius: 5px;
    overflow: hidden;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

#scoreboard th, #scoreboard td {
    padding: 10px;
    border: 1px solid #ddd;
}

#scoreboard th {
    background-color: #17356f;
    color: #ffffff;
    text-transform: uppercase;
    font-size: 0.9em;
}

#scoreboard tr:nth-child(even) {
    background-color: #f9f9f9;
}

#scoreboard tr:hover {
    background-color: #f1f1f1;
}

/* Debbie Highlight Section */
.debbie-highlight {
    text-align: center;
    margin: 20px;
    padding: 10px;
    background-color: #f9f9f9;
    border: 2px solid #17356f;
    border-radius: 5px;
    color: #17356f;
}

.debbie-highlight h2 {
    margin: 0;
    font-size: 1.5em;
    font-weight: bold;
}

.debbie-highlight p {
    margin: 5px 0 0;
    font-size: 1.2em;
    font-style: italic;
}

/* Floating Div for User Score */
.user-score {
    position: fixed;
    top: 10px;
    right: 10px;
    background-color: #17356f; /* Dark blue background */
    padding: 10px 15px;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    font-family: Arial, sans-serif;
    font-size: 1em;
    z-index: 1000; /* Ensure it stays on top */
    text-align: center;
}

.user-score p {
    margin: 0;
    font-weight: bold;
    font-size: 2em;
    color: goldenrod; /* Gold color for the score */
}

/* Timer Controls */
#timer-controls {
    margin: 20px 0;
    text-align: center;
}

#timer-controls button {
    padding: 10px 20px;
    font-size: 1em;
    color: #fff;
    background-color: #007bff;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    margin: 5px;
    transition: background-color 0.3s ease;
}

#timer-controls button:hover {
    background-color: #0056b3;
}

#timer-controls button:disabled {
    background-color: #ccc;
    cursor: not-allowed;
}

/* Dark Mode Toggle Button */
#dark-mode-toggle {
    background-color: #333333; /* Default dark background */
    color: #ffffff; /* White text color */
    border: none;
    border-radius: 50%; /* Make it circular */
    width: 50px;
    height: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    transition: background-color 0.3s ease, transform 0.3s ease;
}

#dark-mode-toggle:hover {
    background-color: #444444; /* Slightly lighter on hover */
    transform: scale(1.1); /* Slightly enlarge on hover */
}

#dark-mode-icon {
    font-size: 1.5em; /* Make the icon larger */
}

/* Container for top buttons */
.top-buttons {
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px;
    margin-bottom: 10px;
}

/* Logout button (left side) */
#logout-button {
    background-color: #c82333; /* Red background */
    color: #ffffff; /* White text */
    border: none;
    border-radius: 5px;
    padding: 10px 15px;
    cursor: pointer;
    font-size: 1em;
    transition: background-color 0.3s ease;
}

#logout-button:hover {
    background-color: #a71d2a; /* Darker red on hover */
}

/* Dark mode toggle button (right side) */
#dark-mode-toggle {
    background-color: #333333; /* Dark background */
    color: #ffffff; /* White text */
    border: none;
    border-radius: 50%; /* Circular button */
    width: 50px;
    height: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    transition: background-color 0.3s ease, transform 0.3s ease;
}

#dark-mode-toggle:hover {
    background-color: #444444; /* Slightly lighter on hover */
    transform: scale(1.1); /* Slightly enlarge on hover */
}

#dark-mode-icon {
    font-size: 1.5em; /* Larger icon */
}

/* Global text styles for dark mode */
body.dark-mode {
    background-color: #121212; /* Dark background */
    color: #ffffff; /* White text color for all text */
}

body.dark-mode p,
body.dark-mode h1,
body.dark-mode h2,
body.dark-mode h3,
body.dark-mode h4,
body.dark-mode h5,
body.dark-mode h6,
body.dark-mode span,
body.dark-mode a {
    color: #ffffff; /* Ensure all text elements are white */
}

body.dark-mode a:hover {
    color: #ffcc00; /* Optional: Gold color for links on hover */
}

/* Ensure table headers and cells have white text in dark mode */
body.dark-mode table th,
body.dark-mode table td {
    color: #ffffff; /* White text for table content */
}

/* Ensure specific sections like Debbie's highlight have white text */
body.dark-mode .debbie-highlight,
body.dark-mode #debbie-score {
    color: #ffffff; /* White text for Debbie's score and highlight section */
}

.container-quiz {
    background-color: #fff;
    padding: 30px;
    border-radius: 8px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    text-align: center;
}

#question-container {
    margin-bottom: 20px;
}

#question {
    font-size: 1.2em;
    margin-bottom: 10px;
}

.input-quiz[type="text"] {
    padding: 10px;
    margin-bottom: 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
    width: 200px;
}

.button-quiz {
    padding: 10px 20px;
    background-color: #007bff;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 1em;
}

.button-quiz:hover {
background-color: #0056b3;
}

.hidden-quiz {
    display: none;
}