body {
    background-color: #f4f6f9;
    font-family: 'Segoe UI', sans-serif;
}

/* ── Navigatie ── */
.navbar {
    background-color: #002653 !important;
}

.navbar-brand img {
    height: 40px;
}

.navbar-nav .nav-link {
    color: #ffffff !important;
}

.navbar-nav .nav-link:hover {
    color: #b51218 !important;
}

.navbar-nav .nav-link.active {
    color: #ffffff !important;
    text-decoration: underline;
    text-underline-offset: 4px;
}

/* ── Knoppen ── */
.btn-primary {
    background-color: #002653;
    border-color: #002653;
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active {
    background-color: #b51218 !important;
    border-color: #b51218 !important;
}

.btn-danger {
    background-color: #b51218;
    border-color: #b51218;
}

.btn-danger:hover {
    background-color: #8e0e13;
    border-color: #8e0e13;
}

.btn-success {
    background-color: #198754;
    border-color: #198754;
}

.btn-success:hover {
    background-color: #157347;
    border-color: #146c43;
}

/* ── Cards ── */
.card {
    border: none;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    border-radius: 8px;
}

.card-header {
    background-color: #002653;
    color: #ffffff;
    border-radius: 8px 8px 0 0 !important;
}

.card-header .text-muted {
    color: rgba(255, 255, 255, 0.7) !important;
}

.card-header .fw-semibold,
.card-header h5,
.card-header h6 {
    color: #ffffff;
}

/* ── Tabellen ── */
table thead,
.table-dark {
    background-color: #002653 !important;
    color: #ffffff !important;
}

.table-dark th {
    background-color: #002653 !important;
    color: #ffffff !important;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.table th {
    font-size: 0.78rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    white-space: nowrap;
}

.table td {
    font-size: 0.88rem;
    vertical-align: middle;
}

.table td.kenteken {
    font-weight: 700;
    font-size: 0.95rem;
    white-space: nowrap;
}

.table td.autonaam {
    max-width: 280px;
    font-size: 0.82rem;
    color: #444;
}

.table td.accu {
    white-space: nowrap;
    font-family: monospace;
    font-size: 0.9rem;
}

.table td.datum {
    white-space: nowrap;
    font-size: 0.82rem;
    color: #666;
}

.table td.acties {
    white-space: nowrap;
    text-align: right;
}

/* ── Badges ── */
.badge {
    font-weight: 500;
}

.badge.bg-primary {
    background-color: #002653 !important;
}

/* ── Code ── */
code {
    background-color: #e9ecef;
    padding: 0.15rem 0.4rem;
    border-radius: 0.25rem;
    font-size: 0.875em;
    color: #002653;
}

/* ── Kenteken badge ── */
.fw-bold.fs-5 {
    font-family: 'Courier New', monospace;
    letter-spacing: 1px;
    background: #ffc107;
    color: #212529;
    padding: 0.15rem 0.5rem;
    border-radius: 4px;
}

/* ── Tabel zebra ── */
.table-striped > tbody > tr:nth-of-type(odd) > * {
    background-color: rgba(0, 0, 0, 0.02);
}

/* ── Alerts ── */
.alert {
    border-radius: 0.5rem;
}

/* ── Login pagina ── */
.login-card {
    max-width: 400px;
    margin: 100px auto;
}

.login-card .card-header {
    text-align: center;
    padding: 20px;
}