/**
 * DMS Badge System — Single Source of Truth
 * Issue #7198 → #7201: DRY badge CSS shared across ALL plugin views
 *
 * WHY a custom class?
 * The Logistik WordPress theme forces .badge to:
 *   position: absolute; top: 8px; right: 8px; border-radius: 50%;
 * This breaks every datatable, modal, and inline badge.
 * Using .dms-badge avoids the conflict entirely — no !important war.
 *
 * USAGE:
 *   <span class="dms-badge dms-badge-success">Active</span>
 *   <span class="dms-badge dms-badge-danger dms-badge-sm">Banned</span>
 *
 * COLOR MAP (matches Bootstrap 5 semantics):
 *   success  = green   (#28a745)  — active, confirmed, synced
 *   warning  = orange  (#fd7e14)  — pending, low rate, local-only
 *   danger   = red     (#dc3545)  — banned, error, missing
 *   info     = cyan    (#0dcaf0)  — informational, coupon
 *   primary  = blue    (#0056b3)  — Termont brand, selected
 *   secondary= gray    (#6c757d)  — neutral, unknown
 *   dark     = dark    (#212529)  — admin, system
 *   light    = light   (#f5f8fa)  — subtle, disabled
 */

/* ══════════════════════════════════════════════════════════════
   BASE — .dms-badge
   Self-contained reset. Does NOT inherit from .badge.
   ══════════════════════════════════════════════════════════════ */
/* M-DT-SIZE-RESIZE #8443 (2026-04-29) — Sergey: bumped from 0.75em/0.35em to
   12px / 4px-9px so DT pills land at ~22-24 px tall (matches the original
   VBS green-pill size the user liked, not the shrunken 12 px). */
.dms-badge {
    position: relative;
    display: inline-block;
    vertical-align: baseline;
    padding: 4px 9px;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.2;
    text-align: center;
    white-space: nowrap;
    border-radius: 4px;
    color: #fff;
    background-color: #6c757d;
    text-decoration: none;
    transition: opacity 0.15s ease-in-out;
}

/* ══════════════════════════════════════════════════════════════
   SIZE VARIANTS
   ══════════════════════════════════════════════════════════════ */
.dms-badge-sm {
    font-size: 0.65em;
    padding: 0.25em 0.5em;
}

.dms-badge-lg {
    font-size: 0.85em;
    padding: 0.45em 0.75em;
}

/* ══════════════════════════════════════════════════════════════
   COLOR VARIANTS
   ══════════════════════════════════════════════════════════════ */

/* Success — green */
.dms-badge-success {
    background-color: #28a745;
    color: #fff;
}

/* Warning — orange */
.dms-badge-warning {
    background-color: #fd7e14;
    color: #000;
}

/* Danger — red */
.dms-badge-danger {
    background-color: #dc3545;
    color: #fff;
}

/* Info — cyan */
.dms-badge-info {
    background-color: #0dcaf0;
    color: #000;
}

/* Primary — Termont blue */
.dms-badge-primary {
    background-color: #0056b3;
    color: #fff;
}

/* Secondary — gray */
.dms-badge-secondary {
    background-color: #6c757d;
    color: #fff;
}

/* Dark */
.dms-badge-dark {
    background-color: #212529;
    color: #fff;
}

/* Light */
.dms-badge-light {
    background-color: #f5f8fa;
    color: #7e8299;
}

/* M-DT-TYPE-E2 #8443 (2026-04-29) — neutral richer variants for the
   organization-type column (replacing the orange/green/red colors that
   misread as warning/success/error). */
.dms-badge-purple {
    background-color: #6f42c1;
    color: #fff;
}

.dms-badge-teal {
    background-color: #20c997;
    color: #fff;
}

/* ══════════════════════════════════════════════════════════════
   SOFT VARIANTS (light background + colored text)
   For datatable cells where full-color badges are too heavy.
   ══════════════════════════════════════════════════════════════ */
.dms-badge-soft-success {
    background-color: #d4edda;
    color: #155724;
}

.dms-badge-soft-warning {
    background-color: #fff3cd;
    color: #856404;
}

.dms-badge-soft-danger {
    background-color: #f8d7da;
    color: #721c24;
}

.dms-badge-soft-info {
    background-color: #d1ecf1;
    color: #0c5460;
}

.dms-badge-soft-primary {
    background-color: #cce5ff;
    color: #004085;
}

/* ══════════════════════════════════════════════════════════════
   SHAPE VARIANTS
   ══════════════════════════════════════════════════════════════ */

/* Pill — fully rounded ends */
.dms-badge-pill {
    border-radius: 50rem;
}

/* Circle — fixed size, for counters */
.dms-badge-circle {
    border-radius: 50%;
    width: 1.75rem;
    height: 1.75rem;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.7em;
    font-weight: 700;
}

/* ══════════════════════════════════════════════════════════════
   OUTLINE VARIANTS
   ══════════════════════════════════════════════════════════════ */
.dms-badge-outline {
    background-color: transparent;
    border: 1.5px solid currentColor;
}

.dms-badge-outline.dms-badge-success { color: #28a745; }
.dms-badge-outline.dms-badge-warning { color: #fd7e14; }
.dms-badge-outline.dms-badge-danger  { color: #dc3545; }
.dms-badge-outline.dms-badge-info    { color: #0dcaf0; }
.dms-badge-outline.dms-badge-primary { color: #0056b3; }

/* ══════════════════════════════════════════════════════════════
   DATATABLE CONTEXT — M-DT-SIZE-RESIZE #8443 (2026-04-29)
   Inherit the base .dms-badge (12px / 4-9px). NO size override.
   Sergey: pills must match the VBS green-pill size, not be shrunk.
   ══════════════════════════════════════════════════════════════ */
table.dataTable .dms-badge {
    /* size inherits from base .dms-badge — no override */
}

/* ══════════════════════════════════════════════════════════════
   SWAL2 CONTEXT
   Ensure badges inside SweetAlert2 modals render inline.
   ══════════════════════════════════════════════════════════════ */
.swal2-container .dms-badge,
.swal2-popup .dms-badge {
    position: relative;
    display: inline-block;
}

/* ─── #7607 (M83.1 + M83.4) — invoices-ifs DataTable: bigger text + centered cells ─── */
.wcp-ifs-dual-wrap .dataTables_wrapper table.dataTable thead th,
.wcp-ifs-dual-wrap .dataTables_wrapper table.dataTable tbody td {
    font-size: 14px !important;
    padding: 14px 12px !important;
    text-align: center !important;
    vertical-align: middle !important;
    line-height: 1.5;
}
.wcp-ifs-dual-wrap .dataTables_wrapper table.dataTable thead th {
    background: #f8f9fa;
    font-weight: 700;
    font-size: 13px !important;
    color: #495057;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}
.wcp-ifs-dual-wrap .dataTables_wrapper table.dataTable tbody td .dms-badge {
    font-size: 13px;
    padding: 5px 10px;
    display: inline-block;
}
.wcp-ifs-dual-wrap .dataTables_wrapper table.dataTable tbody td a.dms-badge {
    cursor: pointer;
    transition: transform 0.1s ease, box-shadow 0.1s ease;
}
.wcp-ifs-dual-wrap .dataTables_wrapper table.dataTable tbody td a.dms-badge:hover {
    transform: translateY(-1px);
    box-shadow: 0 2px 6px rgba(0,0,0,0.15);
}
/* Pay button — keep it punchy */
.wcp-ifs-dual-wrap .dataTables_wrapper table.dataTable tbody td .wcp-pay-btn {
    font-size: 14px;
    font-weight: 600;
    padding: 8px 18px;
}
/* Money badges keep tabular-nums for alignment even when centered */
.wcp-ifs-dual-wrap .dataTables_wrapper table.dataTable tbody td span[style*="tabular-nums"] {
    font-variant-numeric: tabular-nums;
}

/* ─── #7607 (M92) — unified light-grey toolbar buttons ─── */
.wcp-toolbar-btn,
.wcp-toolbar-btn:link,
.wcp-toolbar-btn:visited,
button.wcp-toolbar-btn,
.dt-buttons .wcp-toolbar-btn {
    background: #f1f3f5 !important;
    color: #495057 !important;
    border: 1px solid #ced4da !important;
    box-shadow: 0 1px 2px rgba(0,0,0,.05) !important;
    font-weight: 500 !important;
    font-size: 13px !important;
    padding: 7px 14px !important;
    margin: 0 4px !important;
    border-radius: 6px !important;
    transition: background .15s ease, border-color .15s ease, transform .1s ease;
    display: inline-block !important;
    cursor: pointer;
}
.wcp-toolbar-btn:hover,
.wcp-toolbar-btn:focus,
button.wcp-toolbar-btn:hover {
    background: #e2e6ea !important;
    color: #212529 !important;
    border-color: #868e96 !important;
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgba(0,0,0,.1) !important;
}
.wcp-toolbar-btn.active {
    background: #ced4da !important;
    color: #212529 !important;
    border-color: #495057 !important;
}

/* ─── #7607 (M95) — Proper Columns dropdown (was horizontal inline + hidden) ─── */
div.dt-button-collection {
    position: absolute !important;
    z-index: 9999 !important;
    background: #fff !important;
    border: 1px solid #ced4da !important;
    border-radius: 8px !important;
    box-shadow: 0 8px 24px rgba(0,0,0,.18) !important;
    padding: 12px !important;
    min-width: 280px !important;
    max-height: 480px !important;
    overflow-y: auto !important;
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 6px !important;
}
div.dt-button-collection .dt-button-collection-title {
    grid-column: 1 / -1 !important;
    font-weight: 700 !important;
    font-size: 14px !important;
    color: #212529 !important;
    border-bottom: 2px solid #e9ecef !important;
    padding-bottom: 8px !important;
    margin-bottom: 8px !important;
    text-align: center !important;
}
div.dt-button-collection button.dt-button {
    background: #f8f9fa !important;
    color: #495057 !important;
    border: 1px solid #dee2e6 !important;
    border-radius: 4px !important;
    padding: 6px 10px !important;
    margin: 0 !important;
    text-align: left !important;
    font-size: 12px !important;
    font-weight: 500 !important;
    box-shadow: none !important;
    cursor: pointer;
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    transition: background .12s ease;
}
div.dt-button-collection button.dt-button::before {
    content: '◯';
    color: #adb5bd;
    font-size: 11px;
}
div.dt-button-collection button.dt-button.active {
    background: #d4edda !important;
    color: #155724 !important;
    border-color: #28a745 !important;
}
div.dt-button-collection button.dt-button.active::before {
    content: '✔';
    color: #28a745;
    font-weight: 700;
}
div.dt-button-collection button.dt-button:hover {
    background: #e9ecef !important;
    border-color: #adb5bd !important;
}
div.dt-button-collection button.dt-button.active:hover {
    background: #c3e6cb !important;
}
.wcp-colvis-restore {
    grid-column: 1 / -1 !important;
    text-align: center !important;
    margin-top: 8px !important;
    background: #f1f3f5 !important;
    color: #495057 !important;
    border-top: 1px solid #dee2e6 !important;
}
/* Backdrop dim */
.dt-button-background {
    background: rgba(0,0,0,.15) !important;
    z-index: 9998 !important;
}

/* ─── #7607 (M96) — A4 invoice template print styles ─── */
.wcp-invoice-pdf-popup { padding: 16px !important; }
@media print {
    body * { visibility: hidden !important; }
    #wcp-invoice-pdf-view, #wcp-invoice-pdf-view * { visibility: visible !important; }
    #wcp-invoice-pdf-view {
        position: absolute !important;
        left: 0 !important;
        top: 0 !important;
        width: 100% !important;
        max-width: 210mm !important;
        margin: 0 !important;
        padding: 12mm !important;
        border: none !important;
        box-shadow: none !important;
    }
    @page { size: A4; margin: 8mm; }
}

/* ══════════════════════════════════════════════════════════════
   Issue #8402 F14 + D24 — Modal stacking + WP-admin-bar overlap fix
   (added 2026-04-27 — moved here from admin-orgs-ifs-report.css
   because that file is NOT enqueued on /clerks-admin/admin-organizations/,
   /admin-users/, /admin-orders/, /admin-guarantees/, /admin-reports/ —
   but dms-badges.css IS enqueued on every page that uses .dms-badge,
   which is exactly every page that opens a Bootstrap-5 modal in our
   plugin. Single source of truth for stacking.)

   ROOT CAUSE chain:
   1. Bootstrap 5's `.modal.fade` defaults to z-index: 1055 — but the
      Logistik child theme overrides `.modal` with z-index: 9 in its
      base CSS (verified live: getComputedStyle($('#wcp-crm-object-modal'))
      .zIndex === "9").
   2. WP admin bar `#wpadminbar` is z-index: 99999 (position: fixed).
   3. WP admin bar lives in its OWN stacking context (because the
      <html> element has `transform: translateZ(0)` from one of the
      Elementor / theme global styles), so cross-context z-index
      comparison goes by paint order — admin bar paints LAST.
   Result: even if the modal beat 99999, the WP admin bar would still
   render above it because of the separate stacking island.

   FIX:
   - Bump every `.modal.show` to z-index 100050 (above 99999) so the
     modal CONTENT is unambiguously above the admin bar.
   - Bump backdrop to 100040 so the dim layer also covers the admin bar.
   - Belt & suspenders: while ANY modal is open (body.modal-open),
     hide the WP admin bar AND the Termont theme top-nav so they don't
     visually compete with the modal content. They reappear when the
     user closes the modal.
   ══════════════════════════════════════════════════════════════ */
.modal.fade.show,
.modal.show,
.cw-crm-modal,
#wcp-crm-object-modal,
#wcp-admin-org-modal,
#wcp-admin-guarantee-modal,
#wcp-admin-user-modal,
#wcp-admin-order-modal,
#wcp-admin-report-modal {
    z-index: 100050 !important;
}

/* M-MODAL-STICKY-TABS #8443 (2026-04-29) — pin the CRM modal tab nav so it
   stays visible while scrolling long inner DataTables (gate moves, history,
   bridge log, etc.). Only applies to the CRM 360° modal — leaves legacy
   admin modals untouched. */
#wcp-crm-object-modal .modal-body > .nav-tabs.cw-crm-tabs {
    position: sticky;
    top: 0;
    z-index: 5;
    background: #fff;
    margin-left: -1rem;
    margin-right: -1rem;
    padding-left: 1rem;
    padding-right: 1rem;
    border-bottom: 1px solid #dee2e6;
    box-shadow: 0 2px 4px rgba(0,0,0,0.04);
}

/* M-TABS-SCROLL-X #8443 (2026-04-29) — on narrow viewports (mobile/tablet),
   horizontal-scroll the 10-tab nav instead of wrapping to a 4-tall stack.
   Keeps the content area predictable. */
@media (max-width: 991.98px) {
    #wcp-crm-object-modal .modal-body > .nav-tabs.cw-crm-tabs {
        flex-wrap: nowrap;
        overflow-x: auto;
        overflow-y: hidden;
        scrollbar-width: thin;
        -webkit-overflow-scrolling: touch;
    }
    #wcp-crm-object-modal .modal-body > .nav-tabs.cw-crm-tabs .nav-link {
        white-space: nowrap;
        flex-shrink: 0;
    }
    #wcp-crm-object-modal .modal-body > .nav-tabs.cw-crm-tabs::-webkit-scrollbar {
        height: 4px;
    }
    #wcp-crm-object-modal .modal-body > .nav-tabs.cw-crm-tabs::-webkit-scrollbar-thumb {
        background: #dee2e6;
        border-radius: 2px;
    }
}
.modal-backdrop.show,
.modal-backdrop.fade.show,
.modal-backdrop {
    z-index: 100040 !important;
}

/* D24 — hide WP admin bar + theme nav while any modal is open */
body.modal-open #wpadminbar,
body.modal-open #masthead,
body.modal-open .site-header,
body.modal-open header.site-header,
body.modal-open .elementor-location-header,
body.modal-open .menu-top-bar,
body.modal-open .top-bar,
body.modal-open #wcp-admin-shortcut-bar {
    visibility: hidden !important;
    pointer-events: none !important;
}
/* …and free the 32px html margin-top WP reserves for the admin bar
   so the modal can use the full viewport while admin bar is hidden */
body.modal-open { margin-top: 0 !important; }
html.modal-open-html-fix { margin-top: 0 !important; }

/* ══════════════════════════════════════════════════════════════
   M-DT-SIZE-4 #8443 (2026-04-29) — monospace ID badge variant.
   For ID badges in DT cells (TOS/VBS/IFS/Lawson/SCAC). Locks
   font-family monospace + nowrap. Inherits all dimensions from
   .dms-badge so size is uniform with other DT badges.
   ══════════════════════════════════════════════════════════════ */
.dms-badge-id {
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    text-decoration: none;
    cursor: pointer;
}
.dms-badge-id:hover {
    opacity: 0.85;
    text-decoration: none;
}

/* ══════════════════════════════════════════════════════════════
   M-FILT-5-FIX #8443 (2026-04-28) — filter-count badge variant.
   Used inside .wcp-admin-org-filter-btn next to each label. Adds
   explicit left margin so the count doesn't overlap the last
   letter of the button text (Sergey UX feedback round). Also
   used by anything that needs a small inline numeric pill.
   ══════════════════════════════════════════════════════════════ */
.dms-badge--filter-count {
    margin-left: 6px;
    padding: 2px 6px;
    font-size: 10px;
    font-weight: 700;
    line-height: 1.2;
    border-radius: 8px;
    vertical-align: middle;
    background: #f5f8fa;
    color: #212529;
}

/* ─────────────────────────────────────────────────────────────────────────
   Issue #9112 — Clickable badge hover affordance (UX signal)
   Universal :has() rule — picks up all 5 wrapper classes site-wide
   without enumerating them or touching renderers.
   ───────────────────────────────────────────────────────────────────────── */

/* Variant glow palette — derives from each soft-* family color */
.dms-badge-soft-info     { --badge-glow: rgba(13, 202, 240, .30); }
.dms-badge-soft-success  { --badge-glow: rgba(40, 167,  69, .30); }
.dms-badge-soft-warning  { --badge-glow: rgba(255, 193,   7, .35); }
.dms-badge-soft-danger   { --badge-glow: rgba(220,  53,  69, .30); }
.dms-badge-soft-secondary{ --badge-glow: rgba(108, 117, 125, .25); }
.dms-badge-soft-primary  { --badge-glow: rgba( 13, 110, 253, .30); }

/* Baseline transition — applied so the OUT animation feels smooth */
a:has(> .dms-badge) > .dms-badge,
.dms-badge--clickable {
    cursor: pointer;
    transition: transform 180ms cubic-bezier(0.34, 1.56, 0.64, 1),
                box-shadow 180ms ease;
    will-change: transform, box-shadow;
}

/* Hover : scale up + glow + lift */
a:has(> .dms-badge):hover > .dms-badge,
.dms-badge--clickable:hover {
    transform: translateY(-1px) scale(1.05);
    box-shadow: 0 0 0 3px var(--badge-glow, rgba(13, 110, 253, .25));
    position: relative;
    z-index: 2;
}

/* Active : tactile press-down */
a:has(> .dms-badge):active > .dms-badge,
.dms-badge--clickable:active {
    transform: translateY(0) scale(1.02);
    box-shadow: 0 0 0 2px var(--badge-glow, rgba(13, 110, 253, .25));
}

/* Disabled : skip the effect */
a[aria-disabled="true"]:has(> .dms-badge):hover > .dms-badge {
    transform: none;
    box-shadow: none;
}

/* Accessibility : honor reduced-motion preference */
@media (prefers-reduced-motion: reduce) {
    a:has(> .dms-badge):hover > .dms-badge,
    .dms-badge--clickable:hover { transform: none; }
    a:has(> .dms-badge) > .dms-badge,
    .dms-badge--clickable { transition: box-shadow 180ms ease; }
}

/* DataTable cell guard : transform overflows td bounds without this */
table.dataTable td:has(a > .dms-badge) {
    overflow: visible;
}

/* ─────────────────────────────────────────────────────────────────────────
   Issue #9045 round-3 — restore checkbox visibility inside admin modals
   Logistik theme has a global `input[type="checkbox"] { display:none }`
   rule that hides EVERY native checkbox site-wide (replaced by label::before
   pseudo-elements). Inside our admin digest modal we need REAL native
   checkboxes for accessibility + click-handling reliability.
   Counter-style with high specificity inside .wcp-admin-digest-modal scope.
   ───────────────────────────────────────────────────────────────────────── */

#wcp-admin-digest-modal input[type="checkbox"] {
    display: inline-block !important;
    visibility: visible !important;
    opacity: 1 !important;
    width: 16px !important;
    height: 16px !important;
    cursor: pointer !important;
    accent-color: #0d6efd;
    margin: 0 4px;
    vertical-align: middle;
}
#wcp-admin-digest-modal input[type="checkbox"]:disabled {
    cursor: not-allowed !important;
    opacity: 0.5 !important;
}

/* ─────────────────────────────────────────────────────────────────────────
   #9155 (2026-05-09) — Bootstrap .btn-close × glyph FIX

   Root cause : Logistik parent theme ships `app.min.css` with a CORRUPT
   Bootstrap 5 .btn-close inline SVG path — every L (lineto) command got
   mangled to "NaN NaN" during their build/minify step. The button HAS
   the right `background-image: url(data:image/svg+xml,...)` but the SVG
   renders as blank because the path data is invalid.

   Previous fix (#9106 → container-workflow.css:925) applied
   `filter: brightness(0) invert(1)` assuming the SVG was rendering and
   just needed to be inverted to white. It WASN'T rendering.

   Fix : counter-override the background-image with a hand-written valid
   Bootstrap-5-equivalent X glyph. The existing `filter: brightness(0)
   invert(1)` from container-workflow.css then correctly inverts our
   valid SVG to white on dark gradient headers.

   Fallback : if some CSP/browser blocks the data:image URL, the empty
   `<button>:before` adds a Unicode × (U+00D7) so the user always has a
   clickable glyph.
   ───────────────────────────────────────────────────────────────────────── */

/* Valid Bootstrap-5-equivalent × glyph SVG, hand-written + URL-encoded */
.btn-close {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23000'%3E%3Cpath d='M2.146 2.854a.5.5 0 1 1 .708-.708L8 7.293l5.146-5.147a.5.5 0 0 1 .708.708L8.707 8l5.147 5.146a.5.5 0 0 1-.708.708L8 8.707l-5.146 5.147a.5.5 0 0 1-.708-.708L7.293 8 2.146 2.854Z'/%3E%3C/svg%3E") !important;
    background-position: center !important;
    background-size: 1em auto !important;
    background-repeat: no-repeat !important;
}

/* Defense-in-depth fallback : if the data:url is somehow blocked, render
   a Unicode × character instead. `:empty` matches because Bootstrap leaves
   the button with no text content — only background-image is the visual. */
.btn-close:empty:before {
    content: "\00D7"; /* × U+00D7 multiplication sign */
    display: inline-block;
    font-size: 1.5em;
    font-family: Arial, sans-serif;
    line-height: 1;
    color: inherit;
    /* Hidden when background-image renders correctly (positive case) by
       making it transparent — the SVG covers it. If SVG fails to render
       (corrupt data url, CSP), the user sees the inherited color × glyph. */
}

/* ─────────────────────────────────────────────────────────────────────────
   #9157 (2026-05-10) — Kill Logistik label.form-check-label::before pseudo
   inside admin modals where we restored native checkboxes.

   Logistik parent theme draws an orange-red 18×18 ✓ pseudo-element on
   .form-check-label::before AND :checked ~ label::before — meant to REPLACE
   the natively-hidden checkbox. But in #9045 we restored the native checkbox
   inside #wcp-admin-digest-modal scope (we need real native inputs for
   accessibility + click reliability). Result before this fix : both visuals
   render side-by-side (red-orange ✓ pseudo + native blue input).

   Same kill-rule already exists in container-workflow.css:268-275 but
   scoped to .container-workflow-main only. Extending the same kill to every
   admin-side modal where we restore native checkboxes.
   ───────────────────────────────────────────────────────────────────────── */

#wcp-admin-digest-modal label.form-check-label::before,
#wcp-admin-digest-modal label.form-check-label::after,
#wcp-admin-digest-modal .form-check label::before,
#wcp-admin-digest-modal .form-check label::after,
#wcp-admin-digest-modal input[type="checkbox"] ~ label::before,
#wcp-admin-digest-modal input[type="checkbox"] ~ label::after,
#wcp-admin-noorg-investigation-modal label.form-check-label::before,
#wcp-admin-noorg-investigation-modal label.form-check-label::after,
#wcp-admin-noorg-investigation-modal .form-check label::before,
#wcp-admin-noorg-investigation-modal .form-check label::after,
#wcp-admin-email-summary-modal label.form-check-label::before,
#wcp-admin-email-summary-modal label.form-check-label::after,
#wcp-admin-email-summary-modal .form-check label::before,
#wcp-admin-email-summary-modal .form-check label::after {
    display: none !important;
    content: none !important;
    width: 0 !important;
    height: 0 !important;
    visibility: hidden !important;
}

/* ══════════════════════════════════════════════════════════════
   STEP CIRCLE — pipeline 1/10..10/10 (extends .dms-badge-circle)
   Issue #9943 PRE-AI 2/10 — Round .dms-step-circle CSS (NOT Bootstrap .badge)
   Consumed by #9948 (right-panel) + #9954 (modal trigger from 3/10)
   Spec: apps/termont2.com/project-management/pre-ai-support-pipeline/02-step-circle-css-not-bootstrap-badge.md
   Maintainer: Olivier RAVEAU — Oliv.Ai (2026-05-22)
   Version: v1.1 — M9 + M10 + M21 (size variants + img specificity override + inline docs)

   Renders a round badge showing "N/10" with deterministic color progression
   (red → amber → blue → green) for the 10-step support pipeline taxonomy
   from 03-ten-card-consult-modal.md:
     1=Investigation     2=Manipulation      3=Agentisation
     4=Réponse en cours  5=Envoi 1re réponse 6=Attente réponse
     7=Réponse user      8=Triage suite      9=Finalisation
     10=Réponse succès

   ⚠️ NEVER use Bootstrap `.badge` here — Logistik child-theme overrides break it
   (per feedback_dms_badge_termont2_only.md, asked 5+ times by Sergey).

   Click target → opens 10-card consult modal (3/10 wires the handler).
   ══════════════════════════════════════════════════════════════ */
.dms-step-circle {
    /* Default sizing = md = 1.75rem (canonical .dms-badge-circle parity). */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 50%;
    font-size: 10px;
    font-weight: 700;
    cursor: pointer;
    transition: transform 200ms ease, box-shadow 200ms ease;
    user-select: none;
    /* CSS custom prop kept for future calc-based color tiering (currently
       overridden by the precomputed .step-N classes below). */
    --step: 1;
    /* Defensive specificity vs Logistik theme's `img:not([draggable])` rule
       which lands at 0,0,1,1 — keep step-circles never accidentally img-styled. */
    box-sizing: border-box;
    line-height: 1;
    padding: 0;
}
.dms-step-circle[data-step]::before {
    content: attr(data-step) "/10";
}
.dms-step-circle:hover {
    transform: scale(1.15);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}
.dms-step-circle:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 2px;
}
/* ─── Color tiers — red (1-3 early) → amber (4-6 mid) → blue (7-9 late) → green (10 done) ─── */
.dms-step-circle.step-1,
.dms-step-circle.step-2,
.dms-step-circle.step-3 { background-color: #dc3545; color: #fff; }
.dms-step-circle.step-4,
.dms-step-circle.step-5,
.dms-step-circle.step-6 { background-color: #ffc107; color: #000; }
.dms-step-circle.step-7,
.dms-step-circle.step-8,
.dms-step-circle.step-9 { background-color: #0d6efd; color: #fff; }
.dms-step-circle.step-10 { background-color: #28a745; color: #fff; }
/* ─── Disabled variant (M8) — non-clickable, faded ─── */
.dms-step-circle--disabled {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
}
/* ─── Size variants (M21) — sm/md/lg per helper opts.size ─── */
.dms-step-circle.dms-step-circle--sm {
    width: 1.25rem;
    height: 1.25rem;
    font-size: 8px;
}
.dms-step-circle.dms-step-circle--md {
    /* explicit md class for callers that don't want to rely on the default */
    width: 1.75rem;
    height: 1.75rem;
    font-size: 10px;
}
.dms-step-circle.dms-step-circle--lg {
    width: 2.5rem;
    height: 2.5rem;
    font-size: 14px;
}
/* ─── Logistik img-rule defense (M10) ─── */
/* The child theme ships `img:not([draggable]) { max-width: 100%; height: auto; }`
   at specificity 0,0,1,1. Our circles are <span>s so they're immune, but if a
   future caller ever wraps the circle in <img alt> for an a11y test, we need
   to keep our explicit width/height winning. Selectors below tie 0,0,2,1 to
   stay above the theme rule without `!important`. */
.dms-step-circle.dms-step-circle img,
.dms-step-circle.dms-step-circle[data-step] {
    width: inherit;
    height: inherit;
}