/* ========================================
   BUNQR — Dialogs d'action collaborateur
   Layout "Side Splash" — v1.1
   Utilisé par : EnableEmployeeDialog, DisableEmployeeDialog,
                 GrantAppAccessDialog, SuspendAppAccessDialog
   ======================================== */

/* Coquille principale — flex row */
.ead-shell {
    display: flex;
    min-height: 340px;
    /* Borne la hauteur sur les petits écrans : le panneau droit devient scrollable
       (cf. .ead-content) et le pied reste visible (cf. .ead-footer sticky). */
    max-height: min(85vh, 620px);
    overflow: hidden;
}

/* ── Panneau gauche (splash coloré) ── */
.ead-splash {
    width: 176px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 32px 16px;
    gap: 14px;
}

/* Avatar initiales */
.ead-avatar {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: var(--bunqr-petrol);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    font-weight: 700;
    color: #fff;
    font-family: 'DM Sans', sans-serif;
    flex-shrink: 0;
}

/* Cercle icône action */
.ead-icon-circle {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Label mode (ex: "ACTIVATION RH") */
.ead-splash-label {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .08em;
    text-align: center;
    line-height: 1.4;
}

/* Badge périmètre (mode app-on) */
.ead-scope-badge {
    background: rgba(255, 255, 255, .7);
    border-radius: 3px;
    padding: 3px 10px;
    font-size: 10px;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

/* ── Panneau droit (contenu formulaire) ── */
.ead-content {
    flex: 1;
    padding: 24px 24px 20px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    min-width: 0;
    overflow-y: auto;
}

.ead-title {
    font-weight: 700;
    font-size: 17px;
    font-family: 'DM Sans', sans-serif;
    color: var(--bunqr-noir);
}

.ead-subtitle {
    font-size: 12px;
    color: #718096;
    margin-top: 3px;
    line-height: 1.5;
}

/* Pied de dialog — boutons.
   Épinglé en bas du panneau droit : reste visible même quand le contenu scrolle. */
.ead-footer {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin-top: auto;
    padding-top: 12px;
    border-top: 1px solid var(--bunqr-border, #E2E4E6);
    position: sticky;
    bottom: 0;
    margin-bottom: -20px;
    padding-bottom: 20px;
    background: #fff;
}

/* ── Bandeaux inline ── */

/* Succès (vert) — post activation RH */
.ead-success-banner {
    background: rgba(46, 125, 94, .08);
    border: 1px solid rgba(46, 125, 94, .2);
    border-radius: 4px;
    padding: 10px 12px;
    font-size: 12px;
    color: #2e7d5e;
    line-height: 1.5;
    display: flex;
    gap: 8px;
    align-items: flex-start;
}

/* Shortcut "Créer l'accès app ?" */
.ead-shortcut {
    background: rgba(161, 196, 207, .15);
    border: 1px solid rgba(161, 196, 207, .6);
    border-radius: 6px;
    padding: 14px 16px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.ead-shortcut-actions {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
}

/* Avertissement (rouge) — suspension accès */
.ead-warning-banner {
    background: rgba(176, 42, 55, .06);
    border: 1px solid rgba(176, 42, 55, .2);
    border-radius: 4px;
    padding: 10px 12px;
    font-size: 12px;
    color: var(--bunqr-danger, #b02a37);
    line-height: 1.5;
    display: flex;
    gap: 8px;
    align-items: flex-start;
}

/* ── Variantes splash par mode ── */
.ead-splash--rh-on  { background: var(--bunqr-vert, #D6DEDD); }
.ead-splash--app-on { background: rgba(161, 196, 207, .5); }
.ead-splash--rh-off { background: rgba(176, 42, 55, .08); }
.ead-splash--app-off{ background: #f3f4f6; }

/* ========================================
   Arrêt / reprise (handoff « Arrêt et reprise », 2026-09-26)
   Utilisé par : InterruptActivityDialog, ResumeActivityDialog, CorrectActivityInterruptionDialog
   ======================================== */

.ead-splash--arret   { background: #EAF1F4; border-right: 1px solid #CFDDE3; color: #33555F; }
.ead-splash--reprise { background: #E8F2EC; border-right: 1px solid #BFDBC9; color: #0D7A3E; }

.ead-splash-name     { font-weight: 700; font-size: 12px; line-height: 1.3; text-align: center; }
.ead-splash-function { font-size: 11px; margin-top: 2px; text-align: center; }

/* Groupe de champ : libellé + contrôle */
.ead-field {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.ead-field-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.ead-field-label {
    font-size: 12px;
    font-weight: 700;
    color: #4b5563;
}

.ead-input,
.ead-textarea,
.ead-select {
    width: 100%;
    box-sizing: border-box;
    padding: 7px 10px;
    border: 1px solid #E2E4E6;
    border-radius: 6px;
    background: #fff;
    font: inherit;
    font-size: 13px;
    color: #171717;
    outline: none;
}

.ead-input:focus,
.ead-textarea:focus,
.ead-select:focus { border-color: #9ca3af; }

.ead-textarea { resize: vertical; }
.ead-select.is-placeholder { color: #9ca3af; }

/* Interrupteur « Saisir une date » : piste 32×18, curseur 14 px */
.ead-toggle {
    all: unset;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    color: #374151;
}

.ead-toggle__track {
    position: relative;
    width: 32px;
    height: 18px;
    border-radius: 10px;
    background: #d4d6d8;
    transition: background .15s;
}

.ead-toggle__knob {
    position: absolute;
    top: 2px;
    left: 2px;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .2);
    transition: left .15s;
}

.ead-toggle.is-on .ead-toggle__track { background: #171717; }
.ead-toggle.is-on .ead-toggle__knob  { left: 16px; }

/* Encart lecture seule « Aujourd'hui · JJ/MM/AAAA » */
.ead-readonly {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 11px;
    border-radius: 6px;
    background: #FAF8F5;
    border: 1px solid #f0f0ee;
    font-size: 13px;
    color: #374151;
}

.ead-help {
    font-size: 11.5px;
    color: #6b7280;
    line-height: 1.5;
}

/* Rappel de l'arrêt en cours (dialogue de reprise) */
.ead-recap {
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding: 10px 12px;
    border-radius: 6px;
    background: #EAF1F4;
    border: 1px solid #CFDDE3;
    color: #33555F;
    font-size: 12px;
    line-height: 1.5;
}

.ead-recap__title {
    display: flex;
    align-items: center;
    gap: 6px;
    font-weight: 700;
}

/* Encart d'erreur commun */
.ead-error {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 9px 11px;
    border-radius: 6px;
    background: #FDECEC;
    border: 1px solid #F5C7C9;
    color: #7B1A24;
    font-size: 12px;
    line-height: 1.5;
}

.ead-error .material-symbols-outlined { color: #b02a37; font-size: 16px; }

/* Boutons principaux : couleur de l'action, gris désactivé */
.ead-primary {
    all: unset;
    cursor: pointer;
    padding: 7px 16px;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 600;
    color: #fff;
}

.ead-primary--arret   { background: #33555F; }
.ead-primary--reprise { background: #0D7A3E; }
.ead-primary--noir    { background: #171717; }
.ead-primary:disabled { background: #B0B5BA; cursor: not-allowed; }

.ead-secondary {
    all: unset;
    cursor: pointer;
    padding: 6px 15px;
    border-radius: 6px;
    border: 1px solid #E2E4E6;
    background: #fff;
    font-size: 13px;
    font-weight: 600;
    color: #171717;
}

.ead-secondary:hover { background: #F5EFE6; }

.ead-icon-white { color: #fff; }

/* Dialogue simple sans splash (« Corriger le motif », 460 px) */
.ead-plain {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 20px 22px 18px;
    font-size: 13px;
    color: #171717;
}

.ead-plain-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

.ead-close {
    all: unset;
    cursor: pointer;
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    border-radius: 6px;
    color: #6b7280;
}

.ead-close:hover { background: #F5EFE6; }

.ead-plain-footer {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    padding-top: 12px;
    border-top: 1px solid #E2E4E6;
}