/**
 * =====================================================
 * CASHAIR MASTER STYLESHEET
 * =====================================================
 * Gegenereerd: 2026-09-29 00:34:37
 * Locatie: default
 * Schema: Standaard
 * Versie: 3.1.0
 * 
 * Dit bestand combineert alle styling en wordt volledig
 * aangestuurd door de KleurschemaManager.
 * =====================================================
 */


/* ================================================== */
/*                                                    */
/*   SECTIE 0: FORCE BOOTSTRAP OVERRIDE               */
/*   (Overschrijft vendor.min.css en app.min.css)     */
/*                                                    */
/* ================================================== */

/**
 * Deze sectie forceert ALLE kleur-variabelen met !important
 * zodat ze altijd winnen van Bootstrap en template defaults.
 */

:root,
:root[data-bs-theme="light"],
:root[data-bs-theme="dark"],
[data-bs-theme="light"],
[data-bs-theme="dark"],
.light-theme,
.dark-theme {
    /* Bootstrap Primary Colors - FORCED */
    --bs-primary: #173360 !important;
    --bs-secondary: #6B7C99 !important;
    --bs-success: #005116 !important;
    --bs-info: #8695AC !important;
    --bs-warning: #EEE431 !important;
    --bs-danger: #AA1121 !important;
    --bs-light: #ECEFF2 !important;
    --bs-dark: #173360 !important;
    
    /* Bootstrap RGB Values - FORCED */
    --bs-primary-rgb: 23, 51, 96 !important;
    --bs-secondary-rgb: 107, 124, 153 !important;
    --bs-success-rgb: 0, 81, 22 !important;
    --bs-info-rgb: 134, 149, 172 !important;
    --bs-warning-rgb: 238, 228, 49 !important;
    --bs-danger-rgb: 170, 17, 33 !important;
    --bs-light-rgb: 236, 239, 242 !important;
    --bs-dark-rgb: 23, 51, 96 !important;
    
    /* Card Colors - FORCED TRANSPARENT */
    --bs-card-bg: transparent !important;
    --bs-card-color: inherit !important;
    --bs-card-cap-bg: transparent !important;
    
    /* Body Colors - FORCED */
    --bs-body-bg: #EEEEEE !important;
    --bs-body-bg-rgb: 238, 238, 238 !important;
    --bs-body-color: #2F486F !important;
    --bs-body-color-rgb: 47, 72, 111 !important;
    
    /* Theme Color - FORCED */
    --bs-theme: #173360 !important;
    --bs-theme-rgb: 23, 51, 96 !important;
    
    /* Link Colors - FORCED */
    --bs-link-color: #173360 !important;
    --bs-link-color-rgb: 23, 51, 96 !important;
    --bs-link-hover-color: #4F6486 !important;
    
    /* Border Colors - FORCED */
    --bs-border-color: #C7CED9 !important;
    --bs-border-color-translucent: rgba(199, 206, 217, 0.175) !important;
    
    /* Component Colors - FORCED */
    --bs-component-bg: #FFFFFF !important;
    --bs-component-color: #2F486F !important;
    
    /* Heading Color - FORCED */
    --bs-heading-color: #2F486F !important;
    
    /* Emphasis Colors - FORCED */
    --bs-emphasis-color: #2F486F !important;
    --bs-emphasis-color-rgb: 47, 72, 111 !important;
    
    /* Secondary Colors - FORCED */
    --bs-secondary-color: #9EA9BC !important;
    --bs-secondary-bg: #DADEE6 !important;
    
    /* Tertiary Colors - FORCED */
    --bs-tertiary-color: #B5BECC !important;
    --bs-tertiary-bg: #ECEFF2 !important;
    
    /* Focus Ring - FORCED */
    --bs-focus-ring-color: rgba(23, 51, 96, 0.25) !important;
    
    /* Form Control - FORCED */
    --bs-form-control-bg: #FFFFFF !important;
    
    /* Custom vars for compatibility - FORCED */
    --custom-body-bg: #EEEEEE !important;
    --custom-text-color: #2F486F !important;
    --custom-primary: #173360 !important;
}

/* Force HTML/Body backgrounds to override ANY template styling */
html,
html:before,
html:after {
    background-color: #EEEEEE !important;
    background-image: none !important;
}

body,
body:before,
body:after {
    background-color: #EEEEEE !important;
    background-image: none !important;
    color: #2F486F !important;
}

/* Force app container backgrounds */
.app,
.app-content,
.app-container,
#app,
#content {
    background-color: #EEEEEE !important;
    background-image: none !important;
}

/* Reset ANY gradient overlays from templates */
.app-content:before,
.app-content:after,
.app-container:before,
.app-container:after {
    background: none !important;
    background-image: none !important;
    content: none !important;
}

/* ------------------------------------------- */
/* FORCE CARD STYLING                          */
/* Standaard TRANSPARANT, GEEN BORDER          */
/* Alleen card-arrows voor decoratie           */
/* ------------------------------------------- */

/* MAXIMALE SPECIFICITEIT voor transparante cards */
/* Alleen als er GEEN inline background style is */
html body #app .card:not([style*="background"]),
html body #content .card:not([style*="background"]),
html body .app .card:not([style*="background"]),
html body .app-content .card:not([style*="background"]),
html body .pos .card:not([style*="background"]),
html body .pos-menu .card:not([style*="background"]),
html body .pos-content .card:not([style*="background"]),
html body .card:not([style*="background"]),
body .card:not([style*="background"]),
.card:not([style*="background"]),
.card.h-100:not([style*="background"]),
.card.mb-3:not([style*="background"]),
.card.mb-4:not([style*="background"]),
div.card:not([style*="background"]) {
    background-color: transparent !important;
    background: transparent !important;
    border: none !important;
    color: inherit !important;
    --km-card-bg: transparent;
}

/* Card MET inline style - laat de inline style winnen, geen border */
.card[style*="background"] {
    border: none !important;
}

/* MAXIMALE SPECIFICITEIT voor card-header */
/* Check of card-header ZELF geen inline style heeft */
html body #app .card .card-header:not([style*="background"]),
html body #content .card .card-header:not([style*="background"]),
html body .pos .card .card-header:not([style*="background"]),
html body .pos-menu .card .card-header:not([style*="background"]),
html body .pos-content .card .card-header:not([style*="background"]),
html body .card .card-header:not([style*="background"]),
body .card .card-header:not([style*="background"]),
.card .card-header:not([style*="background"]) {
    background-color: transparent !important;
    background: transparent !important;
    border: none !important;
    color: inherit !important;
}

/* MAXIMALE SPECIFICITEIT voor card-footer */
html body #app .card .card-footer:not([style*="background"]),
html body #content .card .card-footer:not([style*="background"]),
html body .card .card-footer:not([style*="background"]),
body .card .card-footer:not([style*="background"]),
.card .card-footer:not([style*="background"]) {
    background-color: transparent !important;
    background: transparent !important;
    border: none !important;
}

/* MAXIMALE SPECIFICITEIT voor card-body */
/* Check of card-body ZELF geen inline style heeft */
html body #app .card .card-body:not([style*="background"]),
html body #content .card .card-body:not([style*="background"]),
html body .pos .card .card-body:not([style*="background"]),
html body .pos-menu .card .card-body:not([style*="background"]),
html body .pos-content .card .card-body:not([style*="background"]),
html body .card .card-body:not([style*="background"]),
body .card .card-body:not([style*="background"]),
.card .card-body:not([style*="background"]) {
    background-color: transparent !important;
    background: transparent !important;
    color: inherit !important;
}

/* Card-header/body/footer MET inline style - behoud hun kleur */
.card .card-header[style*="background"],
.card .card-body[style*="background"],
.card .card-footer[style*="background"] {
    border: none !important;
}

/* ------------------------------------------- */
/* FORCE CARD-ARROW STYLING                    */
/* Decoratieve hoeken - ALTIJD zichtbaar       */
/* Alleen kleur aanpassen, rest = template     */
/* ------------------------------------------- */

/* Card basis */
.card {
    --km-card-bg: transparent;
    position: relative;
}

/* Card-arrow - boven alles */
.card-arrow {
    z-index: 10 !important;
    pointer-events: none;
}

/* ===========================================
   CARD CONTENT MET INSET
   Kleine margin zodat hoeklijnen zichtbaar zijn
   =========================================== */

/* Card-header en card-body krijgen kleine margin */
.card > .card-header,
.card > .card-body,
.card > .card-footer {
    position: relative;
    z-index: 1;
    margin: 2px !important;
}

/* Eerste element (header) krijgt correcte afronding */
.card > .card-header:first-child,
.card > .card-body:first-child {
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
}

/* Laatste element krijgt correcte afronding */
.card > .card-body:last-of-type,
.card > .card-footer:last-child {
    border-bottom-left-radius: 4px;
    border-bottom-right-radius: 4px;
}

/* Verwijder margin tussen header en body */
.card > .card-header + .card-body {
    margin-top: 0 !important;
}

/* ===========================================
   CARD CONTENT KLEUREN
   Transparant ALLEEN als GEEN inline style
   =========================================== */

/* Card-header zonder inline style = transparant */
.card-header:not([style*="background"]) {
    background-color: transparent !important;
}

/* Card-body zonder inline style = transparant */
.card-body:not([style*="background"]) {
    background-color: transparent !important;
}

/* Card-footer zonder inline style = transparant */
.card-footer:not([style*="background"]) {
    background-color: transparent !important;
}

/* ===========================================
   CARD-ARROW KLEUREN
   Alleen background-color aanpassen!
   =========================================== */

/* Hoek-elementen zelf transparant */
.card-arrow-top-left,
.card-arrow-top-right,
.card-arrow-bottom-left,
.card-arrow-bottom-right {
    background-color: transparent !important;
}

/* De lijnen (::before en ::after) krijgen de kleur */
.card-arrow-top-left::before,
.card-arrow-top-left::after,
.card-arrow-top-right::before,
.card-arrow-top-right::after,
.card-arrow-bottom-left::before,
.card-arrow-bottom-left::after,
.card-arrow-bottom-right::before,
.card-arrow-bottom-right::after {
    background-color: #9EA9BC !important;
}

/* ------------------------------------------- */
/* FORCE POS-MENU CARD STYLING                 */
/* Specifiek voor kassa interface              */
/* Geen borders - alleen card-arrows           */
/* ------------------------------------------- */

html body #app .pos-menu .card:not([style*="background"]),
html body .pos-menu .card:not([style*="background"]),
body .pos-menu .card:not([style*="background"]),
.pos-menu .card:not([style*="background"]) {
    border: none !important;
    box-shadow: none !important;
    background-color: transparent !important;
    background: transparent !important;
}

html body #app .pos-menu .nav-link .card:not([style*="background"]),
html body .pos-menu .nav-link .card:not([style*="background"]),
body .pos-menu .nav-link .card:not([style*="background"]),
.pos-menu .nav-link .card:not([style*="background"]) {
    border: none !important;
    background-color: transparent !important;
    background: transparent !important;
}

html body #app .pos-menu .nav-link .card .card-body:not([style*="background"]),
html body .pos-menu .nav-link .card .card-body:not([style*="background"]),
body .pos-menu .nav-link .card .card-body:not([style*="background"]),
.pos-menu .nav-link .card .card-body:not([style*="background"]) {
    background-color: transparent !important;
    background: transparent !important;
}

html body .pos-menu .nav-link.active .card,
body .pos-menu .nav-link.active .card,
.pos-menu .nav-link.active .card,
html body .pos-menu .nav-link:hover .card,
body .pos-menu .nav-link:hover .card,
.pos-menu .nav-link:hover .card {
    /* Geen border wijziging bij hover/active */
}

/* ------------------------------------------- */
/* FORCE FORM CONTROL STYLING                  */
/* ------------------------------------------- */

html body .form-control,
body .form-control,
.form-control,
html body .form-select,
body .form-select,
.form-select,
html body input.form-control,
html body select.form-select,
html body textarea.form-control {
    background-color: #FFFFFF !important;
    border-color: #C7CED9 !important;
    color: #2F486F !important;
}

html body .form-control:focus,
body .form-control:focus,
.form-control:focus,
html body .form-select:focus,
body .form-select:focus,
.form-select:focus {
    border-color: #8695AC !important;
    box-shadow: 0 0 0 0.25rem rgba(23, 51, 96, 0.25) !important;
    outline: none !important;
}

html body .form-control:disabled,
html body .form-control[readonly],
.form-control:disabled,
.form-control[readonly] {
    background-color: #DADEE6 !important;
}

html body .form-check-input:checked,
body .form-check-input:checked,
.form-check-input:checked {
    background-color: #173360 !important;
    border-color: #173360 !important;
}

html body .input-group-text,
body .input-group-text,
.input-group-text {
    background-color: #ECEFF2 !important;
    border-color: #C7CED9 !important;
    color: #2F486F !important;
}

/* ------------------------------------------- */
/* FORCE MODAL STYLING                         */
/* ------------------------------------------- */

html body .modal-content,
body .modal-content,
.modal-content {
    background-color: #FFFFFF !important;
    border-color: #C7CED9 !important;
    color: #2F486F !important;
}

html body .modal-header,
body .modal-header,
.modal-header {
    border-bottom-color: #C7CED9 !important;
}

html body .modal-footer,
body .modal-footer,
.modal-footer {
    border-top-color: #C7CED9 !important;
}

/* ------------------------------------------- */
/* FORCE DROPDOWN STYLING                      */
/* ------------------------------------------- */

html body .dropdown-menu,
body .dropdown-menu,
.dropdown-menu {
    background-color: #FFFFFF !important;
    border-color: #C7CED9 !important;
}

html body .dropdown-item,
body .dropdown-item,
.dropdown-item {
    color: #2F486F !important;
}

html body .dropdown-item:hover,
html body .dropdown-item:focus,
body .dropdown-item:hover,
body .dropdown-item:focus,
.dropdown-item:hover,
.dropdown-item:focus {
    background-color: #ECEFF2 !important;
    color: #173360 !important;
}

html body .dropdown-item.active,
html body .dropdown-item:active,
body .dropdown-item.active,
body .dropdown-item:active,
.dropdown-item.active,
.dropdown-item:active {
    background-color: #173360 !important;
    color: #D1D6DF !important;
}

/* ------------------------------------------- */
/* FORCE TABLE STYLING                         */
/* ------------------------------------------- */

html body .table,
body .table,
.table {
    --bs-table-bg: transparent !important;
    --bs-table-color: #2F486F !important;
    --bs-table-border-color: #C7CED9 !important;
    --bs-table-striped-bg: rgba(236, 239, 242, 0.5) !important;
    --bs-table-hover-bg: rgba(218, 222, 230, 0.5) !important;
    color: #2F486F !important;
    border-color: #C7CED9 !important;
}

html body .table > thead,
body .table > thead,
.table > thead {
    color: #2F486F !important;
}

html body .table > tbody > tr > td,
html body .table > tbody > tr > th,
body .table > tbody > tr > td,
body .table > tbody > tr > th {
    color: #2F486F !important;
    border-color: #C7CED9 !important;
}

/* ------------------------------------------- */
/* FORCE NAV/TABS STYLING                      */
/* ------------------------------------------- */

html body .nav-link,
body .nav-link,
.nav-link {
    color: #173360 !important;
}

html body .nav-link:hover,
html body .nav-link:focus,
body .nav-link:hover,
body .nav-link:focus,
.nav-link:hover,
.nav-link:focus {
    color: #4F6486 !important;
}

html body .nav-pills .nav-link.active,
body .nav-pills .nav-link.active,
.nav-pills .nav-link.active {
    background-color: #173360 !important;
    color: #D1D6DF !important;
}

html body .nav-tabs .nav-link.active,
body .nav-tabs .nav-link.active,
.nav-tabs .nav-link.active {
    color: #173360 !important;
    background-color: #FFFFFF !important;
    border-color: #C7CED9 #C7CED9 #FFFFFF !important;
}

/* ------------------------------------------- */
/* FORCE LIST GROUP STYLING                    */
/* ------------------------------------------- */

html body .list-group-item,
body .list-group-item,
.list-group-item {
    background-color: #FFFFFF !important;
    border-color: #C7CED9 !important;
    color: #2F486F !important;
}

html body .list-group-item.active,
body .list-group-item.active,
.list-group-item.active {
    background-color: #173360 !important;
    border-color: #173360 !important;
    color: #D1D6DF !important;
}

/* ------------------------------------------- */
/* FORCE PAGINATION STYLING                    */
/* ------------------------------------------- */

html body .page-link,
body .page-link,
.page-link {
    color: #173360 !important;
    background-color: #FFFFFF !important;
    border-color: #C7CED9 !important;
}

html body .page-link:hover,
body .page-link:hover,
.page-link:hover {
    color: #152E56 !important;
    background-color: #ECEFF2 !important;
}

html body .page-item.active .page-link,
body .page-item.active .page-link,
.page-item.active .page-link {
    background-color: #173360 !important;
    border-color: #173360 !important;
    color: #D1D6DF !important;
}

/* ------------------------------------------- */
/* FORCE ACCORDION STYLING                     */
/* ------------------------------------------- */

html body .accordion-item,
body .accordion-item,
.accordion-item {
    background-color: #FFFFFF !important;
    border-color: #C7CED9 !important;
}

html body .accordion-button,
body .accordion-button,
.accordion-button {
    background-color: #DADEE6 !important;
    color: #2F486F !important;
}

html body .accordion-button:not(.collapsed),
body .accordion-button:not(.collapsed),
.accordion-button:not(.collapsed) {
    background-color: rgba(23, 51, 96, 0.1) !important;
    color: #173360 !important;
}

/* ------------------------------------------- */
/* FORCE BUTTON STYLING                        */
/* ------------------------------------------- */

html body .btn-primary,
body .btn-primary,
.btn-primary {
    background-color: #173360 !important;
    border-color: #173360 !important;
    color: #D1D6DF !important;
}

html body .btn-primary:hover,
html body .btn-primary:focus,
body .btn-primary:hover,
body .btn-primary:focus,
.btn-primary:hover,
.btn-primary:focus {
    background-color: #152E56 !important;
    border-color: #152E56 !important;
    color: #D1D6DF !important;
}

html body .btn-secondary,
body .btn-secondary,
.btn-secondary {
    background-color: #6B7C99 !important;
    border-color: #6B7C99 !important;
    color: #D1D6DF !important;
}

html body .btn-success,
body .btn-success,
.btn-success {
    background-color: #005116 !important;
    border-color: #005116 !important;
    color: #FFFFFF !important;
}

html body .btn-danger,
body .btn-danger,
.btn-danger {
    background-color: #AA1121 !important;
    border-color: #AA1121 !important;
    color: #FFFFFF !important;
}

html body .btn-warning,
body .btn-warning,
.btn-warning {
    background-color: #EEE431 !important;
    border-color: #EEE431 !important;
    color: #000000 !important;
}

html body .btn-info,
body .btn-info,
.btn-info {
    background-color: #8695AC !important;
    border-color: #8695AC !important;
    color: #2F486F !important;
}

html body .btn-light,
body .btn-light,
.btn-light {
    background-color: #ECEFF2 !important;
    border-color: #DADEE6 !important;
    color: #2F486F !important;
}

html body .btn-outline-primary,
body .btn-outline-primary,
.btn-outline-primary {
    color: #173360 !important;
    border-color: #173360 !important;
    background-color: transparent !important;
}

html body .btn-outline-primary:hover,
body .btn-outline-primary:hover,
.btn-outline-primary:hover {
    background-color: #173360 !important;
    color: #D1D6DF !important;
}

html body .btn-outline-danger,
body .btn-outline-danger,
.btn-outline-danger {
    color: #AA1121 !important;
    border-color: #AA1121 !important;
    background-color: transparent !important;
}

html body .btn-outline-danger:hover,
body .btn-outline-danger:hover,
.btn-outline-danger:hover {
    background-color: #AA1121 !important;
    color: #FFFFFF !important;
}

/* ------------------------------------------- */
/* FORCE ALERT STYLING                         */
/* ------------------------------------------- */

html body .alert-primary,
body .alert-primary,
.alert-primary {
    background-color: rgba(23, 51, 96, 0.15) !important;
    border-color: #8695AC !important;
    color: #173360 !important;
}

html body .alert-success,
body .alert-success,
.alert-success {
    background-color: rgba(0, 81, 22, 0.15) !important;
    border-color: #005116 !important;
    color: #004112 !important;
}

html body .alert-danger,
body .alert-danger,
.alert-danger {
    background-color: rgba(170, 17, 33, 0.15) !important;
    border-color: #AA1121 !important;
    color: #880E1A !important;
}

html body .alert-warning,
body .alert-warning,
.alert-warning {
    background-color: rgba(238, 228, 49, 0.15) !important;
    border-color: #EEE431 !important;
    color: #777219 !important;
}

html body .alert-info,
body .alert-info,
.alert-info {
    background-color: rgba(134, 149, 172, 0.15) !important;
    border-color: #B5BECC !important;
    color: #4F6486 !important;
}

/* ------------------------------------------- */
/* FORCE BADGE STYLING                         */
/* ------------------------------------------- */

html body .badge.bg-primary,
body .badge.bg-primary,
.badge.bg-primary {
    background-color: #173360 !important;
    color: #D1D6DF !important;
}

html body .badge.bg-secondary,
body .badge.bg-secondary,
.badge.bg-secondary {
    background-color: #6B7C99 !important;
    color: #D1D6DF !important;
}

html body .badge.bg-success,
body .badge.bg-success,
.badge.bg-success {
    background-color: #005116 !important;
    color: #FFFFFF !important;
}

html body .badge.bg-danger,
body .badge.bg-danger,
.badge.bg-danger {
    background-color: #AA1121 !important;
    color: #FFFFFF !important;
}

html body .badge.bg-warning,
body .badge.bg-warning,
.badge.bg-warning {
    background-color: #EEE431 !important;
    color: #000000 !important;
}

html body .badge.bg-info,
body .badge.bg-info,
.badge.bg-info {
    background-color: #8695AC !important;
    color: #2F486F !important;
}

/* ------------------------------------------- */
/* FORCE BACKGROUND UTILITIES                  */
/* ------------------------------------------- */

html body .bg-primary,
body .bg-primary,
.bg-primary {
    background-color: #173360 !important;
    color: #D1D6DF !important;
}

html body .bg-secondary,
body .bg-secondary,
.bg-secondary {
    background-color: #6B7C99 !important;
    color: #D1D6DF !important;
}

html body .bg-success,
body .bg-success,
.bg-success {
    background-color: #005116 !important;
    color: #FFFFFF !important;
}

html body .bg-danger,
body .bg-danger,
.bg-danger {
    background-color: #AA1121 !important;
    color: #FFFFFF !important;
}

html body .bg-warning,
body .bg-warning,
.bg-warning {
    background-color: #EEE431 !important;
    color: #000000 !important;
}

html body .bg-info,
body .bg-info,
.bg-info {
    background-color: #8695AC !important;
    color: #2F486F !important;
}

html body .bg-light,
body .bg-light,
.bg-light {
    background-color: #ECEFF2 !important;
    color: #2F486F !important;
}

html body .bg-dark,
body .bg-dark,
.bg-dark {
    background-color: #173360 !important;
    color: #D1D6DF !important;
}

/* ------------------------------------------- */
/* FORCE TEXT UTILITIES                        */
/* ------------------------------------------- */

html body .text-primary,
body .text-primary,
.text-primary {
    color: #173360 !important;
}

html body .text-secondary,
body .text-secondary,
.text-secondary {
    color: #6B7C99 !important;
}

html body .text-success,
body .text-success,
.text-success {
    color: #005116 !important;
}

html body .text-danger,
body .text-danger,
.text-danger {
    color: #AA1121 !important;
}

html body .text-warning,
body .text-warning,
.text-warning {
    color: #EEE431 !important;
}

html body .text-info,
body .text-info,
.text-info {
    color: #8695AC !important;
}

html body .text-muted,
body .text-muted,
.text-muted {
    color: #9EA9BC !important;
}

html body .text-body,
body .text-body,
.text-body {
    color: #2F486F !important;
}

/* ------------------------------------------- */
/* FORCE BORDER UTILITIES                      */
/* ------------------------------------------- */

html body .border-primary,
body .border-primary,
.border-primary {
    border-color: #173360 !important;
}

html body .border-secondary,
body .border-secondary,
.border-secondary {
    border-color: #6B7C99 !important;
}

html body .border-success,
body .border-success,
.border-success {
    border-color: #005116 !important;
}

html body .border-danger,
body .border-danger,
.border-danger {
    border-color: #AA1121 !important;
}

html body .border-warning,
body .border-warning,
.border-warning {
    border-color: #EEE431 !important;
}

/* ------------------------------------------- */
/* EINDE FORCE OVERRIDE SECTIE                 */
/* ------------------------------------------- */


/* ================================================== */
/*                                                    */
/*   SECTIE 1: CSS VARIABELEN                         */
/*                                                    */
/* ================================================== */

:root {
    /* ========================================= */
    /* THEME INFO                                */
    /* ========================================= */
    --theme-version: "3.0.0";
    --theme-name: "Cashair Dynamic Theme";
    --theme-mode: "light";

    /* ========================================= */
    /* ACCENT KLEUREN (Schakeringen)             */
    /* ========================================= */
    --accent-kleur100: #173360;
    --accent-kleur90: #334B73;
    --accent-kleur80: #4F6486;
    --accent-kleur70: #6B7C99;
    --accent-kleur60: #8695AC;
    --accent-kleur50: #9EA9BC;
    --accent-kleur40: #B5BECC;
    --accent-kleur30: #C7CED9;
    --accent-kleur20: #DADEE6;
    --accent-kleur10: #ECEFF2;

    /* ========================================= */
    /* SEMANTIC KLEUREN                          */
    /* ========================================= */
    --groen: #005116;
    --oranje: #F4661D;
    --geel: #EEE431;
    --rood: #AA1121;
    --wit: #EEEEEE;

    /* ========================================= */
    /* TEKST KLEUREN                             */
    /* ========================================= */
    --tekst-kleur-donker: #2F486F;
    --tekst-kleur-licht: #D1D6DF;

    /* ========================================= */
    /* AFGELEIDE KLEUREN                         */
    /* ========================================= */
    --accent-kleur-light: #B5BECC;
    --accent-kleur-wit: #ECEFF2;
    --accent-kleur-zwart: #142B52;
    --color-rood: #AA1121;
    --color-primary: #173360;
    --color-secondary: #6B7C99;
    --color-light: #ffffff;
    --color-dark: #000000;

    /* ========================================= */
    /* BOOTSTRAP BASIS KLEUREN                   */
    /* ========================================= */
    --bs-theme: #173360;
    --bs-theme-rgb: 23, 51, 96;
    --bs-primary: #173360;
    --bs-secondary: #6B7C99;
    --bs-success: #005116;
    --bs-danger: #AA1121;
    --bs-warning: #EEE431;
    --bs-info: #8695AC;
    --bs-light: #ECEFF2;
    --bs-dark: #173360;

    /* ========================================= */
    /* BOOTSTRAP RGB (voor rgba() gebruik)       */
    /* ========================================= */
    --bs-primary-rgb: 23, 51, 96;
    --bs-secondary-rgb: 107, 124, 153;
    --bs-success-rgb: 0, 81, 22;
    --bs-danger-rgb: 170, 17, 33;
    --bs-warning-rgb: 238, 228, 49;
    --bs-info-rgb: 134, 149, 172;
    --bs-light-rgb: 236, 239, 242;
    --bs-dark-rgb: 23, 51, 96;
    --bs-white-rgb: 255, 255, 255;
    --bs-black-rgb: 0, 0, 0;

    /* ========================================= */
    /* CONTRAST TEKSTKLEUREN (automatisch)       */
    /* ========================================= */
    --bs-primary-text: #D1D6DF;
    --bs-secondary-text: #D1D6DF;
    --bs-success-text: #FFFFFF;
    --bs-danger-text: #FFFFFF;
    --bs-warning-text: #000000;
    --bs-info-text: #2F486F;
    --bs-light-text: #2F486F;
    --bs-dark-text: #D1D6DF;

    /* ========================================= */
    /* HOVER & ACTIVE STATES                     */
    /* ========================================= */
    --bs-primary-hover: #152E56;
    --bs-primary-active: #142B52;
    --bs-success-hover: #004914;
    --bs-danger-hover: #990F1E;
    --bs-warning-hover: #D6CD2C;

    /* ========================================= */
    /* INVERSE KLEUREN                           */
    /* ========================================= */
    --bs-inverse: #000000;
    --bs-inverse-rgb: 0, 0, 0;

    /* ========================================= */
    /* BODY STYLING                              */
    /* ========================================= */
    --bs-body-bg: #EEEEEE;
    --bs-body-bg-rgb: 238, 238, 238;
    --bs-body-color: #2F486F;
    --bs-body-color-rgb: 47, 72, 111;
    --bs-body-font-weight: 400;
    --bs-body-letter-spacing: 0.046875rem;

    /* ========================================= */
    /* COMPONENT KLEUREN                         */
    /* ========================================= */
    --bs-component-bg: #FFFFFF;
    --bs-component-bg-rgb: 255, 255, 255;
    --bs-component-color: #2F486F;
    --bs-component-color-rgb: 47, 72, 111;

    /* ========================================= */
    /* APP HEADER                                */
    /* ========================================= */
    --bs-app-header-bg: rgba(255, 255, 255, 0.95);
    --bs-app-header-link-color: #2F486F;
    --bs-app-header-link-color-rgb: 47, 72, 111;
    --bs-app-header-link-hover-color: #173360;

    /* ========================================= */
    /* APP SIDEBAR                               */
    /* ========================================= */
    --bs-app-sidebar-bg: #FFFFFF;
    --bs-app-sidebar-mobile-bg: rgba(255, 255, 255, 0.98);
    --bs-app-sidebar-menu-header-color: rgba(47, 72, 111, 0.3);
    --bs-app-sidebar-menu-link-color: rgba(47, 72, 111, 0.5);
    --bs-app-sidebar-menu-link-hover-color: #2F486F;
    --bs-app-sidebar-menu-link-active-color: #2F486F;

    /* ========================================= */
    /* APP TOP NAV                               */
    /* ========================================= */
    --bs-app-top-nav-bg: #FFFFFF;
    --bs-app-top-nav-menu-link-color: rgba(47, 72, 111, 0.5);
    --bs-app-top-nav-menu-link-hover-color: #2F486F;
    --bs-app-top-nav-menu-link-active-color: #2F486F;
    --bs-app-top-nav-menu-submenu-bg: #FFFFFF;

    /* ========================================= */
    /* BORDERS & FOCUS                           */
    /* ========================================= */
    --bs-border-color: #C7CED9;
    --bs-border-color-translucent: rgba(199, 206, 217, 0.175);
    --bs-focus-ring-color: rgba(23, 51, 96, 0.25);

    /* ========================================= */
    /* LINKS                                     */
    /* ========================================= */
    --bs-link-color: #173360;
    --bs-link-color-rgb: 23, 51, 96;
    --bs-link-hover-color: #4F6486;
    --bs-link-hover-color-rgb: 23, 51, 96;

    /* ========================================= */
    /* HEADINGS                                  */
    /* ========================================= */
    --bs-heading-color: #2F486F;

    /* ========================================= */
    /* FORMS                                     */
    /* ========================================= */
    --bs-form-control-bg: #FFFFFF;
    --bs-form-control-disabled-bg: #DADEE6;

    /* ========================================= */
    /* CUSTOM BODY VARS (voor compatibiliteit)   */
    /* ========================================= */
    --custom-body-bg: #EEEEEE;
    --custom-text-color: #2F486F;
    --custom-primary: #173360;
    --custom-secondary: #6B7C99;
    --custom-accent: #8695AC;
}


/* ================================================== */
/*                                                    */
/*   SECTIE 2: BASE STYLING                           */
/*                                                    */
/* ================================================== */

/* ------------------------------------------- */
/* HTML & Body - Maximum Override              */
/* ------------------------------------------- */

html {
    background: #EEEEEE !important;
    background-color: #EEEEEE !important;
}

body {
    background: #EEEEEE !important;
    background-color: #EEEEEE !important;
    color: #2F486F !important;
    font-weight: var(--bs-body-font-weight);
    letter-spacing: var(--bs-body-letter-spacing);
}

/* Override ALL possible app wrapper selectors */
html body,
body.pace-top,
body.pace-done,
.app,
.app-content,
.app-container,
.app-content-full-height,
.app-without-sidebar,
.app-without-header,
#app,
#content,
div.app,
div.app-content {
    background: #EEEEEE !important;
    background-color: #EEEEEE !important;
    background-image: none !important;
}

/* Kill any pseudo-element overlays from templates */
html:before, html:after,
body:before, body:after,
.app:before, .app:after,
.app-content:before, .app-content:after,
.app-container:before, .app-container:after,
#app:before, #app:after,
#content:before, #content:after {
    display: none !important;
    content: none !important;
    background: none !important;
    background-image: none !important;
    opacity: 0 !important;
}

/* ------------------------------------------- */
/* Links                                        */
/* ------------------------------------------- */

a {
    color: #173360 !important;
    text-decoration: none;
}

a:hover,
a:focus {
    color: #4F6486 !important;
    text-decoration: underline;
}

/* Reset link colors that might be overridden */
a:not(.btn):not(.nav-link):not(.dropdown-item):not(.page-link) {
    color: #173360;
}

a:not(.btn):not(.nav-link):not(.dropdown-item):not(.page-link):hover {
    color: #4F6486;
}


/* ================================================== */
/*                                                    */
/*   SECTIE 2B: BOOTSTRAP COMPONENT FORCE OVERRIDE    */
/*                                                    */
/* ================================================== */

/**
 * Deze sectie forceert component-specifieke kleuren
 * voor Bootstrap elementen die inline of via hoge
 * specificiteit zijn gestyled in vendor/app CSS.
 */

/* Force all btn-primary regardless of specificity */
.btn.btn-primary,
button.btn-primary,
a.btn-primary,
input.btn-primary,
.btn-primary.active,
.btn-primary:active,
.show > .btn-primary.dropdown-toggle {
    background-color: #173360 !important;
    border-color: #173360 !important;
    color: #D1D6DF !important;
}

.btn.btn-primary:hover,
button.btn-primary:hover,
a.btn-primary:hover {
    background-color: #152E56 !important;
    border-color: #152E56 !important;
    color: #D1D6DF !important;
}

/* Force all btn-success */
.btn.btn-success,
button.btn-success,
a.btn-success {
    background-color: #005116 !important;
    border-color: #005116 !important;
    color: #FFFFFF !important;
}

/* Force all btn-danger */
.btn.btn-danger,
button.btn-danger,
a.btn-danger {
    background-color: #AA1121 !important;
    border-color: #AA1121 !important;
    color: #FFFFFF !important;
}

/* Force all btn-warning */
.btn.btn-warning,
button.btn-warning,
a.btn-warning {
    background-color: #EEE431 !important;
    border-color: #EEE431 !important;
    color: #000000 !important;
}

/* Force all btn-info */
.btn.btn-info,
button.btn-info,
a.btn-info {
    background-color: #8695AC !important;
    border-color: #8695AC !important;
    color: #2F486F !important;
}

/* Force all btn-secondary */
.btn.btn-secondary,
button.btn-secondary,
a.btn-secondary {
    background-color: #6B7C99 !important;
    border-color: #6B7C99 !important;
    color: #D1D6DF !important;
}

/* Force all badges */
.badge,
span.badge,
.badge.rounded-pill {
    --bs-badge-color: #D1D6DF;
}

.badge.bg-primary,
.badge.text-bg-primary {
    background-color: #173360 !important;
    color: #D1D6DF !important;
}

.badge.bg-success,
.badge.text-bg-success {
    background-color: #005116 !important;
    color: #FFFFFF !important;
}

.badge.bg-danger,
.badge.text-bg-danger {
    background-color: #AA1121 !important;
    color: #FFFFFF !important;
}

.badge.bg-warning,
.badge.text-bg-warning {
    background-color: #EEE431 !important;
    color: #000000 !important;
}

.badge.bg-info,
.badge.text-bg-info {
    background-color: #8695AC !important;
    color: #2F486F !important;
}

.badge.bg-secondary,
.badge.text-bg-secondary {
    background-color: #6B7C99 !important;
    color: #D1D6DF !important;
}

/* Force all alerts */
.alert.alert-primary {
    background-color: rgba(23, 51, 96, 0.15) !important;
    border-color: #8695AC !important;
    color: #173360 !important;
}

.alert.alert-success {
    background-color: rgba(0, 81, 22, 0.15) !important;
    border-color: #005116 !important;
    color: #004112 !important;
}

.alert.alert-danger {
    background-color: rgba(170, 17, 33, 0.15) !important;
    border-color: #AA1121 !important;
    color: #880E1A !important;
}

.alert.alert-warning {
    background-color: rgba(238, 228, 49, 0.15) !important;
    border-color: #EEE431 !important;
    color: #777219 !important;
}

.alert.alert-info {
    background-color: rgba(134, 149, 172, 0.15) !important;
    border-color: #B5BECC !important;
    color: #4F6486 !important;
}

/* Force card styling - alleen als GEEN inline style */
.card:not([style*="background"]),
div.card:not([style*="background"]),
.card.h-100:not([style*="background"]),
.card.mb-3:not([style*="background"]),
.card.mb-4:not([style*="background"]) {
    background-color: transparent !important;
    border: none !important;
}

/* Check op element ZELF, niet parent */
.card .card-header:not([style*="background"]) {
    background-color: transparent !important;
    border: none !important;
    color: inherit !important;
}

.card .card-body:not([style*="background"]) {
    background-color: transparent !important;
    color: inherit !important;
}

.card .card-footer:not([style*="background"]) {
    background-color: transparent !important;
    border: none !important;
}

/* Card-header/body/footer MET inline style - behoud hun kleur */
.card .card-header[style*="background"],
.card .card-body[style*="background"],
.card .card-footer[style*="background"] {
    border: none !important;
}

/* Force form controls */
.form-control,
input.form-control,
textarea.form-control,
select.form-control,
.form-select {
    background-color: #FFFFFF !important;
    border-color: #C7CED9 !important;
    color: #2F486F !important;
}

.form-control:focus,
.form-select:focus,
input.form-control:focus,
textarea.form-control:focus {
    border-color: #173360 !important;
    box-shadow: 0 0 0 0.25rem rgba(23, 51, 96, 0.25) !important;
}

/* Force tables */
.table,
table.table,
.table-responsive .table {
    --bs-table-bg: transparent !important;
    --bs-table-color: #2F486F !important;
    --bs-table-border-color: #C7CED9 !important;
    color: #2F486F !important;
}

.table thead,
.table thead th,
.table th {
    color: #2F486F !important;
    border-color: #C7CED9 !important;
}

.table td {
    color: #2F486F !important;
    border-color: #C7CED9 !important;
}

/* Force modal styling */
.modal .modal-content,
.modal-content {
    background-color: #FFFFFF !important;
    color: #2F486F !important;
}

.modal .modal-header,
.modal-header {
    border-bottom-color: #C7CED9 !important;
}

.modal .modal-footer,
.modal-footer {
    border-top-color: #C7CED9 !important;
}

/* Force dropdown styling */
.dropdown-menu,
ul.dropdown-menu,
div.dropdown-menu {
    background-color: #FFFFFF !important;
    border-color: #C7CED9 !important;
}

.dropdown-menu .dropdown-item,
.dropdown-item {
    color: #2F486F !important;
}

.dropdown-menu .dropdown-item:hover,
.dropdown-menu .dropdown-item:focus,
.dropdown-item:hover,
.dropdown-item:focus {
    background-color: #ECEFF2 !important;
    color: #173360 !important;
}

.dropdown-menu .dropdown-item.active,
.dropdown-menu .dropdown-item:active,
.dropdown-item.active,
.dropdown-item:active {
    background-color: #173360 !important;
    color: #D1D6DF !important;
}


/* ================================================== */
/*                                                    */
/*   SECTIE 3: BOOTSTRAP COMPONENT OVERRIDES          */
/*                                                    */
/* ================================================== */

/* ------------------------------------------- */
/* Buttons - Primary                            */
/* ------------------------------------------- */

.btn-primary {
    --bs-btn-color: #D1D6DF;
    --bs-btn-bg: #173360;
    --bs-btn-border-color: #173360;
    --bs-btn-hover-color: #D1D6DF;
    --bs-btn-hover-bg: #152E56;
    --bs-btn-hover-border-color: #152E56;
    --bs-btn-focus-shadow-rgb: 23, 51, 96;
    --bs-btn-active-color: #D1D6DF;
    --bs-btn-active-bg: #142B52;
    --bs-btn-active-border-color: #142B52;
    --bs-btn-disabled-color: #D1D6DF;
    --bs-btn-disabled-bg: #173360;
    --bs-btn-disabled-border-color: #173360;
    background-color: #173360 !important;
    border-color: #173360 !important;
    color: #D1D6DF !important;
}

.btn-primary:hover {
    background-color: #152E56 !important;
    border-color: #152E56 !important;
}

/* ------------------------------------------- */
/* Buttons - Secondary                          */
/* ------------------------------------------- */

.btn-secondary {
    --bs-btn-color: #D1D6DF;
    --bs-btn-bg: #6B7C99;
    --bs-btn-border-color: #6B7C99;
    --bs-btn-hover-color: #D1D6DF;
    --bs-btn-hover-bg: #4F6486;
    --bs-btn-hover-border-color: #4F6486;
    background-color: #6B7C99 !important;
    border-color: #6B7C99 !important;
    color: #D1D6DF !important;
}

.btn-secondary:hover {
    background-color: #4F6486 !important;
    border-color: #4F6486 !important;
}

/* ------------------------------------------- */
/* Buttons - Success                            */
/* ------------------------------------------- */

.btn-success {
    --bs-btn-color: #FFFFFF;
    --bs-btn-bg: #005116;
    --bs-btn-border-color: #005116;
    --bs-btn-hover-color: #FFFFFF;
    --bs-btn-hover-bg: #004914;
    --bs-btn-hover-border-color: #004914;
    background-color: #005116 !important;
    border-color: #005116 !important;
    color: #FFFFFF !important;
}

.btn-success:hover {
    background-color: #004914 !important;
    border-color: #004914 !important;
}

/* ------------------------------------------- */
/* Buttons - Danger                             */
/* ------------------------------------------- */

.btn-danger {
    --bs-btn-color: #FFFFFF;
    --bs-btn-bg: #AA1121;
    --bs-btn-border-color: #AA1121;
    --bs-btn-hover-color: #FFFFFF;
    --bs-btn-hover-bg: #990F1E;
    --bs-btn-hover-border-color: #990F1E;
    background-color: #AA1121 !important;
    border-color: #AA1121 !important;
    color: #FFFFFF !important;
}

.btn-danger:hover {
    background-color: #990F1E !important;
    border-color: #990F1E !important;
}

/* ------------------------------------------- */
/* Buttons - Warning                            */
/* ------------------------------------------- */

.btn-warning {
    --bs-btn-color: #000000;
    --bs-btn-bg: #EEE431;
    --bs-btn-border-color: #EEE431;
    --bs-btn-hover-color: #000000;
    --bs-btn-hover-bg: #D6CD2C;
    --bs-btn-hover-border-color: #D6CD2C;
    background-color: #EEE431 !important;
    border-color: #EEE431 !important;
    color: #000000 !important;
}

.btn-warning:hover {
    background-color: #D6CD2C !important;
    border-color: #D6CD2C !important;
}

/* ------------------------------------------- */
/* Buttons - Info                               */
/* ------------------------------------------- */

.btn-info {
    --bs-btn-color: #2F486F;
    --bs-btn-bg: #8695AC;
    --bs-btn-border-color: #8695AC;
    --bs-btn-hover-color: #2F486F;
    --bs-btn-hover-bg: #6B7C99;
    --bs-btn-hover-border-color: #6B7C99;
    background-color: #8695AC !important;
    border-color: #8695AC !important;
    color: #2F486F !important;
}

/* ------------------------------------------- */
/* Buttons - Light                              */
/* ------------------------------------------- */

.btn-light {
    --bs-btn-color: #2F486F;
    --bs-btn-bg: #ECEFF2;
    --bs-btn-border-color: #DADEE6;
    --bs-btn-hover-color: #2F486F;
    --bs-btn-hover-bg: #DADEE6;
    --bs-btn-hover-border-color: #C7CED9;
    background-color: #ECEFF2 !important;
    border-color: #DADEE6 !important;
    color: #2F486F !important;
}

/* ------------------------------------------- */
/* Buttons - Dark                               */
/* ------------------------------------------- */

.btn-dark {
    --bs-btn-color: #D1D6DF;
    --bs-btn-bg: #173360;
    --bs-btn-border-color: #173360;
    --bs-btn-hover-color: #D1D6DF;
    --bs-btn-hover-bg: #152E56;
    --bs-btn-hover-border-color: #152E56;
    background-color: #173360 !important;
    border-color: #173360 !important;
    color: #D1D6DF !important;
}

/* ------------------------------------------- */
/* Outline Buttons                              */
/* ------------------------------------------- */

.btn-outline-primary {
    --bs-btn-color: #173360;
    --bs-btn-border-color: #173360;
    --bs-btn-hover-color: #D1D6DF;
    --bs-btn-hover-bg: #173360;
    --bs-btn-hover-border-color: #173360;
    color: #173360 !important;
    border-color: #173360 !important;
    background-color: transparent !important;
}

.btn-outline-primary:hover {
    background-color: #173360 !important;
    color: #D1D6DF !important;
}

.btn-outline-secondary {
    --bs-btn-color: #6B7C99;
    --bs-btn-border-color: #6B7C99;
    --bs-btn-hover-color: #D1D6DF;
    --bs-btn-hover-bg: #6B7C99;
    color: #6B7C99 !important;
    border-color: #6B7C99 !important;
    background-color: transparent !important;
}

.btn-outline-success {
    --bs-btn-color: #005116;
    --bs-btn-border-color: #005116;
    --bs-btn-hover-color: #FFFFFF;
    --bs-btn-hover-bg: #005116;
    color: #005116 !important;
    border-color: #005116 !important;
    background-color: transparent !important;
}

.btn-outline-success:hover {
    background-color: #005116 !important;
    color: #FFFFFF !important;
}

.btn-outline-danger {
    --bs-btn-color: #AA1121;
    --bs-btn-border-color: #AA1121;
    --bs-btn-hover-color: #FFFFFF;
    --bs-btn-hover-bg: #AA1121;
    color: #AA1121 !important;
    border-color: #AA1121 !important;
    background-color: transparent !important;
}

.btn-outline-danger:hover {
    background-color: #AA1121 !important;
    color: #FFFFFF !important;
}

.btn-outline-warning {
    --bs-btn-color: #EEE431;
    --bs-btn-border-color: #EEE431;
    --bs-btn-hover-color: #000000;
    --bs-btn-hover-bg: #EEE431;
    color: #EEE431 !important;
    border-color: #EEE431 !important;
    background-color: transparent !important;
}

.btn-outline-warning:hover {
    background-color: #EEE431 !important;
    color: #000000 !important;
}

.btn-outline-info {
    --bs-btn-color: #8695AC;
    --bs-btn-border-color: #8695AC;
    --bs-btn-hover-color: #2F486F;
    --bs-btn-hover-bg: #8695AC;
    color: #8695AC !important;
    border-color: #8695AC !important;
    background-color: transparent !important;
}

/* ------------------------------------------- */
/* Background Utilities                         */
/* ------------------------------------------- */

.bg-primary { background-color: #173360 !important; color: #D1D6DF !important; }
.bg-secondary { background-color: #6B7C99 !important; color: #D1D6DF !important; }
.bg-success { background-color: #005116 !important; color: #FFFFFF !important; }
.bg-danger { background-color: #AA1121 !important; color: #FFFFFF !important; }
.bg-warning { background-color: #EEE431 !important; color: #000000 !important; }
.bg-info { background-color: #8695AC !important; color: #2F486F !important; }
.bg-light { background-color: #ECEFF2 !important; color: #2F486F !important; }
.bg-dark { background-color: #173360 !important; color: #D1D6DF !important; }
.bg-white { background-color: #FFFFFF !important; }
.bg-transparent { background-color: transparent !important; }

/* ------------------------------------------- */
/* Text Utilities                               */
/* ------------------------------------------- */

.text-primary { color: #173360 !important; }
.text-secondary { color: #6B7C99 !important; }
.text-success { color: #005116 !important; }
.text-danger { color: #AA1121 !important; }
.text-warning { color: #EEE431 !important; }
.text-info { color: #8695AC !important; }
.text-light { color: #C7CED9 !important; }
.text-dark { color: #173360 !important; }
.text-muted { color: #9EA9BC !important; }
.text-body { color: #2F486F !important; }
.text-white { color: #FFFFFF !important; }
.text-black { color: #000000 !important; }

/* ------------------------------------------- */
/* Badges                                       */
/* ------------------------------------------- */

.badge.bg-primary { background-color: #173360 !important; color: #D1D6DF !important; }
.badge.bg-secondary { background-color: #6B7C99 !important; color: #D1D6DF !important; }
.badge.bg-success { background-color: #005116 !important; color: #FFFFFF !important; }
.badge.bg-danger { background-color: #AA1121 !important; color: #FFFFFF !important; }
.badge.bg-warning { background-color: #EEE431 !important; color: #000000 !important; }
.badge.bg-info { background-color: #8695AC !important; color: #2F486F !important; }
.badge.bg-light { background-color: #ECEFF2 !important; color: #2F486F !important; }
.badge.bg-dark { background-color: #173360 !important; color: #D1D6DF !important; }

/* ------------------------------------------- */
/* Alerts                                       */
/* ------------------------------------------- */

.alert-primary {
    --bs-alert-color: #173360;
    --bs-alert-bg: rgba(23, 51, 96, 0.15);
    --bs-alert-border-color: #8695AC;
    background-color: rgba(23, 51, 96, 0.15) !important;
    border-color: #8695AC !important;
    color: #173360 !important;
}

.alert-secondary {
    --bs-alert-color: #4F6486;
    --bs-alert-bg: rgba(107, 124, 153, 0.15);
    --bs-alert-border-color: #9EA9BC;
    background-color: rgba(107, 124, 153, 0.15) !important;
    border-color: #9EA9BC !important;
    color: #4F6486 !important;
}

.alert-success {
    --bs-alert-color: #004112;
    --bs-alert-bg: rgba(0, 81, 22, 0.15);
    --bs-alert-border-color: #005116;
    background-color: rgba(0, 81, 22, 0.15) !important;
    border-color: #005116 !important;
    color: #004112 !important;
}

.alert-danger {
    --bs-alert-color: #880E1A;
    --bs-alert-bg: rgba(170, 17, 33, 0.15);
    --bs-alert-border-color: #AA1121;
    background-color: rgba(170, 17, 33, 0.15) !important;
    border-color: #AA1121 !important;
    color: #880E1A !important;
}

.alert-warning {
    --bs-alert-color: #777219;
    --bs-alert-bg: rgba(238, 228, 49, 0.15);
    --bs-alert-border-color: #EEE431;
    background-color: rgba(238, 228, 49, 0.15) !important;
    border-color: #EEE431 !important;
    color: #777219 !important;
}

.alert-info {
    --bs-alert-color: #4F6486;
    --bs-alert-bg: rgba(134, 149, 172, 0.15);
    --bs-alert-border-color: #B5BECC;
    background-color: rgba(134, 149, 172, 0.15) !important;
    border-color: #B5BECC !important;
    color: #4F6486 !important;
}

/* ------------------------------------------- */
/* Forms                                        */
/* ------------------------------------------- */

.form-control {
    background-color: #FFFFFF;
    border-color: #C7CED9;
    color: #2F486F;
}

.form-control:focus,
.form-select:focus {
    border-color: #8695AC !important;
    box-shadow: 0 0 0 0.25rem rgba(23, 51, 96, 0.25) !important;
}

.form-control:disabled,
.form-control[readonly] {
    background-color: #DADEE6;
}

.form-select {
    background-color: #FFFFFF;
    border-color: #C7CED9;
    color: #2F486F;
}

.form-check-input:checked {
    background-color: #173360 !important;
    border-color: #173360 !important;
}

.form-check-input:focus {
    border-color: #8695AC;
    box-shadow: 0 0 0 0.25rem rgba(23, 51, 96, 0.25);
}

.form-switch .form-check-input:checked {
    background-color: #173360;
}

.input-group-text {
    background-color: #ECEFF2;
    border-color: #C7CED9;
    color: #2F486F;
}

.form-label {
    color: #2F486F;
}

/* ------------------------------------------- */
/* Cards                                        */
/* ------------------------------------------- */

.card {
    --bs-card-border-color: #C7CED9;
    --bs-card-cap-bg: #ECEFF2;
    background-color: #FFFFFF !important;
    border-color: #C7CED9 !important;
    color: #2F486F;
}

.card-header {
    background-color: #ECEFF2 !important;
    border-bottom-color: #C7CED9 !important;
    color: #2F486F;
}

.card-footer {
    background-color: #ECEFF2;
    border-top-color: #C7CED9;
}

/* ------------------------------------------- */
/* Tables                                       */
/* ------------------------------------------- */

.table {
    --bs-table-bg: transparent;
    --bs-table-color: #2F486F;
    --bs-table-border-color: #C7CED9;
    --bs-table-striped-bg: rgba(236, 239, 242, 0.5);
    --bs-table-hover-bg: rgba(218, 222, 230, 0.5);
    color: #2F486F;
    border-color: #C7CED9;
}

.table > thead {
    color: #2F486F;
}

.table-striped > tbody > tr:nth-of-type(odd) > * {
    background-color: rgba(236, 239, 242, 0.5) !important;
    --bs-table-accent-bg: rgba(236, 239, 242, 0.5);
}

.table-hover > tbody > tr:hover > * {
    background-color: rgba(218, 222, 230, 0.5) !important;
    --bs-table-accent-bg: rgba(218, 222, 230, 0.5);
}

.table-primary {
    --bs-table-bg: rgba(23, 51, 96, 0.2);
    --bs-table-color: #2F486F;
}

.table-dark {
    --bs-table-bg: #173360;
    --bs-table-color: #D1D6DF;
}

/* ------------------------------------------- */
/* Navigation                                   */
/* ------------------------------------------- */

.nav-link {
    color: #173360;
}

.nav-link:hover,
.nav-link:focus {
    color: #4F6486;
}

.nav-link.active {
    color: #173360;
}

.nav-pills .nav-link.active {
    background-color: #173360 !important;
    color: #D1D6DF !important;
}

.nav-tabs .nav-link.active {
    color: #173360;
    border-color: #C7CED9 #C7CED9 #FFFFFF;
}

/* ------------------------------------------- */
/* Navbar                                       */
/* ------------------------------------------- */

.navbar {
    background-color: #173360 !important;
}

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

.navbar .nav-link:hover {
    color: #C7CED9 !important;
}

.navbar-brand {
    color: #D1D6DF !important;
}

/* ------------------------------------------- */
/* Pagination                                   */
/* ------------------------------------------- */

.pagination {
    --bs-pagination-color: #173360;
    --bs-pagination-bg: #FFFFFF;
    --bs-pagination-border-color: #C7CED9;
    --bs-pagination-hover-color: #152E56;
    --bs-pagination-hover-bg: #ECEFF2;
    --bs-pagination-hover-border-color: #C7CED9;
    --bs-pagination-focus-color: #173360;
    --bs-pagination-focus-bg: #ECEFF2;
    --bs-pagination-active-color: #D1D6DF;
    --bs-pagination-active-bg: #173360;
    --bs-pagination-active-border-color: #173360;
    --bs-pagination-disabled-color: #9EA9BC;
    --bs-pagination-disabled-bg: #FFFFFF;
    --bs-pagination-disabled-border-color: #C7CED9;
}

.page-link {
    color: #173360;
}

.page-item.active .page-link {
    background-color: #173360 !important;
    border-color: #173360 !important;
    color: #D1D6DF !important;
}

/* ------------------------------------------- */
/* List Groups                                  */
/* ------------------------------------------- */

.list-group {
    --bs-list-group-border-color: #C7CED9;
    --bs-list-group-active-bg: #173360;
    --bs-list-group-active-color: #D1D6DF;
    --bs-list-group-active-border-color: #173360;
    --bs-list-group-action-hover-bg: #ECEFF2;
}

.list-group-item {
    background-color: #FFFFFF;
    border-color: #C7CED9;
    color: #2F486F;
}

.list-group-item.active {
    background-color: #173360 !important;
    border-color: #173360 !important;
    color: #D1D6DF !important;
}

/* ------------------------------------------- */
/* Dropdowns                                    */
/* ------------------------------------------- */

.dropdown-menu {
    --bs-dropdown-bg: #FFFFFF;
    --bs-dropdown-border-color: #C7CED9;
    --bs-dropdown-link-color: #2F486F;
    --bs-dropdown-link-hover-color: #173360;
    --bs-dropdown-link-hover-bg: #ECEFF2;
    --bs-dropdown-link-active-color: #D1D6DF;
    --bs-dropdown-link-active-bg: #173360;
    background-color: #FFFFFF;
    border-color: #C7CED9;
}

.dropdown-item {
    color: #2F486F;
}

.dropdown-item:hover,
.dropdown-item:focus {
    background-color: #ECEFF2;
    color: #173360;
}

.dropdown-item.active,
.dropdown-item:active {
    background-color: #173360 !important;
    color: #D1D6DF !important;
}

/* ------------------------------------------- */
/* Modals                                       */
/* ------------------------------------------- */

.modal-content {
    background-color: #FFFFFF !important;
    border-color: #C7CED9;
    color: #2F486F;
}

.modal-header {
    border-bottom-color: #C7CED9;
}

.modal-footer {
    border-top-color: #C7CED9;
}

/* ------------------------------------------- */
/* Accordion                                    */
/* ------------------------------------------- */

.accordion {
    --bs-accordion-bg: #FFFFFF;
    --bs-accordion-border-color: #C7CED9;
    --bs-accordion-active-color: #173360;
    --bs-accordion-active-bg: rgba(23, 51, 96, 0.1);
    --bs-accordion-btn-color: #2F486F;
    --bs-accordion-btn-bg: #ECEFF2;
}

.accordion-button {
    background-color: #DADEE6 !important;
    color: #9EA9BC !important;
}

.accordion-button:not(.collapsed) {
    color: #173360 !important;
    background-color: rgba(23, 51, 96, 0.1) !important;
}

.accordion-header {
    background-color: #DADEE6;
    color: #9EA9BC;
}

.accordion-item {
    background-color: #FFFFFF;
    border-color: #C7CED9;
}

/* ------------------------------------------- */
/* Progress                                     */
/* ------------------------------------------- */

.progress {
    --bs-progress-bg: #DADEE6;
    --bs-progress-bar-bg: #173360;
    background-color: #DADEE6;
}

.progress-bar {
    background-color: #173360;
}

/* ------------------------------------------- */
/* Spinners                                     */
/* ------------------------------------------- */

.spinner-border.text-primary,
.spinner-grow.text-primary {
    color: #173360 !important;
}

/* ------------------------------------------- */
/* Breadcrumb                                   */
/* ------------------------------------------- */

.breadcrumb {
    --bs-breadcrumb-divider-color: #9EA9BC;
}

.breadcrumb-item a {
    color: #173360;
}

.breadcrumb-item a:hover {
    color: #152E56;
}

.breadcrumb-item.active {
    color: #9EA9BC;
}

/* ------------------------------------------- */
/* Tooltips & Popovers                          */
/* ------------------------------------------- */

.tooltip {
    --bs-tooltip-bg: #173360;
    --bs-tooltip-color: #D1D6DF;
}

.popover {
    --bs-popover-bg: #FFFFFF;
    --bs-popover-border-color: #C7CED9;
    --bs-popover-header-bg: #ECEFF2;
}

/* ------------------------------------------- */
/* Close Button                                 */
/* ------------------------------------------- */

.btn-close {
    filter: invert(0);
}


/* ================================================== */
/*                                                    */
/*   SECTIE 4: APP COMPONENT STYLING                  */
/*                                                    */
/* ================================================== */

/* ------------------------------------------- */
/* App Header                                   */
/* ------------------------------------------- */

.app-header {
    background: var(--bs-app-header-bg) !important;
}

.app-header .menu .menu-item .menu-link {
    color: var(--bs-app-header-link-color) !important;
}

.app-header .menu .menu-item .menu-link:hover,
.app-header .menu .menu-item .menu-link:focus {
    color: var(--bs-app-header-link-hover-color) !important;
}

/* ------------------------------------------- */
/* App Sidebar                                  */
/* ------------------------------------------- */

.app-sidebar {
    background: var(--bs-app-sidebar-bg) !important;
}

.app-sidebar .app-sidebar-content .menu .menu-header {
    color: var(--bs-app-sidebar-menu-header-color) !important;
}

.app-sidebar .app-sidebar-content .menu .menu-item .menu-link {
    color: var(--bs-app-sidebar-menu-link-color) !important;
}

.app-sidebar .app-sidebar-content .menu .menu-item .menu-link:hover,
.app-sidebar .app-sidebar-content .menu .menu-item .menu-link:focus {
    color: var(--bs-app-sidebar-menu-link-hover-color) !important;
}

.app-sidebar .app-sidebar-content .menu .menu-item.active:not(.has-sub) > .menu-link {
    color: var(--bs-app-sidebar-menu-link-active-color) !important;
}

.app-sidebar .app-sidebar-content .menu .menu-item.active > .menu-link .menu-icon {
    color: var(--bs-theme) !important;
}

/* ------------------------------------------- */
/* App Top Nav                                  */
/* ------------------------------------------- */

.app-top-nav {
    background: var(--bs-app-top-nav-bg) !important;
}

.app-top-nav .menu .menu-item .menu-link {
    color: var(--bs-app-top-nav-menu-link-color) !important;
}

.app-top-nav .menu .menu-item .menu-link:hover {
    color: var(--bs-app-top-nav-menu-link-hover-color) !important;
}

.app-top-nav .menu .menu-item .menu-link.active {
    color: var(--bs-app-top-nav-menu-link-active-color) !important;
}


/* ================================================== */
/*                                                    */
/*   SECTIE 5: CUSTOM CASHAIR UTILITIES               */
/*                                                    */
/* ================================================== */

/* ------------------------------------------- */
/* Shade Backgrounds                            */
/* ------------------------------------------- */

.bg-shade-100 { background-color: #173360 !important; color: #D1D6DF !important; }
.bg-shade-90 { background-color: #334B73 !important; color: #D1D6DF !important; }
.bg-shade-80 { background-color: #4F6486 !important; color: #D1D6DF !important; }
.bg-shade-70 { background-color: #6B7C99 !important; color: #D1D6DF !important; }
.bg-shade-60 { background-color: #8695AC !important; color: #2F486F !important; }
.bg-shade-50 { background-color: #9EA9BC !important; color: #2F486F !important; }
.bg-shade-40 { background-color: #B5BECC !important; color: #2F486F !important; }
.bg-shade-30 { background-color: #C7CED9 !important; color: #2F486F !important; }
.bg-shade-20 { background-color: #DADEE6 !important; color: #2F486F !important; }
.bg-shade-10 { background-color: #ECEFF2 !important; color: #2F486F !important; }

/* ------------------------------------------- */
/* Text Shade Utilities                         */
/* ------------------------------------------- */

.text-theme { color: #9EA9BC !important; }
.text-lichter { color: #DADEE6 !important; }
.text-donker { color: #334B73 !important; }
.tekst1 { color: #4F6486 !important; }

/* ------------------------------------------- */
/* Custom Button Styles                         */
/* ------------------------------------------- */

.btn-vol {
    background-color: #173360 !important;
    color: #DADEE6 !important;
    border: none !important;
}

.btn-vol:hover,
.btn-vol:focus {
    background-color: #8695AC !important;
    color: #173360 !important;
    border: 1px solid #173360 !important;
}

.btn-leeg {
    background-color: #C7CED9 !important;
    color: #173360 !important;
    border: 1px solid #173360 !important;
}

.btn-leeg:hover,
.btn-leeg:focus {
    background-color: #4F6486 !important;
    color: #173360 !important;
    border: 1px solid #DADEE6 !important;
}

/* ------------------------------------------- */
/* Custom Background Accents                    */
/* ------------------------------------------- */

.text-accent-bg-licht {
    background-color: #B5BECC !important;
    color: #173360 !important;
}

.bg-accent1 {
    color: #C7CED9 !important;
    background-color: #4F6486 !important;
}

.bg-accent1:hover {
    color: #4F6486 !important;
    background-color: #C7CED9 !important;
    border: 1px solid #334B73 !important;
}

.bg-accent1-inactive {
    color: #C7CED9 !important;
    background-color: #4F6486 !important;
}

.bg-accent2 {
    color: #9EA9BC !important;
    background-color: #ECEFF2 !important;
}

.bg-accent3 {
    color: #4F6486 !important;
    background-color: #ECEFF2 !important;
}

.alert-accent1 {
    color: #C7CED9 !important;
    background-color: #4F6486 !important;
}

/* ------------------------------------------- */
/* Custom Badge Styles                          */
/* ------------------------------------------- */

.badge1 {
    color: #ECEFF2 !important;
    background-color: #334B73 !important;
}

.badge1:hover {
    color: #334B73 !important;
    background-color: #ECEFF2 !important;
    border: 0.4px solid #334B73 !important;
}

.badge1-invert {
    color: #334B73 !important;
    background-color: #ECEFF2 !important;
}

.badge-warning {
    color: #173360 !important;
    background-color: #F4661D !important;
}

/* ------------------------------------------- */
/* Custom Alert Styles                          */
/* ------------------------------------------- */

.alert-info {
    color: #6B7C99 !important;
    background-color: #ECEFF2 !important;
    border: 1px solid #334B73 !important;
}

/* ------------------------------------------- */
/* Border Utilities                             */
/* ------------------------------------------- */

.border-primary { border-color: #173360 !important; }
.border-secondary { border-color: #6B7C99 !important; }
.border-success { border-color: #005116 !important; }
.border-danger { border-color: #AA1121 !important; }
.border-warning { border-color: #EEE431 !important; }
.border-info { border-color: #8695AC !important; }
.border-light { border-color: #C7CED9 !important; }
.border-dark { border-color: #173360 !important; }

.border3 {
    border: 2px solid #334B73 !important;
}

/* ------------------------------------------- */
/* Link Styles                                  */
/* ------------------------------------------- */

a.ticket-link {
    color: #173360;
    text-decoration: none;
}

a.ticket-link:hover,
a.ticket-link:focus {
    color: #173360;
    text-decoration: underline;
}

a.ticket-link:active {
    color: #173360;
    text-decoration: none;
}

/* ------------------------------------------- */
/* Button Group                                 */
/* ------------------------------------------- */

.btn-group {
    color: #6B7C99 !important;
    background-color: #ECEFF2 !important;
    border: 0.6px solid #334B73 !important;
}

.active {
    color: #6B7C99 !important;
}

/* ------------------------------------------- */
/* Focus Ring                                   */
/* ------------------------------------------- */

.focus-ring-primary:focus {
    box-shadow: 0 0 0 0.25rem rgba(23, 51, 96, 0.25) !important;
}


/* ================================================== */
/*                                                    */
/*   SECTIE 6: DATATABLE STYLING                      */
/*                                                    */
/* ================================================== */

.dataTables_wrapper .dataTables_paginate .paginate_button.current {
    background: #173360 !important;
    border-color: #173360 !important;
    color: #D1D6DF !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
    background: #ECEFF2 !important;
    border-color: #C7CED9 !important;
    color: #173360 !important;
}

.dataTables_wrapper .dataTables_filter input {
    border-color: #C7CED9;
}

.dataTables_wrapper .dataTables_filter input:focus {
    border-color: #173360;
    box-shadow: 0 0 0 0.25rem rgba(23, 51, 96, 0.25);
}


/* ================================================== */
/*                                                    */
/*   SECTIE 7: POS STYLING (KASSA)                    */
/*                                                    */
/* ================================================== */

html body #app .pos,
html body .pos,
.pos {
    background-color: transparent !important;
    background: transparent !important;
}

html body #app .pos-container,
html body .pos-container,
.pos-container {
    background-color: transparent !important;
    background: transparent !important;
}

html body #app .pos-menu,
html body .pos-menu,
.pos-menu {
    background-color: transparent !important;
    background: transparent !important;
    border-color: #C7CED9 !important;
}

html body #app .pos-menu .nav-container,
html body .pos-menu .nav-container,
.pos-menu .nav-container {
    background-color: transparent !important;
    background: transparent !important;
}

.pos-menu .nav-tabs {
    border: none !important;
    background: transparent !important;
}

html body #app .pos-menu .nav-item,
html body .pos-menu .nav-item,
.pos-menu .nav-item {
    background: transparent !important;
    background-color: transparent !important;
}

html body #app .pos-menu .nav-item .nav-link,
html body .pos-menu .nav-item .nav-link,
.pos-menu .nav-link {
    color: #2F486F !important;
    background: transparent !important;
    background-color: transparent !important;
    border: none !important;
    padding: 0.5rem !important;
}

html body #app .pos-menu .nav-link .card:not([style*="background"]),
html body .pos-menu .nav-link .card:not([style*="background"]),
.pos-menu .nav-link .card:not([style*="background"]) {
    background-color: transparent !important;
    background: transparent !important;
    border: none !important;
    margin: 0 !important;
    transition: all 0.2s ease !important;
}

html body #app .pos-menu .nav-link .card:not([style*="background"]) .card-body,
html body .pos-menu .nav-link .card:not([style*="background"]) .card-body,
.pos-menu .nav-link .card:not([style*="background"]) .card-body {
    background-color: transparent !important;
    background: transparent !important;
    color: #2F486F !important;
    padding: 1rem !important;
}

.pos-menu .nav-link:hover .card,
.pos-menu .nav-link.active .card {
    /* Geen border wijziging bij hover/active */
}

.pos-menu .nav-link .card-arrow {
    z-index: 10 !important;
}

.pos-menu .nav-link .card-arrow-top-left,
.pos-menu .nav-link .card-arrow-top-right,
.pos-menu .nav-link .card-arrow-bottom-left,
.pos-menu .nav-link .card-arrow-bottom-right {
    background-color: transparent !important;
}

.pos-menu .nav-link .card-arrow-top-left::before,
.pos-menu .nav-link .card-arrow-top-left::after,
.pos-menu .nav-link .card-arrow-top-right::before,
.pos-menu .nav-link .card-arrow-top-right::after,
.pos-menu .nav-link .card-arrow-bottom-left::before,
.pos-menu .nav-link .card-arrow-bottom-left::after,
.pos-menu .nav-link .card-arrow-bottom-right::before,
.pos-menu .nav-link .card-arrow-bottom-right::after {
    background-color: #9EA9BC !important;
}

/* Logo in pos-menu */
.pos-menu .logo {
    background: transparent !important;
}

.pos-sidebar {
    background-color: transparent !important;
    border-color: #C7CED9 !important;
}

.pos-content {
    background-color: transparent !important;
}

.pos-content-container {
    background-color: transparent !important;
}

/* Hoofdkaart van POS */
.pos.card {
    background-color: transparent !important;
    border: none !important;
    --km-card-bg: transparent;
}

.pos.card > .card-arrow {
    z-index: 10 !important;
}

.pos.card > .card-arrow .card-arrow-top-left,
.pos.card > .card-arrow .card-arrow-top-right,
.pos.card > .card-arrow .card-arrow-bottom-left,
.pos.card > .card-arrow .card-arrow-bottom-right {
    background-color: transparent !important;
}

.pos.card > .card-arrow .card-arrow-top-left::before,
.pos.card > .card-arrow .card-arrow-top-left::after,
.pos.card > .card-arrow .card-arrow-top-right::before,
.pos.card > .card-arrow .card-arrow-top-right::after,
.pos.card > .card-arrow .card-arrow-bottom-left::before,
.pos.card > .card-arrow .card-arrow-bottom-left::after,
.pos.card > .card-arrow .card-arrow-bottom-right::before,
.pos.card > .card-arrow .card-arrow-bottom-right::after {
    background-color: #9EA9BC !important;
}

/* Cards binnen pos-content - check op element zelf */
.pos-content .card:not([style*="background"]) {
    background-color: transparent !important;
    border: none !important;
}

.pos-content .card .card-header:not([style*="background"]) {
    background-color: transparent !important;
    border: none !important;
}

.pos-content .card .card-body:not([style*="background"]) {
    background-color: transparent !important;
}

/* Card-arrow styling voor pos-content */
.pos-content .card .card-arrow {
    z-index: 10 !important;
}

.pos-content .card .card-arrow-top-left,
.pos-content .card .card-arrow-top-right,
.pos-content .card .card-arrow-bottom-left,
.pos-content .card .card-arrow-bottom-right {
    background-color: transparent !important;
}

.pos-content .card .card-arrow-top-left::before,
.pos-content .card .card-arrow-top-left::after,
.pos-content .card .card-arrow-top-right::before,
.pos-content .card .card-arrow-top-right::after,
.pos-content .card .card-arrow-bottom-left::before,
.pos-content .card .card-arrow-bottom-left::after,
.pos-content .card .card-arrow-bottom-right::before,
.pos-content .card .card-arrow-bottom-right::after {
    background-color: #9EA9BC !important;
}


/* ================================================== */
/*                                                    */
/*   SECTIE 8: PRINT STYLES                           */
/*                                                    */
/* ================================================== */

@media print {
    body {
        background-color: #FFFFFF !important;
        color: #000000 !important;
    }
    
    .btn, .badge, .alert {
        border: 1px solid #000000 !important;
    }
    
    a {
        color: #000000 !important;
        text-decoration: underline !important;
    }
}


/* ================================================== */
/*                                                    */
/*   EINDE MASTER STYLESHEET                          */
/*                                                    */
/* ================================================== */