/* UPKEO loaders.
   Surcharge couleur autorisee: --upkeo-loader-card-bg et --upkeo-loader-card-border. */
:root {
    --upkeo-spinner-color: var(--upkeo-theme-primary, #0d6efd);
    --upkeo-spinner-track: var(--upkeo-theme-primary-soft, rgba(13, 110, 253, .18));
    --upkeo-spinner-surface: var(--upkeo-theme-surface-elevated, rgba(255, 255, 255, .96));
    --upkeo-spinner-border: var(--upkeo-theme-border, rgba(148, 163, 184, .28));
    --upkeo-spinner-shadow: var(--upkeo-theme-shadow-lg, 0 16px 40px rgba(0, 0, 0, .20));
    --upkeo-spinner-glow: var(--upkeo-theme-focus-ring, rgba(13, 110, 253, .28));
    --upkeo-loader-overlay-bg: var(--upkeo-theme-background, #f2f3f9);
    --upkeo-loader-card-bg: var(--upkeo-spinner-surface);
    --upkeo-loader-card-border: var(--upkeo-spinner-border);
    --upkeo-loader-card-shadow: var(--upkeo-spinner-shadow);
    --upkeo-loader-card-width: 190px;
    --upkeo-loader-card-height: 104px;
    --upkeo-loader-card-radius: 18px;
    --upkeo-loader-logo-width: 158px;
    --upkeo-loader-logo-height: 79px;
}

.dark-mode {
    --upkeo-spinner-surface: var(--upkeo-theme-surface-elevated, rgba(32, 38, 46, .96));
    --upkeo-spinner-border: var(--upkeo-theme-border, rgba(255, 255, 255, .16));
    --upkeo-spinner-shadow: var(--upkeo-theme-shadow-lg, 0 14px 34px rgba(0, 0, 0, .42));
}

@keyframes upkeoSpinnerRotate {
    to {
        transform: rotate(360deg);
    }
}

.spinner_gear {
    color: var(--upkeo-spinner-color) !important;
}

body :where(.spinner-border, .spinner-grow):not([class*="text-"]) {
    color: var(--upkeo-spinner-color);
}

.btn :where(.spinner-border, .spinner-grow),
.badge :where(.spinner-border, .spinner-grow),
.alert :where(.spinner-border, .spinner-grow) {
    color: currentColor;
}

#global-loader,
.upkeo-loader {
    position: fixed;
    inset: 0;
    z-index: 50000;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    margin: 0;
    text-align: initial;
    background: var(--upkeo-loader-overlay-bg) !important;
}

#global-loader::before,
.upkeo-loader::before {
    content: "";
    position: absolute;
    width: var(--upkeo-loader-card-width);
    height: var(--upkeo-loader-card-height);
    border-radius: var(--upkeo-loader-card-radius);
    background: var(--upkeo-loader-card-bg);
    border: 1px solid var(--upkeo-loader-card-border);
    box-shadow: var(--upkeo-loader-card-shadow), inset 0 1px 0 rgba(255, 255, 255, .16);
}

#global-loader .upkeo-loader__logo,
.upkeo-loader__logo {
    position: relative !important;
    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    left: auto !important;
    z-index: 1;
    display: block !important;
    width: var(--upkeo-loader-logo-width);
    height: auto;
    max-width: 70vw;
    margin: 0 !important;
    text-align: initial !important;
}

#upkeo-page-content {
    transition: opacity .14s ease;
}

body.upkeo-partial-loading #upkeo-page-content {
    opacity: .55;
    pointer-events: none;
}

.upkeo-page-loading-spinner,
div.dataTables_wrapper div.dataTables_processing,
.dataTables_wrapper .dataTables_processing {
    position: fixed !important;
    top: 50% !important;
    left: 50% !important;
    z-index: 1080;
    align-items: center;
    justify-content: center;
    width: var(--upkeo-loader-card-width) !important;
    height: var(--upkeo-loader-card-height);
    min-height: var(--upkeo-loader-card-height);
    margin: 0 !important;
    padding: 12px 16px !important;
    box-sizing: border-box;
    line-height: 0;
    font-size: 0;
    color: transparent;
    text-align: center;
    transform: translate(-50%, -50%);
    background: var(--upkeo-loader-card-bg) !important;
    border: 1px solid var(--upkeo-loader-card-border) !important;
    border-radius: var(--upkeo-loader-card-radius) !important;
    box-shadow: var(--upkeo-loader-card-shadow);
    pointer-events: none;
}

.upkeo-page-loading-spinner {
    display: none;
}

body.upkeo-partial-loading.upkeo-partial-spinner-enabled .upkeo-page-loading-spinner {
    display: flex;
}

.upkeo-page-loading-spinner::before,
div.dataTables_wrapper div.dataTables_processing::before,
.dataTables_wrapper .dataTables_processing::before {
    content: "";
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    width: var(--upkeo-loader-logo-width);
    height: var(--upkeo-loader-logo-height);
    transform: translate(-50%, -50%);
    background: url("/app/assets/images/upkeo-contour-loader.svg") center / contain no-repeat;
}

.upkeo-page-loading-spinner__img {
    position: relative;
    z-index: 1;
    display: block;
    width: var(--upkeo-loader-logo-width);
    height: var(--upkeo-loader-logo-height);
    max-width: 100%;
    object-fit: contain;
}

.upkeo-page-loading-spinner::before {
    content: "";
    position: absolute;
    inset: 0;
    width: auto;
    height: auto;
    transform: none;
    border-radius: inherit;
    background: none;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .16);
    pointer-events: none;
}

div.dataTables_wrapper div.dataTables_processing::after,
.dataTables_wrapper .dataTables_processing::after {
    content: none;
    display: none;
}

div.dataTables_wrapper div.dataTables_processing > div,
.dataTables_wrapper .dataTables_processing > div {
    display: none !important;
}

div.dataTables_wrapper div.dataTables_processing.card,
.dataTables_wrapper .dataTables_processing.card {
    border: 1px solid var(--upkeo-loader-card-border) !important;
}

@media (max-width: 575.98px) {
    :root {
        --upkeo-loader-card-width: 160px;
        --upkeo-loader-card-height: 90px;
        --upkeo-loader-card-radius: 16px;
        --upkeo-loader-logo-width: 134px;
        --upkeo-loader-logo-height: 67px;
    }

    .upkeo-page-loading-spinner,
    div.dataTables_wrapper div.dataTables_processing,
    .dataTables_wrapper .dataTables_processing {
        padding: 10px 13px !important;
    }
}
