/* ==========================================================================
   Blastforce UI kit (bf-*)
   Shared components for list pages: status tabs, filter toolbar, tables
   (incl. mobile stacked mode), status pills, empty states, row actions.
   Colors come from Vuexy CSS variables only, so light and dark themes are
   both covered without per-theme overrides.
   Markup helpers: views/mixins/ui.pug · Behavior: public/js/app-ui.js
   ========================================================================== */

/* --- Status tabs -------------------------------------------------------- */
.bf-tabs {
  display: flex;
  align-items: stretch;
  gap: 0.25rem;
  padding: 0 0.5rem;
  border-bottom: 1px solid var(--bs-border-color);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.bf-tabs::-webkit-scrollbar {
  display: none;
}
.bf-tab {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.7rem 0.875rem;
  border: 0;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  margin-bottom: -1px;
  background: transparent;
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--bs-secondary-color);
  white-space: nowrap;
  cursor: pointer;
  transition:
    color 0.15s ease,
    border-color 0.15s ease;
}
.bf-tab:hover {
  color: var(--bs-heading-color);
}
.bf-tab.is-active {
  color: var(--bs-primary);
  border-bottom-color: var(--bs-primary);
}
/* Deep brand red lacks contrast on dark navy — use the theme's lifted
   emphasis tone for the label, keep the brand red underline. */
[data-bs-theme='dark'] .bf-tab.is-active {
  color: var(--bs-primary-text-emphasis);
}
[data-bs-theme='dark'] .bf-tab.is-active .bf-tab-count:not(.badge) {
  color: var(--bs-primary-text-emphasis);
}
.bf-tab-count {
  font-size: 0.72rem;
  font-weight: 600;
  line-height: 1;
  padding: 0.3em 0.55em;
  border-radius: 1rem;
  background: rgba(var(--bs-base-color-rgb), 0.07);
  color: var(--bs-secondary-color);
}
.bf-tab.is-active .bf-tab-count:not(.badge) {
  background: rgba(var(--bs-primary-rgb), 0.12);
  color: var(--bs-primary);
}
.bf-tab .badge.bf-tab-count {
  padding: 0.3em 0.55em;
  font-size: 0.72rem;
}

/* --- Filter toolbar ------------------------------------------------------ */
.bf-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
  padding: 0.875rem 1rem;
}
.bf-toolbar > .form-select {
  width: auto;
  flex: 0 1 auto;
  min-width: 150px;
  max-width: 230px;
}
.bf-search {
  flex: 1 1 240px;
  min-width: 200px;
}
.bf-search .input-group-text {
  background: transparent;
}
.bf-toolbar-count {
  margin-left: auto;
  font-size: 0.8125rem;
  color: var(--bs-secondary-color);
  white-space: nowrap;
}
@media (max-width: 575.98px) {
  .bf-toolbar {
    padding: 0.75rem;
    gap: 0.5rem;
  }
  .bf-search {
    flex: 1 1 100%;
    min-width: 0;
  }
  .bf-toolbar > .form-select {
    flex: 1 1 calc(50% - 0.25rem);
    max-width: none;
  }
}

/* --- Tables --------------------------------------------------------------- */
.bf-table th {
  font-size: 0.75rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--bs-secondary-color);
  white-space: nowrap;
}
.bf-table td {
  vertical-align: middle;
}
.bf-cell-main {
  font-weight: 600;
}
.bf-cell-meta {
  font-size: 0.8125rem;
  color: var(--bs-secondary-color);
  margin-top: 0.15rem;
}
.bf-nowrap {
  white-space: nowrap;
}
.bf-num {
  font-variant-numeric: tabular-nums;
}

/* Row actions: at most one visible quick action + a kebab dropdown. */
.bf-row-actions {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.375rem;
  white-space: nowrap;
}

/* --- Status pill ----------------------------------------------------------- */
.badge.bf-status {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}
.bf-status-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  flex: 0 0 auto;
}

/* --- Empty state ------------------------------------------------------------ */
.bf-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 2rem 1rem;
  border: 1px dashed var(--bs-border-color);
  border-radius: 10px;
  color: var(--bs-secondary-color);
  text-align: center;
}
.bf-empty i {
  font-size: 1.6rem;
  opacity: 0.55;
}

/* --- Mobile stacked tables (.bf-table--stack) --------------------------------
   Under 768px each row becomes a small card: the lead cell (.bf-stack-lead)
   spans full width, other cells show a label from data-th="…", and the
   actions cell (.bf-stack-actions) right-aligns. Collapse rows (inline edit
   forms) keep working through Bootstrap's .show class. */
@media (max-width: 767.98px) {
  .table.bf-table--stack thead {
    display: none;
  }
  .table.bf-table--stack tbody {
    display: block;
    width: 100%;
  }
  .table.bf-table--stack tbody > tr {
    display: block;
    width: 100%;
    padding: 0.65rem 0.25rem;
    border-bottom: 1px solid var(--bs-border-color);
  }
  .table.bf-table--stack tbody > tr.collapse:not(.show):not(.collapsing) {
    display: none;
    padding: 0;
    border: 0;
  }
  .table.bf-table--stack tbody > tr > td,
  .table.bf-table--stack tbody > tr > th {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.3rem 0;
    border: 0;
    box-shadow: none;
    text-align: start;
  }
  .table.bf-table--stack tbody > tr > td[data-th]::before {
    content: attr(data-th);
    flex: 0 0 42%;
    max-width: 42%;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--bs-secondary-color);
    /* Une cellule .text-end (quantités) propage son alignement au ::before :
       le label de colonne, lui, reste toujours à gauche. */
    text-align: start;
  }
  .table.bf-table--stack tbody > tr > td.bf-stack-lead {
    display: block;
    padding-bottom: 0.35rem;
  }
  .table.bf-table--stack tbody > tr > td.bf-stack-actions {
    justify-content: flex-end;
    padding-top: 0.45rem;
  }
  .table.bf-table--stack tbody > tr > td[colspan] {
    display: block;
  }
  .table.bf-table--stack tbody > tr > td:empty {
    display: none;
  }
}

/* --- Forms (.bf-form / .bf-form-panel) --------------------------------------
   The BT form treatment (views/partials/bts/_bt_styles.pug), generalized so
   every CRUD form reads the same. Put .bf-form on the form (or its wrapper)
   to get the input styling; .bf-form-panel is the framed paper panel that
   replaces the old grey .bg-body-tertiary inline-edit wrappers. */
.bf-form-panel {
  border: 1px solid var(--bs-border-color);
  border-radius: 12px;
  background: var(--bs-paper-bg);
  padding: 1rem;
}
.bf-form .form-label {
  font-weight: 600;
}
html[data-bs-theme='light'] .bf-form .form-label {
  color: rgba(0, 0, 0, 0.6);
}
html[data-bs-theme='light'] .bf-form .form-control,
html[data-bs-theme='light'] .bf-form .form-select {
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid rgba(0, 0, 0, 0.08);
  color: rgba(0, 0, 0, 0.8);
  box-shadow: none;
  border-radius: 10px;
  transition:
    border-color 0.14s ease,
    box-shadow 0.14s ease,
    background 0.14s ease;
}
html[data-bs-theme='light'] .bf-form .form-control::placeholder {
  color: rgba(0, 0, 0, 0.35);
}
html[data-bs-theme='light'] .bf-form .form-control:hover,
html[data-bs-theme='light'] .bf-form .form-select:hover {
  border-color: rgba(var(--bs-primary-rgb), 0.22);
  background: rgba(255, 255, 255, 0.98);
}
html[data-bs-theme='light'] .bf-form .form-control:focus,
html[data-bs-theme='light'] .bf-form .form-select:focus {
  border-color: rgba(var(--bs-primary-rgb), 0.4);
  box-shadow: 0 0 0 0.12rem rgba(var(--bs-primary-rgb), 0.1);
  background: rgba(255, 255, 255, 1);
}
html[data-bs-theme='dark'] .bf-form .form-label {
  color: rgba(255, 255, 255, 0.72);
}
html[data-bs-theme='dark'] .bf-form .form-control,
html[data-bs-theme='dark'] .bf-form .form-select {
  background: rgba(15, 18, 30, 0.72);
  color: rgba(255, 255, 255, 0.88);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 10px;
  transition:
    border-color 0.14s ease,
    box-shadow 0.14s ease,
    background 0.14s ease;
}
html[data-bs-theme='dark'] .bf-form .form-control::placeholder {
  color: rgba(255, 255, 255, 0.38);
}
html[data-bs-theme='dark'] .bf-form .form-control:hover,
html[data-bs-theme='dark'] .bf-form .form-select:hover {
  border-color: rgba(var(--bs-primary-rgb), 0.45);
}
html[data-bs-theme='dark'] .bf-form .form-control:focus,
html[data-bs-theme='dark'] .bf-form .form-select:focus {
  border-color: rgba(var(--bs-primary-rgb), 0.55);
  box-shadow: 0 0 0 0.14rem rgba(var(--bs-primary-rgb), 0.2);
}
/* Keep joined input-groups seamless despite the 10px control radius. */
.bf-form .input-group > .form-control:not(:first-child),
.bf-form .input-group > .form-select:not(:first-child) {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}
.bf-form .input-group > .form-control:not(:last-child),
.bf-form .input-group > .form-select:not(:last-child) {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}
html[data-bs-theme='dark'] .bf-form .input-group-text {
  background: rgba(15, 18, 30, 0.72);
  color: rgba(255, 255, 255, 0.72);
  border-color: rgba(255, 255, 255, 0.14);
}

/* --- Dark-mode readability for brand-tinted elements ------------------------
   The deep brand red is too dim as text on dark tinted surfaces; use the
   theme's lifted emphasis tone (same fix as the active tab). */
[data-bs-theme='dark'] .badge.bg-label-primary {
  color: var(--bs-primary-text-emphasis) !important;
}
[data-bs-theme='dark'] .btn-label-primary {
  --bs-btn-color: var(--bs-primary-text-emphasis);
  --bs-btn-hover-color: var(--bs-primary-text-emphasis);
  --bs-btn-active-color: var(--bs-primary-text-emphasis);
}
[data-bs-theme='dark'] .crud-doc-link {
  color: var(--bs-primary-text-emphasis);
}
/* Vuexy routes <a> colors through --bs-custom-link-color (see _root.scss),
   bypassing $link-color-dark — lift it the same way. */
[data-bs-theme='dark'] {
  --bs-custom-link-color: var(--bs-primary-text-emphasis);
}

/* ==========================================================================
   Shared legacy classes (crud-*), moved out of products.pug / clients.pug so
   every CRUD page uses one copy. Borders and tints use theme variables, so
   the old html[data-bs-theme="dark"] overrides are no longer needed.
   ========================================================================== */
.crud-wrap {
  max-width: 1480px;
  margin: 0 auto;
}
.crud-muted {
  color: var(--bs-secondary-color);
}
.crud-filter-card .form-label,
.crud-form-section .form-label,
.crud-unified-form .form-label {
  font-weight: 600;
}
.crud-section-title {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--bs-secondary-color);
}
.crud-unified-form {
  border: 1px solid var(--bs-border-color);
  border-radius: 12px;
  padding: 1rem;
  background: var(--bs-paper-bg);
}
.crud-form-section-title {
  font-weight: 700;
  color: var(--bs-secondary-color);
  text-transform: uppercase;
  font-size: 0.76rem;
  letter-spacing: 0.05em;
}
/* Sub-sections inside forms mirror the BT form's pm-section tint. */
.crud-form-section {
  border: 1px solid rgba(var(--bs-primary-rgb), 0.12);
  border-radius: 10px;
  padding: 12px;
  background: rgba(var(--bs-primary-rgb), 0.025);
}
[data-bs-theme='dark'] .crud-form-section {
  background: rgba(255, 255, 255, 0.03);
  border-color: rgba(255, 255, 255, 0.08);
}
.crud-repeat-row {
  align-items: end;
}
.crud-section-card {
  overflow: visible;
}
.crud-section-card .table,
.crud-table-card .table {
  margin-bottom: 0;
}
.crud-table-card {
  overflow: hidden;
}
.crud-row-name {
  min-width: 230px;
}
.crud-product-name {
  min-width: 250px;
}
.crud-actions {
  white-space: nowrap;
}
.crud-doc-link {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-weight: 600;
  border: 0;
  background: transparent;
  color: var(--bs-primary);
  padding: 0;
}
.crud-doc-link:hover {
  color: var(--bs-primary-text-emphasis);
}
.crud-file-current {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  min-width: 0;
  color: var(--bs-secondary-color);
  font-size: 0.84rem;
}
.crud-file-current a {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.crud-product-thumb {
  width: 38px;
  height: 38px;
  object-fit: cover;
  border-radius: 8px;
  border: 1px solid var(--bs-border-color);
  background: rgba(var(--bs-base-color-rgb), 0.04);
}
.crud-product-image-current {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  min-width: 0;
}
.crud-product-image-current img {
  width: 54px;
  height: 54px;
  object-fit: cover;
  border-radius: 8px;
  border: 1px solid var(--bs-border-color);
}
.crud-profit-field[readonly] {
  background: rgba(var(--bs-base-color-rgb), 0.05);
  font-weight: 600;
}
.crud-action-menu .dropdown-item {
  display: flex;
  align-items: center;
  gap: 0.65rem;
}
.crud-action-menu .dropdown-item i {
  width: 1rem;
  opacity: 0.75;
}
.crud-action-menu .dropdown-menu {
  z-index: 1080;
}
.crud-empty {
  border: 1px dashed var(--bs-border-color);
  border-radius: 10px;
  padding: 18px;
  color: var(--bs-secondary-color);
}
.crud-stock-warning {
  color: var(--bs-warning);
  font-weight: 700;
}
@media (min-width: 992px) {
  .crud-section-card .table-responsive {
    overflow: visible;
  }
}

/* --- Stat / KPI cards (bf-stat) ------------------------------------------- */
.bf-stat-strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 12px;
}
.bf-stat {
  display: flex;
  flex-direction: column;
  gap: 2px;
  text-align: start;
  border: 1px solid var(--bs-border-color);
  border-radius: 12px;
  padding: 12px 14px;
  background: var(--bs-card-bg);
}
button.bf-stat,
a.bf-stat {
  cursor: pointer;
  color: inherit;
  text-decoration: none;
  transition:
    border-color 0.15s ease,
    box-shadow 0.15s ease;
}
button.bf-stat:hover,
button.bf-stat.is-active,
a.bf-stat:hover {
  color: inherit;
  border-color: rgba(var(--bs-primary-rgb), 0.4);
  box-shadow: 0 0 0 0.12rem rgba(var(--bs-primary-rgb), 0.08);
}
.bf-stat__label {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--bs-secondary-color);
}
.bf-stat__value {
  font-size: 1.375rem;
  font-weight: 600;
  line-height: 1.2;
  color: var(--bs-heading-color);
}
.bf-stat__hint {
  font-size: 0.78rem;
  color: var(--bs-secondary-color);
}
@media (max-width: 575.98px) {
  .bf-stat-strip {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* --- Toolbar text inputs (e.g. "# BT", "# Projet") ------------------------- */
.bf-toolbar > .form-control {
  width: auto;
  flex: 0 1 auto;
  min-width: 110px;
  max-width: 170px;
}
@media (max-width: 575.98px) {
  .bf-toolbar > .form-control {
    flex: 1 1 calc(50% - 0.25rem);
    max-width: none;
  }
}

/* --- Preset row (date shortcuts etc.) -------------------------------------- */
.bf-preset-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.375rem;
}
@media (max-width: 575.98px) {
  .bf-preset-row {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: 2px;
  }
  .bf-preset-row::-webkit-scrollbar {
    display: none;
  }
}

/* --- Sortable table headers (.bf-sort-btn) ---------------------------------
   A reset button that inherits the th typography; pages keep their own
   data-* sort attributes and JS. */
.bf-sort-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  border: 0;
  background: transparent;
  padding: 0;
  font: inherit;
  color: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  white-space: nowrap;
  cursor: pointer;
}
.bf-sort-btn:hover {
  color: var(--bs-heading-color);
}
.bf-sort-btn .bf-sort-icon {
  font-size: 0.85em;
  opacity: 0.5;
}
.bf-sort-btn.is-sorted,
.bf-sort-btn.is-active {
  color: var(--bs-primary);
}
.bf-sort-btn.is-sorted .bf-sort-icon,
.bf-sort-btn.is-active .bf-sort-icon {
  opacity: 1;
}
[data-bs-theme='dark'] .bf-sort-btn.is-sorted,
[data-bs-theme='dark'] .bf-sort-btn.is-active {
  color: var(--bs-primary-text-emphasis);
}

/* ==========================================================================
   Detail pages ("modèle fiche") — bf-back / bf-detail / bf-facts / bf-chart /
   bf-rank. First use: views/product_detail.pug (the reference detail page).
   Structure and usage rules: DESIGN.md → « Le modèle fiche (pages détail) ».
   Theme variables only, so light and dark are both covered.
   ========================================================================== */

/* --- Back link above the hero ------------------------------------------- */
.bf-back {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  color: var(--bs-secondary-color);
  text-decoration: none;
  font-size: 0.875rem;
  transition: color 0.15s ease;
}
.bf-back:hover {
  color: var(--bs-primary);
}
[data-bs-theme='dark'] .bf-back:hover {
  color: var(--bs-primary-text-emphasis);
}

/* --- Hero: media + identity line + fact grid, one card ------------------- */
.bf-detail-hero {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 1.25rem;
  align-items: flex-start;
}
.bf-detail-media {
  width: 96px;
  height: 96px;
  object-fit: cover;
  border-radius: 12px;
  border: 1px solid var(--bs-border-color);
  background: rgba(var(--bs-base-color-rgb), 0.04);
  flex: 0 0 auto;
}
.bf-detail-hero__body {
  flex: 1 1 320px;
  min-width: 0;
}

/* Key/value fact grid (unit, supplier, prices, inventory…). */
.bf-facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 0.75rem 1rem;
}
.bf-fact__k {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--bs-secondary-color);
}
.bf-fact__v {
  font-weight: 600;
  color: var(--bs-heading-color);
  min-width: 0;
  overflow-wrap: anywhere;
}

/* --- Primary stat: THE number of the page (one per view) ----------------- */
.bf-stat--primary {
  border-color: rgba(var(--bs-primary-rgb), 0.35);
  background: linear-gradient(
    135deg,
    rgba(var(--bs-primary-rgb), 0.06),
    rgba(var(--bs-primary-rgb), 0.015)
  );
}
.bf-stat--primary .bf-stat__value {
  color: var(--bs-primary);
  font-size: 1.625rem;
}
[data-bs-theme='dark'] .bf-stat--primary .bf-stat__value {
  color: var(--bs-primary-text-emphasis);
}

/* --- Thin meter inside a stat card (e.g. approved share) ----------------- */
.bf-meter {
  height: 4px;
  border-radius: 2px;
  margin: 0.4rem 0 0.15rem;
  background: rgba(var(--bs-base-color-rgb), 0.1);
  overflow: hidden;
}
.bf-meter__fill {
  height: 100%;
  border-radius: inherit;
  background: var(--bs-success);
}

/* --- Pure-CSS monthly bar chart (12 equal columns, no JS, no lib) --------- */
.bf-chart {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 6px;
  align-items: end;
}
.bf-chart-col {
  min-width: 0;
  text-align: center;
  border-radius: 8px 8px 0 0;
  transition: background-color 0.15s ease;
}
.bf-chart-col:hover {
  background-color: rgba(var(--bs-primary-rgb), 0.05);
}
.bf-chart-track {
  height: 140px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  border-bottom: 1px solid var(--bs-border-color);
}
.bf-chart-bar {
  width: 70%;
  max-width: 34px;
  min-height: 2px;
  border-radius: 4px 4px 0 0;
  background: linear-gradient(
    180deg,
    rgba(var(--bs-primary-rgb), 0.92),
    rgba(var(--bs-primary-rgb), 0.55)
  );
  transition: filter 0.15s ease;
}
.bf-chart-col:hover .bf-chart-bar {
  filter: brightness(1.08);
}
.bf-chart-bar--empty {
  background: transparent;
  min-height: 0;
}
.bf-chart-qty {
  font-size: 0.68rem;
  font-weight: 700;
  color: var(--bs-heading-color);
  height: 1.1rem;
  overflow: hidden;
  font-variant-numeric: tabular-nums;
}
.bf-chart-month {
  font-size: 0.68rem;
  color: var(--bs-secondary-color);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding-bottom: 2px;
}
/* Current month: solid brand bar + emphasized label. */
.bf-chart-col.is-current .bf-chart-bar {
  background: var(--bs-primary);
}
.bf-chart-col.is-current .bf-chart-month {
  color: var(--bs-primary);
  font-weight: 700;
}
[data-bs-theme='dark'] .bf-chart-col.is-current .bf-chart-month {
  color: var(--bs-primary-text-emphasis);
}
@media (max-width: 575.98px) {
  .bf-chart-track {
    height: 90px;
  }
  .bf-chart-qty {
    display: none;
  }
}

/* --- Ranked breakdown list (label + qty + share bar + meta line) ---------
   Flush inside a card, under the header: wrap in a .border-top container.
   The bar shows the share of the top item, not of the total. */
.bf-rank {
  display: flex;
  flex-direction: column;
}
.bf-rank-item {
  display: block;
  padding: 0.7rem 1.5rem;
}
.bf-rank-item + .bf-rank-item {
  border-top: 1px solid var(--bs-border-color);
}
.bf-rank__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
}
.bf-rank__label {
  font-weight: 600;
  color: var(--bs-heading-color);
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.bf-rank__qty {
  font-weight: 600;
  color: var(--bs-heading-color);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.bf-rank__bar {
  height: 4px;
  border-radius: 2px;
  margin: 0.35rem 0 0.25rem;
  background: rgba(var(--bs-base-color-rgb), 0.08);
  overflow: hidden;
}
.bf-rank__bar-fill {
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(
    90deg,
    rgba(var(--bs-primary-rgb), 0.85),
    rgba(var(--bs-primary-rgb), 0.55)
  );
}
.bf-rank__meta {
  font-size: 0.78rem;
  color: var(--bs-secondary-color);
}

/* --- Quiet link: inherits the row color, brand on hover ------------------
   For lead cells that navigate to a detail page. */
.bf-link-quiet {
  color: inherit;
  text-decoration: none;
  transition: color 0.15s ease;
}
.bf-link-quiet:hover {
  color: var(--bs-primary);
}
[data-bs-theme='dark'] .bf-link-quiet:hover {
  color: var(--bs-primary-text-emphasis);
}