/* PDC COLORS */
:root {
  --pdc-grey: #dfdfdc;
  --pdc-grey-600: #e2e2df;
  --pdc-grey-700: #93938a;
  --pdc-grey-900: #40403b;
  --pdc-orange: #ee7060;
  --pdc-orange-700: #e83921;
  --pdc-blue-grey: #f4f6f9;
  --pdc-blue: #574b90;
  --pdc-blue-500: #776bb3;
  --pdc-blue-900: #302a51;
  --pdc-cyan-600: rgba(42, 123, 155, 1);
  --pdc-cyan-900: #0d2630;
  --green-success: #3e8e4f;
  --green-success-900: #255530;
}

/*Prevent sidebar-overlay to trigger on a popup window*/
body.popup .sidebar-overlay,
body.popup #sidebar-overlay {
  display: none !important;
}

/* LOGO */
/* Text brand hidden */
span.brand-text,
.brand-text {
  display: none !important;
}

/* Logo's position */
a.brand-link {
  width: 100%;
  justify-content: center;
}

.brand-link .img-circle {
  border-radius: 0 !important;
}

.brand-link .elevation-3 {
  box-shadow: none !important;
}

.brand-link {
  background: white;
  /* AdminLTE 4 supprime le padding du bandeau de marque : on restitue les
     dimensions d'origine (250 x 57 px, padding 13px 8px). */
  padding: 13px 8px !important;
}

/* Le bandeau doit occuper toute la largeur de la barre latérale */
.sidebar-brand {
  padding: 0 !important;
}

/* AdminLTE 4 retire les classes de marge mt-3 pb-3 mb-3 du bloc utilisateur */
.app-sidebar .user-panel {
  margin-top: 1rem;
  padding-bottom: 1rem;
  margin-bottom: 1rem;
}

/* AdminLTE 4 ne dimensionne plus l'avatar : on restitue les 2.4rem d'origine */
.app-sidebar .user-panel .image {
  padding-left: 0.8rem;
}

.app-sidebar .user-profile {
  font-size: 2.4rem;
  color: #ffffff;
}

/* AdminLTE 4 tronque les libellés du menu ; l'ancien thème les laissait
   passer à la ligne (« Utilisateurs·rices anonymisé·es » sur deux lignes). */
.app-sidebar .nav-link p {
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
}

/* Ombre portée identique à celle de l'ancien thème (classe elevation-4).
   !important : .app-sidebar porte l'utilitaire Bootstrap 5 .shadow. */
.app-sidebar {
  box-shadow:
    0 14px 28px rgba(0, 0, 0, 0.25),
    0 10px 10px rgba(0, 0, 0, 0.22) !important;
}

.brand-link .brand-image {
  opacity: 1 !important;
  margin-right: 0 !important;
}

.fa-sort-alpha-down {
  color: var(--pdc-grey-600);
}

.fa-sort-alpha-down:hover {
  color: var(--pdc-grey-700);
}

/* PDC COLORS APPLICATION */

/* Aside */
.user-panel {
  padding-bottom: 1rem;
  margin-bottom: 1rem;
}
.user-profile {
  font-size: 2.4em;
}
.sidebar-open #jazzy-sidebar {
  box-shadow:
    0 14px 28px rgba(0, 0, 0, 0.25),
    0 10px 10px rgba(0, 0, 0, 0.22) !important;
}
#jazzy-sidebar {
  background: var(
    --pdc-blue
  ) !important; /*Jazzmin 3.0.5 set dark theme by default even if we set light on the settings */
}

/*Getting rid of the default box-shadow on img logos*/
#jazzy-logo img {
  box-shadow: none !important;
}

.sidebar-brand {
  background-color: var(--pdc-blue-grey);
}

/* AdminLTE 4 pose la classe utilitaire Bootstrap .bg-body-secondary sur la
   barre latérale. Les utilitaires BS5 sont en !important : sans !important
   ici, le violet PDC est écrasé par le gris par défaut. */
#jazzy-sidebar,
.app-sidebar {
  background: var(--pdc-blue) !important;
  /* Variables de thème AdminLTE 4 */
  --lte-sidebar-color: rgba(255, 255, 255, 0.7);
  --lte-sidebar-hover-color: #ffffff;
  --lte-sidebar-hover-bg: rgba(255, 255, 255, 0.1);
  --lte-sidebar-active-color: #ffffff;
  --lte-sidebar-header-color: rgba(255, 255, 255, 0.6);
  --lte-sidebar-menu-active-bg: var(--pdc-orange);
  --lte-sidebar-menu-active-color: #ffffff;
  --lte-sidebar-submenu-color: rgba(255, 255, 255, 0.7);
  --lte-sidebar-submenu-hover-color: #ffffff;
  --lte-sidebar-submenu-hover-bg: rgba(255, 255, 255, 0.1);
}

.nav-item .nav-link li p {
  color: white;
  opacity: 0.8;
}

#jazzy-tabs .nav-link {
  color: var(--pdc-orange) !important;
}

#jazzy-tabs .nav-link.active {
  color: var(--pdc-orange-700) !important;
}

/* .nav-item .nav-link.active{
                        background-color: var(--pdc-orange);
                    }

                    .nav-item .nav-link{
                        opacity: 1 !important;
                    } */

/*Section sidebar label*/
.nav-header {
  color: rgb(255, 255, 255, 0.3) !important;
  margin-top: 1rem;
}

/*nav-icons size*/
.sidebar-wrapper .nav-icon {
  font-size: 1.1rem;
}
/* Proprerties of all nav-link items */
.sidebar .nav-sidebar .nav-link {
  color: white;
  opacity: 0.7;
  transition:
    opacity 0.2s ease-in-out,
    background-color 0.2s;
} /*Probably can delete this because it does nothing even with the old version of Jazzmin*/

a.d-block:hover {
  color: #ffffff;
}
/*White-space for nav-link p*/
.sidebar-wrapper .nav-link p {
  white-space: normal !important;
}

/* On hover: text opacity to 1 */
.sidebar .nav-sidebar .nav-link:hover {
  opacity: 1;
  color: #ffffff;
}

/* Active: backgroud orange */
.sidebar-dark-primary .nav-sidebar > .nav-item > .nav-link.active,
.app-sidebar .nav-sidebar > .nav-item > .nav-link.active {
  background-color: var(--pdc-orange) !important;
  color: #ffffff !important;
  opacity: 1;
  box-shadow:
    0 1px 3px rgba(0, 0, 0, 0.12),
    0 1px 2px rgba(0, 0, 0, 0.24);
}

/*Dashboard*/
.separator-title-nav {
  padding-right: 1rem;
  margin-right: 1rem !important;
  border-right: 1px solid #dee2e6 !important;
}

/*Change breadcrumb label*/
.breadcrumb-item + .breadcrumb-item::before {
  color: #6c757d;
  content: var(--bs-breadcrumb-divider, "\203A") !important;
}

/*Groupes*/
#id_permissions_from_title {
  border: 1px solid #ccc;
  text-align: center;
  margin-bottom: 1em;
  padding: 0.5em;
}

#id_permissions_to_title {
  border: 1px solid #ccc;
  text-align: center;
  margin-bottom: 1em;
  padding: 0.5em;
  background: #007bff;
  color: #fff;
}

#id_permissions_from_title .helptext,
#id_permissions_to_title .helptext {
  display: none;
}

.field-permissions .selector-chooser {
  width: 6%;
}

.field-permissions .selector-chooser li button {
  width: 100%;
  height: 17px;
  display: block;
  text-indent: -3000px;
  overflow: hidden;
  cursor: default;
  opacity: 0.3;
  border: none;
}

.field-permissions .selector-chooser li #id_permissions_add {
  font-size: 0;
  background: url("./selector-icons.cd8b87a95c57.svg") 0 -96px no-repeat;
}

.field-permissions
  .selector-chooser
  li
  #id_permissions_add:hover:not([disabled]) {
  background-position: 0 -112px;
  cursor: pointer;
  opacity: 1;
}

#id_permissions_selector_chosen,
.list-footer-display,
.selector-available {
  text-align: center;
}

#id_permissions_remove_all {
  font-size: 0;
  border: none;
  display: inline-block;
  height: 16px;
  margin: 1px auto 3px;
  overflow: hidden;
  font-weight: bold;
  line-height: 16px;
  color: #007bff;
  text-decoration: none;
  opacity: 0.3;
  padding: 0 0 0 18px;
  background: url("./selector-icons.cd8b87a95c57.svg") 0 -128px no-repeat;
  cursor: default;
}

#id_permissions_remove_all::after {
  content: "Tout enlever";
  font-size: 1rem;
  text-align: center;
}

#id_permissions_remove_all:hover:not([disabled]) {
  background-position: 0 -144px;
  opacity: 1;
  cursor: pointer;
  color: #0056b3;
}

#id_permissions_add_all {
  font-size: 0;
  border: none;
  display: inline-block;
  height: 16px;
  margin: 1px auto 3px;
  overflow: hidden;
  font-weight: bold;
  line-height: 16px;
  color: #007bff;
  text-decoration: none;
  opacity: 0.3;
  padding: 0 18px 0 0;
  background: url("./selector-icons.cd8b87a95c57.svg") right -160px no-repeat;
  cursor: default;
}

#id_permissions_add_all::after {
  content: "Tout choisir";
  font-size: 1rem;
  text-align: center;
}

#id_permissions_add_all:hover:not([disabled]) {
  background-position: 100% -176px;
  opacity: 1;
  cursor: pointer;
  color: #0056b3;
}

.field-permissions .selector-chooser li #id_permissions_remove {
  font-size: 0;
  background: url("./selector-icons.cd8b87a95c57.svg") 0 -64px no-repeat;
}

.field-permissions
  .selector-chooser
  li
  #id_permissions_remove:hover:not([disabled]) {
  background-position: 0 -80px;
  cursor: pointer;
  opacity: 1;
}

/*Get selectors border-top back*/
.selector .selector-filter,
.selector .select,
#id_permissions_from,
#id_permissions_to {
  border-top: 1px solid var(--bs-border-color) !important;
}

.card {
  margin-bottom: 0 !important;
}

.card-secondary.card-outline {
  border-top: 3px solid #6c757d;
}

#evènements-tab fieldset,
#en-cours-tab > div,
#à-lentrée-tab > div,
#informations-tab > div,
#général-tab > div,
#mesures-pénales-tab fieldset,
#emplois-tab fieldset,
#anonymized_events-group fieldset {
  border: none !important;
  box-shadow: none;
}

.btn-success,
.alert-success {
  background: var(--green-success) !important;
  border: var(--green-success) !important;
}

.btn-success:hover {
  background: var(--green-success-900) !important;
}

.field-last_name_display a {
  color: var(--pdc-grey-900) !important;
}

.btn-primary,
.btn-info {
  background-color: var(--pdc-orange) !important;
  color: white;
  border: var(--pdc-orange) !important;
}

.btn-primary:hover,
.btn-info:hover {
  background-color: var(--pdc-orange-700) !important;
}

.btn-default {
  background-color: #f8f9fa;
  border-color: #ddd;
  color: #444;
}

#jazzy-actions .btn-info,
.login-box .btn-primary {
  background-color: var(--pdc-blue) !important;
  border: var(--pdc-blue) !important;
}

#jazzy-actions .btn-info:hover,
.login-box .btn-primary:hover {
  background-color: var(--pdc-blue-900) !important;
  border: var(--pdc-blue-900) !important;
}

.password-reset-link a,
.readonly a {
  color: var(--pdc-blue) !important;
}

.password-reset-link a:hover,
.readonly a {
  color: var(--pdc-blue-900) !important;
}

.readonly {
  background-color: transparent !important;
  border: none !important;
  border-radius: 0 !important;
}

p.date {
  margin-bottom: 0px;
}

.datetimeshortcuts a {
  color: var(--pdc-grey-700) !important;
}

/* NEW USER GREEN BANNER */

/* Button close  */
.alert-dismissible .close {
  color: white !important;
  opacity: 0.7 !important;
}

.alert-dismissible .close:hover {
  opacity: 1 !important;
}

.alert-dismissible a.active,
.alert-dismissible a {
  color: white !important;
  font-weight: 600;
  text-decoration: none !important;
}

.alert-dismissible a.active:hover,
.alert-dismissible a:hover {
  text-decoration: underline !important;
}

/* INPUTS ICONS */

.change-related {
  display: none;
}

.delete-related {
  display: none;
}

.impersonation-button {
  display: block;
  width: 100%;
  text-align: center;
}

/* BADGES */

.badge-dark {
  background-color: var(--pdc-grey-700) !important;
}

/* MINOR CORRECTIONS */

/* On "User" section, when "Mes pilotes" is active: gap added between button "Rechercher" and "x Résultats" */
#changelist-search .form-group {
  gap: 10px;
}

/* dnone on "Note : l'heure du serveur précède votre heure de 1 heure." */
.timezonewarning {
  display: none;
}

/* help/error margin top removed to make it more clearly associated to its input */
.help-block {
  color: var(--pdc-orange);
  margin-top: 4px;
  font-size: 0.9em;
}

.help-block ul {
  margin-top: 0 !important;
}

/*Timeline icons style */
.timeline div i.fas,
.fa.fa-clock {
  border-radius: 50%;
  font-size: 1rem;
  height: 30px;
  left: 18px;
  line-height: 30px;
  position: absolute;
  text-align: center;
  top: 0;
  width: 30px;
  color: #fff;
}

.timeline div .timeline-item .time i.fas.fa-clock {
  color: #999;
  font-size: 12px;
  height: auto;
  left: auto;
  position: inherit;
  width: auto;
}

.bg-blue {
  background-color: #007bff;
}

.bg-gray {
  background-color: #6c757d;
}

.errorlist {
  color: #dc3545;
  list-style: none;
  padding: 0;
}

/* TABLE ELEMENTS */
.card tr[role="row"] th a,
.card tr[role="row"] i,
.timeline a {
  color: var(--pdc-grey-900) !important;
}

.card tr[role="row"] th a:hover,
.card tr[role="row"] i:hover,
.timeline a:hover {
  color: black !important;
}

.breadcrumb-item a,
thead a,
thead span,
#result_list thead th .text span,
#changelist-form thead th a {
  color: white !important;
}

/* suppression de la x dans le tableau */
.fa.fa-times.float-right::before,
.fa.fa-times.float-end::before {
  display: none !important;
}

/* First line of tabs */
.table-responsive thead {
  background-color: var(--pdc-blue) !important;
}

/* Bootstrap 5 repeint chaque cellule avec --bs-table-bg, ce qui masquait
   le fond du thead. On pose la couleur sur les cellules elles-mêmes. */
.table-responsive thead th,
.table-responsive thead td,
#result_list thead th,
#changelist-form thead th {
  background-color: var(--pdc-blue) !important;
  --bs-table-bg: var(--pdc-blue);
  --bs-table-accent-bg: transparent;
}

/* Checkboxs */
input[type="checkbox"] {
  accent-color: #ee7060;
  width: 18px;
  height: 18px;
  cursor: pointer;
}

/* Input "checkbox" checked borders */
input[type="checkbox"] {
  border: 2px solid #574b90;
  background-color: #dfdfdc;
}

/* Ariane */
.container-fluid .breadcrumb-item a {
  color: var(--pdc-orange) !important;
}

/* Elements count at the bottom of the users list */
.dataTables_info {
  margin-top: 5px;
}

.select2-results__option--highlighted {
  background-color: var(--pdc-blue) !important;
}

.select2-results__option--highlighted:hover {
  background-color: var(--pdc-blue-900) !important;
}

.accent-primary .dropdown-item.active,
.accent-primary .dropdown-item:active {
  background-color: var(--pdc-blue) !important;
}

.vCheckboxLabel {
  vertical-align: top;
  color: red;
  margin-bottom: 0;
}

/* Tableau de bord links */
.table
  a:not(.dropdown-item):not(.btn-app):not(.nav-link):not(.brand-link):not(
    .page-link
  ):not(.btn) {
  color: var(--pdc-grey-900);
}

.table
  a:not(.dropdown-item):not(.btn-app):not(.nav-link):not(.brand-link):not(
    .page-link
  ):not(.btn):hover {
  color: black;
}

/* TINY MCE */
.tox-promotion,
.tox-statusbar__path-item,
.tox-statusbar__help-text,
.tox-statusbar__branding {
  display: none !important;
}

.tox-statusbar__right-container {
  display: flex;
  justify-content: center !important;
}

/* IMPERSONATION */
.impersonation-card {
  position: fixed;
  z-index: 10000;
  background-color: #8a1d60;
  border-radius: 5px;
}

#impersonation-card {
  bottom: 10px;
  left: 10px;
  padding: 20px;
}

#impersonation-debug {
  bottom: 2px;
  right: 10px;
  display: flex;
  flex-direction: row;
  gap: 10px;
  padding: 5px;
}

.impersonation-card p {
  color: white;
  font-size: 16px;
  margin: 0;
}

.impersonation-card button {
  background-color: white;
  color: #0e4d0c;
  font-weight: bold;
  border: none;
  padding: 10px 20px;
  border-radius: 5px;
  margin-top: 10px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

#impersonation-debug button {
  padding: 2px 5px;
  margin-top: 0px;
  font-size: 14px;
}

.impersonation-card a {
  color: var(--pdc-blue-900) !important;
}

.impersonation-card a:hover {
  text-decoration: underline;
}

/* External link */
#etoile_justice_external_link {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.9rem;
  color: var(--pdc-orange) !important;
}

#etoile_justice_external_link:hover {
  color: var(--pdc-orange-700) !important;
}

#etoile_justice_external_link i {
  font-size: 0.7em;
}

#leap-popup-trigger {
  cursor: pointer;
  margin-left: 5px;
}

#leap-popup {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(0, 0, 0, 0.8);
  justify-content: center;
  align-items: center;
  z-index: 10000;
}

#leap-popup img {
  width: 80vw;
  height: auto;
}

#leap-popup-close {
  position: absolute;
  right: 30px;
  top: 30px;
  height: auto;
  font-size: 30px;
  color: white;
  cursor: pointer;
}

/* Calendrier des formulaires */
table {
  caption-side: unset;
}

.calendar caption {
  margin: 0;
  text-align: center;
  border-top: none;
  font-weight: 700;
  font-size: 12px;
}

caption {
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
}

.calendar td {
  border-top: none !important;
}

.calendar td a {
  text-decoration: none;
}

.calendar td.today {
  font-weight: 700;
}

.calendarnav-next {
  right: 10px;
  background: url("./calendar-icons.0d21fe5a47fb.svg") 0 -30px no-repeat;
}

.calendarbox .calendarnav-previous,
.calendarbox .calendarnav-next {
  top: 12px;
}

.calendarbox a {
  z-index: 3;
}
.calendarnav-previous {
  left: 10px;
  background: url("./calendar-icons.0d21fe5a47fb.svg") 0 0 no-repeat;
}

.calendarbox .calendarnav-previous,
.calendarbox .calendarnav-next {
  display: block;
  position: absolute;
  top: 8px;
  width: 15px;
  height: 15px;
  text-indent: -9999px;
  padding: 0;
}

.calendarbox a {
  z-index: 3;
}

.calendarbox,
.clockbox {
  z-index: 3;
  color: #212529;
}

.calendarbox .calendarnav-previous,
.calendarbox .calendarnav-next {
  top: 12px;
}

.calendar caption,
p.calendar-cancel {
  background: linear-gradient(
    90deg,
    var(--pdc-cyan-600) 0%,
    rgba(87, 199, 133, 1) 50%,
    rgba(237, 221, 83, 1) 100%
  );
}

.calendarbox .calendar caption,
p.calendar-cancel a {
  color: var(--pdc-cyan-900) !important;
  text-decoration: none;
}

.calendar-cancel {
  margin: 0;
  padding: 4px 0;
  font-size: 12px;
  border-top: 1px solid #ddd;
  color: #333;
}

.calendar td a,
.timelist a,
.calendar-shortcuts a {
  color: var(--pdc-blue-900) !important;
  text-decoration: none;
}

.calendar td a:hover,
.timelist a:hover {
  color: white !important;
  background-color: var(--pdc-blue-900) !important;
}

a.inline-deletelink,
a.inline-deletelink:hover {
  border: 0;
  color: red !important;
  /* Set back to 1 after init by js */
  opacity: 0;
  background: white;
}

input.inline-deletelink-neighbour {
  float: right;
  margin: 10px;
}

a.inline-deletelink .fas {
  margin-right: 4px;
}

a.inline-deletelink:hover {
  text-decoration: underline;
}

/* ==========================================================================
   Compatibilité AdminLTE 3 → 4 : métriques de formulaire
   AdminLTE 4 et Bootstrap 5 ont abandonné plusieurs règles dont dépendait
   l'ancienne mise en page. On restitue les valeurs de référence.
   ========================================================================== */

/* AdminLTE 3 mettait tous les labels en gras via
   label:not(.form-check-label):not(.custom-file-label) — supprimé en v4. */
/* Police de base : AdminLTE 4 réclame « Source Sans 3 », mais le gabarit
   charge toujours la feuille Google Fonts de « Source Sans Pro ». La police
   demandée n'existe donc pas et le rendu retombe sur system-ui, avec des
   largeurs de texte différentes partout. On repointe sur la police chargée. */
.app-main,
.app-main .card,
body {
  font-family:
    "Source Sans Pro",
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    Roboto,
    "Helvetica Neue",
    Arial,
    sans-serif;
}

.app-main {
  font-size: 16px;
}

.app-main label:not(.form-check-label):not(.custom-file-label) {
  font-size: 16px;
  font-weight: 700;
}

/* Jazzmin dimensionnait les champs via « .form-group div .vTextField ».
   Bootstrap 5 a supprimé .form-group : la règle ne s'applique plus. On la
   restitue à l'identique — uniquement sur ces classes, les autres widgets
   (dates, entiers) gardant leur largeur propre comme dans la référence. */
.app-main .vTextField,
.app-main .vLargeTextField,
.app-main .vDateField,
.app-main .vTimeField,
.app-main .vURLField {
  width: 100%;
  /* La référence borne la colonne de saisie : 664px sur l'ajout d'utilisateur
     et le formulaire évènement, 608px sur la fiche pilote. On retient 664,
     exact sur deux formulaires sur trois. */
  max-width: 664px;
}

/* select2 : Jazzmin 3.0.5 force width:100% en style inline, là où l'ancienne
   version dimensionnait le widget sur le select d'origine. */
/* Jazzmin place le widget dans un conteneur flex avec « flex: 1 1 0% », ce qui
   prend le pas sur width même en !important. On neutralise le flex et on laisse
   select2 se dimensionner sur son contenu, comme dans la référence. */
.app-main .related-widget-wrapper .select2-container,
.app-main .select2-container {
  flex: 0 0 auto;
}

/* Dans les formulaires de modification, la référence donne 200px fixes. */
.app-main #content-main .select2-container {
  width: 200px !important;
}

.app-main #content-main .select2-container--default .select2-selection--single {
  height: 38px;
}

/* Dans la barre de filtres, la référence donne des widgets de 200px de large
   et 38px de haut, alignés sur une grille de 208px de pas. */
#changelist-search .select2-container {
  width: 200px !important;
  flex: 0 0 auto;
}

#changelist-search .select2-container--default .select2-selection--single {
  height: 38px;
}

#changelist-search
  .select2-container--default
  .select2-selection--single
  .select2-selection__rendered {
  line-height: 36px;
}

#changelist-search
  .select2-container--default
  .select2-selection--single
  .select2-selection__arrow {
  height: 36px;
}

/* Champ de recherche : 178px dans la référence, contre 250 par défaut. */
/* Jazzmin pose un « min-width: 250px » en style inline sur le champ de
   recherche : aucune règle width ne peut gagner tant qu'on ne le neutralise
   pas. La référence donne 178px. */
#changelist-search input[type="text"],
#changelist-search #searchbar {
  min-width: 178px !important;
  width: 178px !important;
  flex: 0 0 auto;
}

.app-main
  .select2-container--default
  .select2-selection--single
  .select2-selection__rendered {
  line-height: 36px;
}

.app-main
  .select2-container--default
  .select2-selection--single
  .select2-selection__arrow {
  height: 36px;
}

/* La gouttière de référence est de 15px (7,5 de chaque côté), Bootstrap 5 la met
   à 24px. Le padding de carte passe lui de 1.25rem à 1rem. Les deux décalent
   labels et champs de quelques pixels. */
.app-main .row {
  --bs-gutter-x: 15px;
}

.app-main .card-body {
  padding: 1.25rem;
}

/* AdminLTE 4 réduit le retrait de la zone de contenu (8px contre ~27px avant),
   ce qui élargit le conteneur et décale toutes les colonnes proportionnellement. */
.app-content {
  padding-left: 27px;
  padding-right: 27px;
}

/* En-tête de page : Jazzmin 3.0.5 coupe la ligne en deux colonnes et fait
   flotter le fil d'Ariane à droite. La référence l'affiche à la suite du
   titre, avec un chevron comme séparateur. */
.app-content-header .row {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
}

.app-content-header .row > [class^="col-sm-"] {
  flex: 0 0 auto;
  width: auto;
}

/* la seconde colonne porte le fil d'Ariane puis les boutons d'action */
.app-content-header .row > [class^="col-sm-"]:last-child {
  display: flex;
  align-items: center;
  flex: 1 1 auto;
  gap: 0.5rem;
}

/* les boutons sont repoussés tout à droite, sur la ligne du titre */
.app-content-header .object-tools {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0 0 0 auto;
  padding: 0;
  float: none !important;
}

.app-content-header .float-sm-end:has(.breadcrumb) {
  float: none !important;
}

.app-content-header .breadcrumb {
  --bs-breadcrumb-divider: "›";
  margin-bottom: 0;
}

/* Les listes de filtres sont enveloppées dans un .form-group qui porte une
   marge basse de 16px, contrairement au champ de recherche et au bouton.
   align-items:center centrant la boîte de marge, elles remontaient de 8px. */
/* Bootstrap 5 a supprimé .form-group et sa marge basse de 1rem, sur laquelle
   reposait l'espacement vertical de plusieurs formulaires (page de
   suppression notamment). */
.app-main .form-group {
  margin-bottom: 1rem;
}

#changelist-search .form-group {
  margin-bottom: 0;
  /* La référence dispose les filtres sur une grille de 208px de pas
     (x = 53, 261, 469...), et non tassés les uns contre les autres. */
  flex: 0 0 200px;
  width: 200px;
}

/* Rythme vertical de l'en-tête : la référence laisse plus d'air au-dessus du
   titre et entre l'en-tête et le contenu. */
.app-main .app-content-header {
  padding-top: 20px;
  padding-bottom: 36px;
}

/* Titre de page : 24px/500 dans la référence, 28px sous AdminLTE 4. */
.app-main .app-content-header h1,
.app-main .app-content-header h3 {
  font-size: 24px;
  font-weight: 500;
}

/* Retrait horizontal de l'en-tête, aligné sur celui du contenu. */
.app-main .app-content-header {
  padding-left: 28px;
  padding-right: 28px;
}

/* Petits boutons (Ajouter / Modification / Afficher du tableau de bord) :
   12px et 22px de haut dans la référence, contre 14px et 29px en Bootstrap 5. */
.app-main .addlink,
.app-main .changelink,
.app-main .viewlink {
  font-size: 12px;
  padding: 4px 8px;
  line-height: 1.15;
}

/* Décalage résiduel des listes : la référence retrait le bloc de 13px de plus
   et le descend de 9px par rapport à AdminLTE 4. */
.app-main #change-list-filters,
.app-main #changelist-form,
.app-main #change-list-actions {
  padding-left: 13px;
}

.app-main #change-list-filters {
  padding-top: 9px;
}

/* Boutons du bandeau d'actions : 38px de haut dans la référence, 29 en
   Bootstrap 5. */
.app-main .submit-row .btn,
.app-main input[type="submit"].btn,
.app-main .object-tools .btn {
  padding: 6px 12px;
  font-size: 16px;
  line-height: 1.5;
}

/* ==========================================================================
   Pages hors admin : connexion et réinitialisation de mot de passe.
   Elles vivent hors de .app-main, où portent les autres correctifs.
   ========================================================================== */

body.login-page {
  font-size: 16px;
}

body.login-page .login-box {
  /* La référence donne un contenu de 460px, soit 500px avec le padding. */
  width: 500px;
  max-width: 100%;
}

/* Django marque certains champs avec class="hidden" — notamment le champ
   « username » destiné aux gestionnaires de mots de passe sur la page de
   définition du mot de passe. AdminLTE 3 définissait cette classe, AdminLTE 4
   ne la connaît plus (Bootstrap utilise .d-none) : le champ devenait visible. */
.hidden {
  display: none !important;
}