/* Utility classes for layout */
.grid {
    display: grid;
}

.grid-cols-1 {
    grid-template-columns: repeat(1, minmax(0, 1fr));
}

.grid-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.grid-cols-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.gap-6 {
    gap: 1.5rem;
}

.gap-4 {
    gap: 1rem;
}

.gap-8 {
    gap: 2rem;
}

.space-y-6 > * + * {
    margin-top: 1.5rem;
}

.space-y-3 > * + * {
    margin-top: 0.75rem;
}

.mb-6 {
    margin-bottom: 1.5rem;
}

.mb-4 {
    margin-bottom: 1rem;
}

.mt-8 {
    margin-top: 2rem;
}

.p-3 {
    padding: 0.75rem;
}

.p-4 {
    padding: 1rem;
}

.text-center {
    text-align: center;
}

.w-full {
    width: 100%;
}

.flex {
    display: flex;
}

.items-center {
    align-items: center;
}

.justify-between {
    justify-content: space-between;
}

@media (min-width: 768px) {
    .md\:grid-cols-2 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .md\:grid-cols-3 {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
    .md\:grid-cols-4 {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

@media (min-width: 1024px) {
    .lg\:grid-cols-2 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .lg\:grid-cols-3 {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
    .lg\:grid-cols-4 {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
    .lg\:col-span-2 {
        grid-column: span 2 / span 2;
    }
}

/* ========================================
   MOBILE RESPONSIVE UTILITIES
   ======================================== */
@media (max-width: 768px) {
    /* Form page headers - stack vertically */
    .flex.justify-between.items-center.mb-8,
    .flex.justify-between.items-center.mb-6 {
        flex-direction: column;
        align-items: flex-start !important;
        gap: 1rem;
    }

    /* Multi-column layouts to single column */
    .grid.grid-cols-2,
    .grid.grid-cols-3 {
        grid-template-columns: 1fr !important;
    }

    /* Flex row to column */
    .flex.gap-4 {
        flex-direction: column;
    }

    /* Form actions - stack or space evenly */
    .form-actions {
        flex-direction: column;
        gap: 0.75rem;
    }

    .form-actions .btn {
        width: 100%;
        justify-content: center;
    }

    /* Cards narrower max-width on mobile */
    .card[style*="max-width"],
    .clay-card[style*="max-width"] {
        max-width: 100% !important;
        padding: 1.5rem !important;
    }
}

@media (max-width: 480px) {
    /* Smaller padding on very small screens */
    .card {
        padding: 1rem;
    }

    .mb-8 {
        margin-bottom: 1.5rem;
    }

    .mb-6 {
        margin-bottom: 1rem;
    }

    .gap-6 {
        gap: 1rem;
    }

    .gap-4 {
        gap: 0.75rem;
    }
}

/* ========================================
   FORM HARDENING — Mobile-safe form fields
   Garde-fou qui blinde tous les inputs/textareas/selects pour qu'ils
   ne débordent JAMAIS de leur conteneur sur mobile, peu importe les
   styles inline du formulaire qui les contient.
   ======================================== */

/* Tous les inputs natifs : largeur fluide + touch target minimal */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="search"],
input[type="tel"],
input[type="url"],
input[type="number"],
input[type="date"],
input[type="time"],
input[type="datetime-local"],
input[type="month"],
input[type="week"],
input[type="color"],
input[type="file"],
textarea,
select {
    max-width: 100%;
    box-sizing: border-box;
}

/* Inputs date/time/number ont des spinners natifs qui peuvent dépasser
   le conteneur en grid 1fr 1fr sur mobile. Force width:100% + min-width:0. */
@media (max-width: 768px) {
    input[type="date"],
    input[type="time"],
    input[type="datetime-local"],
    input[type="month"],
    input[type="week"],
    input[type="number"] {
        width: 100% !important;
        min-width: 0 !important;
    }

    /* Les conteneurs grid à enfants doivent autoriser min-width:0 sinon les
       inputs natifs forcent leur largeur intrinsèque et débordent. */
    div[style*="grid-template-columns"] > div,
    div[style*="display: grid"] > div,
    div[style*="display:grid"] > div {
        min-width: 0;
    }

    /* Textarea : resize vertical uniquement (horizontal casse le layout mobile) */
    textarea {
        resize: vertical !important;
        min-height: 80px;
    }

    /* Touch target minimum sur boutons et liens d'action */
    button,
    .btn-premium,
    .btn-pill,
    input[type="submit"],
    input[type="reset"],
    input[type="button"] {
        min-height: 40px;
    }

    /* Les selects natifs utilisent custom-select.js sur mobile, mais au cas
       où certains ne sont pas remplacés (ex: dans un modal généré dynamiquement),
       force aussi width 100%. */
    select {
        width: 100% !important;
    }
}

/* Sous 480px : touch target plus généreux + padding plus serré */
@media (max-width: 480px) {
    button,
    .btn-premium,
    .btn-pill,
    input[type="submit"] {
        min-height: 44px;
    }

    /* Inputs avec icône à gauche : padding-left réduit pour éviter chevauchement */
    input[style*="padding-left: 2.5rem"],
    input[style*="padding-left:2.5rem"] {
        padding-left: 2.25rem !important;
    }
}