/* ==========================================================================
   Marketing Targets / KPI Page
   ========================================================================== */

.targets-container {
  max-width: var(--content-max-width);
}

.targets-card {
  background: var(--color-surface);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-card);
  overflow: hidden;
}

.targets-table-wrapper {
  overflow-x: auto;
}

.targets-table {
  width: 100%;
  border-collapse: collapse;
}

.targets-table th {
  text-align: left;
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--color-border);
}

.targets-table td {
  padding: var(--space-3) var(--space-4);
  font-size: var(--font-size-sm);
  color: var(--color-text-primary);
  border-bottom: 1px solid var(--color-border-light);
}

.targets-metric-name strong {
  font-weight: var(--font-weight-medium);
}

.targets-note {
  cursor: help;
  margin-left: var(--space-1);
}

.targets-value {
  font-variant-numeric: tabular-nums;
  font-weight: var(--font-weight-medium);
}

.targets-progress-cell {
  min-width: 140px;
}

.targets-progress-bar {
  height: 6px;
  background: var(--color-border-light);
  border-radius: var(--radius-full);
  margin-bottom: var(--space-1);
}

.targets-progress-fill {
  height: 100%;
  border-radius: var(--radius-full);
  transition: width var(--transition-slow);
}

.targets-progress--on_track { background: var(--color-green); }
.targets-progress--close { background: var(--color-blue); }
.targets-progress--behind { background: var(--color-orange); }
.targets-progress--at_risk { background: var(--color-red); }

.targets-progress-label {
  font-size: var(--font-size-xs);
  color: var(--color-text-secondary);
}

.targets-status-badge {
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  padding: 2px var(--space-2);
  border-radius: var(--radius-full);
}

.targets-status--on_track { background: var(--color-green-light); color: var(--color-green); }
.targets-status--close { background: var(--color-info-bg); color: var(--color-blue); }
.targets-status--behind { background: var(--color-orange-light); color: var(--color-orange); }
.targets-status--at_risk { background: var(--color-red-light); color: var(--color-red); }

.targets-type-badge {
  font-size: var(--font-size-xs);
  padding: 2px var(--space-2);
  border-radius: var(--radius-full);
}

.targets-type--auto { background: var(--color-border-light); color: var(--color-text-secondary); }
.targets-type--manual { background: var(--color-purple-light); color: var(--color-purple); }

.targets-set-by {
  font-size: var(--font-size-xs);
  color: var(--color-text-tertiary);
  display: block;
  margin-top: 2px;
}

.targets-actions {
  display: flex;
  gap: var(--space-2);
  align-items: center;
}

.targets-edit-btn,
.targets-reset-btn {
  font-size: var(--font-size-xs);
  color: var(--color-blue);
  background: none;
  border: none;
  cursor: pointer;
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-sm);
}

.targets-edit-btn:hover,
.targets-reset-btn:hover {
  background: var(--color-info-bg);
}

.targets-reset-btn {
  color: var(--color-text-secondary);
}

/* Edit row */
.targets-edit-row td {
  background: var(--color-background);
  padding: var(--space-4);
}

.targets-edit-form {
  display: block;
}

.targets-edit-fields {
  display: flex;
  gap: var(--space-4);
  align-items: flex-end;
}

.targets-edit-field {
  flex: 1;
}

.targets-edit-field .form-label {
  display: block;
  font-size: var(--font-size-xs);
  color: var(--color-text-secondary);
  margin-bottom: var(--space-1);
}

.targets-edit-actions {
  display: flex;
  gap: var(--space-2);
  flex-shrink: 0;
}