/* ============================================
   Status Badges and Indicators
   JLR Portal - Unified Badge Styling
   ============================================ */

:root {
  --badge-submitted-bg: #d4edda;
  --badge-submitted-text: #155724;
  --badge-submitted-border: #c3e6cb;

  --badge-outstanding-bg: #f8d7da;
  --badge-outstanding-text: #721c24;
  --badge-outstanding-border: #f5c6cb;

  --badge-pending-bg: #fff3cd;
  --badge-pending-text: #856404;
  --badge-pending-border: #ffeaa7;

  --badge-approved-bg: #d4edda;
  --badge-approved-text: #155724;
  --badge-approved-border: #c3e6cb;

  --badge-decline-bg: #f8d7da;
  --badge-decline-text: #721c24;
  --badge-decline-border: #f5c6cb;
  
}

/* ============================================
   Base Badge Styles
   ============================================ */

.badge {
  display: inline-block;
  padding: 6px 12px;
  font-size: 12px;
  font-weight: 600;
  line-height: 1;
  text-align: center;
  white-space: nowrap;
  vertical-align: baseline;
  border-radius: 4px;
  transition: background-color 0.15s ease, color 0.15s ease;
}

/* ============================================
   KPI Badge Styles
   ============================================ */

.kpi-badge {
  display: inline-block;
  padding: 6px 12px;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.4;
  text-align: center;
  white-space: nowrap;
  vertical-align: baseline;
  border-radius: 4px;
  font-family: inherit;
  transition: all 0.15s ease;
}

.kpi-badge-submitted {
  background-color: var(--badge-submitted-bg);
  color: var(--badge-submitted-text);
  border: 1px solid var(--badge-submitted-border);
}

.kpi-badge-submitted:hover {
  background-color: #c3e6cb;
  color: var(--badge-submitted-text);
}

.kpi-badge-outstanding {
  background-color: var(--badge-outstanding-bg);
  color: var(--badge-outstanding-text);
  border: 1px solid var(--badge-outstanding-border);
}

.kpi-badge-outstanding:hover {
  background-color: #f5c6cb;
  color: var(--badge-outstanding-text);
}

/* ============================================
   MOD Badge Styles
   ============================================ */

.mod-badge-submitted {
  background-color: var(--badge-submitted-bg);
  color: var(--badge-submitted-text);
  border: 1px solid var(--badge-submitted-border);
  padding: 6px 12px;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 600;
}

.mod-badge-outstanding {
  background-color: var(--badge-outstanding-bg);
  color: var(--badge-outstanding-text);
  border: 1px solid var(--badge-outstanding-border);
  padding: 6px 12px;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 600;
}

/* ============================================
   Standard Bootstrap Badge Variants
   ============================================ */

.badge-success {
  background-color: var(--badge-approved-bg) !important;
  color: var(--badge-approved-text) !important;
  border: 1px solid var(--badge-approved-border);
}

.badge-success:hover {
  background-color: #c3e6cb !important;
  color: var(--badge-approved-text) !important;
}

.badge-warning {
  background-color: var(--badge-pending-bg) !important;
  color: var(--badge-pending-text) !important;
  border: 1px solid var(--badge-pending-border);
}

.badge-warning:hover {
  background-color: #ffeaa7 !important;
  color: var(--badge-pending-text) !important;
}

.badge-danger {
  background-color: var(--badge-decline-bg) !important;
  color: var(--badge-decline-text) !important;
  border: 1px solid var(--badge-decline-border);
}

.badge-danger:hover {
  background-color: #f5c6cb !important;
  color: var(--badge-decline-text) !important;
}

/* ============================================
   Status Indicator Styles (for table cells)
   ============================================ */

.status-submitted,
.status-approved {
  background-color: var(--badge-submitted-bg);
  color: var(--badge-submitted-text);
  padding: 4px 8px;
  border-radius: 3px;
  display: inline-block;
  font-size: 12px;
  font-weight: 600;
}

.status-outstanding,
.status-decline {
  background-color: var(--badge-outstanding-bg);
  color: var(--badge-outstanding-text);
  padding: 4px 8px;
  border-radius: 3px;
  display: inline-block;
  font-size: 12px;
  font-weight: 600;
}

.status-pending {
  background-color: var(--badge-pending-bg);
  color: var(--badge-pending-text);
  padding: 4px 8px;
  border-radius: 3px;
  display: inline-block;
  font-size: 12px;
  font-weight: 600;
}