/* Neutrale grijs/antraciet accentkleur i.p.v. het standaard Bootstrap-/Syncfusion-blauw (#0d6efd).
   Bootstrap's .btn-primary en Syncfusion's thema-CSS hardcoderen die blauwe tint zelf
   (geen afgeleide van --bs-primary), dus die klassen worden hier expliciet overschreven. */

:root {
  --bs-primary: #495057;
  --bs-primary-rgb: 73, 80, 87;
  --bs-link-color: #495057;
  --bs-link-color-rgb: 73, 80, 87;
  --bs-link-hover-color: #343a40;
  --bs-link-hover-color-rgb: 52, 58, 64;
  --bs-focus-ring-color: rgba(73, 80, 87, 0.25);
}

[data-bs-theme="dark"] {
  --bs-primary: #adb5bd;
  --bs-primary-rgb: 173, 181, 189;
  --bs-link-color: #ced4da;
  --bs-link-color-rgb: 206, 212, 218;
  --bs-link-hover-color: #e9ecef;
  --bs-link-hover-color-rgb: 233, 236, 239;
  --bs-focus-ring-color: rgba(173, 181, 189, 0.25);
}

.btn-primary {
  --bs-btn-color: #fff;
  --bs-btn-bg: #495057;
  --bs-btn-border-color: #495057;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #343a40;
  --bs-btn-hover-border-color: #2b3035;
  --bs-btn-focus-shadow-rgb: 73, 80, 87;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #2b3035;
  --bs-btn-active-border-color: #23272b;
  --bs-btn-disabled-bg: #495057;
  --bs-btn-disabled-border-color: #495057;
}

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

/* .form-control:focus / .form-select:focus hardcode #86b7fe + rgba(13,110,253,.25)
   directly rather than deriving from --bs-focus-ring-color, so override explicitly. */
.form-control:focus,
.form-select:focus {
  border-color: #adb5bd;
  box-shadow: 0 0 0 0.25rem rgba(73, 80, 87, 0.25);
}

/* Syncfusion (bootstrap5 theme): the vendor CSS hardcodes #0d6efd on selectors with more
   :not() qualifiers than we want to replicate/maintain, so !important is used deliberately
   here to win regardless of which variant (flat/outline/disabled-state) class combo matches. */
.e-btn.e-primary,
.e-css.e-btn.e-primary {
  background: #495057 !important;
  border-color: #495057 !important;
  color: #fff !important;
}

.e-btn.e-primary:hover,
.e-css.e-btn.e-primary:hover {
  background: #343a40 !important;
  border-color: #2b3035 !important;
  color: #fff !important;
}

.e-checkbox-wrapper .e-frame.e-check,
.e-css.e-checkbox-wrapper .e-frame.e-check {
  background-color: #495057 !important;
  border-color: #495057 !important;
}

.e-pager .e-currentitem,
.e-pager .e-currentitem:hover {
  background-color: #495057 !important;
  border-color: #495057 !important;
  color: #fff !important;
}

.e-grid .e-icon-filter.e-filtered,
.e-grid-menu .e-icon-filter.e-filtered {
  color: #495057 !important;
}

.e-input-group.e-control-wrapper:not(.e-error):not(.e-warning):not(.e-success).e-input-focus::before,
.e-input-group.e-control-wrapper:not(.e-error):not(.e-warning):not(.e-success).e-input-focus::after {
  background: #495057 !important;
}

.e-grid .e-rowcell {
    padding: 0px 8px !important;
}

.e-grid .e-altrow .e-rowcell {
    background-color: #E8EEFA;
}