/* Integration contracts only. Metronic owns native component appearance. */
html { font-size: var(--mkp-root-font-size) !important; }
body { font-size: var(--mkp-font-size) !important; font-family: var(--mkp-font); line-height: var(--mkp-line-height); }
:root {
    --bs-primary-inverse: var(--mkp-on-primary);
    --bs-primary-active: var(--mkp-primary-active);
    --bs-primary-light: var(--mkp-nav-active-bg);
    --bs-text-primary: var(--mkp-link);
    --bs-primary-text-emphasis: var(--mkp-link);
    --bs-primary-bg-subtle: var(--mkp-nav-active-bg);
    --bs-primary-border-subtle: var(--mkp-nav-active-bg);
    --bs-component-active-bg: var(--mkp-primary);
    --bs-component-active-color: var(--mkp-on-primary);
    --bs-app-bg-color: var(--mkp-background);
    --bs-app-blank-bg-color: var(--mkp-background);
}
/* The tenant may use a light primary color. Preserve computed contrast in
   every state without replacing Metronic's button sizing or other variants. */
.btn.btn-primary:not(.btn-active):is(:hover, :focus) {
    color: var(--mkp-on-primary-hover);
    border-color: var(--mkp-primary-hover);
    background-color: var(--mkp-primary-hover) !important;
}
.btn.btn-primary:not(.btn-active):is(:active, .active, .show), .btn-check:is(:checked, :active) + .btn.btn-primary {
    color: var(--mkp-on-primary-active);
    border-color: var(--mkp-primary-active);
    background-color: var(--mkp-primary-active) !important;
}
.btn.btn-primary:is(:disabled, .disabled), .btn-check:disabled + .btn.btn-primary {
    color: var(--mkp-on-primary);
    border-color: var(--mkp-primary);
    background-color: var(--mkp-primary) !important;
}
.btn.btn-primary i, .btn.btn-primary .svg-icon { color: inherit !important; }

/* Metronic text utilities and native navigation also consume tenant colors.
   Text uses the helper's readable link color; filled states use OnPrimary. */
.nav-pills { --bs-nav-pills-link-active-bg: var(--mkp-primary); --bs-nav-pills-link-active-color: var(--mkp-on-primary); }
.nav-tabs { --bs-nav-tabs-link-active-color: var(--mkp-link); }
.nav-line-tabs .nav-link:not(.btn) { --bs-primary: var(--mkp-link); }
.btn-outline-primary {
    --bs-btn-color: var(--mkp-link);
    --bs-btn-border-color: var(--mkp-link);
    --bs-btn-hover-color: var(--mkp-on-primary-hover);
    --bs-btn-hover-bg: var(--mkp-primary-hover);
    --bs-btn-hover-border-color: var(--mkp-primary-hover);
    --bs-btn-active-color: var(--mkp-on-primary-active);
    --bs-btn-active-bg: var(--mkp-primary-active);
    --bs-btn-active-border-color: var(--mkp-primary-active);
    --bs-btn-disabled-color: var(--mkp-link);
    --bs-btn-disabled-border-color: var(--mkp-link);
}
.btn.btn-outline.btn-outline-primary, .btn.btn-outline.btn-outline-primary:is(:disabled, .disabled) { color: var(--mkp-link); border-color: var(--mkp-link); }
.btn.btn-outline.btn-outline-primary:not(.btn-active):is(:hover, :focus, :active, .active, .show), .btn-check:is(:checked, :active) + .btn.btn-outline.btn-outline-primary { color: var(--mkp-nav-active-color); }
.btn-outline-primary i, .btn-outline-primary .svg-icon { color: inherit !important; }
.btn.btn-light-primary, .btn.btn-light-primary:is(:disabled, .disabled) { color: var(--mkp-nav-active-color); }
.btn.btn-light-primary i, .btn.btn-light-primary .svg-icon { color: inherit !important; }
.link-primary { color: rgba(var(--mkp-link-rgb), var(--bs-link-opacity, 1)) !important; text-decoration-color: rgba(var(--mkp-link-rgb), var(--bs-link-underline-opacity, 1)) !important; }
.link-primary:is(:hover, :focus) { color: rgba(var(--mkp-link-hover-rgb), var(--bs-link-opacity, 1)) !important; text-decoration-color: rgba(var(--mkp-link-hover-rgb), var(--bs-link-underline-opacity, 1)) !important; }

/* Retain layering of the installed MVC dialogs and detached plugin popups. */
.modal-backdrop { z-index: 1050; }
.modal-open .modal { z-index: 1055; }
.swal2-container { z-index: 20000; }
.select2-dropdown { z-index: 1060; }
.editable-container.popover { z-index: 1070; }
.iti, .intl-tel-input, .country-select { max-width: 100%; }

/* Existing read-only fields place their edit action beside label/value.
   Preserve areas, responsive wrapping and DOM/tab order, without recoloring. */
.card dl dd { overflow-wrap: anywhere; }
.card div.form-control-plaintext { min-width: 0; min-height: 0; padding-block: .125rem; overflow-wrap: anywhere; }
.card .d-flex.flex-column:has(> div.form-control-plaintext):has(> span > .btn) {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "label action" "value action";
    column-gap: .75rem !important;
    align-items: start;
}
.card .d-flex.flex-column:has(> div.form-control-plaintext):has(> span > .btn) > label { grid-area: label; margin-bottom: 0; }
.card .d-flex.flex-column:has(> span > .btn) > div.form-control-plaintext { grid-area: value; }
.card .d-flex.flex-column:has(> div.form-control-plaintext) > span:has(> .btn) { grid-area: action; align-self: center !important; }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; transition-duration: .01ms !important; }
}