/* Reusable tag-picker component (chips + free-text-or-suggest input) — see
   app/javascript/controllers/tag_picker_controller.js and
   app/views/shared/_tag_picker.html.erb.

   #10252929795 ("Tagger/dokumentasjon: søk-eller-legg-til-komponent"):
   replaces the plain .ui-input text_field previously used for every
   fritekst-tag field (Supplier#tags_text/#information_types_text,
   Person#job_titles_text/#job_titles_en_text/#other_roles_text).

   New file rather than folding into an existing one — this is a genuinely
   new, self-contained component (not a variant of an existing block any
   of the other 13 files already own), so it gets its own number at the
   end of the load order the same way 11_org_chart.css and
   12_global_search_and_api_docs.css did when THEY were introduced.
   Numeric filename prefix controls load order (see
   app/helpers/application_helper.rb#theme_stylesheet_link_tag). */
@layer overrides {

/* .tag-picker also carries .ui-input (see the partial) so it inherits that
   class's border/radius/font-size for free and stays visually identical
   to every plain text input around it — this block only adds what a
   single-line text input doesn't already have: wrapping flex layout for
   the chips, and being a positioning context for the suggestions dropdown. */
.tag-picker.ui-input {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2);
    position: relative;
    cursor: text;
}

/* Torleiv, 21.09.2026 (#10322827340, skjermbilde av en godkjenningsoppgave
   med to tildelte): «for lite avstand mellom personene».

   Årsaken var ikke at gap-en var for liten — den traff aldri. Begge
   velgerne legger chipsene i ÉN wrapper-div (data-*-target="chips"), og
   den er ett enkelt flex-element i .tag-picker. gap: var(--space-2)
   gjelder derfor mellom wrapperen og skrivefeltet, ikke mellom chipsene
   inni den. To navn sto klint inntil hverandre, og krysset for å fjerne
   den første lå rett inntil navnet på den neste.

   Wrapperen blir sin egen flex-rad med den samme gap-en, så chipsene får
   avstanden komponenten allerede mente å gi dem. Ett sted, begge
   velgerne. */
.tag-picker__chips {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2);
}

.tag-picker__chip {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    padding: 0.2em 0.6em;
    background: var(--ui-100);
    color: var(--ui-800);
    border-radius: var(--radius-sm);
    font-size: var(--text-size-sm);
    line-height: 1.6;
    white-space: nowrap;
}

.tag-picker__chip-remove {
    background: none;
    border: none;
    padding: 0;
    margin: 0;
    line-height: 1;
    font-size: 1.1em;
    color: var(--ui-500);
    cursor: pointer;
}

.tag-picker__chip-remove:hover {
    color: var(--ui-800);
}

/* Samme spørsmål som småknappene (#10281061392): krysset er ~14px, langt
   under de ~44px Apple og Google anbefaler på berøring. Trykkflaten vokser
   med et usikt ::after, knappen tegnes likt.

   ±3px vannrett, ikke mer: chipsene står nå --space-2 = 8px fra hverandre,
   og en bredere flate ville begynt å stjele trykk fra nabochipens eget
   kryss — som her ikke bare er irriterende, men fjerner FEIL person.
   Bare der ingenting kan hovere; et smalt vindu på desktop har mus. */
@media (hover: none) and (pointer: coarse) {
    .tag-picker__chip-remove {
        position: relative;
    }

    .tag-picker__chip-remove::after {
        content: "";
        position: absolute;
        inset: -15px -3px;
    }
}

/* No border/background/padding of its own — the wrapping .tag-picker.ui-input
   above already supplies all of that, so this just needs to disappear into
   it and grow to fill whatever space the chips left on their row. */
.tag-picker__input {
    flex: 1 1 8rem;
    min-width: 8rem;
    border: none;
    outline: none;
    background: transparent;
    padding: 0.2em 0;
    font-size: var(--text-size-lg);
    font-family: inherit;
}

/* position: fixed, not absolute — .tag-picker commonly sits inside a
   .ui-box (sand_ui/components/boxes.css), which has overflow: hidden for
   its own rounded corners. An absolutely-positioned dropdown near the
   bottom of that box got silently clipped by it — invisible below the
   box's own edge, not just visually cut off (Basecamp #10261489456,
   Torleiv screenshots: "ser ut som søkeresultat er bundet til hvitt
   område, og skjules av omkringliggende sand-farge" — the .ui-box's own
   overflow boundary, with the page's sand background beyond it). Same
   fix shape as hover_popover_controller.js's own header comment on the
   identical class of bug: fixed positioning escapes any ancestor's
   overflow/clipping entirely. top/left/width are set in JS
   (tag_picker_controller.js#positionSuggestions,
   person_picker_controller.js#positionSuggestions) from the picker's own
   getBoundingClientRect() right before showing, since a fixed element's
   position can no longer be expressed as a percentage of its (no longer
   relevant) positioned ancestor. */
.tag-picker__suggestions {
    position: fixed;
    z-index: 20;
    margin: 0;
    padding: var(--space-1) 0;
    list-style: none;
    background: var(--background-color);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
    max-height: 14rem;
    overflow-y: auto;
}

.tag-picker__suggestions[hidden] {
    display: none;
}

.tag-picker__suggestion {
    padding: 0.5em 0.9em;
    font-size: var(--text-size-lg);
    cursor: pointer;
}

.tag-picker__suggestion--active,
.tag-picker__suggestion:hover {
    background: var(--ui-100);
}

.tag-picker__suggestion--new {
    color: var(--signal-color);
}

} /* @layer overrides */

/* #10309490519, referansevelgeren. Den låner hele søk-og-velg-formen fra
   .tag-picker over. 17.09.2026 fikk den også chips, siden feltet tåler
   flere referanser — derfor wrap her, der den før hadde én rad med én
   verdi, og derfor ingen egen .reference-picker__kind lenger: hva en
   referanse er står nå på selve brikken, ikke i høyre kant av feltet. */
.reference-picker {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2, 8px);
}

.reference-picker__input {
    flex: 1 1 8rem;
    min-width: 8rem;
}

/* #10313686464, personvelgeren med @. Samme søk-og-velg-form som de to
   over, men med én verdi og en brikke som ER lesevisningen: .person-mention
   er den samme pillen dokumentenes @-omtaler bruker. Egen klasse og ikke
   .reference-picker, selv om reglene er de samme — de to feltene står side
   om side på risikosida, og en klasse som heter noe annet enn det den er
   gjør hver selektor etterpå til en gjetning. */
.person-mention-field {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2, 8px);
}

/* Brikken er .person-mention, men med en fjern-knapp inni — og
   .person-mention er `display: inline`, som stiller en 2em-avatar, et navn
   og en knapp opp etter tekstlinja i stedet for etter hverandre. Bare her,
   så omtaler i tekst fortsatt oppfører seg som tekst. */
.person-mention-field .person-mention {
    display: inline-flex;
    align-items: center;
    gap: 0.15em;
}

.person-mention-field__input {
    flex: 1 1 8rem;
    min-width: 8rem;
}

/* Forslagsraden viser bildet ved siden av navnet, som brikken og
   lesevisningen — ellers ville man valgt fra én slags liste og fått noe
   som ser annerledes ut. */
.person-mention-field ~ .tag-picker__suggestions .tag-picker__suggestion,
.tag-picker__suggestions .tag-picker__suggestion:has(.ui-avatar) {
    display: flex;
    align-items: center;
    gap: var(--space-2, 8px);
}

/* Hva brikken peker på — leverandør, dokument, risiko. Dempet og mindre
   enn tittelen, fordi det er en bekreftelse på hva du traff, ikke en del
   av navnet. Fri tekst har ingen, og får ingen tom plass heller. */
.tag-picker__chip-kind {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-600, #666);
}

/* Samme skille inne i forslagslista: tittelen til venstre, hva det er til
   høyre, så to like navn er til å skille fra hverandre. */
.tag-picker__suggestion-kind {
    float: right;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-600, #666);
}