/*
|--------------------------------------------------------------------------
| Fromapp — Ressources humaines
| Gestion des utilisateurs
|--------------------------------------------------------------------------
*/


/*
|--------------------------------------------------------------------------
| Variables locales
|--------------------------------------------------------------------------
*/

:root {
    --users-blue:
        #1d4ed8;

    --users-blue-dark:
        #1e3a8a;

    --users-blue-soft:
        #eff6ff;

    --users-blue-border:
        #bfdbfe;

    --users-text:
        #172033;

    --users-muted:
        #64748b;

    --users-border:
        #dbe3ee;

    --users-surface:
        rgba(255, 255, 255, 0.92);

    --users-surface-soft:
        rgba(248, 250, 252, 0.92);

    --users-shadow:
        0 18px 45px rgba(15, 23, 42, 0.09);

    --users-shadow-soft:
        0 10px 26px rgba(15, 23, 42, 0.07);

    --users-success:
        #15803d;

    --users-success-soft:
        #ecfdf3;

    --users-success-border:
        #bbf7d0;

    --users-warning:
        #b45309;

    --users-warning-soft:
        #fff7ed;

    --users-warning-border:
        #fed7aa;

    --users-danger:
        #b91c1c;

    --users-danger-soft:
        #fef2f2;

    --users-danger-border:
        #fecaca;

    --users-radius-large:
        22px;

    --users-radius-medium:
        16px;

    --users-radius-small:
        11px;

    --users-transition:
        160ms ease;
}


/*
|--------------------------------------------------------------------------
| Protección de acceso
|--------------------------------------------------------------------------
*/

html.auth-locked body {
    overflow: hidden;
}

html.denied body {
    display: none !important;
}


/*
|--------------------------------------------------------------------------
| Base del módulo
|--------------------------------------------------------------------------
*/

body {
    min-height: 100vh;

    background:
        radial-gradient(
            circle at 8% 0%,
            rgba(37, 99, 235, 0.10),
            transparent 32%
        ),
        radial-gradient(
            circle at 92% 4%,
            rgba(14, 165, 233, 0.08),
            transparent 28%
        ),
        #f3f6fb;

    color:
        var(--users-text);
}

button,
input,
select,
textarea {
    font:
        inherit;
}

button {
    -webkit-tap-highlight-color:
        transparent;
}

button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    outline:
        3px solid rgba(59, 130, 246, 0.20);

    outline-offset:
        2px;
}


/*
|--------------------------------------------------------------------------
| Header
|--------------------------------------------------------------------------
*/

.fa-header {
    position:
        sticky;

    top:
        0;

    z-index:
        80;

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        20px;

    padding:
        18px
        clamp(18px, 4vw, 44px);

    border-bottom:
        1px solid rgba(203, 213, 225, 0.75);

    background:
        rgba(255, 255, 255, 0.78);

    box-shadow:
        0 8px 30px rgba(15, 23, 42, 0.05);

    backdrop-filter:
        blur(20px)
        saturate(145%);

    -webkit-backdrop-filter:
        blur(20px)
        saturate(145%);
}

.fa-header-left {
    min-width:
        0;
}

.fa-header-left h1 {
    margin:
        0;

    color:
        var(--users-blue);

    font-size:
        clamp(23px, 3vw, 34px);

    font-weight:
        850;

    line-height:
        1.05;

    letter-spacing:
        -0.035em;
}

.fa-header-sub {
    max-width:
        760px;

    margin:
        7px 0 0;

    color:
        var(--users-muted);

    font-size:
        14px;

    line-height:
        1.45;
}

.fa-header-right {
    display:
        flex;

    align-items:
        center;

    justify-content:
        flex-end;

    gap:
        9px;

    flex-wrap:
        wrap;
}

.btn-header {
    min-height:
        42px;

    padding:
        9px 14px;

    border:
        1px solid rgba(191, 219, 254, 0.95);

    border-radius:
        13px;

    background:
        rgba(239, 246, 255, 0.88);

    color:
        var(--users-blue-dark);

    box-shadow:
        0 5px 14px rgba(29, 78, 216, 0.08);

    font-size:
        13px;

    font-weight:
        800;

    cursor:
        pointer;

    transition:
        transform var(--users-transition),
        border-color var(--users-transition),
        background var(--users-transition),
        box-shadow var(--users-transition);
}

.btn-header:hover {
    border-color:
        #93c5fd;

    background:
        #dbeafe;

    box-shadow:
        0 8px 19px rgba(29, 78, 216, 0.14);

    transform:
        translateY(-1px);
}

.btn-header:active {
    transform:
        translateY(0);
}


/*
|--------------------------------------------------------------------------
| Conteneur principal
|--------------------------------------------------------------------------
*/

.fa-main {
    width:
        min(1480px, calc(100% - 32px));

    margin:
        0 auto;

    padding:
        28px 0 46px;
}


/*
|--------------------------------------------------------------------------
| Carte principale
|--------------------------------------------------------------------------
*/

.fa-card {
    overflow:
        hidden;

    border:
        1px solid rgba(219, 227, 238, 0.95);

    border-radius:
        var(--users-radius-large);

    background:
        var(--users-surface);

    box-shadow:
        var(--users-shadow);

    backdrop-filter:
        blur(16px);

    -webkit-backdrop-filter:
        blur(16px);
}

.fa-card-header {
    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        18px;

    padding:
        20px 22px;

    border-bottom:
        1px solid rgba(219, 227, 238, 0.92);

    background:
        linear-gradient(
            135deg,
            rgba(255, 255, 255, 0.96),
            rgba(248, 250, 252, 0.86)
        );
}

.utilisateurs-header-title {
    display:
        flex;

    align-items:
        flex-start;

    gap:
        13px;

    min-width:
        0;
}

.fa-step-badge {
    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    flex:
        0 0 auto;

    width:
        34px;

    height:
        34px;

    border:
        1px solid rgba(147, 197, 253, 0.95);

    border-radius:
        11px;

    background:
        linear-gradient(
            145deg,
            #eff6ff,
            #dbeafe
        );

    color:
        var(--users-blue);

    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.95),
        0 5px 15px rgba(29, 78, 216, 0.10);

    font-size:
        15px;

    font-weight:
        900;
}

.fa-card-header h2 {
    margin:
        0;

    color:
        var(--users-text);

    font-size:
        clamp(18px, 2vw, 23px);

    font-weight:
        850;

    letter-spacing:
        -0.025em;
}

.fa-card-subtitle {
    margin:
        5px 0 0;

    color:
        var(--users-muted);

    font-size:
        13px;

    line-height:
        1.45;
}

.utilisateurs-header-actions {
    display:
        flex;

    align-items:
        center;

    justify-content:
        flex-end;

    gap:
        10px;

    flex-wrap:
        wrap;
}

.fa-card-body {
    padding:
        22px;
}


/*
|--------------------------------------------------------------------------
| Boutons généraux
|--------------------------------------------------------------------------
*/

.btn-primary,
.btn-secondary,
.btn-danger {
    min-height:
        42px;

    padding:
        9px 15px;

    border-radius:
        12px;

    font-size:
        13px;

    font-weight:
        850;

    cursor:
        pointer;

    transition:
        transform var(--users-transition),
        filter var(--users-transition),
        box-shadow var(--users-transition),
        border-color var(--users-transition),
        background var(--users-transition);
}

.btn-primary {
    border:
        1px solid #1d4ed8;

    background:
        linear-gradient(
            145deg,
            #2563eb,
            #1d4ed8
        );

    color:
        #ffffff;

    box-shadow:
        0 9px 20px rgba(29, 78, 216, 0.20);
}

.btn-primary:hover {
    filter:
        brightness(1.04);

    box-shadow:
        0 12px 25px rgba(29, 78, 216, 0.26);

    transform:
        translateY(-1px);
}

.btn-secondary {
    border:
        1px solid var(--users-border);

    background:
        #ffffff;

    color:
        #334155;

    box-shadow:
        0 5px 14px rgba(15, 23, 42, 0.06);
}

.btn-secondary:hover {
    border-color:
        #bfdbfe;

    background:
        #f8fbff;

    color:
        var(--users-blue-dark);

    transform:
        translateY(-1px);
}

.btn-danger {
    border:
        1px solid #dc2626;

    background:
        linear-gradient(
            145deg,
            #ef4444,
            #dc2626
        );

    color:
        #ffffff;

    box-shadow:
        0 9px 20px rgba(220, 38, 38, 0.18);
}

.btn-danger:hover {
    filter:
        brightness(1.04);

    box-shadow:
        0 12px 24px rgba(220, 38, 38, 0.24);

    transform:
        translateY(-1px);
}

.btn-primary:active,
.btn-secondary:active,
.btn-danger:active {
    transform:
        translateY(0);
}

.btn-primary:disabled,
.btn-secondary:disabled,
.btn-danger:disabled,
.btn-header:disabled {
    opacity:
        0.55;

    cursor:
        not-allowed;

    filter:
        grayscale(0.15);

    box-shadow:
        none;

    transform:
        none;
}


/*
|--------------------------------------------------------------------------
| Filtres
|--------------------------------------------------------------------------
*/

.utilisateurs-filters {
    display:
        grid;

    grid-template-columns:
        minmax(240px, 1.5fr)
        minmax(190px, 0.8fr)
        minmax(190px, 0.8fr)
        auto;

    gap:
        13px;

    align-items:
        end;

    margin-bottom:
        19px;

    padding:
        16px;

    border:
        1px solid rgba(219, 227, 238, 0.95);

    border-radius:
        var(--users-radius-medium);

    background:
        var(--users-surface-soft);

    box-shadow:
        var(--users-shadow-soft);
}

.fa-form-field {
    display:
        flex;

    flex-direction:
        column;

    gap:
        7px;

    min-width:
        0;
}

.fa-form-field > label {
    color:
        #475569;

    font-size:
        12px;

    font-weight:
        800;
}

.fa-form-field input,
.fa-form-field select,
.fa-form-field textarea {
    width:
        100%;

    min-height:
        43px;

    padding:
        9px 11px;

    border:
        1px solid #cbd5e1;

    border-radius:
        11px;

    background:
        rgba(255, 255, 255, 0.96);

    color:
        var(--users-text);

    box-shadow:
        inset 0 1px 2px rgba(15, 23, 42, 0.03);

    font-size:
        14px;

    transition:
        border-color var(--users-transition),
        box-shadow var(--users-transition),
        background var(--users-transition);
}

.fa-form-field input::placeholder,
.fa-form-field textarea::placeholder {
    color:
        #94a3b8;
}

.fa-form-field input:hover,
.fa-form-field select:hover,
.fa-form-field textarea:hover {
    border-color:
        #aebdd0;
}

.fa-form-field input:focus,
.fa-form-field select:focus,
.fa-form-field textarea:focus {
    border-color:
        #60a5fa;

    background:
        #ffffff;

    box-shadow:
        0 0 0 4px rgba(59, 130, 246, 0.11);
}

.fa-form-field textarea {
    min-height:
        96px;

    resize:
        vertical;
}

.fa-form-actions {
    display:
        flex;

    align-items:
        flex-end;

    justify-content:
        flex-end;
}


/*
|--------------------------------------------------------------------------
| Résumé des utilisateurs
|--------------------------------------------------------------------------
*/

.resume-utilisateurs {
    display:
        grid;

    grid-template-columns:
        repeat(4, minmax(0, 1fr));

    gap:
        12px;

    margin-bottom:
        19px;
}

.resume-utilisateur-card {
    position:
        relative;

    overflow:
        hidden;

    min-height:
        104px;

    padding:
        16px;

    border:
        1px solid rgba(219, 227, 238, 0.95);

    border-radius:
        var(--users-radius-medium);

    background:
        linear-gradient(
            145deg,
            rgba(255, 255, 255, 0.98),
            rgba(248, 250, 252, 0.94)
        );

    box-shadow:
        var(--users-shadow-soft);
}

.resume-utilisateur-card::before {
    content:
        '';

    position:
        absolute;

    top:
        0;

    right:
        0;

    width:
        78px;

    height:
        78px;

    border-radius:
        0 0 0 78px;

    background:
        rgba(37, 99, 235, 0.07);
}

.resume-utilisateur-label {
    position:
        relative;

    z-index:
        1;

    display:
        block;

    color:
        var(--users-muted);

    font-size:
        11px;

    font-weight:
        850;

    letter-spacing:
        0.045em;

    text-transform:
        uppercase;
}

.resume-utilisateur-valeur {
    position:
        relative;

    z-index:
        1;

    display:
        block;

    margin-top:
        12px;

    color:
        var(--users-blue);

    font-size:
        clamp(26px, 3vw, 36px);

    font-weight:
        900;

    line-height:
        1;
}

.resume-utilisateur-card:nth-child(2)::before {
    background:
        rgba(34, 197, 94, 0.08);
}

.resume-utilisateur-card:nth-child(2)
.resume-utilisateur-valeur {
    color:
        var(--users-success);
}

.resume-utilisateur-card:nth-child(3)::before {
    background:
        rgba(239, 68, 68, 0.07);
}

.resume-utilisateur-card:nth-child(3)
.resume-utilisateur-valeur {
    color:
        var(--users-danger);
}

.resume-utilisateur-card:nth-child(4)::before {
    background:
        rgba(245, 158, 11, 0.09);
}

.resume-utilisateur-card:nth-child(4)
.resume-utilisateur-valeur {
    color:
        var(--users-warning);
}


/*
|--------------------------------------------------------------------------
| États généraux
|--------------------------------------------------------------------------
*/

.utilisateurs-statut,
.utilisateurs-vides {
    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        14px;

    min-height:
        190px;

    padding:
        25px;

    border:
        1px dashed #cbd5e1;

    border-radius:
        var(--users-radius-medium);

    background:
        rgba(248, 250, 252, 0.75);

    color:
        var(--users-muted);

    text-align:
        left;
}

.utilisateurs-statut-icone,
.utilisateurs-vides-icone {
    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    flex:
        0 0 auto;

    width:
        50px;

    height:
        50px;

    border:
        1px solid var(--users-blue-border);

    border-radius:
        16px;

    background:
        var(--users-blue-soft);

    color:
        var(--users-blue);

    font-size:
        24px;
}

.utilisateurs-statut strong,
.utilisateurs-vides h3 {
    display:
        block;

    margin:
        0;

    color:
        #334155;

    font-size:
        16px;

    font-weight:
        850;
}

.utilisateurs-statut p,
.utilisateurs-vides p {
    margin:
        5px 0 0;

    color:
        var(--users-muted);

    font-size:
        13px;

    line-height:
        1.45;
}

.utilisateurs-vides {
    flex-direction:
        column;

    text-align:
        center;
}


/*
|--------------------------------------------------------------------------
| Respect de l’attribut hidden
|--------------------------------------------------------------------------
*/

.resume-utilisateurs[hidden],
.utilisateurs-statut[hidden],
.utilisateurs-vides[hidden],
.fa-table-wrap[hidden],
.fa-modal[hidden],
.fa-toast[hidden] {
    display:
        none !important;
}


/*
|--------------------------------------------------------------------------
| Fin de la partie 1
|--------------------------------------------------------------------------
*/
/*
|--------------------------------------------------------------------------
| Tableau des utilisateurs
|--------------------------------------------------------------------------
*/

.fa-table-wrap {
    overflow-x:
        auto;

    border:
        1px solid var(--users-border);

    border-radius:
        var(--users-radius-medium);

    background:
        rgba(255, 255, 255, 0.95);

    box-shadow:
        var(--users-shadow-soft);
}

#tableUtilisateurs {
    width:
        100%;

    min-width:
        980px;

    border-collapse:
        separate;

    border-spacing:
        0;
}

#tableUtilisateurs th,
#tableUtilisateurs td {
    padding:
        13px 14px;

    border-bottom:
        1px solid #e7edf5;

    text-align:
        left;

    vertical-align:
        middle;
}

#tableUtilisateurs th {
    position:
        sticky;

    top:
        0;

    z-index:
        2;

    background:
        rgba(248, 250, 252, 0.97);

    color:
        #64748b;

    font-size:
        11px;

    font-weight:
        900;

    letter-spacing:
        0.045em;

    text-transform:
        uppercase;

    backdrop-filter:
        blur(10px);

    -webkit-backdrop-filter:
        blur(10px);
}

#tableUtilisateurs tbody tr {
    background:
        rgba(255, 255, 255, 0.94);

    transition:
        background var(--users-transition),
        box-shadow var(--users-transition);
}

#tableUtilisateurs tbody tr:hover {
    background:
        #f8fbff;
}

#tableUtilisateurs tbody tr:last-child td {
    border-bottom:
        0;
}

#tableUtilisateurs tbody tr.utilisateur-inactif {
    background:
        rgba(248, 250, 252, 0.76);
}

#tableUtilisateurs tbody tr.utilisateur-inactif td {
    color:
        #7c899b;
}

#tableUtilisateurs tbody tr.utilisateur-inactif:hover {
    background:
        #f3f5f8;
}


/*
|--------------------------------------------------------------------------
| Cellule utilisateur
|--------------------------------------------------------------------------
*/

.utilisateur-identite {
    display:
        flex;

    align-items:
        center;

    gap:
        11px;

    min-width:
        220px;
}

.utilisateur-avatar {
    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    flex:
        0 0 auto;

    width:
        42px;

    height:
        42px;

    border:
        1px solid var(--users-blue-border);

    border-radius:
        14px;

    background:
        linear-gradient(
            145deg,
            #eff6ff,
            #dbeafe
        );

    color:
        var(--users-blue);

    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.95),
        0 6px 16px rgba(29, 78, 216, 0.10);

    font-size:
        14px;

    font-weight:
        900;

    letter-spacing:
        0.02em;

    text-transform:
        uppercase;
}

.utilisateur-inactif .utilisateur-avatar {
    border-color:
        #d7dee8;

    background:
        #eef1f5;

    color:
        #8491a3;

    box-shadow:
        none;
}

.utilisateur-identite-textes {
    min-width:
        0;
}

.utilisateur-nom {
    overflow:
        hidden;

    color:
        var(--users-text);

    font-size:
        14px;

    font-weight:
        850;

    line-height:
        1.25;

    text-overflow:
        ellipsis;

    white-space:
        nowrap;
}

.utilisateur-id {
    margin-top:
        3px;

    color:
        #94a3b8;

    font-size:
        11px;

    font-weight:
        700;
}


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

.badge-role,
.badge-statut-utilisateur,
.badge-pin {
    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        5px;

    min-height:
        28px;

    padding:
        4px 9px;

    border:
        1px solid transparent;

    border-radius:
        999px;

    font-size:
        11px;

    font-weight:
        850;

    line-height:
        1;
}

.badge-role {
    border-color:
        var(--users-blue-border);

    background:
        var(--users-blue-soft);

    color:
        var(--users-blue-dark);
}

.badge-role.role-admin {
    border-color:
        #c4b5fd;

    background:
        #f5f3ff;

    color:
        #6d28d9;
}

.badge-role.role-qualite {
    border-color:
        #a7f3d0;

    background:
        #ecfdf5;

    color:
        #047857;
}

.badge-role.role-superviseur {
    border-color:
        #fde68a;

    background:
        #fffbeb;

    color:
        #a16207;
}

.badge-role.role-vente {
    border-color:
        #bae6fd;

    background:
        #f0f9ff;

    color:
        #0369a1;
}

.badge-role.role-autre {
    border-color:
        #d8dee8;

    background:
        #f8fafc;

    color:
        #475569;
}

.badge-statut-utilisateur.actif {
    border-color:
        var(--users-success-border);

    background:
        var(--users-success-soft);

    color:
        var(--users-success);
}

.badge-statut-utilisateur.inactif {
    border-color:
        var(--users-danger-border);

    background:
        var(--users-danger-soft);

    color:
        var(--users-danger);
}

.badge-pin.defini {
    border-color:
        var(--users-success-border);

    background:
        var(--users-success-soft);

    color:
        var(--users-success);
}

.badge-pin.manquant {
    border-color:
        var(--users-warning-border);

    background:
        var(--users-warning-soft);

    color:
        var(--users-warning);
}


/*
|--------------------------------------------------------------------------
| Dernière connexion
|--------------------------------------------------------------------------
*/

.derniere-connexion {
    min-width:
        145px;

    color:
        #475569;

    font-size:
        12px;

    font-weight:
        700;
}

.derniere-connexion-jamais {
    color:
        #94a3b8;
}

.derniere-connexion-date {
    display:
        block;
}

.derniere-connexion-heure {
    display:
        block;

    margin-top:
        2px;

    color:
        #94a3b8;

    font-size:
        11px;
}


/*
|--------------------------------------------------------------------------
| Actions de ligne
|--------------------------------------------------------------------------
*/

.actions-utilisateur {
    display:
        flex;

    align-items:
        center;

    justify-content:
        flex-start;

    gap:
        6px;

    flex-wrap:
        wrap;

    min-width:
        230px;
}

.btn-action-utilisateur {
    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    gap:
        5px;

    min-height:
        34px;

    padding:
        6px 9px;

    border:
        1px solid var(--users-border);

    border-radius:
        10px;

    background:
        #ffffff;

    color:
        #334155;

    box-shadow:
        0 4px 10px rgba(15, 23, 42, 0.05);

    font-size:
        11px;

    font-weight:
        850;

    cursor:
        pointer;

    transition:
        transform var(--users-transition),
        border-color var(--users-transition),
        background var(--users-transition),
        color var(--users-transition),
        box-shadow var(--users-transition);
}

.btn-action-utilisateur:hover {
    border-color:
        #bfdbfe;

    background:
        #eff6ff;

    color:
        var(--users-blue-dark);

    box-shadow:
        0 7px 15px rgba(29, 78, 216, 0.10);

    transform:
        translateY(-1px);
}

.btn-action-utilisateur.action-pin {
    border-color:
        #fde68a;

    background:
        #fffbeb;

    color:
        #92400e;
}

.btn-action-utilisateur.action-pin:hover {
    border-color:
        #fbbf24;

    background:
        #fef3c7;

    color:
        #78350f;
}

.btn-action-utilisateur.action-inactiver {
    border-color:
        var(--users-danger-border);

    background:
        var(--users-danger-soft);

    color:
        var(--users-danger);
}

.btn-action-utilisateur.action-inactiver:hover {
    border-color:
        #f87171;

    background:
        #fee2e2;

    color:
        #991b1b;
}

.btn-action-utilisateur.action-activer {
    border-color:
        var(--users-success-border);

    background:
        var(--users-success-soft);

    color:
        var(--users-success);
}

.btn-action-utilisateur.action-activer:hover {
    border-color:
        #86efac;

    background:
        #dcfce7;

    color:
        #166534;
}

.btn-action-utilisateur:disabled {
    opacity:
        0.52;

    cursor:
        not-allowed;

    transform:
        none;

    box-shadow:
        none;
}


/*
|--------------------------------------------------------------------------
| Indication d’état de ligne
|--------------------------------------------------------------------------
*/

.utilisateur-row-indicator {
    display:
        inline-block;

    width:
        8px;

    height:
        8px;

    margin-right:
        6px;

    border-radius:
        999px;

    background:
        #22c55e;

    box-shadow:
        0 0 0 4px rgba(34, 197, 94, 0.10);
}

.utilisateur-row-indicator.inactif {
    background:
        #ef4444;

    box-shadow:
        0 0 0 4px rgba(239, 68, 68, 0.08);
}


/*
|--------------------------------------------------------------------------
| État de chargement dans le tableau
|--------------------------------------------------------------------------
*/

.table-loading-row td {
    padding:
        34px 16px !important;

    color:
        var(--users-muted);

    text-align:
        center !important;
}

.table-loading-content {
    display:
        inline-flex;

    align-items:
        center;

    gap:
        10px;
}

.table-loading-spinner {
    width:
        20px;

    height:
        20px;

    border:
        3px solid #dbeafe;

    border-top-color:
        var(--users-blue);

    border-radius:
        999px;

    animation:
        utilisateurs-spin 0.8s linear infinite;
}

@keyframes utilisateurs-spin {
    to {
        transform:
            rotate(360deg);
    }
}


/*
|--------------------------------------------------------------------------
| Responsive — tableau
|--------------------------------------------------------------------------
*/

@media (max-width: 1180px) {
    .utilisateurs-filters {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

    .fa-form-actions {
        justify-content:
            flex-start;
    }

    .resume-utilisateurs {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 760px) {
    .fa-header {
        position:
            relative;

        align-items:
            flex-start;

        flex-direction:
            column;
    }

    .fa-header-right {
        width:
            100%;

        justify-content:
            flex-start;
    }

    .fa-main {
        width:
            min(100% - 20px, 1480px);

        padding-top:
            15px;
    }

    .fa-card-header {
        align-items:
            flex-start;

        flex-direction:
            column;
    }

    .utilisateurs-header-actions {
        width:
            100%;

        justify-content:
            flex-start;
    }

    .utilisateurs-header-actions .btn-primary {
        width:
            100%;
    }

    .utilisateurs-filters {
        grid-template-columns:
            1fr;
    }

    .fa-form-actions .btn-secondary {
        width:
            100%;
    }

    .resume-utilisateurs {
        grid-template-columns:
            1fr 1fr;
    }

    .fa-card-body {
        padding:
            14px;
    }
}

@media (max-width: 560px) {
    .resume-utilisateurs {
        grid-template-columns:
            1fr;
    }

    .btn-header {
        width:
            100%;
    }
}


/*
|--------------------------------------------------------------------------
| Fin de la partie 2
|--------------------------------------------------------------------------
*/
/*
|--------------------------------------------------------------------------
| Modales
|--------------------------------------------------------------------------
*/

.fa-modal {
    position:
        fixed;

    inset:
        0;

    z-index:
        1000;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    padding:
        20px;

    background:
        rgba(15, 23, 42, 0.48);

    backdrop-filter:
        blur(12px);

    -webkit-backdrop-filter:
        blur(12px);
}

.fa-modal-dialog {
    width:
        min(560px, 100%);

    max-height:
        calc(100vh - 40px);

    overflow:
        auto;

    border:
        1px solid rgba(255, 255, 255, 0.82);

    border-radius:
        22px;

    background:
        rgba(255, 255, 255, 0.97);

    box-shadow:
        0 28px 70px rgba(15, 23, 42, 0.30);

    animation:
        utilisateurs-modal-entree
        180ms ease-out;
}

.modal-pin-dialog {
    width:
        min(500px, 100%);
}

.modal-statut-dialog {
    width:
        min(470px, 100%);
}

@keyframes utilisateurs-modal-entree {
    from {
        opacity:
            0;

        transform:
            translateY(12px)
            scale(0.97);
    }

    to {
        opacity:
            1;

        transform:
            translateY(0)
            scale(1);
    }
}

.fa-modal-header {
    position:
        sticky;

    top:
        0;

    z-index:
        2;

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        16px;

    padding:
        18px 20px;

    border-bottom:
        1px solid var(--users-border);

    background:
        rgba(255, 255, 255, 0.94);

    backdrop-filter:
        blur(16px);

    -webkit-backdrop-filter:
        blur(16px);
}

.fa-modal-header h3 {
    margin:
        0;

    color:
        var(--users-text);

    font-size:
        19px;

    font-weight:
        900;

    letter-spacing:
        -0.025em;
}

.fa-modal-close {
    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    flex:
        0 0 auto;

    width:
        36px;

    height:
        36px;

    padding:
        0;

    border:
        1px solid var(--users-border);

    border-radius:
        11px;

    background:
        #f8fafc;

    color:
        #64748b;

    font-size:
        15px;

    font-weight:
        900;

    cursor:
        pointer;

    transition:
        background var(--users-transition),
        color var(--users-transition),
        border-color var(--users-transition),
        transform var(--users-transition);
}

.fa-modal-close:hover {
    border-color:
        var(--users-danger-border);

    background:
        var(--users-danger-soft);

    color:
        var(--users-danger);

    transform:
        rotate(4deg);
}

.fa-modal-body {
    display:
        flex;

    flex-direction:
        column;

    gap:
        17px;

    padding:
        20px;
}

.fa-modal-footer {
    position:
        sticky;

    bottom:
        0;

    z-index:
        2;

    display:
        flex;

    align-items:
        center;

    justify-content:
        flex-end;

    gap:
        10px;

    padding:
        15px 20px;

    border-top:
        1px solid var(--users-border);

    background:
        rgba(255, 255, 255, 0.95);

    backdrop-filter:
        blur(16px);

    -webkit-backdrop-filter:
        blur(16px);
}


/*
|--------------------------------------------------------------------------
| Aide sous les champs
|--------------------------------------------------------------------------
*/

.fa-help-text {
    display:
        block;

    color:
        var(--users-muted);

    font-size:
        11px;

    line-height:
        1.45;
}


/*
|--------------------------------------------------------------------------
| Saisie du NIP
|--------------------------------------------------------------------------
*/

.pin-input-wrap {
    position:
        relative;

    display:
        flex;

    align-items:
        stretch;
}

.pin-input-wrap input {
    padding-right:
        50px;

    font-size:
        19px;

    font-weight:
        900;

    letter-spacing:
        0.26em;

    text-align:
        center;
}

.btn-pin-visibility {
    position:
        absolute;

    top:
        50%;

    right:
        6px;

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    width:
        36px;

    height:
        32px;

    padding:
        0;

    border:
        0;

    border-radius:
        9px;

    background:
        transparent;

    color:
        #64748b;

    cursor:
        pointer;

    transform:
        translateY(-50%);

    transition:
        background var(--users-transition),
        color var(--users-transition);
}

.btn-pin-visibility:hover {
    background:
        #eff6ff;

    color:
        var(--users-blue);
}

.nouvel-utilisateur-pin {
    display:
        grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap:
        14px;

    padding:
        14px;

    border:
        1px solid var(--users-blue-border);

    border-radius:
        15px;

    background:
        rgba(239, 246, 255, 0.72);
}


/*
|--------------------------------------------------------------------------
| Switch iOS
|--------------------------------------------------------------------------
*/

.utilisateur-actif-field {
    padding:
        14px;

    border:
        1px solid var(--users-border);

    border-radius:
        15px;

    background:
        #f8fafc;
}

.switch-field {
    display:
        inline-flex;

    align-items:
        center;

    gap:
        11px;

    cursor:
        pointer;

    user-select:
        none;
}

.switch-field input {
    position:
        absolute;

    width:
        1px;

    height:
        1px;

    opacity:
        0;

    pointer-events:
        none;
}

.switch-control {
    position:
        relative;

    display:
        inline-block;

    flex:
        0 0 auto;

    width:
        49px;

    height:
        29px;

    border:
        1px solid #cbd5e1;

    border-radius:
        999px;

    background:
        #dfe5ed;

    box-shadow:
        inset 0 1px 3px rgba(15, 23, 42, 0.10);

    transition:
        background var(--users-transition),
        border-color var(--users-transition),
        box-shadow var(--users-transition);
}

.switch-control::after {
    content:
        '';

    position:
        absolute;

    top:
        3px;

    left:
        3px;

    width:
        21px;

    height:
        21px;

    border-radius:
        999px;

    background:
        #ffffff;

    box-shadow:
        0 3px 9px rgba(15, 23, 42, 0.22);

    transition:
        transform var(--users-transition);
}

.switch-field input:checked
+ .switch-control {
    border-color:
        #22c55e;

    background:
        #22c55e;

    box-shadow:
        inset 0 1px 2px rgba(22, 101, 52, 0.12),
        0 0 0 4px rgba(34, 197, 94, 0.08);
}

.switch-field input:checked
+ .switch-control::after {
    transform:
        translateX(20px);
}

.switch-field input:focus-visible
+ .switch-control {
    outline:
        3px solid rgba(59, 130, 246, 0.20);

    outline-offset:
        2px;
}

.switch-label {
    color:
        #334155;

    font-size:
        14px;

    font-weight:
        850;
}


/*
|--------------------------------------------------------------------------
| Blocs d’information
|--------------------------------------------------------------------------
*/

.info-utilisateur,
.info-pin,
.info-statut {
    padding:
        12px 14px;

    border-radius:
        13px;

    font-size:
        12px;

    line-height:
        1.5;
}

.info-utilisateur {
    border:
        1px solid var(--users-blue-border);

    background:
        var(--users-blue-soft);

    color:
        var(--users-blue-dark);
}

.info-pin {
    border:
        1px solid var(--users-warning-border);

    background:
        var(--users-warning-soft);

    color:
        #92400e;
}

.info-statut {
    border:
        1px solid var(--users-border);

    background:
        #f8fafc;

    color:
        #475569;
}


/*
|--------------------------------------------------------------------------
| Résumé utilisateur dans les modales
|--------------------------------------------------------------------------
*/

.utilisateur-modal-resume {
    padding:
        13px 15px;

    border:
        1px solid var(--users-border);

    border-radius:
        14px;

    background:
        linear-gradient(
            145deg,
            #ffffff,
            #f8fafc
        );
}

.utilisateur-modal-resume span {
    display:
        block;

    color:
        var(--users-muted);

    font-size:
        10px;

    font-weight:
        900;

    letter-spacing:
        0.05em;

    text-transform:
        uppercase;
}

.utilisateur-modal-resume strong {
    display:
        block;

    margin-top:
        4px;

    color:
        var(--users-text);

    font-size:
        16px;

    font-weight:
        900;
}


/*
|--------------------------------------------------------------------------
| Modal de statut
|--------------------------------------------------------------------------
*/

.statut-modal-icone {
    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    width:
        64px;

    height:
        64px;

    margin:
        0 auto;

    border:
        1px solid var(--users-warning-border);

    border-radius:
        20px;

    background:
        var(--users-warning-soft);

    font-size:
        30px;
}

.statut-modal-icone.activation {
    border-color:
        var(--users-success-border);

    background:
        var(--users-success-soft);
}

.statut-modal-icone.inactivation {
    border-color:
        var(--users-danger-border);

    background:
        var(--users-danger-soft);
}

.statut-utilisateur-message {
    margin:
        0;

    color:
        #475569;

    font-size:
        14px;

    line-height:
        1.55;

    text-align:
        center;
}


/*
|--------------------------------------------------------------------------
| Toast
|--------------------------------------------------------------------------
*/

.fa-toast {
    position:
        fixed;

    right:
        22px;

    bottom:
        22px;

    z-index:
        2000;

    max-width:
        min(420px, calc(100vw - 44px));

    padding:
        13px 16px;

    border:
        1px solid #bfdbfe;

    border-radius:
        14px;

    background:
        rgba(29, 78, 216, 0.95);

    color:
        #ffffff;

    box-shadow:
        0 18px 40px rgba(15, 23, 42, 0.22);

    font-size:
        13px;

    font-weight:
        800;

    line-height:
        1.45;

    backdrop-filter:
        blur(14px);

    -webkit-backdrop-filter:
        blur(14px);

    animation:
        utilisateurs-toast-entree
        180ms ease-out;
}

.fa-toast.success {
    border-color:
        #86efac;

    background:
        rgba(21, 128, 61, 0.96);
}

.fa-toast.error {
    border-color:
        #fca5a5;

    background:
        rgba(185, 28, 28, 0.96);
}

.fa-toast.warning {
    border-color:
        #fcd34d;

    background:
        rgba(180, 83, 9, 0.96);
}

@keyframes utilisateurs-toast-entree {
    from {
        opacity:
            0;

        transform:
            translateY(10px)
            scale(0.97);
    }

    to {
        opacity:
            1;

        transform:
            translateY(0)
            scale(1);
    }
}


/*
|--------------------------------------------------------------------------
| États de validation
|--------------------------------------------------------------------------
*/

.fa-form-field.is-invalid input,
.fa-form-field.is-invalid select {
    border-color:
        #ef4444;

    background:
        #fffafa;

    box-shadow:
        0 0 0 4px rgba(239, 68, 68, 0.09);
}

.fa-form-field.is-valid input,
.fa-form-field.is-valid select {
    border-color:
        #22c55e;

    box-shadow:
        0 0 0 4px rgba(34, 197, 94, 0.08);
}

.field-error {
    color:
        var(--users-danger);

    font-size:
        11px;

    font-weight:
        750;
}


/*
|--------------------------------------------------------------------------
| Utilitaires
|--------------------------------------------------------------------------
*/

.text-muted {
    color:
        var(--users-muted);
}

.text-danger {
    color:
        var(--users-danger);
}

.text-success {
    color:
        var(--users-success);
}

.nowrap {
    white-space:
        nowrap;
}


/*
|--------------------------------------------------------------------------
| Responsive final
|--------------------------------------------------------------------------
*/

@media (max-width: 700px) {
    .fa-modal {
        align-items:
            flex-end;

        padding:
            10px;
    }

    .fa-modal-dialog {
        width:
            100%;

        max-height:
            calc(100vh - 20px);

        border-radius:
            22px 22px 14px 14px;
    }

    .fa-modal-footer {
        flex-direction:
            column;

        align-items:
            stretch;
    }

    .fa-modal-footer .btn-primary,
    .fa-modal-footer .btn-secondary,
    .fa-modal-footer .btn-danger {
        width:
            100%;
    }

    .nouvel-utilisateur-pin {
        grid-template-columns:
            1fr;
    }

    .fa-toast {
        right:
            12px;

        bottom:
            12px;

        max-width:
            calc(100vw - 24px);
    }
}

@media (max-width: 480px) {
    .fa-header {
        padding:
            15px;
    }

    .fa-header-left h1 {
        font-size:
            24px;
    }

    .fa-main {
        width:
            calc(100% - 12px);
    }

    .fa-card {
        border-radius:
            17px;
    }

    .fa-card-header,
    .fa-card-body {
        padding:
            14px;
    }

    .fa-modal-body {
        padding:
            16px;
    }

    .fa-modal-header,
    .fa-modal-footer {
        padding:
            14px 16px;
    }
}


/*
|--------------------------------------------------------------------------
| Impression
|--------------------------------------------------------------------------
*/

@media print {
    .fa-header,
    .utilisateurs-header-actions,
    .utilisateurs-filters,
    .actions-utilisateur,
    .fa-toast {
        display:
            none !important;
    }

    body {
        background:
            #ffffff;
    }

    .fa-main {
        width:
            100%;

        padding:
            0;
    }

    .fa-card,
    .fa-table-wrap {
        border:
            0;

        box-shadow:
            none;
    }

    #tableUtilisateurs {
        min-width:
            0;
    }
}


/*
|--------------------------------------------------------------------------
| Fin du fichier
|--------------------------------------------------------------------------
*/