/* /assets/css/forms.css */

/* =========================================
 1. Formulier Containers en Layout
========================================= */
.form-container,
.form-card {
max-width: 600px;
margin: 40px auto;
padding: 24px;
background: #fff;
border-radius: var(--radius);
box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}

.form-container h2 {
margin-bottom: 20px;
color: var(--kleur-accent);
}

.form-row {
display: flex;
flex-wrap: wrap;
gap: 20px;
margin-bottom: 20px;
}

.form-row.no-wrap { flex-wrap: nowrap; }

.form-group {
flex: 1;
min-width: 200px;
display: flex;
flex-direction: column;
}

.form-group.full { flex: 1 1 100%; }
.form-group.fixed-width { flex: 0 0 200px; }


/* Container om knoppen naast elkaar links uit te lijnen in formulieren */
.buttons-inline,
.form-group.full.buttons-inline {
display: flex;
flex-direction: row;
align-items: center;
gap: 10px;
justify-content: flex-start;
flex-wrap: wrap;
}

/* Zorg dat knoppen in de container niet uitrekken */
.form-group.full.buttons-inline > * {
flex: 0 0 auto;
}

/* Responsieve aanpassingen voor kleinere schermen */
@media (max-width: 640px) {
.buttons-inline {
 gap: 8px;
}
}


/* =========================================
 2. Formulier Velden, Labels en Inputs
========================================= */

/* Labels */
.field label,
.form-group label {
display: block;
margin-bottom: 6px;
font-weight: 600;
font-size: 14px;
color: var(--kleur-tekst, #28343f);
}

/* Algemene Input velden */
.form-group input,
.form-group select,
.form-group textarea {
padding: 10px 12px;
font-size: 15px;
border: 1px solid var(--kleur-border);
border-radius: var(--radius);
background: #f9f9f9;
transition: border-color 0.2s ease;
}

/* Focus staat */
.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
border-color: #007bff;
outline: none;
background: #fff;
}

/* Brede selectors voor inputs (Zorgt voor 100% breedte) */
.field input[type="text"],
.field input[type="date"],
.field input[type="number"],
.field input[type="url"],
.field input[type="tel"],
.field input[type="time"],
.field select,
.field textarea,
.form-group input,
.form-group select,
.form-group textarea {
width: 100%;
box-sizing: border-box;
border-radius: 8px;
border: 1px solid #cfd8dc;
padding: 10px;
background: #fff;
}

/* File inputs (aparte padding) */
.field input[type="file"] {
width: 100%;
padding: 6px 8px;
border-radius: 8px;
}


/* =========================================
 3. DataTable Specifieke Form Styling (Knoppen/Checkboxes)
========================================= */

/* Zorg dat alle kleine knoppen hun iconen exact centreren */
.data-table td .btn-sm {
display: inline-flex;
align-items: center;
justify-content: center;
padding: var(--btn-padding, 8px 8px);
font-size: var(--btn-font-size, 0.85rem);
}
/* Reset iconen binnen knoppen (save, trash, etc.) */
.data-table td .btn-sm i {
margin: 0;
line-height: 1;
display: inline-block;
}
/* Alleen trash-icoon in header-knop corrigeren */
.data-table th .btn-sm i.fa-trash {
transform: translateY(0px);
transform: translateX(3px);
}

/* Zorg dat checkboxen niet afwijkend uitlijnen */
.data-table th:not(.name-col) input[type="checkbox"],
.data-table td:not(.name-col) input[type="checkbox"] {
margin: 0 auto;
display: inline-block;
}