/* ================================================================
   <bm-date> — see DateBadge.js for the full component doc. Same shape
   and tokens as <bm-duration> (common/components/duration-badge) —
   the two components are meant to sit side by side, so they share one
   visual language for "duration" vs "absolute date" fields.
   ================================================================ */

.bm-date {
  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-date-icon {
  font-size: 16px !important;
  width: 16px !important;
  height: 16px !important;
  min-width: 16px !important;
  min-height: 16px !important;
  margin: 0 !important;
}

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

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

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

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

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

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

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

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

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

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