/**
 * Bootstrap 4 WCAG 2.1 AA Contrast Fixes
 * 
 * Dit bestand lost alle bekende kleurcontrast problemen op in Bootstrap 4
 * om te voldoen aan WCAG 2.1 Level AA (minimum 4.5:1 voor normale tekst, 3:1 voor grote tekst)
 * 
 * Gebruik: Voeg dit CSS bestand toe NA je Bootstrap 4 CSS
 */

/* ============================================
   BUTTONS - Contrast fixes
   ============================================ */

/* Warning button - Bootstrap default faalt (3.4:1) */

.btn-primary {
    background-color: #006fe6 !important;
    border-color: #0063cf !important;
    color: #ffffff !important;
}

.btn-primary:hover,
.btn-primary:focus {
    background-color: #005cc2 !important;
    border-color: #0052ad !important;
    color: #ffffff !important;
}

.btn-primary:disabled,
.btn-primary.disabled {
    background-color: #006fe6 !important;
    border-color: #0063cf !important;
    opacity: 0.65;
}

.btn-secondary {
    background-color: #495057 !important;
    border-color: #343a40 !important;
    color: #ffffff !important;
}

.btn-secondary:hover,
.btn-secondary:focus {
    background-color: #343a40 !important;
    border-color: #23272b !important;
}

.btn-secondary:disabled,
.btn-secondary.disabled {
    background-color: #495057 !important;
    border-color: #343a40 !important;
}



.btn-success {
    background-color: #146c43 !important;
    border-color: #0f5132 !important;
    color: #ffffff !important;
}

.btn-success:hover,
.btn-success:focus {
    background-color: #0f5132 !important;
    border-color: #0b3d26 !important;
}

.btn-success:disabled,
.btn-success.disabled {
    background-color: #146c43 !important;
    border-color: #0f5132 !important;
}


.btn-danger {
    background-color: #b02a37 !important;
    border-color: #842029 !important;
    color: #ffffff !important;
}

.btn-danger:hover,
.btn-danger:focus {
    background-color: #842029 !important;
    border-color: #6a1a21 !important;
}

.btn-danger:disabled,
.btn-danger.disabled {
    background-color: #b02a37 !important;
    border-color: #842029 !important;
}


.btn-info {
    background-color: #117a8b !important;
    border-color: #0f6674 !important;
    color: #ffffff !important;
}

.btn-info:hover,
.btn-info:focus {
    background-color: #0f6674 !important;
    border-color: #0d5662 !important;
    color: #ffffff !important;
}

.btn-info:disabled,
.btn-info.disabled {
    background-color: #117a8b !important;
    border-color: #0f6674 !important;
    color: #ffffff !important;
    opacity: 0.65;
}

.btn-light {
    background-color: #f8f9fa !important;
    border-color: #6c757d !important;
    color: #000000 !important;
}

.btn-light:hover,
.btn-light:focus {
    background-color: #e9ecef !important;
    border-color: #5a6268 !important;
}

.btn-light:disabled,
.btn-light.disabled {
    background-color: #f8f9fa !important;
    border-color: #6c757d !important;
}
.btn-dark {
    background-color: #212529 !important;
    border-color: #000000 !important;
    color: #ffffff !important;
}

.btn-dark:hover,
.btn-dark:focus {
    background-color: #000000 !important;
    border-color: #000000 !important;
}

.btn-dark:disabled,
.btn-dark.disabled {
    background-color: #212529 !important;
    border-color: #000000 !important;
}

.btn-default {
    background-color: #e9ecef !important;
    border-color: #6c757d !important;
    color: #000000 !important;
}

.btn-default:hover,
.btn-default:focus {
    background-color: #dde1e4 !important;
    border-color: #5a6268 !important;
    color: #000000 !important;
}

.btn-default:disabled,
.btn-default.disabled {
    background-color: #e9ecef !important;
    border-color: #6c757d !important;
    color: #000000 !important;
    opacity: 0.65;
}



.btn-warning {
    background-color: #e0a800 !important;
    border-color: #d39e00 !important;
    color: #000000 !important;
}

.btn-warning:hover,
.btn-warning:focus {
    background-color: #c69500 !important;
    border-color: #b38600 !important;
    color: #000000 !important;
}

.btn-warning:disabled,
.btn-warning.disabled {
    background-color: #e0a800 !important;
    border-color: #d39e00 !important;
    opacity: 0.65;
}

/* Outline warning button */
.btn-outline-warning {
    color: #c69500 !important;
    border-color: #c69500 !important;
}

.btn-outline-warning:hover,
.btn-outline-warning:focus {
    background-color: #c69500 !important;
    border-color: #c69500 !important;
    color: #000000 !important;
}

/* Light button - vaak te weinig contrast */
.btn-light {
    background-color: #e2e6ea !important;
    border-color: #dae0e5 !important;
    color: #1b1e21 !important;
}

.btn-light:hover,
.btn-light:focus {
    background-color: #d3d9df !important;
    border-color: #c8cfd6 !important;
    color: #1b1e21 !important;
}

/* ============================================
   ALERTS - Contrast fixes
   ============================================ */

/* Alert warning */
.alert-warning {
    background-color: #fff3cd;
    border-color: #d39e00;
    color: #533f03 !important; /* Donkerder dan Bootstrap default #856404 */
}

.alert-warning hr {
    border-top-color: #c69500;
}

.alert-warning .alert-link {
    color: #3d2f02 !important;
}

/* Alert info - soms borderline */
.alert-info {
    background-color: #d1ecf1;
    border-color: #bee5eb;
    color: #0c4d5b !important; /* Donkerder dan Bootstrap default #0c5460 */
}

.alert-info hr {
    border-top-color: #abdde5;
}

.alert-info .alert-link {
    color: #083b44 !important;
}

/* Alert light */
.alert-light {
    background-color: #fefefe;
    border-color: #e2e6ea;
    color: #1b1e21 !important;
}

/* ============================================
   TEXT COLORS - Contrast fixes
   ============================================ */

/* Text muted - Bootstrap default is borderline (4.54:1) */
.text-muted {
    color: #5a6268 !important; /* Donkerder dan Bootstrap default #6c757d */
}

/* Text warning */
.text-warning {
    color: #c69500 !important; /* Veel donkerder dan Bootstrap default #ffc107 */
}

/* Text info - soms te licht */
.text-info {
    color: #117a8b !important; /* Donkerder dan Bootstrap default #17a2b8 */
}

/* Text light */
.text-light {
    color: #495057 !important; /* Veel donkerder voor gebruik op witte achtergrond */
}

/* ============================================
   BADGES - Contrast fixes
   ============================================ */

.badge-primary {
    background-color: #006fe6 !important;
    color: #FFF !important;
}

.badge-primary[href]:hover,
.badge-primary[href]:focus {
    background-color: #006fe6 !important;
    color: #FFF !important;
}
.badge-success {
    background-color: #146c43 !important;  /* WCAG-proof groene kleur */
    color: #ffffff !important;
}

.badge-success[href]:hover,
.badge-success[href]:focus {
    background-color: #0f5132 !important;  /* donkerder voor hover/focus */
    color: #ffffff !important;
}


/* Badge warning */
.badge-warning {
    background-color: #e0a800 !important;
    color: #000000 !important;
}

.badge-warning[href]:hover,
.badge-warning[href]:focus {
    background-color: #c69500 !important;
    color: #000000 !important;
}

/* Badge info */
.badge-info {
    background-color: #117a8b !important;
    color: #ffffff !important;
}

/* Badge light */
.badge-light {
    background-color: #e2e6ea !important;
    color: #1b1e21 !important;
}

/* ============================================
   FORM CONTROLS - Placeholder contrast
   ============================================ */

/* Placeholders zijn vaak te licht */
::placeholder {
    color: #495057 !important; /* Donkerder dan Bootstrap default #6c757d met opacity */
    opacity: 1 !important;
}

:-ms-input-placeholder {
    color: #495057 !important;
    opacity: 1 !important;
}

::-ms-input-placeholder {
    color: #495057 !important;
    opacity: 1 !important;
}

/* Form text (help text) */
.form-text,
.text-small,
small.form-text {
    color: #495057 !important;
}

/* Disabled form controls - vaak te licht */
.form-control:disabled,
.form-control[readonly] {
    background-color: #e9ecef;
    opacity: 1;
    color: #495057 !important;
}

/* ============================================
   LINKS - Contrast op gekleurde achtergronden
   ============================================ */

/* Links in warning contexts */
.alert-warning a,
.badge-warning a,
.bg-warning a {
    color: #3d2f02 !important;
    text-decoration: underline;
}

/* Links in info contexts */
.alert-info a,
.badge-info a,
.bg-info a {
    color: #083b44 !important;
    text-decoration: underline;
}

/* ============================================
   BREADCRUMBS - Contrast fixes
   ============================================ */

.breadcrumb-item.active {
    color: #495057 !important;
}

/* ============================================
   PAGINATION - Contrast fixes
   ============================================ */

/*
.page-link {
    color: #0056b3 !important; 
}*/

.page-link:hover,
.page-link:focus {
    color: #003d82 !important;
}
.page-link {
    color:#006fe6!important;
}
.page-item {
    color: #006fe6!important;
}
.page-item .active {
    background-color: #006fe6!important;
}
.page-item.active .page-link {
  color: #fff!important;
  background-color: #006fe6!important;
  border-color: #006fe6!important;
}
.page-item.disabled .page-link {
    color: #5a6268 !important;
    background-color: #fff;
    border-color: #dee2e6;
}

/* ============================================
   CUSTOM: DigiD / Oranje knoppen (voor jouw code)
   ============================================ */

.btn-orange {
    background-color: #cc5200 !important;
    border-color: #cc5200 !important;
    color: #ffffff !important;
    font-weight: 500;
}

.btn-orange:hover,
.btn-orange:focus {
    background-color: #a34100 !important;
    border-color: #a34100 !important;
    color: #ffffff !important;
}

.btn-orange:active,
.btn-orange.active {
    background-color: #8a3700 !important;
    border-color: #8a3700 !important;
    color: #ffffff !important;
}

.btn-orange:disabled,
.btn-orange.disabled {
    background-color: #cc5200 !important;
    border-color: #cc5200 !important;
    opacity: 0.65;
}

/* ============================================
   TABLES - Contrast fixes
   ============================================ */

/* Table warning row */
.table-warning,
.table-warning > th,
.table-warning > td {
    background-color: #fff3cd;
    color: #533f03 !important;
}

.table-hover .table-warning:hover {
    background-color: #ffe8a1;
    color: #533f03 !important;
}

/* Table info row */
.table-info,
.table-info > th,
.table-info > td {
    background-color: #d1ecf1;
    color: #0c4d5b !important;
}

.table-hover .table-info:hover {
    background-color: #abdde5;
    color: #0c4d5b !important;
}

/* ============================================
   NAVS & TABS - Contrast fixes
   ============================================ */

.nav-link.disabled {
    color: #5a6268 !important;
}

/* ============================================
   PROGRESS BARS - Contrast fixes
   ============================================ */

.progress-bar {
    background-color: #0062cc !important; /* Donkerder blauw voor beter contrast met tekst */
}

.bg-warning .progress-bar,
.progress-bar.bg-warning {
    background-color: #e0a800 !important;
    color: #000000 !important;
}

.bg-info .progress-bar,
.progress-bar.bg-info {
    background-color: #117a8b !important;
}

/* ============================================
   TOOLTIPS & POPOVERS - Zorg voor leesbaar contrast
   ============================================ */

.tooltip-inner {
    background-color: #1b1e21 !important; /* Iets donkerder voor beter contrast */
}

.bs-tooltip-top .arrow::before,
.bs-tooltip-auto[x-placement^="top"] .arrow::before {
    border-top-color: #1b1e21 !important;
}

.bs-tooltip-right .arrow::before,
.bs-tooltip-auto[x-placement^="right"] .arrow::before {
    border-right-color: #1b1e21 !important;
}

.bs-tooltip-bottom .arrow::before,
.bs-tooltip-auto[x-placement^="bottom"] .arrow::before {
    border-bottom-color: #1b1e21 !important;
}

.bs-tooltip-left .arrow::before,
.bs-tooltip-auto[x-placement^="left"] .arrow::before {
    border-left-color: #1b1e21 !important;
}

/* ============================================
   ADMINLTE 3 SPECIFIC FIXES
   ============================================ */

/* AdminLTE Info boxes - contrast problemen */
.info-box {
    box-shadow: 0 0 1px rgba(0,0,0,.125), 0 1px 3px rgba(0,0,0,.2);
}

.info-box-icon {
    border-radius: .25rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Info box warning - AdminLTE default heeft slecht contrast */
.info-box .info-box-icon.bg-warning {
    background-color: #e0a800 !important;
    color: #000000 !important;
}

/* Info box info */
.info-box .info-box-icon.bg-info {
    background-color: #117a8b !important;
    color: #ffffff !important;
}

/* Small box (dashboard widgets) - warning */
.small-box.bg-warning {
    background-color: #e0a800 !important;
    color: #000000 !important;
}

.small-box.bg-warning h3,
.small-box.bg-warning p {
    color: #000000 !important;
}

.small-box.bg-warning .icon {
    color: rgba(0,0,0,.15) !important;
}

.small-box.bg-warning .small-box-footer {
    background-color: rgba(0,0,0,.1);
    color: #000000 !important;
}

/* Small box - info */
.small-box.bg-info {
    background-color: #117a8b !important;
}

.small-box.bg-info .icon {
    color: rgba(255,255,255,.15) !important;
}

/* Small box - light (vaak slecht contrast) */
.small-box.bg-light {
    background-color: #e2e6ea !important;
    color: #1b1e21 !important;
}

.small-box.bg-light h3,
.small-box.bg-light p {
    color: #1b1e21 !important;
}

/* AdminLTE Callouts - contrast fixes */
.callout.callout-warning {
    border-left-color: #c69500 !important;
    background-color: #fff3cd !important;
    color: #533f03 !important;
}

.callout.callout-info {
    border-left-color: #0c4d5b !important;
    background-color: #d1ecf1 !important;
    color: #0c4d5b !important;
}

/* AdminLTE Cards - header contrast */
.card-warning .card-header {
    background-color: #e0a800 !important;
    color: #000000 !important;
}

.card-info .card-header {
    background-color: #117a8b !important;
    color: #ffffff !important;
}

.card-light .card-header {
    background-color: #e2e6ea !important;
    color: #1b1e21 !important;
}

/* Card outline variants */
.card-outline.card-warning {
    border-top-color: #c69500 !important;
}

.card-outline.card-info {
    border-top-color: #117a8b !important;
}

/* Direct Chat - warning variant */
.direct-chat-warning .right > .direct-chat-text {
    background-color: #e0a800 !important;
    color: #000000 !important;
}

.direct-chat-warning .direct-chat-timestamp {
    color: #5a6268 !important;
}


/* Control sidebar tabs */
.control-sidebar-dark .nav-link {
    color: #c2c7d0;
}

.control-sidebar-dark .nav-link.active {
    background-color: #1f2d3d;
    color: #fff;
}

/* Timeline - warning items */
.timeline > div > .timeline-item > .timeline-header.bg-warning {
    background-color: #e0a800 !important;
    color: #000000 !important;
}

/* Products list - text contrast */
.products-list .product-description {
    color: #495057 !important;
}

/* Users list - date/time text */
.users-list > li .users-list-date {
    color: #5a6268 !important;
}

/* Navbar - warning variant */
.navbar-warning {
    background-color: #e0a800 !important;
    color: #000000 !important;
}

.navbar-warning .navbar-nav .nav-link {
    color: #000000 !important;
}

.navbar-warning .navbar-nav .nav-link:hover,
.navbar-warning .navbar-nav .nav-link:focus {
    color: rgba(0,0,0,.7) !important;
}

/* Navbar - info variant */
.navbar-info {
    background-color: #117a8b !important;
}

/* Login/Register pages - form text */
.login-box-msg,
.register-box-msg {
    color: #495057 !important;
    margin: 0;
    padding: 0 20px 20px;
    text-align: center;
}

/* Login page links - zorg voor contrast op gekleurde achtergronden */
.login-card-body .input-group .input-group-text {
    background-color: transparent;
    border-left: 0;
    color: #495057;
}

/* AdminLTE Toasts - contrast fixes */
.toast.bg-warning {
    background-color: #e0a800 !important;
    color: #000000 !important;
}

.toast.bg-warning .toast-header {
    background-color: rgba(0,0,0,.1);
    color: #000000 !important;
}

.toast.bg-info {
    background-color: #117a8b !important;
}

/* DataTables integration - warning row */
table.dataTable tbody tr.warning {
    background-color: #fff3cd !important;
    color: #533f03 !important;
}

/* Pagination (AdminLTE style) */
/*.pagination-sm .page-link {
    color: #0056b3 !important;
}*/

/* Select2 (vaak gebruikt met AdminLTE) - placeholder */
.select2-container--default .select2-selection--single .select2-selection__placeholder {
    color: #495057 !important;
}

.select2-container--default .select2-results__option[aria-disabled=true] {
    color: #5a6268 !important;
}

/* iCheck (AdminLTE's preferred checkbox style) - labels */
.icheck-primary > input:first-child:checked + label::before,
.icheck-primary > input:first-child:checked + input[type=hidden] + label::before {
    background-color: #006fe6;
    border-color: #006fe6;
}

/* Overlay loading - text contrast */
.overlay-wrapper .overlay {
    background-color: rgba(0,0,0,.7);
    color: #fff;
}

/* Elevation (shadow) - zorg dat tekst op elevated elementen leesbaar blijft */
.elevation-1,
.elevation-2,
.elevation-3,
.elevation-4,
.elevation-5 {
    box-shadow: 0 0 1px rgba(0,0,0,.125), 0 1px 3px rgba(0,0,0,.2);
}

/* Dark mode fixes (als je dark mode gebruikt) */
.dark-mode .info-box {
    background-color: #343a40;
    color: #fff;
}

.dark-mode .card {
    background-color: #343a40;
    color: #fff;
}

.dark-mode .form-control {
    background-color: #454d55;
    border-color: #6c757d;
    color: #fff;
}

.dark-mode .form-control::placeholder {
    color: #adb5bd !important;
}

/* AdminLTE Brand Logo - contrast */
.brand-link {
    color: #fff;
}

.brand-link:hover {
    color: #fff;
    text-decoration: none;
}

/* Main Header Navbar - dropdown text */
.navbar-nav .dropdown-menu .dropdown-item {
    color: #212529;
}

.navbar-nav .dropdown-menu .dropdown-item:hover,
.navbar-nav .dropdown-menu .dropdown-item:focus {
    background-color: #f8f9fa;
    color: #16181b;
}

/* Breadcrumb (AdminLTE style) */
.content-header .breadcrumb {
    background-color: transparent;
}

.content-header .breadcrumb .breadcrumb-item {
    color: #495057;
}

.content-header .breadcrumb .breadcrumb-item.active {
    color: #5a6268;
}

/* ============================================
   LOGIN PAGE SPECIFIC (voor jouw login.php)
   ============================================ */

/* Login box achtergrond */
.login-box,
.register-box {
    width: 360px;
}

/* Login card body - betere tekstkleur */
.login-card-body,
.register-card-body {
    background-color: #fff;
    border-top: 0;
    color: #495057;
    padding: 20px;
}

/* Input icons - glyphicons */
.login-card-body .input-group-text {
    background-color: transparent;
    border-color: #ced4da;
    color: #495057 !important;
}

/* Login links - betere contrast */
.login-card-body a {
    color: #0056b3 !important;
}

.login-card-body a:hover,
.login-card-body a:focus {
    color: #003d82 !important;
    text-decoration: underline;
}

/* Login box message styling */
.login-box-msg {
    font-size: 1rem;
    line-height: 1.5;
    margin-bottom: 1rem;
}

/* ============================================
   BACKGROUND COLOR CLASSES (bg-*) - WCAG Fixes
   AdminLTE 3 heeft vele extra kleuren
   ============================================ */


.bg-blue {
    background-color: #006fe6 !important;
    color: #ffffff !important;
}

.bg-blue,
.bg-blue > a {
    color: #ffffff !important;
}

.bg-blue .btn-tool {
    color: rgba(255,255,255,.8);
}

.bg-blue .btn-tool:hover {
    color: #ffffff;
}

/* Orange - AdminLTE's oranje kleur heeft vaak slecht contrast */
.bg-orange {
    background-color: #cc5200 !important;
    color: #ffffff !important;
}

.bg-orange,
.bg-orange > a {
    color: #ffffff !important;
}

.bg-orange .btn-tool {
    color: rgba(255,255,255,.8);
}

.bg-orange .btn-tool:hover {
    color: #ffffff;
}

/* Lightblue - vaak te licht */
.bg-lightblue {
    background-color: #2e8bc0 !important;
    color: #ffffff !important;
}

.bg-lightblue,
.bg-lightblue > a {
    color: #ffffff !important;
}

/* Navy - meestal goed, maar check links */
.bg-navy {
    background-color: #001f3f !important;
    color: #ffffff !important;
}

.bg-navy,
.bg-navy > a {
    color: #ffffff !important;
}

/* Olive - vaak borderline contrast */
.bg-olive {
    background-color: #74952b !important;
    color: #ffffff !important;
}

.bg-olive,
.bg-olive > a {
    color: #ffffff !important;
}

/* Lime - vaak TE licht */
.bg-lime {
    background-color: #7fad39 !important;
    color: #ffffff !important;
}

.bg-lime,
.bg-lime > a {
    color: #ffffff !important;
}

/* Fuchsia - check contrast */
.bg-fuchsia {
    background-color: #b10e7e !important;
    color: #ffffff !important;
}

.bg-fuchsia,
.bg-fuchsia > a {
    color: #ffffff !important;
}

/* Maroon - meestal goed */
.bg-maroon {
    background-color: #8b0000 !important;
    color: #ffffff !important;
}

.bg-maroon,
.bg-maroon > a {
    color: #ffffff !important;
}

/* Teal - vaak borderline */
.bg-teal {
    background-color: #008B8B !important;
    color: #ffffff !important;
}

.bg-teal,
.bg-teal > a {
    color: #ffffff !important;
}

/* Purple - vaak te licht in AdminLTE */
.bg-purple {
    background-color: #6f42c1 !important;
    color: #ffffff !important;
}

.bg-purple,
.bg-purple > a {
    color: #ffffff !important;
}

/* Pink - vaak TE licht */
.bg-pink {
    background-color: #d63384 !important;
    color: #ffffff !important;
}

.bg-pink,
.bg-pink > a {
    color: #ffffff !important;
}

/* Indigo - meestal goed */
.bg-indigo {
    background-color: #4B0082 !important;
    color: #ffffff !important;
}

.bg-indigo,
.bg-indigo > a {
    color: #ffffff !important;
}

/* Yellow - ZEER slecht contrast standaard */
.bg-yellow {
    background-color: #e0a800 !important;
    color: #000000 !important;
}

.bg-yellow,
.bg-yellow > a {
    color: #000000 !important;
}

.bg-yellow .btn-tool {
    color: rgba(0,0,0,.6);
}

.bg-yellow .btn-tool:hover {
    color: #000000;
}

/* Cyan - vaak te licht */
.bg-cyan {
    background-color: #118695 !important;
    color: #ffffff !important;
}

.bg-cyan,
.bg-cyan > a {
    color: #ffffff !important;
}

/* Gray/Grey varianten */
.bg-gray,
.bg-grey {
    background-color: #6c757d !important;
    color: #ffffff !important;
}

.bg-gray,
.bg-grey,
.bg-gray > a,
.bg-grey > a {
    color: #ffffff !important;
}

.bg-gray-dark,
.bg-grey-dark {
    background-color: #343a40 !important;
    color: #ffffff !important;
}

.bg-gray-dark,
.bg-grey-dark,
.bg-gray-dark > a,
.bg-grey-dark > a {
    color: #ffffff !important;
}

.bg-gray-light,
.bg-grey-light {
    background-color: #e2e6ea !important;
    color: #1b1e21 !important;
}

.bg-gray-light,
.bg-grey-light,
.bg-gray-light > a,
.bg-grey-light > a {
    color: #1b1e21 !important;
}

/* Light variant (Bootstrap native maar vaak slecht contrast) */
.bg-light {
    background-color: #e2e6ea !important;
    color: #1b1e21 !important;
}

.bg-light,
.bg-light > a {
    color: #1b1e21 !important;
}

/* White achtergrond - zorg voor donkere tekst */
.bg-white {
    background-color: #ffffff !important;
    color: #212529 !important;
}

/*.bg-white,
.bg-white > a {
    color: #0056b3 !important;
}*/

/* ============================================
   GRADIENT BACKGROUNDS - AdminLTE specifiek
   ============================================ */

/* Gradient variants - vaak slechter contrast dan solid colors */
.bg-gradient-orange {
    background: #cc5200 linear-gradient(180deg, #d96704, #cc5200) repeat-x !important;
    color: #ffffff !important;
}

.bg-gradient-orange,
.bg-gradient-orange > a {
    color: #ffffff !important;
}

.bg-gradient-yellow {
    background: #e0a800 linear-gradient(180deg, #e3b514, #e0a800) repeat-x !important;
    color: #000000 !important;
}

.bg-gradient-yellow,
.bg-gradient-yellow > a {
    color: #000000 !important;
}

.bg-gradient-lightblue {
    background: #2e8bc0 linear-gradient(180deg, #4b97c7, #2e8bc0) repeat-x !important;
    color: #ffffff !important;
}

.bg-gradient-lightblue,
.bg-gradient-lightblue > a {
    color: #ffffff !important;
}

.bg-gradient-cyan {
    background: #118695 linear-gradient(180deg, #2b939f, #118695) repeat-x !important;
    color: #ffffff !important;
}

.bg-gradient-cyan,
.bg-gradient-cyan > a {
    color: #ffffff !important;
}

.bg-gradient-purple {
    background: #6f42c1 linear-gradient(180deg, #7f56c9, #6f42c1) repeat-x !important;
    color: #ffffff !important;
}

.bg-gradient-purple,
.bg-gradient-purple > a {
    color: #ffffff !important;
}

.bg-gradient-pink {
    background: #d63384 linear-gradient(180deg, #db4d93, #d63384) repeat-x !important;
    color: #ffffff !important;
}

.bg-gradient-pink,
.bg-gradient-pink > a {
    color: #ffffff !important;
}

.bg-gradient-lime {
    background: #7fad39 linear-gradient(180deg, #8fb952, #7fad39) repeat-x !important;
    color: #ffffff !important;
}

.bg-gradient-lime,
.bg-gradient-lime > a {
    color: #ffffff !important;
}

/* ============================================
   TEXT COLOR CLASSES - Voor gebruik op bg- classes
   ============================================ */

/* Text colors die corresponderen met achtergronden */
.text-orange {
    color: #cc5200 !important;
}

.text-lightblue {
    color: #2e8bc0 !important;
}

.text-navy {
    color: #001f3f !important;
}

.text-olive {
    color: #74952b !important;
}

.text-lime {
    color: #7fad39 !important;
}

.text-fuchsia {
    color: #b10e7e !important;
}

.text-maroon {
    color: #8b0000 !important;
}

.text-purple {
    color: #6f42c1 !important;
}

.text-pink {
    color: #d63384 !important;
}

.text-yellow {
    color: #c69500 !important; /* Donkerder geel voor tekst */
}

.text-cyan {
    color: #118695 !important;
}

.text-indigo {
    color: #4B0082 !important;
}

/* ============================================
   BUTTON VARIANTS - AdminLTE extra kleuren
   ============================================ */

/* Orange buttons */
.btn-orange {
    background-color: #cc5200 !important;
    border-color: #cc5200 !important;
    color: #ffffff !important;
}

.btn-orange:hover,
.btn-orange:focus,
.btn-orange:active {
    background-color: #a34100 !important;
    border-color: #a34100 !important;
    color: #ffffff !important;
}

/* Lightblue buttons */
.btn-lightblue {
    background-color: #2e8bc0 !important;
    border-color: #2e8bc0 !important;
    color: #ffffff !important;
}

.btn-lightblue:hover,
.btn-lightblue:focus {
    background-color: #2576a3 !important;
    border-color: #2576a3 !important;
    color: #ffffff !important;
}

/* Navy buttons */
.btn-navy {
    background-color: #001f3f !important;
    border-color: #001f3f !important;
    color: #ffffff !important;
}

.btn-navy:hover,
.btn-navy:focus {
    background-color: #001528 !important;
    border-color: #001528 !important;
    color: #ffffff !important;
}

/* Olive buttons */
.btn-olive {
    background-color: #74952b !important;
    border-color: #74952b !important;
    color: #ffffff !important;
}

/* Lime buttons */
.btn-lime {
    background-color: #7fad39 !important;
    border-color: #7fad39 !important;
    color: #ffffff !important;
}

/* Fuchsia buttons */
.btn-fuchsia {
    background-color: #b10e7e !important;
    border-color: #b10e7e !important;
    color: #ffffff !important;
}

/* Maroon buttons */
.btn-maroon {
    background-color: #8b0000 !important;
    border-color: #8b0000 !important;
    color: #ffffff !important;
}

/* Purple buttons */
.btn-purple {
    background-color: #6f42c1 !important;
    border-color: #6f42c1 !important;
    color: #ffffff !important;
}

/* Pink buttons */
.btn-pink {
    background-color: #d63384 !important;
    border-color: #d63384 !important;
    color: #ffffff !important;
}

/* Cyan buttons */
.btn-cyan {
    background-color: #118695 !important;
    border-color: #118695 !important;
    color: #ffffff !important;
}

/* Indigo buttons */
.btn-indigo {
    background-color: #4B0082 !important;
    border-color: #4B0082 !important;
    color: #ffffff !important;
}

/* Gray buttons */
.btn-gray {
    background-color: #6c757d !important;
    border-color: #6c757d !important;
    color: #ffffff !important;
}

/* ============================================
   CARD VARIANTS - AdminLTE extra kleuren
   ============================================ */

/* Card headers met AdminLTE kleuren */
.card-orange .card-header {
    background-color: #cc5200 !important;
    color: #ffffff !important;
}

.card-lightblue .card-header {
    background-color: #2e8bc0 !important;
    color: #ffffff !important;
}

.card-navy .card-header {
    background-color: #001f3f !important;
    color: #ffffff !important;
}

.card-olive .card-header {
    background-color: #74952b !important;
    color: #ffffff !important;
}

.card-lime .card-header {
    background-color: #7fad39 !important;
    color: #ffffff !important;
}

.card-fuchsia .card-header {
    background-color: #b10e7e !important;
    color: #ffffff !important;
}

.card-maroon .card-header {
    background-color: #8b0000 !important;
    color: #ffffff !important;
}

.card-purple .card-header {
    background-color: #6f42c1 !important;
    color: #ffffff !important;
}

.card-pink .card-header {
    background-color: #d63384 !important;
    color: #ffffff !important;
}

.card-cyan .card-header {
    background-color: #118695 !important;
    color: #ffffff !important;
}

.card-indigo .card-header {
    background-color: #4B0082 !important;
    color: #ffffff !important;
}

.card-gray .card-header {
    background-color: #6c757d !important;
    color: #ffffff !important;
}

/* Card outline variants */
.card-outline.card-orange {
    border-top-color: #cc5200 !important;
}

.card-outline.card-lightblue {
    border-top-color: #2e8bc0 !important;
}

.card-outline.card-navy {
    border-top-color: #001f3f !important;
}

.card-outline.card-olive {
    border-top-color: #74952b !important;
}

.card-outline.card-lime {
    border-top-color: #7fad39 !important;
}

.card-outline.card-fuchsia {
    border-top-color: #b10e7e !important;
}

.card-outline.card-maroon {
    border-top-color: #8b0000 !important;
}

.card-outline.card-purple {
    border-top-color: #6f42c1 !important;
}

.card-outline.card-pink {
    border-top-color: #d63384 !important;
}

.card-outline.card-cyan {
    border-top-color: #118695 !important;
}

.card-outline.card-indigo {
    border-top-color: #4B0082 !important;
}

.card-outline.card-gray {
    border-top-color: #6c757d !important;
}