/* ══ LIBELLÉS DES LIGNES (Shared/LibellesEditeur.razor), préfixe libed- (2026-09-18) ═══════════════════════════════════
   L'éditeur des libellés personnalisés, ouvert depuis le menu Outils du cockpit. Même rang que les autres fenêtres du
   cockpit (constructeur de topline 5500, clés analytiques 5600) : rendu HORS du conteneur du cockpit, donc aucun
   ancêtre à backdrop-filter ne capture son position:fixed. Jetons de l'app (--surf-*, --tx*, --mut*, --o*, --brand) :
   clair et sombre. Téléphone : carte bornée par ses quatre bords (jamais de hauteur en vh, qui déborde sur iOS).
   ═══════════════════════════════════════════════════════════════════════════════════════════════════════════════════ */

.libed-back { position: fixed; inset: 0; z-index: 5600; background: var(--bd72, rgba(3,12,18,.72)); backdrop-filter: blur(2px); }
.libed-modal {
    position: fixed; z-index: 5601; top: 50%; left: 50%; transform: translate(-50%, -50%);
    width: min(780px, calc(100vw - 32px)); max-height: 86vh; max-height: min(86svh, calc(100% - 24px));
    display: flex; flex-direction: column; overflow: hidden;
    background: var(--surf-2, #102733); color: var(--tx1, #eafdff); font-family: var(--font-family);
    border: 1px solid color-mix(in srgb, var(--brand, #00B1CF) 22%, transparent); border-radius: 16px;
    box-shadow: 0 24px 60px rgba(0,0,0,.5);
}
html[data-theme="light"] .libed-modal { background: #fff; box-shadow: 0 24px 60px rgba(30,41,59,.22); }

.libed-x {
    position: absolute; top: 12px; right: 12px; z-index: 2; width: 30px; height: 30px; display: inline-flex; align-items: center;
    justify-content: center; border: none; border-radius: 8px; background: transparent; color: var(--mut2); cursor: pointer;
}
.libed-x:hover { background: var(--o8); color: var(--tx1); }
.libed-x svg { width: 16px; height: 16px; }

/* ── En-tête : titre, portée, recherche ── */
.libed-head { flex: 0 0 auto; padding: 18px 22px 12px; border-bottom: 1px solid var(--o8); display: flex; flex-direction: column; gap: 10px; }
.libed-titre { margin: 0; padding-right: 36px; display: flex; align-items: center; gap: 10px; font-size: 18px; font-weight: 700; line-height: 1.25; }
.libed-titre-ic {
    flex: 0 0 auto; width: 30px; height: 30px; border-radius: 9px; display: inline-flex; align-items: center; justify-content: center;
    background: color-mix(in srgb, var(--brand, #00B1CF) 14%, transparent); color: var(--brand-strong, #00B1CF);
}
.libed-titre-ic svg { width: 16px; height: 16px; }
.libed-sous { margin: -4px 0 0; font-size: 12.5px; line-height: 1.45; color: var(--mut1); }

.libed-bar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.libed-seg { display: inline-flex; gap: 2px; padding: 3px; border-radius: 10px; background: var(--o5); border: 1px solid var(--o8); }
.libed-seg button {
    display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border: none; border-radius: 7px; background: transparent;
    color: var(--mut1); font-family: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer; white-space: nowrap;
}
.libed-seg button svg { width: 13px; height: 13px; }
.libed-seg button:hover:not(.on) { color: var(--tx1); }
.libed-seg button.on { background: color-mix(in srgb, var(--brand, #00B1CF) 18%, transparent); color: var(--tx1); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--brand, #00B1CF) 40%, transparent); }
html[data-theme="light"] .libed-seg button.on { background: #fff; box-shadow: 0 1px 3px rgba(30,41,59,.14), inset 0 0 0 1px color-mix(in srgb, var(--brand, #00B1CF) 45%, transparent); }
.libed-seg button:focus-visible, .libed-chip:focus-visible, .libed-btn:focus-visible, .libed-retablir:focus-visible, .libed-x:focus-visible {
    outline: 2px solid var(--brand, #00B1CF); outline-offset: 1px;
}
.libed-portee { margin: 0; font-size: 12px; line-height: 1.45; color: var(--mut1); }

.libed-filtres { display: flex; gap: 8px; align-items: center; }
.libed-search {
    flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: 8px; padding: 0 10px; height: 34px; border-radius: 9px;
    background: var(--o4); border: 1px solid var(--o10); color: var(--mut1);
}
.libed-search:focus-within { border-color: color-mix(in srgb, var(--brand, #00B1CF) 60%, transparent); }
.libed-search svg { flex: 0 0 auto; width: 14px; height: 14px; }
.libed-search input { flex: 1 1 auto; min-width: 0; border: none; outline: none; background: transparent; color: var(--tx1); font-family: inherit; font-size: 13px; }
.libed-chip {
    flex: 0 0 auto; display: inline-flex; align-items: center; gap: 7px; height: 34px; padding: 0 12px; border-radius: 9px;
    border: 1px solid var(--o10); background: transparent; color: var(--mut1); font-family: inherit; font-size: 12.5px; font-weight: 600;
    cursor: pointer; white-space: nowrap;
}
.libed-chip.on { color: var(--tx1); border-color: color-mix(in srgb, var(--brand, #00B1CF) 50%, transparent); background: color-mix(in srgb, var(--brand, #00B1CF) 10%, transparent); }
.libed-chip-n {
    min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; display: inline-flex; align-items: center; justify-content: center;
    font-size: 11px; font-weight: 700; background: var(--o8); color: var(--tx1); font-variant-numeric: tabular-nums;
}

/* ── Corps : une ligne = libellé par défaut | saisie | Rétablir ── */
.libed-corps { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 4px 22px 16px; }
.libed-sec {
    position: sticky; top: 0; z-index: 1; margin: 0 -22px; padding: 12px 22px 6px; background: var(--surf-2, #102733);
    font-size: 10.5px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--mut1);
}
html[data-theme="light"] .libed-sec { background: #fff; }
.libed-ligne {
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); column-gap: 14px; align-items: center;
    padding: 5px 0; border-bottom: 1px solid var(--o5);
}
.libed-def { min-width: 0; display: flex; align-items: center; gap: 8px; font-size: 13px; }
.libed-def-txt { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; }
.libed-ligne.is-titre .libed-def-txt { font-weight: 700; }
.libed-ligne.lvl-1 .libed-def { padding-left: 14px; }
.libed-ligne.lvl-2 .libed-def { padding-left: 28px; color: var(--mut2); }
.libed-ligne.lvl-3 .libed-def { padding-left: 42px; color: var(--mut2); }
.libed-badge {
    flex: 0 0 auto; padding: 2px 7px; border-radius: 999px; font-size: 10.5px; font-weight: 700; white-space: nowrap;
    background: var(--o8); color: var(--mut1);
}
.libed-badge.is-dossier { background: color-mix(in srgb, var(--brand, #00B1CF) 16%, transparent); color: var(--brand-strong, #00B1CF); }

.libed-saisie { min-width: 0; display: flex; align-items: center; gap: 6px; }
.libed-in {
    flex: 1 1 auto; min-width: 0; height: 32px; padding: 0 10px; border-radius: 8px; border: 1px solid var(--o10);
    background: var(--o3); color: var(--tx1); font-family: inherit; font-size: 13px; outline: none;
}
.libed-in::placeholder { color: var(--mut3); opacity: 1; }
.libed-in:hover { border-color: var(--o16); }
.libed-in:focus { border-color: color-mix(in srgb, var(--brand, #00B1CF) 65%, transparent); background: var(--o5); box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand, #00B1CF) 16%, transparent); }
.libed-in.is-perso { border-color: color-mix(in srgb, var(--brand, #00B1CF) 45%, transparent); background: color-mix(in srgb, var(--brand, #00B1CF) 7%, transparent); font-weight: 600; }
.libed-retablir {
    flex: 0 0 auto; display: inline-flex; align-items: center; gap: 5px; height: 32px; padding: 0 9px; border-radius: 8px;
    border: 1px solid transparent; background: transparent; color: var(--mut1); font-family: inherit; font-size: 12px; font-weight: 600;
    cursor: pointer; white-space: nowrap;
}
.libed-retablir:hover { color: var(--tx1); background: var(--o6); border-color: var(--o10); }
.libed-retablir.is-vide { visibility: hidden; pointer-events: none; }
.libed-retablir svg { width: 13px; height: 13px; }
.libed-note { grid-column: 2; margin-top: 4px; font-size: 11.5px; line-height: 1.4; color: var(--st-amber, #FAC775); }
.libed-vide { margin: 28px 0; text-align: center; font-size: 13px; color: var(--mut1); }

/* ── Pied : message, actions ── */
.libed-pied {
    flex: 0 0 auto; display: flex; align-items: center; gap: 12px; padding: 12px 22px 16px; border-top: 1px solid var(--o8);
}
.libed-msg { flex: 1 1 auto; min-width: 0; font-size: 12px; line-height: 1.4; color: var(--mut1); }
.libed-msg.is-alerte { color: var(--st-amber, #FAC775); }
.libed-pied-actions { flex: 0 0 auto; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; justify-content: flex-end; }
.libed-btn {
    display: inline-flex; align-items: center; gap: 7px; height: 34px; padding: 0 14px; border-radius: 9px; cursor: pointer;
    border: 1px solid color-mix(in srgb, var(--brand, #00B1CF) 35%, transparent); background: transparent; color: var(--tx1);
    font-family: inherit; font-size: 12.5px; font-weight: 600; white-space: nowrap;
}
.libed-btn:hover:not(:disabled) { background: color-mix(in srgb, var(--brand, #00B1CF) 10%, transparent); }
.libed-btn:disabled { opacity: .55; cursor: default; }
.libed-btn svg { width: 14px; height: 14px; }
.libed-btn-go { background: var(--brand, #00B1CF); border-color: var(--brand, #00B1CF); color: var(--brand-contrast, #062028); }
.libed-btn-go:hover:not(:disabled) { background: color-mix(in srgb, var(--brand, #00B1CF) 88%, #fff); }

/* ── Téléphone : la carte tient entre ses quatre bords, la ligne passe sur deux étages ── */
@media (max-width: 640px) {
    .libed-modal { inset: 10px; transform: none; width: auto; max-height: none; }
    .libed-head { padding: 14px 14px 10px; }
    .libed-titre { font-size: 16px; }
    .libed-seg { width: 100%; }
    .libed-seg button { flex: 1 1 0; justify-content: center; padding: 7px 8px; }
    /* La recherche garde toute la ligne (son indication reste lisible) ; le filtre passe dessous. */
    .libed-filtres { flex-wrap: wrap; }
    .libed-search { flex-basis: 100%; }
    .libed-corps { padding: 2px 14px 12px; }
    .libed-sec { margin: 0 -14px; padding: 10px 14px 5px; }
    .libed-ligne { grid-template-columns: minmax(0, 1fr); row-gap: 5px; padding: 8px 0; }
    .libed-note { grid-column: 1; margin-top: 0; }
    .libed-pied { flex-direction: column; align-items: stretch; gap: 8px; padding: 10px 14px 12px; }
    .libed-pied-actions { justify-content: stretch; }
    .libed-pied-actions .libed-btn { flex: 1 1 auto; justify-content: center; }
}