/* === Config === */

:root {

  /* Colors */
  --color-accent:              #e8a33d;
  --color-accent-dark:         #b07e2e;
  --color-accent-muted:        #c4893a;
  --color-info:                #2e7cb8;
  --color-success:             #3a7d44;
  --color-danger:              #c0392b;
  --color-danger-dark:         #922b21;

  /* Backgrounds */
  --bg-darkest:                #163039;
  --bg-dark:                   #1f3a40;
  --bg-mid:                    #284d56;
  --bg-border:                 #5c7a80;

  /* Text */
  --text-light:                #f4efe6;
  --text-muted:                #c8bfb0;
  --text-on-accent:            #1f3a40;

  /* Typography */
  --font-display:              'Playfair Display', serif;
  --font-body:                 'Lora', serif;

  /* Banners */
  --banner-height:             280px;
  --banner-report-height:      120px;
  --banner-brightness:         0.6;
  --banner-report-brightness:  0.4;
  --banner-blur:               4px;

  /* Bootstrap */
  --bs-primary:                var(--color-accent);
  --bs-primary-rgb:            232, 163, 61;
  --bs-info:                   var(--color-info);
  --bs-info-rgb:               46, 124, 184;
  --bs-success:                var(--color-success);
  --bs-success-rgb:            58, 125, 68;
  --bs-warning:                var(--color-accent);
  --bs-warning-rgb:            232, 163, 61;
  --bs-danger:                 var(--color-danger);
  --bs-danger-rgb:             192, 57, 43;
  --bs-body-bg:                var(--bg-dark);
  --bs-body-color:             var(--text-light);
  --bs-dark:                   var(--bg-darkest);
  --bs-light:                  var(--text-light);

  --leather-base:      #433638;
  --leather-trim:      #be815b;
  --leather-trim-dark: #95614b;
  --leather-text:      #f1e8e2;
}


/* === Fonts === */

@font-face {
  font-family: 'Playfair Display';
  src: url('../fonts/playfair-display-v40-latin-regular.woff2') format('woff2');
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: 'Playfair Display';
  src: url('../fonts/playfair-display-v40-latin-regular.woff2') format('woff2');
  font-weight: 700;
  font-display: swap;
}

@font-face {
  font-family: 'Lora';
  src: url('../fonts/lora-v37-latin-regular.woff2') format('woff2');
  font-weight: 400;
  font-display: swap;
}


/* === Base === */

body {
  font-family: var(--font-body);
  background-color: var(--bg-dark);
  color: var(--text-light);
}

h1, h2, h3, h4, h5, h6, .navbar-brand {
  font-family: var(--font-display);
}

h1, h2, h3, .navbar-brand {
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}

a {
  color: var(--color-accent);
}

a:hover {
  color: var(--text-light);
}

.text-muted {
  color: var(--text-muted) !important;
}

.form-label,
.col-form-label,
.form-check-label {
  color: var(--text-light);
}

.form-text {
  color: var(--text-muted) !important;
}

.form-control:-webkit-autofill,
.form-control:-webkit-autofill:hover,
.form-control:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--text-light);
  caret-color: var(--text-light);
  transition: background-color 9999s ease-in-out 0s;
}

.form-control::placeholder,
.form-select::placeholder {
  color: var(--text-muted) !important;
  opacity: 1;
}


/* === Navbar === */

.navbar {
  background: linear-gradient(to bottom, var(--bg-mid), var(--bg-darkest)) !important;
  border-bottom: 3px solid var(--color-accent);
  box-shadow:
    inset 0 1px 0 rgba(244, 239, 230, 0.07),   /* licht op de bovenrand */
    0 3px 8px rgba(0, 0, 0, 0.5);              /* balk werpt schaduw op de inhoud */
}

.navbar-brand {
  color: var(--text-light) !important;
  font-family: var(--font-display);
  font-size: 1.5rem;
  letter-spacing: 1px;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
}

.navbar .nav-link {
  color: var(--text-light) !important;
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.5);
}

.navbar .nav-link:hover {
  color: var(--color-accent) !important;
}

.navbar .nav-cta {
  color: var(--color-accent) !important;
  font-weight: bold;
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.5);
}

.navbar-toggler {
  border-color: var(--color-accent);
}

.navbar .dropdown-menu {
  --bs-dropdown-bg: var(--bg-darkest);
  --bs-dropdown-border-color: var(--bg-border);
  --bs-dropdown-link-color: var(--text-light);
  --bs-dropdown-link-hover-color: var(--color-accent);
  --bs-dropdown-link-hover-bg: var(--bg-mid);
  --bs-dropdown-link-active-color: var(--text-on-accent);
  --bs-dropdown-link-active-bg: var(--color-accent);
  --bs-dropdown-divider-bg: var(--bg-border);

  box-shadow:
    inset 0 1px 0 rgba(244, 239, 230, 0.07),
    0 4px 14px rgba(0, 0, 0, 0.5);
}

.navbar .username {
  color: var(--color-accent);
}

.navbar .avatar-img,
.navbar .avatar-initial {
  width: 32px;
  height: 32px;
  border: 2px solid var(--color-accent);
}

.navbar .avatar-img {
  object-fit: cover;
}

.navbar .avatar-initial {
  background-color: var(--color-accent);
  color: var(--text-on-accent);
  font-weight: bold;
  font-size: 14px;
}

/* === Buttons === */


.btn {
  text-shadow: 0 1px 1px rgba(255, 255, 255, 0.25);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.4),
    inset 0 -1px 0 rgba(0, 0, 0, 0.2),
    0 2px 4px rgba(0, 0, 0, 0.4);
  transition: all 0.05s ease;
}

.btn:active {
  box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.4);
  transform: translateY(1px);
}

.btn-primary {
  background: linear-gradient(to bottom, var(--color-accent), var(--color-accent-dark));
  border: 1px solid var(--color-accent-dark);
  color: var(--text-on-accent);
}

.btn-primary:hover {
  background: linear-gradient(to bottom, var(--color-accent-muted), var(--color-accent-dark));
  color: var(--text-on-accent);
}

.btn-primary:active {
  background: linear-gradient(to bottom, var(--color-accent-dark), var(--color-accent));
  box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.4);
  transform: translateY(1px); 
}

.btn-secondary {
  background: linear-gradient(to bottom, var(--bg-border), var(--bg-mid));
  border: 1px solid var(--bg-dark);
  color: var(--text-light);
  text-shadow: 0 -1px 1px rgba(0, 0, 0, 0.4);
}

.btn-secondary:hover {
  background: linear-gradient(to bottom, var(--bg-mid), var(--bg-dark));
  color: var(--text-light);
}

/* .btn-primary:focus,
.btn-primary:active:focus,
.btn-primary.active:focus {
  box-shadow: 0 0 0 0.25rem rgba(232, 163, 61, 0.4);
} */

.btn-danger {
  background: linear-gradient(to bottom, var(--color-danger), var(--color-danger-dark));
  border: 1px solid var(--color-danger-dark);
  color: var(--text-light);
  text-shadow: 0 -1px 1px rgba(0, 0, 0, 0.4);
}

.btn-danger:hover {
  background: linear-gradient(to bottom, var(--color-danger-dark), var(--color-danger));
  color: var(--text-light);
}


/* === Cards === */

.card {
  background: linear-gradient(to bottom, var(--bg-mid), var(--bg-dark));
  border: 1px solid var(--bg-border);
  border-radius: 8px;
  box-shadow:
    inset 0 1px 0 rgba(244, 239, 230, 0.08),
    0 4px 14px rgba(0, 0, 0, 0.45);
}

.card-header {
  background: linear-gradient(to bottom, var(--bg-dark), var(--bg-darkest));
  border-bottom: 1px solid rgba(0, 0, 0, 0.3);
  box-shadow: inset 0 1px 0 rgba(244, 239, 230, 0.06);
}

.border-danger {
  border-color: var(--color-danger) !important;
}

.badge {
    color:var(--text-on-accent);
}


/* === Pagination === */

.page-link {
  background-color: var(--bg-mid);
  border-color: var(--bg-border);
  color: var(--color-accent);
}

.page-link:hover {
  background-color: var(--bg-dark);
  color: var(--text-light);
}

.page-item.active .page-link {
  background-color: var(--bg-dark);
  border-color: var(--bg-darkest);
  color: var(--text-light);
}

.page-item.disabled .page-link {
    background-color: var(--bg-dark);
    border-color: var(--bg-darkest);
    color: var(--text-light);
}

/* === Banners === */

.banner-card {
  height: var(--banner-height);
  overflow: hidden;
}

.banner-card .card-img {
  height: 100%;
  object-fit: cover;
  filter: brightness(var(--banner-brightness)) blur(var(--banner-blur));
}

.banner-card-report {
  height: var(--banner-report-height);
  overflow: hidden;
}

.banner-card-report .card-img-report {
  height: 100%;
  object-fit: cover;
  filter: brightness(var(--banner-report-brightness)) blur(var(--banner-blur));
}

.card-img-overlay-report {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  color: var(--text-light);
}

.banner-card-profile {
  height: var(--banner-height);
  overflow: hidden;
}

.banner-card-profile .card-img-profile {
  height: 100%;
  object-fit: cover;
}

.form-control, .form-select {
  background-color: var(--bg-darkest);
  border: 1px solid #0e2026;
  color: var(--text-light);
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.5);
}

.form-control:focus {
  background-color: var(--bg-darkest);
  box-shadow:
    inset 0 2px 4px rgba(0, 0, 0, 0.5),
    0 0 0 0.2rem rgba(232, 163, 61, 0.35);   /* gloed in jouw accent */
}

body {
  background-color: var(--bg-dark);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='80'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='80' height='80' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E");
}