/* ================================================================
   <bm-duration> — see DurationBadge.js for the full component doc.
   ================================================================ */

.bm-duration {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border-radius: 8px;
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
  line-height: 1.2;
}

.bm-duration-icon {
  font-size: 16px !important;
  width: 16px !important;
  height: 16px !important;
  min-width: 16px !important;
  min-height: 16px !important;
  margin: 0 !important;
}

.bm-duration-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.bm-duration-value {
  font-size: 13px;
  font-weight: 800;
  white-space: nowrap;
}

.bm-duration-label {
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .4px;
  opacity: .75;
  white-space: nowrap;
}

/* ── Color variants ───────────────────────────────────────────── */

.bm-duration--neutral { background: #F7F8FC; color: #4B5878; }
.bm-duration--neutral .bm-duration-icon { color: #8E97B4; }

.bm-duration--success { background: rgba(22,163,74,0.10); color: #16A34A; }
.bm-duration--success .bm-duration-icon { color: #16A34A; }

.bm-duration--warning { background: rgba(217,119,6,0.10); color: #D97706; }
.bm-duration--warning .bm-duration-icon { color: #D97706; }

.bm-duration--danger { background: rgba(220,38,38,0.10); color: #DC2626; }
.bm-duration--danger .bm-duration-icon { color: #DC2626; }

/* ── Compact — tight table cells: no padding/background/label, just
   icon + value inline. ─────────────────────────────────────────── */

.bm-duration--compact {
  padding: 0;
  background: none !important;
  border-radius: 0;
  gap: 4px;
}
.bm-duration--compact .bm-duration-icon { font-size: 13px !important; width: 13px !important; height: 13px !important; min-width: 13px !important; min-height: 13px !important; }
.bm-duration--compact .bm-duration-value { font-size: 11.5px; font-weight: 700; }