/* css/global.css - Gedeelde stijlen */
:root {
    --primary: #2563eb;
    --primary-hover: #1d4ed8;
    --success: #16a34a;
    --danger: #dc2626;
    --bg: #f8fafc;
    --border: #cbd5e1;
    --text-muted: #64748b;
    --header-bg: #1e293b;
    --font-family: sans-serif;
}

* { box-sizing: border-box; font-family: var(--font-family); }
body { background: var(--bg); margin: 0; }
.hidden { display: none !important; }

/* Knoppen */
.btn {
    padding: 10px 18px;
    border-radius: 6px;
    border: none;
    cursor: pointer;
    font-weight: bold;
    transition: 0.2s;
    font-size: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.btn-primary { background: var(--primary); color: white; }
.btn-primary:hover { background: var(--primary-hover); }
.btn-success { background: var(--success); color: white; }
.btn-danger { background: var(--danger); color: white; }
.btn-outline { background: white; border: 1px solid var(--border); }
.btn-outline:hover { background: #f8fafc; }

/* Velden */
input, select, textarea {
    width: 100%;
    padding: 10px;
    margin: 8px 0;
    border: 1px solid var(--border);
    border-radius: 6px;
    font-size: 16px;
}