:root, [data-theme="light"] {
    --tenant-primary-light: color-mix(in srgb, var(--tenant-primary) 5%, #ffffffa0 95%);

    --bs-info: var(--tenant-primary);
    --bs-info-active: var(--tenant-hover);
    --bs-text-info: var(--tenant-primary);
    --bs-info-light: var(--tenant-primary-light);
    --bs-btn-bg: var(--tenant-primary);
    --bs-btn-border-color: var(--tenant-primary);
    --bs-btn-hover-bg: var(--tenant-hover);
    --bs-btn-hover-border-color: var(--tenant-hover);
    --bs-btn-active-bg: var(--tenant-hover);
    --bs-btn-active-border-color: var(--tenant-hover);
    --bs-btn-disabled-bg: var(--tenant-primary);
    --bs-btn-disabled-border-color: var(--tenant-primary);
    --bs-btn-color: #ffffff;
    --bs-btn-hover-color: #ffffff;
    --bs-btn-active-color: #ffffff;
    --bs-btn-disabled-color: #ffffff;
    --bs-accordion-btn-color: var(--tenant-primary);
    --bs-accordion-active-color: var(--tenant-primary);
    --bs-accordion-active-bg: var(--tenant-primary-light);
    --bs-accordion-btn-focus-box-shadow: 0 0 0 .25rem color-mix(in srgb, var(--tenant-primary) 25%, transparent 75%);
    --kt-info: var(--tenant-primary);
    --kt-info-active: var(--tenant-hover);
    --kt-info-light: var(--tenant-primary-light);
    --kt-form-check-input-checked-bg-color: var(--tenant-primary);
    --kt-form-check-input-checked-border-color: var(--tenant-hover);
}

[data-theme="dark"],
[data-bs-theme="dark"],
[data-bs-theme="light"] {
    --tenant-primary-light: color-mix(in srgb, var(--tenant-primary) 10%, #0000 90%) !important;
    --bs-info-active: var(--tenant-hover) !important;
    --bs-info-light: var(--tenant-primary-light) !important;
    --bs-btn-bg: var(--tenant-primary) !important;
    --bs-btn-border-color: var(--tenant-primary) !important;
    --bs-btn-hover-bg: var(--tenant-hover) !important;
    --bs-btn-hover-border-color: var(--tenant-hover) !important;
    --bs-btn-active-bg: var(--tenant-hover) !important;
    --bs-btn-active-border-color: var(--tenant-hover) !important;
    --bs-btn-disabled-bg: var(--tenant-primary) !important;
    --bs-btn-disabled-border-color: var(--tenant-primary) !important;
    --bs-btn-color: #ffffff !important;
    --bs-btn-hover-color: #ffffff !important;
    --bs-btn-active-color: #ffffff !important;
    --bs-btn-disabled-color: #ffffff !important;
    --kt-info: var(--tenant-primary) !important;
    --bs-accordion-btn-color: var(--tenant-primary) !important;
    --bs-accordion-active-color: var(--tenant-primary) !important;
    --bs-accordion-active-bg: var(--tenant-primary-light) !important;
    --bs-accordion-btn-focus-box-shadow: 0 0 0 .25rem color-mix(in srgb, var(--tenant-primary) 25%, transparent 75%) !important;
    --kt-info-active: var(--tenant-hover) !important;
    --kt-info-light: var(--tenant-primary-light) !important;
    --kt-form-check-input-checked-bg-color: var(--tenant-primary) !important;
    --kt-form-check-input-checked-border-color: var(--tenant-hover) !important;
}

.btn-info {
    --bs-btn-bg: var(--tenant-primary) !important;
    --bs-btn-border-color: var(--tenant-primary) !important;
    --bs-btn-hover-bg: var(--tenant-hover) !important;
    --bs-btn-hover-border-color: var(--tenant-hover) !important;
    --bs-btn-active-bg: var(--tenant-hover) !important;
    --bs-btn-active-border-color: var(--tenant-hover) !important;
    --bs-btn-disabled-bg: var(--tenant-primary) !important;
    --bs-btn-disabled-border-color: var(--tenant-primary) !important;
    --bs-btn-color: #ffffff !important;
    --bs-btn-hover-color: #ffffff !important;
    --bs-btn-active-color: #ffffff !important;
    --bs-btn-disabled-color: #ffffff !important;
}

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

.btn.btn-text-info:hover,
.btn.btn-text-info:focus,
.btn.btn-text-info:active,
#btn_toggle_notes_height:hover,
#btn_toggle_notes_height:focus,
#btn_toggle_notes_height:active {
    color: var(--tenant-primary) !important;
    background-color: color-mix(in srgb, var(--tenant-primary) 8%, #ffffff 12%) !important;
    border-color: transparent !important;
}

.text-info,
.bs-text-info,
.kt-text-info,
[class*="kt-text-info"] {
    color: var(--tenant-primary) !important;
}

.kt-text-info:hover,
.kt-text-info:focus,
.kt-text-info:active,
[class*="kt-text-info"]:hover,
[class*="kt-text-info"]:focus,
[class*="kt-text-info"]:active,
a.kt-text-info,
a.kt-text-info:hover,
a.kt-text-info:focus,
a.kt-text-info:active,
button.kt-text-info,
button.kt-text-info:hover,
button.kt-text-info:focus,
button.kt-text-info:active {
    color: var(--tenant-primary) !important;
}

.active > .page-link,
.page-link.active {
    background-color: var(--tenant-primary) !important;
    border-color: var(--tenant-primary) !important;
    color: #ffffff !important;
}

.active > .page-link:hover,
.page-link.active:hover {
    background-color: var(--tenant-hover) !important;
    border-color: var(--tenant-hover) !important;
    color: #ffffff !important;
}

.accordion-button:hover,
.accordion-button:not(.collapsed):hover {
    color: var(--tenant-hover) !important;
}

.accordion-button:not(.collapsed) {
    color: var(--tenant-primary) !important;
    background-color: var(--tenant-primary-light) !important;
}

.bg-tenantPrimary {
    background-color: var(--tenant-panel) !important;
}

/*.bg-tenantSecondary, .menu-link.active {*/
/*    background-color: var(--tenant-secondary) !important;*/
/*}*/







/* dark mode specific stuff */

[data-theme="dark"] .bg-light-info,
[data-theme="dark"] .badge-light-info,
[data-theme="dark"] [style*="var(--kt-info-light)"] {
    background-color: var(--kt-info-light) !important;
}

[data-theme="dark"] .btn.btn-text-info:hover,
[data-theme="dark"] .btn.btn-text-info:focus,
[data-theme="dark"] .btn.btn-text-info:active,
[data-theme="dark"] #btn_toggle_notes_height:hover,
[data-theme="dark"] #btn_toggle_notes_height:focus,
[data-theme="dark"] #btn_toggle_notes_height:active,
[data-bs-theme="dark"] .btn.btn-text-info:hover,
[data-bs-theme="dark"] .btn.btn-text-info:focus,
[data-bs-theme="dark"] .btn.btn-text-info:active,
[data-bs-theme="dark"] #btn_toggle_notes_height:hover,
[data-bs-theme="dark"] #btn_toggle_notes_height:focus,
[data-bs-theme="dark"] #btn_toggle_notes_height:active {
    background-color: color-mix(in srgb, #0a0a10 86%, var(--tenant-primary) 14%) !important;
}

[data-theme="dark"] #workflow_infos {
    background-color: var(--kt-info-light) !important;
}

[data-theme="dark"] .card {
    background-color: color-mix(in srgb, #0a0a0f 97%, var(--tenant-primary) 3%) !important;
}

[data-theme="dark"] input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]),
[data-theme="dark"] textarea,
[data-theme="dark"] select,
[data-theme="dark"] .form-control,
[data-theme="dark"] .form-select,
[data-theme="dark"] .form-control.form-control-solid,
[data-theme="dark"] .form-select.form-select-solid,
[data-theme="dark"] .input-group-text {
    background-color: color-mix(in srgb, #0a0a10 92%, var(--tenant-primary) 8%) !important;
}

[data-theme="dark"] .accordion-item {
    border-color: color-mix(in srgb, #2a2a35 92%, var(--tenant-primary) 8%) !important;
    background-color: color-mix(in srgb, #0a0a10 97%, var(--tenant-primary) 3%) !important;
}

[data-theme="dark"] .accordion-button {
    color: color-mix(in srgb, #e7e7f2 98%, var(--tenant-primary) 2%) !important;
    background-color: color-mix(in srgb, #0a0a10 95%, var(--tenant-primary) 5%) !important;
}

[data-theme="dark"] .accordion-button:hover {
    color: color-mix(in srgb, #f1f1fa 90%, var(--tenant-primary) 10%) !important;
    background-color: color-mix(in srgb, #0a0a10 91%, var(--tenant-primary) 9%) !important;
}

[data-theme="dark"] .accordion-button:not(.collapsed) {
    color: color-mix(in srgb, #f4f4fd 80%, var(--tenant-primary) 20%) !important;
    background-color: color-mix(in srgb, #0a0a10 88%, var(--tenant-primary) 12%) !important;
    box-shadow: inset 0 -1px 0 color-mix(in srgb, #24242b 78%, var(--tenant-primary) 22%) !important;
}

[data-theme="dark"] .accordion-body {
    background-color: color-mix(in srgb, #0a0a10 99%, var(--tenant-primary) 1%) !important;
}

/* Icônes data externes (Pappers, CreditSafe) : <img> externe n’est pas coloriable par fill/color ;
   le masque + fond applique --tenant-primary. --external-client-icon: url("…") requis (Twig). */
.externalClientDataLink {
    display: inline-block;
    flex-shrink: 0;
    vertical-align: middle;
    width: 1em;
    height: 1em;
    background-color: var(--tenant-primary);
    -webkit-mask: var(--external-client-icon) no-repeat center / contain;
    mask: var(--external-client-icon) no-repeat center / contain;
}