/**
 * RADEXEL Design System - Profile Modal Component
 *
 * Displays user profile info with inline-editable phone number
 * and collapsible password change section.
 * Follows the same modal overlay pattern as feedback.css.
 */


/* ==========================================================================
   Profile Info Grid
   ========================================================================== */

.profile-info-grid {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-1) var(--space-4);
  align-items: center;
}

.profile-info-row {
  display: contents;
}

.profile-info-label {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-secondary);
  white-space: nowrap;
  padding: var(--space-2) 0;
}

.profile-info-value {
  font-size: var(--font-size-sm);
  color: var(--color-text);
  padding: var(--space-2) 0;
  word-break: break-word;
}


/* ==========================================================================
   Phone Inline Edit
   ========================================================================== */

.profile-phone-edit {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-1) 0;
}

.profile-phone-edit .profile-phone-input {
  transition:
    border-color var(--duration-fast) var(--ease-default),
    box-shadow var(--duration-fast) var(--ease-default);
}

.profile-phone-edit .profile-phone-input:focus {
  border-color: var(--color-border-focus);
  box-shadow: var(--shadow-focus);
}

.profile-phone-btn {
  transition:
    opacity var(--duration-fast) var(--ease-default),
    transform var(--duration-fast) var(--ease-default);
}

.profile-phone-btn:hover:not(:disabled) {
  opacity: 0.85;
  transform: scale(1.05);
}

.profile-phone-btn:active:not(:disabled) {
  transform: scale(0.95);
}

.profile-phone-btn svg {
  width: 14px;
  height: 14px;
}


/* ==========================================================================
   Edit Icon (pencil) in phone row
   ========================================================================== */

.profile-info-value [data-action="edit-phone"] svg {
  width: 14px;
  height: 14px;
}

.profile-info-value [data-action="edit-phone"]:hover {
  color: var(--rdx-blue);
}


/* ==========================================================================
   Password Toggle Button
   ========================================================================== */

[data-action="toggle-password"]:hover {
  color: var(--color-text);
}

[data-action="toggle-password"] svg {
  width: 16px;
  height: 16px;
}


/* ==========================================================================
   Responsive: Stack grid on narrow viewports
   ========================================================================== */

@media (max-width: 400px) {
  .profile-info-grid {
    grid-template-columns: 1fr;
    gap: 0;
  }

  .profile-info-label {
    padding-bottom: 0;
    font-size: var(--font-size-xs);
  }

  .profile-info-value {
    padding-top: 0;
    padding-bottom: var(--space-3);
  }
}