/* CBE Database - Main Styles */

/* Utility classes */
.hidden {
    display: none !important;
}

/* Modal scroll management */
body.modal-open {
    overflow: hidden;
    position: fixed;
    width: 100%;
}

/* Modal backdrop - prevent scrolling */
.fixed.inset-0 {
    overflow: hidden;
}

/* Modal container - allow proper height calculation */
.fixed.inset-0 > div {
    max-height: 90vh !important;
    overflow: visible !important;
}

/* Modal content container - enable scrolling within modal */
.flex-1.overflow-y-auto {
    overflow-y: auto !important;
    max-height: calc(90vh - 8rem) !important;
    flex: 1 1 0% !important;
}

.mobile-first {
    min-height: 100vh;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.card {
    backdrop-filter: blur(10px);
    background: rgba(255, 255, 255, 0.95);
    border-radius: 16px;
    box-shadow: 0 8px 32px rgba(31, 38, 135, 0.37);
}

.btn-primary {
    background: linear-gradient(45deg, #667eea, #764ba2);
    transition: all 0.3s ease;
}

.btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(102, 126, 234, 0.4);
}

/* Mobile-specific modal fixes for real devices */
@media screen and (max-width: 768px) {
    /* Force modal visibility on mobile */
    .fixed.inset-0 {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        width: 100% !important;
        height: 100% !important;
        z-index: 9999 !important;
    }
    
    /* Ensure modal content is properly sized */
    .fixed.inset-0 > div {
        max-height: 100vh !important;
        max-width: 100vw !important;
        margin: 0 !important;
    }
}

/* Mobile-specific fixes for touch devices */
@media (hover: none) and (pointer: coarse) {
    /* Remove hover effects on touch devices */
    .hover\:bg-gray-600:hover {
        background-color: rgb(75 85 99); /* Keep original bg-gray-500 */
    }
    .hover\:text-gray-600:hover {
        color: rgb(156 163 175); /* Keep original text-gray-400 */
    }
}

/* Prevent mobile tap highlighting */
button, .btn, [role="button"] {
    -webkit-tap-highlight-color: transparent;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

/* Ensure touch-manipulation for all interactive elements */
button, .btn, [role="button"], input, select, textarea {
    touch-action: manipulation;
}

/* FontAwesome icon fixes */
.fas, .far, .fab, .fa {
    display: inline-block !important;
    width: auto !important;
    height: auto !important;
    vertical-align: middle !important;
}

/* Ensure icons in buttons are properly aligned */
button i, .btn i, [role="button"] i {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    vertical-align: middle;
}