:root {
    --bw-primary:   #94c11a;
    --bw-secondary: #c4ae3a;
    --bw-kop:       #2F3E34;
    --bw-body:      #5F6F64;
    --bw-link:      #100F0F;
    --bw-bg:        #f6eed6;
    --bw-white:     #fff;
}

.bw_dashboard_wrapper { 
    font-family: 'Inter', sans-serif; 
    background-color: var(--bw-bg); 
    padding: 25px; 
    border-radius: 16px; 
    color: var(--bw-body); 
    max-width: 1000px;
    margin: 40px auto;
}

.admin_generator_box { 
    background: var(--bw-white); 
    padding: 30px; 
    border-radius: 12px; 
    box-shadow: 0 4px 15px rgba(0,0,0,0.08); 
    margin-bottom: 35px; 
}

/* Gestructureerde Form indeling */
.gen_form { display: flex; flex-direction: column; gap: 0; }
.gen_row { display: flex; flex-wrap: wrap; gap: 20px; margin-bottom: 20px; width: 100%; }
.gen_row:last-child { margin-bottom: 0; }

.input_group { display: flex; flex-direction: column; gap: 8px; flex-grow: 1; min-width: 120px; }
.input_group label { font-size: 11px; font-weight: 700; color: var(--bw-kop); text-transform: uppercase; letter-spacing: 0.5px; }
.input_group input, .input_group select { 
    padding: 12px 15px; 
    border: 1px solid #d1d5db; 
    border-radius: 8px; 
    background: var(--bw-white); 
    font-size: 14px; 
    box-sizing: border-box; 
    height: 46px; 
    transition: border-color 0.2s; 
    width: 100%; 
}
.input_group input:focus, .input_group select:focus { border-color: var(--bw-primary); outline: none; }
.input_group small { font-size: 10px; color: #6b7280; }
.input_group.small  { flex-grow: 0; min-width: 100px; }
.input_group.medium { flex-grow: 0; min-width: 180px; }
.input_group.large  { flex-grow: 2; min-width: 250px; }

/* Validatie pseudo class voor foutieve invoer */
.input_group input:invalid { border-color: #ef4444; background-color: #fef2f2; }

.gen_buttons { display: flex; gap: 10px; margin-left: auto; align-self: flex-end; }
.btn-primary { 
    background: var(--bw-primary); 
    color: var(--bw-white); 
    border:none; 
    border-radius:8px; 
    cursor:pointer; 
    font-weight:600; 
    padding:12px 24px; 
    height:46px; 
    transition: background 0.2s; 
}
.btn-primary:hover { background: #3e6d53; }
.btn-secondary { 
    background: #e5e7eb; 
    color: var(--bw-kop); 
    border:none; 
    border-radius:8px; 
    cursor:pointer; 
    font-weight:600; 
    padding:12px 24px; 
    height:46px; 
    transition: background 0.2s; 
}
.btn-secondary:hover { background: #d1d5db; }

.preview_box { 
    background: #f9fafb; 
    padding: 20px; 
    border-radius: 8px; 
    margin-top: 25px; 
    border: 1px solid #e5e7eb; 
    border-left: 5px solid var(--bw-primary); 
}

.qr_table { width: 100%; border-collapse: collapse; min-width: 800px; }
.qr_table th { text-align: left; padding: 12px; border-bottom: 2px solid var(--bw-bg); color: var(--bw-kop); font-size: 11px; text-transform: uppercase; }
.qr_table td { padding: 12px; border-bottom: 1px solid var(--bw-bg); font-size: 13px; }

@media (max-width: 768px) {
    .bw_dashboard_wrapper { padding: 15px; margin: 20px auto; }
    .gen_row { flex-direction: column; align-items: stretch; gap: 15px; margin-bottom: 15px; }
    .input_group { width: 100%; min-width: unset; }
    .gen_buttons { justify-content: flex-end; width: 100%; margin-top: 10px; }
}
@media (max-width: 480px) {
    .gen_buttons { flex-direction: column; align-items: stretch; }
    .btn-primary, .btn-secondary { width: 100%; text-align: center; }
}