:root {
    --kp-navy: #382870;
    --kp-coral: #e64661;
    --kp-coral-dark: #d1354f;
}

body {
    background-color: #f0f2f5;
    font-size: 0.95rem;
    font-family: 'Poppins', sans-serif;
}

h1, h2, h3, h4, h5, h6, .navbar-brand {
    font-weight: 600;
}

.navbar-kp {
    background-color: var(--kp-navy);
}

.navbar-kp .navbar-brand {
    color: #fff;
    font-size: 1.5rem;
}
.navbar-kp .navbar-brand:hover {
    color: #fff;
}

.btn-success {
    background-color: var(--kp-coral);
    border-color: var(--kp-coral);
    border-radius: 45px;
    font-weight: 600;
}
.btn-success:hover,
.btn-success:focus,
.btn-success:active {
    background-color: var(--kp-coral-dark) !important;
    border-color: var(--kp-coral-dark) !important;
}

.navbar-kp .btn-outline-light {
    border-radius: 45px;
}

a {
    color: var(--kp-navy);
}
a:hover {
    color: var(--kp-coral);
}

.keuze-kaart {
    transition: transform 0.15s ease, box-shadow 0.15s ease;
    border: 1px solid #dee2e6;
}
.keuze-kaart:hover {
    transform: translateY(-3px);
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.1);
}

.resource-kaart {
    transition: transform 0.15s ease, box-shadow 0.15s ease;
    border-left: 6px solid transparent;
}
.resource-kaart:hover {
    transform: translateY(-3px);
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.1);
}
.resource-vrij {
    border-left-color: #198754;
}
.resource-bezet {
    border-left-color: #dc3545;
}

.status-bolletje {
    display: inline-block;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    margin-top: 4px;
}
.status-groen {
    background-color: #198754;
    box-shadow: 0 0 6px #198754;
}
.status-rood {
    background-color: #dc3545;
    box-shadow: 0 0 6px #dc3545;
}