@import url('open-iconic/font/css/open-iconic-bootstrap.min.css');
@import url('./icons.css');

html, body {
    margin: 0;
    padding: 0;
    height: 100%;
}

/* ════════════════════════════════════════════════════
   Icônes — pattern CRM (app.css)
   Ces règles doivent être APRÈS @import './icons.css'
   pour écraser la taille fixe définie dans icons.css
   ════════════════════════════════════════════════════ */

.icon {
    opacity: 0.7;
    background-size: contain;
    mask-repeat: no-repeat;
    mask-position: center center;
    mask-size: 100% 100%;
    background-color: currentColor;
}

.medium-icon {
    width: var(--CRM-icon-size);
    height: var(--CRM-icon-size);
}

/* Classe .avatar utilisée dans le toolbar */
.avatar {
    width: var(--CRM-avatar-size);
    height: var(--CRM-avatar-size);
    margin-left: var(--CRM-avatar-margin-left);
}

/* ── Layout page de login — pattern CRM exact ── */
.hw-empty-layout {
    display: flex;
    flex-direction: column;
    height: 100vh;
    background-color: var(--dxds-color-surface-neutral-subdued-rest);
}

.main-content {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    height: 100%;
}

.block-content {
    border-radius: 0.5rem;
    flex-grow: 0;
    margin: auto;
    max-width: 30rem;
    width: 100%;
    padding: 1.5rem;
}

/* ── Titre — pattern CRM ── */
.title {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-bottom: 0.625rem;
}

    .title .title-text {
        font-family: var(--dxds-font-family-sans-serif);
        font-size: var(--dxds-font-size-headline-md);
        font-weight: var(--dxds-font-weight-headline-default);
        line-height: var(--dxds-line-height-headline-md);
        letter-spacing: var(--dxds-letter-spacing-headline-md);
        color: var(--dxds-color-content-neutral-default-rest);
    }

/* ── Carte — pattern CRM ── */
.card {
    position: relative;
    display: flex;
    flex-direction: column;
    min-width: 0;
    overflow-wrap: break-word;
    background-color: var(--dxds-color-surface-neutral-default-rest);
    background-clip: border-box;
    border: 1px solid var(--dxds-color-border-neutral-default-rest);
    border-radius: 0.5rem;
    box-shadow: var(--dxds-box-shadow-sm);
}

/* ── Séparateur ── */
.or {
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 0.75rem 0;
}

    .or .or-line {
        border-bottom: 1px solid var(--dxds-color-content-neutral-default-rest);
        width: 100%;
        opacity: 0.2;
    }

    .or .or-text {
        padding: 0 0.625rem;
        font-size: 0.75rem;
        line-height: 1.125rem;
        opacity: 0.7;
        white-space: nowrap;
    }

/* ── Liens ── */
.links-container {
    display: flex;
    gap: 0.25rem;
    justify-content: center;
    align-items: center;
    padding: 0.25rem 0;
}

    .links-container .dot {
        height: 0.3125rem;
        width: 0.3125rem;
        margin: 0 0.1875rem;
        border-radius: 50%;
        background-color: var(--dxds-color-content-neutral-default-rest);
        opacity: 0.7;
    }

/* ── Utilitaires globaux ── */
.valid.modified:not([type=checkbox]) {
    outline: 1px solid var(--dxds-color-border-success-default-rest);
}

.invalid {
    outline: 1px solid var(--dxds-color-border-danger-default-rest);
}

.validation-message {
    color: var(--dxds-color-content-danger-default-rest);
}

.button-link {
    text-decoration: unset;
}

/* ── Spinner chargement — pattern CRM ── */
.loading-panel {
    height: 100%;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

    .loading-panel > .loader {
        display: flex;
        align-items: center;
    }

        .loading-panel > .loader > .spinner {
            width: 2rem;
            height: 2rem;
            border: 0.25rem solid color-mix(in sRGB, var(--dxds-color-surface-primary-default-rest) 30%, transparent);
            border-bottom-color: var(--dxds-color-surface-primary-default-rest);
            border-radius: 50%;
            display: inline-block;
            box-sizing: border-box;
            animation: rotation 0.75s linear infinite;
        }

        .loading-panel > .loader > .label {
            color: var(--dxds-color-content-neutral-default-rest);
            font-size: var(--dxds-font-size-base-lg);
            font-weight: var(--dxds-font-weight-base-strong);
            margin-left: 0.75rem;
        }

@keyframes rotation {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}
/* ════════════════════════════════════════════════════
   Bandeau d'en-tête grisé — tous les groupes de FormLayout
   ════════════════════════════════════════════════════ */
.dxbl-fl .dxbl-fl-group > .dxbl-group {
    --dxbl-group-header-bg: var(--dxds-color-surface-neutral-subdued-rest);
}