/**
 * JAOS — Formulaires Filament mobile-first (< 768px)
 * Cible : Select, TextInput, Textarea, CheckboxList, Toggle, Repeater,
 *         Grid, Section, Wizard, Tabs, table repeaters.
 */

@media (max-width: 767px) {
    /* ── Conteneurs : zéro scroll horizontal page ── */
    body.fi-panel-admin .fi-main,
    body.fi-panel-admin .fi-main-ctn,
    body.fi-panel-admin .fi-page,
    body.fi-panel-admin .fi-page-main,
    body.fi-panel-admin .fi-page-content,
    body.fi-panel-admin .fi-sc,
    body.fi-panel-admin form {
        max-width: 100%;
        min-width: 0;
        overflow-x: clip;
    }

    /* ── Grilles Filament : 1 colonne forcée ── */
    body.fi-panel-admin .fi-grid,
    body.fi-panel-admin .fi-sc.fi-grid,
    body.fi-panel-admin .fi-section-content.fi-grid {
        --cols-default: repeat(1, minmax(0, 1fr)) !important;
        --cols-sm: repeat(1, minmax(0, 1fr)) !important;
        --cols-md: repeat(1, minmax(0, 1fr)) !important;
        --cols-lg: repeat(1, minmax(0, 1fr)) !important;
        --cols-xl: repeat(1, minmax(0, 1fr)) !important;
        --cols-2xl: repeat(1, minmax(0, 1fr)) !important;
        grid-template-columns: repeat(1, minmax(0, 1fr)) !important;
    }

    body.fi-panel-admin .fi-grid-col {
        grid-column: 1 / -1 !important;
        min-width: 0 !important;
        max-width: 100% !important;
        width: 100% !important;
    }

    /* ── Champs : empilement vertical, pleine largeur ── */
    body.fi-panel-admin .fi-fo-field,
    body.fi-panel-admin .fi-fo-field-wrp,
    body.fi-panel-admin [data-field-wrapper] {
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        flex-wrap: nowrap !important;
    }

    body.fi-panel-admin .fi-fo-field-label-col,
    body.fi-panel-admin .fi-fo-field-content-col {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        flex: none !important;
        padding: 0 !important;
    }

    body.fi-panel-admin .fi-fo-field-label,
    body.fi-panel-admin .fi-fo-field-wrp-label,
    body.fi-panel-admin .fi-input,
    body.fi-panel-admin .fi-select-input,
    body.fi-panel-admin textarea,
    body.fi-panel-admin .fi-fo-toggle-buttons,
    body.fi-panel-admin .fi-fo-toggle-buttons label {
        writing-mode: horizontal-tb !important;
        text-orientation: mixed !important;
        white-space: normal !important;
        word-break: normal !important;
        overflow-wrap: anywhere;
    }

    body.fi-panel-admin .fi-fo-field-label {
        position: static !important;
        width: auto !important;
        height: auto !important;
        clip: auto !important;
        overflow: visible !important;
        margin: 0 0 0.35rem !important;
        font-size: 0.72rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.04em;
    }

    body.fi-panel-admin .fi-fo-field-label.fi-sr-only {
        position: static !important;
        width: auto !important;
        height: auto !important;
        clip: auto !important;
        margin: 0 0 0.35rem !important;
        overflow: visible !important;
    }

    /* Inputs / Select / Textarea */
    body.fi-panel-admin .fi-input-wrp,
    body.fi-panel-admin .fi-input-wrp-content-ctn,
    body.fi-panel-admin .fi-select-input,
    body.fi-panel-admin .fi-input,
    body.fi-panel-admin textarea,
    body.fi-panel-admin .choices,
    body.fi-panel-admin .choices__inner,
    body.fi-panel-admin .fi-fo-date-time-picker-input {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
    }

    body.fi-panel-admin .fi-input,
    body.fi-panel-admin .fi-select-input {
        min-height: 3rem;
        font-size: 1rem;
    }

    body.fi-panel-admin textarea {
        min-height: 7rem;
        font-size: 1rem;
        line-height: 1.55;
        resize: vertical;
    }

    /* CheckboxList */
    body.fi-panel-admin .fi-fo-checkbox-list,
    body.fi-panel-admin .fi-fo-checkbox-list-options {
        width: 100% !important;
        max-width: 100% !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 0.45rem;
    }

    body.fi-panel-admin label.fi-fo-checkbox-list-option {
        display: flex !important;
        align-items: center !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        padding: 0.75rem 0.85rem;
        box-sizing: border-box;
    }

    body.fi-panel-admin label.fi-fo-checkbox-list-option input[type="checkbox"] {
        width: 1.25rem;
        height: 1.25rem;
        flex-shrink: 0;
    }

    /* Toggle / ToggleButtons */
    body.fi-panel-admin .fi-fo-toggle,
    body.fi-panel-admin .fi-fo-toggle-buttons {
        width: 100% !important;
        max-width: 100% !important;
        flex-wrap: wrap !important;
    }

    body.fi-panel-admin .fi-fo-toggle-buttons .fi-btn {
        flex: 1 1 auto;
        min-width: min(100%, 8rem);
    }

    /* Tabs : scroll interne, pas de débordement page */
    body.fi-panel-admin .fi-tabs,
    body.fi-panel-admin .fi-sc-tabs {
        max-width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        flex-wrap: nowrap;
    }

    body.fi-panel-admin .fi-tabs-item {
        flex-shrink: 0;
        white-space: nowrap;
    }

    /* Wizard */
    body.fi-panel-admin .fi-sc-wizard,
    body.fi-panel-admin .fi-sc-wizard-step {
        max-width: 100%;
        min-width: 0;
        overflow-x: clip;
    }

    body.fi-panel-admin .fi-sc-wizard-header {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* Repeater classique (non-table) */
    body.fi-panel-admin .fi-fo-repeater,
    body.fi-panel-admin .fi-fo-repeater-item,
    body.fi-panel-admin .fi-fo-repeater-item-content {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
    }

    body.fi-panel-admin .fi-fo-repeater-add .fi-btn {
        width: 100%;
        justify-content: center;
        min-height: 3rem;
    }

    /* ── Table repeaters → cartes verticales ──
       CAUSE Filament v5 : @container (min-width:36rem) bascule en display:table
       dès que le conteneur .fi-fo-table-repeater ≥ 576px (pas la viewport).
       Fix : neutraliser container-type + layout flex colonne. ── */
    body.fi-panel-admin .fi-fo-table-repeater {
        container-type: normal !important;
        container-name: none !important;
        overflow-x: clip !important;
        max-width: 100% !important;
        width: 100% !important;
        min-width: 0 !important;
    }

    body.fi-panel-admin .fi-fo-table-repeater > table {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        table-layout: fixed !important;
    }

    body.fi-panel-admin .fi-fo-table-repeater thead {
        display: none !important;
    }

    body.fi-panel-admin .fi-fo-table-repeater tbody {
        display: flex !important;
        flex-direction: column !important;
        gap: 1rem;
        width: 100% !important;
    }

    body.fi-panel-admin .fi-fo-table-repeater tbody tr {
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        border-radius: 14px;
        border: 1px solid rgba(148, 163, 184, 0.18);
        background: linear-gradient(170deg, rgba(30, 30, 50, 0.55), rgba(15, 15, 30, 0.35));
        overflow: hidden;
        box-sizing: border-box;
    }

    body.fi-panel-admin .fi-fo-table-repeater tbody td {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        padding: 0.75rem 1rem;
        border: none !important;
        border-bottom: 1px solid rgba(148, 163, 184, 0.1) !important;
        box-sizing: border-box;
    }

    body.fi-panel-admin .fi-fo-table-repeater tbody td:last-child {
        border-bottom: none !important;
    }

    body.fi-panel-admin .fi-fo-table-repeater tbody td.fi-hidden {
        display: none !important;
    }

    /* Réafficher labels masqués par @container Filament en mode table */
    body.fi-panel-admin .fi-fo-table-repeater tbody td .fi-fo-field-label-content,
    body.fi-panel-admin .fi-fo-table-repeater tbody td .fi-in-entry-label {
        display: inline !important;
    }

    body.fi-panel-admin .fi-fo-table-repeater td:has(.fi-fo-table-repeater-actions) {
        padding: 0.55rem 1rem;
        background: rgba(124, 77, 255, 0.06);
        border-bottom: 1px solid rgba(148, 163, 184, 0.12) !important;
    }

    body.fi-panel-admin .fi-fo-table-repeater .fi-fo-table-repeater-actions {
        justify-content: flex-end;
        gap: 0.35rem;
        flex-wrap: wrap;
    }

    body.fi-panel-admin .fi-fo-table-repeater .fi-fo-repeater-add .fi-btn {
        min-height: 3.25rem;
    }

    /* Sections */
    body.fi-panel-admin .fi-section,
    body.fi-panel-admin .fi-sc-section {
        max-width: 100%;
        min-width: 0;
        overflow-x: clip;
    }

    /* FileUpload */
    body.fi-panel-admin .fi-fo-file-upload,
    body.fi-panel-admin .fi-fo-file-upload .filepond--root {
        width: 100% !important;
        max-width: 100% !important;
    }
}

/* ── Desktop table repeaters (≥ md) : masquer labels dupliqués ── */
@media (min-width: 768px) {
    body.fi-panel-admin .fi-fo-table-repeater .fi-fo-field-label-col,
    body.fi-panel-admin .fi-fo-table-repeater .fi-fo-field-label {
        position: absolute !important;
        width: 1px !important;
        height: 1px !important;
        padding: 0 !important;
        margin: -1px !important;
        overflow: hidden !important;
        clip: rect(0, 0, 0, 0) !important;
        white-space: nowrap !important;
        border: 0 !important;
    }
}