/**
 * Animations et optimisations mobiles globales
 * Appliqué à toutes les pages (client et admin)
 */

/* ========================================
   ANIMATIONS
   ======================================== */

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes slideDown {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes slideUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes slideInLeft {
    from {
        opacity: 0;
        transform: translateX(-20px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes slideInRight {
    from {
        opacity: 0;
        transform: translateX(20px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes scaleIn {
    from {
        opacity: 0;
        transform: scale(0.95);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes pulseSoft {
    0%, 100% {
        opacity: 1;
        transform: scale(1);
    }
    50% {
        opacity: 0.7;
        transform: scale(1.1);
    }
}

@keyframes shimmer {
    0% { background-position: -1000px 0; }
    100% { background-position: 1000px 0; }
}

@keyframes bounce {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-5px); }
}

/* Classes d'animation */
.animate-fade-in { animation: fadeIn 0.6s ease-out; }
.animate-slide-down { animation: slideDown 0.5s ease-out; }
.animate-slide-up { animation: slideUp 0.5s ease-out; }
.animate-slide-in-left { animation: slideInLeft 0.5s ease-out; }
.animate-slide-in-right { animation: slideInRight 0.5s ease-out; }
.animate-scale-in {
    animation: scaleIn 0.4s ease-out;
    animation-fill-mode: both;
}
.animate-pulse-soft { animation: pulseSoft 2s ease-in-out infinite; }
.animate-bounce { animation: bounce 1s ease-in-out infinite; }

/* ========================================
   SMOOTH SCROLL & TRANSITIONS
   ======================================== */

html {
    scroll-behavior: smooth;
}

/* Transitions fluides pour tous les éléments interactifs */
a, button, input, select, textarea {
    transition: all 0.2s ease;
}

.hover\:shadow-md,
.hover\:shadow-lg {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Transition fluide pour les icônes */
.group:hover .group-hover\:scale-110 {
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* ========================================
   EFFET SHIMMER SUR LES CARTES
   ======================================== */

.card-shimmer,
.stat-card {
    position: relative;
    overflow: hidden;
}

.card-shimmer::before,
.stat-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(255, 255, 255, 0.3),
        transparent
    );
    transition: left 0.5s;
}

.card-shimmer:hover::before,
.stat-card:hover::before {
    left: 100%;
}

/* ========================================
   FOCUS & ACCESSIBILITÉ
   ======================================== */

a:focus,
button:focus,
input:focus,
select:focus,
textarea:focus {
    outline: 2px solid rgb(59 130 246 / 0.5);
    outline-offset: 2px;
}

/* ========================================
   UTILITAIRES
   ======================================== */

.line-clamp-1 {
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.line-clamp-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.line-clamp-3 {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.break-words {
    word-wrap: break-word;
    overflow-wrap: break-word;
    word-break: break-word;
}

/* ========================================
   OPTIMISATIONS MOBILES
   ======================================== */

@media (max-width: 640px) {
    /* Touch targets Apple HIG */
    a, button {
        min-height: 44px;
        min-width: 44px;
    }

    /* Éviter le zoom automatique sur iOS */
    body {
        font-size: 16px !important;
    }

    input, select, textarea {
        font-size: 16px !important;
    }

    /* Paddings optimisés */
    .space-y-6 > * + * {
        margin-top: 1rem;
    }

    .p-5 {
        padding: 1rem !important;
    }

    .p-6 {
        padding: 1.25rem !important;
    }

    /* Grilles adaptatives */
    .grid.grid-cols-2 {
        gap: 0.75rem;
    }

    /* Tables responsives */
    .overflow-x-auto {
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }

    .overflow-x-auto::-webkit-scrollbar {
        display: none;
    }

    /* Améliorer les badges */
    .badge {
        font-size: 0.75rem;
        padding: 0.25rem 0.5rem;
        white-space: nowrap;
    }

    /* Icônes plus espacées */
    .fa-solid, .fa-brands {
        display: inline-block;
        min-width: 20px;
        text-align: center;
    }

    /* Cards plus compactes */
    .rounded-xl, .rounded-2xl {
        border-radius: 0.75rem;
    }

    /* Headers de modal */
    h1 {
        font-size: 1.5rem !important;
    }

    h2 {
        font-size: 1.25rem !important;
    }

    h3 {
        font-size: 1.125rem !important;
    }
}

/* Très petits écrans */
@media (max-width: 380px) {
    h1 {
        font-size: 1.25rem !important;
    }

    .text-2xl {
        font-size: 1.5rem !important;
    }

    .text-3xl {
        font-size: 1.75rem !important;
    }

    /* Grille raccourcis en 1 colonne */
    .grid.grid-cols-2 {
        grid-template-columns: repeat(1, minmax(0, 1fr));
    }
}

/* ========================================
   OPTIMISATIONS TACTILES
   ======================================== */

@media (hover: none) and (pointer: coarse) {
    /* Désactiver les effets hover sur tactile */
    .hover\:shadow-lg:hover {
        box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
    }

    .hover\:-translate-y-1:hover {
        transform: translateY(0);
    }

    /* Feedback tactile */
    a:active,
    button:active {
        transform: scale(0.98);
        opacity: 0.9;
    }

    /* Désactiver shimmer sur mobile */
    .card-shimmer::before,
    .stat-card::before {
        display: none;
    }
}

/* ========================================
   SAFARI iOS
   ======================================== */

@supports (-webkit-touch-callout: none) {
    /* Éviter double-tap zoom */
    a, button {
        touch-action: manipulation;
    }

    /* Hardware acceleration */
    .shadow-xl,
    .shadow-lg {
        -webkit-transform: translateZ(0);
        transform: translateZ(0);
    }

    /* Fix pour les inputs */
    input, select, textarea {
        -webkit-appearance: none;
        border-radius: 0;
    }
}

/* ========================================
   PERFORMANCES
   ======================================== */

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* ========================================
   ORIENTATION PORTRAIT
   ======================================== */

@media (orientation: portrait) and (max-width: 768px) {
    .space-y-6 > * + * {
        margin-top: 1.25rem;
    }
}

/* ========================================
   TABLES RESPONSIVES
   ======================================== */

@media (max-width: 768px) {
    .table-responsive {
        display: block;
        width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .table-modern th,
    .table-modern td {
        padding: 0.5rem !important;
        font-size: 0.875rem;
    }

    /* Masquer certaines colonnes sur mobile — fonctionne pour toutes les tables */
    .table-modern .hide-mobile,
    th.hide-mobile,
    td.hide-mobile {
        display: none;
    }
}

/* ========================================
   MODALS MOBILES
   ======================================== */

@media (max-width: 640px) {
    .modal-content {
        margin: 1rem;
        max-height: calc(100vh - 2rem);
        overflow-y: auto;
    }

    /* Boutons en pleine largeur sur mobile */
    .modal-footer button,
    .modal-footer a {
        width: 100%;
        margin: 0.25rem 0;
    }
}

/* ========================================
   FORMS OPTIMISÉS
   ======================================== */

@media (max-width: 640px) {
    .form-grid {
        grid-template-columns: 1fr !important;
    }

    .form-label {
        font-size: 0.875rem;
    }

    .form-input,
    .form-select,
    .form-textarea {
        font-size: 16px !important; /* Évite zoom iOS */
        padding: 0.625rem !important;
    }
}

/* ========================================
   ADMIN SPECIFIC
   ======================================== */

@media (max-width: 1024px) {
    /* Sidebar responsive */
    .admin-sidebar {
        transform: translateX(-100%);
        transition: transform 0.3s ease;
    }

    .admin-sidebar.open {
        transform: translateX(0);
    }

    /* Stats cards en 2 colonnes sur tablette */
    .admin-stats-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

@media (max-width: 640px) {
    /* Stats cards en 1 colonne sur mobile */
    .admin-stats-grid {
        grid-template-columns: 1fr !important;
    }

    /* Actions buttons en colonne */
    .admin-actions {
        flex-direction: column !important;
    }

    .admin-actions > * {
        width: 100%;
        margin: 0.25rem 0;
    }
}

/* ========================================
   PRINT STYLES
   ======================================== */

@media print {
    .no-print {
        display: none !important;
    }

    * {
        animation: none !important;
        transition: none !important;
    }
}