/* ------------------------------------------------------------------
   App-wide UI fixes (loaded after dashlite.css / theme.css).
   The bundled Bootstrap build ships without flex `gap-*` utilities, so
   every `gap-1/2/3` in the app collapsed to 0 — action-button rows touched
   and filter toolbars overflowed. Restore them + make toolbars wrap.
   ------------------------------------------------------------------ */

/* 1. Flex gap utilities (were missing from the compiled CSS) */
.gap-1 { gap: 0.25rem !important; }
.gap-2 { gap: 0.5rem !important; }
.gap-3 { gap: 1rem !important; }
.gap-4 { gap: 1.5rem !important; }
.row-gap-1 { row-gap: 0.25rem !important; }
.column-gap-1 { column-gap: 0.25rem !important; }

/* 2. Filter / action toolbars: wrap instead of overflowing their column.
   The list pages put "Filtrer / Réinitialiser / Supprimer la sélection"
   in a narrow grid column; when the labels are long (e.g. in French) the
   buttons overran into the next column and overlapped. */
.card-inner .form-group.d-flex {
    flex-wrap: wrap;
    row-gap: 0.5rem;
    column-gap: 0.5rem;
}
.card-inner .form-group.d-flex > .btn {
    white-space: nowrap;
}

/* 3. Table row action clusters: keep the icon buttons evenly spaced and let
   them wrap on narrow screens instead of bleeding out of the Actions cell.
   SCOPED to flex cells that actually contain buttons — must NOT touch the
   "Nom" cell (avatar + name), which is also a d-flex. */
.nk-tb-col-tools .btn + .btn,
table td .btn-icon + .btn-icon,
table td .d-flex > .btn + .btn {
    margin-left: 0.25rem;
}
table td .d-flex:has(> .btn),
table td .d-flex:has(> .btn-icon) {
    flex-wrap: wrap;
    row-gap: 0.25rem;
    justify-content: center;
}

/* 4. Icon action buttons: consistent square shape so outline variants read
   as neat buttons, not stretched pills. */
.btn.btn-icon.btn-sm {
    height: calc(1.5em + 0.5rem + 2px);
    width: calc(1.5em + 0.5rem + 2px);
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}