/* ==========================================================================
   Community & Pilots Pages
   Clean, modern design with better visual hierarchy
   ========================================================================== */

/* Page Layout */
.community-page,
.pilots-page {
  min-height: calc(100vh - var(--navbar-height));
  background: var(--color-bg-body);
}

.community-page .page-content,
.pilots-page .page-content {
  max-width: 1200px;
  margin: 0 auto;
  padding: var(--space-8) var(--space-6);
}

/* Page Header */
.page-header {
  margin-bottom: var(--space-8);
}

.page-header-content {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-4);
  flex-wrap: wrap;
}

.page-title {
  font-size: var(--font-size-3xl);
  font-weight: var(--font-weight-bold);
  color: var(--color-text-primary);
  margin: 0 0 var(--space-2);
  letter-spacing: var(--letter-spacing-tight);
}

.page-description {
  font-size: var(--font-size-lg);
  color: var(--color-text-secondary);
  margin: 0;
  max-width: 600px;
}

/* User Stats Bar */
.user-stats-bar {
  display: flex;
  gap: var(--space-6);
  padding: var(--space-4) var(--space-6);
  background: var(--color-bg-surface);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  margin-bottom: var(--space-6);
  flex-wrap: wrap;
  border: var(--border-width) solid var(--color-border-muted);
}

.user-stat {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.user-stat-value {
  font-size: var(--font-size-2xl);
  font-weight: var(--font-weight-bold);
  color: var(--color-primary-600);
  line-height: 1;
}

.user-stat-label {
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
}

/* Join CTA */
.join-cta {
  background: linear-gradient(135deg, #1db954 0%, #0f766e 100%);
  border-radius: var(--radius-lg);
  padding: var(--space-8);
  margin-bottom: var(--space-6);
  text-align: center;
  color: white;
}

.join-cta h3 {
  color: white;
  margin: 0 0 var(--space-2);
  font-size: var(--font-size-xl);
}

.join-cta p {
  color: rgba(255, 255, 255, 0.9);
  margin: 0 0 var(--space-4);
}

.join-cta .btn {
  background: white;
  color: #0f2a1b;
}

.join-cta .btn:hover {
  background: var(--color-gray-100);
}

/* Main Grid Layout */
.community-layout {
  display: grid;
  grid-template-columns: 1fr 340px;
  gap: var(--space-6);
  align-items: start;
}

@media (max-width: 1024px) {
  .community-layout {
    grid-template-columns: 1fr;
  }
  
  .community-sidebar {
    order: -1;
  }
}

/* Cards */
.content-card {
  background: var(--color-bg-surface);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}

.card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-5) var(--space-6);
  border-bottom: 1px solid var(--color-border-muted);
}

.card-title {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
  margin: 0;
}

.card-body {
  padding: var(--space-5) var(--space-6);
}

.card-body-flush {
  padding: 0;
}

/* Create Post */
.create-post {
  padding: var(--space-5) var(--space-6);
}

.create-post-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.post-input-row {
  display: flex;
  gap: var(--space-4);
  align-items: flex-start;
}

.post-avatar {
  flex-shrink: 0;
}

.post-textarea {
  flex: 1;
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  font-size: var(--font-size-base);
  font-family: inherit;
  resize: vertical;
  min-height: 80px;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.post-textarea:focus {
  outline: none;
  border-color: var(--color-primary-500);
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.post-textarea::placeholder {
  color: var(--color-text-muted);
}

.post-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  flex-wrap: wrap;
}

.post-options {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.post-option-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  background: var(--color-bg-muted);
  border: none;
  border-radius: var(--radius-md);
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  cursor: pointer;
  transition: background var(--transition-fast);
}

.post-option-btn:hover {
  background: var(--color-bg-subtle);
}

.post-submit-group {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.visibility-select {
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  font-size: var(--font-size-sm);
  background: var(--color-bg-surface);
  color: var(--color-text-primary);
}

.media-preview {
  margin-top: var(--space-4);
  position: relative;
}

.media-preview img,
.media-preview video {
  max-width: 100%;
  max-height: 300px;
  border-radius: var(--radius-md);
  object-fit: cover;
}

.media-remove-btn {
  position: absolute;
  top: var(--space-2);
  right: var(--space-2);
  background: rgba(0, 0, 0, 0.7);
  color: white;
  border: none;
  border-radius: var(--radius-sm);
  padding: var(--space-1) var(--space-2);
  font-size: var(--font-size-xs);
  cursor: pointer;
}

/* Feed */
.feed-section {
  margin-bottom: var(--space-6);
}

.feed-section-title {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-secondary);
  text-transform: uppercase;
  letter-spacing: var(--letter-spacing-wide);
  padding: var(--space-4) var(--space-6);
  margin: 0;
  background: var(--color-bg-muted);
  border-bottom: 1px solid var(--color-border-muted);
}

/* Post Item */
.post-item {
  padding: var(--space-5) var(--space-6);
  border-bottom: 1px solid var(--color-border-muted);
}

.post-item:last-child {
  border-bottom: none;
}

.post-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: var(--space-3);
}

.post-author {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.post-author-info {
  display: flex;
  flex-direction: column;
}

.post-author-name {
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
}

.post-author-name:hover {
  color: var(--color-primary-600);
}

.post-meta {
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
}

.post-content {
  color: var(--color-text-primary);
  line-height: var(--line-height-relaxed);
  margin-bottom: var(--space-4);
}

.post-content p {
  margin: 0;
  color: inherit;
}

.post-media {
  margin-bottom: var(--space-4);
  border-radius: var(--radius-md);
  overflow: hidden;
}

.post-media img {
  width: 100%;
  max-height: 400px;
  object-fit: cover;
}

.post-media video {
  width: 100%;
  max-height: 500px;
  background: black;
}

.post-footer {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding-top: var(--space-3);
  border-top: 1px solid var(--color-border-muted);
}

.post-action {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2) var(--space-3);
  background: none;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  cursor: pointer;
  text-decoration: none;
  transition: all var(--transition-fast);
}

.post-action:hover {
  background: var(--color-bg-muted);
  border-color: var(--color-border-strong);
}

.post-action.liked {
  background: var(--color-danger-50);
  border-color: var(--color-danger-100);
  color: var(--color-danger-600);
}

.post-action.delete {
  margin-left: auto;
  color: var(--color-danger-600);
  border-color: var(--color-danger-100);
}

.post-action.delete:hover {
  background: var(--color-danger-50);
}

/* Activity Item */
.activity-item {
  padding: var(--space-4) var(--space-6);
  border-bottom: 1px solid var(--color-border-muted);
  display: flex;
  gap: var(--space-4);
  align-items: flex-start;
}

.activity-item:last-child {
  border-bottom: none;
}

.activity-indicator {
  width: 8px;
  height: 8px;
  background: var(--color-primary-500);
  border-radius: 50%;
  margin-top: var(--space-2);
  flex-shrink: 0;
}

.activity-content {
  flex: 1;
  min-width: 0;
}

.activity-text {
  color: var(--color-text-primary);
  margin: 0 0 var(--space-1);
  font-size: var(--font-size-sm);
}

.activity-text a {
  font-weight: var(--font-weight-semibold);
}

.activity-details {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
}

.activity-time {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  flex-shrink: 0;
}

/* Flight Item (in activity) */
.flight-activity {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-4) var(--space-6);
  border-bottom: 1px solid var(--color-border-muted);
  text-decoration: none;
  color: inherit;
  transition: background var(--transition-fast);
}

.flight-activity:hover {
  background: var(--color-bg-muted);
}

.flight-activity:last-child {
  border-bottom: none;
}

.flight-date-badge {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-width: 52px;
  padding: var(--space-2) var(--space-3);
  background: var(--color-primary-600);
  color: white;
  border-radius: var(--radius-md);
}

.flight-date-day {
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-bold);
  line-height: 1;
}

.flight-date-month {
  font-size: var(--font-size-xs);
  text-transform: uppercase;
  opacity: 0.9;
}

.flight-info {
  flex: 1;
  min-width: 0;
}

.flight-location {
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
  margin-bottom: var(--space-1);
}

.flight-stats-inline {
  display: flex;
  gap: var(--space-4);
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
}

/* Sidebar */
.community-sidebar {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}

.sidebar-card {
  background: var(--color-bg-surface);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}

.sidebar-header {
  padding: var(--space-4) var(--space-5);
  border-bottom: 1px solid var(--color-border-muted);
}

.sidebar-title {
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
  margin: 0;
}

/* Pilot Suggestion */
.pilot-suggestion {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-5);
  border-bottom: 1px solid var(--color-border-muted);
}

.pilot-suggestion:last-child {
  border-bottom: none;
}

.pilot-suggestion-info {
  flex: 1;
  min-width: 0;
}

.pilot-suggestion-name {
  font-weight: var(--font-weight-medium);
  color: var(--color-text-primary);
  font-size: var(--font-size-sm);
}

.pilot-suggestion-name:hover {
  color: var(--color-primary-600);
}

.pilot-suggestion-location {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
}

.pilot-suggestion-action {
  flex-shrink: 0;
}

/* Club Item */
.club-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-3) var(--space-5);
  border-bottom: 1px solid var(--color-border-muted);
}

.club-item:last-child {
  border-bottom: none;
}

.club-name {
  font-weight: var(--font-weight-medium);
  color: var(--color-text-primary);
  font-size: var(--font-size-sm);
}

.club-name:hover {
  color: var(--color-primary-600);
}

.club-members {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
}

/* Event Item */
.event-item {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-5);
  border-bottom: 1px solid var(--color-border-muted);
}

.event-item:last-child {
  border-bottom: none;
}

.event-date {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 40px;
  padding: var(--space-2);
  background: var(--color-bg-muted);
  border-radius: var(--radius-sm);
}

.event-date-day {
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-bold);
  color: var(--color-text-primary);
  line-height: 1;
}

.event-date-month {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  text-transform: uppercase;
}

.event-name {
  font-weight: var(--font-weight-medium);
  color: var(--color-text-primary);
  font-size: var(--font-size-sm);
}

/* See More Link */
.see-more-link {
  display: block;
  padding: var(--space-3) var(--space-5);
  text-align: center;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-primary-600);
  background: var(--color-bg-muted);
}

.see-more-link:hover {
  background: var(--color-bg-subtle);
}

/* Empty State */
.empty-state {
  text-align: center;
  padding: var(--space-10) var(--space-6);
  color: var(--color-text-secondary);
}

.empty-state-icon {
  font-size: var(--font-size-4xl);
  margin-bottom: var(--space-4);
  opacity: 0.5;
}

.empty-state-title {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
  margin: 0 0 var(--space-2);
}

.empty-state-text {
  margin: 0;
  font-size: var(--font-size-sm);
}

/* ========================================
   Pilots Search & Directory
   ======================================== */

/* Search Form */
.search-card {
  margin-bottom: var(--space-6);
}

.search-form {
  padding: var(--space-5) var(--space-6);
}

.search-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-4);
}

@media (min-width: 768px) {
  .search-grid {
    grid-template-columns: 2fr 1fr 1fr;
  }
}

@media (min-width: 1024px) {
  .search-grid {
    grid-template-columns: 2fr 1fr 1fr auto;
  }
}

.form-group {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.form-label {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-secondary);
}

.form-input,
.form-select {
  padding: var(--space-3);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  font-size: var(--font-size-sm);
  background: var(--color-bg-surface);
  color: var(--color-text-primary);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.form-input:focus,
.form-select:focus {
  outline: none;
  border-color: var(--color-primary-500);
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.form-input::placeholder {
  color: var(--color-text-muted);
}

.checkbox-group {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  padding: var(--space-4) var(--space-6);
  background: var(--color-bg-muted);
  border-top: 1px solid var(--color-border-muted);
}

.checkbox-label {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  cursor: pointer;
}

.checkbox-label input[type="checkbox"] {
  width: 16px;
  height: 16px;
  accent-color: var(--color-primary-600);
}

.search-actions {
  display: flex;
  gap: var(--space-3);
  padding: var(--space-4) var(--space-6);
  border-top: 1px solid var(--color-border-muted);
}

/* Pilots Grid */
.pilots-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-4) var(--space-6);
  border-bottom: 1px solid var(--color-border-muted);
}

.pilots-count {
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
}

.pilots-grid {
  display: grid;
  gap: 1px;
  background: var(--color-border-muted);
}

/* Pilot Card */
.pilot-card {
  display: flex;
  gap: var(--space-4);
  padding: var(--space-5) var(--space-6);
  background: var(--color-bg-surface);
  text-decoration: none;
  color: inherit;
  transition: background var(--transition-fast);
}

.pilot-card:hover {
  background: var(--color-bg-muted);
}

.pilot-card-avatar {
  flex-shrink: 0;
}

.pilot-card-content {
  flex: 1;
  min-width: 0;
}

.pilot-card-header {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-2);
}

.pilot-card-name {
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
  margin: 0;
}

.pilot-card-badges {
  display: flex;
  gap: var(--space-2);
}

.pilot-badge {
  display: inline-flex;
  align-items: center;
  padding: var(--space-1) var(--space-2);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  border-radius: var(--radius-full);
}

.pilot-badge.mentor {
  background: var(--color-warning-100);
  color: var(--color-warning-700);
}

.pilot-badge.available {
  background: var(--color-success-100);
  color: var(--color-success-700);
}

.pilot-card-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  margin-bottom: var(--space-2);
}

.pilot-card-bio {
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  line-height: var(--line-height-normal);
  margin: 0;
}

.pilot-card-stats {
  display: flex;
  gap: var(--space-4);
  margin-top: var(--space-3);
  font-size: var(--font-size-sm);
}

.pilot-card-stat {
  color: var(--color-text-muted);
}

.pilot-card-stat strong {
  color: var(--color-text-primary);
  font-weight: var(--font-weight-semibold);
}

.pilot-card-actions {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  flex-shrink: 0;
}

/* Pagination */
.pagination-wrapper {
  padding: var(--space-6);
  display: flex;
  justify-content: center;
}

/* ========================================
   Pilot Profile Page
   ======================================== */

.profile-page {
  min-height: calc(100vh - var(--navbar-height));
  background: var(--color-bg-body);
}

.profile-content {
  max-width: 960px;
  margin: 0 auto;
  padding: var(--space-8) var(--space-6);
}

/* Profile Header */
.profile-header-card {
  background: var(--color-bg-surface);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  margin-bottom: var(--space-6);
}

.profile-header-content {
  display: flex;
  gap: var(--space-6);
  padding: var(--space-8);
}

@media (max-width: 640px) {
  .profile-header-content {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }
}

.profile-avatar-lg {
  flex-shrink: 0;
}

.profile-info {
  flex: 1;
  min-width: 0;
}

.profile-name {
  font-size: var(--font-size-2xl);
  font-weight: var(--font-weight-bold);
  color: var(--color-text-primary);
  margin: 0 0 var(--space-2);
}

.profile-location,
.profile-since {
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  margin: 0 0 var(--space-1);
}

.profile-bio {
  font-size: var(--font-size-base);
  color: var(--color-text-primary);
  line-height: var(--line-height-relaxed);
  margin: var(--space-4) 0;
}

.profile-badges {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-4);
}

.profile-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-1) var(--space-3);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  border-radius: var(--radius-full);
}

.profile-badge.premium {
  background: linear-gradient(135deg, #fbbf24, #f59e0b);
  color: #78350f;
}

.profile-badge.license {
  background: var(--color-primary-100);
  color: var(--color-primary-700);
}

.profile-badge.mentor {
  background: var(--color-warning-100);
  color: var(--color-warning-700);
}

.profile-badge.available {
  background: var(--color-success-100);
  color: var(--color-success-700);
}

.profile-actions {
  display: flex;
  gap: var(--space-3);
  flex-shrink: 0;
}

@media (max-width: 640px) {
  .profile-actions {
    width: 100%;
    justify-content: center;
  }
}

/* Stats Grid */
.stats-section {
  margin-bottom: var(--space-6);
}

.stats-section-header {
  margin-bottom: var(--space-4);
}

.stats-section-title {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
  margin: 0;
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-4);
}

@media (max-width: 640px) {
  .stats-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

.stat-card {
  background: var(--color-bg-surface);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  text-align: center;
  box-shadow: var(--shadow-sm);
}

.stat-card-value {
  font-size: var(--font-size-3xl);
  font-weight: var(--font-weight-bold);
  color: var(--color-primary-600);
  line-height: 1;
  margin-bottom: var(--space-1);
}

.stat-card-label {
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  text-transform: uppercase;
  letter-spacing: var(--letter-spacing-wide);
}

/* Season Card */
.season-card {
  background: var(--color-bg-surface);
  border-radius: var(--radius-lg);
  padding: var(--space-5) var(--space-6);
  box-shadow: var(--shadow-sm);
  margin-bottom: var(--space-6);
}

.season-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-4);
}

.season-title {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
  margin: 0;
}

.year-selector {
  display: flex;
  gap: var(--space-1);
}

.year-btn {
  padding: var(--space-2) var(--space-3);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-secondary);
  background: var(--color-bg-muted);
  border-radius: var(--radius-md);
  text-decoration: none;
  transition: all var(--transition-fast);
}

.year-btn:hover {
  background: var(--color-bg-subtle);
}

.year-btn.active {
  background: var(--color-primary-600);
  color: white;
}

.season-stats {
  display: flex;
  gap: var(--space-8);
  flex-wrap: wrap;
}

.season-stat {
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
}

.season-stat strong {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-bold);
  color: var(--color-text-primary);
}

/* Profile Cards Grid */
.profile-cards-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-4);
  margin-bottom: var(--space-6);
}

@media (max-width: 768px) {
  .profile-cards-grid {
    grid-template-columns: 1fr;
  }
}

.profile-card {
  background: var(--color-bg-surface);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}

.profile-card-header {
  padding: var(--space-4) var(--space-5);
  border-bottom: 1px solid var(--color-border-muted);
}

.profile-card-title {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-secondary);
  text-transform: uppercase;
  letter-spacing: var(--letter-spacing-wide);
  margin: 0;
}

.profile-card-body {
  padding: var(--space-4) var(--space-5);
}

/* Sites List */
.sites-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.site-item {
  display: flex;
  justify-content: space-between;
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--color-border-muted);
}

.site-item:last-child {
  border-bottom: none;
}

.site-name {
  font-weight: var(--font-weight-medium);
  color: var(--color-text-primary);
}

.site-count {
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
}

/* Gliders List */
.gliders-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.glider-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-3) 0;
  border-bottom: 1px solid var(--color-border-muted);
}

.glider-item:last-child {
  border-bottom: none;
}

.glider-main {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.glider-name {
  font-weight: var(--font-weight-medium);
  color: var(--color-text-primary);
}

.glider-tracked {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  font-size: 10px;
  background: var(--color-success-500);
  color: white;
  border-radius: 50%;
}

.glider-cert {
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  padding: var(--space-1) var(--space-2);
  background: var(--color-primary-100);
  color: var(--color-primary-700);
  border-radius: var(--radius-sm);
  text-transform: uppercase;
}

.glider-stats {
  display: flex;
  gap: var(--space-3);
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
}

/* Records Grid */
.records-grid {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.record-item {
  display: flex;
  justify-content: space-between;
}

.record-label {
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
}

.record-value {
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
}

/* Flights Section */
.flights-section {
  background: var(--color-bg-surface);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  margin-bottom: var(--space-6);
}

.flights-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-5) var(--space-6);
  border-bottom: 1px solid var(--color-border-muted);
}

.flights-title {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
  margin: 0;
}

.flights-count {
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
}

.flights-list {
  display: flex;
  flex-direction: column;
}

.flight-row {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-4) var(--space-6);
  border-bottom: 1px solid var(--color-border-muted);
  text-decoration: none;
  color: inherit;
  transition: background var(--transition-fast);
}

.flight-row:last-child {
  border-bottom: none;
}

.flight-row:hover {
  background: var(--color-bg-muted);
}

.flight-date {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 48px;
  padding: var(--space-2);
  background: var(--color-primary-600);
  color: white;
  border-radius: var(--radius-md);
}

.flight-day {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-bold);
  line-height: 1;
}

.flight-month {
  font-size: var(--font-size-xs);
  text-transform: uppercase;
  opacity: 0.9;
}

.flight-details {
  flex: 1;
  min-width: 0;
}

.flight-location {
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
  margin-bottom: var(--space-1);
}

.flight-meta {
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
}

.flight-stat-badges {
  display: flex;
  gap: var(--space-2);
  flex-shrink: 0;
}

.flight-stat-badge {
  padding: var(--space-1) var(--space-2);
  background: var(--color-bg-muted);
  border-radius: var(--radius-sm);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-secondary);
}

/* Flight Plans */
.flight-plans-section {
  background: var(--color-bg-surface);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  margin-bottom: var(--space-6);
}

.flight-plan-row {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-4) var(--space-6);
  border-bottom: 1px solid var(--color-border-muted);
  text-decoration: none;
  color: inherit;
  transition: background var(--transition-fast);
}

.flight-plan-row:last-child {
  border-bottom: none;
}

.flight-plan-row:hover {
  background: var(--color-bg-muted);
}

.flight-plan-icon {
  font-size: var(--font-size-xl);
}

.flight-plan-info {
  flex: 1;
}

.flight-plan-name {
  font-weight: var(--font-weight-semibold);
  color: var(--color-text-primary);
  margin-bottom: var(--space-1);
}

.flight-plan-meta {
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
}

.flight-plan-arrow {
  color: var(--color-text-muted);
}

/* Share Section */
.share-section {
  text-align: center;
  padding: var(--space-4);
}

.share-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-5);
  background: var(--color-bg-muted);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-primary);
  cursor: pointer;
  transition: all var(--transition-fast);
}

.share-btn:hover {
  background: var(--color-bg-subtle);
}

/* Utility: Hidden file input */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}