/**
 * 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;
}