/* Search Functionality Styles */

.button-search {
    cursor: pointer;
    margin-left: 10px;
}

/* Override icon font styling - use emoji only */
.button-search .toggle-button {
    display: inline-block;
    cursor: pointer;
    font-family: 'Ubuntu', Helvetica, Arial, sans-serif !important;
}

.button-search .toggle-button:before,
.button-search .toggle-button:after {
    content: none !important;
}

/* Ensure emoji is visible */
.button-search span {
    display: inline-block;
    font-style: normal;
    font-family: 'Ubuntu', Helvetica, Arial, sans-serif !important;
}

/* Search panel - Overlay on top with minimal footprint */
.results {
    position: fixed !important;
    top: 0 !important;  /* Start from very top */
    left: 0 !important;
    right: 0 !important;
    bottom: auto !important;
    height: auto !important;  /* Auto height based on content */
    width: 100% !important;
    background: transparent !important;  /* Transparent, blue only on meta */
    z-index: 10000 !important;  /* Above everything including header (which is z-index: 2) */
    overflow: visible !important;  /* Allow content to show */
    opacity: 0 !important;
    box-shadow: none !important;
    transition: opacity 0.25s ease !important;  /* Only fade in/out */
    pointer-events: none !important;  /* Don't block clicks when hidden */
}

/* When active - show search bar (always same size) */
.results.search-active {
    opacity: 1 !important;
    pointer-events: all !important;  /* Allow clicks when visible */
}

/* Search container - MINIMAL padding, bar only */
.results .scrollable {
    position: static !important;
    padding: 0 !important;  /* No padding */
    max-width: 100% !important;
    margin: 0 !important;
    display: block !important;
    visibility: visible !important;
    overflow: visible !important;
    background: transparent !important;  /* No background */
}

.results .wrapper {
    background: transparent !important;
    display: block !important;
    visibility: visible !important;
    height: auto !important;
    overflow: visible !important;
    margin: 0 !important;  /* No margin */
    padding: 0 !important;  /* No padding */
}

/* Search input box - FIXED HEIGHT blue bar at top - matches header height */
.results .meta {
    margin: 0 !important;
    background: #3f51b5 !important;  /* Blue background like nav */
    padding: 4px 15px !important;  /* Adjust padding to fit in 56px */
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;  /* Remove shadow - no white gap */
    display: block !important;
    visibility: visible !important;
    overflow: visible !important;
    height: 56px !important;  /* Match header height from application.css */
    min-height: 56px !important;
    max-height: 56px !important;
    box-sizing: border-box !important;
    position: relative !important;  /* For positioning close button */
}

/* Show border only when there's content in search results */
.results .meta.has-query {
    border-bottom: none !important;  /* Remove border, results will have white background */
    margin-bottom: 0 !important;  /* No gap */
}

/* Hide border when no results */
.results .meta.no-results-state {
    border-bottom: none !important;
    margin-bottom: 0 !important;  /* No gap */
}

/* Container for search input and close button */
.search-input-container {
    position: relative !important;
    width: 100% !important;
    max-width: 800px !important;
    margin: 0 auto !important;
    display: block !important;
}

/* Search input - fits perfectly in 56px bar */
#search-input {
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 13px 50px 13px 14px !important;  /* Extra right padding for close button */
    font-size: 18px !important;  /* Match header title size */
    border: 1px solid rgba(255, 255, 255, 0.3) !important;
    border-radius: 4px !important;
    box-sizing: border-box !important;
    transition: border-color 0.2s, background-color 0.2s !important;
    font-family: 'Ubuntu', Helvetica, Arial, sans-serif !important;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    background: rgba(255, 255, 255, 0.15) !important;
    color: white !important;
    line-height: 1.4 !important;
    height: 48px !important;  /* Taller input to fit in 56px bar */
    outline: none !important;
    box-shadow: none !important;  /* No shadow on input */
}

#search-input:focus {
    outline: none !important;
    background: rgba(255, 255, 255, 0.25) !important;  /* Lighter on focus */
    border-color: rgba(255, 255, 255, 0.5) !important;
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.1) !important;
}

#search-input:disabled {
    background: rgba(255, 255, 255, 0.1) !important;
    cursor: not-allowed !important;
    color: rgba(255, 255, 255, 0.5) !important;
}

#search-input:not(:disabled) {
    cursor: text !important;
}

#search-input::placeholder {
    color: rgba(255, 255, 255, 0.7) !important;  /* Light white placeholder */
}

/* Search results container - appears BELOW fixed search bar */
#search-results {
    visibility: visible !important;
    opacity: 1 !important;
    min-height: 0 !important;
    background: white !important;
    max-height: 0 !important;  /* Start hidden */
    overflow: hidden !important;  /* Hidden by default */
    overflow-x: hidden !important;
    padding: 0 !important;  /* No padding when hidden */
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15) !important;  /* Shadow for results area */
    transition: max-height 0.3s ease, padding 0.3s ease !important;  /* Smooth expand */
    margin: 0 !important;  /* No margin - flush with search bar */
}

/* When has query, expand results below the search bar */
.results.search-active.has-query #search-results {
    display: block !important;
    visibility: visible !important;
    max-height: calc(70vh - 56px) !important;  /* Adjust for 56px search bar */
    overflow-y: auto !important;  /* Scrollbar when needed */
    overflow-x: hidden !important;
    padding: 0 15px 10px 15px !important;  /* Add padding when visible */
}

/* Keep hidden when no query */
.results.search-active:not(.has-query) #search-results {
    display: none !important;
    max-height: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    visibility: hidden !important;
    margin: 0 !important;  /* No margin */
    box-shadow: none !important;  /* No shadow when hidden */
}

.search-results-list {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
    max-width: 800px !important;  /* Match input width */
    margin: 0 auto !important;  /* Center it */
    display: block !important;
    visibility: visible !important;
}

.search-result-item {
    border-bottom: 1px solid #eee !important;
    transition: background-color 0.2s !important;
    display: block !important;
    visibility: visible !important;
}

.search-result-item:last-child {
    border-bottom: none !important;
}

/* Result items - LARGER FONTS */
.search-result-item a {
    display: block !important;
    padding: 18px 14px !important;  /* More padding for larger fonts */
    text-decoration: none !important;
    color: #333 !important;
    transition: background-color 0.2s !important;
    visibility: visible !important;
}

.search-result-item a:hover,
.search-result-item.selected a {
    background: #f5f5f5 !important;
}

.search-result-item.selected a {
    background: #e3f2fd !important;  /* Light blue for keyboard selection */
    border-left: 3px solid #3f51b5 !important;
}

.result-title {
    font-weight: bold !important;
    font-size: 1.4em !important;  /* Increased from 1.3em */
    margin-bottom: 8px !important;
    color: #3f51b5 !important;
    display: block !important;
    line-height: 1.4 !important;
}

.result-path {
    font-size: 1.05em !important;  /* Increased from 1em */
    color: #666 !important;
    margin-bottom: 8px !important;
    font-style: italic !important;
    display: block !important;
}

.result-preview {
    color: #555 !important;
    font-size: 1.15em !important;  /* Increased from 1.1em */
    line-height: 1.6 !important;
    display: block !important;
}

.result-preview mark {
    background-color: #ffeb3b !important;
    padding: 3px 6px !important;
    border-radius: 3px !important;
    font-weight: 500 !important;
    color: #000 !important;
}

/* Messages - Match search-stats formatting */
.no-results {
    padding: 40px 20px !important;  /* More padding for breathing room */
    text-align: center !important;  /* Center the message */
    color: #666 !important;
    font-size: 1.15em !important;
    display: block !important;
    visibility: visible !important;
    background: white !important;
    max-width: 800px !important;
    margin: 20px auto !important;  /* More top margin, center it */
    font-weight: 400 !important;  /* Normal weight for readability */
    line-height: 1.6 !important;  /* Better line spacing */
}

/* Style the search term in no-results message */
.no-results em,
.no-results strong {
    color: #3f51b5 !important;  /* Blue color to match theme */
    font-weight: 600 !important;
    font-style: normal !important;
}

/* Keep search box at top when empty (no query typed) */
.results.search-active:not(.has-query) #search-results {
    display: none !important;
}

.search-stats {
    padding: 10px 0 0 0 !important;  /* Only top padding */
    color: #666 !important;
    font-size: 1.25em !important;  /* Increased from 1.15em */
    margin-bottom: 0px !important;
    display: block !important;
    visibility: visible !important;
    background: white !important;
    max-width: 800px !important;
    margin: 10px auto 0 auto !important;
    text-align: left !important;
    font-weight: 600 !important;
    padding-left: 14px !important;  /* Align with result items */
}

/* Search loading indicator */
.search-loading {
    padding: 10px 0 0 0 !important;  /* Match search-stats padding */
    text-align: left !important;  /* Left align like search-stats */
    color: #666 !important;
    font-size: 1.25em !important;  /* Match search-stats size */
    display: block !important;
    background: white !important;
    max-width: 800px !important;
    margin: 10px auto 0 auto !important;  /* Match search-stats margin */
    font-weight: 600 !important;  /* Match search-stats weight */
    padding-left: 14px !important;  /* Match search-stats alignment */
}

.search-loading:after {
    content: '...' !important;
    animation: dots 1.5s steps(4, end) infinite !important;
}

@keyframes dots {
    0%, 20% { content: '.'; }
    40% { content: '..'; }
    60%, 100% { content: '...'; }
}

/* Close button - positioned inside search input on the right */
.search-close {
    position: absolute !important;
    top: 50% !important;
    right: 8px !important;
    transform: translateY(-50%) !important;
    background: none !important;
    border: none !important;
    font-size: 32px !important;
    cursor: pointer !important;
    color: rgba(255, 255, 255, 0.7) !important;
    padding: 4px 8px !important;
    line-height: 1 !important;
    transition: color 0.2s !important;
    z-index: 10 !important;
    height: 40px !important;
    width: 40px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.search-close:hover {
    color: white !important;
    background: rgba(255, 255, 255, 0.1) !important;
    border-radius: 4px !important;
}

/* NO BACKDROP - removed to avoid dark overlay */
.search-backdrop {
    display: none !important;
}

/* Mobile responsive */
@media screen and (max-width: 768px) {
    .results .meta {
        padding: 4px 10px !important;  /* Adjust for mobile */
        height: 56px !important;  /* Match mobile header height */
        min-height: 56px !important;
        max-height: 56px !important;
    }
    
    .search-input-container {
        max-width: 100% !important;
    }
    
    #search-input {
        font-size: 18px !important;  /* Match header on mobile - don't change */
        padding: 13px 45px 13px 10px !important;  /* Adjust for smaller close button */
        height: 48px !important;  /* Fit in 56px mobile bar */
    }
    
    #search-results {
        padding: 0 10px 8px 10px !important;
    }
    
    .search-results-list {
        max-width: 100% !important;
    }
    
    .result-title {
        font-size: 1.3em !important;  /* Increased from 1.2em */
    }
    
    .result-path {
        font-size: 1em !important;  /* Increased from 0.95em */
    }
    
    .result-preview {
        font-size: 1.1em !important;  /* Increased from 1.05em */
    }
    
    .search-result-item a {
        padding: 16px 10px !important;  /* More padding for larger text */
    }
    
    .search-stats {
        font-size: 1.2em !important;  /* Increased from 1.1em */
        font-weight: 600 !important;
    }
    
    .search-close {
        right: 6px !important;
        font-size: 28px !important;
        height: 36px !important;
        width: 36px !important;
    }
    
    .no-results,
    .search-loading {
        max-width: 100% !important;
        font-size: 1.1em !important;
        text-align: center !important;  /* Center on mobile too */
        padding: 30px 15px !important;  /* More padding on mobile */
        font-weight: 400 !important;  /* Normal weight */
        margin: 20px auto !important;  /* Center it */
    }
    
    /* Results expand below on mobile too */
    .results.search-active.has-query #search-results {
        max-height: calc(80vh - 56px) !important;  /* Adjust for 56px bar */
    }
    
    /* Fix search button spacing on mobile */
    .button-search {
        padding-right: 8px !important;  /* Add right padding */
    }
    
    .button-search .toggle-button span {
        font-size: 16px !important;  /* Smaller text on mobile */
        font-weight: 500 !important;
    }
}

/* Extra small screens - hide "Zoeken" text, show only icon */
@media screen and (max-width: 479px) {
    .button-search .toggle-button span {
        display: none !important;  /* Hide text on very small screens */
    }
    
    .button-search .toggle-button {
        gap: 0 !important;  /* No gap when text is hidden */
        padding: 0 8px !important;  /* Center icon */
    }
}

/* Larger screens - match 64px header */
@media screen and (min-width: 720px) {
    .results .meta {
        height: 64px !important;  /* Match larger header height */
        min-height: 64px !important;
        max-height: 64px !important;
        padding: 8px 16px !important;
    }
    
    .search-input-container {
        max-width: 800px !important;
    }
    
    #search-input {
        font-size: 20px !important;  /* Match larger header title */
        padding: 12px 50px 12px 14px !important;  /* Extra right padding for close button */
        height: 48px !important;
    }
    
    .search-close {
        right: 8px !important;
        font-size: 32px !important;
        height: 40px !important;
        width: 40px !important;
    }
    
    /* Adjust results height for 64px bar */
    .results.search-active.has-query #search-results {
        max-height: calc(70vh - 64px) !important;
    }
    
    /* Ensure search button has proper spacing */
    .button-search {
        padding-right: 0 !important;  /* Reset mobile padding */
    }
    
    .button-search .toggle-button span {
        font-size: 18px !important;  /* Back to normal size on desktop */
    }
}