#top-navbar-container {
    position: sticky;
    top: 0;
    z-index: 990;
    flex-shrink: 0;
    background-color: transparent;
}

.top-navbar-internal {
    background-color: var(--topbar-bg);
    background-color: transparent;
    height: 55px;
    z-index: 990;
    /* border: 1px solid #e71616; */



}

/* 1. Set the wrapper as the positioning context */
.search-panel-wrapper {
    position: relative;
    /* This ensures that #search-results-floating is positioned relative to the form */
    flex-grow: 1;
    z-index: 990;

    /* Allows it to take up the space where the form is */
}


.search-input-box {
    /* Keep desktop target width but cap to viewport on mobile */
    width: min(350px, 85vw);
    /* Set your desired shorter width */
    flex-shrink: 0;
    transition: all 0.3s ease;
    z-index: 990;

    /* Prevents the Flex container from shrinking the box */
}

.search-input-box:hover {
    /* Expand but never exceed viewport */
    width: min(var(--topbar-search-box-expand-width), 88vw);
}

#search-input-field:focus {
    /* Expand but never exceed viewport */
    width: min(var(--topbar-search-box-expand-width), 88vw);
    /* subtle highlight */
}

#search-input-field {
    background-color: #ededf7;
    z-index: 990;

    /* border: 1px solid #e71616; */
    /* subtle highlight */
}

/* Ensure the input itself takes the full width of its new wrapper */
.search-input-box .form-control {
    width: 100%;
    border-radius: 12px;
    z-index: 990;



}

/* Styling for search results */

/* 2. Floating Results Panel */
#search-results-floating {
    position: absolute;

    /* Positioning: Starts right below the input form */
    top: calc(100% + 5px);
    /* 100% is the height of the form, + 5px gap */
    left: 0;

    /* Appearance: Floating and Elevated */
    background: white;
    /* border: 1px solid #ddd; */
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.175);
    /* Stronger shadow for floating effect */
    z-index: 6000;
    /* Must be higher than the topbar's z-index (1000) */
    border-radius: 6px;
    /* Rounded corners */

    /* Sizing: Wider than the input, but responsive */
    width: min(500px, 90vw);
    max-width: 90vw;
    max-height: 450px;

    display: flex;
    flex-direction: column;
    overflow-y: visible;
    /* Allows the results to scroll independently */

    /* Padding is usually added to the content rendered by HTMX, 
       but you can add a small padding here if needed */
    padding: 0;
}

/* Mobile-first safety: ensure the floating panel never forces horizontal overflow */
@media (max-width: 768px) {
    .search-input-box {
        width: 82vw !important;
        max-width: 340px !important;
    }

    .search-input-box:hover {
        width: 85vw !important;
        max-width: 380px !important;
    }

    #search-input-field:focus {
        width: 85vw !important;
        max-width: 380px !important;
    }

    #search-results-floating {
        width: 88vw !important;
        max-width: 480px !important;
        left: 2vw !important;
        right: auto !important;
    }
}

@media (max-width: 576px) {
    .search-input-box {
        width: 80vw !important;
        max-width: 300px !important;
    }

    .search-input-box:hover {
        width: 83vw !important;
        max-width: 320px !important;
    }

    #search-input-field:focus {
        width: 83vw !important;
        max-width: 320px !important;
    }

    #search-results-floating {
        width: 70vw !important;
        max-width: 420px !important;
        left: 2vw !important;
        right: auto !important;
    }
}

/* Extra small phones (iPhone SE, smaller devices) */
@media (max-width: 390px) {
    .search-input-box {
        width: 70vw !important;
        max-width: 280px !important;
    }

    .search-input-box:hover {
        width: 73vw !important;
        max-width: 300px !important;
    }

    #search-input-field:focus {
        width: 73vw !important;
        max-width: 300px !important;
    }

    #search-results-floating {
        width: 70vw !important;
        max-width: 380px !important;
        left: 2vw !important;
        right: auto !important;
    }
}


/* Styling for the individual result item */
.search-result-item {
    padding: 8px 15px;
    /* Add padding inside the floating panel */
    cursor: pointer;
    border-bottom: 1px solid #eee;
    /* Subtle separator */
    line-height: 1.3;
    /* Tighter spacing */
    transition: background-color 0.1s ease;
}

.search-result-item:hover {
    background-color: #f5f5f5;
    /* Highlight on hover */
}

/* Text Hierarchy */
.result-title {
    font-weight: 500;
    color: #333;
}

.result-details-row,
.result-purchase-rate {
    font-size: 0.85rem;
    color: #666;
}

.result-purchase-rate {
    padding-left: 10px;
}

.result-details-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
}


.status-indicator {
    font-weight: 600;
    /* Makes the text bold */
}

/* 1. Status is True (Active) */
.status-active {
    color: var(--color-success)
}

/* 2. Status is False (Not Active) */
.status-inactive {
    color: var(--color-primary)
}

/* Footer Links */
.results-separator {
    margin: 5px 0 10px 0;
    border: 0;
    border-top: 1px solid #eee;
}

.search-footer-links {
    padding: 0 15px 10px 15px;
    display: flex;
    flex-direction: column;
    gap: 5px;
    flex-shrink: 0;
}

.footer-link {
    font-size: 0.9rem;
    color: #007bff;
    /* Standard link color */
    text-decoration: none;
}

.search-results-list-wrapper {
    flex-grow: 1;
    /* CRITICAL: Takes up ALL available height */
    overflow-y: auto;
    /* CRITICAL: THIS is where the scrollbar appears */
    min-height: 0;
    /* Ensures it shrinks correctly inside the flex parent */
}