/* ============================================================
   B.E.T KALEM — Design System Global
   Appliqué via UNFOLD["STYLES"] sur toutes les pages de l'admin
   ============================================================ */

/* --- Variables globales --- */
:root {
    --gbe-radius: 0.5rem;
    --gbe-radius-sm: 0.375rem;
    --gbe-transition: all 0.15s ease;
    --gbe-shadow-sm: 0 1px 2px rgba(16, 24, 40, 0.05);
    --gbe-shadow-md: 0 4px 12px rgba(16, 24, 40, 0.08);
    --gbe-primary: var(--color-primary-600, #2563eb);
    --gbe-primary-light: var(--color-primary-50, #eff6ff);
    --gbe-primary-strong: var(--color-primary-700, #1d4ed8);
    --gbe-border: var(--color-base-200, #e5e7eb);
    --gbe-text: var(--color-base-700, #374151);
    --gbe-muted: var(--color-base-500, #6b7280);
    --gbe-bg: var(--color-base-50, #f9fafb);
    --gbe-surface: #fff;
    --gbe-success: #059669;
    --gbe-warning: #d97706;
    --gbe-danger: #dc2626;
    --gbe-info: #2563eb;
}


/* ============================================================
   1. LOGO SIDEBAR
   ============================================================ */
.gbe-sidebar-logo {
    height: 40px;
    width: auto;
    max-width: 160px;
    flex-shrink: 0;
    object-fit: contain;
    object-position: left center;
}


/* ============================================================
   2. PAGE DE CONNEXION
   ============================================================ */
.gbe-login-brand {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    margin-bottom: 1.75rem;
}

.gbe-login-logo {
    height: 110px;
    width: auto;
    max-width: 100%;
    margin-bottom: 1rem;
    object-fit: contain;
}

.gbe-login-title {
    margin: 0;
    font-size: 1.5rem;
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: -0.02em;
    color: var(--color-base-900);
}

.gbe-login-subtitle {
    margin: 0.35rem 0 0;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--color-base-500);
}

.dark .gbe-login-title { color: var(--color-base-100); }
.dark .gbe-login-subtitle { color: var(--color-base-400); }

/* --- Bouton « Se connecter » : libellé et flèche parfaitement centrés ---
   Le composant d'Unfold pose déjà `inline-flex items-center justify-center`,
   mais la classe générique `.submit-row` (conçue pour la barre d'actions des
   formulaires admin) imposait `padding-top`, ce qui décalait le contenu vers
   le bas et ajoutait un filet au-dessus du bouton. On utilise donc une classe
   dédiée, qui recentre le contenu sur les deux axes sans toucher au design
   (mêmes couleurs, même dégradé, même hauteur que les autres boutons). */
.gbe-login-submit {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0.5rem !important;
    box-sizing: border-box;
    width: 100% !important;
    min-height: 40px !important;
    height: 40px !important;
    /* Neutralise l'héritage de `.submit-row` (filet + padding haut). */
    margin: 0 !important;
    padding: 0 1rem !important;
    border-top: 0 !important;
    line-height: 1 !important;
    text-align: center !important;
    vertical-align: middle !important;
}

/* Le libellé est un bloc flex : sa boîte de ligne est centrée, ce qui évite
   les décalages verticaux liés à la hauteur de ligne du texte. */
.gbe-login-submit-label {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

/* L'icône garde une boîte carrée : l'alignement de la flèche est donc exact,
   et son déplacement au survol ne modifie pas la hauteur du bouton. */
.gbe-login-submit-icon,
.gbe-login-submit .material-symbols-outlined {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 1.125rem;
    height: 1.125rem;
    line-height: 1;
    font-size: 1.125rem;
}

.gbe-login-submit:focus-visible {
    outline: 2px solid var(--color-primary-500, #3b82f6);
    outline-offset: 2px;
}

/* --- Pied de page de la page de connexion ---
   Le pied de page est la derniere ligne d'une colonne de hauteur EXACTE égale
   à la fenêtre (`height`, pas `min-height`) : il reste donc collé au bas de
   l'écran, y compris quand la carte est plus haute que la fenêtre. Dans ce
   cas c'est la zone de la carte qui défile (`overflow-y: auto` + `min-height: 0`
   pour pouvoir rétrécir), et non plus le pied de page qui part sous la
   fenêtre — plus aucun recouvrement possible avec le bouton « Se connecter ».
   `justify-content: safe center` centre la carte quand il y a de la place et
   l'aligne en haut quand elle défile, pour ne jamais rogner le logo.
   Le texte, sa taille, sa couleur et son opacite sont inchanges. */
.gbe-login-shell {
    display: flex;
    flex-direction: column;
    height: 100vh;
    /* `dvh` = hauteur réellement visible (barre d'adresse mobile comprise) ;
       `vh` reste la valeur de repli sur les navigateurs plus anciens. */
    height: 100dvh;
}

.gbe-login-main {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    justify-content: safe center;
}

.gbe-login-footer {
    flex: 0 0 auto;
    padding: 1.5rem 1rem 0.75rem;
    text-align: center;
    user-select: none;
}

.gbe-login-footer-text {
    margin: 0;
    font-size: 0.625rem;
    font-weight: 400;
    line-height: 1.2;
    letter-spacing: 0.02em;
    color: var(--color-base-400, #9ca3af);
    opacity: 0.45;
}

.dark .gbe-login-footer-text {
    color: var(--color-base-600, #4b5563);
}

/* --- Accès discret à l'espace client, sous le formulaire ---
   Un simple lien texte, dans la teinte neutre du pied de page, separé du
   formulaire par un filet : il se remarque sans stealer la priorite au bouton
   « Se connecter ». */
.gbe-login-client-link {
    margin: 1.5rem 0 0;
    padding-top: 1.25rem;
    border-top: 1px solid var(--color-base-200, #e5e7eb);
    text-align: center;
    font-size: 0.8125rem;
    line-height: 1.4;
}

.gbe-login-client-link a {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    color: var(--color-base-500, #6b7280);
    text-decoration: none;
    border-bottom: 1px dotted currentColor;
    transition: color 0.15s ease;
}

.gbe-login-client-link a:hover,
.gbe-login-client-link a:focus-visible {
    color: var(--color-primary-600, #2563eb);
}

.dark .gbe-login-client-link {
    border-top-color: var(--color-base-700, #374151);
}

.dark .gbe-login-client-link a {
    color: var(--color-base-400, #9ca3af);
}

.dark .gbe-login-client-link a:hover,
.dark .gbe-login-client-link a:focus-visible {
    color: var(--color-primary-400, #60a5fa);
}

/* ============================================================
   3. DROPDOWNS / SELECTS — Design Moderne
   ============================================================ */

/* Wrapper global pour les selects dans les formulaires admin */
select:not([multiple]),
select:not([multiple]):not(.select2-hidden-accessible) {
    appearance: none !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    min-height: 38px !important;
    height: 38px !important;
    padding: 0 2.5rem 0 0.75rem !important;
    font-size: 0.875rem !important;
    font-weight: 500 !important;
    line-height: 1.4 !important;
    color: var(--gbe-text) !important;
    background-color: var(--gbe-surface) !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 0.75rem center !important;
    background-size: 16px !important;
    border: 1.5px solid var(--gbe-border) !important;
    border-radius: var(--gbe-radius) !important;
    box-shadow: var(--gbe-shadow-sm) !important;
    cursor: pointer !important;
    transition: var(--gbe-transition) !important;
    outline: none !important;
}

select:not([multiple]):hover {
    border-color: var(--gbe-primary) !important;
    box-shadow: 0 0 0 3px var(--gbe-primary-light) !important;
}

select:not([multiple]):focus {
    border-color: var(--gbe-primary) !important;
    box-shadow: 0 0 0 3px var(--gbe-primary-light) !important;
    outline: none !important;
}

/* Select dans les listes filtres (sidebar gauche) */
#changelist-filter select {
    min-height: 34px !important;
    height: 34px !important;
    font-size: 0.8125rem !important;
    padding: 0 2rem 0 0.5rem !important;
}

/* Select dans les inlines */
.tabular.inline-related select {
    min-height: 32px !important;
    height: 32px !important;
    font-size: 0.8125rem !important;
    padding: 0 2rem 0 0.5rem !important;
}

/* Select multiples */
select[multiple] {
    min-height: 100px;
    font-size: 0.875rem;
    padding: 0.375rem;
    border-radius: var(--gbe-radius);
}

/* filter_horizontal amélioré */
.filter-horizontal {
    display: flex !important;
    gap: 0.5rem !important;
    align-items: flex-start !important;
}

.filter-horizontal .selector-available,
.filter-horizontal .selector-chosen {
    flex: 1 !important;
    min-width: 0 !important;
}

.filter-horizontal select {
    min-height: 120px !important;
    height: auto !important;
    padding: 0.375rem !important;
    font-size: 0.8125rem !important;
    border-radius: var(--gbe-radius) !important;
}

.filter-horizontal .selector-chooser {
    display: flex !important;
    flex-direction: column !important;
    gap: 0.25rem !important;
    align-self: center !important;
    padding: 0 0.25rem !important;
}

.filter-horizontal .selector-chooser li {
    list-style: none !important;
}

.filter-horizontal .selector-chooser a {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 32px !important;
    height: 32px !important;
    border: 1.5px solid var(--gbe-border) !important;
    border-radius: var(--gbe-radius-sm) !important;
    background: var(--gbe-surface) !important;
    color: var(--gbe-text) !important;
    transition: var(--gbe-transition) !important;
}

.filter-horizontal .selector-chooser a:hover {
    border-color: var(--gbe-primary) !important;
    color: var(--gbe-primary) !important;
    background: var(--gbe-primary-light) !important;
}


/* ============================================================
   4. CHAMPS TEXTE / INPUTS — Design Cohérent
   ============================================================ */
input[type="text"],
input[type="email"],
input[type="number"],
input[type="url"],
input[type="date"],
input[type="time"],
input[type="datetime-local"],
input[type="tel"],
input[type="search"],
input[type="password"],
.vDateField,
.vTimeField {
    min-height: 38px !important;
    height: 38px !important;
    padding: 0 0.75rem !important;
    font-size: 0.875rem !important;
    font-weight: 500 !important;
    line-height: 1.4 !important;
    border: 1.5px solid var(--gbe-border) !important;
    border-radius: var(--gbe-radius) !important;
    box-shadow: var(--gbe-shadow-sm) !important;
    transition: var(--gbe-transition) !important;
    color: var(--gbe-text) !important;
    background-color: var(--gbe-surface) !important;
}

input[type="text"]:hover,
input[type="email"]:hover,
input[type="number"]:hover,
input[type="url"]:hover,
input[type="date"]:hover,
input[type="time"]:hover,
input[type="datetime-local"]:hover,
input[type="tel"]:hover,
input[type="search"]:hover,
input[type="password"]:hover {
    border-color: var(--gbe-primary) !important;
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="number"]:focus,
input[type="url"]:focus,
input[type="date"]:focus,
input[type="time"]:focus,
input[type="datetime-local"]:focus,
input[type="tel"]:focus,
input[type="search"]:focus,
input[type="password"]:focus {
    border-color: var(--gbe-primary) !important;
    box-shadow: 0 0 0 3px var(--gbe-primary-light) !important;
    outline: none !important;
}

/* Inputs readonly */
input[readonly],
input[readonly="readonly"] {
    background-color: var(--gbe-bg) !important;
    color: var(--gbe-muted) !important;
    cursor: default !important;
}

/* Autocomplete (select2) */

/* Le champ de recherche interne des listes déroulantes d'autocompletion ne doit
   PAS hériter de notre habillage générique des `input[type="text"]`. Ceélui
   impose `height: 38px !important` et surtout le raccourci
   `padding: 0 0.75rem !important`, qui écrase le `padding-left:
   calc(var(--spacing) * 9)` d'Unfold — les 36px qui réservent la place de la
   loupe. Sans eux, le texte démarrait à 12px, exactement sous l'icône
   positionnée en absolu par `.select2-search--dropdown:before`
   (`left: 4 * spacing`, 18px de large), et la hauteur forcée décalait le
   texte vers le bas jusqu'à le chevaucher.
   On rend ici la géométrie prévue par Unfold, avec une spécificité
   supérieure à celle de la règle générique (`.select2-search__field` seul,
   soit 0-1-0, perdait contre `input[type="text"]`, soit 0-1-1). */
.select2-container .select2-search__field {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
}

.select2-container--admin-autocomplete .select2-search--dropdown .select2-search__field {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    padding: calc(var(--spacing) * 2) calc(var(--spacing) * 3) calc(var(--spacing) * 2) calc(var(--spacing) * 9) !important;
    font-size: var(--text-sm) !important;
    line-height: var(--tw-leading, var(--text-sm--line-height)) !important;
    font-weight: var(--font-weight-medium) !important;
}

.select2-container--default .select2-selection--single {
    min-height: 38px !important;
    height: 38px !important;
    border: 1.5px solid var(--gbe-border) !important;
    border-radius: var(--gbe-radius) !important;
    box-shadow: var(--gbe-shadow-sm) !important;
    transition: var(--gbe-transition) !important;
    padding: 0 0.5rem !important;
}

.select2-container--default .select2-selection--single:hover {
    border-color: var(--gbe-primary) !important;
}

.select2-container--default.select2-container--focus .select2-selection--single,
.select2-container--default.select2-container--open .select2-selection--single {
    border-color: var(--gbe-primary) !important;
    box-shadow: 0 0 0 3px var(--gbe-primary-light) !important;
    outline: none !important;
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
    line-height: 36px !important;
    padding-left: 0 !important;
    color: var(--gbe-text) !important;
    font-weight: 500 !important;
    font-size: 0.875rem !important;
}

.select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 36px !important;
    right: 8px !important;
}

.select2-dropdown {
    border: 1.5px solid var(--gbe-border) !important;
    border-radius: var(--gbe-radius) !important;
    box-shadow: var(--gbe-shadow-md) !important;
}

.select2-results__option--highlighted {
    background-color: var(--gbe-primary-light) !important;
    color: var(--gbe-primary-strong) !important;
}


/* ============================================================
   5. TEXTAREAS — Compact et Redimensionnables
   ============================================================ */
textarea,
.form-row textarea,
.related-widget-wrapper textarea {
    min-height: 72px !important;
    height: 88px !important;
    max-height: 480px !important;
    resize: vertical !important;
    line-height: 1.5 !important;
    font-size: 0.875rem !important;
    font-weight: 500 !important;
    padding: 0.625rem 0.75rem !important;
    border: 1.5px solid var(--gbe-border) !important;
    border-radius: var(--gbe-radius) !important;
    box-shadow: var(--gbe-shadow-sm) !important;
    transition: var(--gbe-transition) !important;
    color: var(--gbe-text) !important;
    background-color: var(--gbe-surface) !important;
}

textarea:focus {
    border-color: var(--gbe-primary) !important;
    box-shadow: 0 0 0 3px var(--gbe-primary-light) !important;
    outline: none !important;
}

/* Textareas de contenu principal (plus grandes) */
textarea[name="description"],
textarea[name="observations"],
textarea[name="problemes_anomalies"],
textarea[name="reserves"],
textarea[name="etat_avancement"],
textarea[name="commentaire"],
textarea[name="participants_externes"] {
    min-height: 96px !important;
    height: 120px !important;
}

/* Textareas dans les inlines */
.tabular.inline-related td textarea {
    min-height: 40px !important;
    height: 48px !important;
    max-height: 200px !important;
    font-size: 0.8125rem !important;
    padding: 0.375rem 0.5rem !important;
}


/* ============================================================
   6. FORMULAIRES — Layout Compact Horizontal
   ============================================================ */

/* Fieldsets : espacement réduit et propre */
.module.aligned fieldset,
fieldset.module {
    padding: 10px 16px 12px !important;
    border: 1px solid var(--gbe-border) !important;
    border-radius: var(--gbe-radius) !important;
    margin-bottom: 12px !important;
    background: var(--gbe-surface) !important;
    box-shadow: var(--gbe-shadow-sm) !important;
}

fieldset.module .collapse-title,
fieldset.module legend {
    font-size: 0.8125rem !important;
    font-weight: 700 !important;
    color: var(--gbe-text) !important;
    letter-spacing: 0.02em !important;
    text-transform: uppercase !important;
    padding: 0 0 8px !important;
    margin: 0 !important;
    border-bottom: 1px solid var(--gbe-border) !important;
}

/* Labels : compacts et nets */
.form-row label,
.aligned label,
.inline-group label {
    font-size: 0.8rem !important;
    font-weight: 600 !important;
    color: var(--gbe-text) !important;
    line-height: 1.3 !important;
    padding-bottom: 2px !important;
}

/* Espacement des lignes de formulaire */
.aligned .form-row {
    padding: 5px 0 !important;
    border-bottom: 1px solid transparent !important;
}

.aligned .form-row:hover {
    border-bottom-color: rgba(0, 0, 0, 0.03) !important;
}

/* Dernière ligne sans bordure */
.aligned .form-row:last-child {
    border-bottom: none !important;
}

/* Layout horizontal pour les paires de champs */
.form-row fieldset .field-box,
.form-row .field-box {
    display: inline-block !important;
    vertical-align: top !important;
    padding-right: 1rem !important;
    margin: 0 !important;
}

/* Help text */
.help,
.help population {
    font-size: 0.75rem !important;
    color: var(--gbe-muted) !important;
    margin-top: 3px !important;
    line-height: 1.4 !important;
}

/* Erreurs — positionnement statique pour eviter tout chevauchement
   (surtout dans les inlines tabulaires et les champs compacts) */
.errorlist,
.errornote {
    border-radius: var(--gbe-radius) !important;
    font-size: 0.8125rem !important;
    position: static !important;
    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    left: auto !important;
    float: none !important;
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    clear: both !important;
    z-index: auto !important;
    box-sizing: border-box !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
}

.errorlist li {
    list-style: none !important;
    margin: 2px 0 0 !important;
    padding: 0 !important;
    color: var(--gbe-danger) !important;
    line-height: 1.35 !important;
}

.errorlist li + li {
    margin-top: 4px !important;
}

/* Les erreurs dans les inlines restent dans leur cellule, sans debordement */
.inline-group .errorlist,
.inline-related .errorlist {
    margin: 4px 0 0 !important;
    padding: 0 !important;
    background: transparent !important;
    border: none !important;
}

.errornote {
    border: 1.5px solid var(--gbe-danger) !important;
    background: #fef2f2 !important;
    color: var(--gbe-danger) !important;
    padding: 0.625rem 0.75rem !important;
    margin: 0 0 12px !important;
    line-height: 1.45 !important;
}

/* Les conteneurs de formulaire ne doivent jamais rogner les messages */
.form-row,
.inline-group,
.inline-related,
.inline-related td,
fieldset,
.gbe-card {
    overflow: visible !important;
}

/* Textes d'aide : toujours sous le champ, sans recouvrement */
.help,
.helptext,
.help-text,
.form-row .help,
fieldset .description {
    display: block !important;
    position: static !important;
    margin-top: 4px !important;
    clear: both !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
}

/* Submit row */
.submit-row {
    display: flex !important;
    gap: 8px !important;
    align-items: center !important;
    padding: 12px 0 0 !important;
    margin-top: 8px !important;
    border-top: 1px solid var(--gbe-border) !important;
}

.submit-row input[type="submit"],
.submit-row a {
    border-radius: var(--gbe-radius) !important;
    font-weight: 600 !important;
    font-size: 0.875rem !important;
    padding: 0 1.25rem !important;
    height: 38px !important;
    transition: var(--gbe-transition) !important;
}

/* Readonly fields */
.field-read_only label,
.field-read_only .readonly {
    background: var(--gbe-bg) !important;
    border: 1px solid var(--gbe-border) !important;
    border-radius: var(--gbe-radius-sm) !important;
    padding: 6px 10px !important;
    font-size: 0.8125rem !important;
    color: var(--gbe-text) !important;
    display: inline-block !important;
}


/* ============================================================
   7. INLINES — Compact et Cohérent
   ============================================================ */

/* --- Inlines repliables -------------------------------------------------
   Un inline déclaré `classes = ("collapse",)` est rendu par Unfold dans un
   `<details>` : il n'est donc replié qu'avec le HTML natif, sans JavaScript, et
   Unfold y ajoute déjà une flèche `expand_more` à droite (via `::after` sur le
   `<summary>`). On ne fait que l'accorder au design du site. */
.tabular.inline-related details > summary,
.stacked.inline-related details > summary {
    list-style: none;
    cursor: pointer;
}

.tabular.inline-related details > summary::-webkit-details-marker,
.stacked.inline-related details > summary::-webkit-details-marker {
    display: none;
}

/* Réserve la place de la flèche pour qu'un titre long ne passe pas dessous. */
.tabular.inline-related details > summary > h2,
.stacked.inline-related details > summary > h2 {
    width: 100%;
    padding-right: 2.25rem !important;
    transition: var(--gbe-transition);
}

.tabular.inline-related details > summary:hover > h2,
.stacked.inline-related details > summary:hover > h2 {
    background: var(--gbe-primary-light) !important;
}

/* Sépare la barre repliée du contenu une fois déplié. */
.tabular.inline-related details[open] > summary,
.stacked.inline-related details[open] > summary {
    border-bottom: 1px solid var(--gbe-border);
}

.tabular.inline-related details[open] > summary > h2,
.stacked.inline-related details[open] > summary > h2 {
    margin-bottom: 0 !important;
}

/* Inlines tabular : lignes compactes */
.tabular.inline-related {
    border: 1px solid var(--gbe-border) !important;
    border-radius: var(--gbe-radius) !important;
    overflow: hidden !important;
    margin: 8px 0 !important;
}

.tabular.inline-related table {
    border-collapse: collapse !important;
}

.tabular.inline-related thead th {
    background: var(--gbe-bg) !important;
    font-size: 0.75rem !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.04em !important;
    color: var(--gbe-muted) !important;
    padding: 8px 10px !important;
    border-bottom: 2px solid var(--gbe-border) !important;
}

.tabular.inline-related .form-row,
.tabular.inline-related td {
    padding-top: 5px !important;
    padding-bottom: 5px !important;
    vertical-align: middle !important;
    border-bottom: 1px solid rgba(0, 0, 0, 0.04) !important;
}

.tabular.inline-related tr:last-child td {
    border-bottom: none !important;
}

.tabular.inline-related td input[type="text"],
.tabular.inline-related td select:not([multiple]),
.tabular.inline-related td input[type="number"],
.tabular.inline-related td input[type="date"],
.tabular.inline-related td input[type="url"],
.tabular.inline-related td input[type="email"] {
    height: 32px !important;
    min-height: 32px !important;
    font-size: 0.8125rem !important;
    padding: 0 0.5rem !important;
    border-radius: var(--gbe-radius-sm) !important;
}

.tabular.inline-related .empty-row td {
    padding: 8px 10px !important;
}

/* Inlines stacked */
.stacked.inline-related {
    border: 1px solid var(--gbe-border) !important;
    border-radius: var(--gbe-radius) !important;
    padding: 12px !important;
    margin: 8px 0 !important;
    background: var(--gbe-surface) !important;
}

.stacked.inline-related .inline-related object-tools {
    margin-bottom: 8px !important;
}

/* Inline headers */
.inline-group .inline-title {
    font-size: 0.8125rem !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.04em !important;
    color: var(--gbe-text) !important;
    padding: 8px 12px !important;
    background: var(--gbe-bg) !important;
    border: 1px solid var(--gbe-border) !important;
    border-radius: var(--gbe-radius) var(--gbe-radius) 0 0 !important;
    margin-bottom: 0 !important;
}

.inline-group .inline-related {
    border-radius: 0 !important;
    border-left: 1px solid var(--gbe-border) !important;
    border-right: 1px solid var(--gbe-border) !important;
    border-bottom: 1px solid var(--gbe-border) !important;
}

.inline-group .inline-related:last-child {
    border-radius: 0 0 var(--gbe-radius) var(--gbe-radius) !important;
}

/* Ajouter un inline */
.add-row {
    padding: 8px 12px !important;
    background: var(--gbe-bg) !important;
    border: 1px solid var(--gbe-border) !important;
    border-top: none !important;
    border-radius: 0 0 var(--gbe-radius) var(--gbe-radius) !important;
}

.add-row a {
    font-size: 0.8125rem !important;
    font-weight: 600 !important;
    color: var(--gbe-primary) !important;
    transition: var(--gbe-transition) !important;
}

.add-row a:hover {
    color: var(--gbe-primary-strong) !important;
}


/* ============================================================
   8. CHANGELIST / TABLEAU — Design Propre
   ============================================================ */

/* Table header */
#result_list thead th {
    background: var(--gbe-bg) !important;
    font-size: 0.75rem !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.04em !important;
    color: var(--gbe-muted) !important;
    padding: 10px 12px !important;
    border-bottom: 2px solid var(--gbe-border) !important;
}

/* Table rows */
#result_list tbody tr {
    transition: background 0.1s ease !important;
}

#result_list tbody tr:hover {
    background: var(--gbe-primary-light) !important;
}

#result_list tbody td {
    padding: 8px 12px !important;
    font-size: 0.8125rem !important;
    border-bottom: 1px solid rgba(0, 0, 0, 0.04) !important;
    vertical-align: middle !important;
}

/* Search bar */
#toolbar .form-search #searchbar {
    border: 1.5px solid var(--gbe-border) !important;
    border-radius: var(--gbe-radius) !important;
    height: 38px !important;
    font-size: 0.875rem !important;
    padding: 0 0.75rem !important;
    transition: var(--gbe-transition) !important;
}

#toolbar .form-search #searchbar:focus {
    border-color: var(--gbe-primary) !important;
    box-shadow: 0 0 0 3px var(--gbe-primary-light) !important;
    outline: none !important;
}

/* Filters */
#changelist-filter {
    border: 1px solid var(--gbe-border) !important;
    border-radius: var(--gbe-radius) !important;
    padding: 12px !important;
    background: var(--gbe-surface) !important;
    box-shadow: var(--gbe-shadow-sm) !important;
}

#changelist-filter h3 {
    font-size: 0.75rem !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.04em !important;
    color: var(--gbe-muted) !important;
    margin: 0 0 8px !important;
    padding: 0 0 6px !important;
    border-bottom: 1px solid var(--gbe-border) !important;
}

#changelist-filter .filter-section {
    margin-bottom: 12px !important;
    padding-bottom: 12px !important;
    border-bottom: 1px solid rgba(0, 0, 0, 0.04) !important;
}

#changelist-filter .filter-section:last-child {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
    border-bottom: none !important;
}

/* Actions bar */
#changelist-form .actions {
    padding: 8px 12px !important;
    background: var(--gbe-bg) !important;
    border: 1px solid var(--gbe-border) !important;
    border-radius: var(--gbe-radius) !important;
    margin-bottom: 12px !important;
}

#changelist-form .actions select {
    min-height: 34px !important;
    height: 34px !important;
    font-size: 0.8125rem !important;
}

/* Pagination */
.pagination {
    margin-top: 12px !important;
}

.pagination a,
.pagination .this-page {
    border-radius: var(--gbe-radius-sm) !important;
    font-size: 0.8125rem !important;
    font-weight: 600 !important;
    min-width: 32px !important;
    height: 32px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.pagination .this-page {
    background: var(--gbe-primary) !important;
    color: #fff !important;
    border-color: var(--gbe-primary) !important;
}

/* Footer stats */
.paginator .quiet {
    font-size: 0.75rem !important;
    color: var(--gbe-muted) !important;
}


/* ============================================================
   9. BADGES STATUS — Unfold Compatible
   ============================================================ */

/* Badge pills pour les statuts dans les listes */
.badge {
    display: inline-flex !important;
    align-items: center !important;
    padding: 2px 10px !important;
    border-radius: 9999px !important;
    font-size: 0.75rem !important;
    font-weight: 600 !important;
    line-height: 1.5 !important;
    white-space: nowrap !important;
}

.badge-success,
span[style*="color: #16a34a"],
span[style*="color:#16a34a"] {
    background: #dcfce7 !important;
    color: #166534 !important;
}

.badge-warning,
span[style*="color: #d97706"],
span[style*="color:#d97706"] {
    background: #fef3c7 !important;
    color: #92400e !important;
}

.badge-danger,
span[style*="color: #dc2626"],
span[style*="color:#dc2626"] {
    background: #fee2e2 !important;
    color: #991b1b !important;
}

.badge-info,
span[style*="color: #2563eb"],
span[style*="color:#2563eb"] {
    background: #dbeafe !important;
    color: #1e40af !important;
}


/* ============================================================
   10. DASHBOARD / INDEX — Cards Propres
   ============================================================ */
#content-main .module {
    border: 1px solid var(--gbe-border) !important;
    border-radius: var(--gbe-radius) !important;
    box-shadow: var(--gbe-shadow-sm) !important;
    overflow: hidden !important;
}

#content-main .module .module_caption,
#content-main .module h2 {
    font-size: 0.8125rem !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.04em !important;
    padding: 10px 14px !important;
    background: var(--gbe-bg) !important;
    border-bottom: 1px solid var(--gbe-border) !important;
    color: var(--gbe-text) !important;
}


/* ============================================================
   11. MESSAGES / ALERTS
   ============================================================ */
.messagelist {
    margin-bottom: 12px !important;
    position: relative !important;
    z-index: 10 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
    width: 100% !important;
    clear: both !important;
}

.messagelist > li,
.messagelist > div {
    list-style: none !important;
    margin: 0 !important;
    display: block !important;
    width: 100% !important;
    box-sizing: border-box !important;
    line-height: 1.45 !important;
    overflow-wrap: anywhere !important;
}

.messagelist > li + li,
.messagelist > div + div {
    margin-top: 0 !important;
}

.messagelist .success {
    background: #dcfce7 !important;
    border: 1px solid #bbf7d0 !important;
    color: #166534 !important;
    border-radius: var(--gbe-radius) !important;
    padding: 10px 14px !important;
}

.messagelist .error {
    background: #fee2e2 !important;
    border: 1px solid #fecaca !important;
    color: #991b1b !important;
    border-radius: var(--gbe-radius) !important;
    padding: 10px 14px !important;
}

.messagelist .warning {
    background: #fef3c7 !important;
    border: 1px solid #fde68a !important;
    color: #92400e !important;
    border-radius: var(--gbe-radius) !important;
    padding: 10px 14px !important;
}

.messagelist .info {
    background: #dbeafe !important;
    border: 1px solid #bfdbfe !important;
    color: #1e40af !important;
    border-radius: var(--gbe-radius) !important;
    padding: 10px 14px !important;
}


/* ============================================================
   12. CALENDRIER — Intégration Unfold
   ============================================================ */
.gbe-calendar-container {
    padding: 0 !important;
}

/* Wrapper du calendrier pour s'intégrer au layout Unfold */
.gbe-calendar-wrapper {
    background: var(--gbe-surface) !important;
    border: 1px solid var(--gbe-border) !important;
    border-radius: var(--gbe-radius) !important;
    box-shadow: var(--gbe-shadow-sm) !important;
    overflow: hidden !important;
}


/* ============================================================
   13. RESPONSIVE — Mobile Optimisé
   ============================================================ */
@media (max-width: 768px) {
    textarea { width: 100% !important; box-sizing: border-box; }

    .form-row .field-box {
        display: block !important;
        padding-right: 0 !important;
        margin-bottom: 8px !important;
    }

    .tabular.inline-related {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
    }

    .filter-horizontal {
        flex-direction: column !important;
    }

    .filter-horizontal .selector-chooser {
        flex-direction: row !important;
    }

    #result_list {
        font-size: 0.75rem !important;
    }
}

@media (max-width: 640px) {
    .gbe-sidebar-logo {
        height: 34px;
        max-width: 150px;
    }

    .gbe-login-logo {
        height: 96px;
    }

    .gbe-login-title {
        font-size: 1.3rem;
    }
}


/* ============================================================
   14. UTILITAIRES
   ============================================================ */

/* Espacement contenu principal */
#content {
    padding-top: 8px !important;
}

/* Liens admin
   Les éléments portant une classe explicite de couleur (ex. Tailwind
   `text-white`) conservent leur couleur : sans cette exclusions, le
   `!important` générique bleuirait le texte des boutons dangereux. */
a:not([class*="text-white"]) {
    color: var(--gbe-primary) !important;
    transition: color 0.15s ease !important;
}

a:not([class*="text-white"]):hover {
    color: var(--gbe-primary-strong) !important;
}

/* Boutons */
.button,
input[type="submit"] {
    border-radius: var(--gbe-radius) !important;
    font-weight: 600 !important;
    transition: var(--gbe-transition) !important;
}

/* Gradient bleu -> indigo sur les boutons primaires (design system).
   Les variantes « danger » d'Unfold (classes `bg-red-600`) sont exclues :
   elles doivent rester rouges.
   `.addlink` n'est stylé que lorsqu'il porte aussi `bg-primary-600`, c'est-à-dire
   lorsqu'il s'agit du bouton « Ajouter <modèle> » (avec libellé). Les liens `.addlink`
   icône-seul des listes de modèles (index d'application) restent hors de ce regrains :
   ils sont traités plus bas (§14ter) pour n'afficher qu'un « + » bleu sans fond.
   `#command-submit` (loupe de la palette de commandes) est également exclu : c'est
   un bouton icône, sans fond bleu — voir §14quater. */
input[type="submit"]:not(.deletelink):not([name="_delete"]):not(.danger):not([class*="bg-red-600"]),
button[type="submit"]:not(.deletelink):not(.danger):not([class*="bg-red-600"]):not(#command-submit),
.submit-row input[type="submit"]:not([class*="bg-red-600"]),
.submit-row a.default,
.button.default,
.addlink.bg-primary-600,
.gbe-btn-primary,
a.bg-primary-600 {
    background-color: var(--color-primary-600, #2563eb) !important;
    background-image: linear-gradient(135deg, var(--color-primary-500, #3b82f6) 0%, var(--color-primary-700, #1d4ed8) 60%, #4f46e5 100%) !important;
    background-repeat: no-repeat !important;
    color: #fff !important;
    border-color: transparent !important;
    box-shadow: 0 1px 2px rgba(37, 99, 235, 0.25) !important;
}

input[type="submit"]:not(.deletelink):not([name="_delete"]):not(.danger):hover:not([class*="bg-red-600"]),
button[type="submit"]:not(.deletelink):not(.danger):hover:not([class*="bg-red-600"]):not(#command-submit),
.submit-row input[type="submit"]:not([class*="bg-red-600"]):hover,
.submit-row a.default:hover,
.button.default:hover,
.addlink.bg-primary-600:hover,
.gbe-btn-primary:hover,
a.bg-primary-600:hover {
    background-image: linear-gradient(135deg, var(--color-primary-600, #2563eb) 0%, #4338ca 100%) !important;
    box-shadow: 0 4px 10px rgba(37, 99, 235, 0.28) !important;
    transform: translateY(-1px);
}

/* Boutons secondaires : pas de gradient */
.button:not(.default),
.submit-row a:not(.default) {
    background-image: none !important;
}

/* ============================================================
   14ter. « + » ICONE-SEUL — Icône bleue, sans fond bleu
   ============================================================
   Sur les index d'application (Administration de documents, de clients, …),
   `unfold/helpers/app_list_default.html` rend un lien `.addlink` réduit à une
   seule icône « add ». Le regrains générique `.addlink` (voir §14) lui imposait
   un fond bleu plein : le « + » ressortait alors comme un carre bleu. On neutralise
   ici tout remplissage pour ne laisser qu'un « + » bleu.
   Le libellé des vrais boutons « Ajouter <modèle> » n'est pas concerne (ils
   portent `bg-primary-600` et restent des boutons bleus). */
#content .module .addlink,
#content-main .module .addlink {
    background: none !important;
    background-image: none !important;
    background-color: transparent !important;
    box-shadow: none !important;
    border: none !important;
    border-radius: 0 !important;
    color: var(--gbe-primary) !important;
}

#content .module .addlink:hover,
#content-main .module .addlink:hover {
    background: none !important;
    background-image: none !important;
    box-shadow: none !important;
    color: var(--gbe-primary-strong) !important;
    transform: none !important;
}

/* ============================================================
   14quater. RECHERCHE GLOBALE (palette de commandes) — Loupe bleue, sans fond
   ============================================================
   La palette qui s'ouvre au clic sur la recherche de la barre latérale (ou
   Ctrl+K) contient `#command-submit`, un bouton icône qui n'enveloppe que la
   loupe. Le regain « boutons primaires » du §14 (`button[type="submit"]`)
   lui collait un fond bleu plein : sous la loupe apparaissait un carre bleu.
   On neutralise tout remplissage et on colore la loupe en bleu, comme celle de
   la barre latérale. Taille, position, champ, spinner de chargement et
   raccourci clavier sont inchanges. */
#command-submit,
#command-submit:hover {
    background: none !important;
    background-image: none !important;
    background-color: transparent !important;
    box-shadow: none !important;
    border: none !important;
    transform: none !important;
}

#command-submit .material-symbols-outlined {
    color: var(--gbe-primary) !important;
}

.dark #command-submit .material-symbols-outlined {
    color: var(--color-primary-400, #60a5fa) !important;
}

/* ============================================================
   14bis. BOUTONS DANGER / SUPPRIMER — Texte blanc sur fond rouge
   ============================================================
   Garantit un contraste maximal (#fff sur fond rouge) pour toutes
   les variantes « danger » d'Unfold et les liens .deletelink,
   quelle que soit la couleur héritée (a { color: ... !important }).
   Hover : fond rouge plus foncé, texte toujours blanc. */
.button.danger,
.deletelink,
a[class*="bg-red-600"],
button[class*="bg-red-600"],
input[class*="bg-red-600"],
input.deletelink,
input[name="_delete"] {
    color: #ffffff !important;
}

.button.danger:hover,
.deletelink:hover,
a[class*="bg-red-600"]:hover,
button[class*="bg-red-600"]:hover,
input[class*="bg-red-600"]:hover {
    color: #ffffff !important;
    background-color: #b91c1c !important;
    transform: none !important;
}

/* Hide Unfold's default header "back" on content pages */
.object-tools {
    margin-top: 0 !important;
}

/* TabularInline: Delete checkbox column */
.tabular.inline-related .original {
    width: 30px !important;
    text-align: center !important;
}

.tabular.inline-related .original input[type="checkbox"] {
    margin: 0 !important;
}

/* Checkbox alignment */
.checkbox-row {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 4px 0 !important;
}

.checkbox-row input[type="checkbox"] {
    min-height: auto !important;
    height: auto !important;
    width: 18px !important;
    min-width: 18px !important;
}

/* Readonly field display in change form */
.field-read_only .original {
    display: none !important;
}

/* Smooth transitions globally */
* {
    transition-property: border-color, box-shadow, background-color, color, opacity;
    transition-duration: 0.15s;
    transition-timing-function: ease;
}

/* Disable transitions for elements that shouldn't animate */
.fc-event,
.fc-daygrid-day,
.gbe-nav-btn,
.gbe-view-btn {
    transition: none !important;
}


/* ============================================================
   15. BARRE DE RECHERCHE GLOBALE (Changelists) — Composant Unifié
   Appliquée à toutes les listes Django Admin / Unfold
   Le code de référence est embarqué dans templates/admin/search_form.html
   ============================================================ */

/* --- Composant unique : le champ lui-même ---
   L'icône est ancrée à GAUCHE du cadre (position: absolute) et la réserve de
   place est assurée par un `padding-left` sur l'input : le texte ne peut donc
   jamais passer sous l'icône, et l'icône ne bouge plus quand on tape. */
#toolbar .gbe-search,
#changelist-search .gbe-search {
    position: relative;
    display: flex;
    align-items: center;
    gap: 6px;
    box-sizing: border-box;
    width: 100%;
    max-width: 300px;
    height: 38px;
    padding: 0 10px 0 12px;
    overflow: hidden;
    background: #fff;
    border: 1px solid var(--color-base-200, #e5e7eb);
    border-radius: 8px;
    box-shadow: 0 1px 2px rgba(16, 24, 40, 0.05);
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

#toolbar .gbe-search:hover,
#changelist-search .gbe-search:hover {
    border-color: var(--color-primary-400, #93c5fd);
}

#toolbar .gbe-search:focus-within,
#changelist-search .gbe-search:focus-within {
    border-color: var(--color-primary-600, #2563eb);
    box-shadow: 0 0 0 3px var(--color-primary-50, #eff6ff);
}

/* --- Champ fusionné dans le composant, sans bordure propre ---
   La loupe a été retirée de la barre de recherche (elle se superposait au
   texte « Rechercher ») : le champ n'a donc plus de `padding-left` réservé
   et occupe toute la largeur. Soumission toujours possible via la touche
   Entrée. */
#toolbar .gbe-search-input,
#toolbar .gbe-search input,
#changelist-search .gbe-search-input,
#changelist-search .gbe-search input {
    flex: 1 1 auto;
    min-width: 0;
    width: 100%;
    height: 100% !important;
    min-height: 0 !important;
    max-height: 100% !important;
    padding: 0 !important;
    margin: 0;
    font-size: 0.8125rem !important;
    font-weight: 500 !important;
    line-height: 1.2 !important;
    color: var(--color-base-700, #374151) !important;
    caret-color: var(--color-primary-600, #2563eb);
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    outline: none !important;
    text-overflow: ellipsis;
    appearance: none;
    -webkit-appearance: none;
}

#toolbar .gbe-search input:hover,
#toolbar .gbe-search input:focus,
#toolbar .gbe-search input:active,
#changelist-search .gbe-search input:hover,
#changelist-search .gbe-search input:focus,
#changelist-search .gbe-search input:active {
    background: transparent !important;
    border-color: transparent !important;
    box-shadow: none !important;
    outline: none !important;
}

#toolbar .gbe-search input::placeholder,
#changelist-search .gbe-search input::placeholder {
    color: var(--color-base-400, #9ca3af);
    font-weight: 400;
    opacity: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* --- Raccourci "/" — discret, dans le champ --- */
.gbe-search-kbd,
#changelist-search .gbe-search-kbd {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    margin-left: 4px;
}

.gbe-search-kbd kbd,
#changelist-search .gbe-search kbd {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 20px;
    min-width: 20px;
    padding: 0 5px;
    font-family: inherit;
    font-size: 0.6875rem;
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
    color: var(--color-base-400, #9ca3af);
    background: var(--color-base-100, #f3f4f6);
    border: 1px solid transparent;
    border-radius: 5px;
}

/* --- Thème sombre --- */
.dark #toolbar .gbe-search,
.dark #changelist-search .gbe-search {
    background: var(--color-base-900, #111827);
    border-color: var(--color-base-700, #374151);
}

.dark #toolbar .gbe-search:hover,
.dark #changelist-search .gbe-search:hover {
    border-color: var(--color-primary-500, #3b82f6);
}

.dark #toolbar .gbe-search:focus-within,
.dark #changelist-search .gbe-search:focus-within {
    border-color: var(--color-primary-400, #60a5fa);
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.2);
}

.dark #toolbar .gbe-search input,
.dark #changelist-search .gbe-search input {
    color: var(--color-base-100, #f3f4f6) !important;
}

.dark #toolbar .gbe-search input::placeholder,
.dark #changelist-search .gbe-search input::placeholder {
    color: var(--color-base-500, #6b7280);
}

.dark #changelist-search .gbe-search kbd {
    background: rgba(255, 255, 255, 0.06);
    color: var(--color-base-400, #9ca3af);
}

/* --- Responsive --- */
@media (max-width: 640px) {
    #toolbar .gbe-search,
    #changelist-search .gbe-search {
        max-width: 100%;
    }
}


/* ============================================================
   16. RESPONSIVE MOBILE — Unfold Admin
   Corrections globales pour l'expérience mobile de l'admin
   (largeurs >= 320px), sans modifier l'affichage desktop.
   ============================================================ */

/* --- Jamais de débordement horizontal au niveau de la page --- */
@media (max-width: 1023px) {
    html,
    body,
    #page,
    #main {
        overflow-x: hidden !important;
        max-width: 100% !important;
    }
}

/* --- Header / top bar : grandit au lieu de rogner, titre ellipsis --- */
@media (max-width: 767px) {
    /* Le conteneur h-64px de la barre supérieure peut grandir si besoin */
    div:has(> #header-inner) {
        height: auto !important;
        min-height: 56px !important;
        padding-top: 0.25rem !important;
        padding-bottom: 0.25rem !important;
    }

    /* Les éléments du header peuvent passer à la ligne sans chevaucher */
    #header-inner > div.flex,
    #header-inner .flex-row {
        flex-wrap: wrap !important;
        row-gap: 0.25rem !important;
    }

    /* Le titre (breadcrumbs) ne déborde jamais : ellipsis propre */
    #header-inner h1 {
        min-width: 0 !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
        overflow: hidden !important;
    }

    #header-inner h1 > * {
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
    }

    /* Bouton « Ajouter » : plus compact sur mobile */
    .addlink.bg-primary-600 {
        padding-left: 0.625rem !important;
        padding-right: 0.75rem !important;
        gap: 0.25rem !important;
        font-size: 0.8125rem !important;
    }
}

/* --- Onglets (tabs Projets / Phases / Tâches / Temps…) --- */
@media (max-width: 767px) {
    #tabs-wrapper {
        display: block !important;
        width: 100% !important;
    }

    #tabs-wrapper > .flex {
        width: 100% !important;
    }

    #tabs-items {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        scrollbar-width: none !important;
        max-width: 100% !important;
        flex-wrap: nowrap !important;
    }

    #tabs-items::-webkit-scrollbar {
        display: none !important;
    }

    /* Les onglets gardent leur taille, le conteneur défile sans bordure visible */
    #tabs-items > * {
        flex-shrink: 0 !important;
        flex-grow: 0 !important;
    }
}

/* --- Recherche : le racourci « / » ne doit jamais casser le layout --- */
@media (max-width: 480px) {
    .gbe-search-kbd {
        display: none !important;
    }
}

/* --- Résultats de listes : scroll interne maîtrisé, jamais de scroll page --- */
@media (max-width: 767px) {
    .changelist-form-container,
    #changelist .results {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        scrollbar-width: none !important;
    }

    .changelist-form-container::-webkit-scrollbar,
    #changelist .results::-webkit-scrollbar {
        display: none !important;
    }

    /* Le tableau central prend toute la largeur disponible */
    #result_list {
        min-width: 0 !important;
    }
}

/* --- Boutons d'action « Saisir du temps » et assimilés : jamais coupés --- */
@media (max-width: 480px) {
    .submit-row input[type="submit"],
    .submit-row a {
        padding: 0 0.875rem !important;
    }
}

/* Inline simplification */
.tabular.inline-related table, .tabular.inline-related td, .tabular.inline-related th { border: none !important; }
.tabular.inline-related tr { border-bottom: 1px solid var(--gbe-border, #e5e7eb) !important; }
.tabular.inline-related { box-shadow: none !important; }

/* Collapsed inline cleanup */
.tabular.inline-related details:not([open]) table { display: none !important; }
.tabular.inline-related details:not([open]) { border: none !important; margin: 0 !important; }
.tabular.inline-related details:not([open]) > summary { border: 1px solid var(--gbe-border, #e5e7eb) !important; border-radius: var(--gbe-radius, 8px) !important; }
.tabular.inline-related details:not([open]) > summary + * { display: none !important; }

/* Collapsed inline cleanup v2 */
.tabular.inline-related, .tabular.inline-related fieldset { border: none !important; box-shadow: none !important; background: transparent !important; }
.tabular.inline-related details:not([open]) .formset-wrapper, .tabular.inline-related details:not([open]) > div.flex { display: none !important; }
.tabular.inline-related details:not([open]) > summary { border: 1px solid var(--gbe-border, #e5e7eb) !important; border-radius: 8px !important; }