/* ✅ Algemeen lettertype van Apple, San Francisco */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 20px;
    background-color: #f9f9f9; /* Lichtgrijze achtergrond */
    margin: 0;
    min-height: 100vh;
}

/* ✅ Zorg ervoor dat de notitie het grootste gedeelte van de beschikbare ruimte gebruikt */
.note-display {
    width: 100%;                  /* Gebruik de volledige breedte van de container */
    max-width: 100%;              /* Laat het maximaal de breedte van de container gebruiken */
    height: auto;                 /* Laat de hoogte automatisch aanpassen op basis van de inhoud */
    padding: 20px;                /* Voeg een subtiele marge toe om de notitie van de rand van het scherm af te houden */
    margin: 10px auto;            /* Zorg voor een kleine marge rondom de notitie voor een net effect */
    background-color: white;     /* Zorg ervoor dat de notitie een schone, witte achtergrond heeft */
    border-radius: 10px;          /* Geef de hoeken van de notitie een lichte afronding */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); /* Subtiele schaduw voor een luxe uitstraling */
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif; /* Gebruik het Apple-achtige font voor een luxe uitstraling */
    font-size: 16px;              /* Zorg voor een leesbare lettergrootte */
    color: #333;                  /* Zorg ervoor dat de tekst donker genoeg is om goed leesbaar te zijn */
    line-height: 1.5;             /* Zorg voor voldoende ruimte tussen de regels */
    overflow: hidden;             /* Zorg ervoor dat de inhoud netjes wordt geknipt binnen de container */
    text-align: left;             /* Zorg ervoor dat de tekst links wordt uitgelijnd */
}

/* ✅ Algemene container die de volledige breedte en hoogte gebruikt */
.container {
    width: 100%;
    height: 100%; /* Volledige hoogte van het scherm */
    max-width: 100%; /* Zorgt ervoor dat de container zich aanpast aan de breedte van het apparaat */
    margin: 0 auto; /* Zorgt ervoor dat de container gecentreerd is */
}

/* ✅ Zorgt voor nette uitlijning van de checkbox en het label */
.checkbox-group {
    display: flex;
    align-items: center;  /* Zorgt ervoor dat de checkbox en het label op dezelfde hoogte staan */
    gap: 10px;  /* Ruimte tussen de checkbox en het label */
    margin-bottom: 15px;  /* Ruimte onder de groep voor een nettere opmaak */
}

/* ✅ Vergroot de checkbox zelf en maakt ruimte tussen checkbox en label */
.checkbox-group input[type="checkbox"] {
    transform: scale(1.2); /* Vergroot de checkbox */
    margin-right: 10px; /* Voeg ruimte toe tussen de checkbox en het label */
}

/* ✅ Zorg ervoor dat het label goed uitgelijnd is en duidelijk leesbaar */
.checkbox-group label {
    font-weight: bold;
    color: #333;
    margin-bottom: 0;
}

/* ✅ Stijlen voor invoervelden zoals text, password, number, enzovoort */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="datetime-local"],
select,
textarea {
    padding: 12px;
    border: 1px solid #ccc;
    border-radius: 10px;
    width: 100%; /* Vul de volledige breedte */
    max-width: 100%; /* Zorg ervoor dat de velden de ruimte benutten */
    margin: 5px 0 15px 0; /* Zorg voor voldoende ruimte rondom */
    box-sizing: border-box; /* Zorgt ervoor dat padding de breedte niet beïnvloedt */
    font-size: 16px;
    font-family: inherit; /* Neemt het lettertype over van de body */
    background-color: #f9f9f9; /* Lichte achtergrondkleur voor velden */
    color: #333; /* Donkere tekst voor contrast */
}

/* ✅ Stijl voor de button met rustige grijze, luxe stijl */
button, .button {
    background-color: #f0f0f5; /* Rustige grijze achtergrond */
    color: #333; /* Donkere tekst voor contrast */
    border: 1px solid #ccc;
    padding: 12px 24px;
    border-radius: 12px;
    font-size: 16px;
    font-weight: bold;
    cursor: pointer;
    text-align: center;
    display: inline-block;
    transition: background-color 0.3s ease, transform 0.3s ease;
    box-sizing: border-box; /* Zorg ervoor dat padding de breedte niet beïnvloedt */
}

button:hover, .button:hover {
    background-color: #e0e0e5; /* Iets donkerder grijs bij hover */
    transform: scale(1.05); /* Klein beetje vergroten bij hover */
}

/* ✅ Knoppen in een button-groep netjes naast elkaar */
.button-group {
    display: flex;
    justify-content: flex-start; /* Zorgt ervoor dat knoppen netjes naast elkaar staan */
    gap: 10px; /* Ruimte tussen de knoppen */
    margin-top: 15px; /* Ruimte boven de knoppen */
}

/* ✅ Specifieke styling voor de textarea */
textarea {
    min-height: 100px; /* Zorgt ervoor dat het tekstveld groot genoeg is */
    resize: vertical; /* Maakt het mogelijk om het tekstveld verticaal te vergroten */
}

/* ✅ Styling voor dropdown select box */
select {
    padding: 12px;
    border: 1px solid #ccc;
    border-radius: 10px;
    width: 100%;
    font-size: 16px;
    background-color: #f9f9f9; /* Lichte achtergrondkleur voor select box */
    color: #333; /* Donkere tekst voor contrast */
    vertical-align: middle;
}

select,
button {
    height: 44px;
}

/* ✅ Styling voor de links als knoppen */
a.button {
    background-color: #f0f0f5; /* Zelfde rustige grijze achtergrond als knoppen */
    color: #333;
    padding: 12px 24px;
    border-radius: 12px;
    text-decoration: none;
    font-weight: bold;
    display: inline-block;
    transition: background-color 0.3s ease, transform 0.3s ease;
    box-sizing: border-box; /* Zorg ervoor dat padding de breedte niet beïnvloedt */
}

a.button:hover {
    background-color: #e0e0e5;
    transform: scale(1.05);
}

/* ✅ Afbeeldingen */
.image-container {
    max-width: 100%;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 10px;
    box-sizing: border-box;
    background-color: #f9f9f9;
    border-radius: 10px;
}

.image-container img {
    max-width: 100%;
    height: auto;
}

.index-image {
    display: flex;
    flex-direction: column; /* Zorg ervoor dat de inhoud onder elkaar wordt weergegeven */
    align-items: center;    /* Centreer de inhoud horizontaal */
    justify-content: center; /* Zorg ervoor dat de inhoud gecentreerd is in de container */
    text-align: center;     /* Zorg ervoor dat de tekst gecentreerd is */
    gap: 20px;              /* Voeg wat ruimte toe tussen de elementen */
}

.index-image img {
    width: 200px;
    height: 200px;
    object-fit: contain;    /* Zorg ervoor dat de afbeelding goed binnen de container past */
}
/* Zorg ervoor dat afbeeldingen binnen figuren 100% breedte van hun container gebruiken */
figure.image img {
    width: 100%;
    height: auto;  /* Dit zorgt ervoor dat de afbeeldingen hun verhoudingen behouden */
    max-width: 100%;  /* Beperk de afbeelding zodat deze de breedte van de container niet overschrijdt */
}

/* ✅ Algemene container voor de QR-notitie, inclusief de notitie zelf */
.qr-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: white;
    padding: 30px;
    border-radius: 10px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
    width: 100%;
    max-width: 800px; /* Maximaliseer de breedte voor grotere schermen */
    margin-top: 20px;
    height: auto; /* Zorgt ervoor dat de hoogte dynamisch wordt op basis van de inhoud */
}

/* ✅ Styling voor de Google Map in het formulier */
.map-block {
    width: 100%;
    height: 300px; /* Pas de hoogte van de map aan afhankelijk van de beschikbare ruimte */
    margin-top: 20px;
    border: 1px solid #ccc;
    border-radius: 10px;
    background-color: #f9f9f9; /* Lichte achtergrondkleur voor de map */
}

/* ✅ Zorgt voor een nette uitlijning van de tekst en velden */
.form-group {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    max-width: 500px; /* Zorgt voor een consistente breedte */
    margin-bottom: 15px; /* Ruimte onder elke form-groep */
}

/* ✅ Zorgt ervoor dat het label en het invoerveld netjes naast elkaar staan */
.form-group label {
    flex: 1;
    text-align: left;
    font-weight: bold;
    padding-right: 10px;
    min-width: 140px; /* Vaste breedte voor goede uitlijning */
}

/* ✅ Zorgt ervoor dat het invoerveld de volledige breedte krijgt */
.form-group input,
.form-group select,
.form-group textarea {
    flex: 2;
    text-align: left;
    padding: 12px;
    border: 1px solid #ccc;
    border-radius: 10px;
    width: 100%;
    font-size: 16px;
    background-color: #f9f9f9; /* Lichte achtergrondkleur voor velden */
    color: #333; /* Donkere tekst voor contrast */
}

/* ✅ Zorgt ervoor dat de knoppen op een rij staan */
.button-container {
    display: flex;
    justify-content: flex-start;
    gap: 10px; /* Ruimte tussen de knoppen */
    margin-top: 20px;
}

/* ✅ Spinner styling */
.spinner {
    border: 4px solid #f3f3f3; /* Lichte achtergrondkleur voor de spinner */
    border-top: 4px solid #3498db; /* Kleur van de draaiende sectie */
    border-radius: 50%;  /* Maak het rond */
    width: 30px;         /* Grootte van de spinner */
    height: 30px;        /* Hoogte van de spinner */
    animation: spin 2s linear infinite; /* Draai-effect voor de spinner */
    margin: 10px auto;    /* Centraal uitlijnen met kleine ruimte rondom */
    display: none;      /* Start met de spinner verborgen */
}

/* ✅ Badge styling */
.badge {
    display: inline-block;
    padding: 4px 10px;
    border-radius: 50px;
    font-size: 12px;
    font-weight: bold;
    margin: 2px 4px 4px 0;
}

/* ✅ Verschillende badge-kleuren */
.badge.time {
    background-color: #ffc107;
    color: #000;
}

.badge.location {
    background-color: #17a2b8;
    color: white;
}

.badge.password {
    background-color: #dc3545;
    color: white;
}

.badge.text {
    background-color: #6c757d;
    color: white;
}

.badge.streaming {
    background-color: #28a745;
    color: white;
}

.badge.redirect {
    background-color: #007bff;
    color: white;
}

/* ✅ Filter en sorteer formulier stijl */
.filter-sort-form {
    display: flex;
    gap: 10px;
    flex-wrap: wrap; /* Zorgt ervoor dat de velden onder elkaar komen als er niet genoeg ruimte is */
    margin-bottom: 15px; /* Ruimte onder het formulier */
}

/* ✅ Styling voor de invoervelden binnen het filter-sort formulier */
.filter-sort-form select,
.filter-sort-form input[type="text"] {
    padding: 6px 10px;
    font-size: 14px;
    border-radius: 8px; /* Licht afgeronde hoeken */
    border: 1px solid #ccc; /* Subtiele rand om de velden */
    width: 100%; /* Vult de beschikbare breedte */
    max-width: 250px; /* Beperk de breedte van de velden */
    background-color: #f9f9f9; /* Lichte achtergrond voor inputvelden */
}

/* ✅ Styling voor de lijst van QR-codes (of andere items) */
.qr-list {
    list-style: none; /* Verwijdert de standaard lijststijl (zoals bullets) */
    padding: 0; /* Verwijdert de standaard padding */
    margin: 0; /* Verwijdert de standaard marge */
}

/* ✅ Styling voor elk item in de QR-lijst */
.qr-item {
    border: 1px solid #ddd; /* Lichte rand om het item */
    margin-bottom: 10px; /* Ruimte tussen de items */
    padding: 10px; /* Binnenmarge voor de inhoud van het item */
    border-radius: 8px; /* Afronding van de hoeken voor een zachtere uitstraling */
    background-color: #fff; /* Witte achtergrond voor de items */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Subtiele schaduw voor een luxe uitstraling */
    display: flex; /* Flexbox om inhoud netjes uit te lijnen */
    flex-direction: column; /* Zorgt ervoor dat de inhoud van het item verticaal wordt gepositioneerd */
    align-items: flex-start; /* Zorgt ervoor dat de inhoud links wordt uitgelijnd */
}

//* ✅ De qr-header container met flexbox voor uitlijning */
.qr-header {
    display: flex;                  /* Gebruik flexbox om de items op dezelfde regel te plaatsen */
    align-items: center;            /* Zorg ervoor dat zowel de checkbox als de titel verticaal in het midden worden uitgelijnd */
    gap: 10px;                      /* Ruimte tussen de checkbox en de titel */
}

/* ✅ De checkbox moet in het midden van de regel komen te staan */
.qr-header input[type="checkbox"] {
    transform: scale(1.2);          /* Vergroot de checkbox voor betere zichtbaarheid */
    margin: 0;                      /* Verwijder extra marges rondom de checkbox */
    align-self: center;             /* Zorg ervoor dat de checkbox zelf in het midden van de regel uitgelijnd is */
}

/* ✅ De titel en andere content kunnen verder links worden uitgelijnd */
.qr-header .qr-content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;        /* Zorg ervoor dat de inhoud aan de linkerkant wordt uitgelijnd */
}

/* ✅ Zorgt voor een nette weergave van de inhoud van elk item */
.qr-content {
    flex-grow: 1; /* Zorgt ervoor dat de inhoud de ruimte kan gebruiken die overblijft */
    text-align: left; /* Zorgt ervoor dat de tekst links wordt uitgelijnd */
}

/* ✅ Zorg ervoor dat links in de qr-content goed opvallen */
.qr-content a {
    font-size: 1.1em; /* Zorgt voor een grotere lettergrootte voor de link */
    font-weight: bold; /* Maak de link vetgedrukt voor betere zichtbaarheid */
    text-decoration: none; /* Verwijdert de onderstreping van de link */
    color: #007bff; /* Gebruik een mooie blauwe kleur voor de link */
}

/* ✅ Styling voor knoppen in de QR-codes (enkel als knoppen in de qr-item) */
.qr-actions {
    display: flex;
    gap: 10px;
    align-items: center;
    justify-content: flex-start;
    width: 100%;
    max-width: 400px;
}

.qr-actions form {
    margin: 0;
    padding: 0;
}

.qr-actions button {
    max-width: 120px;
    white-space: nowrap;
}

/* ✅ Styling voor de QR-code zelf */
.qr-code {
    width: 100px;               /* Zorg ervoor dat de QR-code niet te groot is */
    height: 100px;              /* Zorg ervoor dat de QR-code niet te groot is */
    margin: 15px auto;          /* Zorg voor wat marge rondom de QR-code */
    background: white;         /* Zorg ervoor dat de QR-code een schone witte achtergrond heeft */
    border-radius: 5px;         /* Geef de QR-code een lichte afronding van de hoeken */
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); /* Subtiele schaduw voor een luxe uitstraling */
    display: flex;
    justify-content: center;    /* Zorg ervoor dat de QR-code gecentreerd wordt in zijn container */
    align-items: center;        /* Zorg ervoor dat de QR-code gecentreerd wordt in zijn container */
}

/* ✅ Als je de QR-code als een achtergrondafbeelding wilt tonen, gebruik dan deze stijl */
.qr-code img {
    max-width: 100%;            /* Zorg ervoor dat de afbeelding zich aanpast aan de breedte van het element */
    max-height: 100%;           /* Zorg ervoor dat de afbeelding zich aanpast aan de hoogte van het element */
    object-fit: contain;       /* Zorg ervoor dat de afbeelding goed past in de container zonder te worden uitgerekt */
}

/* ✅ Styling voor het bulk-actions formulier */
.bulk-actions {
    display: flex;
    gap: 15px;  /* Ruimte tussen de velden */
    margin-bottom: 20px; /* Ruimte onder de bulk-actions */
    align-items: center; /* Zorgt ervoor dat de velden op dezelfde hoogte staan */
}

/* ✅ Styling voor de select dropdown en de knop binnen bulk-actions */
.bulk-actions select,
.bulk-actions button {
    padding: 12px 20px;
    font-size: 16px;
    border: 1px solid #ccc;
    border-radius: 10px;
    background-color: #f9f9f9; /* Lichte achtergrond voor de velden */
    color: #333;
    font-family: inherit; /* Neemt het lettertype over van de body */
    cursor: pointer;
    box-sizing: border-box; /* Zorgt ervoor dat padding de breedte niet beïnvloedt */
}

/* ✅ Knophover in bulk-actions */
.bulk-actions button:hover {
    background-color: #e0e0e5; /* Lichte hover-effect voor de knop */
    transform: scale(1.05); /* Klein beetje vergroten bij hover */
}

/* ✅ Keyframes voor het draaien van de spinner */
@keyframes spin {
    0% { transform: rotate(0deg); } /* Begin bij 0 graden */
    100% { transform: rotate(360deg); } /* Eindig bij 360 graden */
}

/* ✅ Responsieve aanpassingen voor mobiele apparaten */
@media (max-width: 600px) {
    .container {
        padding: 10px;
    }

    .qr-container {
        width: 90%;
        padding: 20px;
    }
    
    .note-display {
        width: 90%;                  /* Zorg ervoor dat de notitie niet de volledige breedte gebruikt, maar iets kleiner */
        max-width: 100%;             /* Laat het maximaal de breedte van de container gebruiken */
        padding: 15px;               /* Kleinere padding voor mobiele schermen, zodat het niet te veel ruimte in beslag neemt */
        margin: 10px auto;           /* Houd de marge consistent, met een kleinere ruimte rondom */
        font-size: 14px;             /* Maak de tekst iets kleiner voor mobiele schermen */
        line-height: 1.4;            /* Verminder de lijnhoogte om wat ruimte te besparen */
    }

    .form-group {
        flex-direction: column;
        align-items: flex-start;
    }

    .form-group label {
        width: 100%;
        margin-bottom: 5px;
    }

    .button-container {
        flex-direction: column; /* Zet knoppen onder elkaar op kleine schermen */
        width: 100%;
    }

    .button-container .button {
        width: 100%; /* Zorgt ervoor dat knoppen de volledige breedte nemen */
        max-width: 250px; /* Beperk de breedte van de knoppen */
    }
    
    .spinner {
        width: 40px;  /* Maak de spinner iets groter voor mobiel */
        height: 40px; /* Maak de spinner iets groter voor mobiel */
    }
    
    img {
        width: 100%;
        max-width: 100%;
        height: auto;
    }
    
    figure.image img {
        width: 100%;  /* Zorg ervoor dat de afbeelding niet groter is dan zijn container */
        max-width: 100%; /* Schaal de afbeelding correct */
        height: auto;  /* Zorg ervoor dat de hoogte zich aanpast */
    }
}