/* Shared credit meter — ONE presentation of agent credits everywhere.
 *
 * Consumed by three surfaces that must read identically:
 *   - dashboard home tab      templates/partials/credit_meter.html
 *   - account page            templates/partials/credit_meter.html
 *   - organizations portal    dashboard-react/organizations/src/OrganizationsApp.tsx
 *
 * Linked from base.html so the React portal gets it too. Keep the class names
 * in sync with the Jinja macro and the .tsx — they render the same markup on
 * purpose. Do not fork these styles into a page-local <style> block.
 */

.credit-meter {
  padding: 1.1rem 1.2rem;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  background: #f8fafc;
}

.credit-meter-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.4rem;
}

.credit-meter-label {
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #64748b;
}

.credit-meter-action {
  font-size: 0.8rem;
  font-weight: 500;
  color: #2563eb;
  text-decoration: none;
  white-space: nowrap;
}

.credit-meter-action:hover {
  text-decoration: underline;
}

.credit-meter-row {
  display: flex;
  align-items: baseline;
  gap: 0.4rem;
}

.credit-meter-value {
  font-size: 1.75rem;
  font-weight: 700;
  color: #1e293b;
  line-height: 1;
}

.credit-meter-total {
  font-size: 0.9rem;
  color: #94a3b8;
}

.credit-meter-track {
  height: 8px;
  border-radius: 999px;
  overflow: hidden;
  background: #e7eef8;
  margin-top: 0.8rem;
}

/* Fill width is % of the limit USED, so the bar grows toward exhaustion.
 * Deliberately no alarm colours: it darkens as it fills — blue gradient under
 * 50%, solid blue past 50%, near-black past 80%. The 90%-usage email is the
 * warning channel; the bar just reports. */
.credit-meter-fill {
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, #1755d8 0%, #3f83f8 100%);
  transition: width 0.3s ease;
}

.credit-meter-fill--mid {
  background: #1755d8;
}

.credit-meter-fill--high {
  background: #334155;
}

.credit-meter-meta {
  margin-top: 0.6rem;
  font-size: 0.85rem;
  color: #64748b;
}