/* =====================================================================
   Project search suggestions (jQuery UI autocomplete on .searchAllproject)
   and a few shared bits used by site.js. Theme: Zricks crimson #cf003f.
   ===================================================================== */

/* jQuery UI's screen-reader message ("1 result is available...") must stay hidden but readable.
   (The old script tried attr("display","none"), which does nothing.) */
.ui-helper-hidden-accessible {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

/* ---------- suggestion list ---------- */
.ui-autocomplete.zr-ac-menu {
    position: absolute;
    z-index: 1100 !important;
    list-style: none;
    margin: 0;
    padding: 6px;
    background: #fff;
    border: 1px solid #e6e9ed;
    border-radius: 14px;
    box-shadow: 0 16px 40px rgba(16, 24, 40, .16), 0 2px 6px rgba(16, 24, 40, .06);
    max-height: min(60vh, 440px);
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    font-family: Roboto, "Segoe UI", Arial, sans-serif;
    animation: zrAcIn .12s ease-out;
}

@keyframes zrAcIn {
    from { opacity: 0; transform: translateY(-4px); }
    to { opacity: 1; transform: none; }
}

.zr-ac-menu .autocomplete_listItem {
    list-style: none;
    margin: 0;
    padding: 0;
    border: 0;
    background: none;
}

.ui-menu.zr-ac-menu .zr-ac {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0 !important;
    padding: 10px 12px;
    border: 0 !important;
    border-radius: 10px;
    background: none;
    color: #1d2430;
    cursor: pointer;
    line-height: 1.3;
}

.zr-ac__icon {
    flex: 0 0 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    background: #f4f5f7;
    color: #6b7480;
    font-size: 20px !important;
}

.zr-ac__text {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.zr-ac__name {
    font-size: 15px;
    font-weight: 400;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.zr-ac__name mark {
    background: none;
    color: #cf003f;
    font-weight: 500;
    padding: 0;
}

.zr-ac__meta {
    margin-top: 2px;
    font-size: 12px;
    color: #6b7480;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.zr-ac__go {
    flex: 0 0 auto;
    color: #b0b7bf;
    font-size: 18px !important;
    opacity: 0;
    transition: opacity .12s;
}

/* hover / keyboard selection (jQuery UI 1.12+ uses ui-state-active, older versions ui-state-focus) */
.zr-ac-menu .zr-ac.ui-state-active,
.zr-ac-menu .zr-ac.ui-state-focus,
.zr-ac-menu .autocomplete_listItem:hover .zr-ac {
    background: #fff0f4 !important;
    color: #1d2430 !important;
}

.zr-ac-menu .zr-ac.ui-state-active .zr-ac__icon,
.zr-ac-menu .autocomplete_listItem:hover .zr-ac__icon {
    background: #cf003f;
    color: #fff;
}

.zr-ac-menu .zr-ac.ui-state-active .zr-ac__go,
.zr-ac-menu .autocomplete_listItem:hover .zr-ac__go {
    opacity: 1;
    color: #cf003f;
}

/* "No project found" row */
.zr-ac-menu .zr-ac-empty,
.zr-ac-menu .zr-ac-empty .zr-ac {
    cursor: default;
    opacity: 1 !important;
}

.zr-ac-menu .zr-ac-empty .zr-ac,
.zr-ac-menu .zr-ac-empty:hover .zr-ac {
    background: none !important;
    color: #6b7480 !important;
}

.zr-ac-menu .zr-ac-empty .zr-ac__icon,
.zr-ac-menu .zr-ac-empty:hover .zr-ac__icon {
    background: #f4f5f7;
    color: #9aa3ad;
}

/* thin moving bar under the search text while the project list loads (first search only) */
.searchAllproject.zr-search-loading {
    background-image: linear-gradient(90deg, transparent, #cf003f, transparent);
    background-repeat: no-repeat;
    background-size: 35% 2px;
    background-position: -40% 100%;
    animation: zrAcLoading 1s linear infinite;
}

@keyframes zrAcLoading {
    to { background-position: 140% 100%; }
}

/* ---------- phones: full-width list with bigger touch targets ---------- */
@media (max-width: 600px) {
    .ui-autocomplete.zr-ac-menu {
        left: 8px !important;
        right: 8px !important;
        width: auto !important;
        max-width: none !important;
        max-height: 55vh;
        border-radius: 16px;
    }

    .ui-menu.zr-ac-menu .zr-ac {
        padding: 12px 10px;
        gap: 12px;
    }

    .zr-ac__name {
        font-size: 16px;
    }

    .zr-ac__go {
        opacity: 1;
    }
}

@media (prefers-reduced-motion: reduce) {
    .ui-autocomplete.zr-ac-menu,
    .searchAllproject.zr-search-loading { animation: none; }
}