/* ============================================================
   LEADS TAB: THE WHATSAPP RELANCE TO MANY LEADS (wa-bulk.js)
   The tick boxes laid over the rows and cards, the bar at the
   bottom and the confirm / progress / summary dialog. Colours come
   from wa.css's --wa-* tokens, defined for both themes.
   ============================================================ */

/* ── the toolbar button ── */
.filter-trigger-btn.wab-toggle.is-on {
    border-color: var(--wa-accent); background: var(--wa-accent-soft); color: var(--wa-accent);
}

/* ── the box ── */
.wab-cb {
    flex: none; display: inline-flex; align-items: center; justify-content: center;
    width: 18px; height: 18px; box-sizing: border-box;
    border: 1.5px solid var(--wa-line-strong); border-radius: 5px;
    background: var(--wa-surface); color: #fff;
    transition: background 0.12s, border-color 0.12s;
    cursor: pointer; vertical-align: middle;
}
.wab-cb[aria-checked="true"], .wab-cb[aria-checked="mixed"] { background: var(--wa-accent); border-color: var(--wa-accent); }
.wab-cb.is-busy { opacity: 0.55; }
.wab-cb svg { display: block; }

/* the table: a box before the name, a tint on the row */
.wab-on #leads-table-body tr[data-lead-id] { cursor: pointer; }
.wab-on #leads-table-body tr[data-lead-id] .lead-profile { gap: 8px; }
.wab-on #leads-table-body tr.wab-sel > td { background: var(--wa-accent-soft) !important; }
.wab-cb-head { margin-right: 8px; }
.wab-on .leads-table thead th:first-child { white-space: nowrap; }

/* the phone list: the call button gives its room to the box (a tap ticks anyway) */
.wab-cb-m { margin-right: 10px; align-self: center; }
.wab-on #mobile-leads-list .mobile-lead-card .btn-call-mobile { display: none; }
.wab-on #mobile-leads-list .mobile-lead-card.wab-sel { background: var(--wa-accent-soft); border-color: var(--wa-accent); }
.wab-m-all {
    display: flex; align-items: center; gap: 12px; width: 100%; box-sizing: border-box;
    margin: 0 0 8px; padding: 10px 16px; border: 1px dashed var(--wa-line-strong); border-radius: 14px;
    background: transparent; color: var(--wa-text); font: inherit; font-size: 13px; font-weight: 600; text-align: left; cursor: pointer;
}

/* the board: a box in the card's corner, the column's "all" under its title */
.wab-on #leads-board .kb-card[data-lead-id] { position: relative; cursor: pointer; }
.wab-on #leads-board .kb-card[data-lead-id] .kb-name { padding-right: 24px; }
.wab-cb-kb { position: absolute; top: 10px; right: 10px; }
.wab-on #leads-board .kb-card.wab-sel { border-color: var(--wa-accent); box-shadow: 0 0 0 1px var(--wa-accent); background: var(--wa-accent-soft); }
.wab-col-all {
    display: inline-flex; align-items: center; margin-top: 7px; padding: 4px 9px;
    border: 1px solid var(--wa-line-strong); border-radius: 8px; background: var(--wa-surface);
    color: var(--wa-accent); font: inherit; font-size: 11.5px; font-weight: 600; cursor: pointer;
}
.wab-col-all:hover { background: var(--wa-accent-soft); }
.wab-col-all.is-all { background: var(--wa-accent); border-color: var(--wa-accent); color: #fff; }
.wab-col-all:disabled { opacity: 0.6; cursor: progress; }

/* room under the lists for the bar */
body.wab-bar-on #view-leads .table-scroll-area { padding-bottom: 96px; }
body.wab-bar-on #view-leads #mobile-leads-list { padding-bottom: 180px; }
body.wab-bar-on #view-leads .kb-cards { padding-bottom: 84px; }
body.wab-bar-on .sdnt-toast { bottom: 136px; }

/* ── the bar ── */
.wab-bar {
    position: fixed; left: 50%; bottom: 64px; transform: translateX(-50%); z-index: 9000;
    display: flex; align-items: center; gap: 16px;
    max-width: calc(100vw - 32px); box-sizing: border-box;
    padding: 10px 10px 10px 18px; border-radius: 14px;
    background: var(--wa-surface); border: 1px solid var(--wa-line-strong);
    box-shadow: 0 10px 30px rgba(15, 23, 42, 0.16), 0 2px 6px rgba(15, 23, 42, 0.06);
    font-family: var(--font-ui); color: var(--wa-text);
}
body:not(:has(#view-leads.active-view)) .wab-bar { display: none !important; }
.wab-bar-count { display: flex; flex-direction: column; gap: 1px; min-width: 0; white-space: nowrap; }
.wab-bar-n { font-size: 13.5px; font-weight: 700; font-variant-numeric: tabular-nums; }
.wab-bar-cap { font-size: 11px; color: var(--wa-text-3); }
.wab-bar-off { display: flex; align-items: baseline; gap: 6px; font-size: 11.5px; color: var(--wa-warn); }
.wab-bar-off[hidden] { display: none; }
.wab-link {
    padding: 0; border: none; background: none; font: inherit; font-weight: 600;
    color: var(--wa-accent); text-decoration: underline; text-underline-offset: 2px; cursor: pointer;
}
.wab-bar-actions { display: flex; align-items: center; gap: 6px; }

.wab-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 7px;
    height: 36px; padding: 0 14px; border-radius: 10px; border: 1px solid transparent;
    font: inherit; font-size: 13px; font-weight: 600; white-space: nowrap; cursor: pointer;
    transition: background 0.12s, border-color 0.12s, color 0.12s, opacity 0.12s;
}
.wab-btn i { font-size: 16px; }
.wab-btn:disabled { opacity: 0.45; cursor: not-allowed; }
.wab-btn-send { background: var(--wa-accent); color: #fff; }
.wab-btn-send:not(:disabled):hover { background: var(--wa-accent-hover); }
.wab-btn-ghost { background: transparent; color: var(--wa-text-2); border-color: var(--wa-line-strong); }
.wab-btn-ghost:not(:disabled):hover { background: var(--wa-fill-hover); color: var(--wa-text); }

/* ── the dialog ── */
body.wab-lock { overflow: hidden; }
.wab-overlay {
    position: fixed; inset: 0; z-index: 9999990;
    display: flex; align-items: center; justify-content: center; padding: 16px;
    background: rgba(17, 24, 39, 0.42);
    backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px);
    opacity: 0; pointer-events: none; transition: opacity 0.18s ease;
}
.wab-overlay.is-on { opacity: 1; pointer-events: auto; }
.wab-dialog {
    width: min(520px, 100%); max-height: calc(100vh - 32px); max-height: calc(100dvh - 32px);
    display: flex; flex-direction: column; overflow: hidden; box-sizing: border-box;
    border-radius: 16px; background: var(--wa-surface); border: 1px solid var(--wa-line);
    box-shadow: 0 24px 60px rgba(15, 23, 42, 0.25);
    font-family: var(--font-ui); color: var(--wa-text);
    transform: translateY(8px); transition: transform 0.2s ease;
}
.wab-overlay.is-on .wab-dialog { transform: none; }
.wab-dialog *, .wab-dialog *::before, .wab-dialog *::after { box-sizing: border-box; }

.wab-head { display: flex; align-items: center; gap: 12px; flex: none; padding: 18px 20px 14px; border-bottom: 1px solid var(--wa-line); }
.wab-head-icon {
    flex: none; width: 38px; height: 38px; border-radius: 11px;
    display: flex; align-items: center; justify-content: center;
    background: linear-gradient(145deg, #2BD96B 0%, #12A150 100%); color: #fff; font-size: 21px;
}
.wab-head-icon.is-muted { background: var(--wa-fill); color: var(--wa-text-2); }
.wab-head-text { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.wab-title { margin: 0; font-size: 16px; font-weight: 700; line-height: 1.3; color: var(--wa-text); }
.wab-sub { font-size: 12.5px; color: var(--wa-text-2); }

.wab-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 16px 20px; display: flex; flex-direction: column; gap: 10px; }
.wab-label { margin-top: 4px; font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--wa-text-3); }
.wab-label.is-plain { font-size: 12.5px; font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--wa-text-2); overflow-wrap: anywhere; }

.wab-phone {
    display: flex; justify-content: flex-end; padding: 14px 12px; border-radius: 12px;
    background-color: #EFEAE2; background-image: radial-gradient(rgba(0, 0, 0, 0.035) 1px, transparent 1px); background-size: 14px 14px;
}
body:not(.light-mode) .wab-phone { background-color: #0B141A; background-image: none; }
.wab-bubble {
    position: relative; max-width: 92%; padding: 8px 10px 20px; border-radius: 10px 2px 10px 10px; background: #D9FDD3;
    font-size: 13.5px; line-height: 1.45; color: #111B21; white-space: pre-wrap; overflow-wrap: anywhere;
    box-shadow: 0 1px 0.5px rgba(11, 20, 26, 0.13);
}
body:not(.light-mode) .wab-bubble { background: #005C4B; color: #E9EDEF; }
.wab-bubble.is-empty { padding-bottom: 8px; background: var(--wa-surface); color: var(--wa-text-2); font-style: italic; border-radius: 10px; }
.wab-bubble-meta { position: absolute; right: 8px; bottom: 4px; font-size: 10.5px; color: #667781; }
.wab-mark { padding: 0 2px; border-radius: 3px; background: rgba(18, 140, 126, 0.16); font-weight: 600; }
.wab-mark.is-slot { font-style: italic; }

.wab-skips { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 6px; }
.wab-skips li { display: flex; align-items: flex-start; gap: 8px; font-size: 13px; line-height: 1.45; color: var(--wa-text-2); }
.wab-skips i { flex: none; margin-top: 2px; font-size: 15px; color: var(--wa-text-3); }

.wab-note { display: flex; align-items: flex-start; gap: 8px; padding: 10px 12px; border-radius: 10px; font-size: 12.5px; line-height: 1.45; }
.wab-note i { flex: none; margin-top: 1px; font-size: 15px; }
.wab-note.is-warn { background: var(--wa-warn-soft); color: var(--wa-warn); }
.wab-note.is-info { background: var(--wa-accent-soft); color: var(--wa-text); }
.wab-note.is-info i { color: var(--wa-accent); }

.wab-foot { flex: none; display: flex; justify-content: flex-end; gap: 8px; padding: 12px 20px 16px; border-top: 1px solid var(--wa-line); }

/* progress */
.wab-progress-n { font-size: 26px; font-weight: 700; font-variant-numeric: tabular-nums; text-align: center; color: var(--wa-text); }
.wab-progress { height: 8px; border-radius: 999px; background: var(--wa-fill); overflow: hidden; }
.wab-progress-fill { height: 100%; width: 0; border-radius: inherit; background: var(--wa-accent); transition: width 0.2s ease; }

/* summary */
.wab-outs { display: flex; flex-direction: column; gap: 8px; }
.wab-out { border: 1px solid var(--wa-line); border-radius: 12px; padding: 10px 12px; }
.wab-out-head { display: flex; align-items: center; gap: 8px; font-size: 13.5px; font-weight: 600; }
.wab-out-head i { font-size: 17px; }
.wab-out-label { flex: 1; min-width: 0; }
.wab-out-n { font-variant-numeric: tabular-nums; font-weight: 700; }
.wab-out-ok .wab-out-head i { color: var(--wa-ok); }
.wab-out-muted .wab-out-head i { color: var(--wa-text-3); }
.wab-out-warn .wab-out-head i { color: var(--wa-warn); }
.wab-out-bad .wab-out-head i { color: var(--wa-danger); }
.wab-names { margin: 8px 0 0; padding: 0 0 0 25px; list-style: none; max-height: 140px; overflow-y: auto; display: flex; flex-direction: column; gap: 3px; }
.wab-names li { font-size: 12.5px; line-height: 1.4; color: var(--wa-text-2); overflow-wrap: anywhere; }
.wab-name { color: var(--wa-text); font-weight: 500; }
.wab-why { color: var(--wa-text-3); }
.wab-why::before { content: " · "; }

/* ── phones ── */
@media (max-width: 900px) {
    /* the toolbar's first row: Trier, Filtrer, Sélectionner, the view switch */
    #leads-bulk-wrap { flex: 1 1 0; min-width: 0; }
    .leads-header-group:has(#leads-bulk-wrap:not([hidden])) #leads-owner-filter { flex: 1 1 100%; }
    #leads-bulk-btn { min-width: 0; }
    #leads-bulk-btn span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    /* above the pagination bar (45 px) that stays under the list, so the
       pages can still be turned in this mode; the board has none */
    .wab-bar {
        left: 12px; right: 12px; bottom: 57px; transform: none;
        max-width: none; flex-wrap: wrap; gap: 8px; padding: 10px 12px;
    }
    body:has(#leads-board:not([hidden])) .wab-bar { bottom: calc(12px + env(safe-area-inset-bottom, 0px)); }
    .wab-bar-count { flex: 1 1 100%; flex-direction: row; flex-wrap: wrap; align-items: baseline; column-gap: 8px; row-gap: 2px; white-space: normal; }
    .wab-bar-n, .wab-bar-cap { white-space: nowrap; }
    .wab-bar-off { flex: 1 1 100%; flex-wrap: wrap; }
    .wab-bar-actions { flex: 1 1 100%; flex-wrap: wrap; }
    .wab-bar-actions .wab-btn-send { flex: 1 1 100%; }
    .wab-bar-actions .wab-btn-ghost { flex: 1 1 0; min-width: 0; }
    body.wab-bar-on .sdnt-toast { bottom: 192px; }
    body.wab-bar-on:has(#wab-bar-off:not([hidden])) .sdnt-toast { bottom: 212px; }
    body.wab-bar-on:has(#leads-board:not([hidden])) .sdnt-toast { bottom: 156px; }
}
@media (max-width: 380px) {
    #leads-bulk-btn { padding: 0 6px; }
    #leads-bulk-btn i { display: none; }
}
@media (max-width: 600px) {
    .wab-overlay { align-items: flex-end; padding: 0; }
    .wab-dialog { width: 100%; max-height: 92vh; max-height: 92dvh; border-radius: 16px 16px 0 0; border-bottom: none; }
    .wab-head { padding: 16px 16px 12px; }
    .wab-body { padding: 14px 16px; }
    .wab-foot { padding: 12px 16px calc(14px + env(safe-area-inset-bottom, 0px)); }
    .wab-foot .wab-btn { flex: 1 1 0; }
}

/* the board has no pagination bar under it: the bar sits lower */
@media (min-width: 901px) {
    body:has(#leads-board:not([hidden])) .wab-bar { bottom: 20px; }
}