/**
 * SoPlanning - Optimistic UI Styles
 * Styles pour le feedback visuel des operations optimistes
 *
 * @since 1.60.00
 */

/* ============================================
   ETATS DES ELEMENTS
   ============================================ */

/* Element en cours de traitement (pending) */
.optimistic-pending {
    position: relative;
    opacity: 0.85;
    pointer-events: none; /* Empeche les interactions pendant le traitement */
}

.optimistic-pending::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: repeating-linear-gradient(
        -45deg,
        transparent,
        transparent 4px,
        rgba(0, 0, 0, 0.03) 4px,
        rgba(0, 0, 0, 0.03) 8px
    );
    border-radius: inherit;
    pointer-events: none;
    animation: optimistic-stripes 0.5s linear infinite;
}

@keyframes optimistic-stripes {
    0% {
        background-position: 0 0;
    }
    100% {
        background-position: 11px 0;
    }
}

/* Element confirme (succes) */
.optimistic-success {
    animation: optimistic-pulse-success 0.5s ease-out;
}

@keyframes optimistic-pulse-success {
    0% {
        box-shadow: 0 0 0 0 rgba(76, 175, 80, 0.5);
    }
    50% {
        box-shadow: 0 0 0 6px rgba(76, 175, 80, 0.2);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(76, 175, 80, 0);
    }
}

/* Element en rollback (erreur) */
.optimistic-rollback {
    animation: optimistic-shake 0.5s ease-out;
}

@keyframes optimistic-shake {
    0%, 100% {
        transform: translateX(0);
    }
    10%, 30%, 50%, 70%, 90% {
        transform: translateX(-4px);
    }
    20%, 40%, 60%, 80% {
        transform: translateX(4px);
    }
}

/* Element en erreur */
.optimistic-error {
    background-color: rgba(244, 67, 54, 0.1) !important;
    border: 2px solid #f44336 !important;
    animation: optimistic-error-fade 2s ease-out forwards;
}

@keyframes optimistic-error-fade {
    0% {
        background-color: rgba(244, 67, 54, 0.2);
        border-color: #f44336;
    }
    100% {
        background-color: transparent;
        border-color: transparent;
    }
}

/* ============================================
   NOTIFICATION D'ERREUR
   ============================================ */

.optimistic-error-notification {
    position: fixed;
    top: 20px;
    right: 20px;
    z-index: 10000;

    display: flex;
    align-items: center;
    gap: 10px;

    padding: 12px 16px;
    min-width: 280px;
    max-width: 400px;

    background: linear-gradient(135deg, #ff5252 0%, #f44336 100%);
    color: white;

    border-radius: 8px;
    box-shadow: 0 4px 20px rgba(244, 67, 54, 0.4);

    font-size: 14px;
    font-weight: 500;

    animation: optimistic-slide-in 0.3s ease-out;
}

.optimistic-error-notification.fade-out {
    animation: optimistic-slide-out 0.3s ease-out forwards;
}

@keyframes optimistic-slide-in {
    from {
        transform: translateX(100%);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

@keyframes optimistic-slide-out {
    from {
        transform: translateX(0);
        opacity: 1;
    }
    to {
        transform: translateX(100%);
        opacity: 0;
    }
}

.optimistic-error-notification i {
    font-size: 18px;
    flex-shrink: 0;
}

.optimistic-error-notification span {
    flex: 1;
    line-height: 1.4;
}

.optimistic-error-notification .close-btn {
    background: none;
    border: none;
    color: white;
    font-size: 20px;
    cursor: pointer;
    padding: 0 4px;
    opacity: 0.8;
    transition: opacity 0.2s;
    flex-shrink: 0;
}

.optimistic-error-notification .close-btn:hover {
    opacity: 1;
}

/* ============================================
   INDICATEUR DE CHARGEMENT SUR CELLULE
   ============================================ */

.cell-loading {
    position: relative;
}

.cell-loading::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 16px;
    height: 16px;
    margin: -8px 0 0 -8px;
    border: 2px solid rgba(0, 0, 0, 0.1);
    border-top-color: #667eea;
    border-radius: 50%;
    animation: optimistic-spin 0.6s linear infinite;
    z-index: 10;
    /* GPU acceleration */
    will-change: transform;
    transform-origin: center center;
}

@keyframes optimistic-spin {
    to {
        transform: rotate(360deg);
    }
}

/* ============================================
   DRAG & DROP SPECIFIQUE
   ============================================ */

/* Element en cours de deplacement (visuellement deplace mais pas encore confirme) */
.task-moving {
    opacity: 0.9;
    transform: scale(1.02) translateZ(0); /* GPU accelerated */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    transition: opacity 0.2s, transform 0.2s, box-shadow 0.2s;
    will-change: transform, opacity;
    backface-visibility: hidden;
}

/* Cellule de destination highlight pendant le drop */
.drop-target-active {
    background-color: rgba(102, 126, 234, 0.15) !important;
    outline: 2px dashed #667eea;
    outline-offset: -2px;
    will-change: background-color;
}

/* Confirmation visuelle apres drop reussi */
.drop-confirmed {
    animation: optimistic-drop-confirm 0.4s ease-out;
}

@keyframes optimistic-drop-confirm {
    0% {
        background-color: rgba(76, 175, 80, 0.3);
    }
    100% {
        background-color: transparent;
    }
}

/* ============================================
   RESPONSIVE
   ============================================ */

@media (max-width: 768px) {
    .optimistic-error-notification {
        left: 10px;
        right: 10px;
        max-width: none;
    }
}

/* ============================================
   ACCESSIBILITE - REDUCED MOTION
   ============================================ */

@media (prefers-reduced-motion: reduce) {
    .optimistic-pending::after,
    .optimistic-success,
    .optimistic-rollback,
    .optimistic-error,
    .optimistic-error-notification,
    .cell-loading::before,
    .task-moving,
    .drop-confirmed {
        animation: none;
        transition: none;
    }

    .optimistic-error-notification {
        transform: translateX(0);
        opacity: 1;
    }
}