/**
 * 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.
   ══════════════════════════════════════════════════════════════ */
.dms-badge {
    position: relative;
    display: inline-block;
    vertical-align: baseline;
    padding: 0.35em 0.65em;
    font-size: 0.75em;
    font-weight: 600;
    line-height: 1;
    text-align: center;
    white-space: nowrap;
    border-radius: 0.375rem;
    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;
}

/* ══════════════════════════════════════════════════════════════
   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
   Tighter padding for badges inside DataTables cells.
   ══════════════════════════════════════════════════════════════ */
table.dataTable .dms-badge {
    font-size: 0.7em;
    padding: 0.2em 0.5em;
}

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