:root {
    --app-motion-fast: 140ms;
    --app-motion-base: 200ms;
    --app-motion-delay: 200ms;
    --app-motion-ease: cubic-bezier(.2, .8, .2, 1);
}

@keyframes app-enter {
    from { opacity: 0; transform: translateY(6px); }
    to { opacity: 1; transform: none; }
}

@keyframes app-slide-down {
    from { opacity: 0; transform: translateY(-8px); }
    to { opacity: 1; transform: none; }
}

@keyframes app-badge-pop {
    0% { opacity: 0; transform: scale(.75); }
    70% { transform: scale(1.08); }
    100% { opacity: 1; transform: scale(1); }
}

@keyframes app-row-enter {
    from { opacity: 0; transform: translateY(4px); }
    to { opacity: 1; transform: none; }
}

@keyframes app-message-other {
    from { opacity: 0; transform: translateX(-8px); }
    to { opacity: 1; transform: none; }
}

@keyframes app-message-self {
    from { opacity: 0; transform: translateX(8px); }
    to { opacity: 1; transform: none; }
}

@keyframes app-filter-pop {
    from { opacity: 0; transform: translate(35%, -15%) scale(.7); }
    to { opacity: 1; transform: translate(35%, -15%) scale(1); }
}

@keyframes app-progress-enter {
    from { transform: scaleX(0); }
    to { transform: scaleX(1); }
}

@keyframes app-shake {
    25% { transform: translateX(-2px); }
    75% { transform: translateX(2px); }
}

.app-shell main:not(.documentazione-flow-shell),
.page-login .login-card,
.app-error-card {
    animation: app-enter var(--app-motion-base) var(--app-motion-ease) var(--app-motion-delay) both;
}

.alert.show {
    animation: app-slide-down var(--app-motion-base) var(--app-motion-ease) var(--app-motion-delay) both;
}

.modal.fade .modal-dialog {
    transform: translateY(10px) scale(.985);
    transition: transform var(--app-motion-base) var(--app-motion-ease);
}

.modal.show .modal-dialog {
    transform: none;
}

#notificheHomeModal.fade .modal-dialog {
    transform: translate(18px, -10px) scale(.985);
}

#notificheHomeModal.show .modal-dialog {
    transform: none;
}

.btn:not(:disabled):not(.disabled),
.app-topbar-float-btn,
.form-control,
.form-select,
.input-group-text,
.app-data-table tbody td,
.table tbody td {
    transition-duration: var(--app-motion-fast);
    transition-timing-function: ease-out;
}

.btn:not(:disabled):not(.disabled):active,
.app-topbar-float-btn:active {
    transform: translateY(1px) scale(.98);
}

.btn iconify-icon,
.btn i {
    transition: transform var(--app-motion-fast) ease-out;
}

.btn:not(:disabled):hover iconify-icon,
.btn:not(:disabled):hover i {
    transform: translate(-3%, 10%) scale(1.06);
}

.app-home-notify-badge {
    animation: app-badge-pop var(--app-motion-base) var(--app-motion-ease) var(--app-motion-delay) both;
}

.app-data-table tbody tr:nth-child(-n+12) {
    animation: app-row-enter var(--app-motion-base) var(--app-motion-ease) var(--app-motion-delay) both;
}

.app-data-table tbody tr:nth-child(2),
.app-home-grid > :nth-child(2),
.bdx-stats > :nth-child(2),
.sdx-stats > :nth-child(2) { animation-delay: calc(var(--app-motion-delay) + 25ms); }

.app-data-table tbody tr:nth-child(3),
.app-home-grid > :nth-child(3),
.bdx-stats > :nth-child(3),
.sdx-stats > :nth-child(3) { animation-delay: calc(var(--app-motion-delay) + 50ms); }

.app-data-table tbody tr:nth-child(4),
.app-home-grid > :nth-child(4) { animation-delay: calc(var(--app-motion-delay) + 75ms); }

.app-data-table tbody tr:nth-child(5) { animation-delay: calc(var(--app-motion-delay) + 100ms); }
.app-data-table tbody tr:nth-child(6) { animation-delay: calc(var(--app-motion-delay) + 125ms); }

.app-home-grid > div,
.bdx-stat-card,
.sdx-stat-card {
    animation: app-row-enter var(--app-motion-base) var(--app-motion-ease) var(--app-motion-delay) backwards;
}

.approvazioni-flow-state,
.valutazioni-flow-state,
.app-home-notify-item .badge,
.ruolo-row .badge,
.rivalutazioni-action-dot,
.filter-count-badge {
    animation: app-badge-pop var(--app-motion-base) var(--app-motion-ease) var(--app-motion-delay) both;
}

.filter-icon[data-count]::after {
    animation: app-filter-pop var(--app-motion-base) var(--app-motion-ease) var(--app-motion-delay) both;
}

.filter-icon iconify-icon,
.filter-menu,
.filter-list li {
    transition: transform var(--app-motion-fast) ease-out, background-color var(--app-motion-fast) ease-out, opacity var(--app-motion-fast) ease-out;
}

.filter-icon:hover iconify-icon {
    transform: scale(1.12);
}

.th-filter:has(.filter-menu.open) .filter-icon iconify-icon {
    transform: rotate(180deg);
}

.filter-menu.open {
    animation: app-row-enter var(--app-motion-base) var(--app-motion-ease) both;
}

.form-control:focus,
.form-select:focus,
.input-group:focus-within {
    transition: border-color var(--app-motion-fast) ease-out, box-shadow var(--app-motion-fast) ease-out, background-color var(--app-motion-fast) ease-out;
}

.form-check-input:checked {
    animation: app-badge-pop var(--app-motion-fast) var(--app-motion-ease);
}

.form-label {
    transition: color var(--app-motion-fast) ease-out;
}

.mb-3:has(.form-control:focus, .form-select:focus) > .form-label {
    color: #14557b;
}

.is-invalid,
.was-validated :invalid {
    animation: app-shake var(--app-motion-base) ease-out;
}

input[type="file"]::file-selector-button {
    transition: background-color var(--app-motion-fast) ease-out, color var(--app-motion-fast) ease-out;
}

input[type="file"]:hover::file-selector-button {
    background-color: rgba(20, 85, 123, .1);
}

input[type="file"]:required:valid {
    border-color: rgba(33, 134, 96, .55);
    box-shadow: 0 0 0 .15rem rgba(33, 134, 96, .12);
}

.app-home-notify-item,
.app-home-notify-placeholder,
.app-home-empty-state,
.approvazioni-flow-empty,
.valutazioni-flow-empty,
.documentazione-flow-empty {
    animation: app-row-enter var(--app-motion-base) var(--app-motion-ease) var(--app-motion-delay) both;
}

.rivalutazioni-selected-file { animation: app-row-enter var(--app-motion-base) var(--app-motion-ease) both; }
.app-home-notify-item:nth-child(2) { animation-delay: calc(var(--app-motion-delay) + 25ms); }
.app-home-notify-item:nth-child(3) { animation-delay: calc(var(--app-motion-delay) + 50ms); }
.app-home-notify-item:nth-child(4) { animation-delay: calc(var(--app-motion-delay) + 75ms); }

.rivalutazioni-chat-message--other {
    animation: app-message-other var(--app-motion-base) var(--app-motion-ease) var(--app-motion-delay) both;
}

.rivalutazioni-chat-message--self {
    animation: app-message-self var(--app-motion-base) var(--app-motion-ease) var(--app-motion-delay) both;
}

.rivalutazioni-chat-event,
.rivalutazioni-chat-date {
    animation: app-row-enter var(--app-motion-base) var(--app-motion-ease) var(--app-motion-delay) both;
}

.rivalutazioni-chat > :nth-child(2) { animation-delay: calc(var(--app-motion-delay) + 20ms); }
.rivalutazioni-chat > :nth-child(3) { animation-delay: calc(var(--app-motion-delay) + 40ms); }
.rivalutazioni-chat > :nth-child(4) { animation-delay: calc(var(--app-motion-delay) + 60ms); }
.rivalutazioni-chat > :nth-child(5) { animation-delay: calc(var(--app-motion-delay) + 80ms); }

.rivalutazioni-chat-attachment,
.rivalutazioni-selected-file {
    transition: transform var(--app-motion-fast) ease-out, box-shadow var(--app-motion-fast) ease-out;
}

.rivalutazioni-chat-attachment:hover,
.rivalutazioni-selected-file:hover {
    transform: translateY(-1px);
}

details[open] > :not(summary),
.collapse.show > * {
    animation: app-row-enter var(--app-motion-base) var(--app-motion-ease) both;
}

.app-sidenav-open .sidenav > a,
.app-sidenav-open .sidenav > form {
    animation: app-message-self var(--app-motion-base) var(--app-motion-ease) both;
}

.submenu[style*="max-height"] > a,
.submenu[style*="max-height"] > form {
    animation: app-message-self var(--app-motion-base) var(--app-motion-ease) both;
}

.progress-bar {
    transform-origin: left center;
    animation: app-progress-enter 420ms var(--app-motion-ease) var(--app-motion-delay) both;
}

.app-data-table tbody tr:has(.form-check-input:checked) td,
.app-data-table tbody tr:has(a:active, button:active) td {
    background-color: rgba(20, 85, 123, .09);
}

.spinner-border {
    animation-duration: .65s;
}

.htmx-added {
    animation: app-row-enter var(--app-motion-base) var(--app-motion-ease) var(--app-motion-delay) both;
}

.htmx-swapping {
    opacity: 0;
    transform: translateY(-6px);
    transition: opacity 180ms ease, transform 180ms ease;
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        scroll-behavior: auto !important;
        animation-delay: 0ms !important;
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-delay: 0ms !important;
        transition-duration: .01ms !important;
    }
}