/**
 * Panel Search Styles
 * 
 * CSS styles for search functionality in the panel plugin
 * Using Tailwind CSS utilities with minimal custom styles
 * 
 * @package Panel
 * @since 1.3.0
 */

/* Screen reader text - accessibility */
.screen-reader-text {
    position: absolute !important;
    clip: rect(1px, 1px, 1px, 1px);
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/* Force remove all borders from search inputs */
input[type="search"],
input[name="s"],
.search-field,
.mobile-search-input {
    border: none !important;
    border-width: 0 !important;
    border-style: none !important;
    border-color: transparent !important;
    outline: none !important;
}

input[type="search"]:focus,
input[name="s"]:focus,
.search-field:focus,
.mobile-search-input:focus {
    border: none !important;
    border-width: 0 !important;
    border-style: none !important;
    border-color: transparent !important;
    outline: none !important;
}

/* Override specific mobile search container rules */
.mobile-search-container input[type="search"] {
    border: none !important;
    border-width: 0 !important;
    border-style: none !important;
    border-color: transparent !important;
    outline: none !important;
}

.mobile-search-container input[type="search"]:focus {
    border: none !important;
    border-width: 0 !important;
    border-style: none !important;
    border-color: transparent !important;
    outline: none !important;
}

/* Even more specific overrides to ensure border removal */
div.mobile-search-container input[type="search"],
form .mobile-search-container input[type="search"],
.mobile-search-container form input[type="search"] {
    border: none !important;
    border-width: 0 !important;
    border-style: none !important;
    border-color: transparent !important;
    outline: none !important;
}

div.mobile-search-container input[type="search"]:focus,
form .mobile-search-container input[type="search"]:focus,
.mobile-search-container form input[type="search"]:focus {
    border: none !important;
    border-width: 0 !important;
    border-style: none !important;
    border-color: transparent !important;
    outline: none !important;
}

/* Settings page input fields - remove all borders */
.security-settings input[type="text"],
.security-settings input[type="password"],
.security-settings input[type="tel"],
.security-settings textarea,
.personal-info input[type="text"],
.personal-info input[type="tel"],
.personal-info textarea,
.profile-settings input[type="text"],
.profile-settings textarea {
    border: none !important;
    border-width: 0 !important;
    border-style: none !important;
    border-color: transparent !important;
    outline: none !important;
}

.security-settings input[type="text"]:focus,
.security-settings input[type="password"]:focus,
.security-settings input[type="tel"]:focus,
.security-settings textarea:focus,
.personal-info input[type="text"]:focus,
.personal-info input[type="tel"]:focus,
.personal-info textarea:focus,
.profile-settings input[type="text"]:focus,
.profile-settings textarea:focus {
    border: none !important;
    border-width: 0 !important;
    border-style: none !important;
    border-color: transparent !important;
    outline: none !important;
}

/* Search container states - using Tailwind classes */
.panel-plugin .mobile-search-container {
    transition: all 0.3s ease;
    position: relative;
}

/* Force full coverage for mobile search when expanded - OVERRIDE ALL WIDTH RESTRICTIONS */
.mobile-search-container.lg\\:hidden.expanded,
.mobile-search-container.expanded,
.panel-plugin .mobile-search-container.expanded {
    position: fixed !important;
    left: 0 !important;
    right: 0 !important;
    top: 0 !important;
    bottom: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    z-index: 9999 !important;
    background: rgba(0, 0, 0, 0.3) !important;
    backdrop-filter: blur(4px) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 1rem !important;
}

.mobile-search-container.lg\\:hidden.expanded .mobile-search-input,
.mobile-search-container.expanded .mobile-search-input,
.panel-plugin .mobile-search-container.expanded .mobile-search-input {
    width: 100% !important;
    max-width: 500px !important;
    padding: 1rem 3.75rem 1rem 1rem !important;
    background: white !important;
    border: 2px solid #3b82f6 !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2) !important;
    border-radius: 12px !important;
    font-size: 16px !important;
}

.mobile-search-container.lg\\:hidden.expanded .search-icon-button,
.mobile-search-container.expanded .search-icon-button,
.panel-plugin .mobile-search-container.expanded .search-icon-button {
    position: absolute !important;
    right: 1.5rem !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    z-index: 10000 !important;
}

/* Mobile search input responsive widths - REMOVED width restrictions for full coverage */

/* Mobile positioning - Desktop Style */
@media (max-width: 1023px) {
    .panel-plugin .mobile-search-container.expanded {
        position: fixed !important;
        left: 0 !important;
        right: 0 !important;
        top: 0 !important;
        bottom: 0 !important;
        width: 100vw !important;
        height: 100vh !important;
        z-index: 9999 !important;
        background: rgba(0, 0, 0, 0.3) !important;
        backdrop-filter: blur(4px) !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        padding: 1rem !important;
        transform: none !important;
    }
    
    .panel-plugin .mobile-search-container.expanded .mobile-search-input {
        width: 100% !important;
        max-width: 500px !important;
        padding: 1rem 3.75rem 1rem 1rem !important;
        background: white !important;
        border: 2px solid #3b82f6 !important;
        box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2) !important;
        border-radius: 12px !important;
        font-size: 16px !important;
    }
    
    .panel-plugin .mobile-search-container.expanded .mobile-search-input:focus {
        width: 100% !important;
        border-color: #2563eb !important;
        box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.2) !important;
        outline: none !important;
    }
    
    /* Show the search icon when expanded */
    .panel-plugin .mobile-search-container.expanded .search-icon-button {
        position: absolute !important;
        right: 1.5rem !important;
        top: 50% !important;
        transform: translateY(-50%) !important;
        z-index: 10000 !important;
        display: block !important;
    }
    
    /* Normal state positioning */
    .panel-plugin .mobile-search-container:not(.expanded) {
        order: -1; /* Place before hamburger menu */
        margin-right: 0.5rem; /* Small gap from hamburger menu */
        position: relative;
    }
    
    .panel-plugin .mobile-search-container:not(.expanded) .mobile-search-input {
        width: 100px;
    }
    
    /* Remove any width restrictions for expanded state */
    .panel-plugin .mobile-search-container.expanded .mobile-search-input {
        width: 100% !important;
        max-width: 500px !important;
    }
    
    /* Hide the search icon when collapsed to make room for placeholder */
    .panel-plugin .mobile-search-container:not(.expanded) .search-icon-button {
        display: none;
    }
}

@media (max-width: 768px) {
    .panel-plugin .mobile-search-container.expanded {
        position: fixed !important;
        left: 0 !important;
        right: 0 !important;
        top: 0 !important;
        bottom: 0 !important;
        width: 100vw !important;
        height: 100vh !important;
        z-index: 9999 !important;
        background: rgba(0, 0, 0, 0.3) !important;
        backdrop-filter: blur(4px) !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        padding: 1rem !important;
    }
    
    .panel-plugin .mobile-search-container.expanded .mobile-search-input {
        width: 100% !important;
        max-width: 500px !important;
        padding: 1rem 3.75rem 1rem 1rem !important;
        background: white !important;
        border: 2px solid #3b82f6 !important;
        box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2) !important;
        border-radius: 12px !important;
        font-size: 16px !important;
    }
    
    .panel-plugin .mobile-search-container.expanded .mobile-search-input:focus {
        width: 100% !important;
        border-color: #2563eb !important;
        box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.2) !important;
        outline: none !important;
    }
    
    .panel-plugin .mobile-search-container.expanded .search-icon-button {
        position: absolute !important;
        right: 1.5rem !important;
        top: 50% !important;
        transform: translateY(-50%) !important;
        z-index: 10000 !important;
    }
    
    /* Normal state adjustments for smaller screens */
    .panel-plugin .mobile-search-container:not(.expanded) {
        order: -1; /* Place before hamburger menu */
        margin-right: 0.25rem; /* Smaller gap on mobile */
    }
    
    .panel-plugin .mobile-search-container:not(.expanded) .mobile-search-input {
        width: 90px;
    }
    
    /* Hide the search icon when collapsed to make room for placeholder */
    .panel-plugin .mobile-search-container:not(.expanded) .search-icon-button {
        display: none;
    }
    
    /* Ensure proper spacing in header flex container */
    .panel-plugin .flex.items-center.space-x-2 {
        gap: 0.25rem;
    }
}

/* Search overlay animations */
.search-overlay {
    backdrop-filter: blur(4px);
    animation: fadeIn 0.3s ease;
}

.search-overlay.hidden {
    display: none !important;
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

/* Search suggestions animations */
.animate-slide-down {
    animation: slideDown 0.2s ease;
}

@keyframes slideDown {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Search input validation states */
.border-red-300 {
    border-color: #fca5a5 !important;
    box-shadow: 0 0 0 3px rgba(248, 113, 113, 0.1) !important;
    transition: all 0.3s ease;
}

.bg-red-50 {
    background-color: #fef2f2 !important;
}

/* Remove hover colors from search elements */
.mobile-search-container button:hover,
.search-form button:hover,
.search-overlay button:hover {
    color: inherit !important;
}

/* Remove hover styles from mobile search input */
.mobile-search-container input[type="search"]:hover {
    background-color: inherit !important;
    border: none !important;
    outline: none !important;
}

/* Ensure search input background color is preserved on hover */
.mobile-search-container input[type="search"]:hover,
.search-form input[type="search"]:hover {
    background-color: #374151 !important; /* bg-gray-700 */
}

/* Search input hover animations */
.mobile-search-container input[type="search"],
.search-form input[type="search"] {
    display: inline-block;
    transform-origin: center;
}

.mobile-search-container input[type="search"]:hover,
.search-form input[type="search"]:hover {
    transform: scale(1.05);
}

/* Dark mode support for search suggestions */
@media (prefers-color-scheme: dark) {
    .search-suggestions {
        background: #1f2937;
        border-color: #374151;
    }
    
    .search-suggestions a {
        color: #e5e7eb;
    }
    
    .search-suggestions a:hover {
        background-color: #374151;
    }
}

/* High contrast mode support */
@media (prefers-contrast: high) {
    .search-form input[type="search"] {
        border-width: 2px;
    }
    
    .search-form button[type="submit"] {
        border: 1px solid currentColor;
    }
}