/* =========================
   LOREKEEPER – CUSTOM THEME
   Dark Fantasy
   ========================= */

/* ---------- Basis ---------- */
body {
  background-color: #090933;
  color: #D3D3FF;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

/* ---------- Links ---------- */
a {
  color: #9D9DCC;
  transition: color 0.2s ease;
}

a:hover {
  color: #575799;
  text-decoration: none;
}

/* ---------- Kopjes ---------- */
h1, h2, h3, h4, h5 {
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #9D9DCC;
}

h1 {
  font-size: 2.2rem;
  margin-bottom: 1rem;
}

h2 {
  font-size: 1.7rem;
  margin-top: 2rem;
}

h3 {
  font-size: 1.3rem;
}

/* ---------- Navigatie ---------- */
.navbar,
.navbar-default {
  background-color: #090933;
  border-bottom: 1px solid #575799;
}

.navbar a {
  color: #D3D3FF !important;
}

.navbar a:hover {
  color: #9D9DCC !important;
}

/* ---------- Cards / Panels ---------- */
.card,
.panel,
.content-panel {
  background-color: rgba(13, 13, 60, 0.85);
  border: 1px solid #575799;
  border-radius: 14px;
  box-shadow: 0 0 25px rgba(87, 87, 153, 0.15);
}

/* ---------- Knoppen ---------- */
.btn,
button,
input[type="submit"] {
  background-color: #575799;
  color: #D3D3FF;
  border: none;
  border-radius: 999px;
  padding: 0.6em 1.4em;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  transition: background-color 0.2s ease, transform 0.15s ease;
}

.btn:hover,
button:hover,
input[type="submit"]:hover {
  background-color: #9D9DCC;
  transform: translateY(-1px);
}

/* ---------- Formulieren ---------- */
input,
textarea,
select {
  background-color: #0f0f4a;
  color: #D3D3FF;
  border: 1px solid #575799;
  border-radius: 10px;
}

input:focus,
textarea:focus,
select:focus {
  outline: none;
  border-color: #9D9DCC;
  box-shadow: 0 0 0 2px rgba(157, 157, 204, 0.25);
}

/* ---------- Tabellen ---------- */
table {
  background-color: rgba(13, 13, 60, 0.85);
  border-radius: 12px;
  overflow: hidden;
}

th {
  background-color: #575799;
  color: #D3D3FF;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

td {
  border-top: 1px solid #575799;
}

/* ---------- Footer ---------- */
footer {
  border-top: 1px solid #575799;
  color: #9D9DCC;
  padding-top: 1rem;
}

/* ========== BASIS PAGINA ========== */

body {
    background: #120818 !important; /* zeer donker plum */
    color: #ffffff !important;
}

/* De witte wrapper uitschakelen */
#site-wrapper,
#app,
.main-content,
.container {
    background: transparent !important;
}


/* ========== CARDS / BLOKKEN / PANELEN ========== */

.card,
.panel,
.content,
.table,
.dropdown-menu,
.modal-content {
    background-color: #241033 !important; /* diep plum */
    color: #ffffff !important;
    border: 1px solid #3a1d55 !important;
}


/* ========== NAVIGATIEBALK ========== */

.navbar,
.navbar-default {
    background-color: #1a0c26 !important;
    border-bottom: 1px solid #3a1d55 !important;
}

.navbar a {
    color: #e9d8ff !important;
}


/* ========== LINKS ========== */

a {
    color: #d9c2ff !important;
}

a:hover {
    color: #ffffff !important;
}


/* ========== TABELLEN ========== */

th {
    background-color: #2d1542 !important;
    color: #ffffff !important;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

td {
    border-top: 1px solid #3a1d55 !important;
    color: #ffffff !important;
}


/* ========== FORMULIEREN (anders blijven die wit) ========== */

input,
select,
textarea {
    background-color: #1a0c26 !important;
    color: #ffffff !important;
    border: 1px solid #3a1d55 !important;
}

input::placeholder,
textarea::placeholder {
    color: #bfa8e6 !important;
}


/* ========== BUTTONS ========== */

.btn-primary {
    background-color: #4b2a73 !important;
    border-color: #6a3ea1 !important;
    color: #ffffff !important;
}

.btn-primary:hover {
    background-color: #6a3ea1 !important;
    border-color: #8b5fcc !important;
}


/* ========== FOOTER ========== */

footer {
    border-top: 1px solid #3a1d55 !important;
    color: #cbb6ff !important;
}

/* ========= BASIS PAGINA ========= */

body {
    background: #360816 !important;
    color: #ffffff !important;
}

/* Witte wrapper uitschakelen */
#site-wrapper,
#app,
.main-content,
.container {
    background: transparent !important;
}


/* ========= BLOKKEN / CARDS / PANELS ========= */

.card,
.panel,
.content,
.table,
.dropdown-menu,
.modal-content {
    background-color: #4b1c2a !important;
    color: #ffffff !important;
    border: 1px solid #5e2634 !important;
}


/* ========= NAVBAR ========= */

.navbar,
.navbar-default {
    background-color: #360816 !important;
    border-bottom: 1px solid #5e2634 !important;
}

.navbar a {
    color: #ffffff !important;
}


/* ========= LINKS ========= */

a {
    color: #a35c80 !important;
}

a:hover {
    color: #ffffff !important;
}


/* ========= TABELLEN ========= */

th {
    background-color: #5e2634 !important;
    color: #ffffff !important;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

td {
    background-color: #4b1c2a !important;
    border-top: 1px solid #7a384c !important;
    color: #ffffff !important;
}


/* ========= FORMULIEREN ========= */

input,
select,
textarea {
    background-color: #360816 !important;
    color: #ffffff !important;
    border: 1px solid #7a384c !important;
}

input::placeholder,
textarea::placeholder {
    color: #a35c80 !important;
}


/* ========= BUTTONS ========= */

.btn-primary {
    background-color: #7a384c !important;
    border-color: #a35c80 !important;
    color: #ffffff !important;
}

.btn-primary:hover {
    background-color: #a35c80 !important;
    border-color: #ffffff !important;
}


/* ========= FOOTER ========= */

footer {
    border-top: 1px solid #5e2634 !important;
    color: #a35c80 !important;
}

h1, h2, h3, h4, h5, h6,
.card-header,
.panel-heading,
.page-header,
.section-header {
    color: #ffffff !important;
}
.list-group-item,
.list-group,
.list-group-item-action {
    background-color: #4b1c2a !important;
    color: #ffffff !important;
    border-color: #5e2634 !important;
}
.card-body,
.panel-body {
    background-color: #4b1c2a !important;
    color: #ffffff !important;
}
.list-group-item a,
.list-group-item span,
.list-group-item strong {
    color: #ffffff !important;
}
.list-group-item:hover {
    background-color: #5e2634 !important;
}
/* De witte menu-blokken links */

.card .list-group,
.card .list-group-item {
    background-color: #5e2634 !important;  /* lichter plum vlak */
    color: #ffffff !important;
    border-color: #7a384c !important;
}

/* Tekst in die blokken */
.card .list-group-item a {
    color: #ffffff !important;
}

/* Hover effect zodat het levend blijft */
.card .list-group-item:hover {
    background-color: #7a384c !important;
}
.card-header {
    background-color: #4b1c2a !important;
    color: #ffffff !important;
    border-bottom: 1px solid #7a384c !important;
}
/* ALLE list-group items overal */
.list-group-item {
    background-color: #5e2634 !important;
    color: #ffffff !important;
    border: 1px solid #7a384c !important;
}

/* Zorg dat links daarin ook wit zijn */
.list-group-item a,
.list-group-item span {
    color: #ffffff !important;
}

/* Hover */
.list-group-item:hover {
    background-color: #7a384c !important;
}
.bg-light {
    background-color: #ffffff;
}
.bg-light {
    background-color: #5e2634 !important;
}
.card.bg-light {
    background-color: #5e2634 !important;
}