:root {
    --primary-color: #6322d1; /* EasySEO Paars */
    --primary-hover: #4e1a9e;
    --black-color: #000000;   /* EasySEO Zwart */
    --bg-color: #f4f6f9;
}

body {
    background-color: var(--bg-color);
    /* Aptos als primair font */
    font-family: "Aptos", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    color: #333;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

/* --- LAYOUT --- */
.main-container {
    max-width: 900px;
    margin: 40px auto;
    padding: 0 15px;
    width: 100%;
}

.card-custom {
    background: #ffffff;
    border: 1px solid #e1e4e8;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.03);
    padding: 40px;
    margin-bottom: 20px;
}

/* --- HEADER / NAVBAR --- */
.navbar-custom {
    background-color: var(--black-color) !important; /* Forceer Zwart */
    border-bottom: 1px solid #333;
    padding: 15px 0;
}

.navbar-brand {
    color: #ffffff !important;
    font-weight: 700;
    font-size: 1.25rem;
}

/* FIX: Zorg dat alleen links IN de navbar wit zijn */
.navbar-custom .nav-link {
    color: #ffffff !important;
    opacity: 0.85;
    font-weight: 500;
    transition: opacity 0.2s;
}

.navbar-custom .nav-link:hover, .navbar-custom .nav-link.active {
    opacity: 1;
    text-decoration: none;
}

.nav-text-user {
    color: #999;
    font-size: 0.9rem;
    margin-right: 15px;
}

/* --- DASHBOARD TABS (NAV PILLS) --- */
.nav-pills .nav-link {
    color: #666; /* Donkergrijs voor inactieve tabs */
    background-color: transparent;
    font-weight: 600;
    padding: 10px 20px;
    border-radius: 6px;
    transition: all 0.2s;
}

.nav-pills .nav-link:hover {
    color: var(--primary-color);
    background-color: rgba(99, 34, 209, 0.05); /* Heel licht paars bij hover */
}

.nav-pills .nav-link.active {
    background-color: var(--primary-color) !important; /* EasySEO Paars */
    color: #ffffff !important; /* Wit */
    box-shadow: 0 2px 5px rgba(99, 34, 209, 0.3);
}


/* --- KNOPPEN & KLEUREN (PAARS) --- */

/* Override standaard Bootstrap 'Primary' (Blauw -> Paars) */
.text-primary {
    color: var(--primary-color) !important;
}

.bg-primary {
    background-color: var(--primary-color) !important;
}

.btn-primary {
    background-color: var(--primary-color) !important;
    border-color: var(--primary-color) !important;
}

.btn-primary:hover, .btn-primary:active, .btn-primary:focus {
    background-color: var(--primary-hover) !important;
    border-color: var(--primary-hover) !important;
}

.btn-outline-primary {
    color: var(--primary-color) !important;
    border-color: var(--primary-color) !important;
}

.btn-outline-primary:hover {
    background-color: var(--primary-color) !important;
    color: #fff !important;
}

/* Onze eigen Custom Button class */
.btn-custom {
    background-color: var(--primary-color);
    color: white;
    border: none;
    padding: 10px 20px;
    border-radius: 6px;
    font-weight: 600;
    text-decoration: none;
    display: inline-block;
    transition: background 0.2s, transform 0.1s;
    cursor: pointer;
}

.btn-custom:hover {
    background-color: var(--primary-hover);
    color: white;
    transform: translateY(-1px);
}

.btn-custom:disabled {
    background-color: #a0aec0;
    cursor: not-allowed;
    transform: none;
}

/* --- NIEUW: Specifieke Geschiedenis Knop --- */
.btn-history {
    background-color: var(--primary-color);
    color: white;
    border: none;
    padding: 6px 14px; /* Compacter: minder padding */
    border-radius: 6px;
    font-weight: 600;
    font-size: 0.9rem; /* Iets kleiner font */
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    white-space: nowrap; /* Voorkom dat tekst breekt */
    transition: background 0.2s, transform 0.1s;
    cursor: pointer;
}

.btn-history:hover {
    background-color: var(--primary-hover);
    color: white;
    transform: translateY(-1px);
}

/* --- LOADING OVERLAY --- */
#loadingOverlay {
    display: none;
    position: fixed;
    top: 0; left: 0; 
    width: 100%; height: 100%;
    background: rgba(255,255,255,0.95);
    z-index: 9999;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

.spinner-custom { 
    color: var(--primary-color); 
    width: 3rem; 
    height: 3rem; 
}

/* --- TABELLEN & INTERACTIE --- */
.hover-effect {
    transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s;
}
.hover-effect:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 15px rgba(0,0,0,0.1);
    border-color: var(--primary-color); /* Paarse rand bij hover */
}

.cursor-pointer { 
    cursor: pointer; 
    user-select: none; 
}
.cursor-pointer:hover { 
    background-color: #e9ecef; 
}