/* =========================================================================
   EVENEMENT.CSS
   Stijlen voor de publieke evenement-detailpagina.
   Klassen met het ev- prefix zijn JS-hooks (tafels-toggle.js) en mogen niet
   hernoemd worden zonder de bijbehorende JS te updaten.
   ========================================================================= */

/* --- Header row: titel links, logo rechts --- */
.ev-page-header-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 32px;
    max-width: none;
}
.ev-page-header-row .page-header {
    max-width: none;
    flex: 1;
    min-width: 0;
}
.ev-header-logo {
    height: auto;
    width: auto;
    max-height: 110px;
    max-width: 180px;
    object-fit: contain;
    margin-top: 44px;
    flex-shrink: 0;
    background: transparent;
}

/* --- Witruimte boven de banner/beschrijving na de header --- */
.ev-header-spacer { margin-top: 16px; }

/* --- Meta (datum + locatie) onder de h1 --- */
.ev-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    margin-top: 14px;
    font-size: 0.95rem;
    color: var(--dark);
    opacity: 0.78;
}
.ev-meta-item { min-width: 0; overflow-wrap: anywhere; }

/* --- Dag-groepen: collapse-logica --- */
.ev-dag-ingeklapt .ev-dag-inhoud { display: none; }

/* --- Tijdblok-groepen: collapse-logica --- */
.ev-blok-toggle { cursor: pointer; user-select: none; }
.ev-blok-ingeklapt .tafel-grid { display: none; }
.ev-blok-chevron {
    flex-shrink: 0;
    opacity: 0.45;
    transition: transform 0.22s ease;
    display: flex;
    align-items: center;
    margin-left: auto;
    padding-left: 10px;
}
.ev-blok-ingeklapt .ev-blok-chevron { transform: rotate(-90deg); }

/* --- Subtiele kleuraccenten per tijdblok --- */
.ev-kleur-1 { border-color: rgba(192, 133, 82, 0.42); }
.ev-kleur-2 { border-color: rgba(139, 58, 42, 0.32); }
.ev-kleur-3 { border-color: rgba(47, 79, 79, 0.44); }
.ev-kleur-4 { border-color: rgba(176, 120, 68, 0.38); }

/* --- Vol-melding (alle tafels gereserveerd) --- */
.ev-tafels-vol-melding {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 20px;
    background: rgba(250, 247, 237, 0.68);
    border: 1.5px dashed rgba(47, 79, 79, 0.28);
    border-radius: var(--radius-sm);
}
.ev-leeg-icoon { font-size: 1.4rem; line-height: 1; flex-shrink: 0; }
.ev-leeg-tekst {
    font-family: 'Clash Display', sans-serif;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 1.4px;
    color: var(--dark);
    opacity: 0.65;
    font-weight: 600;
}

/* --- Delete-knop rechts boven in kaart --- */
.ev-delete-btn {
    position: absolute;
    top: 8px;
    right: 8px;
    z-index: 10;
}

/* --- Starttijd: klein label bovenin tafel-foot --- */
.ev-starttijd {
    font-family: 'Clash Display', sans-serif;
    font-size: 0.72rem;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--accent-deep);
    font-weight: 700;
    margin-bottom: 2px;
}

/* --- Bezettingsbalk (JS-hooks: ev-bezetting-balk, ev-bezetting-vulling, ev-bezetting-tekst) --- */
.ev-bezetting-balk {
    display: block !important;
    height: 6px;
    background: rgba(47, 79, 79, 0.14);
    border-radius: 2px;
    overflow: hidden;
    gap: 0;
}
.ev-bezetting-vulling {
    height: 100%;
    background: var(--dark);
    border-radius: 2px;
    transition: width 0.4s ease;
    display: block;
}
.ev-tafel-card.vol .ev-bezetting-vulling { background: var(--warn); }
.ev-bezetting-tekst { font-size: 0.78rem; }

/* Rollen zonder vervulling dimmen */
.tafel-rol.ev-rol-nee { opacity: 0.38; }

/* --- Tafel footer --- */
.ev-tafel-footer { margin-top: 10px; }

/* --- Eigen deelname --- */
.ev-eigen-deelname { display: flex; flex-direction: column; gap: 8px; }
.ev-eigen-deelname-label {
    font-family: 'Clash Display', sans-serif;
    font-size: 0.74rem;
    letter-spacing: 1.6px;
    text-transform: uppercase;
    color: var(--dark);
    font-weight: 700;
}
.ev-eigen-deelname-acties { display: flex; gap: 6px; flex-wrap: wrap; }

/* --- Vol-label (JS-gegenereerd na AJAX-annulering) --- */
.ev-tafel-vol-label {
    font-family: 'Clash Display', sans-serif;
    font-size: 0.72rem;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--warn);
    font-weight: 700;
}

/* --- Uitgeschakelde knop-span --- */
.ev-btn-disabled { opacity: 0.5; pointer-events: none; cursor: default; }

/* --- Bevestigingsdialoog (JS-hooks: ev-delete-confirm, ev-annuleer-confirm) --- */
.ev-delete-confirm,
.ev-annuleer-confirm {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 8px;
    padding: 10px 12px;
    background: rgba(139, 58, 42, 0.06);
    border: 1px dashed rgba(139, 58, 42, 0.35);
    border-radius: var(--radius-sm);
    font-size: 0.84rem;
    color: var(--warn);
    font-weight: 500;
}

/* --- Placeholder card: kleine datum/tijd-info --- */
.ev-placeholder-info {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 8px;
}
.ev-placeholder-info span {
    font-size: 0.68rem;
    text-transform: uppercase;
    letter-spacing: 1.4px;
    font-weight: 600;
    color: var(--dark);
    opacity: 0.5;
    font-family: 'Clash Display', sans-serif;
}
.ev-placeholder-info span + span::before {
    content: "·";
    margin-right: 6px;
    opacity: 0.6;
}

/* --- Verlopen dag/sectie: gedimd, acties verborgen --- */
.ev-sectie-verlopen { opacity: 0.62; }
.ev-sectie-verlopen .ev-blok-header::after {
    content: "Verlopen";
    font-family: 'Clash Display', sans-serif;
    font-size: 0.66rem;
    text-transform: uppercase;
    letter-spacing: 1.8px;
    font-weight: 600;
    color: var(--paper);
    background: rgba(47, 79, 79, 0.55);
    border-radius: var(--radius-sm);
    padding: 2px 8px;
    margin-left: 10px;
    vertical-align: middle;
}

/* --- Responsive --- */
@media (max-width: 768px) {
    .ev-page-header-row { flex-direction: column; gap: 16px; }
    .ev-header-logo { margin-top: 0; max-height: 80px; }
    .ev-eigen-deelname-acties { flex-direction: column; }
    .ev-eigen-deelname-acties .ev-actie-btn { width: 100%; }
}
@media (max-width: 480px) {
    .ev-meta { gap: 10px; font-size: 0.88rem; }
}