/* Importeer het Oswald font via Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@400;500;700&display=swap');

/* Jouw huisstijl kleuren als variabelen voor makkelijk hergebruik */
:root {
    --rr-dark: #1800ad;
    --rr-light: #38b6ff;
    --rr-white: #ffffff;
    --rr-bg: #f4f6f9; /* Heel lichtgrijs voor de achtergrond zodat de witte blokken 'poppen' */
}

body {
    background-color: var(--rr-bg);
    /* Standaard leeslettertype voor kleine teksten */
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; 
}

/* Koppel Oswald aan alle titels en het logo */
h1, h2, h3, h4, h5, h6, .navbar-brand {
    font-family: 'Oswald', sans-serif;
    text-transform: uppercase; 
    letter-spacing: 0.5px;
}

/* Custom Navigatiebalk */
.navbar-rr {
    background-color: var(--rr-dark) !important;
}
.navbar-rr .navbar-brand {
    color: var(--rr-white) !important;
    font-weight: 700;
    font-size: 1.5rem;
}

/* Dashboard Minimalistische Kaarten */
.rr-card {
    background-color: var(--rr-white);
    border: none;
    border-radius: 8px;
    box-shadow: 0 4px 6px rgba(0,0,0,0.05);
    transition: transform 0.2s ease-in-out;
}

/* Hover-effect: kaartjes komen iets omhoog als je er met de muis over gaat */
.rr-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 15px rgba(0,0,0,0.1);
}

.rr-card-title {
    color: var(--rr-dark);
    font-size: 1.1rem;
    font-weight: 500;
}

.rr-card-value {
    color: var(--rr-light);
    font-weight: 700;
}

/* Knoppen in huisstijl */
.btn-rr-primary {
    background-color: var(--rr-dark);
    color: var(--rr-white);
    border: none;
    border-radius: 4px;
}
.btn-rr-primary:hover {
    background-color: var(--rr-light);
    color: var(--rr-white);
}

/* --- DE DEFINITIEVE TABEL FIX --- */
/* Overschrijf Bootstrap 5 variabelen én forceer de achtergrondkleur op alle tabelkoppen */
.table-dark {
    --bs-table-bg: var(--rr-dark);
    --bs-table-color: var(--rr-white);
}

thead.table-dark th,
.table-dark th,
.table-dark td {
    background-color: var(--rr-dark) !important;
    color: var(--rr-white) !important;
    border-bottom-color: var(--rr-light) !important; /* Lichte blauwe lijn onder de header */
}