@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,500;0,600;1,500&family=Jost:wght@400;500;600&display=swap');
/* Zelfde, Moneybird-geïnspireerde stijl als de avaniem-app: rustig grijsblauw met een blauw accent. */

* { box-sizing: border-box; }

body {
    font-family: Arial, Helvetica, sans-serif;
    margin: 0;
    color: #1f2937;
    background: #ffffff;
}

/* ── Login ── */
.login-body {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    background: #f0f0f0;
}
.login-box {
    background: white;
    padding: 40px;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    width: 320px;
}
.login-box h1 { margin-top: 0; font-size: 22px; }
.login-box label { display: block; margin-top: 14px; font-size: 13px; font-weight: bold; }
.login-box input[type=text], .login-box input[type=password] {
    width: 100%; padding: 8px; box-sizing: border-box; margin-top: 4px;
    border: 1px solid #ccc; border-radius: 4px; font-size: 14px;
}
.login-box button {
    width: 100%; padding: 10px; margin-top: 20px; background: #2563eb;
    color: white; border: none; border-radius: 4px; cursor: pointer; font-size: 15px;
}
.fout { color: #c0392b; margin-top: 12px; font-size: 13px; }
.info { color: #27ae60; margin-top: 12px; font-size: 13px; }

.link-knop {
    background: none; border: none; color: #2563eb; cursor: pointer;
    text-decoration: underline; font-size: 13px; padding: 0;
}

/* ── Sidebar ── */
.hamburger {
    display: none; flex-direction: column; justify-content: center; gap: 5px;
    position: fixed; top: 14px; left: 14px; z-index: 1001;
    width: 38px; height: 38px; background: #fff; border: 1px solid #e2e8f0;
    border-radius: 6px; cursor: pointer;
}
.hamburger span { display: block; width: 18px; height: 2px; background: #1f2937; margin: 0 auto; }

.sidebar-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.4); z-index: 999; }
.sidebar-overlay.actief { display: block; }

.sidebar {
    position: fixed; top: 0; left: 0; bottom: 0; width: 220px;
    background: #f8fafc; border-right: 1px solid #e2e8f0;
    display: flex; flex-direction: column; padding: 18px 0; z-index: 1000;
    overflow-y: auto;
}
.logo-blok { padding: 0 16px 16px 16px; text-align: center; border-bottom: 1px solid #e2e8f0; margin-bottom: 12px; }
.logo-afbeelding { max-width: 140px; max-height: 70px; object-fit: contain; }
.gebruiker-naam { font-size: 12px; color: #6b7280; margin-top: 8px; }

.sidebar a { display: block; padding: 10px 20px; color: #374151; text-decoration: none; font-size: 14px; }
.sidebar a:hover { background: #eef2ff; color: #2563eb; }
.sidebar a.actief { background: #e0e7ff; color: #2563eb; font-weight: bold; border-right: 3px solid #2563eb; }

.menu-spacer { flex: 1; }
.menu-label { font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em; color: #9ca3af; padding: 0 20px; margin-bottom: 4px; }

.uitloggen-wrapper { padding: 12px 20px 0 20px; border-top: 1px solid #e2e8f0; margin-top: 12px; }
.sidebar button.uitloggen { background: none; border: none; color: #c0392b; cursor: pointer; font-size: 14px; padding: 6px 0; }
.sidebar button.uitloggen:hover { text-decoration: underline; }

/* ── Content (naast de sidebar) ── */
.content { margin-left: 220px; padding: 20px 24px 60px 24px; }

@media (max-width: 700px) {
    .hamburger { display: flex; }
    .sidebar { transform: translateX(-100%); transition: transform 0.2s ease; box-shadow: 2px 0 10px rgba(0,0,0,0.1); }
    .sidebar.open { transform: translateX(0); }
    .content { margin-left: 0; padding-top: 70px; }
}

.melding {
    background: #ecfdf5; border: 1px solid #a7f3d0; color: #065f46;
    padding: 10px 14px; border-radius: 6px; font-size: 13px; margin-bottom: 16px; max-width: 700px;
}

.samenvatting { font-size: 13px; color: #6b7280; margin-bottom: 12px; }

/* Pagina's met een lange lijst (bijv. /gasten): bovenkant (titel, samenvatting, filter,
   knoppen) blijft altijd in beeld, alleen de tabel eronder scrollt zelf. .pagina-vast blijft
   op zijn normale hoogte, .pagina-scroll vult de rest van het scherm en scrollt intern; de
   kolomkoppen van de tabel daarbinnen blijven bovendien "sticky" zichtbaar tijdens het scrollen. */
.content-tabel-vast { display: flex; flex-direction: column; height: 100vh; overflow: hidden; }
.content-tabel-vast .pagina-vast { flex: 0 0 auto; }
.content-tabel-vast .pagina-vast h1 { margin: 0 0 10px 0; font-size: 22px; }
/* Beide scrolrichtingen (horizontaal én verticaal) op hetzelfde element: als dat over twee
   geneste elementen verdeeld is (bijv. binnenste div alleen overflow-x), wordt de binnenste
   div zelf ook een verticaal scrollgebied (CSS zet een niet-opgegeven as automatisch op
   "auto" zodra de andere as niet "visible" is) en werkt "sticky" dan niet meer tegen de
   buitenste, echt scrollende container. Daarom hier alles op .pagina-scroll, en de geneste
   .tabel-scroll (elders wel gebruikt voor losstaande horizontale scroll) hier uitgeschakeld. */
.content-tabel-vast .pagina-scroll { flex: 1 1 auto; overflow: auto; min-height: 0; }
.content-tabel-vast .pagina-scroll .tabel-scroll { overflow: visible; margin-top: 0; }
.content-tabel-vast .pagina-scroll table thead th { position: sticky; top: 0; z-index: 1; }

/* ── Filterformulier ── */
.filter-form {
    background: #f7f7f7;
    padding: 10px 14px;
    border-radius: 6px;
    margin-bottom: 10px;
}
.filter-rij {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 14px;
}
.filter-veld { display: flex; flex-direction: column; }
.filter-veld label { font-size: 12px; font-weight: bold; margin-bottom: 3px; color: #374151; }
.filter-veld input, .filter-veld select {
    width: 160px; padding: 6px 8px; font-size: 13px; border: 1px solid #ccc; border-radius: 4px;
}
.filter-knoppen { display: flex; gap: 14px; align-items: center; }
.filter-knoppen button {
    padding: 7px 16px; background: #2563eb; color: white; border: none; border-radius: 4px;
    cursor: pointer; font-size: 13px;
}

/* ── Tabel ── */
.tabel-scroll { overflow-x: auto; margin-top: 10px; }

table { border-collapse: collapse; width: 100%; font-size: 13px; min-width: 1100px; }
th, td { border: 1px solid #e2e8f0; padding: 4px 8px; text-align: left; }
th { background: #f0f4f8; white-space: nowrap; }
th a { color: #1f2937; text-decoration: none; font-weight: bold; }
th a:hover { color: #2563eb; }
.sorteer-pijl { color: #2563eb; font-size: 11px; }
tr:nth-child(even) { background: #fafafa; }

/* Smalle kolommen: Ja/Nee-checkboxes en aantallen — header is al kort (Sjoel, Bev., Feest,
   Volw, Kind), dus deze kolommen hoeven niet breder te zijn dan hun inhoud. */
th.smal, td.smal { width: 46px; padding-left: 4px; padding-right: 4px; }

/* Kans-percentage kolommen (Perc): breder dan de andere smalle kolommen zodat "100%"
   (inclusief het procentteken en de spinner-pijltjes van het getalveld) volledig past. */
th.kol-perc, td.kol-perc { width: 68px; padding-left: 4px; padding-right: 4px; }
.kans-invoer-wrap { display: flex; align-items: center; justify-content: center; gap: 2px; }
.kans-invoer-wrap input.kans-invoer { width: 42px; flex: 0 0 auto; }
.kans-percent-teken { color: #6b7280; font-size: 12px; }

/* Voornaam/Achternaam: krimpen mee met de langste ingevulde naam in plaats van een vast
   aandeel van de tabelbreedte op te eisen (width:1% + nowrap dwingt de browser dit af; de
   overige, bredere kolommen zoals Aanspreeknaam krijgen de vrijgekomen
   ruimte). */
th.kol-naam, td.kol-naam { width: 1%; white-space: nowrap; }
td.kol-naam input[type=text] { width: auto; min-width: 70px; }

td input[type=text], td input[type=number] {
    width: 100%; min-width: 90px; padding: 3px 6px; font-size: 13px;
    border: 1px solid transparent; border-radius: 3px; background: transparent;
}
td input[type=text]:focus, td input[type=number]:focus {
    border: 1px solid #2563eb; background: white;
}
td.smal input.getal { width: 100%; min-width: 0; text-align: center; padding: 3px 2px; }
/* Kans-percentage: grijs/niet-bewerkbaar zodra "Bevestigd" is aangevinkt (dan is de kans altijd 100%). */
td input.kans-invoer[readonly] { background: #f3f4f6; color: #6b7280; }
td.smal select.ring-select { width: 100%; min-width: 0; text-align: center; padding: 3px 1px; font-size: 13px; }
td.midden { text-align: center; }
td input[type=checkbox] { width: 15px; height: 15px; cursor: pointer; margin: 0; }

.leeg { text-align: center; color: #9ca3af; font-style: italic; padding: 20px; }

.verwijder-knop {
    background: none; border: none; color: #c0392b; cursor: pointer;
    font-size: 15px; padding: 2px 4px; border-radius: 3px; line-height: 1;
}
.verwijder-knop:hover { background: #fdecea; }

.opslaan-knop-boven, .opslaan-knop-onder {
    padding: 9px 18px; background: #2563eb; color: white; border: none; border-radius: 4px;
    cursor: pointer; font-size: 14px; margin-bottom: 10px;
}
.opslaan-knop-onder { margin-top: 14px; margin-bottom: 0; }

/* ── Kaarten (Instellingen, Backups) ── */
.kaart {
    background: #ffffff; border: 1px solid #e2e8f0; border-radius: 8px;
    padding: 20px; max-width: 560px; margin-bottom: 20px;
}
.kaart h2 { font-size: 15px; color: #374151; margin: 0 0 8px 0; border-bottom: 1px solid #e5e7eb; padding-bottom: 4px; }
.toelichting { font-size: 12px; color: #6b7280; margin-bottom: 10px; }
.status-regel { font-size: 13px; margin-bottom: 14px; }
.status-ok { color: #166534; }
.status-niet { color: #9ca3af; }
.status-nee { color: #c0392b; }

/* ── Gastenportaal (publiek gedeelte, geen sidebar) ── */
.portaal-nav {
    background: #f8fafc; border-bottom: 1px solid #e2e8f0; padding: 10px 20px;
    display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
}
.portaal-logo { height: 34px; }
.portaal-nav a { color: #374151; text-decoration: none; font-size: 14px; }
.portaal-nav a:hover { color: #2563eb; }
.portaal-nav a.actief { color: #2563eb; font-weight: bold; }
.portaal-nav-spacer { flex: 1; }
.portaal-nav button.uitloggen { background: none; border: none; color: #c0392b; cursor: pointer; font-size: 14px; padding: 0; }
.portaal-nav button.uitloggen:hover { text-decoration: underline; }
/* Feestelijke achtergrond: het motief van de binnenkant van de keppels (bewerkte foto,
   naadloos herhaalbaar gemaakt). Nav en inhoud staan op lichte, licht doorschijnende vlakken
   zodat tekst goed leesbaar blijft. */
.portaal-body {
    background: #ffffff url('../images/keppel.jpg') repeat;
    background-size: 424px auto;
    min-height: 100vh;
}
.portaal-body .portaal-nav { background: rgba(255, 255, 255, 0.94); border-bottom: 1px solid #c9d3e6; }
.portaal-content {
    max-width: 640px; margin: 24px auto 40px auto; padding: 24px 24px 40px 24px;
    background: rgba(255, 255, 255, 0.94); border-radius: 12px;
    box-shadow: 0 2px 14px rgba(28, 36, 65, 0.2);
}
@media (max-width: 700px) {
    .portaal-content { margin: 12px 10px 24px 10px; padding: 16px 14px 28px 14px; }
}
/* Taalkeuze NL | EN rechtsboven in het portaal en op de inlogpagina */
.taal-keuze { display: flex; align-items: center; gap: 6px; font-size: 13px; color: #9ca3af; }
.taal-keuze a { color: #6b7280; text-decoration: none; padding: 2px 4px; border-radius: 3px; }
.taal-keuze a:hover { color: #2563eb; }
.taal-keuze a.actief { color: #1c2441; font-weight: bold; }
.taal-keuze-login { position: fixed; top: 14px; right: 18px; background: rgba(255,255,255,0.9); padding: 4px 8px; border-radius: 6px; }

/* Welkomsttekst op de startpagina van het portaal */
.welkom-tekst p { font-size: 15px; line-height: 1.55; margin: 0 0 12px 0; }
.welkom-tekst p.aftellen { font-size: 18px; font-weight: bold; color: #1c2441; }
.welkom-tekst a { color: #2563eb; }

.rsvp-keuze { font-weight: normal; font-size: 14px; display: flex; align-items: center; gap: 6px; margin-bottom: 0; }

/* ── Toegangscode-kolom in het Gasten-overzicht ── */
th.kol-code, td.kol-code { width: 140px; white-space: nowrap; text-align: center; }
.toegangscode-weergave { font-family: monospace; font-size: 12px; letter-spacing: 0.03em; color: #6b7280; }
.toegangscode-vernieuw-knop { background: none; border: none; cursor: pointer; font-size: 13px; margin-left: 4px; padding: 0; }
.link-kopieer-knop {
    background: #eef2ff; border: 1px solid #c7d2fe; color: #2563eb; cursor: pointer;
    font-size: 12px; padding: 3px 8px; border-radius: 4px;
}
.link-kopieer-knop:hover { background: #e0e7ff; }

.logo-voorbeeld {
    max-height: 60px; max-width: 220px; display: block; margin-bottom: 10px;
    border: 1px solid #e5e7eb; border-radius: 4px; padding: 4px;
}
.logo-upload-form { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }

.opslaan-knop {
    padding: 8px 18px; background: #2563eb; color: white; border: none; border-radius: 4px;
    cursor: pointer; font-size: 14px; font-weight: bold;
}
.opslaan-knop:hover { background: #1d4ed8; }

/* ── Backup beheer ── */
h2 { font-size: 15px; color: #374151; margin: 20px 0 8px 0; border-bottom: 1px solid #e5e7eb; padding-bottom: 4px; }

.banner { padding: 12px 16px; border-radius: 6px; margin-bottom: 15px; font-size: 14px; }
.banner-succes { background: #f0fdf4; border: 1px solid #bbf7d0; color: #166534; }
.banner-fout { background: #fef2f2; border: 1px solid #fca5a5; color: #991b1b; }
.banner-waarschuwing { background: #fffbeb; border: 1px solid #fde68a; color: #92400e; }

.actie-balk { margin-bottom: 20px; }
.knop-maak {
    padding: 9px 18px; background: #2563eb; color: white; border: none; border-radius: 4px;
    cursor: pointer; font-size: 14px; font-weight: bold;
}
.knop-maak:hover { background: #1d4ed8; }

.type-label {
    display: inline-block; padding: 2px 8px; border-radius: 10px; font-size: 11px;
    font-weight: bold; text-transform: uppercase; margin-left: 8px;
}
.label-handmatig   { background: #fef3c7; color: #92400e; }
.label-dagelijks   { background: #dbeafe; color: #1e40af; }
.label-wekelijks   { background: #d1fae5; color: #065f46; }
.label-maandelijks { background: #ede9fe; color: #5b21b6; }

.knop-terugzetten {
    padding: 4px 10px; background: #dc2626; color: white; border: none; border-radius: 3px;
    cursor: pointer; font-size: 12px;
}
.knop-terugzetten:hover { background: #b91c1c; }
.knop-downloaden {
    display: inline-block; padding: 4px 10px; background: #2563eb; color: white; border: none;
    border-radius: 3px; cursor: pointer; font-size: 12px; text-decoration: none; margin-right: 6px;
}
.knop-downloaden:hover { background: #1d4ed8; }

.bevestig-overlay {
    display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0,0,0,0.5); z-index: 1200; justify-content: center; align-items: center;
}
.bevestig-overlay.actief { display: flex; }
.bevestig-venster { background: white; border-radius: 8px; padding: 28px; width: 440px; box-shadow: 0 4px 24px rgba(0,0,0,0.3); }
.bevestig-venster h3 { margin: 0 0 10px 0; font-size: 17px; color: #dc2626; }
.bevestig-venster p { margin: 0 0 20px 0; font-size: 14px; color: #374151; line-height: 1.5; }
.bevestig-knoppen { display: flex; gap: 10px; justify-content: flex-end; }
.bevestig-annuleer { padding: 7px 16px; background: #6b7280; color: white; border: none; border-radius: 4px; cursor: pointer; font-size: 13px; }
.bevestig-doorgaan { padding: 7px 16px; background: #dc2626; color: white; border: none; border-radius: 4px; cursor: pointer; font-size: 13px; font-weight: bold; }

.backup-leeg { color: #9ca3af; font-style: italic; font-size: 13px; padding: 8px 0 16px 0; }

/* ── ToDo-overzicht ── */
.taak-categorie-blok { max-width: none; }
tr.taak-rij { cursor: pointer; }
tr.taak-rij:hover { background: #eef2ff; }
tr.taak-rij.afgeronde-rij { color: #9ca3af; }
.categorie-budget-totaal { font-size: 14px; font-weight: normal; color: #6b7280; margin-left: 8px; }
tr.taak-rij.afgeronde-rij td { text-decoration: line-through; }

/* ── Taak-detailscherm ── */
.taak-form .kaart { max-width: 900px; }
.taak-veldrij { display: flex; flex-wrap: wrap; gap: 14px; align-items: flex-end; margin-bottom: 16px; }
.taak-afgerond-veld { justify-content: flex-end; }
.taak-afgerond-veld label { font-size: 13px; font-weight: normal; display: flex; align-items: center; gap: 6px; margin-bottom: 0; }
.taak-veld-breed { margin-bottom: 16px; }
.taak-veld-breed label { display: block; font-size: 12px; font-weight: bold; margin-bottom: 4px; color: #374151; }
.taak-veld-breed input[type=text] { padding: 7px 9px; font-size: 14px; border: 1px solid #ccc; border-radius: 4px; }
.taak-omschrijving {
    width: 100%; box-sizing: border-box; padding: 10px; font-size: 14px; font-family: inherit;
    border: 1px solid #ccc; border-radius: 4px; resize: vertical;
}

/* Aanvinklijst voor het koppelen van meerdere ToDo's aan een draaiboek-activiteit. */
.taak-koppel-lijst {
    max-height: 220px; overflow-y: auto; border: 1px solid #ccc; border-radius: 4px;
    padding: 6px 10px; background: white;
}
.taak-koppel-item {
    display: flex; align-items: center; gap: 8px; padding: 4px 0; font-size: 13px;
    font-weight: normal; cursor: pointer;
}
.taak-koppel-item input[type=checkbox] { width: 15px; height: 15px; cursor: pointer; margin: 0; }

.taak-budget-blok { margin-top: 18px; padding-top: 14px; border-top: 1px solid #e5e7eb; }
.taak-budget-blok h2 { font-size: 15px; color: #374151; margin: 0 0 10px 0; }
.taak-budget-blok table { width: 100%; border-collapse: collapse; font-size: 13px; }
.taak-budget-blok th, .taak-budget-blok td { border: 1px solid #e2e8f0; padding: 4px 6px; text-align: left; }
.taak-budget-blok th { background: #f0f4f8; }
.taak-budget-blok th.budget-kol-type, .taak-budget-blok td.budget-kol-type { width: 150px; }
.taak-budget-blok th.budget-kol-bedrag, .taak-budget-blok td.budget-kol-bedrag { width: 110px; }
.taak-budget-blok th.budget-kol-aantal, .taak-budget-blok td.budget-kol-aantal { width: 90px; }
.taak-budget-blok th.budget-kol-actie, .taak-budget-blok td.budget-kol-actie { width: 34px; }
.taak-budget-blok input[type=text], .taak-budget-blok input[type=number], .taak-budget-blok select {
    width: 100%; box-sizing: border-box; padding: 5px 7px; font-size: 13px;
    border: 1px solid #ccc; border-radius: 4px; background: #fff;
}
.taak-budget-totaal { margin-top: 10px; font-size: 14px; }

/* Klikbare vraag-balonnetjes (startpagina portaal). Standaard (smal scherm): onder elkaar in de
   tekstkolom. Vanaf ~1180px breed: links en rechts naast de tekstkolom, over het motief heen. */
.vragen { display: flex; flex-direction: column; gap: 10px; margin-bottom: 18px; }
.vragen-links, .vragen-rechts { display: flex; flex-direction: column; gap: 10px; }
.bubbel {
    position: relative; background: #ffffff; border: 2px solid #1c2441; border-radius: 16px;
    padding: 10px 14px; box-shadow: 0 2px 10px rgba(28, 36, 65, 0.25); font-size: 14px;
}
.bubbel summary {
    cursor: pointer; list-style: none; font-weight: bold; color: #1c2441; padding-left: 24px; position: relative;
}
.bubbel summary::-webkit-details-marker { display: none; }
.bubbel summary::before { content: "\1F4AC"; position: absolute; left: 0; top: 0; }
.bubbel summary:hover { color: #2563eb; }
.bubbel[open] { background: #f4f7ff; }
.bubbel p { margin: 8px 0 2px 0; line-height: 1.5; color: #374151; }

@media (min-width: 1180px) {
    .portaal-content { position: relative; }
    .vragen { position: static; display: block; margin: 0; }
    .vragen-links, .vragen-rechts { position: absolute; top: 70px; width: 250px; }
    .vragen-links { right: calc(100% + 28px); }
    .vragen-rechts { left: calc(100% + 28px); }
    /* staartje onderaan het balonnetje */
    .bubbel::after {
        content: ""; position: absolute; bottom: -9px; width: 14px; height: 14px; background: inherit;
        border-right: 2px solid #1c2441; border-bottom: 2px solid #1c2441; transform: rotate(45deg);
    }
    .vragen-links .bubbel::after { right: 24px; }
    .vragen-rechts .bubbel::after { left: 24px; }
}

/* Namenlijst (portaal) */
.naam-rij { display: flex; gap: 8px; margin-bottom: 8px; align-items: center; }
.naam-rij input[type=text] { flex: 1; min-width: 0; padding: 8px 10px; font-size: 14px; border: 1px solid #ccc; border-radius: 4px; }
.naam-rij .verwijder-knop { font-size: 16px; padding: 4px 8px; }
.namen-blok { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.namen-status { margin: 0; font-size: 13px; }

/* Secties op de startpagina van het portaal (zonder kader) */
.portaal-sectie { margin: 22px 0 0 0; }
.portaal-sectie + .portaal-sectie { border-top: 1px solid #e5e7eb; padding-top: 18px; }
.portaal-sectie h2 { font-size: 20px; color: #1c2441; margin: 0 0 8px 0; border-bottom: none; padding-bottom: 0; }
.portaal-sectie p { line-height: 1.55; }

/* Harmonica met de namenlijst: klapt zacht open/dicht */
.namen-paneel { display: grid; grid-template-rows: 0fr; visibility: hidden;
    transition: grid-template-rows 0.25s ease, visibility 0.25s; }
.namen-paneel.open { grid-template-rows: 1fr; visibility: visible; }
.namen-paneel-binnen { overflow: hidden; }
.namen-paneel form { margin-top: 12px; padding: 14px 16px; background: #f4f7ff; border: 1px solid #dbe4f7; border-radius: 10px; }
.namen-uitleg { margin: 0 0 12px 0; font-size: 14px; color: #374151; }

/* Aanhef op de startpagina: kleiner, op een regel (zie het script in portaal.html) */
h1.aanhef { font-size: 24px; margin: 0 0 12px 0; overflow: hidden; }

/* Gastenlijst: kolom Contacten + uitklapbaar paneel */
.kol-contact { min-width: 190px; max-width: 260px; }
.contact-samenvatting { display: grid; grid-template-columns: 1fr auto; column-gap: 6px; align-items: center; font-size: 0.85em; }
.contact-samenvatting .contact-email,
.contact-samenvatting .contact-tel { grid-column: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.contact-samenvatting .contact-toggle { grid-column: 2; grid-row: 1 / span 2; }
.contact-detail-cel { background: #f7f5ef; padding: 10px 14px; }
.contact-paneel .contact-regel { display: flex; gap: 8px; align-items: center; margin-bottom: 6px; }
.contact-paneel .contact-regel input[type="text"] { flex: 1; min-width: 120px; }
.contact-paneel .contact-label { width: 90px; font-weight: bold; font-size: 0.85em; }
.contact-paneel .contact-acties { display: flex; gap: 12px; align-items: center; margin-top: 8px; }
.contact-paneel .contact-melding { color: #2e7d32; font-size: 0.9em; }
.kol-email { min-width: 190px; }
.kol-mobiel { min-width: 120px; }
.kol-email input, .kol-mobiel input { width: 100%; }
.kol-extra { min-width: 190px; font-size: 0.85em; }
.kol-extra .extra-gegevens { display: inline-flex; flex-direction: column; vertical-align: middle; margin-right: 6px; }
.contact-paneel .contact-uitleg { font-size: 0.85em; margin-bottom: 6px; white-space: normal; }

/* Contactpaneel: kolommen met zichtbare invoervelden (overschrijft de doorzichtige tabelvelden) */
.contact-detail-cel { padding: 12px 16px; }
.contact-paneel { max-width: 820px; }
.contact-paneel .contact-uitleg { color: #4b5563; margin-bottom: 10px; }
.contact-paneel .contact-kop,
.contact-paneel .contact-regel { display: grid; grid-template-columns: 1fr 1.5fr 1.2fr 28px; gap: 8px; align-items: center; }
.contact-paneel .contact-kop { font-size: 12px; font-weight: bold; color: #374151; margin-bottom: 4px; }
.contact-paneel .contact-regel { margin-bottom: 6px; }
.contact-paneel .contact-regel input[type="text"] {
    width: 100%; min-width: 0; padding: 5px 8px; border: 1px solid #cbd5e1; background: #fff; border-radius: 4px;
}
.contact-paneel .contact-regel input[type="text"]:focus { border-color: #2563eb; outline: none; }
.contact-paneel .contact-acties { margin-top: 10px; }
.contact-paneel .opslaan-knop { padding: 5px 14px; font-size: 13px; }
th.kol-extra { font-size: inherit; }
td.smal .contact-toggle { font-size: 14px; font-weight: bold; text-decoration: none; padding: 2px 6px; }

/* Feestpersonen-paneel in de Gastenlijst */
.feest-paneel { max-width: 900px; }
.contact-paneel .feest-kop, .contact-paneel .feest-regel { grid-template-columns: 1fr 1fr 170px 28px; }
.feest-reactie { font-size: 13px; padding: 3px 10px; border-radius: 999px; text-align: center; background: #f3f4f6; color: #6b7280; }
.feest-reactie.ja { background: #e3f0e4; color: #1f5d2a; }
.feest-reactie.nee { background: #fbeceb; color: #a23b2c; }
td.kol-feestgasten .feest-toggle { font-size: 14px; font-weight: bold; text-decoration: none; padding: 2px 6px; }

/* ═══ Stijl van de uitnodiging (Ella & Amos) voor de beheer-app ═══ */
/* Zelfde kleuren en lettertypen als de persoonlijke uitnodiging: nachtblauw, goud en crème, met
   Cormorant Garamond voor koppen en Jost voor de rest. Deze regels staan bewust onderaan: ze gaan
   voor op de oudere (grijsblauwe) regels hierboven. */
:root { --navy: #13203F; --navy2: #1f3260; --goud: #C9A45C; --goud-donker: #84621F; --creme: #FBF8F1; --zand: #F6EFDD;
        --rand: #E7DFCC; --rand-licht: #EFE8D8; --tekst: #1B2440; --grijs: #5A6178; }

body { font-family: 'Jost', system-ui, -apple-system, 'Segoe UI', Arial, sans-serif; color: var(--tekst); background: var(--creme); }
h1 { font-family: 'Cormorant Garamond', Georgia, serif; font-weight: 600; font-size: 34px; line-height: 1.1; color: var(--navy); margin: 0 0 14px 0; }
.content-tabel-vast .pagina-vast h1 { font-size: 32px; margin: 0 0 10px 0; }
h2 { font-family: 'Cormorant Garamond', Georgia, serif; font-weight: 600; font-size: 22px; color: var(--navy); border-bottom: 1px solid var(--rand); }
a { color: var(--goud-donker); }
.link-knop { color: var(--goud-donker); font-family: inherit; }
.link-knop:hover { color: var(--navy); }

/* Sidebar */
.sidebar { background: var(--navy); border-right: none; padding: 22px 0 18px; }
.logo-blok { border-bottom: 1px solid rgba(201,164,92,0.35); margin-bottom: 14px; padding-bottom: 18px; }
.logo-afbeelding { background: var(--creme); border-radius: 10px; padding: 6px; }
.merk-naam { margin-top: 10px; font-family: 'Cormorant Garamond', Georgia, serif; font-style: italic; font-size: 24px; color: var(--creme); }
.gebruiker-naam { color: #C9CEDC; margin-top: 2px; }
.sidebar a { color: #DDE1EB; padding: 11px 22px; font-size: 15px; border-left: 3px solid transparent; }
.sidebar a:hover { background: rgba(251,248,241,0.08); color: #fff; }
.sidebar a.actief { background: rgba(201,164,92,0.16); color: #F1DCA7; font-weight: 500; border-right: none; border-left: 3px solid var(--goud); }
.menu-label { color: #9aa3bd; letter-spacing: 0.18em; padding: 0 22px; }
.uitloggen-wrapper { border-top: 1px solid rgba(201,164,92,0.35); padding: 14px 22px 0; }
.sidebar button.uitloggen { color: #E2C98F; font-family: inherit; }
.hamburger { background: var(--navy); border-color: var(--navy); }
.hamburger span { background: var(--goud); }

/* Meldingen en samenvatting */
.melding { background: #F3EBD6; border: 1px solid #E2D3A8; color: #5b4411; border-radius: 12px; }
.samenvatting { color: var(--grijs); font-size: 14px; }
.banner { border-radius: 12px; }

/* Knoppen: pilvorm, nachtblauw (hoofd) of licht met gouden rand */
.opslaan-knop, .opslaan-knop-boven, .opslaan-knop-onder, .knop-maak, .filter-knoppen button, .login-box button, .knop-downloaden {
    background: var(--navy); color: var(--creme); border: 1px solid var(--navy); border-radius: 999px; padding: 8px 22px;
    font-family: inherit; font-size: 14px; font-weight: 600; letter-spacing: 0.02em; cursor: pointer; }
.opslaan-knop:hover, .opslaan-knop-boven:hover, .opslaan-knop-onder:hover, .knop-maak:hover, .filter-knoppen button:hover,
.login-box button:hover, .knop-downloaden:hover { background: var(--navy2); }
.knop-downloaden { padding: 4px 14px; font-size: 12px; }
.knop-licht, form > button[type=submit]:not([class]) {
    display: inline-flex; align-items: center; gap: 6px; background: #fff; color: var(--navy); border: 1px solid #D9CFB8;
    border-radius: 999px; padding: 8px 18px; font-family: inherit; font-size: 14px; font-weight: 500; cursor: pointer; text-decoration: none; }
.knop-licht:hover, form > button[type=submit]:not([class]):hover { background: #F3EBD6; border-color: var(--goud); color: var(--navy); }
.knop-terugzetten { border-radius: 999px; padding: 4px 14px; font-family: inherit; }
.verwijder-knop { color: #A23B2C; }
.verwijder-knop:hover { background: #FBEDEA; }
button, input, select, textarea { font-family: inherit; }

/* Filter */
.filter-form { background: #fff; border: 1px solid var(--rand); border-radius: 16px; padding: 12px 16px; }
.filter-veld label { color: var(--goud-donker); font-weight: 500; font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; }
.filter-veld input, .filter-veld select { border: 1px solid #D9CFB8; border-radius: 10px; padding: 7px 10px; background: #fff; color: var(--tekst); }
.filter-veld input:focus, .filter-veld select:focus { outline: 2px solid var(--goud); outline-offset: 1px; }

/* Tabellen */
table { font-size: 14px; background: #fff; }
th, td { border: none; border-bottom: 1px solid var(--rand-licht); padding: 6px 10px; }
th { background: var(--zand); color: var(--goud-donker); font-size: 11px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; padding: 10px 10px; border-bottom: 1px solid #E2D6B8; }
th a { color: var(--goud-donker); }
th a:hover { color: var(--navy); }
th small { font-weight: 500; letter-spacing: 0.06em; opacity: 0.85; }
.sorteer-pijl { color: var(--navy); }
tr:nth-child(even) { background: transparent; }
tbody tr:hover > td { background: #FDFAF2; }
.tabel-scroll { border: 1px solid var(--rand); border-radius: 16px; background: #fff; }
.content-tabel-vast .pagina-scroll .tabel-scroll { overflow: visible; border-radius: 16px; }
.content-tabel-vast .pagina-scroll table thead th:first-child { border-top-left-radius: 15px; }
.content-tabel-vast .pagina-scroll table thead th:last-child { border-top-right-radius: 15px; }
td input[type=text], td input[type=number] { font-size: 14px; border-radius: 8px; padding: 5px 8px; color: var(--tekst); }
td input[type=text]:hover, td input[type=number]:hover { border-color: #E2D6B8; }
td input[type=text]:focus, td input[type=number]:focus { border: 1px solid var(--goud); background: #fff; outline: none; box-shadow: 0 0 0 3px rgba(201,164,92,0.2); }
td select, td.smal select.ring-select { border: 1px solid #D9CFB8; border-radius: 8px; background: #fff; font-size: 13px; padding: 4px 4px; color: var(--tekst); }
td input[type=checkbox], input[type=checkbox] { accent-color: var(--navy); }
.leeg { color: #9a927c; }
tr.taak-rij:hover { background: #FDFAF2; }
.toegangscode-weergave { color: var(--grijs); }
.link-kopieer-knop { background: #fff; border: 1px solid #D9CFB8; color: var(--navy); border-radius: 999px; padding: 3px 10px; text-decoration: none; }
.link-kopieer-knop:hover { background: #F3EBD6; }
.toegangscode-vernieuw-knop { color: var(--goud-donker); text-decoration: none; font-size: 15px; }

/* Kaarten */
.kaart { background: #fff; border: 1px solid var(--rand); border-radius: 20px; padding: 24px; }
.kaart h2 { font-size: 22px; color: var(--navy); border-bottom: 1px solid var(--rand-licht); padding-bottom: 6px; }
.toelichting { color: var(--grijs); font-size: 13px; }
.taak-veld-breed label { color: var(--goud-donker); font-weight: 500; font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; }
.taak-veld-breed input[type=text], .taak-omschrijving, .taak-koppel-lijst,
.taak-budget-blok input[type=text], .taak-budget-blok input[type=number], .taak-budget-blok select { border: 1px solid #D9CFB8; border-radius: 10px; }
.taak-budget-blok th { background: var(--zand); }
.taak-budget-blok th, .taak-budget-blok td { border: none; border-bottom: 1px solid var(--rand-licht); }
.bevestig-venster { border-radius: 20px; }
.bevestig-annuleer, .bevestig-doorgaan { border-radius: 999px; font-family: inherit; }

/* Inloggen */
.login-body { background: var(--navy) url('/images/blaadjes.svg'); background-size: 220px 220px; background-blend-mode: soft-light; }
.login-box { background: var(--creme); border-radius: 24px; padding: 40px; box-shadow: 0 30px 80px rgba(0,0,0,0.35); border: 1px solid var(--goud); }
.login-box h1 { font-size: 30px; text-align: center; }
.login-box label { color: var(--goud-donker); font-weight: 500; font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; }
.login-box input[type=text], .login-box input[type=password] { border: 1px solid #D9CFB8; border-radius: 10px; padding: 10px; }
.login-box button { padding: 11px; margin-top: 22px; }

/* ── Gastenlijst (kop + detailregels) ── */
.gl-totalen { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 12px; }
.gl-tegel { flex: 1 1 150px; min-width: 150px; max-width: 250px; background: #fff; border: 1px solid var(--rand); border-radius: 16px; padding: 10px 16px; display: flex; flex-direction: column; }
.gl-tegel.accent { background: var(--navy); border-color: var(--navy); color: var(--creme); }
.gl-tegel .getal { font-family: 'Cormorant Garamond', Georgia, serif; font-weight: 600; font-size: 32px; line-height: 1.05; color: var(--navy); }
.gl-tegel .getal.klein { font-size: 22px; line-height: 1.5; }
.gl-tegel .getal small { font-size: 20px; font-weight: 500; opacity: 0.8; }
.gl-tegel.accent .getal { color: #F1DCA7; }
.gl-tegel .label { font-size: 11px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--goud-donker); margin-top: 2px; }
.gl-tegel.accent .label { color: var(--creme); }
.gl-tegel .sub { font-size: 12px; color: var(--grijs); }
.gl-tegel.accent .sub { color: #C9CEDC; }
.gl-acties { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 10px; }
.gl-acties form { margin: 0; }
.gl-acties .opslaan-knop-boven { margin: 0 0 0 auto; }

table.gl-tabel { min-width: 1500px; }
.gl-tabel > thead > tr > th { vertical-align: bottom; line-height: 1.25; }
.gl-kol-open { width: 34px; padding-left: 8px !important; padding-right: 0 !important; }
.gl-open { width: 26px; height: 26px; border-radius: 50%; border: 1px solid #D9CFB8; background: #fff; color: var(--navy); cursor: pointer; font-size: 13px; line-height: 1; padding: 0; }
.gl-open:hover { background: #F3EBD6; border-color: var(--goud); }
tr.gl-kop.open > td { background: #FBF4E3; border-bottom-color: transparent; }
tr.gl-kop.open .gl-open { background: var(--navy); color: var(--goud); border-color: var(--navy); }
td.gl-wie input[type=text] { font-weight: 600; color: var(--navy); min-width: 200px; }
.gl-getal { text-align: center; white-space: nowrap; width: 76px; }
th.gl-getal { text-align: center; }
.gl-aantal { min-width: 34px; height: 28px; padding: 0 10px; border-radius: 999px; border: 1px solid #D9CFB8; background: #fff; color: var(--navy); font-weight: 600; font-size: 14px; cursor: pointer; }
.gl-aantal:hover { background: #F3EBD6; border-color: var(--goud); }
th.gl-groep-sjoel, th.gl-groep-feest { text-align: center; }
td.gl-groep-sjoel { background: rgba(19,32,63,0.035); }
td.gl-groep-feest { background: rgba(201,164,92,0.09); }
th.gl-groep-sjoel { background: #E9E6DD; color: var(--navy); }
th.gl-groep-feest { background: #F0E2BE; }
.gl-kol-icoon { width: 52px; text-align: center; white-space: nowrap; }
.gl-icoonknop { display: inline-flex; align-items: center; justify-content: center; min-width: 34px; height: 28px; padding: 0 10px; border-radius: 999px; border: 1px solid #D9CFB8; background: #fff; color: var(--navy); font-size: 12px; font-weight: 600; text-decoration: none; }
.gl-icoonknop:hover { background: var(--navy); color: var(--goud); border-color: var(--navy); }
.kans-invoer-wrap input.kans-invoer { width: 46px; text-align: center; border-color: #E2D6B8; background: #fff; }
.kans-invoer::placeholder { color: #b9b29c; }

/* Detailregels (personen) */
tr.gl-detail > td.gl-detail-cel { padding: 0 14px 16px 44px; background: #FBF4E3; border-bottom: 1px solid #E2D6B8; }
tr.gl-detail:hover > td { background: #FBF4E3; }
.gl-paneel { background: #fff; border: 1px solid #E2D6B8; border-radius: 16px; padding: 14px 16px; max-width: 1250px; box-shadow: 0 6px 18px rgba(19,32,63,0.06); }
.gl-paneel.gewijzigd { border-color: var(--goud); box-shadow: 0 0 0 3px rgba(201,164,92,0.22); }
.gl-paneel-kop { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 18px; margin-bottom: 10px; }
.gl-paneel-kop strong { font-family: 'Cormorant Garamond', Georgia, serif; font-size: 22px; color: var(--navy); }
.gl-p-samenvatting { font-size: 13px; color: var(--grijs); }
.gl-p-melding { margin-left: auto; color: #1F5D2A; background: #E3F0E4; border-radius: 999px; padding: 2px 12px; font-size: 13px; }
table.gl-personen { min-width: 0; width: 100%; }
table.gl-personen th { background: transparent; border-bottom: 1px solid var(--rand); padding: 4px 6px; position: static !important; }
table.gl-personen td { padding: 3px 6px; border-bottom: 1px solid var(--rand-licht); }
table.gl-personen tbody tr:hover > td { background: #FDFAF2; }
table.gl-personen td input[type=text] { border: 1px solid #E2D6B8; background: #fff; min-width: 110px; }
table.gl-personen td select { width: 100%; min-width: 150px; padding: 5px 6px; }
table.gl-personen select.keuze-ja { background: #E3F0E4; border-color: #9cc7a1; color: #1F5D2A; }
table.gl-personen select.keuze-nee { background: #FBEDEA; border-color: #e3aaa0; color: #8a2f22; }
table.gl-personen select:disabled { background: #f4f1ea; color: #b9b29c; }
tr.gl-p-rij.nieuw > td { background: #F7FBF7; }
.gl-door-gast { font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--goud-donker); border: 1px solid var(--goud); border-radius: 999px; padding: 1px 6px; margin-right: 4px; }
.gl-paneel-acties { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin-top: 12px; }
.gl-p-hint { font-size: 12px; color: var(--grijs); margin-left: auto; }
.gl-laden { margin: 0; padding: 12px 0; color: var(--grijs); font-style: italic; }

/* Audit per uitnodiging */
.audit-tabel { min-width: 700px; }
.audit-soort { display: inline-block; font-size: 11px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; border-radius: 999px; padding: 2px 10px; background: #EEE9DC; color: var(--grijs); }
tr.audit-klik .audit-soort { background: #E6ECF8; color: #2B4A8F; }
tr.audit-wijziging .audit-soort { background: #F0E2BE; color: #6B4E14; }
tr.audit-wijziging > td { background: #FFFBF0; font-weight: 500; }
tr.audit-bezoek > td { color: var(--grijs); }

/* Gastenlijst: kolombreedtes en paneel dat in beeld blijft bij horizontaal scrollen */
table.gl-tabel { min-width: 1380px; }
.gl-tabel th.smal, .gl-tabel td.smal { width: 62px; }
.gl-tabel td.smal select.ring-select { min-width: 54px; }
.gl-tabel > tbody > tr.gl-kop > td:nth-child(3) input[type=text] { min-width: 200px; }
.gl-paneel { position: sticky; left: 44px; max-width: min(1250px, calc(100vw - 330px)); overflow-x: auto; }
@media (max-width: 700px) { .gl-paneel { max-width: calc(100vw - 60px); left: 8px; } tr.gl-detail > td.gl-detail-cel { padding-left: 8px; } }

/* Gevaarlijke acties (bijv. audit leegmaken) */
.gevaar-kaart { border-color: #e3aaa0; }
.knop-gevaar { background: #A23B2C; color: #fff; border: 1px solid #A23B2C; border-radius: 999px; padding: 8px 20px; font-family: inherit; font-size: 14px; font-weight: 600; cursor: pointer; }
.knop-gevaar:hover { background: #8a2f22; }

/* Gastenlijst: is er een e-mailadres / mobiel nummer bekend (donker = ja, vaag = nee) */
.gl-kol-contact { width: 70px; text-align: center; white-space: nowrap; }
th.gl-kol-contact { text-align: center; }
.gl-contact { display: inline-flex; align-items: center; gap: 4px; }
.gl-contact > span { display: inline-flex; }
.gl-contact .aan { color: var(--navy); }
.gl-contact .aan svg { stroke-width: 2.4; }
.gl-contact .uit { color: #cfc8b4; }
.gl-contact .uit svg { stroke-width: 1.4; }
.gl-contact-streep { color: #cfc8b4; font-size: 13px; }

/* Inlogpagina: logo (boog met E&A) in plaats van een titel, en de inlogknop in nachtblauw */
.login-logo { width: 84px; height: 100px; margin: 0 auto 18px; border: 1.5px solid var(--goud-donker); border-radius: 42px 42px 12px 12px;
    display: flex; align-items: center; justify-content: center; box-shadow: inset 0 0 0 5px var(--creme), inset 0 0 0 6px rgba(201,164,92,0.55); }
.login-logo span { font-family: 'Cormorant Garamond', Georgia, serif; font-style: italic; font-weight: 500; font-size: 31px; color: var(--navy); letter-spacing: 0; }
.login-box form > button[type=submit] { display: block; width: 100%; background: var(--navy); color: var(--creme); border: 1px solid var(--navy); border-radius: 999px; padding: 11px; margin-top: 22px; font-size: 15px; font-weight: 600; text-align: center; }
.login-box form > button[type=submit]:hover { background: var(--navy2); color: var(--creme); border-color: var(--navy2); }