/* /assets/css/pages.css */

/* =========================================
 1. Algemene Pagina Containers en Titels
========================================= */

/* Titels boven section-cards */
.uitje-title {
margin-bottom: 0;
color: var(--kleur-accent);
font-size: 1.25rem;
font-weight: 600;
}

/* Titel direct boven card: card zonder extra marge boven */
.uitje-title + .section-card {
margin-top: 0 !important;
}

/* Cards zelf iets strakker in de pages context */
.section-card {
margin: 12px 0;
}

/* Algemene Actie Rij in Pagina's */
.button-row {
display: flex;
gap: 8px;
align-items: center;
flex-wrap: wrap;
}

/* Forceer acties niet in header rechts te tonen en zet ze links als inline knoppen */
.section-card h2 {
display: flex;
align-items: center;
gap: 12px;
}

/* Verberg mobiele 'meer' knop indien aanwezig */
.section-card .more-btn,
.section-card .dots-menu,
.section-card .three-dots {
display: none !important;
}

/* Als er een .actions container gebruikt wordt: zet 'm links naast de titel */
.section-card .actions,
.section-card .header-actions {
display: flex;
gap: 8px;
margin-left: 0;
order: -1;
align-items: center;
justify-content: flex-start;
}

/* Zorg dat de standaard knop‑rij styling toegepast wordt */
.section-card .actions .btn,
.section-card .header-actions .btn {
margin: 0;
}


/* =========================================
 2. Uitjes Overzicht (Grid Layout)
========================================= */

.uitjes-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(380px, 1fr));
gap: 20px;
margin-top: 30px;
justify-content: center;
justify-items: center;
}

.uitjes-grid .uitje-card {
width: 380px;
min-height: 480px;
display: grid;
grid-template-columns: 75px 1fr;
border-radius: 18px;
box-shadow: 0 6px 20px rgba(0,0,0,0.25);
overflow: hidden;
transition: transform 0.25s, box-shadow 0.25s;
border: 1px solid #d0bfa0;
background: transparent;
cursor: pointer;
text-decoration: none;
color: var(--kleur-tekst);
}
.uitjes-grid .uitje-card:hover {
transform: translateY(-6px);
box-shadow: 0 12px 24px rgba(0,0,0,0.35);
}

.uitjes-grid .uitje-card .vertical-date {
writing-mode: vertical-rl;
transform: rotate(180deg);
background-color: #8d6e63; /* Bruine achtergrond behouden */
color: #fff;
font-weight: bold;
display: flex;
align-items: center;
justify-content: center;
letter-spacing: 3px;
font-size: 1.8rem;
height: 100%;
width: 100%;
margin: 0;
padding: 0;
border-radius: 0;
}

.uitjes-grid .uitje-card .card-content {
display: flex;
flex-direction: column;
justify-content: space-between;
padding: 20px;
}

.uitjes-grid .uitje-card .card-inner {
flex-grow: 1;
display: flex;
flex-direction: column;
align-items: center;
}

.uitjes-grid .uitje-card .card-title {
font-size: 1.6rem;
font-weight: bold;
margin: 0 0 10px;
color: var(--kleur-tekst-bruin); /* Gebruik variabele */
text-align: center;
min-height: 2.4em;
}

.uitjes-grid .uitje-card .card-image {
width: 100%;
height: 150px;
object-fit: cover;
border-radius: 12px;
margin: 10px 0 16px;
box-shadow: 0 4px 10px rgba(0,0,0,0.2);
}

.uitjes-grid .uitje-card .card-status-image {
width: 70%;
max-height: 100px;
object-fit: contain;
display: block;
margin: 12px auto 8px;
border: none;
box-shadow: none;
background: transparent;
}

.uitjes-grid .uitje-card .card-description {
font-size: 1rem;
color: #6d4c41; /* Behoud specifieke bruine tint */
margin-bottom: 10px;
text-align: center;
}

.uitjes-grid .uitje-card .card-bottom {
display: flex;
flex-direction: column;
align-items: center;
gap: 5px;
margin-top: 10px;
}

.uitjes-grid .uitje-card .footer-text {
text-align: center;
color: var(--kleur-tekst-bruin); /* Gebruik variabele */
font-size: 0.95rem;
}

/* Status badges */
.uitjes-grid .status {
display: inline-block;
padding: 4px 10px;
font-size: 0.95rem;
font-weight: 600;
border-radius: 12px;
text-align: center;
min-width: 80px;
}

.uitjes-grid .status.ingeschreven {
background-color: #e8f5e9;
color: #2e7d32;
border: 1px solid #2e7d32;
}

.uitjes-grid .status.niet-ingeschreven {
background-color: #ffebee;
color: #c62828;
border: 1px solid #c62828;
}

/* Responsive variant */
@media (max-width: 640px) {
.uitjes-grid {
grid-template-columns: 1fr;
}
.uitjes-grid .uitje-card {
grid-template-columns: 90px 1fr;
width: 100%;
min-height: auto;
}
.uitjes-grid .uitje-card .vertical-date {
font-size: 1.1rem;
letter-spacing: 2px;
}
.uitjes-grid .uitje-card .card-image {
height: 120px;
margin-bottom: 12px;
}
.uitjes-grid .uitje-card .card-status-image {
width: 60%;
max-height: 80px;
margin-top: 10px;
}
}


/* =========================================
 3. Uitje Detailpagina (Header & Top Layout)
========================================= */

/* Container voor bovenste deel: 3 kolommen */
.uitje-top {
width: 100%;
max-width: 1200px;
margin: 0 auto 30px auto;
}

.uitje-top .row {
display: flex;
gap: 20px;
height: 400px; /* Vaste hoogte voor desktop layout */
}

.uitje-top .col {
flex: 1;
border-radius: 6px;
box-shadow: 0 2px 6px rgba(0,0,0,0.1);
background: #fafafa;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}

/* Kolom 1: Titel, datum en knoppen */
.uitje-info {
padding: 20px;
justify-content: space-between;
align-items: flex-start;
}

/* Hoofdtitel */
.uitje-header {
display: flex;
align-items: baseline;
gap: 16px;
flex-wrap: wrap;
}
.uitje-header h1 {
margin: 0;
font-size: 1.75rem;
font-weight: 700;
line-height: 1.1;
}
.uitje-header .sub {
margin: 0;
font-size: 0.95rem;
color: #666;
white-space: nowrap;
}

/* Knoppenrij bovenaan */
.uitje-detail .button-row { margin-top: 15px; }
.uitje-detail .button-row form {
display: inline-block;
margin-right: 10px;
}
.uitje-detail .button-row .btn {
padding: 10px 18px;
border-radius: 20px;
background: #f0f0f0;
border: none;
cursor: pointer;
transition: all 0.2s;
}
.uitje-detail .button-row .btn:hover { background: #ddd; }
.uitje-detail .button-row .btn-active { background: #0078d4; color: #fff; }


/* Kolom 2: Afbeelding */
.uitje-afbeelding {
display: flex;
align-items: center;
justify-content: center;
height: 250px; /* Standaard hoogte */
border-radius: 8px;
overflow: hidden;
background: #f0f0f0; /* Default background voor afbeelding */
}
.section-card .uitje-afbeelding {
background: inherit;
}
.uitje-afbeelding img {
max-height: 100%;
max-width: 100%;
object-fit: contain;
display: block;
}

/* Kolom 3: Status-stempel */
.uitje-stempel {
display: flex;
align-items: center;
justify-content: center;
}
.uitje-stempel .stempel-img {
max-width: 100%;
max-height: 100%;
object-fit: contain;
}


/* Responsieve aanpassingen Uitje Header */
@media (max-width: 640px) {
.uitje-afbeelding { height: 180px; }
}
@media (min-width: 1200px) {
.uitje-afbeelding { height: 300px; }
}
@media (max-width: 520px) {
.uitje-header { align-items: flex-start; }
.uitje-header .sub {
font-size: 0.9rem;
margin-top: 6px;
white-space: normal;
}
.uitje-header h1 {
font-size: 1.25rem;
width: 100%;
}
}


/* =========================================
 4. Uitje Detailpagina (Midden Secties)
========================================= */

.uitje-detail .row {
margin-bottom: 20px;
}
.uitje-detail .col section {
background: #fafafa;
border-radius: 8px;
padding: 20px;
box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}
.uitje-detail .col section h2 {
border-bottom: 2px solid #eee;
padding-bottom: 6px;
margin-bottom: 12px;
}

/* Tijdlijn (Klassieke stijl) */
.uitje-detail ul.timeline {
list-style: none;
padding-left: 20px;
position: relative;
}
.uitje-detail ul.timeline::before {
content: '';
position: absolute;
left: 8px;
top: 0;
bottom: 0;
width: 2px;
background: #ccc;
}
.uitje-detail ul.timeline li {
position: relative;
margin-bottom: 15px;
}
.uitje-detail ul.timeline li::before {
content: '';
position: absolute;
left: -2px;
top: 5px;
width: 10px;
height: 10px;
background: #0078d4;
border-radius: 50%;
}

/* Verzamelpunt info */
.verzamelpunt-info {
display: flex;
flex-direction: column;
gap: 10px;
}
.vp-row {
display: flex;
align-items: center;
gap: 8px;
}
.vp-icon {
width: 20px;
height: 20px;
flex-shrink: 0;
opacity: 0.7;
}
.verzamelpunt-info .link {
color: var(--kleur-accent);
font-weight: 600;
text-decoration: none;
}
.verzamelpunt-info .link:hover {
text-decoration: underline;
}

/* Uitnodigingskanaal (Specifiek voor detailpagina) */
.channel {
position: relative;
display: inline-block;
}
.channel button {
display: inline-flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
font-size: 20px;
padding: 0;
border: 1px solid var(--kleur-border);
border-radius: var(--radius);
background: #e9ecef;
cursor: pointer;
flex-shrink: 0;
}
.channel button i {
pointer-events: none;
font-size: 20px;
line-height: 1;
}
.channel.open .channel-menu {
display: flex;
gap: 12px;
}
.channel-menu a:hover {
background: var(--kleur-success);
color: #155724;
}
#kanaal-menu-overlay {
position: absolute;
display: none;
z-index: 9999;
background: #fff;
border: 1px solid var(--kleur-border);
padding: 6px 10px;
border-radius: var(--radius);
box-shadow: 0 2px 6px rgba(0,0,0,0.1);
gap: 12px;
}


/* =========================================
 5. Status en Knoppen Sectie (Component)
========================================= */

/* DESKTOP STIJLEN (Twee Kolommen) */
.button-status-row {
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: stretch;
gap: 20px;
}

/* Linkerzijde: uitleg + knoppen */
.button-status-row .buttons {
flex: 1;
display: flex;
flex-direction: column;
justify-content: space-between;
}

/* Uitlegtekst boven knoppen */
.button-status-row .status-explainer {
margin-bottom: 15px;
font-size: 0.95rem;
color: #555;
line-height: 1.4;
}

/* Knoppen onderin */
.button-status-row .button-row {
margin-top: auto;
display: flex;
flex-wrap: wrap;
gap: 10px;
}

.button-status-row .button-row .btn {
padding: 10px 18px;
border-radius: 20px;
background: #f0f0f0;
border: none;
cursor: pointer;
transition: all 0.2s;
font-size: 0.95rem;
}
.button-status-row .button-row .btn:hover { background: #ddd; }

.button-status-row .button-row .btn.green { background: #4caf50; color: #fff; }
.button-status-row .button-row .btn.green:hover { background: #43a047; }

.button-status-row .button-row .btn.red { background: #f44336; color: #fff; }
.button-status-row .button-row .btn.red:hover { background: #e53935; }

.button-status-row .button-row .btn.yellow { background: #ffeb3b; color: #333; }
.button-status-row .button-row .btn.yellow:hover { background: #fdd835; }

.button-status-row .button-row .btn.danger { background: #d32f2f; color: #fff; }
.button-status-row .button-row .btn.danger:hover { background: #c62828; }

.button-status-row .button-row .btn-active { background: #0078d4; color: #fff; }

/* Rechterzijde: statusvak (Desktop) */
.button-status-row .status-display {
width: 320px;
aspect-ratio: 3 / 2;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
border: none;
border-radius: 0;
background: transparent;
box-shadow: none;
}

.button-status-row .status-display img {
width: 100%;
height: 100%;
object-fit: contain;
display: block;
border: none;
background: transparent;
box-shadow: none;
}


/* MOBIELE AANPASSINGEN (max-width: 768px) */
@media (max-width: 768px) {
/* 1. Hoofdcontainer: Stapel de kolommen verticaal */
.button-status-row {
 flex-direction: column;
 gap: 15px;
 align-items: center;
}

/* 2. Statusafbeelding Boven (Nu gecentreerd) */
.button-status-row .status-display {
 order: 1;
 width: 100%;
 aspect-ratio: auto;
 max-width: 250px;
 margin: 0 auto;
 display: flex;
 justify-content: center;
 align-items: center;
}

.button-status-row .status-display img {
 width: auto;
 max-width: 150px;
 height: auto;
}

/* 3. Knoppen & Uitleg onder de afbeelding */
.button-status-row .buttons {
 order: 2;
 width: 100%;
 flex-direction: column;
 text-align: left;
 align-items: stretch;
}

/* 4. Knoppenrij: Gecentreerd en Wikkelend */
.button-status-row .button-row {
 justify-content: center;
 flex-wrap: wrap;
 margin-top: 10px;
}

/* 5. Knoppen zelf: Zorg dat ze flexibel zijn maar niet té klein */
.button-status-row .button-row .btn {
 flex-grow: 1;
 min-width: 120px;
 max-width: 48%;
}
}


/* =========================================
 6. Formulieren in Pagina's (Gescopeerd)
========================================= */

/* --- Documenten & Afbeeldingen (Formulier Overzicht) --- */
#form-documenten .overzicht-item {
background: #ffffff;
border: 1px solid #e6eef6;
border-radius: 8px;
padding: 12px;
margin-bottom: 12px;
box-shadow: 0 2px 6px rgba(0,0,0,0.08);
transition: box-shadow 0.2s ease, background-color 0.2s ease;

display: flex;
justify-content: space-between;
align-items: flex-start;
flex-direction: column; /* Mobiel/default: stack */
}

#form-documenten .overzicht-item:hover {
background-color: #f9fcff;
box-shadow: 0 4px 10px rgba(0,0,0,0.12);
}

#form-documenten .overzicht-item.kaart-afbeelding {
border: 2px solid #28a745;
background-color: #f6fff6;
}

#form-documenten .info { flex: 1; }
#form-documenten .document-form { margin-bottom: 4px; }
#form-documenten .document-form input[type="text"] {
display: block;
width: 100%;
max-width: 320px;
margin-bottom: 8px;
padding: 8px;
font-size: 14px;
border: 1px solid #ccc;
border-radius: 4px;
}
#form-documenten .document-form label {
display: block;
font-weight: 600;
margin-bottom: 6px;
font-size: 14px;
color: #333;
}
#form-documenten .bestandsnaam {
display: block;
font-size: 14px;
color: #666;
margin-top: 6px;
}
#form-documenten .badge {
display: inline-block;
margin-left: 8px;
padding: 2px 6px;
font-size: 12px;
background: #28a745;
color: #fff;
border-radius: 4px;
}
#form-documenten .inline-form {
display: inline-flex;
align-items: center;
margin: 0;
padding: 0;
}
#form-documenten .actions {
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: nowrap;
gap: 8px;
margin-top: 8px;
width: 100%;
}
#form-documenten .actions-left { display: flex; align-items: center; }
#form-documenten .actions-right { display: flex; align-items: center; gap: 8px; }

#form-documenten .btn-sm,
#form-documenten a.btn-sm {
display: inline-flex;
align-items: center;
justify-content: center;
height: 32px;
min-width: 32px;
padding: 6px 10px;
font-size: 14px;
line-height: 1;
box-sizing: border-box;
}
#form-documenten .btn-sm i {
font-size: 14px;
line-height: 1;
margin: 0;
pointer-events: none;
}
#form-documenten .btn-active {
background-color: #28a745;
color: #fff;
}


/* --- Activiteiten overzicht (Verticale Layout) --- */
#form-activiteiten .overzicht-item {
display: block;
padding: 12px;
border: 1px solid #ddd;
border-radius: 8px;
margin-bottom: 12px;
background: #fff;
}
#form-activiteiten .title { font-weight: 600; margin-bottom: 4px; }
#form-activiteiten .tijd-adres { font-size: 14px; color: #555; margin-bottom: 4px; }
#form-activiteiten .prijs { font-size: 14px; font-weight: 500; margin-bottom: 6px; }
#form-activiteiten .actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 8px; }


/* --- Reismomenten overzicht (Verticale Layout) --- */
#form-reismomenten .overzicht-item {
display: block;
padding: 12px;
border: 1px solid #ddd;
border-radius: 8px;
margin-bottom: 12px;
background: #fff;
}
#form-reismomenten .title { font-weight: 600; margin-bottom: 4px; }
#form-reismomenten .tijd-adres { font-size: 14px; color: #555; margin-bottom: 4px; }
#form-reismomenten .actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 8px; }


/* =========================================
 7. Detailpagina Tijdlijn & Documenten Lijst componenten
========================================= */

/* Tijdlijn kaarten (Algemeen detail component) */
.section-card .tijdlijn {
display: flex;
flex-direction: column;
gap: 12px;
}
.tijdlijn-item.overzicht-item {
display: flex;
flex-direction: column;
position: relative;
padding: 16px;
border: 1px solid #ddd;
border-radius: 8px;
background: #fff;
box-shadow: 0 1px 4px rgba(0,0,0,0.08);
margin-bottom: 12px;
align-items: flex-start;
justify-content: flex-start;
text-align: left;
}
.section-card .tijdlijn .overzicht-item .info {
width: 100%;
text-align: left;
display: block;
}
.section-card .tijdlijn .overzicht-item .act {
display: flex;
align-items: center;
gap: 8px;
}
.section-card .tijdlijn .overzicht-item .act img {
width: 24px;
height: 24px;
flex-shrink: 0;
}
.section-card .tijdlijn .overzicht-item .time {
font-weight: 600;
color: var(--kleur-accent);
margin-top: 4px;
}
/* NIEUWE STIJL VOOR TIJD: ROOD */
.section-card .tijdlijn .overzicht-item .time-red {
color: #cc0033; /* Rood uit de .danger knop in components.css */
}
.section-card .tijdlijn .overzicht-item .muted {
font-size: 0.9rem;
color: #666;
margin-top: 4px;
}
.cost-only {
font-size: 0.95rem;
color: var(--kleur-tekst, #5d4037);
font-weight: bold;
margin-top: 8px;
text-align: right;
padding-top: 4px;
}

/* Documenten container (detailpagina weergave) */
.section-card .documenten {
display: flex;
flex-direction: column;
gap: 12px;
}
.section-card .documenten .overzicht-item {
position: relative;
display: flex;
flex-direction: column;
align-items: flex-start !important;
justify-content: flex-start !important;
text-align: left !important;
padding: 12px 16px;
border: 1px solid #ddd;
border-radius: 8px;
background: #fff;
box-shadow: 0 1px 4px rgba(0,0,0,0.08);
margin-bottom: 12px;
}
.section-card .documenten .overzicht-item .info {
width: 100%;
text-align: left !important;
display: block;
}
.section-card .documenten .overzicht-item .doc-omschrijving {
font-weight: 600;
margin-bottom: 6px;
color: var(--kleur-accent);
}
.section-card .documenten .overzicht-item .doc-bestandsnaam {
font-size: 0.9rem;
color: #666;
display: none;
}
.section-card .documenten .overzicht-item .actions {
position: static;
right: auto;
bottom: auto;
display: flex;
gap: 8px;
margin-top: 8px;
width: 100%;
justify-content: flex-start;
}
.section-card .documenten .overzicht-item .actions .btn.btn-sm {
padding: 6px 12px;
font-size: 0.85rem;
width: 100%;
}


/* MEDIA QUERY: DESKTOP OVERRIDE Documenten- en Tijdlijnlijst */
@media (min-width: 768px) {

/* Tijdlijn Layout (Desktop) */
.tijdlijn-item.overzicht-item {
 flex-direction: row !important;
 justify-content: space-between;
 align-items: flex-start;
 padding-right: 180px;
 padding-bottom: 10px;
}
.tijdlijn-item .info {
 flex-grow: 1;
 margin-right: 20px;
 min-width: 0;
 overflow-wrap: break-word;
}
.cost-only {
 position: absolute;
 bottom: 10px;
 right: 16px;
 width: 150px;
 margin-top: 0;
 text-align: right;
}

/* Documenten items terug naar 'rij'-concept op desktop */
.section-card .documenten .overzicht-item {
 flex-direction: row;
 align-items: center !important;
 justify-content: space-between !important;
 padding-right: 120px;
 min-height: 50px;
}
.section-card .documenten .overzicht-item .info {
 flex-grow: 1;
 width: auto;
 padding-right: 10px;
}
.section-card .documenten .overzicht-item .doc-bestandsnaam {
 display: inline-block;
 margin-left: 10px;
}
.section-card .documenten .overzicht-item .doc-omschrijving {
 display: inline-block;
 margin-bottom: 0;
}
.section-card .documenten .overzicht-item .actions {
 position: absolute;
 right: 16px;
 bottom: 50%;
 transform: translateY(50%);
 display: flex;
 gap: 8px;
 margin-top: 0;
 width: auto;
 justify-content: flex-end;
}
.section-card .documenten .overzicht-item .actions .btn.btn-sm {
 width: auto;
}
}


/* =========================================
 8. Deelnemers Tabel tweaks (specifiek op pagina)
========================================= */

:root {
--col-name-width: 30%;
--col-status-width: 15%;
--col-vooraf-width: 6%;
--col-nakosten-width: 6%;
--col-actions-width: 12%;
--col-delete-width: 6%;
}

.data-table th.name-col, .data-table td.name-col { width: var(--col-name-width); }
.data-table th.status-col, .data-table td.status-col { width: var(--col-status-width); }
.data-table th.vooraf-col, .data-table td.vooraf-col { width: var(--col-vooraf-width); text-align: center; }
.data-table th.nakosten-col, .data-table td.nakosten-col { width: var(--col-nakosten-width); text-align: center; }
.data-table th.actions-col, .data-table td.actions-col { width: var(--col-actions-width); text-align: center; }
.data-table th.delete-col, .data-table td.delete-col { width: var(--col-delete-width); text-align: center; }

.data-table tr.selected-delete { background-color: #ffe6e6; }
.deelnemers-balk {
margin: 8px 0 16px;
padding: 6px 12px;
list-style: none;
display: flex;
gap: 24px;
flex-wrap: nowrap;
background: #f9f9f9;
border: 1px solid #ddd;
}
.deelnemers-balk li { font-size: 0.9rem; white-space: nowrap; }

/* Thumbnail Hover in Deelnemers Tabel */

/* FIX: Overschrijf de basis 'overflow: hidden' op de tabel wrapper */
.table-wrapper {
overflow-y: visible !important;
overflow-x: auto !important;
position: relative !important;
z-index: 10;
max-height: none !important;
height: auto !important;
min-height: 0 !important;
}
.table-wrapper .data-table {
overflow: visible !important;
}

/* 1. MAAK DE RIJ DE HOGERE STAPELCONTEXT */
.table-wrapper .data-table tbody tr {
position: relative;
z-index: 1;
overflow: visible !important;
}
.table-wrapper .data-table tbody tr:hover {
z-index: 100;
}

/* 2. MAAK DE DATACEL (TD) DE POSITIONERINGSCONTEXT */
.table-wrapper .data-table td:nth-child(8) {
position: relative;
overflow: visible !important;
}

/* 3. DE ANKER-TAG (DE KNOP) is de basis voor de thumbnail */
.table-wrapper .photo-action-link {
position: relative;
display: inline-block;
width: 40px;
height: 40px;
line-height: 40px;
text-align: center;
z-index: 200;
}

/* 4. DE CONTAINER VOOR DE THUMBNAIL ZELF */
.table-wrapper .hover-thumbnail-container {
display: none;
position: absolute;
z-index: 9999;
/* POSITIONERING RECHTS VAN DE KNOP */
top: 40%;
left: 100%;
transform: translateY(-50%) translateX(10px);
padding: 5px;
pointer-events: none;
background-color: #fff;
border: 1px solid #000;
border-radius: 4px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5);
}

/* Toon de thumbnail bij hover */
.table-wrapper .photo-action-link:hover .hover-thumbnail-container {
display: block;
}

/* 5. STIJL VOOR DE THUMBNAIL AFBEELDING */
.table-wrapper .hover-thumbnail {
width: 100px;
height: 125px;
object-fit: cover;
border-radius: 4px;
display: block;
}