/* Rafa360 design tokens — single source of truth for recurring UI patterns.
   Load once in base.html. Never duplicate these inline in templates. */

/* ── Status badges ─────────────────────────────────────────────────────── */

/* Active / Available / Delivered / Fulfilled / Approved */
.badge-active {
  background: var(--rafa360-success-light);
  color: #217A5C;
  font-size: 11px;
  padding: 2px 8px;
  border-radius: 20px;
  font-weight: 500;
}

/* Inactive / Cancelled / Closed / Decommissioned */
.badge-inactive {
  background: var(--rafa360-soft-gray);
  color: var(--rafa360-text-muted);
  font-size: 11px;
  padding: 2px 8px;
  border-radius: 20px;
  font-weight: 500;
}

/* Rejected / Failed / Overdue / SLA Breach */
.badge-danger {
  background: var(--rafa360-critical-light);
  color: #A83E39;
  font-size: 11px;
  padding: 2px 8px;
  border-radius: 20px;
  font-weight: 500;
}

/* Pending / At Risk / Reserved / Custom Terms / Approaching SLA */
.badge-warning {
  background: var(--rafa360-warning-light);
  color: #956B00;
  font-size: 11px;
  padding: 2px 8px;
  border-radius: 20px;
  font-weight: 500;
}

/* Draft / Not started */
.badge-draft {
  background: var(--rafa360-soft-gray);
  color: var(--rafa360-text-muted);
  font-size: 11px;
  padding: 2px 8px;
  border-radius: 20px;
  font-weight: 500;
}

/* In Progress / Confirmed / Processing / Scheduled / Assigned */
.badge-info {
  background: var(--rafa360-info-light);
  color: #315AB4;
  font-size: 11px;
  padding: 2px 8px;
  border-radius: 20px;
  font-weight: 500;
}

/* ── Table headers ──────────────────────────────────────────────────────── */
.th-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--rafa360-slate);
  font-weight: 500;
  padding: 12px 16px;
  background: var(--rafa360-soft-gray);
}

.td-cell {
  padding: 12px 16px;
  font-size: 13px;
  color: var(--rafa360-text);
}

/* ── Detail page label / value pairs ────────────────────────────────────── */
.detail-label {
  font-size: 11px;
  color: var(--rafa360-text-muted);
  text-transform: uppercase;
  letter-spacing: .04em;
  margin-bottom: 4px;
}

.detail-value {
  font-size: 13px;
  font-weight: 500;
  color: var(--rafa360-text);
}

/* ── Section headers (inside cards) ────────────────────────────────────── */
.section-header {
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--rafa360-text-muted);
  font-weight: 500;
  margin-bottom: 12px;
}

/* ── Empty state ────────────────────────────────────────────────────────── */
.empty-state {
  padding: 32px 16px;
  text-align: center;
  color: var(--rafa360-text-muted);
  font-size: 13px;
}

/* ── Cards ──────────────────────────────────────────────────────────────── */
.card {
  border-color: var(--rafa360-border) !important;
}

/* ── Table row hover ────────────────────────────────────────────────────── */
.table-hover tbody tr:hover {
  background: var(--rafa360-background) !important;
}