/* ===== Standaard button ===== */
.btn {
    display: flex;
    padding: 6px 9px;
    justify-content: center;
    align-items: center;
    gap: 4px;
    border-radius: 10px;
    border: 1px solid #E5E5EC;
    background: #FFF;
    cursor: pointer;
    color: var(--primary-text);
    text-decoration: none;
    transition: background 0.15s ease;
    font-family: Poppins, sans-serif;
}

.btn:hover {
    background: #f3f4f6;
    text-decoration: none;
}

.btn svg {
    width: 16px;
    height: 16px;
}

/* ===== Varianten ===== */
.btn--icon-lg svg {
    width: 20px;
    height: 20px;
}

/* Primaire actieknop (groen) */
.btn--primary {
    border: 1px solid var(--primary, #059573);
    background: linear-gradient(90deg, #059573 0%, #00BF63 100%);
    color: #fff;
    font-size: 13px;
    font-weight: 500;
    gap: 6px;
}

.btn--primary:hover {
    background: linear-gradient(90deg, #047a5f 0%, #00a854 100%);
    border-color: #047a5f;
}

.btn--danger {
    border-color: #fca5a5;
    color: #b91c1c;
    background: #fff;
}

.btn--danger:hover {
    background: #fef2f2;
}

.btn--primary span {
    color: #fff;
    font-size: 13px;
    font-weight: 500;
}

/* ===== Tabs ===== */
.tab-row {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
}

.tab-btn {
    display: flex;
    padding: 6px 14px;
    justify-content: center;
    align-items: center;
    gap: 4px;
    border-radius: 10px;
    background: none;
    border: none;
    font-size: 12px;
    font-family: Poppins, sans-serif;
    color: #9ca3af;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}

.tab-btn:hover {
    color: var(--primary, #059573);
}

.tab-btn.active {
    background: var(--primary-light, #E5FAF3);
    color: var(--primary, #059573);
}

/* Icon in primaire knop altijd wit */
.btn--primary svg {
    width: 16px;
    height: 16px;
    filter: brightness(0) invert(1);
    flex-shrink: 0;
}

/* ===== Actie-knop (drie punten) ===== */
.actie-btn {
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px 8px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    transition: background 0.15s;
}

.actie-btn:hover {
    background: #F3F4F6;
}

/* ===== Staat / status badges ===== */
.staat-badge {
    display: inline-flex;
    align-items: center;
    padding: 3px 10px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 500;
    white-space: nowrap;
}

.staat-badge--actief {
    background: #d1fae5;
    color: #065f46;
    -webkit-text-fill-color: #065f46;
}

.staat-badge--inactief {
    border: 1.5px solid #9ca3af;
    color: #6b7280;
    background: transparent;
}

/* ===== Sidebar toggle (eigen gedrag) ===== */
.sidebar-toggle {
    position: absolute;
    inset: 0;
    border: none;
    background: transparent;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    opacity: 0;
    color: var(--nav-icon-color);
    transition: opacity 0.15s ease, color 0.15s ease;
}

.sidebar-logo:hover .sidebar-toggle {
    opacity: 1;
}

.sidebar-toggle:hover {
    color: #111827;
}

.sidebar-toggle svg {
    width: 20px;
    height: 20px;
    transition: transform 0.25s ease;
}