/* Multi-select tag dropdown (see index-tag-multiselect.js)
 * Uses --izi-* design tokens so light + dark themes work without changes.
 */

.tag-ms {
    position: relative;
    display: inline-block;
    min-width: 220px;
    font-size: 13px;
    color: var(--izi-text);
}

.tag-ms-trigger {
    width: 100%;
    min-height: 32px;
    background: var(--izi-bg);
    border: 1px solid var(--izi-border-strong);
    border-radius: 6px;
    padding: 4px 28px 4px 6px;
    cursor: pointer;
    text-align: left;
    position: relative;
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    color: var(--izi-text);
}

.tag-ms-trigger:hover {
    border-color: var(--izi-primary);
}

/* Cible d'un tag glissé depuis la barre latérale. Le champ doit se DÉSIGNER :
   un glisser sans cible visible ne se distingue pas d'un glisser refusé, et
   c'est ce qui faisait croire que le dépôt n'était pas prévu. */
.tag-ms-drop > .tag-ms-trigger {
    border-color: var(--izi-primary);
    border-style: dashed;
    background: color-mix(in srgb, var(--izi-primary) 12%, var(--izi-bg));
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--izi-primary) 30%, transparent);
}

.tag-ms-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    flex: 1;
    min-width: 0;
}

.tag-ms-placeholder {
    color: var(--izi-text-muted);
}

.tag-ms-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 4px 2px 8px;
    border-radius: 12px;
    font-size: 12px;
    line-height: 1;
    /* default text colour for chips that have no per-tag colour set;
       chips with a colour override this inline via JS contrast helper */
    color: var(--izi-text);
}

.tag-ms-chip-empty {
    background: var(--izi-bg-tertiary);
}

.tag-ms-chip-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    font-size: 13px;
}

.tag-ms-chip-remove {
    border: none;
    background: rgba(0, 0, 0, 0.18);
    color: inherit;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    cursor: pointer;
    font-size: 14px;
    line-height: 14px;
    padding: 0;
}

.tag-ms-chip-remove:hover {
    background: rgba(0, 0, 0, 0.28);
}

.tag-ms-caret {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--izi-text-muted);
    pointer-events: none;
}

/* Popover: closed by default, opened by toggling the .open class.
   Uses position:fixed so it escapes any clipping parent (modal body,
   overflow:hidden containers, etc). JS computes top/left on open. */
/* Chrome aligné sur `.izi-ctx-menu` (components.css), menu de référence de
   l'application : trois menus dans la même barre d'outils (créer, attributs,
   tags) ne peuvent pas avoir trois habillages. Bordure, rayon, ombre et police
   communs ; le contenu (recherche, liste défilante, étoiles) reste propre à
   celui-ci. */
.tag-ms-popover {
    display: none;
    position: fixed;
    /* Le jeton des « dropdowns/pickers inside modals » (base.css), et non 1000 :
       ce dernier passait SOUS `--izi-z-modal` (1100). Invisible tant que le
       contrôle ne vivait que dans l'éditeur de prompt — une `.view-container` —
       mais le dialogue des pièces jointes, lui, est une vraie `.modal-overlay`. */
    z-index: var(--izi-z-popover, 1200);
    /* `var(--bg)`, la surface des menus, et non `var(--izi-bg)` : la nuance
       séparait ce panneau des deux autres (mesuré #1f2937 contre #111827 en
       thème sombre). */
    background: var(--bg);
    border: 1px solid var(--izi-border);
    border-radius: var(--radius, 6px);
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.18);
    max-height: 320px;
    min-width: 240px;
    box-sizing: border-box;
    flex-direction: column;
    color: var(--izi-text);
    font-size: var(--izi-font-size-sm);
    overflow: hidden; /* keep ✕ corner inside the rounded border */
}

.tag-ms-popover.open {
    display: flex;
}

.tag-ms-search-row {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 8px;
    border-bottom: 1px solid var(--izi-border);
    box-sizing: border-box;
}

.tag-ms-search {
    flex: 1;
    height: 28px;
    padding: 0 8px;
    font-size: 13px;
    border: 1px solid var(--izi-border-strong);
    border-radius: 4px;
    background: var(--izi-bg);
    color: var(--izi-text);
}

.tag-ms-search:focus {
    outline: none;
    border-color: var(--izi-primary);
}

.tag-ms-close {
    border: none;
    background: transparent;
    cursor: pointer;
    font-size: 14px;
    color: var(--izi-text-muted);
    padding: 4px 6px;
    border-radius: 4px;
    flex-shrink: 0;
}

.tag-ms-close:hover {
    background: var(--izi-bg-hover);
    color: var(--izi-text);
}

/* ===== L'autocomplétion de la boîte de requête =============================
   Même popover, même liste, mêmes lignes : seuls l'en-tête et le pied de date
   lui sont propres. Rien n'est recopié ici — `index-query-suggest.js` réutilise
   `.tag-ms-popover` et `.tag-ms-item` tels quels. */
.izi-query-entete {
    padding: var(--izi-space-xs) var(--izi-space-md);
    border-bottom: 1px solid var(--izi-border);
    color: var(--izi-text-secondary);
    font-size: var(--izi-font-size-xs);
    font-weight: 600;
    letter-spacing: .04em;
    /* Le popover est ancré sous la BOÎTE, pas sous le curseur : c'est cette
       ligne qui rappelle quel jeton est en cours de complétion. Un libellé
       coûte moins cher qu'une mesure de position, et ne saute pas à la frappe. */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.izi-query-date {
    display: flex;
    padding: var(--izi-space-xs) var(--izi-space-md);
    border-top: 1px solid var(--izi-border);
}
.izi-query-date input {
    width: 100%;
    min-height: 28px;
    background: var(--izi-bg);
    border: 1px solid var(--izi-border);
    border-radius: var(--izi-radius-md, 6px);
    color: var(--izi-text);
    font-size: var(--izi-font-size-sm);
    /* Le calendrier natif et son icône suivent le thème par `color-scheme`,
       posé sur `:root` dans base.css — rien à repeindre ici. */
}

.tag-ms-items {
    overflow-y: auto;
    max-height: 260px;
    padding: var(--izi-space-xs) 0;
}

/* Barre de défilement peinte comme le reste : la barre native ressortait en
   clair au milieu d'un panneau sombre (même traitement que
   `.icon-grid-scrollable`, modal.css). */
.tag-ms-items::-webkit-scrollbar {
    width: 8px;
}
.tag-ms-items::-webkit-scrollbar-track {
    background: transparent;
}
.tag-ms-items::-webkit-scrollbar-thumb {
    /* `--izi-border-strong`, pas `--izi-border` : en thème sombre ce dernier vaut
       exactement `--bg-secondary`, le curseur disparaissait. */
    background: var(--izi-border-strong);
    border-radius: 4px;
}
.tag-ms-items::-webkit-scrollbar-thumb:hover {
    background: var(--izi-text-secondary);
}

.tag-ms-item {
    display: flex;
    align-items: center;
    gap: var(--izi-space-sm);
    padding: var(--izi-space-xs) var(--izi-space-md);
    cursor: pointer;
    font-size: var(--izi-font-size-sm);
    color: var(--izi-text);
}

.tag-ms-item:hover,
.tag-ms-item.highlight {
    background: var(--izi-bg-secondary);
}

.tag-ms-item.selected .tag-ms-name {
    font-weight: 600;
}

.tag-ms-checkbox {
    width: 14px;
    height: 14px;
    border: 1px solid var(--izi-border-strong);
    border-radius: 2px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    color: var(--izi-primary);
    background: var(--izi-bg);
    flex-shrink: 0;
}

.tag-ms-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
}

.tag-ms-dot-empty {
    border: 1px dashed var(--izi-border-strong);
    background: transparent;
}

.tag-ms-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    font-size: 14px;
    line-height: 1;
}

.tag-ms-icon-empty {
    /* keeps the row vertically aligned even without an icon */
}

.tag-ms-name {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--izi-text);
}

/* Synonymes affichés à côté du nom, dans le dropdown. Cette règle était
   partagée avec une classe du mode liste des tags : celui-ci supprimé, elle est
   rétablie pour son seul sélecteur encore vivant
   (`index-tag-multiselect.js` : `<span class="tag-ms-syn">`). */
.tag-ms-syn {
    color: var(--izi-text-muted);
    font-weight: 400;
    font-size: 0.9em;
    font-style: italic;
}

.tag-ms-star {
    border: none;
    background: transparent;
    cursor: pointer;
    color: var(--izi-text-muted);
    padding: 2px 4px;
    font-size: 14px;
    line-height: 1;
}

.tag-ms-star.active {
    color: #f59e0b;
}

.tag-ms-star:hover {
    color: #f59e0b;
}

.tag-ms-create {
    color: var(--izi-primary);
    font-weight: 500;
}

.tag-ms-plus {
    display: inline-block;
    width: 14px;
    text-align: center;
    font-weight: 700;
}

.tag-ms-empty {
    padding: 8px 10px;
    color: var(--izi-text-muted);
    font-size: 12px;
    text-align: center;
}

/* When mounted inside the toolbar's filter bar, keep the trigger compact. */
.filter-bar .tag-ms,
.toolbar-left .tag-ms {
    min-width: 200px;
    max-width: 320px;
}

.tag-admin-share-popover {
    position: absolute;
    right: 6px;
    top: 100%;
    z-index: 10;
    background: var(--izi-bg);
    border: 1px solid var(--izi-border-strong);
    border-radius: 6px;
    padding: 6px;
    display: flex;
    gap: 4px;
    align-items: center;
    box-shadow: var(--izi-shadow-lg, 0 8px 24px rgba(0, 0, 0, 0.18));
}

.tag-admin-share-select {
    padding: 4px 6px;
    font-size: 12px;
    border: 1px solid var(--izi-border-strong);
    border-radius: 3px;
    background: var(--izi-bg);
    color: var(--izi-text);
}

/* Full-screen editor mode (no accordion). The list is hidden while
   the editor is shown and vice versa, so the page has a single scroll
   container — no nested scrollbars. */
.tag-admin-edit-screen {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.tag-admin-edit-form {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.tag-admin-edit-meta {
    color: var(--izi-text-muted);
    font-size: 12px;
}

.tag-admin-field {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.tag-admin-field label {
    font-size: 12px;
    color: var(--izi-text-secondary);
}

.tag-admin-field-row {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

.tag-admin-color-preview {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    border-radius: 12px;
    font-size: 12px;
    border: 1px dashed var(--izi-border);
    color: var(--izi-text-muted);
}

.tag-admin-icon-grid {
    border: 1px solid var(--izi-border);
    border-radius: 6px;
    padding: 6px;
    background: var(--izi-bg);
    /* No max-height — let the page scroll the whole editor instead of
       nesting a second scrollbar inside the form. */
}

.tag-admin-edit-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 4px;
}