/* =================================================================
   Status / category / SLA-risk badges
   ================================================================= */

.badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 10px;
  font-size: var(--fs-12);
  font-weight: 600;
  border-radius: var(--r-pill);
  letter-spacing: 0.02em;
  white-space: nowrap;
  background: var(--warm-200);
  color: var(--warm-800);
  border: 1px solid var(--warm-300);
}
.badge::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.85;
}

.badge--gold    { background: var(--champagne-50);  color: var(--champagne-600); border-color: var(--champagne-200); }
.badge--navy    { background: var(--lavender-50);   color: var(--mauve-800);      border-color: var(--lavender-200); }
.badge--success { background: var(--success-50);     color: var(--success-700);    border-color: #bbf7d0; }
.badge--warning { background: var(--warning-50);     color: var(--warning-700);    border-color: #fde68a; }
.badge--danger  { background: var(--danger-50);      color: var(--danger-700);     border-color: #fecaca; }
.badge--info    { background: var(--info-50);        color: var(--info-700);       border-color: #bfdbfe; }
.badge--muted   { background: var(--warm-100);       color: var(--text-muted);     border-color: var(--warm-200); }

/* SLA risk badges */
.sla-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px;
  border-radius: var(--r-pill);
  font-size: var(--fs-12);
  font-weight: 700;
  letter-spacing: 0.03em;
  border: 1px solid transparent;
}
.sla-badge--green  { background: var(--success-50);   color: var(--success-700); border-color: #bbf7d0; }
.sla-badge--yellow { background: var(--warning-50);   color: var(--warning-700); border-color: #fde68a; }
.sla-badge--red    { background: var(--danger-50);    color: var(--danger-700);  border-color: #fecaca; }
.sla-badge--breach {
  background: var(--danger-700);
  color: var(--text-inverse);
  border-color: var(--danger-700);
  animation: sla-pulse 2.4s var(--ease-standard) infinite;
}

@keyframes sla-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(185, 28, 28, 0.4); }
  50%      { box-shadow: 0 0 0 6px rgba(185, 28, 28, 0); }
}

/* Role chip */
.role-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px;
  font-size: var(--fs-12);
  font-weight: 600;
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  background: var(--mauve-700);
  color: var(--text-inverse);
  border-radius: var(--r-sm);
}

/* =================================================================
   Release-status pill — used in the AICS / OSCA / PWD / Solo Parent
   transactions table to flag whether funds have actually moved.
   Each tone has a meaning:
     released      = green   (paid out, IDs issued, food packs handed)
     pending_funds = amber   (approved, waiting for cash — "wala pa kadawat")
     lacking_docs  = red     (paused, missing required papers)
     cancelled    = muted   (withdrawn / denied — ignored in reports)
   ================================================================= */
.status-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px;
  border-radius: var(--r-pill);
  font-size: var(--fs-12);
  font-weight: 700;
  letter-spacing: 0.02em;
  white-space: nowrap;
  border: 1px solid transparent;
}
.status-pill::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
}
.status-pill--released      { background: var(--success-50); color: var(--success-700); border-color: #bbf7d0; }
.status-pill--pending_funds { background: var(--warning-50); color: var(--warning-700); border-color: #fde68a; }
.status-pill--lacking_docs  { background: var(--danger-50);  color: var(--danger-700);  border-color: #fecaca; }
.status-pill--cancelled     { background: var(--warm-100);   color: var(--text-muted);  border-color: var(--warm-200); }
.status-pill--cancelled::before { opacity: 0.5; }

/* When a row is flagged pending or lacking, draw a thin left border so the
   eye picks it out in the table even before reading the badge. Subtle, not
   loud — the badge does the loud work. */
tr[data-status="pending_funds"] td:first-child { box-shadow: inset 3px 0 0 var(--warning-500, #f59e0b); }
tr[data-status="lacking_docs"]  td:first-child { box-shadow: inset 3px 0 0 var(--danger-500,  #dc2626); }