/* ============================================================
   MaBaGA — gedeeld dark-thema (zwarte achtergrond, witte tekst)
   Bovenop Bootstrap 5. Accentkleur: goud (#e0b24a).
   Pas de variabelen hieronder aan om de look te wijzigen.
   ============================================================ */
:root {
  --mabaga-bg: #000000;
  --mabaga-surface: #141414;
  --mabaga-surface-2: #1d1d1d;
  --mabaga-border: #2a2a2a;
  --mabaga-text: #ffffff;
  --mabaga-muted: #9a9a9a;
  --mabaga-accent: #e0b24a;
  --mabaga-accent-hover: #f0c768;
}

/* Bootstrap-variabelen overschrijven zodat componenten meekleuren */
[data-bs-theme="dark"] {
  --bs-body-bg: var(--mabaga-bg);
  --bs-body-color: var(--mabaga-text);
  --bs-border-color: var(--mabaga-border);
  --bs-primary: var(--mabaga-accent);
  --bs-primary-rgb: 224, 178, 74;
  --bs-link-color: var(--mabaga-accent);
  --bs-link-hover-color: var(--mabaga-accent-hover);
  --bs-emphasis-color: #ffffff;
}

body {
  background-color: var(--mabaga-bg);
  color: var(--mabaga-text);
  min-height: 100vh;
}

/* Navbar */
.navbar.mabaga-nav {
  background-color: var(--mabaga-surface) !important;
  border-bottom: 1px solid var(--mabaga-border);
}
.navbar.mabaga-nav .navbar-brand { color: #fff; font-weight: 700; letter-spacing: -.02em; }
.navbar.mabaga-nav .nav-link { color: #d8d8d8; }
.navbar.mabaga-nav .nav-link:hover,
.navbar.mabaga-nav .nav-link.active { color: var(--mabaga-accent); }
.brand-sub { color: var(--mabaga-muted); font-size: .75rem; }

/* Kaarten / oppervlakken */
.card.mabaga-card {
  background-color: var(--mabaga-surface);
  border: 1px solid var(--mabaga-border);
  color: var(--mabaga-text);
}
.mabaga-surface-2 { background-color: var(--mabaga-surface-2); }

/* Tabellen */
.table.mabaga-table {
  --bs-table-bg: transparent;
  --bs-table-color: var(--mabaga-text);
  --bs-table-border-color: var(--mabaga-border);
  margin-bottom: 0;
}
.table.mabaga-table thead th {
  color: var(--mabaga-muted);
  text-transform: uppercase;
  font-size: .72rem;
  letter-spacing: .04em;
  border-bottom: 1px solid var(--mabaga-border);
  background-color: var(--mabaga-surface-2);
}
.table.mabaga-table tbody tr:hover { background-color: rgba(255,255,255,.03); }
.tabular-nums { font-variant-numeric: tabular-nums; }

/* Accent-knop */
.btn-mabaga {
  background-color: var(--mabaga-accent);
  border-color: var(--mabaga-accent);
  color: #1a1300;
  font-weight: 600;
}
.btn-mabaga:hover { background-color: var(--mabaga-accent-hover); border-color: var(--mabaga-accent-hover); color: #1a1300; }

/* Outline-knop in landingsstijl (zoals .roll-btn op index.html) */
.btn.btn-roll {
  color: #bbb;
  background-color: transparent;
  border: 1px solid #bbb;
  border-radius: .5rem;
  font-weight: 600;
  transition: color .15s ease, border-color .15s ease;
}
.btn.btn-roll:hover,
.btn.btn-roll:focus {
  color: #ddd;
  background-color: transparent;
  border-color: #ddd;
}

/* Formuliervelden in dark */
.form-control, .form-select {
  background-color: var(--mabaga-surface-2);
  border-color: var(--mabaga-border);
  color: var(--mabaga-text);
}
.form-control:focus, .form-select:focus {
  background-color: var(--mabaga-surface-2);
  color: var(--mabaga-text);
  border-color: var(--mabaga-accent);
  box-shadow: 0 0 0 .2rem rgba(224,178,74,.2);
}
.form-control::placeholder { color: #6f6f6f; }

/* Accent-tekst */
.text-accent { color: var(--mabaga-accent) !important; }
.text-muted-2 { color: var(--mabaga-muted) !important; }

/* Animatie */
.fade-in { animation: mabaga-fade .35s ease; }
@keyframes mabaga-fade { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }

footer.mabaga-footer { color: var(--mabaga-muted); font-size: .8rem; }