/* Shared styles used across multiple pages */

/* Toast notifications */
.toast-body-update {
    background: #ffd800;
}

.toast-body-create {
    background: #b6ff00;
}

.toast-body-deleted {
    background: #e09696;
}

.toast-body-error {
    color: red;
}

.toast-header-error {
    background: red;
    color: white;
}

/* Spinner overlay */
.spinner-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: rgba(255, 255, 255, 0.5);
    border-radius: 8px;
    z-index: 2;
    transition: opacity 0.3s ease;
}

.spinner-overlay.hidden {
    opacity: 0;
    pointer-events: none;
}

/* Dropzone */
#mydropzone {
    min-width: 300px;
    min-height: 300px;
}

.dz-preview:hover .dz-image img {
    filter: none !important;
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
}

.dropzone {
    width: 350px;
    height: 350px;
    aspect-ratio: 1 / 1;
    border: 2px dashed #ccc;
    border-radius: 10px;
    background-color: #fafafa;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    position: relative;
    background-color: transparent;
}

.dropzone .dz-message {
    text-align: center;
    font-size: 0.9rem;
    color: #777;
}

.dropzone .dz-details {
    display: none;
}

.dropzone .dz-preview .dz-image {
    width: 300px;
    height: 300px;
    border-radius: 0;
}

/* Common utility classes */
.justifiy-element-size {
    width: 100%;
    height: 100%;
}

/* Icon hover effects */
.fa-trash:hover {
    color: red;
    cursor: pointer;
}

.fa-pen-to-square {
    color: black;
}

.fa-pen-to-square:hover {
    color: green;
    cursor: pointer;
}

.addbutton:hover {
    color: green;
}

/* Blinker animation */
.blinker-button {
    animation: blinker 1s;
    animation-iteration-count: 3;
}

@keyframes blinker {
    50% {
        opacity: 0;
    }
}

/* Tab content */
.tab-content {
    flex: 1 1 auto;
    position: relative;
}

/* Alert styles */
.alert {
    margin: 10px 0 10px 10px;
}

.input-validation-error {
    background-color: #fee;
}