:root {
  --primary: #003A67;
  --secondary: #0074B2;
  --success: #28A745; /* WCAG AA compliant green */
  --danger: #dc3545;
  --warning: #FD7E14; /* WCAG AA compliant orange */
  --info: #17A2B8; /* WCAG AA compliant blue */
  --light: #f7f0de;
  --dark: #004D43;
  --white: #FFF;
  --purple: #6F42C1; /* WCAG AA compliant purple */
  --gray: #495057; /* WCAG AA compliant gray (4.5:1 contrast) */
}

/* Overschrijf Bootstrap achtergrondkleuren met de kleuren uit :root */
.bg-primary {
  background-color: var(--primary) !important;
}

.bg-secondary {
  background-color: var(--secondary) !important;
}

.bg-success {
  background-color: var(--success) !important;
}

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

.bg-warning {
  background-color: var(--warning) !important;
}

.bg-info {
  background-color: var(--info) !important;
}

.bg-light {
  background-color: var(--light) !important;
}

.bg-dark {
  background-color: var(--dark) !important;
}

.bg-white {
  background-color: var(--white) !important;
}

/* Text color classes using custom properties */
.text-primary {
  color: var(--primary) !important;
}

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

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

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

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

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

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

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

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

/* Overschrijf tekstkleur voor btn-secondary */
.btn-secondary {
  color: var(--white) !important;
}

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

.btn-danger:hover,
.btn-danger:focus {
  background-color: var(--danger) !important;
  color: var(--white) !important;
}

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

.border-danger {
  border-color: #D9DADA !important;
}

.border-warning {
  border-color: #F9B000 !important;
}

.border-success {
  border-color: #95BB1E !important;
}

.border-info {
  border-color: #7FCFF5 !important;
}

.btn-secondary:hover,
.btn-secondary:focus,
.btn-secondary:active {
  color: var(--white) !important;
}

@font-face {
  font-family: 'Roboto';
  src: url('fonts/Roboto-Bold.ttf') format('truetype');
  font-weight: bold;
  font-style: normal;
}

@font-face {
  font-family: 'Roboto';
  src: url('fonts/Roboto-Regular.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

.body {
  font-family: 'Roboto', sans-serif;
}

h1,
h2,
h3,
h4,
h5 {
  font-family: 'Roboto', sans-serif;
}

.bg-primary {
  background-color: var(--primary) !important;
}

/* Overschrijf Bootstrap btn-info kleur */
.btn-info {
  background-color: #0074B2 !important;
  border-color: #0074B2 !important;
  color: white !important;
}

.btn-info:hover {
  background-color: #0055A2 !important;
  border-color: #0055A2 !important;
  color: white !important;
}

.btn-info:focus,
.btn-info:active {
  background-color: #0074B2 !important;
  border-color: #0074B2 !important;
  color: white !important;
  box-shadow: 0 0 0 0.25rem rgba(91, 192, 222, 0.5) !important;
}


.btn-primary {
  --bs-btn-color: var(--white);
  --bs-btn-bg: var(--primary);
  --bs-btn-border-color: var(--primary);
  --bs-btn-hover-color: var(--white);
  --bs-btn-hover-bg: var(--dark);
  --bs-btn-hover-border-color: var(--dark);
  --bs-btn-focus-shadow-rgb: 130, 138, 145;
  --bs-btn-active-color: var(--white);
  --bs-btn-active-bg: var(--secondary);
  --bs-btn-active-border-color: var(--secondary);
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: #fff;
  --bs-btn-disabled-bg: #6c757d;
  --bs-btn-disabled-border-color: #6c757d;
}

.btn-secondary {
  --bs-btn-color: var(--dark);
  --bs-btn-bg: var(--secondary);
  --bs-btn-border-color: var(--secondary);
  --bs-btn-hover-color: var(--white);
  --bs-btn-hover-bg: var(--primary);
  --bs-btn-hover-border-color: var(--primary);
  --bs-btn-focus-shadow-rgb: 130, 138, 145;
  --bs-btn-active-color: var(--white);
  --bs-btn-active-bg: var(--primary);
  --bs-btn-active-border-color: var(--primary);
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: #fff;
  --bs-btn-disabled-bg: #6c757d;
  --bs-btn-disabled-border-color: #6c757d;
}

.btn-danger {
  --bs-btn-color: var(--white);
  --bs-btn-bg: var(--danger);
  --bs-btn-border-color: var(--danger);
  --bs-btn-hover-color: var(--white);
  --bs-btn-hover-bg: var(--dark);
}

.form-check-input:checked {
  background-color: #003A67;
  border-color: #003A67;
}

.clickable-row {
  cursor: pointer;
}

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

.text-black {
  color: black;
}

.text-dark-green {
  color: #12623d;
}

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

/* Focus indicators for accessibility */
.clickable-row:focus,
.clickable-row:focus-visible {
  outline: 3px solid var(--primary);
  outline-offset: 2px;
}

th[scope="col"]:focus,
th[scope="col"]:focus-visible {
  outline: 3px solid var(--primary);
  outline-offset: 2px;
}

/* Enhanced focus indicators for buttons */
.btn:focus,
.btn:focus-visible {
  box-shadow: 0 0 0 3px rgba(0, 58, 103, 0.3) !important;
  outline: none;
}

/* Focus indicators for form elements */
.form-control:focus,
.form-select:focus,
.form-check-input:focus {
  border-color: var(--primary) !important;
  box-shadow: 0 0 0 3px rgba(0, 58, 103, 0.1) !important;
  outline: none;
}

/* Skip links for screen readers */
.skip-link {
  position: absolute;
  top: -40px;
  left: 6px;
  background: var(--primary);
  color: var(--white);
  padding: 8px;
  text-decoration: none;
  border-radius: 4px;
  z-index: 9999;
  font-weight: 500;
}

.skip-link:focus {
  top: 6px;
}

/* Collapse toggle buttons styling */
.btn-link.text-start h4 {
  color: inherit !important;
  text-decoration: none !important;
}

.btn-link:focus,
.btn-link:hover {
  text-decoration: none !important;
}