.shake-animation {
    animation: shake 0.5s cubic-bezier(.36,.07,.19,.97) both;
    transform: translate3d(0, 0, 0);
    backface-visibility: hidden;
    perspective: 1000px;
}

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

.is-invalid {
    border-color: #f1416c !important;
}

#date-error {
    transition: all 0.3s ease;
}

/* High contrast and premium design overrides for form fields to prevent background blending */
.form-control.form-control-solid,
.form-select.form-select-solid,
.select2-container--bootstrap5 .select2-selection.form-select-solid,
.select2-container--bootstrap5 .select2-selection--solid {
    background-color: #ffffff !important;
    border: 1px solid #d3d7e0 !important; /* High contrast border */
    color: #181c32 !important;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease !important;
}

/* Hover state */
.form-control.form-control-solid:hover,
.form-select.form-select-solid:hover,
.select2-container--bootstrap5 .select2-selection.form-select-solid:hover,
.select2-container--bootstrap5 .select2-selection--solid:hover {
    border-color: #a1a5b7 !important;
    background-color: #ffffff !important;
}

/* Focus state */
.form-control.form-control-solid:focus,
.form-select.form-select-solid:focus,
.select2-container--bootstrap5.select2-container--focus .select2-selection.form-select-solid,
.select2-container--bootstrap5.select2-container--focus .select2-selection--solid,
.select2-container--bootstrap5.select2-container--open .select2-selection.form-select-solid,
.select2-container--bootstrap5.select2-container--open .select2-selection--solid {
    background-color: #ffffff !important;
    border-color: #3e97ff !important;
    box-shadow: 0 0 0 0.25rem rgba(62, 151, 255, 0.1) !important;
    color: #181c32 !important;
}

/* Ensure placeholder contrast is excellent */
.form-control.form-control-solid::placeholder {
    color: #7e8299 !important;
}

/* Multi-select chips (assignees, followers, tags) in RTL.
   The RTL bundle reserves the gap for the remove button on the chip's left
   (`__display { margin-left }`) but leaves the button itself pinned right, so
   the "x" sits underneath the name and cannot be seen or clicked. Move it to
   the side the gap was cut for. */
[dir="rtl"] .select2-container--bootstrap5 .select2-selection--multiple .select2-selection__rendered .select2-selection__choice .select2-selection__choice__remove {
    right: auto;
    left: 0.5rem;
}

/* The chip's remove control is a destructive action, so colour it as one.
   The glyph is a mask-image, so background-color is what paints it. Note this
   file is loaded before the Metronic bundles, hence !important rather than
   relying on source order. */
.select2-container--bootstrap5 .select2-selection--multiple .select2-selection__rendered .select2-selection__choice .select2-selection__choice__remove,
.select2-container--bootstrap5 .select2-selection--multiple .select2-selection__rendered .select2-selection__choice .select2-selection__choice__remove:hover {
    background-color: var(--bs-danger) !important;
    opacity: 1 !important;
}

.select2-container--bootstrap5 .select2-selection--multiple .select2-selection__rendered .select2-selection__choice .select2-selection__choice__remove:hover {
    opacity: 0.7 !important;
}