/* Custom CSS for SetDots */

/* Modal styles */
.modal {
    position: fixed;
    z-index: 50;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(17, 24, 39, 0.75); /* Dark, semi-transparent backdrop */
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity 0.2s ease-in-out;
    /* Ensure the modal can receive click events */
    pointer-events: auto;
}

.modal-content {
    animation: modal-pop 0.2s ease-out;
    /* Ensure content doesn't block backdrop clicks */
    pointer-events: auto;
    position: relative;
    z-index: 51;
}

@keyframes modal-pop {
    from { transform: scale(0.95); opacity: 0; }
    to { transform: scale(1); opacity: 1; }
}

/* Ensure modal close buttons are properly clickable */
.modal-close {
    cursor: pointer;
    z-index: 60;
    position: relative;
    /* Ensure the button has enough click area */
    min-width: 24px;
    min-height: 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.modal-close:hover {
    opacity: 0.8;
}

/* Fix for button elements inside modals */
.modal button {
    pointer-events: auto;
    cursor: pointer;
}

/* Ensure form elements work properly */
.modal input,
.modal select,
.modal textarea {
    pointer-events: auto;
}

/* Hidden state should prevent all interactions */
.modal.hidden {
    pointer-events: none;
    opacity: 0;
    visibility: hidden;
}

/* Ensure modals display correctly on small screens */
@media (max-width: 640px) {
    .modal {
        align-items: flex-start;
        overflow-y: auto;
        padding-top: 1rem;
    }
}

/* Custom scrollbar styles */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: #1f2937; border-radius: 10px; }
::-webkit-scrollbar-thumb { background: #4f46e5; border-radius: 10px; }
::-webkit-scrollbar-thumb:hover { background: #4338ca; }

/* Date input on Safari */
input[type="date"]::-webkit-calendar-picker-indicator {
    filter: invert(1);
}

/* Google Maps Autocomplete styling */
.pac-container {
    background-color: #1f2937; /* bg-gray-800 */
    border: 1px solid #374151; /* border-gray-700 */
    border-radius: 0.5rem;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    z-index: 9999 !important; /* Ensure it appears above other elements */
}
.pac-item {
    color: #f9fafb; /* text-gray-50 */
    padding: 0.5rem 1rem;
    border-top: 1px solid #374151; /* border-gray-700 */
    cursor: pointer;
}
.pac-item:first-child {
    border-top: none;
}
.pac-item-query {
    color: #f9fafb; /* text-gray-50 */
}
.pac-item:hover {
    background-color: #374151; /* bg-gray-700 */
}
.pac-icon {
    display: none; /* Hide default icon */
}

/* Success flash animation */
@keyframes flash-success {
    0% { background-color: #22c55e; }
    100% { background-color: transparent; }
}

.flash-success {
    animation: flash-success 1s ease-out;
}

/* Flashing animation for the break timer countdown */
@keyframes flash-red {
    0%, 100% { color: white; }
    50% { color: #ef4444; } /* red-500 */
}

.timer-flash {
    animation: flash-red 1s infinite;
}

select option {
    color: black;
    background-color: white;
}

/* Collapsible card styles */
.collapsible-content {
    transition: max-height 0.3s ease-in-out, padding 0.3s ease-in-out;
    max-height: 1500px; /* Large enough for any card content */
    overflow: hidden;
}

.collapsible-content.collapsed {
    max-height: 0;
    padding-top: 0;
    padding-bottom: 0;
    border-top-width: 0;
}

/* View transition */
@keyframes fade-in {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

.view-fade-in {
    animation: fade-in 0.3s ease-in-out;
}