/**
 * Approval Status Badges
 *
 * Visual badges for agency approval status matching AGY-00001 reference ID style
 * Color scheme aligned with Agency Status Key from agencies-inline.css:
 * - Approved: #28a745 (green)
 * - Pending Approval: #ffcf40 (yellow)
 * - Not Listed: #ff4d4f (red)
 * - Direct Sponsor: #4a90e2 (blue)
 */

/* Base Approval Status Badge */
.approval-status-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 1px 22px;
  background: rgba(0, 0, 0, 0.85);
  font-size: 0.7em;
  font-weight: 600;
  font-family: 'Courier New', monospace;
  border-radius: 4px;
  border: 1.5px solid;
  cursor: default;
  transition: all 0.2s ease;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  white-space: nowrap;
}

/* Hover Effects */
.approval-status-badge:hover {
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

/* Status Type: Approved */
.approval-status-badge--approved {
  color: #ffffff;
  border-color: #28a745;
  background: #28a745;
}

.approval-status-badge--approved:hover {
  background: #2ecc54;
  box-shadow: 0 2px 12px rgba(40, 167, 69, 0.5);
}

/* Status Type: Pending Approval */
.approval-status-badge--pending {
  color: #ffcf40;
  border-color: #ffcf40;
  background: rgba(255, 207, 64, 0.1);
}

.approval-status-badge--pending:hover {
  background: rgba(255, 207, 64, 0.15);
  box-shadow: 0 2px 12px rgba(255, 207, 64, 0.3);
}

/* Status Type: Not Listed */
.approval-status-badge--not-listed {
  color: #ff4d4f;
  border-color: #ff4d4f;
  background: rgba(255, 77, 79, 0.1);
}

.approval-status-badge--not-listed:hover {
  background: rgba(255, 77, 79, 0.15);
  box-shadow: 0 2px 12px rgba(255, 77, 79, 0.3);
}

/* Status Type: Direct Sponsor */
.approval-status-badge--direct-sponsor {
  color: #4a90e2;
  border-color: #4a90e2;
  background: rgba(74, 144, 226, 0.1);
}

.approval-status-badge--direct-sponsor:hover {
  background: rgba(74, 144, 226, 0.15);
  box-shadow: 0 2px 12px rgba(74, 144, 226, 0.3);
}

/* Optional: Status Icon (circle bullet like the legend) */
.approval-status-badge__icon {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  display: inline-block;
}

.approval-status-badge--approved .approval-status-badge__icon {
  background: #ffffff;
}

.approval-status-badge--pending .approval-status-badge__icon {
  background: #ffcf40;
}

.approval-status-badge--not-listed .approval-status-badge__icon {
  background: #ff4d4f;
}

.approval-status-badge--direct-sponsor .approval-status-badge__icon {
  background: #4a90e2;
}

/* Responsive Design */
@media (max-width: 768px) {
  .approval-status-badge {
    font-size: 0.65em;
    padding: 3px 8px;
    gap: 4px;
  }

  .approval-status-badge__icon {
    width: 6px;
    height: 6px;
  }
}

@media (max-width: 480px) {
  .approval-status-badge {
    font-size: 0.6em;
    padding: 2px 6px;
  }
}

/* ISSUE-015 FIX: Mobile badge positioning - prevent overlap with ref-id badge */
@media (max-width: 480px) {
  /* Stack approval badge above the ref-id badge */
  .approval-badge-container {
    top: 35px !important; /* Move down to avoid overlap with ref-id */
    right: 6px !important; /* Align with mobile ref-id positioning */
  }
}

/* ISSUE-015 FIX: Very small screens - further adjustments */
@media (max-width: 390px) {
  .approval-badge-container {
    top: 38px !important;
    right: 4px !important;
  }

  .approval-status-badge {
    font-size: 0.55em;
    padding: 2px 5px;
    letter-spacing: 0.3px;
  }
}

/* Agency Card Header - Position context for badges */
.agency-card-header {
  position: relative !important;
}

/* Badge Container Positioning - Vertically stacked below ref-id badge */
.approval-badge-container {
  /* CSS Custom Properties for easy per-page adjustment */
  --approval-badge-top: 47px;  /* Positioned below ref-id badge to avoid overlap */
  --approval-badge-right: -9px;

  position: absolute !important;
  top: var(--approval-badge-top) !important;
  right: var(--approval-badge-right) !important;
  z-index: 98 !important; /* Below ref-id badge (z-index: 99) */
  pointer-events: none !important; /* Allow clicks to pass through container to header */
  margin: 0 !important; /* Remove any flex margins */
  display: inline-block !important;
}

/* Badge itself should be clickable (for copy or interaction) */
.approval-badge-container .approval-status-badge {
  pointer-events: auto;
}

/* Integration with Agency Cards */
.agency-card .approval-status-badge {
  margin-right: 8px;
  vertical-align: middle;
}

/* Integration with Reference ID Badges */
.ref-id-badge + .approval-status-badge,
.approval-status-badge + .ref-id-badge {
  margin-left: 8px;
}