/* /assets/css/components.css */


/* =========================================
1. Knoppen en Interactie
========================================= */

/* Basis knopstijl */
button,
.btn {
display: inline-block;
padding: 8px 16px;
font-size: 15px;
border: none;
border-radius: var(--radius);
cursor: pointer;
background-color: var(--kleur-accent);
color: white;
transition: background 0.2s ease, color 0.2s ease;
text-decoration: none;
line-height: 1;
vertical-align: middle;
}

/* Hover staat */
button:hover,
.btn:hover {
background-color: var(--kleur-accent-licht);
}

/* Icoon spacing binnen knoppen */
.btn i {
margin-right: 6px;
}

/* Danger variant */
.btn.danger {
background-color: #cc0033;
color: white;
}
.btn.danger:hover {
background-color: #b2002a;
}

/* Actieve staat */
.btn-active {
background: var(--kleur-accent-licht);
color: white;
}

/* Kleine knoppen (SM) */
.btn-sm {
padding: 6px 10px;
font-size: 13px;
border-radius: calc(var(--radius) - 2px);
}

/* Ghost / secundaire knop (transparant / outline) */
.btn-ghost {
background: transparent;
color: var(--kleur-tekst);
border: 1px solid rgba(0,0,0,0.06);
box-shadow: none;
}
.btn-ghost:hover {
background: rgba(0,0,0,0.04);
}

/* Header-specifieke knoppen */
.btn-header {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 6px 10px;
background: var(--kleur-accent);
color: white;
border-radius: 4px;
text-decoration: none;
font-size: 14px;
transition: background 0.3s ease;
}
.btn-header:hover {
background: var(--kleur-accent-licht);
}

/* Focus-styling voor toegankelijkheid */
button:focus,
.btn:focus,
.btn-header:focus {
outline: 3px solid rgba(161, 136, 127, 0.25);
outline-offset: 2px;
}

/* Responsieve aanpassingen voor knoppen */
@media (max-width: 640px) {
.btn {
padding: 8px 12px;
font-size: 14px;
}
.btn-sm {
padding: 6px 8px;
font-size: 13px;
}
}


/* =========================================
2. Kaarten en Sectie Containers
========================================= */

/* Algemene Sectie Card */
.section-card {
background: #ffffff;
border: 1px solid #000000;
border-radius: 10px;
padding: 16px;
box-shadow: 0 6px 18px rgba(8, 35, 64, 0.04);
margin: 18px 0;
box-sizing: border-box;
}
.section-card h2 {
margin: 0 0 12px 0;
color: var(--kleur-accent);
font-size: 1.125rem;
font-weight: 600;
}

/* Algemene herbruikbare Card (voor bijvoorbeeld uitje-overzicht) */
.card {
background-color: #ffffff;
border: 1px solid var(--kleur-border);
border-radius: 18px;
box-shadow: 0 6px 20px rgba(0,0,0,0.15);
overflow: hidden;
display: flex;
flex-direction: column;
cursor: pointer;
transition: transform 0.25s ease, box-shadow 0.25s ease;
text-decoration: none;
color: var(--kleur-tekst);
}

.card:hover {
transform: translateY(-6px);
box-shadow: 0 12px 24px rgba(0,0,0,0.25);
}

.vertical-date {
background-color: var(--kleur-accent);
color: #fff;
font-weight: bold;
text-align: center;
padding: 12px;
font-size: 1rem;
}

.card .content {
padding: 20px;
display: flex;
flex-direction: column;
gap: 10px;
}

.card .title {
font-size: 1.4rem;
font-weight: bold;
color: var(--kleur-accent);
}

.card .description {
font-size: 1rem;
color: var(--kleur-tekst);
}

.card .status {
font-weight: bold;
font-size: 1rem;
}
.card .status.ingeschreven { color: #2e7d32; }
.card .status.niet-ingeschreven { color: #c62828; }

.card .footer {
font-size: 0.9rem;
color: #555;
}

.card img {
width: 100%;
height: 160px;
object-fit: cover;
border-radius: 12px;
}

/* Dashboard Grid Item (Herbruikbare Card) */
.grid a {
display: flex;
flex-direction: column;
align-items: flex-start;
background: #ffffff;
padding: 20px;
border-radius: 8px;
box-shadow: 0 1px 3px rgba(0,0,0,0.1);
text-decoration: none;
color: var(--kleur-accent);
transition: box-shadow 0.2s ease, background-color 0.2s ease;
min-height: 140px;
}

.grid a:hover {
background-color: #f0f8ff;
box-shadow: 0 2px 6px rgba(0,0,0,0.15);
}

.grid a i {
font-size: 28px;
margin-bottom: 12px;
color: var(--kleur-accent-licht);
}

.grid a strong {
font-size: 16px;
margin-bottom: 8px;
font-weight: bold;
}

.grid a span {
font-size: 14px;
color: var(--kleur-tekst);
}

/* Uitje-tegel voor overzicht (Lijst/Tegel variant) */
.uitje-tegel {
display: flex;
flex-direction: column;
background: #fff;
padding: 16px;
border-radius: 8px;
box-shadow: 0 1px 3px rgba(0,0,0,0.1);
text-decoration: none;
color: var(--kleur-accent);
transition: box-shadow 0.2s ease, background-color 0.2s ease;
min-height: 180px;
}
.uitje-tegel:hover {
background-color: #f0f8ff;
box-shadow: 0 2px 6px rgba(0,0,0,0.15);
}
.uitje-tegel strong { font-size: 16px; margin-bottom: 6px; }
.uitje-tegel span { font-size: 14px; color: var(--kleur-tekst); }


/* =========================================
3. Data Overzicht Lijsten (Items)
========================================= */

/* Algemene Overzicht Items (Lijstvorm) */
.overzicht-item {
display: flex;
justify-content: space-between;
align-items: center;
padding: 8px 12px;
border: 1px solid #ddd;
margin-bottom: 8px;
}

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

.overzicht-item .info {
flex: 1;
}

.overzicht-item .bestandsnaam {
font-size: 13px;
color: #666;
}

/* Actieblokken (Algemene layout) */
.actions {
display: flex;
align-items: center;
gap: 8px;
}

/* Actieknoppen rechtsonder in kaart */
.overzicht-item .actions {
margin-top: auto;
justify-content: flex-end; /* rechts uitlijnen voor actions */
}

.overzicht-item .actions form {
margin: 0;
display: flex;
align-items: center;
}

/* --- Alleen knoppen in overzicht-items en tabellen (Verfijning) --- */
.overzicht-item .actions .btn-sm {
display: inline-flex;
align-items: center;
justify-content: center;
height: 32px;
min-width: 32px;
padding: 4px 8px;
box-sizing: border-box;
line-height: 1;
}

.overzicht-item .actions .btn-sm i {
font-size: 16px;
line-height: 1;
margin: 0;
pointer-events: none;
}

/* Tijdlijn specifieke stijl */
.tijdlijn-item .info .time-red {
    color: #cc0033 !important; /* Sterk rode kleur geforceerd */
    font-weight: bold;
}

/* NIEUW: Verzamelpunt specifieke stijl */
.verzamelpunt-info .time-red {
    color: #cc0033 !important; /* Sterk rode kleur geforceerd */
    font-weight: bold;
}


/* =========================================
4. Tabellen en Data Weergave
========================================= */

.table-wrapper {
width: 100%;
max-height: 70vh;
overflow-x: auto;
overflow-y: auto;
background: transparent;
}

table.data-table {
width: 100%;
table-layout: fixed;
margin-top: 20px;
border-collapse: separate;
border-spacing: 0;
background: #fff;
box-shadow: 0 2px 6px rgba(0,0,0,0.05);
border-radius: 8px;
overflow: hidden;
}

/* Sticky header met afgeronde bovenhoeken */
table.data-table thead th {
position: sticky;
top: 0;
background: #f0f0f0;
font-weight: 600;
z-index: 5;
}
table.data-table thead th:first-child {
border-top-left-radius: 8px;
}
table.data-table thead th:last-child {
border-top-right-radius: 8px;
}

/* Afgeronde onderhoeken */
table.data-table tbody tr:last-child td:first-child {
border-bottom-left-radius: 8px;
}
table.data-table tbody tr:last-child td:last-child {
border-bottom-right-radius: 8px;
}

table.data-table th,
table.data-table td {
padding: 10px;
border: 1px solid var(--kleur-border);
vertical-align: middle;
font-size: 14px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}

table.data-table td.center { text-align: center; }
table.data-table td form { display: inline; }
table.data-table td input[type="checkbox"] {
transform: scale(1.2);
cursor: pointer;
}

/* Hover-effect */
table.data-table tbody tr:hover {
filter: brightness(0.95);
}

/* Visuele hint dat rij lokaal gewijzigd is */
table.data-table tbody tr[data-dirty="1"] {
box-shadow: inset 0 0 0 2px rgba(0,86,179,0.06);
}

/* Statuskleuren hele rij */
tr.status-wit { background-color: #ffffff; color: #222; }
tr.status-groen { background-color: #c8f7c5; color: #0a3d0a; }
tr.status-rood { background-color: #ffb3b3; color: #660000; }
tr.status-geel { background-color: #fff799; color: #4d4d00; }
tr.status-paars { background-color: #d9b3ff; color: #330066; }

/* Tabel controls */
.table-controls {
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
gap: 10px;
padding: 12px 20px;
background: var(--kleur-achtergrond);
}

.table-controls .left,
.table-controls .right {
display: flex;
gap: 10px;
flex-wrap: wrap;
}

.table-controls .center {
flex: 1;
text-align: center;
font-size: 14px;
color: #666;
}

/* Compacte actieknoppen voor tabelrijen */
.table-wrapper table td .actions {
display: flex !important;
gap: 6px;
align-items: center;
justify-content: flex-end;
flex-wrap: nowrap;
white-space: nowrap;
}

.icon-action {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 2px;
width: 34px;
height: 34px;
font-size: 14px;
line-height: 1;
border: none;
background: transparent;
cursor: pointer;
color: inherit;
text-decoration: none;
box-sizing: border-box;
}
.icon-action:hover {
background: rgba(0,0,0,0.04);
border-radius: 4px;
}

/* Zorg dat actiekolom niet onnodig groeit */
.table-wrapper table colgroup col:last-child {
min-width: 140px;
width: auto;
}

/* Actie iconen centreren */
.table-wrapper .actions .icon-action {
display: inline-flex;
align-items: center;
justify-content: center;
height: 32px;
min-width: 32px;
padding: 4px 8px;
box-sizing: border-box;
line-height: 1;
}

.table-wrapper .actions .icon-action i {
font-size: 16px;
line-height: 1;
margin: 0;
pointer-events: none;
}


/* =========================================
5. Meldingen en Notificaties
========================================= */

/* Algemene meldingen (In-flow) */
.melding {
padding: 12px;
margin-bottom: 20px;
border-radius: var(--radius);
font-weight: bold;
text-align: center;
transition: opacity 0.5s ease-in-out;
}
.melding.success {
background-color: var(--kleur-success);
color: #155724;
border: 1px solid #c3e6cb;
}
.melding.error {
background-color: var(--kleur-error);
color: #721c24;
border: 1px solid #f5c6cb;
}
.melding.fade-out { opacity: 0; }

.login-hint {
margin-top: 20px;
font-size: 14px;
color: #555;
text-align: center;
}

/* Floating Melding (Globale Feedback Component) */
.floating-melding {
position: fixed;
top: 80px;
right: 20px;
z-index: 2147483647;
padding: 15px 40px 15px 20px;
border-radius: 8px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
display: flex;
align-items: center;
max-width: 400px;
line-height: 1.4;
transition: opacity 0.5s ease-in-out, transform 0.5s ease-in-out;
opacity: 1;
transform: translateX(0);
overflow: visible !important;
}

.floating-melding.is-hidden {
opacity: 0;
transform: translateX(100%);
}

.floating-melding.succes {
background-color: #e6ffed;
color: #0c7a21;
border: 1px solid #7bc67b;
}

.floating-melding.fout {
background-color: #ffe6e6;
color: #990000;
border: 1px solid #e57373;
}

.floating-melding.info {
background-color: #e6f7ff;
color: #0056b3;
border: 1px solid #79b8f3;
}

.floating-melding i.fa-solid {
font-size: 1.4rem;
margin-right: 10px;
}

.floating-melding span {
font-weight: 500;
}

.floating-melding .close-btn {
position: absolute;
top: 5px;
right: 5px;
background: none;
border: none;
cursor: pointer;
color: inherit;
opacity: 0.7;
font-size: 1rem;
padding: 5px;
line-height: 1;
transition: opacity 0.2s;
}

.floating-melding .close-btn:hover {
opacity: 1;
}

.floating-melding.hide {
opacity: 0;
transform: translateX(100%);
}

/* Overige algemene badges */
.badge {
display: inline-block;
margin-left: 8px;
padding: 2px 6px;
font-size: 12px;
background: #28a745;
color: #fff;
border-radius: 4px;
}

/* Highlight voor actieve kaarten */
.card-actief {
position: relative;
animation: glowPulse 2s infinite;
}

@keyframes glowPulse {
0% { box-shadow: 0 0 8px rgba(0, 86, 179, 0.3); }
50% { box-shadow: 0 0 16px rgba(0, 86, 179, 0.6); }
100% { box-shadow: 0 0 8px rgba(0, 86, 179, 0.3); }
}