/* Mots de passe : chargée sur toutes les pages (importmap.php du bundle), n'utilise que les jetons du socle (ui-bundle). */
@layer components {
    /* Tableau des mots de passe : colonnes fixes, cellules tronquées (hors case à cocher et actions). */
    .js-password-passwords-table { table-layout: fixed; }
    .js-password-passwords-table td:not(:last-child):not(:first-child) {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    /* Ligne d'ajout : les widgets occupent leur cellule. */
    .js-password-passwords-table .password-form-row :is(.input, .choice-widget) { width: 100%; }

    /* Valeur éditable en place (stamina-password-inline-edit) : soulignée en pointillés. */
    .password-inline-edit {
        color: var(--color-link);
        border-bottom: 1px dashed currentColor;
        cursor: pointer;
        text-decoration: none;
        &:focus-visible { outline: var(--line-width-active, 2px) solid var(--color-focus); outline-offset: 2px; }
        &.is-empty { color: var(--color-danger); font-style: italic; }
        &.is-editing { border-bottom: 0; cursor: default; }
    }
    /* Le champ déborde au-dessus des cellules voisines (colonnes étroites), sur fond de carte. */
    .password-inline-edit__field {
        position: relative;
        z-index: 5;
        display: inline-flex;
        align-items: center;
        gap: .25rem;
        min-width: 100%;
        padding: .125rem;
        border-radius: var(--radius-field);
        background: var(--color-surface);
        box-shadow: var(--shadow-card);
        > .input { flex: 1; min-width: 12rem; min-height: 1.875rem; padding-block: .125rem; }
    }
    /* La cellule en cours d'édition doit pouvoir afficher le champ entier. */
    .js-password-passwords-table td:has(.password-inline-edit.is-editing) { overflow: visible; }

    /* Code OTP : pastille avec barre de progression. */
    .password-otp {
        position: relative;
        overflow: hidden;
        padding: .4375rem .5rem;
        > [data-stamina-password-otp-target="timer"] {
            position: absolute;
            inset-inline-start: 0;
            bottom: 0;
            height: 2px;
            width: 100%;
            opacity: .6;
            transition: width 1s linear;
        }
    }

    /* Pastille compteur posée sur un bouton (informations complémentaires). */
    .password-counter {
        position: absolute;
        top: -.375rem;
        inset-inline-end: -.375rem;
        min-width: 1.125rem;
        height: 1.125rem;
        padding: 0 .25rem;
        border-radius: 999px;
        background: var(--color-warning-solid, var(--color-warning));
        color: #fff;
        font-size: .625rem;
        font-weight: 700;
        line-height: 1.125rem;
        text-align: center;
    }

    /* Données masquées : mot de passe non autorisé, ou mot de passe autorisé hors édition (copie au clic droit). */
    .filter-blur { filter: blur(3px); user-select: none; }
    .filter-blur:has(.password-inline-edit.is-editing) { filter: none; user-select: auto; }
    .filter-blur-container { position: relative; display: inline-block; }
    .filter-blur-icon {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        color: var(--color-muted);
        pointer-events: none;
    }

    /* Contenu riche d'une procédure (TinyMCE). */
    .process-content :is(ul, ol) { padding-left: 1.25rem; }
    .process-content ul { list-style: disc; }
    .process-content ol { list-style: decimal; }
    .process-content :is(p, ul, ol, pre, table) + :is(p, ul, ol, pre, table) { margin-top: .5rem; }
}