.login-box {
    width: 400px;
}

.is-invalid {
    border-color: var(--bs-danger) !important;
}

/* Tom Select (décision du 10/09/2026, voir docs/frontend.md) : le <select> natif porteur de la
   classe is-invalid/is-valid est masqué visuellement (Tom Select le remplace par un wrapper
   affiché juste à côté, toujours son frère adjacent immédiat) — la règle ci-dessus ne s'applique
   donc à rien de visible. Reportée explicitement sur ce wrapper. */
select.is-invalid + .ts-wrapper {
    border-color: var(--bs-danger) !important;
}
select.is-valid + .ts-wrapper {
    border-color: var(--bs-success) !important;
}

/* Tabulator (voir docs/frontend.md) : curseur normal par défaut sur une cellule, pointer réservé
   aux éléments réellement cliquables (lien Nom, boutons d'action) — pas de pointer sur du texte brut. */
.tabulator .tabulator-cell {
    cursor: default;
}

.tabulator .tabulator-cell a,
.tabulator .tabulator-cell button {
    cursor: pointer;
}

/* Boutons Filtrer/Réinitialiser de <filter-card> (FilterCardTagHelper) : même largeur malgré des
   textes de longueurs différentes (Bootstrap n'a pas d'utilitaire natif pour ça entre éléments flex
   de contenu différent - flex-fill seul ne suffit pas dans un conteneur déjà dimensionné à son
   contenu, col-md-auto). */
.filter-card-action {
    min-width: 110px;
}

/* Datatable.RemoteTable (voir docs/frontend.md) : le sélecteur Tabulator du nombre de lignes par
   page pose un <label> visible ("Lignes par page") en plus du <select> lui-même — pas d'option
   Tabulator pour ne garder que le select. Le retirer visuellement ne perd rien à l'accessibilité :
   Tabulator pose déjà aria-label/title équivalents directement sur le <select> (vérifié dans son
   code source). */
.tabulator-paginator label {
    display: none;
}

/* Fond de modale gris plutôt que noir (Bootstrap 5.2+ expose ces 2 variables CSS sur
   .modal-backdrop, vérifié dans son code source — pas une option du composant JS Modal, qui
   n'accepte que true/false/"static" pour `backdrop`). S'applique à toutes les modales du projet
   (formModal, waitModal, yesNoModal...) ; le fond reste non cliquable, seule son apparence change. */
.modal-backdrop {
    --bs-backdrop-bg: #6c757d;
    --bs-backdrop-opacity: 0.5;
}

/* Bootstrap force opacity:1 !important sur tout élément .fade quand prefers-reduced-motion: reduce
   est actif (_accessibility.scss — réglage "Réduire les animations" de l'OS/navigateur), ce qui
   écrasait notre --bs-backdrop-opacity ci-dessus (vérifié dans les DevTools). On recible
   .modal-backdrop.fade (plus spécifique que .fade seul) pour restaurer notre opacité, sans
   toucher au reste du comportement de accessibility.scss (transition: none reste inchangé). */
@media (prefers-reduced-motion: reduce) {
    .modal-backdrop.fade {
        opacity: var(--bs-backdrop-opacity) !important;
    }
}







/**/
table:has(tr.row-loader) {
    position: relative;
}
table tr.row-loader {
    height: 50px;
}

    table tr.row-loader .tabulator-alert {
        align-items: center;
        background: rgba(0,0,0,.4);
        display: flex;
        height: 100%;
        left: 0;
        position: absolute;
        text-align: center;
        top: 0;
        width: 100%;
        z-index: 100;
    }

        table tr.row-loader .tabulator-alert > .tabulator-alert-msg {
            background: #fff;
            border-radius: 10px;
            display: inline-block;
            font-size: 16px;
            font-weight: 700;
            margin: 0 auto;
            padding: 10px 20px;
            border: 4px solid #333;
            color: #000;
        }

.card-article > .card-body > p:last-child {
    margin-bottom: 0;
}

/* Curseur "interdit" sur un conteneur de contrôle désactivé (le contrôle lui-même n'a plus
   d'événements souris, voir Views/MailTemplates/Index.cshtml). */
.cursor-not-allowed {
    cursor: not-allowed;
}

/* Logo de l'entreprise (issue #87, _LoggedInLayout.cshtml) : fond blanc, pour qu'un logo sombre à fond
   transparent reste lisible sur le menu latéral (thème sombre) comme dans l'en-tête en thème sombre.
   Menu latéral : dans un rond, comme la fiche "Mon entreprise" (Views/Company/Index.cshtml) ; en-tête :
   petite pastille. Proportions conservées (object-fit: contain). */
.company-logo-sidebar,
.company-logo-header {
    background-color: #fff;
    object-fit: contain;
}

.company-logo-sidebar {
    border: 1px solid var(--bs-border-color);
    border-radius: 50%;
    box-sizing: border-box;
    height: 44px;
    padding: 0.25rem;
    width: 44px;
}

.company-logo-header {
    border-radius: 0.375rem;
    max-height: 28px;
    max-width: 90px;
    padding: 0.125rem 0.25rem;
    width: auto;
}