/* ==========================================================================
   Recette V6 — dossier société (sélecteur de la barre du haut, société
   émettrice en tête du formulaire document, tiers rattachés).
   ========================================================================== */

/* ---------- Barre du haut : dossier + actions de la page ---------- */
.topbar-right { display: flex; align-items: center; gap: .75rem; min-width: 0; }
.app-topbar .topbar-title { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---------- Pilule « Dossier » ----------
   La couleur de la société (`--dossier-couleur`) teinte la pastille, le halo et
   le liseré : on sait d'un coup d'œil dans quel dossier on saisit. */
.dossier-switch { --dossier-couleur: #7c5cff; flex-shrink: 0; }
.dossier-pill {
    position: relative; display: inline-flex; align-items: center; gap: .6rem;
    padding: .3rem .75rem .3rem .45rem; border-radius: 999px; cursor: pointer;
    background:
        linear-gradient(var(--surface), var(--surface)) padding-box,
        linear-gradient(135deg, var(--dossier-couleur), #5b8def 60%, #22d3ee) border-box;
    border: 2px solid transparent;
    box-shadow: 0 6px 18px color-mix(in srgb, var(--dossier-couleur) 22%, transparent), var(--sh-sm);
    color: var(--ink); font: inherit; line-height: 1.1; max-width: 22rem;
    transition: transform .15s ease, box-shadow .15s ease;
}
.dossier-pill:hover { transform: translateY(-1px); box-shadow: 0 10px 26px color-mix(in srgb, var(--dossier-couleur) 32%, transparent), var(--sh-sm); }
.dossier-pill:focus-visible { outline: none; box-shadow: var(--ring); }
.dossier-pill.is-societe { background:
        linear-gradient(color-mix(in srgb, var(--dossier-couleur) 9%, #fff), color-mix(in srgb, var(--dossier-couleur) 9%, #fff)) padding-box,
        linear-gradient(135deg, var(--dossier-couleur), color-mix(in srgb, var(--dossier-couleur) 45%, #22d3ee)) border-box; }

.dossier-dot {
    flex-shrink: 0; width: 1.55rem; height: 1.55rem; border-radius: 50%;
    background: radial-gradient(circle at 32% 30%, rgba(255,255,255,.75), transparent 42%), var(--dossier-couleur);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--dossier-couleur) 20%, transparent), 0 4px 10px color-mix(in srgb, var(--dossier-couleur) 45%, transparent);
}
/* « Tous » : toutes les couleurs du groupe réunies. */
.dossier-pill.is-tous .dossier-dot, .dossier-dot.is-tous {
    background: radial-gradient(circle at 32% 30%, rgba(255,255,255,.7), transparent 42%),
        conic-gradient(#4f46e5, #0ea5e9, #f97316, #16a34a, #64748b, #4f46e5);
}
.dossier-meta { display: flex; flex-direction: column; min-width: 0; text-align: left; }
.dossier-eyebrow { font-size: .6rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-faint); }
.dossier-nom { font-family: var(--font-display); font-size: .88rem; font-weight: 700; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dossier-chevron { font-size: .75rem; color: var(--ink-faint); }

.dossier-menu { min-width: 17rem; padding: .45rem; border-radius: var(--r-lg); }
.dossier-menu-titre { padding: .3rem .6rem .45rem; font-size: .66rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-faint); }
.dossier-item {
    display: flex; align-items: center; gap: .6rem; width: 100%; padding: .45rem .6rem;
    border: 0; border-radius: var(--r-sm); background: transparent; color: var(--ink); font-weight: 600; font-size: .88rem; text-align: left;
}
.dossier-item .dossier-dot { width: .85rem; height: .85rem; box-shadow: 0 0 0 3px color-mix(in srgb, var(--dossier-couleur) 18%, transparent); }
.dossier-item:hover { background: var(--grad-soft); }
.dossier-item.active { background: color-mix(in srgb, var(--dossier-couleur) 12%, #fff); box-shadow: inset 3px 0 0 var(--dossier-couleur); }
.dossier-item .bi-check2 { color: var(--dossier-couleur); font-size: 1.05rem; }
.dossier-item-nom { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dossier-tag { flex-shrink: 0; padding: .1rem .45rem; border-radius: 999px; font-size: .62rem; font-weight: 700; letter-spacing: .03em; color: var(--v1); background: var(--grad-soft); }
.dossier-item .dossier-tag + .bi-check2 { margin-left: .2rem !important; }
.dossier-menu-note { margin-top: .35rem; padding: .45rem .6rem .2rem; border-top: 1px solid var(--line); font-size: .74rem; color: var(--ink-faint); }

@media (max-width: 767.98px) {
    .topbar-right { gap: .4rem; }
    .dossier-pill { max-width: 11rem; padding: .22rem .55rem .22rem .3rem; gap: .4rem; }
    .dossier-dot { width: 1.2rem; height: 1.2rem; }
    .dossier-eyebrow { display: none; }
    .dossier-nom { font-size: .8rem; }
    .dossier-menu { min-width: 15rem; }
}

/* ---------- Bandeau « liste filtrée par le dossier » (clients, articles) ---------- */
.dossier-bandeau {
    --dossier-couleur: #7c5cff;
    display: flex; align-items: center; gap: .65rem; flex-wrap: wrap;
    margin-bottom: .9rem; padding: .55rem .9rem; border-radius: var(--r-md);
    background: linear-gradient(135deg, color-mix(in srgb, var(--dossier-couleur) 11%, #fff), rgba(34,211,238,.08));
    border: 1px solid color-mix(in srgb, var(--dossier-couleur) 25%, var(--line));
    color: var(--ink-soft); font-size: .86rem;
}
.dossier-bandeau .dossier-dot { width: .9rem; height: .9rem; }
.dossier-bandeau strong { color: var(--ink); }

/* ---------- Formulaire document : la société émettrice d'abord (D3) ----------
   Tant qu'elle est vide, le reste du formulaire est voilé et rendu inerte
   (attribut `inert`, posé par le contrôleur) : rien n'est désactivé au sens du
   formulaire, donc aucune saisie n'est perdue ni retirée de l'envoi. */
.doc-form .doc-societe-col .ts-wrapper, .doc-form .doc-societe-col select { transition: box-shadow .2s ease; }
/* L'invite « — choisir la société émettrice — » est plus longue que la colonne :
   tant que la société est vide, la liste s'élargit PAR-DESSUS le champ voisin
   (voilé et inerte à ce moment-là) au lieu de tronquer l'invite ou de décaler
   toute la grille ; elle reprend sa largeur dès qu'une société est choisie. */
.doc-form.is-sans-societe .doc-bandeau .doc-societe-col .ts-control { padding-right: 1.7rem !important; }
.doc-form .doc-societe-col .ts-control input::placeholder { color: var(--v1); opacity: .9; }
.doc-form.is-sans-societe .doc-societe-col .ts-wrapper { position: relative; z-index: 6; width: max-content; min-width: 100%; }
.doc-form.is-sans-societe .doc-societe-col .ts-control input { min-width: 14.5rem !important; }
.doc-form.is-sans-societe .doc-societe-col .ts-control,
.doc-form.is-sans-societe .doc-societe-col select {
    border-color: var(--v1) !important;
    box-shadow: 0 0 0 4px rgba(124,92,255,.22), 0 8px 22px rgba(124,92,255,.25) !important;
    animation: dossier-appel 1.8s ease-in-out infinite;
}
.doc-form.is-sans-societe .doc-societe-col .form-label { color: var(--v1); font-weight: 700; }
@keyframes dossier-appel {
    0%, 100% { box-shadow: 0 0 0 3px rgba(124,92,255,.18), 0 6px 18px rgba(124,92,255,.18); }
    50% { box-shadow: 0 0 0 6px rgba(124,92,255,.10), 0 10px 26px rgba(91,141,239,.28); }
}
.doc-form [data-dossier-voile] { transition: opacity .2s ease, filter .2s ease; }
.doc-form.is-sans-societe [data-dossier-voile] { opacity: .38; filter: grayscale(.6) blur(.4px); user-select: none; }

.doc-voile-message {
    position: sticky; top: 4.2rem; z-index: 5; display: flex; justify-content: center; margin: 0 0 .6rem;
    pointer-events: none;
}
.doc-voile-message[hidden] { display: none; }
.doc-voile-message span {
    display: inline-flex; align-items: center; gap: .5rem; padding: .5rem 1.1rem; border-radius: 999px;
    background: var(--grad); color: #fff; font-weight: 700; font-size: .9rem; box-shadow: var(--sh-glow);
}
.modal .doc-voile-message { top: 0; }

/* ---------- Cases « sociétés » (profil, fiches client et article, société) ---------- */
.dossier-cases { display: grid; grid-template-columns: repeat(auto-fill, minmax(12.5rem, 1fr)); gap: .4rem .9rem; }
.dossier-cases .form-check { margin: 0; padding: .45rem .6rem .45rem 2.1rem; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--surface); }
.dossier-cases .form-check:has(input:checked) { border-color: rgba(124,92,255,.45); background: var(--grad-soft); }
.dossier-cases .form-check-label { font-weight: 600; color: var(--ink); font-size: .86rem; }
.dossier-pastilles { display: flex; flex-wrap: wrap; gap: .35rem; }
.dossier-pastille { --dossier-couleur: #7c5cff; display: inline-flex; align-items: center; gap: .35rem; padding: .18rem .6rem .18rem .3rem; border-radius: 999px; font-size: .78rem; font-weight: 600; color: var(--ink); background: color-mix(in srgb, var(--dossier-couleur) 12%, #fff); border: 1px solid color-mix(in srgb, var(--dossier-couleur) 30%, transparent); }
.dossier-pastille .dossier-dot { width: .7rem; height: .7rem; box-shadow: none; }

/* ---------- Valeurs par dossier de la fiche article (recette V10, lot 2) ---------- */
.valeurs-dossier { display: grid; gap: .7rem; }
.valeurs-dossier-ligne { --dossier-couleur: #7c5cff; display: grid; gap: .55rem; margin: 0; padding: .65rem .75rem .75rem; border: 1px solid color-mix(in srgb, var(--dossier-couleur) 28%, var(--line)); border-left: 3px solid var(--dossier-couleur); border-radius: var(--r-sm); background: var(--surface); }
.valeurs-dossier-ligne[hidden] { display: none; }
.valeurs-dossier-ligne .mb-3 { margin-bottom: 0 !important; }
.valeurs-dossier-nom { display: flex; align-items: center; gap: .45rem; float: none; width: auto; margin: 0; padding: 0; font-size: .86rem; font-weight: 700; color: var(--ink); }
.valeurs-dossier-nom .dossier-dot { width: .7rem; height: .7rem; box-shadow: none; }
.valeurs-dossier-table { width: 100%; font-size: .86rem; }
.valeurs-dossier-table th { font-weight: 600; color: var(--ink-faint); font-size: .74rem; text-transform: uppercase; letter-spacing: .06em; }
.valeurs-dossier-table td, .valeurs-dossier-table th { padding: .35rem .4rem; border-bottom: 1px solid var(--line); vertical-align: top; }
.valeurs-dossier-table tr:last-child td { border-bottom: 0; }
.valeurs-dossier-table .is-general { color: var(--ink-faint); font-style: italic; }

/* ---------- Boutons « Émetteur » (POST vers /dossier) ----------
   Mêmes boutons qu'avant, mais dans un formulaire : l'écart éventuel entre la
   société réclamée par l'adresse et le dossier courant est dit en clair. */
.dossier-emetteurs .dossier-emetteurs-note {
    /* Texte courant (et non flex) : le nom du dossier reste dans la phrase, même
       quand elle passe sur plusieurs lignes en mobile. */
    display: inline-block; max-width: 100%; line-height: 1.45;
    padding: .25rem .75rem; border-radius: 1rem; font-size: .78rem; color: var(--ink-soft);
    background: linear-gradient(135deg, rgba(124,92,255,.10), rgba(34,211,238,.08));
    border: 1px dashed rgba(124,92,255,.40);
}
.dossier-emetteurs .dossier-emetteurs-note strong { color: var(--ink); }
.dossier-emetteurs .dossier-emetteurs-note .bi { color: var(--v1); margin-right: .2rem; }

/* ---------- Société émettrice verrouillée par la chaîne documentaire (DR-1) ----------
   Document issu d'un autre, ou dont découlent des documents : la société ne se
   choisit plus (Tom Select `lock()`). Cadenas et fond hachuré disent pourquoi la
   liste ne s'ouvre pas ; l'aide sous le champ nomme le document en cause. */
/* `!important` : app.css pose fond, bordure et marge intérieure de .ts-control en !important. */
.doc-societe-col .ts-wrapper.locked .ts-control,
.doc-societe-col .ts-wrapper.locked.focus .ts-control {
    cursor: not-allowed; padding-right: 2rem !important;
    background: repeating-linear-gradient(135deg, rgba(124,92,255,.06) 0 8px, rgba(34,211,238,.06) 8px 16px), #fbfbff !important;
    border-style: dashed !important; border-color: rgba(124,92,255,.40) !important; box-shadow: none !important;
}
.doc-societe-col .ts-wrapper.locked .ts-control::after {
    content: "\F47A"; /* bi-lock-fill */
    font-family: "bootstrap-icons"; position: absolute; right: .65rem; top: 50%; transform: translateY(-50%);
    color: var(--v1); font-size: .85rem; border: 0; margin: 0; width: auto; height: auto;
}
.doc-societe-col .form-text { font-size: .72rem; color: var(--ink-soft); line-height: 1.3; }
/* Bandeau serré du bon de commande (F5) : l'aide tient sur UNE ligne, pour ne pas
   rendre au bandeau les lignes gagnées. La société est toujours la première
   cellule de la grille : l'aide déborde sous la cellule voisine (vide à cette
   hauteur), la place d'une ligne étant réservée sous le champ ; au-delà, elle
   s'abrège et se relit entière au survol (title). */
.doc-form[data-doc-type="BON_COMMANDE"] .doc-bandeau .card-body > .row > .doc-societe-col:has(.form-text) {
    position: relative; padding-bottom: 1.05rem;
}
.doc-form[data-doc-type="BON_COMMANDE"] .doc-societe-col .form-text {
    position: absolute; left: 0; bottom: 0; width: calc(200% + .5rem); margin: 0;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: help;
}
/* Grille assez large pour que le type de document occupe deux colonnes (v6-form.css) :
   l'aide dispose des trois. */
@container (min-width: 70.6rem) {
    .doc-form[data-doc-type="BON_COMMANDE"] .doc-societe-col .form-text { width: calc(300% + 1rem); }
}