/* Custom styles for Day Reminders app */

body {
    font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
}

/* Ensure FAB stays fixed */
#addBtn {
    position: fixed !important;
    bottom: 1.5rem !important;
    right: 1.5rem !important;
    z-index: 50;
}

/* Hide scrollbar for filter buttons */
.no-scrollbar::-webkit-scrollbar { 
    display: none; 
}
.no-scrollbar { 
    -ms-overflow-style: none; 
    scrollbar-width: none; 
}

/* Smooth transitions for modal */
#addModal {
    transition: opacity 0.3s ease;
}

/* Custom scrollbar for modal */
#addModal .bg-surface-light,
#addModal .bg-surface-dark {
    scrollbar-width: thin;
    scrollbar-color: #cbd5e0 #f7fafc;
}

#addModal .bg-surface-light::-webkit-scrollbar,
#addModal .bg-surface-dark::-webkit-scrollbar {
    width: 8px;
}

#addModal .bg-surface-light::-webkit-scrollbar-track,
#addModal .bg-surface-dark::-webkit-scrollbar-track {
    background: #f7fafc;
}

#addModal .bg-surface-light::-webkit-scrollbar-thumb,
#addModal .bg-surface-dark::-webkit-scrollbar-thumb {
    background-color: #cbd5e0;
    border-radius: 4px;
}

/* Animation for success toast */
@keyframes slideIn {
    from {
        transform: translateX(-50%) translateY(20px);
        opacity: 0;
    }
    to {
        transform: translateX(-50%) translateY(0);
        opacity: 1;
    }
}

#successToast {
    animation: slideIn 0.3s ease;
}

/* Filter button active state */
.filter-btn.active {
    background-color: #f48525 !important;
    color: white !important;
    border: none;
}

/* Hover state for active filter button - ensure text stays visible */
.filter-btn.active:hover {
    background-color: #d66e15 !important;
    color: white !important;
}

/* Inactive filter button states */
.filter-btn:not(.active) {
    background-color: white;
    color: #181411;
    border: 1px solid #e5e7eb;
}

.filter-btn:not(.active):hover {
    background-color: #f9fafb;
    color: #181411;
}

/* Dark mode inactive filter buttons */
.dark .filter-btn:not(.active) {
    background-color: #2d241c;
    color: white;
    border: 1px solid #4a3b32;
}

.dark .filter-btn:not(.active):hover {
    background-color: #3a2f26;
    color: white;
}

/* Responsive improvements */
@media (max-width: 640px) {
    /* Improve touch targets on mobile */
    button, a {
        min-height: 44px;
        min-width: 44px;
    }
    
    /* Better text wrapping on mobile */
    h1, h2, h3, h4, h5, h6 {
        word-break: break-word;
        hyphens: auto;
    }
    
    /* Prevent horizontal overflow */
    body {
        overflow-x: hidden;
    }
    
    /* Better spacing for contact cards on mobile */
    #contactsList > article {
        min-height: auto;
        padding: 0.75rem;
    }
    
    /* Compact contact card layout on mobile */
    #contactsList > article {
        gap: 0.75rem;
    }
    
    /* Ensure action buttons are easily tappable on mobile */
    #contactsList .edit-contact-btn,
    #contactsList .delete-contact-btn,
    #contactsList a[href*="wa.me"] {
        min-width: 44px;
        min-height: 44px;
    }
    
    /* Better date badge visibility on mobile */
    #contactsList > article > div:first-child > div:first-child {
        flex-shrink: 0;
    }
}

/* Ensure text doesn't overflow containers */
.break-words {
    word-break: break-word;
    overflow-wrap: break-word;
}

/* Better line height for multi-line text */
.leading-relaxed {
    line-height: 1.6;
}