/* Tailwind-совместимые стили для finfor.me */

/* Анимации для htmx */
.htmx-swapping {
    opacity: 0;
    transform: translateX(-20px);
    transition: all 0.5s ease-out;
}

.htmx-settling {
    opacity: 1;
}

/* Анимация для удаления строк таблицы */
tr.htmx-swapping {
    opacity: 0;
    transform: translateX(-100%) scale(0.8);
    transition: all 0.5s ease-out;
    background-color: #fef3c7;
}

tr:empty {
    display: none;
}

/* Анимация для добавления новых строк */
tr.htmx-added {
    opacity: 0;
    transform: translateX(20px);
    animation: slideIn 0.5s ease-out forwards;
}

@keyframes slideIn {
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* Спиннер для загрузки */
@keyframes spin {
    to { transform: rotate(360deg); }
}

.spinner {
    display: inline-block;
    width: 1rem;
    height: 1rem;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    animation: spin 0.75s linear infinite;
    vertical-align: middle;
    margin-right: 0.25rem;
}

/* Прогресс-бар */
@keyframes progress-stripe {
    0% { background-position: 1rem 0; }
    100% { background-position: 0 0; }
}

.progress-bar-animated {
    background-image: linear-gradient(
        45deg,
        rgba(255,255,255,.15) 25%,
        transparent 25%,
        transparent 50%,
        rgba(255,255,255,.15) 50%,
        rgba(255,255,255,.15) 75%,
        transparent 75%,
        transparent
    );
    background-size: 1rem 1rem;
    animation: progress-stripe 1s linear infinite;
}