/* Custom CSS for menu-specific styles not easily done in Tailwind */

/* Specific mobile menu styles that are harder to do purely with Tailwind classes */
.mobile-nav.active {
    transform: translateX(0); /* Slide in */
}

.mobile-menu-overlay.active {
    display: block; /* Show overlay when menu is active */
}

.has-submenu-mobile .submenu-mobile {
    /* Tailwind: overflow-hidden transition-max-height duration-300 ease-in-out */
}

.has-submenu-mobile.active .submenu-mobile {
    max-height: 200px; /* Adjust this value if your sub-menu items are taller or more numerous */
}

.has-submenu-mobile.active > a .fa-chevron-down {
    transform: rotate(180deg); /* Rotate chevron when active */
}

/* Hide scrollbar for mobile menu if desired */
.mobile-nav::-webkit-scrollbar {
    width: 0;
    background: transparent;
}
.mobile-nav {
    -ms-overflow-style: none; /* IE and Edge */
    scrollbar-width: none; /* Firefox */
}

/* Custom styles for the friends table background and text */
.friends-table tbody tr {
    background-color: #F8F8F8 !important; /* Cream color for general rows */
    color: #333333 !important; /* Dark text for cream background */
    /* Make sure these styles are specific enough not to conflict with other elements */
}

/* Add hover effect for table rows */
.friends-table tbody tr:hover {
    background-color: #e0e0e0 !important; /* Slightly darker cream on hover */
}

/* public_html/css/style.css */


.app-input:focus {
    border-color: #63b3ed; /* A blue border on focus */
    box-shadow: 0 0 0 3px rgba(66, 153, 225, 0.5); /* Blue glow on focus */
}

/* Ensure your placeholder text is also visible */
.app-input::placeholder {
    color: #a0aec0; /* A lighter gray for placeholder text */
    opacity: 1; /* Firefox default is lower opacity */
}

/* In your style.css file or a <style> block */

/* Primary Button Style (Example, adjust colors as needed) */
.app-button-primary {
    @apply px-4 py-2 rounded-md font-semibold text-white bg-blue-600 hover:bg-blue-700
           shadow-md transition-colors duration-200
           focus:outline-none focus:ring focus:ring-blue-300 focus:ring-opacity-75;
}

/* Secondary Button Style (Used for "Save Profile", "Change Image", etc.) */
.app-button-secondary {
    @apply px-4 py-2 rounded-md font-semibold text-white bg-purple-600 hover:bg-purple-700
           shadow-md transition-colors duration-200
           focus:outline-none focus:ring focus:ring-purple-300 focus:ring-opacity-75;
}

/* Pagination Buttons (Example, currently using similar styles) */
.app-button-pagination {
    @apply px-3 py-1 rounded bg-purple-600 hover:bg-purple-700 disabled:opacity-50
           shadow-sm transition-colors duration-200
           focus:outline-none focus:ring focus:ring-purple-300 focus:ring-opacity-75;
}


.app-input {
    width: 100%;
    padding: 0.75rem 1rem; /* Adjust padding as needed */
    border-radius: 0.375rem; /* Tailwind's rounded-md */
    border: 1px solid #4a5568; /* A subtle dark border */
    background-color: #ffffff; /* Explicitly white background */
    color: #333333; /* Explicitly dark text color - adjust as desired was #333333 */
    outline: none;
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}