/* ============================================================
   Pretraga kroz module (plan 056)

   Polje u gornjoj traci i padajući popis ispod njega. Traka je sticky i ima
   z-index 20, pa panel mora biti iznad toga — inače nestane ispod sadržaja
   čim se stranica pomakne.
   ============================================================ */

/* Širinu daje srednji stupac trake (v. qms.css), a ne ovdje zadana mjera:
   polje tako raste i pada s prozorom, a ostaje na sredini. */
.qms-pretraga {
    position: relative;
    display: flex;
    align-items: center;
    gap: 9px;
    width: 100%;
    min-width: 0;
}

.qms-pretraga-okvir {
    position: relative;
    display: flex;
    align-items: center;
    flex: 1 1 auto;
    min-width: 0;
}

.qms-pretraga-ikona {
    position: absolute;
    left: 10px;
    font-size: 13px;
    color: var(--ink-4);
    pointer-events: none;
}

.qms-pretraga-polje {
    width: 100%;
    height: 32px;
    padding: 0 32px 0 30px;
    font-size: 13px;
    color: var(--ink-strong);
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 7px;
}

.qms-pretraga-polje:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px var(--accent-soft);
}

/* Isto mjesto u polju, dvije uloge: „?" dok je prazno (upute, tko ne zna što
   kutija radi neće to tražiti u izborniku pomoći) i „×" čim se upiše pojam. */
.qms-pretraga-upute,
.qms-pretraga-brisi {
    position: absolute;
    right: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 17px;
    height: 17px;
    padding: 0;
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
    color: var(--ink-4);
    background: var(--surface-2);
    border: 1px solid var(--line);
    border-radius: 50%;
    text-decoration: none;
    cursor: pointer;
}

.qms-pretraga-brisi { font-size: 13px; }

.qms-pretraga-upute:hover,
.qms-pretraga-brisi:hover {
    color: var(--accent-text);
    border-color: var(--accent);
    text-decoration: none;
}

/* Bez ovoga bi ih display: inline-flex držao vidljivima i kad su skriveni. */
.qms-pretraga-upute[hidden],
.qms-pretraga-brisi[hidden] { display: none; }

.qms-pretraga-polje::placeholder { color: var(--ink-4); }

/* Križić koji preglednik sam nudi na type=search — dvostruko s Escape. */
.qms-pretraga-polje::-webkit-search-cancel-button { display: none; }

/* Panel se lijepi uz DESNI rub polja, ne uz lijevi.
   Polje stoji pri desnom rubu trake, a panel je širi od njega: lijevo usidren
   prelazio je preko ruba prozora i rezao „svih N →" — izmjereno 23 px viška u
   prozoru od 1132 px, a u užem prozoru i više. */
.qms-pretraga-panel {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    /* Široko kao polje, jer polje i jest širine popisa — osim kad se polje
       skupi na ikonu, gdje popis mora ostati čitljiv. */
    width: max(100%, 320px);
    max-width: calc(100vw - 32px);
    max-height: 70vh;
    overflow-y: auto;
    z-index: 40;
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: 10px;
    box-shadow: 0 12px 32px rgba(0, 0, 0, .14);
}

.qms-pretraga-skupina { padding: 8px 0; }
.qms-pretraga-skupina + .qms-pretraga-skupina { border-top: 1px solid var(--line); }

.qms-pretraga-naslov {
    display: flex;
    align-items: baseline;
    gap: 8px;
    padding: 2px 12px 6px;
    font-size: 11.5px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--ink-4);
}

.qms-pretraga-svi {
    margin-left: auto;
    font-size: 11.5px;
    font-weight: 500;
    text-transform: none;
    letter-spacing: 0;
    color: var(--accent);
    text-decoration: none;
}

.qms-pretraga-svi:hover { text-decoration: underline; }

.qms-pretraga-red {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: baseline;
    gap: 4px 9px;
    padding: 6px 12px;
    text-decoration: none;
    color: inherit;
}

.qms-pretraga-red:hover,
.qms-pretraga-red.is-oznacen { background: var(--surface-2); }

.qms-pretraga-oznaka {
    font-size: 12px;
    font-weight: 600;
    color: var(--ink-strong);
    white-space: nowrap;
}

.qms-pretraga-naziv {
    font-size: 13px;
    color: var(--ink-strong);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Meta ide pod naziv, poravnata s njim — ne pod oznaku. */
.qms-pretraga-meta {
    grid-column: 2;
    font-size: 11.5px;
    color: var(--ink-4);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.qms-pretraga-prazno {
    padding: 14px 12px;
    font-size: 13px;
    color: var(--ink-3);
}

/* Pretraga zapisa nije uspjela (plan 320): stoji iznad tema pomoći. */
.qms-pretraga-greska {
    padding: 10px 12px;
    font-size: 13px;
    color: var(--bad-text);
    border-bottom: 1px solid var(--line);
}

/* Uska traka: polje se skuplja na ikonu i siri se u fokusu.
   Širinu i dalje daje srednji stupac trake, pa panel ostaje usidren ondje
   gdje polje i stoji. */
@media (max-width: 900px) {
    .qms-pretraga { width: 34px; margin-left: auto; }
    .qms-pretraga-polje { padding-right: 8px; color: transparent; }
    .qms-pretraga-polje::placeholder { color: transparent; }
    .qms-pretraga-upute, .qms-pretraga-brisi { display: none; }

    /* U fokusu se polje širi preko naslova — na telefonu je pretraga važnija
       od toga kako se ekran zove. */
    .qms-pretraga:focus-within { width: 100%; }
    .qms-pretraga:focus-within .qms-pretraga-polje { color: var(--ink-strong); }
    .qms-pretraga:focus-within .qms-pretraga-polje::placeholder { color: var(--ink-4); }
}

/* „Otvori izravno" — oznaka je točno ono što je upisano. Stoji prvi i unaprijed
   je označen, pa Enter otvara zapis bez ijedne strelice. */
.qms-pretraga-izravno {
    background: var(--accent-soft);
    border-left: 3px solid var(--accent);
}

.qms-pretraga-izravno:hover,
.qms-pretraga-izravno.is-oznacen { background: var(--accent-soft); }

.qms-pretraga-izravno-oznaka {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--accent-text);
    white-space: nowrap;
}

/* Uputa u praznom polju — par rečenica ondje gdje pitanje nastaje. */
.qms-pretraga-uputa {
    padding: 13px 14px;
    font-size: 12.5px;
    color: var(--ink-2);
    text-wrap: pretty;
}

.qms-pretraga-uputa b { color: var(--ink-strong); }

.qms-pretraga-uputa ul {
    margin: 8px 0 10px;
    padding-left: 17px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.qms-pretraga-uputa li { color: var(--ink-3); }

.qms-pretraga-uputa a { font-size: 12px; color: var(--accent-text); text-decoration: none; }
.qms-pretraga-uputa a:hover { text-decoration: underline; }