/*
 * Partner View Modal Styles
 *
 * Styles for the read-only partner detail view modal.
 * Provides clean label-above-value field display.
 */

/* ========================================
   VIEW FIELD GROUPS - Label above value
   ======================================== */

.view-field-group {
  margin-bottom: var(--fluent-space-lg);
}

.view-field-label {
  font-size: var(--fluent-font-size-sm);
  font-weight: var(--fluent-font-weight-medium);
  color: var(--fluent-gray-60);
  margin-bottom: var(--fluent-space-xs);
  display: block;
}

.view-field-value {
  font-size: var(--fluent-font-size-md);
  color: var(--fluent-gray-90);
  line-height: 1.5;
}

/* Empty/null values */
.view-field-value:empty::after {
  content: '—';
  color: var(--fluent-gray-40);
}

/* ========================================
   PARTNER NAME BUTTON AS LINK
   ======================================== */

.btn-link-partner-name {
  background: none;
  border: none;
  padding: 0;
  color: var(--fluent-gray-100);
  cursor: pointer;
  text-decoration: none;
  font: inherit;
  font-weight: 600;
  text-align: left;
  transition: color var(--fluent-transition-fast);
}

.btn-link-partner-name:hover {
  color: var(--fluent-primary);
  text-decoration: underline;
}

.btn-link-partner-name:focus {
  outline: 2px solid var(--fluent-primary);
  outline-offset: 2px;
  border-radius: 2px;
}

/* ========================================
   VIEW MODAL TAB STYLING
   ======================================== */

/* Ensure tabs look consistent with wizard tabs */
.nav-tabs .nav-link {
  border: none;
  border-bottom: 2px solid transparent;
  color: var(--fluent-gray-70);
  padding: var(--fluent-space-md) var(--fluent-space-lg);
  transition: all var(--fluent-transition-fast);
}

.nav-tabs .nav-link:hover {
  color: var(--fluent-gray-90);
  background-color: var(--fluent-gray-5);
}

.nav-tabs .nav-link.active {
  color: var(--fluent-primary);
  border-bottom-color: var(--fluent-primary);
  background-color: transparent;
  font-weight: var(--fluent-font-weight-semibold);
}

/* ========================================
   RESPONSIVE BEHAVIOR
   ======================================== */

@media (max-width: 768px) {
  .wizard-form-row.two-col,
  .wizard-form-row.three-col,
  .wizard-form-row.address-row {
    grid-template-columns: 1fr;
  }

  .view-field-group {
    margin-bottom: var(--fluent-space-md);
  }
}