/* Reusable Component Styling */

/* Card Hover Effects */
.card {
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.card:hover {
    transform: translateY(-5px);
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15) !important;
}

/* Button Transitions */
.btn {
    transition: all 0.2s ease;
}

.btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 0.25rem 0.5rem rgba(0, 0, 0, 0.1);
}

/* Custom component styling */

/* Fix modal z-index issues - ensure modals are always on top */
.modal {
    z-index: 1055 !important;
}

.modal-backdrop {
    z-index: 1050 !important;
}

/* Ensure modal is interactable when shown */
.modal.show {
    display: block !important;
}

/* Override any conflicting z-index from planning.css */
body.modal-open .modal {
    z-index: 9999 !important;
}

body.modal-open .modal-backdrop {
    z-index: 9998 !important;
}

/* Prevent buttons from moving/hovering in modals */
.modal .btn:hover {
    transform: none !important;
}

/* Ensure modal content is always on top and clickable */
.modal-dialog {
    pointer-events: auto !important;
    z-index: inherit !important;
}

.modal-content {
    pointer-events: auto !important;
}

/* Prevent any overlay from blocking modal */
body.modal-open {
    overflow: hidden;
}

/* Disable all transforms and transitions on modals to prevent shaking */
.modal.fade {
    transition: opacity 0.15s linear !important;
}

/* Force modal to be stable - no shaking */
.modal.show .modal-dialog {
    transform: none !important;
}

/* Make absolutely sure nothing blocks modal clicks */
.modal * {
    pointer-events: auto !important;
}

body.modal-open .modal {
    pointer-events: auto !important;
}

/* CRITICAL: Force all elements inside modal to NEVER transform on hover or any other action */
.modal-content *,
.modal-content *:hover,
.modal-content *:active,
.modal-content *:focus {
    transform: none !important;
}

/* Prevent any transform on modal dialog and its contents */
.modal-dialog,
.modal-dialog * {
    transform: none !important;
}

.modal.show .modal-dialog,
.modal.show .modal-dialog * {
    transform: none !important;
}

/* Prevent all transitions inside modal content except opacity */
.modal-content * {
    transition: none !important;
}

/* NUCLEAR OPTION: Disable ALL animations when modal is shown */
body.modal-open * {
    animation: none !important;
}

body.modal-open .modal-dialog {
    animation: none !important;
    transform: none !important;
}

body.modal-open .modal-content {
    animation: none !important;
}

/* Force modal to be rock solid stable */
.modal.show {
    animation: none !important;
}

.modal.show .modal-dialog {
    animation: none !important;
    transform: translate(0, 0) !important;
}

/* Disable Bootstrap's built-in slide-down animation completely */
.modal.fade .modal-dialog {
    transform: none !important;
    transition: none !important;
    -webkit-transition: none !important;
}

/* Ensure modal never moves on open */
.modal.show .modal-dialog,
.modal.show .modal-dialog *,
.modal.show .modal-content,
.modal.show .modal-content * {
    transform: none !important;
    will-change: auto !important;
}

/* Disable any potential GPU acceleration that might cause shaking */
.modal-dialog {
    will-change: auto !important;
    transform: translate(0, 0) !important;
    -webkit-transform: translate(0, 0) !important;
}