/* burble-core.css / core-badges.css: Badges, tags, chips.
   Linked by common/burble_core_css.php, in the order listed there. */

/* ── Badges ──────────────────────────────────────────────────
   A small pill with a label inside. One family for every status
   chip in the admin.

     <span class="bc-badge bc-badge--success bc-badge--dot">Active</span>

   Consolidated from nine per-page forks — .cr- .ma- .mu- .req- .rb-
   (card reader, API keys, users, change requests, RBAC) which were the
   same rule five times, plus .twofa- .ds-status- .cs- .qs-, which each
   drifted on size and green. The forks' palette won because eight pages
   used it; the literals below are deliberate and do not read from the
   shared --success/--info/--neutral tokens, whose green and slate are
   darker than a 12px label on a tint wants.

   Sizes: default 12px; --lg for a standalone status line; --xs for the
   uppercase micro-label that sits inside a heading.

   --dot adds the leading 6px dot. Its colour follows the text except on
   --neutral, where the fork deliberately used a lighter grey than the
   label so the dot reads as "off" rather than as punctuation.       */
.bc-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.4;
  /* A two-word status must not wrap inside a table cell. */
  white-space: nowrap;
}

/* ── Sizes ── */
.bc-badge--lg {
  gap: 6px;
  padding: 5px 14px;
  font-size: 12.5px;
  text-transform: capitalize;
}
.bc-badge--xs {
  padding: 2px 7px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.04em;
}

/* ── Colours ── */
.bc-badge--success {
  background: var(--success-bg);
  color: var(--success);
}
.bc-badge--danger {
  background: var(--danger-bg);
  color: var(--danger);
}
.bc-badge--warn {
  background: var(--warn-bg);
  color: var(--warn);
}
.bc-badge--info {
  background: var(--blue-bg);
  color: var(--blue);
}
.bc-badge--neutral {
  background: var(--sl-200);
  color: var(--sl-500);
}
.bc-badge--teal {
  background: var(--teal-bg);
  color: var(--teal-strong);
}
/* Outline, for a label that must not read as a status. */
.bc-badge--outline {
  background: transparent;
  border: 1px solid var(--border-color);
  color: var(--sl-500);
}

/* ── Leading dot ── */
.bc-badge--dot::before {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  flex-shrink: 0;
}
.bc-badge--lg.bc-badge--dot::before {
  width: 7px;
  height: 7px;
}
.bc-badge--neutral.bc-badge--dot::before {
  background: var(--sl-500);
}

/* ── Tag ──────────────────────────────────────────────────────
   One chosen value in a multi-select, with its remove button.

   Usage: <span class="bc-tag">Visa
            <button type="button" class="bc-tag-remove" title="Remove">×</button>
          </span>

   Chosen's multi-select choices (li.search-choice, under Chosen above) take
   the same shape in teal, the colour Chosen already used there.
   Folded in from .cms-tag (Membership Settings). */
.bc-tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px 2px 10px;
  border: 1px solid var(--teal-light);
  border-radius: 7px;
  background: var(--teal-bg);
  color: var(--teal);
  font-size: 12px;
  font-weight: 500;
}
.bc-tag-remove {
  display: inline-flex;
  align-items: center;
  padding: 0;
  border: none;
  background: none;
  color: var(--teal-light);
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
  transition: color 0.1s;
}
.bc-tag-remove:hover {
  color: var(--teal);
}

/* ── Chip ─────────────────────────────────────────────────────
   A small toggle: click it to show or hide something. Used for the
   column filters on the RBAC grid and the app-category filters on the
   Permissions page.

     <button class="bc-chip toggle-app-btn">
       <i class="fas fa-eye bc-chip-icon-on"></i>
       <i class="fas fa-eye-slash bc-chip-icon-off"></i>
       Reports
     </button>

   The state model is inverted on purpose, because the scripts that drive
   these chips are shared with the classic pages and cannot be rewritten:
   the chip is styled ON by default, and the script adds Bootstrap's
   .btn-secondary to turn it OFF. So .btn-secondary is the off state here,
   not a colour. Off is greyed and struck through, and the eye icon swaps
   to eye-slash.

   Consolidated from .rb-filter-chip (the RBAC grid), .pm-app-chip (a pill
   with a solid-navy .active state that nothing ever applied) and
   .rb-app-chip (styled but never rendered anywhere).            */
.bc-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 30px;
  padding: 0 12px;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
  white-space: nowrap;
  border: 1.5px solid var(--teal);
  background: var(--teal-bg);
  color: var(--teal-strong);
  transition: all 0.18s;
  /* Pin to content width. Without this, when the chip's active-class
     (.app_screens_css / .reports_css / etc.) is swapped out for
     .btn-secondary on toggle-off, the button stretches to fill the
     parent flex row. */
  flex: 0 0 auto;
  width: auto;
}
.bc-chip:not(.btn-secondary):hover {
  background: var(--teal-bg);
  border-color: var(--teal-strong);
  color: var(--teal-strong);
}

/* Off — the shared scripts add .btn-secondary when the column is hidden. */
.bc-chip.btn-secondary {
  background: var(--sl-50);
  border-color: var(--border-color);
  color: var(--sl-400);
  font-weight: 500;
}
.bc-chip.btn-secondary:hover {
  background: var(--sl-100);
  border-color: var(--border-hover);
  color: var(--sl-500);
}

.bc-chip.btn-secondary:focus {
  box-shadow: 0 0 0 0.05rem rgba(151, 153, 166, 0.5);
}

/* The eye / eye-slash pair, swapped by the off state. */
.bc-chip-icon-on {
  display: block;
  flex-shrink: 0;
}
.bc-chip-icon-off {
  display: none;
  flex-shrink: 0;
}
.bc-chip.btn-secondary .bc-chip-icon-on {
  display: none;
}
.bc-chip.btn-secondary .bc-chip-icon-off {
  display: block;
}