/* PC Rénovation — surcharges sidebar.
   sivoni rend chaque entrée avec `.nav-item { @apply flex items-start ... }`,
   ce qui colle le label en haut de la ligne (pas centré avec l'icône-box de
   40 px de haut). On bascule sur `items-center` pour aligner verticalement
   le texte avec le centre de l'icône. */

#nav-sidebar .nav-item {
    align-items: center !important;
}

/* Le wrapper du label : on garde un flex column (titre + éventuelle
   description), mais on s'assure qu'il soit centré verticalement à
   l'intérieur de la ligne. */
#nav-sidebar .nav-item-content {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* Sivoni dessine sa propre flèche via background-image sur tous les
   `select:not([class*="bg-none"]):not([multiple])` (cf. sivoni/styles.css).
   Mais sivoni n'applique PAS `appearance: none`, donc la flèche native du
   navigateur subsiste à côté → double flèche.
   On la supprime ici globalement pour tous les selects de l'admin. */
select:not([multiple]) {
    appearance: none !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
}

/* `list_displayed_filters` est rendu par le tag `admin_list_filter` (widget
   sidebar avec `flex-col` + `mb-6`). On veut le label AU-DESSUS du champ
   (donc on garde `flex-col`), mais aligné sur la même ligne que la searchbar.
   - On annule la marge basse pour ne pas pousser sous la barre
   - On aligne les selects par le BAS (flex-end) pour que la rangée
     "select / input search" se trouve sur la même baseline
   - Hauteur du select cohérente avec la searchbar (2.25rem ≈ h-9)
   Sélecteur structurel : la form des filtres est le frère adjacent
   de #searchbar-form dans le header sivoni. */
#searchbar-form ~ form {
    align-items: flex-end;
    flex-wrap: wrap;
}
/* La searchbar (h-9, sans label) doit s'aligner sur la baseline des selects
   de filtres (qui ont 1 ligne de label au-dessus). Sans cette règle, la
   searchbar reste collée en haut du flex container et apparaît "flottante".
   `align-self: flex-end` la pousse au bas de la ligne flex parente. */
#searchbar-form {
    align-self: flex-end;
}
#searchbar-form ~ form .flex.flex-col {
    margin-bottom: 0 !important;
    gap: 0.25rem;
}
#searchbar-form ~ form label {
    margin-bottom: 0 !important;
    white-space: nowrap;
    font-weight: 600;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: #64748b;
}
#searchbar-form ~ form select {
    height: 2.25rem;
    padding-top: 0;
    padding-bottom: 0;
}
#searchbar-form ~ form button[type="submit"] {
    height: 2.25rem;
    align-self: flex-end;
}


/* ============================================================
   RESPONSIVE GLOBAL — admin sivoni
   ============================================================
   Sivoni rend les changelists en "block stacked rows" sous lg
   (1024 px), mais sans label par cellule → l'utilisateur voit
   une suite de valeurs sans repère. On force le retour au mode
   tableau classique avec scroll horizontal, ce qui reste
   exploitable en doigt sur mobile. */

@media (max-width: 1023px) {
    /* Changelists : forcer table + scroll horizontal.
       sivoni applique les classes Tailwind `block` (sans préfixe) sous lg
       sur table/thead/tbody/tr. On override avec sélecteurs spécifiques
       ID + classe pour battre n'importe quelle règle Tailwind. */
    table#result_list,
    table#result_list.block {
        display: table !important;
        table-layout: auto !important;
        min-width: 100%;
        width: max-content;
    }
    table#result_list thead,
    table#result_list thead.block {
        display: table-header-group !important;
    }
    table#result_list tbody,
    table#result_list tbody.block {
        display: table-row-group !important;
    }
    table#result_list tr,
    table#result_list tr.block {
        display: table-row !important;
        margin: 0 !important;
        border: 0 !important;
        box-shadow: none !important;
        border-radius: 0 !important;
        background: transparent !important;
    }
    table#result_list th,
    table#result_list td,
    table#result_list th.block,
    table#result_list td.block,
    /* Sivoni met aussi `hidden` sur les <th> hors 1er sous lg */
    table#result_list thead th.hidden {
        display: table-cell !important;
        white-space: nowrap;
        padding: .6rem .75rem !important;
        vertical-align: middle !important;
    }
    /* Sivoni rend chaque <td> avec un pseudo-element `::before` qui affiche
       `content: attr(data-label)` en mobile (pour son mode "carte sans
       header"). En forçant le mode table, on cache ces labels redondants. */
    table#result_list td::before,
    table#result_list th::before {
        content: none !important;
        display: none !important;
    }
    /* Le wrapper data-simplebar autour de la table doit autoriser le
       scroll horizontal — sivoni le pose déjà, mais on s'assure. */
    .changelist-form-container [data-simplebar],
    #changelist [data-simplebar] {
        overflow-x: auto !important;
        max-width: 100vw;
    }

    /* Bandeau filtres en ligne : sur mobile, on cache les
       `list_displayed_filters` (selects status/type/seller au-dessus
       du tableau) — ils prennent trop de place. L'utilisateur passe
       par le bouton "Filtres" (sheet sivoni) qui rend les
       `list_filter` classiques. La searchbar reste accessible. */
    #searchbar-form ~ form {
        display: none !important;
    }
    .flex.flex-col.sm\:flex-row.h-auto.mb-4 {
        flex-direction: row !important;
        align-items: center !important;
        gap: .5rem !important;
    }

    /* Change_form : sivoni utilise des `.aligned` à 2 colonnes,
       on les force en empilement vertical. */
    .field-row {
        flex-direction: column !important;
        align-items: stretch !important;
    }
    .field-line {
        max-width: 100% !important;
        flex: 1 1 100% !important;
    }
    /* Fieldsets affichés en grid 2-col deviennent 1-col */
    fieldset.module > .grid,
    .module > .grid {
        grid-template-columns: 1fr !important;
    }

    /* Inputs : confort tactile (44 px target Apple/Material) */
    input[type="text"],
    input[type="email"],
    input[type="number"],
    input[type="search"],
    input[type="tel"],
    input[type="url"],
    input[type="password"],
    input[type="date"],
    input[type="datetime-local"],
    select:not([multiple]),
    .button, button, .submit-row input[type="submit"] {
        min-height: 44px;
        font-size: 16px;
        /* font-size: 16px évite le zoom auto-iOS sur focus */
    }

    /* Sidebar : sivoni ouvre/ferme en overlay sur mobile, on
       s'assure que la zone de contenu prend toute la largeur. */
    #main-content,
    main {
        padding-left: .75rem !important;
        padding-right: .75rem !important;
    }

    /* Object-tools (Ajouter) reste tactile */
    .object-tools a, .object-tools button {
        min-height: 44px;
        display: inline-flex;
        align-items: center;
    }

    /* Pagination tactile */
    .paginator a, .paginator span {
        min-width: 40px;
        min-height: 40px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }
}

/* La vue "Mes RDV (mobile)" n'a de sens que sur petit écran : on cache
   son entrée sidebar dès qu'on est sur tablette/desktop (≥ 1024 px).
   L'URL reste accessible directement (tests admin) mais ne pollue plus
   la sidebar des utilisateurs back-office. */
@media (min-width: 1024px) {
    a.nav-item[href*="/appointment/appointment/mobile/"] {
        display: none !important;
    }
}

/* ------------------------------------------------------------
   Flaticon UICONS — icônes utilisées comme avatars dans les
   changelists (Client/Customer/Lead/User/Signataire).
   On NE TOUCHE PAS au `display` du <i> (qui doit rester
   `inline-block` pour que le glyph `:before` se rende via la
   webfont) — on anime juste avec `transform` au survol.
   ------------------------------------------------------------ */
.fi-animated {
    display: inline-block;
    transform-origin: center;
    transition: transform .25s ease-out, color .25s ease-out;
    will-change: transform;
}
/* Animation déclenchée au hover sur la ligne <tr> entière → toute
   la cellule devient une zone de trigger, plus naturel qu'un hover
   strict sur l'icône. */
#result_list tr:hover .fi-animated,
.fi-animated:hover {
    animation: fi-pulse .6s ease-in-out;
    color: #1d4ed8;
}
@keyframes fi-pulse {
    0%   { transform: scale(1)     rotate(0deg); }
    25%  { transform: scale(1.18)  rotate(-6deg); }
    50%  { transform: scale(1.08)  rotate(4deg); }
    75%  { transform: scale(1.14)  rotate(-2deg); }
    100% { transform: scale(1)     rotate(0deg); }
}

/* Très petit mobile (< 480 px) — table déjà horizontal, on
   réduit les paddings pour gagner de la place. */
@media (max-width: 479px) {
    #result_list th,
    #result_list td {
        padding: .45rem .55rem !important;
        font-size: .85rem;
    }
}