/* /css/custom_admin.css */

@font-face {
    font-family: "Bolder-Regular";
    src: url('/fonts/Bolder/Bolder-Regular.ttf') format('truetype'), url('/fonts/Bolder/Bolder-Regular.otf') format('otf');
    font-style: normal;
    font-weight: normal;
    font-display: swap;
}

@font-face {
    font-family: "Bolder-Bold";
    src: url('/fonts/Bolder/Bolder-Bold.ttf') format('truetype'), url('/fonts/Bolder/Bolder-Bold.otf') format('otf');
    font-style: normal;
    font-weight: normal;
    font-display: swap;
}

:root {
	font-size: 93.75%;
    --bs-primary: #00811f;
    --bs-primary-rgb: 0, 129, 31;
    --bs-secondary: #00811f;
    --bs-secondary-rgb: 0, 129, 31;
    --bs-light: #eff4f6;
    --bs-light-rgb: 239, 244, 246;
    --tpl-accent: #c936575;
    --body-bg: #ffffff;
    --tpl-header-bg: #ffffff;
    --tpl-header-fg: #000;
    --tpl-footer-bg: #ffffff;
    --tpl-footer-fg: #000;
    --tpl-font-body: "Bolder-Regular", Helvetica, Arial, sans-serif;
    --tpl-font-headings: "Bolder-Bold", Helvetica, Arial, sans-serif;
    --bs-body-font-family: var(--tpl-font-body);
    --bs-font-sans-serif: var(--tpl-font-body);
    --bs-link-color: var(--bs-secondary);
    --bs-link-hover-color: #000;
}

body {
    font-family: var(--tpl-font-body);
    background: var(--body-bg);
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--tpl-font-headings);
}

h1 {
    font-size: 1.6rem;
    margin-bottom: 1.6rem;
}

h2 {
    font-size: 1.3rem;
    margin-top: 2.6rem;
}

h3 {
    font-size: 1.1rem;
    margin-top: 2.2rem;
}

.tpl-header.navbar {
    min-height: 64px;
    padding: 0;
    background-color: var(--tpl-header-bg) !important;
    color: var(--tpl-header-fg) !important;
}

.tpl-header .navbar-brand, .tpl-header .nav-link, .tpl-header .navbar-text {
    color: var(--tpl-header-fg) !important;
}

.tpl-header .nav-link:hover {
    opacity: .85;
}

.tpl-header.navbar-light .navbar-toggler {
    border-color: rgba(0, 0, 0, .15);
}

.tpl-header.navbar-dark .navbar-toggler {
    border-color: rgba(255, 255, 255, .25);
}

.tpl-header .navbar-brand {
    padding: 0;
    margin: 0;
    line-height: 1;
    height: 64px;
    display: flex;
    align-items: flex-end;
}

.tpl-header .navbar-brand img {
    display: block;
    height: 44px !important;
    width: auto;
    margin: 0;
}

.tpl-footer {
    background-color: var(--tpl-footer-bg) !important;
    color: var(--tpl-footer-fg) !important;
}

footer {
    color: var(--tpl-footer-fg) !important;
}

.tpl-footer a, footer a {
    color: var(--tpl-footer-fg) !important;
    text-decoration: underline;
}

.tpl-footer a:hover, footer a:hover {
    text-decoration: none;
}

.breadcrumb {
    --bs-breadcrumb-divider: "/";
    background-color: var(--breadcrumb-bg, var(--body-bg));
    margin: 0;
    padding: .75rem 0;
    border-radius: 0;
}

.breadcrumb .breadcrumb-item + .breadcrumb-item::before {
    color: var(--bs-primary);
}

a {
    color: var(--bs-link-color) !important;
    text-decoration: underline;
}

a:hover, a:focus {
    color: var(--bs-link-hover-color) !important;
    text-decoration: none;
}

.nav-link {
    color: var(--bs-link-color) !important;
}

.nav-link:hover, .nav-link:focus {
    color: var(--bs-link-hover-color) !important;
}

.btn-primary {
    --bs-btn-bg: var(--bs-primary);
    --bs-btn-border-color: var(--bs-primary);
    --bs-btn-color: #fff;
    --bs-btn-hover-bg: #fff;
    --bs-btn-hover-border-color: var(--bs-primary);
    --bs-btn-hover-color: var(--bs-primary);
    --bs-btn-active-bg: var(--bs-primary);
    --bs-btn-active-border-color: var(--bs-secondary);
    --bs-btn-active-color: #fff;
    --bs-btn-focus-shadow-rgb: var(--bs-primary-rgb);
}

.btn-secondary {
    --bs-btn-bg: #fff;
    --bs-btn-border-color: var(--bs-secondary);
    --bs-btn-color: var(--bs-secondary);
    --bs-btn-hover-bg: var(--bs-primary);
    --bs-btn-hover-border-color: var(--bs-primary);
    --bs-btn-hover-color: #fff;
    --bs-btn-active-bg: var(--bs-secondary);
    --bs-btn-active-border-color: var(--bs-secondary);
    --bs-btn-active-color: #fff;
}

.btn-sm {
    --bs-btn-line-height: 1.25;
}

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    border-radius: 0px;
}

.btn-sm {
    --bs-btn-line-height: 1.25;
}

.btn-primary:disabled, .btn-primary.disabled {
    --bs-btn-disabled-bg: var(--bs-primary);
    --bs-btn-disabled-border-color: var(--bs-primary);
    --bs-btn-disabled-color: #fff;
    opacity: .65;
}

.btn {
    --bs-btn-font-family: var(--tpl-font-body);
    --bs-btn-padding-y: 0.5rem;
}

.btn-sm {
    --bs-btn-padding-y: 0.375rem;
}

.form-check-input[type="radio"], .form-check-input[type="checkbox"] {
    accent-color: var(--tpl-accent);
}

.form-check-input[type="radio"]:focus, .form-check-input[type="checkbox"]:focus {
    box-shadow: 0 0 0 .25rem rgba(var(--bs-primary-rgb), .25);
}

.form-check-input[type="radio"]:checked, .form-check-input[type="checkbox"]:checked {
    background-color: var(--tpl-accent);
    border-color: var(--tpl-accent);
}


a.btn-primary,
a.btn-primary:visited {
    background-color: var(--bs-primary) !important;
    border-color: var(--bs-primary) !important;
    color: #fff !important;
    text-decoration: none !important;
}

/* Link styling voor buttons */
a.btn-primary {
    --bs-btn-bg: var(--bs-primary);
    --bs-btn-border-color: var(--bs-primary);
    --bs-btn-color: #fff;
    --bs-btn-hover-bg: #fff;
    --bs-btn-hover-border-color: var(--bs-primary);
    --bs-btn-hover-color: var(--bs-primary);
    --bs-btn-active-bg: var(--bs-primary);
    --bs-btn-active-border-color: var(--bs-primary);
    --bs-btn-active-color: #fff;
    text-decoration: none !important;
}

a.btn-primary:hover,
a.btn-primary:focus {
    background-color: #fff !important;
    border-color: var(--bs-primary) !important;
    color: var(--bs-primary) !important;
    text-decoration: none !important;
}

a.btn-primary:active {
    background-color: var(--bs-primary) !important;
    border-color: var(--bs-primary) !important;
    color: #fff !important;
}



::placeholder {
  color: #adb5bd !important;
  opacity: 1;
}

::-webkit-input-placeholder {
  color: #adb5bd !important;
}

::-moz-placeholder {
  color: #adb5bd !important;
}

:-ms-input-placeholder {
  color: #adb5bd !important;
}



.password-requirements {
    background: var(--bs-light);
    padding: 20px;
    border-left: 4px solid var(--bs-secondary);
    margin-top: 20px;
}

.password-requirements p {
    margin: 5px 0;
    font-size: 0.9rem;
}
#password-strength-meter {
    width: 100%;
    height: 10px;
    border-radius: 0;
    background: var(--bs-light);
}


/* Kleuren voor de password-strength-meter - afgestemd op de custom admin kleuren */
#password-strength-meter::-webkit-meter-bar {
    background: var(--bs-light) !important;
    border-radius: 0;
}

/* Score 4 - Sterk (groen - de secondary kleur) */
#password-strength-meter::-webkit-meter-optimum-value {
    background: #00811f;
    border-radius: 0;
}

/* Score 2-3 - Matig (oranje/warning) */
#password-strength-meter::-webkit-meter-suboptimum-value {
    background: #ffc107;
    border-radius: 0;
}

/* Score 0-1 - Zwak (rood - de primary kleur) */
#password-strength-meter::-webkit-meter-even-less-good-value {
    background: #c93675;
    border-radius: 0;
}

/* Firefox ondersteuning */
#password-strength-meter::-moz-meter-bar {
    border-radius: 0;
}

#password-strength-meter:-moz-meter-optimum::-moz-meter-bar {
    background: #00811f;
}

#password-strength-meter:-moz-meter-sub-optimum::-moz-meter-bar {
    background: #ffc107;
}

#password-strength-meter:-moz-meter-sub-sub-optimum::-moz-meter-bar {
    background: #c93675;
}

#password-strength-text {
    margin-top: 10px;
    font-weight: bold;
}
.feedback {
    display: block;
    font-weight: normal;
    color: #666;
    margin-top: 5px;
}
';



.fade-transition {
  transition: opacity 0.3s ease;
}

/* Verwijder gele autocomplete achtergrond */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
    -webkit-box-shadow: 0 0 0 30px white inset !important;
    box-shadow: 0 0 0 30px white inset !important;
    -webkit-text-fill-color: inherit !important;
}

/* Voor inputs met een andere achtergrond */
input:-webkit-autofill {
    -webkit-transition: background-color 5000s ease-in-out 0s;
    transition: background-color 5000s ease-in-out 0s;
}