/* --- Zwart-Groene Huisstijl Globaal --- */
:root {
    --accent: #00c853;
    --accent-light: #5efc82;
    --accent-dark: #009624;
}
html, body {
    background: #111;
    color: #fff;
    font-family: 'Inter', 'Segoe UI', Arial, sans-serif;
    font-size: 1.08em;
    margin: 0;
    padding: 0;
    min-height: 100vh;
}

h1, h2, h3, h4, h5, h6 {
    color: var(--accent);
    font-weight: 700;
    letter-spacing: 0.01em;
    margin-top: 1.2em;
    margin-bottom: 0.5em;
}

p, li, label, span, div {
    color: #fff;
}

a {
    color: var(--accent);
    text-decoration: underline;
    transition: color 0.15s;
}
a:hover, a:focus {
    color: #fff;
    background: var(--accent);
    text-decoration: none;
    border-radius: 3px;
    padding: 0 0.2em;
}

/* Buttons algemeen */
button, .btn {
    background: linear-gradient(135deg, var(--accent) 60%, var(--accent-light) 100%);
    color: #111;
    border: none;
    border-radius: 7px;
    padding: 0.45em 1.2em;
    font-size: 1em;
    font-family: inherit;
    font-weight: 600;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(0,200,83,0.10);
    transition: background 0.18s, color 0.18s, box-shadow 0.18s;
    outline: none;
    margin: 0.2em 0;
    display: inline-block;
}
button:hover, .btn:hover, button:focus, .btn:focus {
    background: #111;
    color: var(--accent);
    box-shadow: 0 4px 16px rgba(0,200,83,0.18);
}

/* Inputvelden algemeen */
input, textarea, select, .form-control {
    background: #181818;
    color: #fff;
    border: 2px solid var(--accent);
    border-radius: 7px;
    padding: 0.32em 0.9em;
    font-family: inherit;
    font-size: 1em;
    box-shadow: 0 2px 8px rgba(0,0,0,0.10);
    transition: border 0.2s, box-shadow 0.2s;
    outline: none;
    margin: 0.2em 0;
}
input:focus, textarea:focus, select:focus, .form-control:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px #00c85355;
}
input::placeholder, textarea::placeholder {
    color: #00c853bb;
    opacity: 1;
    font-style: italic;
}

/* Lists */
ul, ol {
    color: #fff;
    margin-left: 1.5em;
}

/* Cards, panels, containers */
.card, .panel, .container, .content {
    background: #181818;
    border-radius: 10px;
    box-shadow: 0 2px 12px rgba(0,0,0,0.10);
    padding: 1.2em 1.5em;
    margin: 1.2em 0;
}

/* Overschrijf Bootstrap borders en schaduwen */
.border, .border-bottom, .border-top, .border-left, .border-right {
    border-color: var(--accent) !important;
}
.shadow, .shadow-sm, .shadow-lg {
    box-shadow: 0 2px 12px rgba(0,200,83,0.10) !important;
}

/* Scrollbar oranje */
::-webkit-scrollbar {
    width: 10px;
    background: #181818;
}
::-webkit-scrollbar-thumb {
    background: var(--accent);
    border-radius: 6px;
}

/* Selectie oranje */
::selection {
    background: var(--accent);
    color: #111;
}

/* Foutmeldingen en validatie */
.validation-message, .text-danger, .error {
    color: var(--accent);
    font-weight: 600;
}

/* Verberg Bootstrap grid als je die niet gebruikt */
.row, .col, [class^="col-"] {
    margin: 0;
    padding: 0;
}

/* Optioneel: navigatiebalk zwart/oranje */
nav, .navbar {
    background: #111;
    color: var(--accent);
    border-bottom: 2px solid var(--accent);
}
nav a, .navbar a {
    color: var(--accent);
    font-weight: 600;
}
nav a:hover, .navbar a:hover {
    color: #fff;
    background: var(--accent);
    border-radius: 3px;
}

/* Optioneel: footer */
footer {
    background: #181818;
    color: var(--accent);
    border-top: 2px solid var(--accent);
    padding: 1em 0;
    text-align: center;
}

/* NavMenu achtergrond en styling */
.nav-logo-bar, .top-row.navbar, .navbar, .nav-scrollable, .nav {
    background: #181818 !important;
    border-bottom: 2px solid var(--accent);
    box-shadow: 0 2px 12px rgba(0,200,83,0.10);
}

.nav-logo-bar {
    background: #111 !important;
    border-bottom: 2.5px solid var(--accent);
    box-shadow: 0 4px 18px rgba(0,200,83,0.10);
}

.navbar-brand, .nav-logo {
    height: 38px;
    width: auto;
    display: block;
    margin-right: 0.7em;
}

.nav-link, .nav-item, .nav-link.active {
    color: var(--accent) !important;
    font-weight: 600;
    font-size: 1.08em;
    border-radius: 6px;
    margin: 0.2em 0.2em 0.2em 0;
    padding: 0.5em 1.1em;
    transition: background 0.15s, color 0.15s;
    background: none;
}

.nav-link.active, .nav-link:hover, .nav-link:focus {
    background: var(--accent) !important;
    color: #111 !important;
}

.nav {
    padding-top: 0.7em;
    padding-bottom: 0.7em;
}