/**
 * Mobility Trailblazers v4 CSS Framework
 * Specific Components
 * Version: 4.0.0
 */

/* Candidate Card Component */
.mt-candidate-card {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
}

.mt-candidate-card__image-wrapper {
  position: relative;
  width: 100%;
  padding-top: 75%; /* 4:3 aspect ratio */
  overflow: hidden;
  background: var(--mt-color-gray-light);
}

.mt-candidate-card__image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* Image positioning utilities */
.mt-img-cover { object-fit: cover; }

.mt-img-contain { 
  object-fit: contain; 
  background: var(--mt-color-white);
}
.mt-img-pos-top { object-position: 50% 10%; }
.mt-img-pos-center { object-position: center; }
.mt-img-pos-bottom { object-position: 50% 90%; }

.mt-candidate-card__content {
  display: flex;
  flex: 1;
  flex-direction: column;
  padding: var(--mt-space);
}

.mt-candidate-card__name {
  margin-bottom: var(--mt-space-xs);
  font-size: var(--mt-font-size-large);
  font-weight: 600;
  color: var(--mt-text);
}

.mt-candidate-card__role {
  margin-bottom: var(--mt-space-xs);
  font-size: var(--mt-font-size-small);
  color: var(--mt-color-gray-dark);
}

.mt-candidate-card__org {
  margin-bottom: var(--mt-space-md);
  font-size: var(--mt-font-size-small);
  color: var(--mt-color-primary);
}

.mt-candidate-card__category {
  margin-top: auto;
  padding-top: var(--mt-space-sm);
}

/* Login/Auth Card */
.mt-login {
  max-width: 460px;
  margin: 30px auto;
  padding: var(--mt-space-lg) var(--mt-space);
  background: var(--mt-color-bg);
  border: 2px solid var(--mt-color-primary-light);
  border-radius: var(--mt-radius);
  box-shadow: var(--mt-shadow);
}

.mt-login h3 {
  margin: 0 0 var(--mt-space-md);
  font-family: var(--mt-font-headings);
  color: var(--mt-text);
}

.mt-login .form-group {
  margin-bottom: var(--mt-space);
}

.mt-login label {
  display: block;
  margin-bottom: var(--mt-space-xs);
  font-weight: 500;
  color: var(--mt-text);
}

.mt-login input[type="text"],
.mt-login input[type="email"],
.mt-login input[type="password"],
.mt-login .input,
.mt-login #user_login,
.mt-login #user_pass {
  width: 100% !important; /* Full width - override size attribute */
  max-width: 100% !important;
  padding: 10px 12px;
  background: var(--mt-color-white);
  border: var(--mt-border-width) solid var(--mt-border);
  border-radius: var(--mt-radius-sm);
  transition: var(--mt-transition-fast);
  box-sizing: border-box; /* Include padding and border in width */
}

.mt-login input:focus {
  border-color: var(--mt-color-primary);
  outline: none;
  box-shadow: 0 0 0 3px rgb(38 166 154 / 10%);
}

.mt-login .button,
.mt-login button[type="submit"] {
  width: 100%;
  padding: 10px 16px;
  font-weight: 500;
  color: var(--mt-color-white);
  background: var(--mt-color-primary-dark);
  border: none;
  border-radius: var(--mt-radius-sm);
  transition: var(--mt-transition-fast);
  cursor: pointer;
}

.mt-login .button:hover,
.mt-login button[type="submit"]:hover {
  background: var(--mt-color-primary);
}

/* Login fields stay full width since parent container is already constrained */

/* Parent .mt-login has max-width: 380px, so inputs can use full width */

/* Evaluation Form Components */
.mt-evaluation-form {
  padding: var(--mt-space-lg);
  background: var(--mt-color-white);
  border-radius: var(--mt-radius);
  box-shadow: var(--mt-shadow);
}

.mt-criterion {
  margin-bottom: var(--mt-space-lg);
  padding-bottom: var(--mt-space-lg);
  border-bottom: var(--mt-border-width) solid var(--mt-border);
}

.mt-criterion:last-child {
  border-bottom: none;
}

.mt-criterion__header {
  margin-bottom: var(--mt-space-md);
}

.mt-criterion__title {
  margin-bottom: var(--mt-space-xs);
  font-size: var(--mt-font-size-large);
  font-weight: 600;
  color: var(--mt-text);
}

.mt-criterion__description {
  font-size: var(--mt-font-size-small);
  color: var(--mt-color-gray-dark);
}

/* Rating Buttons */
.mt-rating-group {
  display: flex;
  gap: var(--mt-space-sm);
  flex-wrap: wrap;
}

.mt-rating-btn {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 40px;
  height: 40px;
  font-weight: 600;
  color: var(--mt-text);
  background: var(--mt-color-white);
  border: 2px solid var(--mt-border);
  border-radius: var(--mt-radius-sm);
  transition: var(--mt-transition-fast);
  cursor: pointer;
}

.mt-rating-btn:hover {
  background: rgb(38 166 154 / 10%);
  border-color: var(--mt-color-primary);
}

.mt-rating-btn.selected,
.mt-rating-btn[data-selected="true"] {
  color: var(--mt-color-white);
  background: var(--mt-color-primary);
  border-color: var(--mt-color-primary);
}

/* Stats Component */
.mt-stat-card {
  padding: var(--mt-space-lg);
  text-align: center;
}

.mt-stat-number {
  margin-bottom: var(--mt-space-sm);
  font-size: 2.5rem;
  font-weight: 700;
  line-height: 1;
  color: var(--mt-color-primary);
}

.mt-stat-label {
  font-size: var(--mt-font-size-small);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--mt-color-gray-dark);
}

/* Dashboard Header */
.mt-dashboard-header {
  margin-bottom: var(--mt-space-xl);
  padding: var(--mt-space-2xl) var(--mt-space-lg);
  color: var(--mt-color-white);
  background: linear-gradient(135deg, var(--mt-color-primary) 0%, var(--mt-color-primary-dark) 100%);
  border-radius: var(--mt-radius);
}

.mt-dashboard-header h1 {
  margin-bottom: var(--mt-space-sm);
  color: var(--mt-color-white);
}

.mt-dashboard-header p {
  margin-bottom: 0;
  opacity: 0.9;
}

/* Search and Filter Bar */
.mt-search-bar {
  display: flex;
  flex-wrap: wrap;
  margin-bottom: var(--mt-space-lg);
  gap: var(--mt-space-md);
}

.mt-search-input {
  flex: 1;
  min-width: 200px;
  padding: 10px 12px;
  background: var(--mt-color-white);
  border: var(--mt-border-width) solid var(--mt-border);
  border-radius: var(--mt-radius-sm);
}

/* Removed mt-filter-select - replaced with chip-based filters */

@media (width <= 768px) {
  .mt-search-bar {
    flex-direction: column;
  }

  .mt-search-input {
    width: 100%;
  }
}

/* Ranking Badge Component */
.mt-ranking-badge {
  position: relative;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  font-weight: 700;
  transition: var(--mt-transition-fast);
}

/* Badge Size Variants - Support both old and new class names */
.mt-ranking-badge--small,
.mt-ranking-badge.mt-badge-small {
  width: 32px;
  height: 32px;
  font-size: 14px;
}

.mt-ranking-badge--medium,
.mt-ranking-badge.mt-badge-medium {
  width: 48px;
  height: 48px;
  font-size: 18px;
}

.mt-ranking-badge--large,
.mt-ranking-badge.mt-badge-large {
  width: 64px;
  height: 64px;
  font-size: 24px;
}

/* Badge Context Variants - Support both old and new class names */
.mt-ranking-badge--table,
.mt-ranking-badge.mt-badge-context-table {
  border-radius: var(--mt-radius-sm);
  box-shadow: 0 1px 3px rgb(0 0 0 / 10%);
}

.mt-ranking-badge--card,
.mt-ranking-badge.mt-badge-context-card {
  border-radius: 50%;
  box-shadow: var(--mt-shadow);
}

/* Medal Colors - Only show backgrounds when no SVG medal */
.mt-ranking-badge--gold:not(:has(.mt-medal-icon)),
.mt-ranking-badge.mt-rank-gold:not(:has(.mt-medal-icon)) {
  color: #333;
  background: linear-gradient(135deg, #FFD700, #FFA500);
  border: 2px solid #B8860B;
}

.mt-ranking-badge--silver:not(:has(.mt-medal-icon)),
.mt-ranking-badge.mt-rank-silver:not(:has(.mt-medal-icon)) {
  color: #333;
  background: linear-gradient(135deg, #E5E5E5, #B8B8B8);
  border: 2px solid #999;
}

.mt-ranking-badge--bronze:not(:has(.mt-medal-icon)),
.mt-ranking-badge.mt-rank-bronze:not(:has(.mt-medal-icon)) {
  color: #fff;
  background: linear-gradient(135deg, #CD7F32, #A0522D);
  border: 2px solid #8B4513;
}

/* Always transparent background when medal is present */
.mt-ranking-badge--gold:has(.mt-medal-icon),
.mt-ranking-badge.mt-rank-gold:has(.mt-medal-icon),
.mt-ranking-badge--silver:has(.mt-medal-icon),
.mt-ranking-badge.mt-rank-silver:has(.mt-medal-icon),
.mt-ranking-badge--bronze:has(.mt-medal-icon),
.mt-ranking-badge.mt-rank-bronze:has(.mt-medal-icon) {
  background: transparent;
  border: none;
}

.mt-ranking-badge--standard,
.mt-ranking-badge.mt-rank-standard {
  color: var(--mt-text);
  background: var(--mt-color-gray-light);
  border: 2px solid var(--mt-border);
}

/* Hide background when medal SVG is present for top 3 positions */
.mt-ranking-badge--gold.mt-ranking-badge:has(.mt-medal-icon),
.mt-ranking-badge.mt-rank-gold:has(.mt-medal-icon),
.mt-ranking-badge--silver.mt-ranking-badge:has(.mt-medal-icon),
.mt-ranking-badge.mt-rank-silver:has(.mt-medal-icon),
.mt-ranking-badge--bronze.mt-ranking-badge:has(.mt-medal-icon),
.mt-ranking-badge.mt-rank-bronze:has(.mt-medal-icon) {
  background: transparent;
  border: none;
}

/* Fallback for browsers without :has() support */
@supports not selector(:has(*)) {
  .mt-ranking-badge--gold .mt-medal-icon ~ .mt-rank-number,
  .mt-ranking-badge.mt-rank-gold .mt-medal-icon ~ .mt-rank-number,
  .mt-ranking-badge--silver .mt-medal-icon ~ .mt-rank-number,
  .mt-ranking-badge.mt-rank-silver .mt-medal-icon ~ .mt-rank-number,
  .mt-ranking-badge--bronze .mt-medal-icon ~ .mt-rank-number,
  .mt-ranking-badge.mt-rank-bronze .mt-medal-icon ~ .mt-rank-number {
    opacity: 0;
  }
}

/* Medal SVG Icon */
.mt-ranking-badge .mt-medal-icon {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  display: block;
  width: 100%;
  height: 100%;
  opacity: 1;
  pointer-events: none;
  visibility: visible;
}

/* Medal-specific colors for proper display */
.mt-ranking-badge.mt-rank-gold .mt-medal-icon .mt-medal-circle,
.mt-ranking-badge--gold .mt-medal-icon .mt-medal-circle {
  fill: #FFD700;
  filter: drop-shadow(0 2px 4px rgb(0 0 0 / 30%));
}

.mt-ranking-badge.mt-rank-gold .mt-medal-icon .mt-medal-ribbon,
.mt-ranking-badge--gold .mt-medal-icon .mt-medal-ribbon {
  fill: #B8860B;
  opacity: 0.8;
}

.mt-ranking-badge.mt-rank-silver .mt-medal-icon .mt-medal-circle,
.mt-ranking-badge--silver .mt-medal-icon .mt-medal-circle {
  fill: #C0C0C0;
  filter: drop-shadow(0 2px 4px rgb(0 0 0 / 30%));
}

.mt-ranking-badge.mt-rank-silver .mt-medal-icon .mt-medal-ribbon,
.mt-ranking-badge--silver .mt-medal-icon .mt-medal-ribbon {
  fill: #999;
  opacity: 0.8;
}

.mt-ranking-badge.mt-rank-bronze .mt-medal-icon .mt-medal-circle,
.mt-ranking-badge--bronze .mt-medal-icon .mt-medal-circle {
  fill: #CD7F32;
  filter: drop-shadow(0 2px 4px rgb(0 0 0 / 30%));
}

.mt-ranking-badge.mt-rank-bronze .mt-medal-icon .mt-medal-ribbon,
.mt-ranking-badge--bronze .mt-medal-icon .mt-medal-ribbon {
  fill: #A0522D;
  opacity: 0.8;
}

.mt-ranking-badge .mt-medal-icon .mt-medal-text {
  font-family: system-ui, -apple-system, sans-serif;
  font-weight: 700;
  fill: white;
  dominant-baseline: central;
  text-anchor: middle;
}

/* Ensure medal colors are visible and properly styled */
.mt-medal-gold {
  color: #FFD700;
}

.mt-medal-gold .mt-medal-circle {
  fill: #FFD700;
}

.mt-medal-gold .mt-medal-ribbon {
  fill: #B8860B;
}

.mt-medal-silver {
  color: #C0C0C0;
}

.mt-medal-silver .mt-medal-circle {
  fill: #C0C0C0;
}

.mt-medal-silver .mt-medal-ribbon {
  fill: #999;
}

.mt-medal-bronze {
  color: #CD7F32;
}

.mt-medal-bronze .mt-medal-circle {
  fill: #CD7F32;
}

.mt-medal-bronze .mt-medal-ribbon {
  fill: #A0522D;
}

/* Rank Number */
.mt-ranking-badge .mt-rank-number {
  position: relative;
  z-index: 2;
  font-weight: 700;
  line-height: 1;
}

/* Medal icon with number positioning - hide number when medal is shown */
.mt-ranking-badge .mt-medal-icon + .mt-rank-number {
  position: absolute;
  top: 50%;
  left: 50%;
  opacity: 0;
  transform: translate(-50%, -50%);
  pointer-events: none;
}

/* Score Display Component - Fixed centering */
.mt-score-display {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-grow: 0;
  flex-shrink: 0;
  width: 60px;
  height: 60px;
  margin: 0 auto;
  font-size: 20px;
  font-weight: 700;
  text-align: center;
  color: var(--mt-color-white);
  border-radius: 50%;
  box-shadow: 0 4px 12px rgb(0 0 0 / 15%);
  transition: var(--mt-transition-fast);
}

.mt-score-display:hover {
  box-shadow: 0 6px 16px rgb(0 0 0 / 20%);
  transform: scale(1.05);
}

/* Score size variants */
.mt-score-display--small {
  width: 40px;
  height: 40px;
  font-size: 16px;
}

.mt-score-display--large {
  width: 80px;
  height: 80px;
  font-size: 28px;
}

/* Score value - properly centered */
.mt-score-display .mt-score-value {
  display: block;
  margin: 0;
  padding: 0;
  font-weight: 700;
  line-height: 1;
  text-align: center;
  white-space: nowrap;
}

/* Score color states based on value */
.mt-score-display--high {
  background: linear-gradient(135deg, #27ae60, #2ecc71);
}

.mt-score-display--medium {
  background: linear-gradient(135deg, #f39c12, #f1c40f);
}

.mt-score-display--low {
  background: linear-gradient(135deg, #e74c3c, #c0392b);
}

/* Default score color if no state class */
.mt-score-display:not([class*="--high"], [class*="--medium"], [class*="--low"]) {
  background: var(--mt-color-primary);
}

/* Responsive adjustments */
@media (width <= 768px) {
  .mt-ranking-badge--small,
  .mt-ranking-badge.mt-badge-small {
    width: 28px;
    height: 28px;
    font-size: 12px;
  }
  
  .mt-ranking-badge--medium,
  .mt-ranking-badge.mt-badge-medium {
    width: 36px;
    height: 36px;
    font-size: 14px;
  }
  
  .mt-ranking-badge--large,
  .mt-ranking-badge.mt-badge-large {
    width: 48px;
    height: 48px;
    font-size: 18px;
  }
  
  /* Ensure medal SVG scales properly on mobile */
  .mt-ranking-badge .mt-medal-icon .mt-medal-text {
    font-size: 6px;
  }
  
  .mt-score-display {
    width: 48px;
    height: 48px;
    font-size: 18px;
  }
  
  .mt-score-display--small {
    width: 32px;
    height: 32px;
    font-size: 14px;
  }
  
  .mt-score-display--large {
    width: 64px;
    height: 64px;
    font-size: 24px;
  }
  
  /* Ensure score text remains centered on mobile */
  .mt-score-display .mt-score-value {
    font-size: inherit;
  }
}