/* Zorg ervoor dat de html ook als flex container werkt */
html, body {
    height: 100%; /* Zorg ervoor dat de body en html volledig het scherm vullen */
    margin: 0; /* Verwijder standaard marges */
    padding: 0; /* Verwijder standaard padding */
    display: flex;
    flex-direction: column;
    align-items: center; /* Horizontaal centreren van alle inhoud */
    justify-content: flex-start; /* Verticale centrering van de inhoud */
}

/* Font-face definitie voor het aangepaste lettertype */
@font-face {
    font-family: 'Heijmans-BlackCon';
    src: url('/fonts/Heijmans-BlackCon.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Heijmans-Normal';
    src: url('/fonts/Heijmans-Normal.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

/* Basisinstellingen voor de canvas-grafieken */
canvas {
    width: 100% !important;
    height: 250px !important;
}

/* Globale instellingen voor Poppins als standaard lettertype */
body {
    font-family: 'Heijmans-BlackCon';
    color: #333;
    display: flex;
    flex-direction: column;
    align-items: center; /* Horizontaal centreren van de inhoud */
    justify-content: flex-start; /* Verticale centrering van de inhoud */
    width: 100%; /* Zorg ervoor dat het lichaam de volledige breedte heeft */
    min-height: 100vh; /* Zorg ervoor dat de body de volledige hoogte van het scherm beslaat */
}

/* Styling voor hoofdtitel */
h1 {
    text-align: center;
    font-size: 24px;
    font-weight: bold;
    margin-bottom: 20px;
    margin-top: 40px; /* Ruimte boven de eerste h1 */
}

/* Styling voor de chart-container */
.chart-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* Drie kolommen */
    gap: 10px; /* Ruimte tussen grafieken */
    max-width: 1200px;
    margin: 0 auto; /* Centreer de container horizontaal */
}

/* Styling voor individuele grafieken (chart-tile) */
.chart-tile {
    background-color: #fff;
    border-radius: 6px;
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
    padding: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

/* Styling voor de dropdown-container */
.dropdown-container {
    text-align: center;
    font-family: 'Heijmans-Normal';
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin: 20px 0;
}

/* Styling voor het select-element */
#company-select {
    width: 300px;
    padding: 10px;
    font-size: 16px;
    font-family: 'Heijmans-Normal';
    border: 1px solid #ccc;
    border-radius: 5px;
    background-color: #fff;
    color: #333;
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.1);
    appearance: none;
    cursor: pointer;
}

/* Consistentie bij hover en focus op het select-element */
#company-select:hover,
#company-select:focus {
    border-color: #666;
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.2);
    outline: none;
}

/* Styling voor de label van de dropdown */
.dropdown-container label {
    display: block;
    margin-bottom: 10px;
    font-size: 16px;
    color: #555;
    font-family: 'Heijmans-Normal';
}