/**
 * dashboard-kit.css — styles propres au package DashboardKit
 */

/* Table bord-à-bord : padding uniquement sur les cellules de bord */
.table.dk-table > thead > tr > th:first-child,
.table.dk-table > tbody > tr > td:first-child { padding-left: 2rem; }

.table.dk-table > thead > tr > th:last-child,
.table.dk-table > tbody > tr > td:last-child  { padding-right: 2rem; }

/* En-tête de carte « barre d'actions » collant sous la barre supérieure fixe. Le collage desktop
   est assuré en combinant l'utilitaire Bootstrap .sticky-top ; ici on règle le décalage sous la
   barre, l'ombre de détachement et le fond adapté au thème (clair #fff / sombre #1e2632 via
   --bs-card-bg). Chargé après style.css : passe devant le top:0 de .sticky-top à specificite egale. */
.dk-sticky-header {
    top: 125px;
    z-index: 1000;
    background-color: var(--bs-card-bg);
    box-shadow: 0 1px 20px 0 #455a6414;
}

/* Mobile : on annule le sticky et on empile titre + actions en pleine largeur (les boutons en
   ligne prennent trop de place horizontalement sur petit écran). */
@media (max-width: 767.98px) {
    .dk-sticky-header {
        position: static;
        flex-direction: column;
        align-items: stretch;
        gap: 0.5rem;
    }
    .dk-sticky-header > .d-flex {
        flex-direction: column;
        align-items: stretch;
    }
    .dk-sticky-header > .d-flex .dropdown .btn {
        width: 100%;
    }
}

/* Bascule d'affichage des champs mot de passe : icone oeil superposee dans le champ (helper
   password_toggle()). Le conteneur .password-toggle (position relative) entoure le .form-control ;
   le bouton (label + checkbox .btn-check masquee par Bootstrap) est positionne a droite, et
   dashboard-kit.js y injecte l'icone SVG puis bascule le type du champ. Proprietes logiques
   (inset-inline-end / padding-inline-end) pour rester correct en RTL. Fonctionne aussi quand le
   conteneur est aussi un .input-group (l'icone se cale sur le bord droit du champ). */
.password-toggle {
    position: relative;
}

.password-toggle .form-control {
    padding-inline-end: 2.75rem;
}

.password-toggle-button {
    position: absolute;
    inset-block-start: 0;
    inset-inline-end: 0;
    z-index: 5;
    display: flex;
    align-items: center;
    height: 100%;
    margin: 0;
    padding: 0 0.75rem;
    color: var(--bs-secondary-color);
    cursor: pointer;
    background: none;
    border: 0;
    transition: color 0.15s ease-in-out;
}

.password-toggle-button:hover {
    color: var(--bs-emphasis-color);
}

/* Le bouton est superpose (hors flux) : quand le champ est dans un .input-group (icone a gauche),
   le conteneur .password-toggle ENVELOPPE le .input-group plutot que de fusionner avec lui, afin
   que le champ reste :last-child et conserve son arrondi de droite natif. */
.password-toggle > .input-group {
    margin-bottom: 0;
}

/* ==========================================================================
   Repli compact de la sidebar (layout vertical)
   Le burger (#sidebar-hide, cf. pcoded.js) ajoute .pc-sidebar-hide : au lieu de
   masquer totalement la sidebar (style.css : width:0), on la transforme en RAIL
   d'icones (100px) avec sous-menus en flyout au survol. Scope desktop uniquement
   (>= 1025px) pour preserver l'overlay mobile ; et layout VERTICAL uniquement
   (les variantes data-pc-layout=* / .layout-* gardent leur propre traitement).
   ========================================================================== */
/* `vsb` = layout VERTICAL replie. body sans data-pc-layout ni classe layout-* (cf. dk_body_attributes :
   le vertical ne pose ni l'un ni l'autre). On reprend la recette ROBUSTE du mode compact natif du Kit
   (rail 100px, icone centree, SimpleBar inchange) — la seule difference est le sous-menu, rendu en
   FLYOUT au survol via position:fixed (pose par dk-ui-prefs.js) pour echapper au clipping SimpleBar. */
@media (min-width: 1025px) {
    body:not([data-pc-layout]):not([class*="layout-"]) .pc-sidebar.pc-sidebar-hide {
        width: 100px;
        --pc-sidebar-border: none;
    }

    body:not([data-pc-layout]):not([class*="layout-"]) .pc-sidebar.pc-sidebar-hide .navbar-content {
        width: 100px;
    }

    /* Decalage du contenu : on remplace le margin-left:0 / left:0 de style.css par 100px. */
    body:not([data-pc-layout]):not([class*="layout-"]) .pc-sidebar.pc-sidebar-hide ~ .pc-footer,
    body:not([data-pc-layout]):not([class*="layout-"]) .pc-sidebar.pc-sidebar-hide ~ .pc-container {
        margin-left: 100px;
    }

    body:not([data-pc-layout]):not([class*="layout-"]) .pc-sidebar.pc-sidebar-hide ~ .pc-container .page-header,
    body:not([data-pc-layout]):not([class*="layout-"]) .pc-sidebar.pc-sidebar-hide ~ .pc-header {
        left: 100px;
    }

    /* Brand reduit, textes / captions / fleches masques. */
    body:not([data-pc-layout]):not([class*="layout-"]) .pc-sidebar.pc-sidebar-hide .m-header {
        /* .navbar-wrapper reste large de 280px et deborde du rail (overflow:hidden) : sans
           cette largeur, le centrage viserait le milieu des 280px, hors de la zone visible. */
        width: 100px;
        padding-inline: 8px;
        justify-content: center;
    }

    /* Le lockup complet ne tient pas dans un rail de 100px : on lui substitue le symbole seul
       (brand['logoMark']), que le theme garde masque partout ailleurs. */
    body:not([data-pc-layout]):not([class*="layout-"]) .pc-sidebar.pc-sidebar-hide .m-header .logo-lg,
    body:not([data-pc-layout]):not([class*="layout-"]) .pc-sidebar.pc-sidebar-hide .m-header .b-version {
        display: none;
    }

    body:not([data-pc-layout]):not([class*="layout-"]) .pc-sidebar.pc-sidebar-hide .m-header .logo-sm {
        display: inline-block;
        width: 42px;   /* gabarit de la tuile du lockup : pas de saut visuel a la bascule */
        height: auto;
    }

    body:not([data-pc-layout]):not([class*="layout-"]) .pc-sidebar.pc-sidebar-hide .pc-mtext,
    body:not([data-pc-layout]):not([class*="layout-"]) .pc-sidebar.pc-sidebar-hide .pc-arrow,
    body:not([data-pc-layout]):not([class*="layout-"]) .pc-sidebar.pc-sidebar-hide .pc-caption label {
        display: none;
    }

    body:not([data-pc-layout]):not([class*="layout-"]) .pc-sidebar.pc-sidebar-hide .pc-caption {
        padding: 8px 0;
    }

    /* Icone centree dans le rail. */
    body:not([data-pc-layout]):not([class*="layout-"]) .pc-sidebar.pc-sidebar-hide .pc-navbar > .pc-item > .pc-link {
        justify-content: center;
        padding: 14px 0;
    }

    /* Icone agrandie comme la reference compact (boite 46x27, glyphe 22px). */
    body:not([data-pc-layout]):not([class*="layout-"]) .pc-sidebar.pc-sidebar-hide .pc-navbar > .pc-item .pc-micon {
        width: 46px;
        height: 27px;
        margin: 0;
    }

    body:not([data-pc-layout]):not([class*="layout-"]) .pc-sidebar.pc-sidebar-hide .pc-navbar > .pc-item .pc-micon i {
        font-size: 22px;
    }

    body:not([data-pc-layout]):not([class*="layout-"]) .pc-sidebar.pc-sidebar-hide .pc-navbar > .pc-item .pc-micon > svg {
        width: 26px;
        height: 26px;
    }

    /* Sous-menu masque dans le rail ; il est revele en flyout (cf. .dk-flyout, pose par JS).
       :not(.dk-flyout) + !important pour battre un display:block inline laisse par pcoded.js. */
    body:not([data-pc-layout]):not([class*="layout-"]) .pc-sidebar.pc-sidebar-hide .pc-navbar > li.pc-hasmenu > .pc-submenu:not(.dk-flyout) {
        display: none !important;
    }
}

/* Flyout du sous-menu en mode rail : positionne en fixed par dk-ui-prefs.js (left/top inline),
   non clippe par SimpleBar. Ici on ne gere que l'apparence + la reapparition des libelles. */
.pc-sidebar .pc-submenu.dk-flyout {
    min-width: 220px;
    padding: 8px 0;
    background: var(--pc-sidebar-background);
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
    z-index: 1050;
}

/* !important : bat la regle de masquage du rail (.pc-sidebar-hide .pc-mtext), plus specifique
   a cause des :not(...) de son selecteur de portee. */
.pc-sidebar .pc-submenu.dk-flyout .pc-mtext {
    display: inline-block !important;
}

.pc-sidebar .pc-submenu.dk-flyout .pc-link {
    padding: 10px 18px;
}

.pc-sidebar .pc-submenu.dk-flyout .pc-link::after {
    display: none;
}

/* Titre de l'item (item a sous-menu) affiche en tete du flyout — non clicable.
   Hors flyout (mode plein), il reste masque. Injecte par dk-ui-prefs.js. */
.pc-sidebar .pc-submenu > .dk-flyout-title {
    display: none;
}

.pc-sidebar .pc-submenu.dk-flyout > .dk-flyout-title {
    display: block;
    padding: 4px 18px 10px;
    margin-bottom: 6px;
    font-size: 13px;
    font-weight: 600;
    color: var(--pc-sidebar-color);
    border-bottom: 1px solid var(--pc-sidebar-submenu-border-color);
    cursor: default;
}

/* Boutons d'acces rapide (.pct-c-btn) : icones agrandies. */
.pct-c-btn .pct-btn i {
    font-size: 22px;
}

/* Toggle du menu profil : le Kit desactive son survol (::before masque, fond transparent). On
   retablit un simple fond gris au survol — et tant que le menu est ouvert — comme les autres
   boutons du header (meme teinte que leur calque ::before). */
.pc-header .header-user-profile .pc-head-link:hover,
.pc-header .header-user-profile .pc-head-link:focus,
.pc-header .header-user-profile .pc-head-link.show,
.pc-header .header-user-profile .pc-head-link[aria-expanded="true"] {
    background-color: rgba(var(--pc-header-color-rgb), 0.09);
}

/* Avatar a initiales (<span class="avtar">) en guise d'<img class="user-avtar"> de la reference :
   la regle mobile du theme (style.css : .header-user-profile .pc-head-link > span { display:none }
   sous 576px) masque TOUS les > span et viderait donc le bouton profil. On re-affiche l'avatar ;
   seul le bloc nom/role (l'autre > span) reste masque sur mobile. */
@media (max-width: 575.98px) {
    .pc-header .header-user-profile .pc-head-link > span.avtar {
        display: inline-flex !important;
    }
}

/* ==========================================================================
   Bouton « retour haut de page » (cf. dk-ui-prefs.js qui bascule .show au scroll)
   ========================================================================== */
.dk-scroll-top {
    position: fixed;
    inset-block-end: 24px;
    inset-inline-end: 24px;
    z-index: 1030;
    width: 44px;
    height: 44px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    opacity: 0;
    visibility: hidden;
    transform: translateY(8px);
    transition: opacity 0.2s ease, visibility 0.2s ease, transform 0.2s ease;
}

/* Visible mais semi-transparent : on laisse deviner le contenu derriere.
   Au survol, opacite pleine + leger zoom (effet). */
.dk-scroll-top.show {
    opacity: 0.55;
    visibility: visible;
    transform: translateY(0);
}

.dk-scroll-top.show:hover {
    opacity: 1;
    transform: translateY(0) scale(1.08);
}

/* ==========================================================================
   Visite guidée (Driver.js) : accord du popover et des boutons au thème du Kit.

   ⚠️ Chaque sélecteur est volontairement SUR-SPÉCIFIÉ d'un cran par rapport à
   `driver.min.css`. Driver.js n'étant pas chargé par `admin_layout` mais par la page
   qui joue la visite, sa feuille arrive APRÈS celle-ci : à spécificité égale elle
   gagnerait et tout l'habillage ci-dessous serait silencieusement sans effet.

   ⚠️ Le popover garde DÉLIBÉRÉMENT le même rendu en thème clair et en thème sombre :
   les couleurs sont figées sur la palette CLAIRE du thème plutôt que lues dans les
   variables. Branchées sur `--bs-card-bg` / `--bs-body-color` / `--bs-border-color`,
   les commandes devenaient sombre-sur-sombre et se voyaient à peine en thème sombre.
   Le voile de Driver.js assombrit la page derrière : une carte claire s'y détache
   dans les deux thèmes. Seule la primaire reste variable — elle est portée par le
   PRESET, qui ne change pas d'un thème à l'autre, donc l'accent suit le preset actif
   sans rompre l'uniformité clair/sombre.
   ========================================================================== */
body .driver-popover {
    border-radius: 0.5rem;
    background-color: #ffffff;
    color: #293240;
    box-shadow: 0 8px 24px rgba(27, 46, 75, 0.28);
    min-width: 280px;
    max-width: 340px;
}

.driver-popover .driver-popover-title {
    font-size: 1rem;
    font-weight: 600;
    color: #293240;
}

.driver-popover .driver-popover-description,
.driver-popover .driver-popover-progress-text {
    color: rgba(33, 37, 41, 0.75);
}

.driver-popover .driver-popover-close-btn {
    color: rgba(33, 37, 41, 0.75);
}

.driver-popover .driver-popover-close-btn:hover,
.driver-popover .driver-popover-close-btn:focus {
    color: #293240;
}

/* La flèche hérite de `border: 5px solid #fff` : sa couleur se reprend côté par côté. */
.driver-popover .driver-popover-arrow-side-left {
    border-left-color: #ffffff;
}

.driver-popover .driver-popover-arrow-side-right {
    border-right-color: #ffffff;
}

.driver-popover .driver-popover-arrow-side-top {
    border-top-color: #ffffff;
}

.driver-popover .driver-popover-arrow-side-bottom {
    border-bottom-color: #ffffff;
}

/* Bordure prise à `gray-400` et non au `--bs-border-color` clair (#e9ecef), trop pâle
   pour qu'un bouton secondaire se lise sur le blanc du popover. */
.driver-popover .driver-popover-footer-btn {
    border-radius: 0.375rem;
    border: 1px solid #ced4da;
    background-color: #ffffff;
    color: #293240;
    padding: 0.25rem 0.75rem;
    font-size: 0.8125rem;
    text-shadow: none;
    transition: background-color 0.15s ease, border-color 0.15s ease;
}

.driver-popover .driver-popover-footer-btn:hover,
.driver-popover .driver-popover-footer-btn:focus {
    background-color: #f8f9fa;
    border-color: #adb5bd;
    color: #000000;
    box-shadow: none;
}

/* Bouton d'action principal (Suivant / Terminer — Driver.js ajoute `done-btn` sur ce
   même bouton à la dernière étape) : variante pleine couleur primaire. */
.driver-popover .driver-popover-next-btn,
.driver-popover .driver-popover-next-btn:hover,
.driver-popover .driver-popover-next-btn:focus {
    background-color: var(--bs-primary);
    border-color: var(--bs-primary);
    color: #fff;
}

.driver-popover .driver-popover-next-btn:hover,
.driver-popover .driver-popover-next-btn:focus {
    filter: brightness(0.92);
}

/* Cases à cocher de la corbeille : fond blanc + bordure marquée. Sans cela le style par défaut
   (fond = --bs-body-bg, bordure claire) rend la case gris-sur-gris quasi invisible dans l'en-tête
   de tableau grisé (thead). S'applique aux cases de ligne ET à la case « tout cocher ». */
.dk-table [data-dk-check]:not(:checked),
.dk-table [data-dk-check-all]:not(:checked) {
    background-color: #fff;
    border-color: #8996a4;
}

/* Pages d'authentification v3 (carte scindée photo | formulaire). Le thème stylise .auth-main.v3
   mais ne fournit AUCUNE règle pour .img-card-side : avec le seul .img-fluid la photo garderait sa
   hauteur naturelle et laisserait un vide sous elle. On la force donc à couvrir sa colonne, et on
   rogne la carte pour que la photo respecte les coins arrondis. */
.auth-main.v3 .auth-form .card {
    overflow: hidden;
}

.auth-main.v3 .img-card-side {
    padding: 0;
}

.auth-main.v3 .img-card-side > img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Hauteur plancher de la colonne formulaire : c'est elle qui étire la rangée, donc la photo. Sans
   ce minimum, un écran court (message magic-link, 2FA) écraserait la photo en bandeau. */
@media (min-width: 768px) {
    .auth-main.v3 .card-body {
        min-height: 480px;
    }
}

/* Voile sombre sous la légende posée sur la photo : le texte blanc doit rester lisible quelle que
   soit l'illustration fournie par le projet hôte. */
.auth-main.v3 .img-card-side .img-card-caption {
    background: linear-gradient(to top, rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0));
}

/* Mobile : le thème ajoute 20px de marge latérale à une carte qui fait DÉJÀ width:100% (largeur
   calculée sur la colonne .auth-form, elle-même déjà dotée d'un padding de 15px) — la carte est
   donc décalée vers la droite et déborde de l'écran. On neutralise ces marges plutôt que la
   largeur, pour ne toucher que la variante v3. */
@media (max-width: 767.98px) {
    .auth-main.v3 .auth-wrapper .auth-form .card {
        margin-left: 0;
        margin-right: 0;
    }
}

/* Carte d'authentification : le corps de carte de la variante v3 est un conteneur flex en colonne,
   dont l'axe transversal est horizontal — sans cette regle, la marque (enfant direct, image nue ou
   lien vers l'accueil) est etiree a toute la largeur de la carte au lieu de garder sa taille propre. */
.auth-main .auth-form .card-body > img,
.auth-main .auth-form .card-body > .dk-auth-brand {
    align-self: center;
}

/* Le lien de marque ne doit rien ajouter visuellement : ni soulignement, ni couleur de lien. */
.dk-auth-brand {
    display: inline-block;
    line-height: 0;
}

/* Tiroir de filtres élargi (`$filtersWide` de admin_table_layout) : laisse la place à une mise en
   page sur deux colonnes. La classe est posée sur l'offcanvas par le gabarit ; la règle vivait
   auparavant dans un <style> en ligne de ce même gabarit, alors qu'elle a sa place ici. */
#crud-filters.dk-offcanvas-wide {
    width: min(720px, 92vw);
}

/* Listes de cases à cocher longues (helper `dk_checkbox_list`).
   Les colonnes sont faites par le CSS et non par un compteur PHP qui refermerait une colonne
   toutes les N lignes : le filtrage masque des éléments, et une répartition figée à l'écriture
   laisserait une colonne vide pendant qu'une autre déborde. */
.dk-checklist-list {
    column-gap: 1.5rem;
}

.dk-checklist-list .form-check {
    break-inside: avoid;
}

.dk-checklist-cols-2 {
    column-count: 2;
}

.dk-checklist-cols-3 {
    column-count: 3;
}

@media (max-width: 767.98px) {
    .dk-checklist-cols-2,
    .dk-checklist-cols-3 {
        column-count: 1;
    }
}

/* .input-group vaut width:100% : sans base explicite, le champ de recherche pousserait l'intitulé
   de la liste hors de sa ligne. */
.dk-checklist-search {
    flex: 0 1 16rem;
    min-width: 10rem;
}

/* Sections de la liste. Chaque section porte SON PROPRE column-count : un unique conteneur
   multi-colonnes couperait les intertitres au milieu d'une colonne, et un élément se retrouverait
   sous le titre de la section voisine. */
.dk-checklist-group + .dk-checklist-group {
    margin-top: 0.75rem;
}

/* Intertitre + bouton de bascule sur une même ligne : le filet doit courir sous les DEUX, sinon il
   s'arrête au titre et le bouton flotte au-dessus de la liste. */
.dk-checklist-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    font-weight: 600;
    padding-bottom: 0.25rem;
    margin-bottom: 0.5rem;
    border-bottom: 1px solid var(--bs-border-color);
}

/* ---------------------------------------------------------------------------------------------
   Bandeau supérieur pleine largeur (Config\DashboardKit::$topBanner)

   Le shell Able Pro épingle TOUT son chrome au sommet du viewport, avec des décalages littéraux :
   .pc-sidebar top:0, .pc-header sans `top` (donc à sa position statique, soit 0), .page-header
   top:70px, .pc-container position:relative top:70px. Un bandeau posé dans le flux serait donc
   recouvert par les trois premiers — et il défilerait, ce qu'un indicateur d'état ne doit pas
   faire. Il est donc FIXE lui aussi, et ce sont les quatre ancres qu'on décale d'une hauteur
   unique.

   ⚠️ --dk-topbar-height est un CONTRAT : rien ne mesure le bandeau. S'il grandit (contenu renvoyé
   à la ligne), il glisse sous un chrome resté à sa place, sans aucune erreur. D'où hauteur figée
   + overflow:hidden ici, et contenu sur une seule ligne côté hôte.
--------------------------------------------------------------------------------------------- */
:root {
    --dk-topbar-height: 44px;
}

.dk-topbar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    /* Au-dessus de .pc-sidebar (1026) et .pc-header (1025), sous la modale (1055) : le bandeau
       couvre le chrome mais ne doit jamais passer devant une boîte de dialogue. */
    z-index: 1030;
    height: var(--dk-topbar-height);
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    padding: 0 1rem;
    white-space: nowrap;
    font-size: 0.875rem;
}

/* Icône générique d'un bandeau construit sur .dk-topbar (ex. dk_maintenance_banner()) : ne
   rétrécit jamais et garde une taille légèrement supérieure au texte. Un bandeau qui a besoin
   d'autre chose (troncature de texte variable, bouton qui ne doit pas rétrécir) le règle chez lui,
   comme le fait déjà .impersonation-topbar côté SAV. */
.dk-topbar-icon {
    flex-shrink: 0;
    font-size: 1.125rem;
}

/* Un <code> prend la couleur --bs-code-color du thème (rose-rouge) : sur le fond rouge de
   `text-bg-danger` il devient illisible, et rien ne le signale. Jaune clair plutôt que le jaune
   du thème (--bs-warning), trop sombre sur ce rouge (contraste 1,8 contre 2,8). */
.dk-topbar.text-bg-danger code {
    color: #ffe066;
}

/* Décalage du chrome. Chaque sélecteur porte `body.dk-has-topbar` : sans bandeau, aucune de ces
   règles ne s'applique et la géométrie du thème est celle d'origine, à l'octet près. */
body.dk-has-topbar .pc-sidebar,
body.dk-has-topbar .pc-header {
    top: var(--dk-topbar-height);
}

/* ≤1024px, le thème descend la barre supérieure de 70px quand le logo mobile s'ouvre. */
body.dk-has-topbar .pc-header.mob-header-active {
    top: calc(70px + var(--dk-topbar-height));
}

body.dk-has-topbar .pc-container {
    top: calc(70px + var(--dk-topbar-height));
    /* Le décalage se paie sur la hauteur minimale, sinon le pied de page part sous la ligne de
       flottaison sur les pages courtes. 131px = valeur du thème (barre + pied). */
    min-height: calc(100vh - 131px - var(--dk-topbar-height));
}

@media (max-width: 575.98px) {
    body.dk-has-topbar .pc-container {
        top: calc(58px + var(--dk-topbar-height));
    }
}

/* Le fil d'Ariane n'est fixe qu'au-delà de 1024px ; en dessous le thème le repasse en
   position:relative et le décaler le ferait flotter au milieu du contenu. */
@media (min-width: 1025px) {
    body.dk-has-topbar .page-header {
        top: calc(70px + var(--dk-topbar-height));
    }
}

/* Tri par glisser-déposer (dk-sortable.js). Sans curseur explicite, rien à l'écran ne dit qu'un
   élément se déplace ; le ghost est l'empreinte laissée par la ligne en cours de déplacement. */
.dk-sort-handle {
    cursor: grab;
}

.dk-sort-handle:active {
    cursor: grabbing;
}

.dk-sort-ghost {
    opacity: 0.4;
    background-color: var(--bs-secondary-bg);
}

/* Lignes dynamiques (dk-rows.js). Une ligne existante « supprimée » reste visible et annulable : ses champs sont
   désactivés (donc non postés), la cellule d'actions garde son lien « Annuler » lisible. */
.dk-rows-deleted > td:not(.dk-rows-actions) {
    opacity: 0.45;
    text-decoration: line-through;
}

.dk-rows .dk-rows-undo {
    text-decoration: underline;
}

/* Colonne de cases à cocher d'une liste (dk_trash_check_all) : au plus étroit. */
.dk-col-check {
    width: 1%;
}

/* Pastille d'icône du fil d'activité (crud/activity_timeline). */
.dk-timeline-icon {
    width: 2.25rem;
    height: 2.25rem;
}