/* Copyright 2025-2026 Renofy Ltd. All rights reserved. */
/* ===================================
   Skills Verification List Component
   Used by: users/partials/skills_verification_list.html
   =================================== */

/* Skills List */
.skills-list {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin-top: 1.5rem;
}

.skill-item {
  position: relative;
  padding: 1rem;
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
}

.skill-name {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
  margin-bottom: 1rem;
}

.skill-badge--regulated {
  position: absolute;
  top: 1rem;
  right: 1rem;
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  color: var(--color-warning);
}

.skill-statuses {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.skill-status {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex: 1;
}

.status-label {
  font-size: var(--font-size-lg);
  color: var(--color-text-secondary);
  min-width: 7rem;
}

/* Verification Badges */
.verif-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.25rem 0.625rem;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  border-radius: var(--radius-base);
  text-transform: capitalize;
  white-space: nowrap;
}

.verif-badge--approved {
  background: var(--color-success-bg);
  color: var(--color-success-text);
}

.verif-badge--pending {
  background: var(--color-info-bg);
  color: var(--color-info-text);
}

.verif-badge--rejected {
  background: var(--color-danger-bg);
  color: var(--color-danger-text);
}

.verif-badge--not_submitted {
  background: var(--color-bg-surface);
  color: var(--color-text-mid);
}

.verif-badge--not-required {
  background: transparent;
  color: var(--color-text-secondary);
  font-style: italic;
  border: none;
  opacity: 0.8;
}

.verif-badge svg {
  flex-shrink: 0;
}

/* Empty State */
.empty-state {
  padding: 2rem;
  text-align: center;
  color: var(--color-text-mid);
}

.empty-state p {
  margin: 0;
}

/* ===================================
   Media Queries (Desktop)
   =================================== */

@media (min-width: 821px) {
  /* Skills */
  .skill-item {
    padding: 1.25rem;
  }

  .skill-badge--regulated {
    font-size: var(--font-size-xs);
  }

  .skill-statuses {
    flex-direction: row;
    gap: 2rem;
  }

  .status-label {
    font-size: var(--font-size-base);
  }
}