/* app/assets/stylesheets/layouts/admin_profile.css
   ─────────────────────────────────────────────────────────────────────────────
   Aspirant profile view, edit form, and shared admin form components.
   ───────────────────────────────────────────────────────────────────────────── */

/* ── Breadcrumb ──────────────────────────────────────────────────────────── */

.breadcrumb {
  display:     flex;
  align-items: center;
  gap:         var(--space-2);
  font-family: var(--font-sans);
  font-size:   var(--text-xs);
  margin-bottom: var(--space-2);
}

.breadcrumb__link {
  color:           var(--text-secondary);
  text-decoration: none;
}

.breadcrumb__link:hover {
  color: var(--link-color);
}

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

.breadcrumb__current {
  color:     var(--text-primary);
  font-weight: 500;
}

/* ── Profile header ──────────────────────────────────────────────────────── */

.aspirant-profile-header {
  display:     flex;
  align-items: flex-start;
  gap:         var(--space-4);
}

.aspirant-profile-header__identity {
  display:        flex;
  flex-direction: column;
  gap:            var(--space-2);
}

.aspirant-profile-header__area {
  font-family: var(--font-sans);
  font-size:   var(--text-sm);
  color:       var(--text-secondary);
}

/* ── Profile status bar ──────────────────────────────────────────────────── */

.profile-status-bar {
  display:     flex;
  align-items: center;
  gap:         var(--space-6);
  flex-wrap:   wrap;
  padding:     var(--space-4) 0;
  margin-bottom: var(--space-6);
  border-bottom: 1px solid var(--border-color);
}

.profile-status-bar__item {
  display:     flex;
  align-items: center;
  gap:         var(--space-2);
}

/* ── Profile two-column grid ─────────────────────────────────────────────── */

.profile-grid {
  display:               grid;
  grid-template-columns: 1fr 320px;
  gap:                   var(--space-8);
  align-items:           start;
}

.profile-grid__main { min-width: 0; }
.profile-grid__side { min-width: 0; }

/* ── Profile sections ────────────────────────────────────────────────────── */

.profile-section {
  margin-bottom: var(--space-8);
}

.profile-section:last-child {
  margin-bottom: 0;
}

/* ── Detail list (key/value pairs) ───────────────────────────────────────── */

.detail-list {
  display:        flex;
  flex-direction: column;
  gap:            1px;
  background:     var(--border-color);
  border:         1px solid var(--border-color);
}

.detail-list__item {
  display:               grid;
  grid-template-columns: 140px 1fr;
  gap:                   var(--space-3);
  background:            var(--bg-surface);
  padding:               var(--space-3) var(--space-4);
  align-items:           start;
}

.detail-list__item--full {
  grid-template-columns: 1fr;
}

.detail-list__label {
  font-family:    var(--font-sans);
  font-size:      var(--text-xs);
  font-weight:    600;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color:          var(--text-secondary);
  padding-top:    2px;
}

.detail-list__value {
  font-family:  var(--font-sans);
  font-size:    var(--text-sm);
  color:        var(--text-primary);
  line-height:  var(--leading-normal);
}

.detail-list__value--prose {
  font-size:   var(--text-sm);
  line-height: var(--leading-normal);
  color:       var(--text-secondary);
  white-space: pre-wrap;
}

/* ── Tags ────────────────────────────────────────────────────────────────── */

.tag {
  display:        inline-block;
  font-family:    var(--font-sans);
  font-size:      var(--text-xs);
  color:          var(--text-secondary);
  background:     var(--bg-sunken);
  border:         1px solid var(--border-color);
  border-radius:  var(--radius-pill);
  padding:        2px 8px;
  margin:         2px;
}

.tag--blue {
  color:      var(--color-blue-700);
  background: var(--color-blue-050);
  border-color: var(--color-blue-200);
}

/* ── Socials ─────────────────────────────────────────────────────────────── */

.social-handle {
  display:     block;
  font-family: var(--font-mono);
  font-size:   var(--text-xs);
  margin-bottom: var(--space-1);
}

.social-handle__platform {
  font-family: var(--font-sans);
  color:       var(--text-muted);
  margin-right: var(--space-1);
}

/* ── Sentiment bar ───────────────────────────────────────────────────────── */

.sentiment-summary {
  display:        flex;
  flex-direction: column;
  gap:            var(--space-4);
}

.sentiment-bar {
  display:       flex;
  height:        12px;
  border-radius: var(--radius-sm);
  overflow:      hidden;
  background:    var(--color-gray-200);
}

.sentiment-bar__positive {
  background:  var(--color-green-600);
  height:      100%;
  transition:  width var(--transition-slow);
}

.sentiment-bar__neutral {
  background:  var(--color-gray-400);
  height:      100%;
  transition:  width var(--transition-slow);
}

.sentiment-bar__negative {
  background:  var(--color-red-600);
  height:      100%;
  transition:  width var(--transition-slow);
}

.sentiment-summary__figures {
  display:               grid;
  grid-template-columns: repeat(4, 1fr);
  gap:                   1px;
  background:            var(--border-color);
  border:                1px solid var(--border-color);
}

.sentiment-figure {
  background:     var(--bg-surface);
  padding:        var(--space-3) var(--space-4);
  display:        flex;
  flex-direction: column;
  gap:            var(--space-1);
}

.sentiment-figure__label {
  font-family:    var(--font-sans);
  font-size:      var(--text-xs);
  font-weight:    600;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color:          var(--text-secondary);
}

.sentiment-figure__value {
  font-family:  var(--font-mono);
  font-size:    var(--text-lg);
  font-weight:  700;
  color:        var(--text-primary);
}

.sentiment-figure--positive .sentiment-figure__value { color: var(--color-green-600); }
.sentiment-figure--negative .sentiment-figure__value { color: var(--color-red-600); }
.sentiment-figure--net      .sentiment-figure__value { color: var(--text-primary); }

.sentiment-figure__value--positive { color: var(--color-green-600) !important; }
.sentiment-figure__value--negative { color: var(--color-red-600) !important; }

/* ── Prose block ─────────────────────────────────────────────────────────── */

.prose-block {
  font-family:  var(--font-sans);
  font-size:    var(--text-sm);
  color:        var(--text-secondary);
  line-height:  var(--leading-normal);
  background:   var(--bg-surface);
  border:       1px solid var(--border-color);
  padding:      var(--space-4);
}

.prose-block p {
  margin-bottom: var(--space-3);
}

.prose-block p:last-child {
  margin-bottom: 0;
}

/* ── Filter bar ──────────────────────────────────────────────────────────── */

.filter-bar {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  gap:             var(--space-4);
  padding:         var(--space-3) var(--space-4);
  background:      var(--bg-surface);
  border:          1px solid var(--border-color);
  flex-wrap:       wrap;
}

.filter-bar__group {
  display:     flex;
  align-items: center;
  gap:         var(--space-2);
  flex-wrap:   wrap;
}

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

.field__select--inline {
  height:     32px;
  padding:    var(--space-1) var(--space-3);
  font-size:  var(--text-sm);
  width:      auto;
}

/* ── Profile edit form ───────────────────────────────────────────────────── */

.profile-form {
  max-width: 860px;
}

.profile-form fieldset {
  margin-bottom: var(--space-8);
}

.form-row {
  display:               grid;
  grid-template-columns: 1fr 1fr;
  gap:                   var(--space-4);
  margin-bottom:         var(--space-4);
}

.field__textarea--mono {
  font-family: var(--font-mono);
  font-size:   var(--text-sm);
}

/* ── Responsive ──────────────────────────────────────────────────────────── */

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

  .profile-grid__side {
    order: -1;
  }

  .sentiment-summary__figures {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 640px) {
  .form-row {
    grid-template-columns: 1fr;
  }

  .detail-list__item {
    grid-template-columns: 1fr;
    gap:                   var(--space-1);
  }

  .profile-status-bar {
    gap: var(--space-3);
  }
}