/* ═══════════════════════════════════════════════════════════════════
   DTISoft — Dialogue « Imprimer des étiquettes »  (namespace `etq-`)

   z-index 10800 : au-dessus des fiches (document 8000 / remontée 9700, article 9600, transfert 9500)
   et de leurs popups (≤ 10600) ; SOUS le picker article qu'il ouvre (11000, posé en ligne par le JS)
   et sous la modale PDF de doc-actions (11400) qui doit pouvoir s'ouvrir par-dessus.
   Le picker réutilise l'habillage partagé `.dd-overlay / .dd-picker-overlay` (garde anti double
   ouverture §7.2, même look que les documents) + la classe `etq-picker-overlay`.
   ═══════════════════════════════════════════════════════════════════ */

/* §7.41 : `[hidden]` ne masque plus rien dès qu'une classe déclare `display` — règle (0,2,0) qui repasse devant. */
.etq-overlay [hidden],
.etq-overlay[hidden] { display: none !important; }

.etq-overlay {
    position: fixed; inset: 0; z-index: 10800;
    background: rgba(15, 23, 42, .5);
    display: flex; align-items: center; justify-content: center; padding: 16px;
}
.etq-panel {
    background: #fff; border-radius: 10px; box-shadow: 0 18px 50px rgba(0, 0, 0, .32);
    width: 1120px; max-width: 100%; height: 88vh; max-height: 100%;
    display: flex; flex-direction: column; font-size: 13px; color: #1e293b;
    min-width: 0; min-height: 0;
}
.etq-panel.etq-busy { cursor: progress; }

/* ── En-tête + onglets ──────────────────────────────────────────── */
.etq-head {
    display: flex; align-items: center; gap: 10px;
    padding: 11px 16px; border-bottom: 1px solid #e5e7eb; background: #f8fafc;
    border-radius: 10px 10px 0 0; flex: 0 0 auto;
}
.etq-title { font-weight: 600; font-size: 14px; white-space: nowrap; }
.etq-title i { color: #1e5bb5; margin-right: 4px; }
.etq-sub { flex: 1 1 auto; min-width: 0; color: #475569; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.etq-close {
    border: 0; background: transparent; font-size: 18px; line-height: 1;
    color: #94a3b8; cursor: pointer; padding: 2px 6px; margin-left: auto;
}
.etq-close:hover { color: #ef4444; }

.etq-tabs { display: flex; gap: 2px; padding: 8px 16px 0; border-bottom: 1px solid #e5e7eb; flex: 0 0 auto; }
.etq-tab {
    display: inline-flex; align-items: center; gap: 6px;
    border: 1px solid transparent; border-bottom: 0; background: transparent; color: #475569;
    padding: 7px 14px; font-size: 13px; cursor: pointer; border-radius: 7px 7px 0 0; margin-bottom: -1px;
}
.etq-tab:hover { background: #f1f5f9; }
.etq-tab.etq-tab-on { background: #fff; border-color: #e5e7eb; color: #1e5bb5; font-weight: 600; }

/* ── Corps ──────────────────────────────────────────────────────── */
.etq-body { flex: 1 1 auto; min-height: 0; min-width: 0; display: flex; flex-direction: column; padding: 12px 16px; overflow: hidden; }
.etq-pane { flex: 1 1 auto; min-height: 0; min-width: 0; display: flex; flex-direction: column; gap: 9px; overflow: auto; }

.etq-lbl { font-size: 12px; font-weight: 600; color: #475569; margin-right: 4px; }
.etq-note { font-size: 11.5px; color: #64748b; font-weight: 400; }
.etq-err { color: #b91c1c; }
.etq-vide { padding: 18px 10px; text-align: center; color: #64748b; }

.etq-typebar, .etq-modes { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; flex: 0 0 auto; }
.etq-pill {
    display: inline-flex; align-items: center; gap: 6px; cursor: pointer;
    border: 1px solid #e5e7eb; border-radius: 20px; padding: 4px 12px;
    font-size: 12.5px; background: #fff; user-select: none;
}
.etq-pill:hover { background: #f8fafc; }
.etq-pill i { color: #94a3b8; }
.etq-pill input { margin: 0; }
.etq-pill:has(input:checked) { border-color: #93c5fd; background: #eff6ff; color: #1e40af; }
.etq-pill:has(input:checked) i { color: #1e5bb5; }

.etq-zone {
    display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px;
    border: 1px solid #e5e7eb; border-radius: 7px; padding: 9px 11px; background: #fafafa; flex: 0 0 auto;
}
.etq-zone-cas { flex-direction: column; align-items: stretch; }
.etq-zone-act { display: flex; align-items: center; justify-content: flex-end; gap: 12px; flex-wrap: wrap; }

.etq-input {
    border: 1px solid #cbd5e1; border-radius: 6px; padding: 5px 8px; font-size: 12.5px; background: #fff; color: #1e293b;
}
.etq-input:focus, .etq-select:focus { outline: 2px solid #93c5fd; outline-offset: 0; border-color: #60a5fa; }
.etq-select { border: 1px solid #cbd5e1; border-radius: 6px; padding: 4px 6px; font-size: 12.5px; background: #fff; max-width: 260px; }
.etq-ck { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; cursor: pointer; }
.etq-ck .etq-input { width: 72px; }

.etq-lien {
    border: 0; background: transparent; color: #2563eb; cursor: pointer;
    font-size: 12px; padding: 2px 4px; text-decoration: underline;
}
.etq-btn {
    display: inline-flex; align-items: center; gap: 6px;
    border: 1px solid #cbd5e1; background: #fff; color: #334155;
    border-radius: 6px; padding: 6px 13px; font-size: 12.5px; cursor: pointer; white-space: nowrap;
}
.etq-btn:hover:not(:disabled) { background: #f1f5f9; }
.etq-btn:disabled { opacity: .5; cursor: not-allowed; }
.etq-btn-go { background: #1e5bb5; border-color: #1e5bb5; color: #fff; }
.etq-btn-go:hover:not(:disabled) { background: #1a3a6e; }

/* Fournisseur : saisie + liste inline */
.etq-ac { position: relative; }
.etq-fou-q { width: 280px; max-width: 100%; }
.etq-ac-list {
    position: absolute; left: 0; top: calc(100% + 3px); z-index: 5; min-width: 100%; width: 380px; max-width: 70vw;
    max-height: 260px; overflow: auto; background: #fff; border: 1px solid #cbd5e1; border-radius: 6px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, .16); padding: 3px;
}
.etq-ac-item { padding: 5px 8px; border-radius: 4px; cursor: pointer; font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.etq-ac-item:hover, .etq-ac-item.etq-ac-actif { background: #eff6ff; }
.etq-ac-vide { padding: 7px 9px; font-size: 12px; color: #64748b; }
.etq-fou-choisi { font-size: 12.5px; color: #64748b; }
.etq-fou-choisi.etq-fou-ok { color: #166534; font-weight: 600; }
.etq-fou-choisi i { margin-right: 3px; }

/* Sélecteur de casiers */
.etq-cs { display: flex; flex-direction: column; gap: 6px; min-width: 0; min-height: 0; }
.etq-cs-bar { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.etq-cs-filtres { display: inline-flex; gap: 6px; flex-wrap: wrap; }
.etq-cs-q { width: 220px; max-width: 100%; }
.etq-cs-count { margin-left: auto; font-size: 12px; color: #1e40af; font-weight: 600; }
.etq-cs-list {
    border: 1px solid #e5e7eb; border-radius: 6px; background: #fff;
    max-height: 240px; min-height: 90px; overflow: auto; min-width: 0;
}
.etq-pane[data-pane="casiers"] .etq-cs { flex: 1 1 auto; }
.etq-pane[data-pane="casiers"] .etq-cs-list { flex: 1 1 auto; max-height: none; }
.etq-cs-table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.etq-cs-table th {
    position: sticky; top: 0; background: #f1f5f9; color: #475569; font-weight: 600; text-align: left;
    padding: 5px 8px; border-bottom: 1px solid #e2e8f0; font-size: 12px; z-index: 1;
}
.etq-cs-table td { padding: 4px 8px; border-bottom: 1px solid #f1f5f9; cursor: pointer; }
.etq-cs-table tr:hover td { background: #f8fafc; }
.etq-cs-table tr.etq-cs-on td { background: #eff6ff; }
.etq-cs-c-ck { width: 28px; text-align: center; }
.etq-cs-code { font-family: ui-monospace, Consolas, monospace; font-weight: 600; }
.etq-cs-table .etq-num { text-align: right; white-space: nowrap; }
.etq-cs-chips { display: flex; flex-wrap: wrap; gap: 5px; }
.etq-chip {
    display: inline-flex; align-items: center; gap: 4px; padding: 2px 4px 2px 9px;
    border-radius: 12px; background: #dbeafe; color: #1e3a8a; font-size: 11.5px; font-family: ui-monospace, Consolas, monospace;
}
.etq-chip-x { border: 0; background: transparent; color: #1e40af; cursor: pointer; padding: 0 3px; font-size: 11px; }
.etq-chip-x:hover { color: #b91c1c; }

/* Bandeau document */
.etq-docbar {
    display: flex; align-items: center; flex-wrap: wrap; gap: 6px 14px; flex: 0 0 auto;
    padding: 7px 11px; border: 1px solid #bfdbfe; background: #eff6ff; border-radius: 7px; color: #1e3a8a; font-size: 12.5px;
}
.etq-docbar > i { color: #1e5bb5; }
.etq-docbar.etq-docbar-err { border-color: #fecaca; background: #fef2f2; color: #991b1b; }
.etq-doc-info { font-weight: 600; }

/* Grille des lignes */
.etq-grid-wrap { flex: 1 1 auto; min-height: 120px; min-width: 0; overflow: auto; border: 1px solid #e5e7eb; border-radius: 7px; }
.etq-grid { width: 100%; border-collapse: collapse; font-size: 12.5px; table-layout: fixed; }
.etq-grid th {
    position: sticky; top: 0; z-index: 1; background: #f1f5f9; color: #475569; font-weight: 600;
    text-align: left; padding: 6px 8px; border-bottom: 1px solid #e2e8f0; font-size: 12px;
}
.etq-grid td { padding: 3px 8px; border-bottom: 1px solid #f1f5f9; vertical-align: middle; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.etq-grid tbody tr:hover td { background: #f8fafc; }
.etq-c-ref { width: 150px; font-family: ui-monospace, Consolas, monospace; }
.etq-c-cas { width: 140px; }
.etq-c-lot { width: 170px; }
.etq-c-qte { width: 92px; text-align: right; }
.etq-c-del { width: 36px; text-align: center; }
.etq-grid .etq-qte { width: 70px; text-align: right; padding: 3px 6px; }
.etq-stock { margin-left: 6px; font-size: 11px; color: #64748b; background: #f1f5f9; border-radius: 4px; padding: 0 4px; }
.etq-lot, .etq-serie { display: inline-block; margin-right: 6px; font-size: 12px; }
.etq-serie { color: #7c3aed; }
.etq-sanslot { font-style: italic; color: #94a3b8; font-size: 12px; }
.etq-o-doc .etq-c-ref { color: #1e40af; }
.etq-del { border: 0; background: transparent; color: #94a3b8; cursor: pointer; padding: 2px 6px; }
.etq-del:hover { color: #dc2626; }
.etq-vide-row td { white-space: normal; }
.etq-grid tfoot td { position: sticky; bottom: 0; background: #f8fafc; border-top: 1px solid #e2e8f0; border-bottom: 0; padding: 6px 8px; overflow: visible; }
.etq-add { display: flex; align-items: center; gap: 8px; }
.etq-add-saisie { display: inline-flex; align-items: stretch; }
.etq-add-ref { width: 280px; max-width: 46vw; border-radius: 6px 0 0 6px; font-family: ui-monospace, Consolas, monospace; }
.etq-pick {
    border: 1px solid #cbd5e1; border-left: 0; background: #fff; color: #475569; cursor: pointer;
    border-radius: 0 6px 6px 0; padding: 0 9px;
}
.etq-pick:hover { background: #eff6ff; color: #1e40af; }
.etq-add-btn { padding: 5px 11px; }
.etq-grid-foot { display: flex; align-items: center; gap: 12px; flex: 0 0 auto; font-size: 12px; color: #475569; }
.etq-grid-etat { color: #1e5bb5; }
.etq-vider { margin-left: auto; }

/* Transport */
.etq-tr { display: flex; gap: 22px; flex-wrap: wrap; align-items: flex-start; }
.etq-tr-col { display: flex; flex-direction: column; gap: 6px; }
.etq-tr-colis { font-weight: 600; }
.etq-tr-apercu {
    flex: 1 1 320px; min-width: 0; border: 1px solid #e5e7eb; border-radius: 7px; padding: 10px 13px; background: #fafafa;
    display: flex; flex-direction: column; gap: 3px;
}
.etq-tr-titre { font-size: 12px; font-weight: 600; color: #475569; text-transform: uppercase; letter-spacing: .4px; margin-bottom: 4px; }
.etq-tr-l { font-size: 12.5px; display: flex; gap: 8px; }
.etq-tr-nom { font-weight: 600; font-size: 13.5px; }
.etq-tr-k { color: #64748b; min-width: 110px; }

/* ── Pied ───────────────────────────────────────────────────────── */
.etq-foot {
    display: flex; align-items: center; flex-wrap: wrap; gap: 8px 16px; flex: 0 0 auto;
    padding: 10px 16px; border-top: 1px solid #e5e7eb; background: #f8fafc; border-radius: 0 0 10px 10px;
}
.etq-foot-l { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 14px; min-width: 0; flex: 1 1 420px; }
.etq-foot-r { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; justify-content: flex-end; min-width: 0; flex: 1 1 420px; }
.etq-layout-wrap, .etq-depart-wrap { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 600; color: #475569; }
.etq-depart { width: 64px; }
.etq-depart-max { font-weight: 400; color: #64748b; }
.etq-layout-info, .etq-imprimante { font-size: 12px; color: #64748b; }
.etq-imprimante i { margin-right: 3px; }
.etq-msg { flex: 1 1 auto; min-width: 0; font-size: 12.5px; color: #64748b; text-align: right; }
.etq-msg-ok { color: #166534; }
.etq-msg-err { color: #b91c1c; }
.etq-msg-info { color: #1e5bb5; }
.etq-total { font-weight: 700; color: #1e293b; white-space: nowrap; }
.etq-total.etq-total-trop { color: #b91c1c; }

/* ── Picker article (overlay partagé .dd-picker-overlay + classes etq-) ── */
.etq-picker-overlay .etq-picker-panel { width: 95%; height: 92%; }
.etq-picker-overlay .etq-picker-head { padding: 6px 12px; }
.etq-picker-overlay .etq-picker-container { flex: 1; display: flex; flex-direction: column; min-height: 0; overflow: hidden; }

@media (max-width: 760px) {
    .etq-overlay { padding: 6px; }
    .etq-panel { height: 96vh; }
    .etq-c-lot, .etq-c-cas { width: 110px; }
    .etq-c-ref { width: 110px; }
    .etq-add-ref { width: 170px; }
}